:root{
  color-scheme:light;
  --bg:#f6f6f7; --surface:#ffffff; --fg:#1a1c1f; --muted:#5c6168; --rule:#e1e3e5;
  --brand:#008060; --brand-strong:#005e46; --brand-soft:#e3f1ec; --on-brand:#ffffff;
  --crit:#c4290c; --crit-soft:#fdecea; --crit-rule:#f2b8ac;
  --warn-soft:#fff5d9; --warn-rule:#e6c25c;
  --code-bg:#14191f; --code-fg:#e3e7ec; --code-key:#7fd6b5; --code-str:#f0b37e;
  --shadow:0 1px 2px rgba(0,0,0,.06),0 8px 24px rgba(0,0,0,.06);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:17px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
}
a{color:var(--brand-strong); text-decoration-thickness:1px; text-underline-offset:2px}
code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:.88em;
  background:var(--brand-soft); color:var(--fg); padding:.1em .35em; border-radius:4px}
pre{background:var(--code-bg); color:var(--code-fg); border-radius:10px;
  padding:1.1rem 1.2rem; overflow-x:auto; margin:0 0 1.3rem}
pre code{background:none; color:inherit; padding:0; font-size:.85rem; line-height:1.6}
pre .k{color:var(--code-key)} pre .s{color:var(--code-str)}
h1,h2,h3{letter-spacing:-.015em; line-height:1.2}
h2{font-size:clamp(1.45rem,3.6vw,1.9rem); margin:0 0 .8rem}
h3{font-size:1.08rem; margin:0 0 .4rem}
p{margin:0 0 1.1rem}
ol,ul{margin:0 0 1.2rem; padding-left:1.4rem}
li{margin-bottom:.5rem}

/* ---------- layout ---------- */
.container{max-width:68rem; margin:0 auto; padding-inline:16px}
.narrow{max-width:46rem}
section{padding-block:3.5rem}
section.alt{background:var(--surface); border-block:1px solid var(--rule)}
.eyebrow{display:inline-block; font-size:.78rem; font-weight:650; text-transform:uppercase;
  letter-spacing:.07em; color:var(--brand-strong); margin-bottom:.7rem}
.section-lede{color:var(--muted); font-size:1.05rem; max-width:44rem; margin-bottom:2rem}

/* ---------- header ---------- */
.site-header{background:var(--surface); border-bottom:1px solid var(--rule)}
.site-header .container{display:flex; align-items:center; justify-content:space-between;
  gap:1rem; min-height:64px; flex-wrap:wrap}
.brand{display:flex; align-items:center; gap:.55rem; color:var(--fg); text-decoration:none;
  font-weight:750; font-size:1.12rem; letter-spacing:-.02em}
.brand svg{width:30px; height:30px; flex:none}
.brand span b{color:var(--brand)}
.nav{display:flex; gap:1.2rem; font-size:.93rem}
.nav a{color:var(--muted); text-decoration:none}
.nav a:hover{color:var(--fg)}
@media (max-width:640px){ .nav{display:none} }

/* ---------- hero ---------- */
.hero{padding-block:3.5rem 4rem}
.hero .container{display:grid; grid-template-columns:1.05fr .95fr; gap:3rem; align-items:center}
@media (max-width:900px){ .hero .container{grid-template-columns:1fr; gap:2.5rem} }
.pill{display:inline-flex; align-items:center; gap:.45rem; font-size:.82rem; font-weight:600;
  color:var(--brand-strong); background:var(--brand-soft); padding:.3em .8em;
  border-radius:99px; margin-bottom:1.2rem}
.pill::before{content:""; width:7px; height:7px; border-radius:50%; background:var(--brand)}
.hero h1{font-size:clamp(2rem,5.4vw,3.1rem); margin:0 0 1rem; letter-spacing:-.03em}
.hero h1 em{font-style:normal; color:var(--brand)}
.catch{font-size:clamp(1.12rem,2.4vw,1.32rem); line-height:1.5; margin:0 0 1rem; font-weight:500}
.catch strong{color:var(--crit)}
.hero .sub{color:var(--muted); margin-bottom:1.8rem}
.actions{display:flex; gap:.75rem; flex-wrap:wrap}
.btn{display:inline-block; padding:.75rem 1.2rem; border-radius:10px; font-weight:650;
  text-decoration:none; font-size:.98rem; border:1px solid transparent}
.btn.primary{background:var(--brand); color:var(--on-brand)}
.btn.primary:hover{background:var(--brand-strong)}
.btn.ghost{border-color:var(--rule); color:var(--fg); background:var(--surface)}
.btn.ghost:hover{border-color:var(--muted)}

/* ---------- checkout mockups ---------- */
.mock-stack{display:grid; gap:1rem}
.mock{background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  box-shadow:var(--shadow); overflow:hidden}
.mock-bar{display:flex; align-items:center; justify-content:space-between; gap:.5rem;
  padding:.6rem .95rem; border-bottom:1px solid var(--rule); font-size:.82rem; color:var(--muted)}
.mock-bar .who{display:flex; align-items:center; gap:.5rem; font-weight:600; color:var(--fg)}
.cc{display:inline-grid; place-items:center; min-width:1.9rem; height:1.3rem; font-size:.7rem;
  font-weight:750; border-radius:4px; background:var(--bg); border:1px solid var(--rule); color:var(--fg)}
.status{font-size:.75rem; font-weight:700; padding:.15em .6em; border-radius:99px}
.status.ok{background:var(--brand-soft); color:var(--brand-strong)}
.status.bad{background:var(--crit-soft); color:var(--crit)}
.mock-body{padding:1rem .95rem 1.05rem}
.mock-label{font-size:.9rem; font-weight:650; margin-bottom:.55rem}
.opt{display:flex; align-items:center; gap:.65rem; padding:.62rem .8rem; border:1px solid var(--rule);
  font-size:.92rem}
.opt + .opt{border-top:0}
.opt:first-of-type{border-radius:8px 8px 0 0}
.opt:last-of-type{border-radius:0 0 8px 8px}
.opt.sel{border-color:var(--brand); background:var(--brand-soft)}
.opt .radio{width:16px; height:16px; border-radius:50%; border:1.5px solid var(--muted); flex:none}
.opt.sel .radio{border:5px solid var(--brand)}
.opt .price{margin-left:auto; font-weight:650}
.alert{display:flex; gap:.7rem; background:var(--crit-soft); border:1px solid var(--crit-rule);
  border-radius:8px; padding:.75rem .85rem; font-size:.88rem; line-height:1.45}
.alert svg{flex:none; width:18px; height:18px; margin-top:.1rem; color:var(--crit)}
.alert b{display:block; color:var(--crit); margin-bottom:.15rem}
.paybtn{margin-top:.85rem; text-align:center; padding:.6rem; border-radius:8px; font-weight:650;
  font-size:.9rem; background:var(--brand); color:var(--on-brand)}
.paybtn.off{background:var(--rule); color:var(--muted)}
.mock-caption{font-size:.84rem; color:var(--muted); margin:.2rem .2rem 0}

/* ---------- framed example (reads as a screenshot, not as UI) ---------- */
.shot{margin:0; border:1px solid var(--rule); border-radius:14px; background:var(--bg);
  box-shadow:var(--shadow); overflow:hidden; transform:rotate(.6deg)}
@media (max-width:900px){ .shot{transform:none} }
.shot-bar{display:flex; align-items:center; gap:.7rem; padding:.55rem .85rem;
  background:var(--surface); border-bottom:1px solid var(--rule); font-size:.78rem; color:var(--muted)}
.shot-bar .dots{display:flex; gap:5px}
.shot-bar .dots i{width:9px; height:9px; border-radius:50%; background:var(--rule)}
.shot-title{flex:1; text-align:center; background:var(--bg); border-radius:6px; padding:.12rem .5rem;
  max-width:16rem; margin-inline:auto}
.shot-tag{font-weight:750; text-transform:uppercase; letter-spacing:.07em; font-size:.68rem;
  color:var(--muted); border:1px dashed var(--muted); border-radius:4px; padding:.1em .45em}
.shot .mock-stack{padding:1rem; pointer-events:none; user-select:none; -webkit-user-select:none;
  font-size:.95em}
.shot .mock{box-shadow:none}
.shot .paybtn{background:transparent; color:var(--brand-strong); border:1.5px solid var(--brand)}
.shot .paybtn.off{color:var(--muted); border-color:var(--rule); border-style:dashed}
.shot figcaption{font-size:.84rem; color:var(--muted); padding:.75rem 1rem .9rem;
  border-top:1px solid var(--rule); background:var(--surface)}

/* ---------- limit of the free test ---------- */
.limit{margin-top:2rem; border:1px solid var(--brand); background:var(--brand-soft);
  border-radius:12px; padding:1.1rem 1.25rem}
.limit strong{display:block; margin-bottom:.3rem}
.limit p{margin:0}

/* ---------- silence strip ---------- */
.silence{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem; margin-top:.5rem}
@media (max-width:760px){ .silence{grid-template-columns:1fr} }
.silence div{background:var(--bg); border:1px solid var(--rule); border-radius:12px; padding:1.1rem 1.2rem}
section.alt .silence div{background:var(--bg)}
.silence .big{font-size:1.05rem; font-weight:700; display:block; margin-bottom:.25rem}
.silence .x{color:var(--crit)}
.silence p{margin:0; color:var(--muted); font-size:.93rem}

/* ---------- views table ---------- */
.views{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
@media (max-width:760px){ .views{grid-template-columns:1fr} }
.view{border:1px solid var(--rule); border-radius:12px; padding:1.1rem 1.2rem; background:var(--surface)}
.view .where{font-size:.8rem; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); font-weight:650}
.view .says{font-weight:700; font-size:1.05rem; margin:.35rem 0 .3rem}
.view.good .says{color:var(--brand-strong)}
.view.bad{border-color:var(--crit-rule); background:var(--crit-soft)}
.view.bad .says{color:var(--crit)}
.view p{margin:0; font-size:.92rem; color:var(--muted)}

/* ---------- test ---------- */
.test-grid{display:grid; grid-template-columns:1fr 1fr; gap:2rem; align-items:start}
@media (max-width:900px){ .test-grid{grid-template-columns:1fr} }
table{width:100%; border-collapse:collapse; font-size:.94rem}
th,td{text-align:left; padding:.6rem .7rem; border-bottom:1px solid var(--rule); vertical-align:top}
th{font-weight:650; color:var(--muted); font-size:.78rem; text-transform:uppercase; letter-spacing:.05em}
.scroll{overflow-x:auto; margin:0 0 1.3rem; border:1px solid var(--rule); border-radius:12px; background:var(--surface)}
.scroll table{min-width:28rem}
.scroll tr:last-child td{border-bottom:0}

/* ---------- causes ---------- */
.causes{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
@media (max-width:760px){ .causes{grid-template-columns:1fr} }
.cause{position:relative; background:var(--surface); border:1px solid var(--rule); border-radius:12px;
  padding:1.25rem 1.3rem 1.1rem}
.cause .num{display:inline-grid; place-items:center; width:1.8rem; height:1.8rem; border-radius:8px;
  background:var(--bg); border:1px solid var(--rule); font-weight:750; font-size:.9rem; margin-bottom:.7rem}
.cause.missed{border-color:var(--brand)}
.cause.missed .num{background:var(--brand); color:var(--on-brand); border-color:var(--brand)}
.cause .flag{position:absolute; top:1.2rem; right:1.2rem; font-size:.72rem; font-weight:700;
  text-transform:uppercase; letter-spacing:.05em; color:var(--brand-strong); background:var(--brand-soft);
  padding:.2em .6em; border-radius:99px}
.cause p{font-size:.95rem; margin-bottom:.75rem}
.cause p:last-child{margin-bottom:0}
.cause.wide{grid-column:1/-1}
.cause pre{margin-bottom:.75rem}

/* ---------- product ---------- */
.product{display:grid; grid-template-columns:1fr 1fr; gap:2.5rem; align-items:center}
@media (max-width:900px){ .product{grid-template-columns:1fr} }
.checks{list-style:none; padding:0}
.checks li{position:relative; padding-left:1.8rem}
.checks li::before{content:""; position:absolute; left:0; top:.35rem; width:1.1rem; height:1.1rem;
  border-radius:50%; background:var(--brand-soft); border:2px solid var(--brand)}
.email{background:var(--surface); border:1px solid var(--rule); border-radius:14px; box-shadow:var(--shadow);
  overflow:hidden; font-size:.92rem}
.email-head{padding:.8rem 1rem; border-bottom:1px solid var(--rule); line-height:1.5}
.email-head .meta{color:var(--muted); font-size:.82rem}
.email-head .subj{font-weight:700}
.email-body{padding:1rem}
.email-body p{margin-bottom:.7rem}
.email-body .tag-crit{display:inline-block; font-size:.72rem; font-weight:750; color:#fff; background:var(--crit);
  padding:.15em .55em; border-radius:4px; margin-right:.4rem; vertical-align:1px}
.email-body .miss{background:var(--crit-soft); border-left:3px solid var(--crit); padding:.55rem .75rem;
  border-radius:0 6px 6px 0; margin-bottom:.7rem}
.soon{display:inline-block; font-size:.78rem; font-weight:700; color:var(--muted); border:1px dashed var(--muted);
  padding:.2em .7em; border-radius:99px; margin-bottom:.8rem}

/* ---------- article pages ---------- */
.article{padding-block:2.5rem 4rem}
.crumbs{font-size:.88rem; margin-bottom:1.3rem; color:var(--muted)}
.article h1{font-size:clamp(1.85rem,5vw,2.5rem); margin:0 0 .8rem; letter-spacing:-.025em}
.article h2{font-size:1.35rem; margin:2.6rem 0 .75rem}
.lede{font-size:1.12rem; color:var(--muted); margin-bottom:2rem}
.tag{display:inline-block; font-size:.75rem; text-transform:uppercase; letter-spacing:.06em;
  color:var(--brand-strong); background:var(--brand-soft); padding:.25em .7em; border-radius:99px;
  margin-bottom:1rem; font-weight:650}
.card{background:var(--surface); border:1px solid var(--rule); border-left:4px solid var(--brand);
  border-radius:10px; padding:1.1rem 1.25rem; margin:0 0 1.5rem}
.note{background:var(--warn-soft); border:1px solid var(--warn-rule); border-radius:10px;
  padding:1rem 1.15rem; margin:0 0 1.5rem}
.note strong{display:block; margin-bottom:.3rem}
.related{list-style:none; padding:0}
.related li{margin-bottom:.8rem}
.related small{display:block; color:var(--muted)}
hr{border:0; border-top:1px solid var(--rule); margin:2.5rem 0}

/* ---------- store checker ---------- */
.checker{background:var(--surface); border:1px solid var(--rule); border-radius:14px;
  padding:1.2rem 1.25rem; margin:1.5rem 0; box-shadow:var(--shadow)}
.checker label{display:block; font-weight:650; margin-bottom:.5rem}
.checker-row{display:flex; gap:.6rem; flex-wrap:wrap}
.checker input{flex:1 1 16rem; min-width:0; font:inherit; font-size:1rem; padding:.7rem .85rem;
  border:1px solid var(--muted); border-radius:10px; background:#fff; color:var(--fg)}
.checker input:focus{outline:3px solid var(--brand-soft); border-color:var(--brand)}
.checker button{font:inherit; font-weight:650; padding:.7rem 1.2rem; border:0; border-radius:10px;
  background:var(--brand); color:var(--on-brand); cursor:pointer}
.checker button:hover{background:var(--brand-strong)}
.checker .hint{font-size:.85rem; color:var(--muted); margin:.6rem 0 0}
.try{padding-block:0 3.5rem}
.try .checker{margin:0}
.verdict{border-radius:12px; padding:1rem 1.15rem; margin:0 0 1.5rem; border:1px solid var(--rule)}
.verdict.ok{background:var(--brand-soft); border-color:var(--brand)}
.verdict.bad{background:var(--crit-soft); border-color:var(--crit-rule)}
.verdict.muted{background:var(--surface)}
.status.warn{background:var(--warn-soft); color:#8a5a00}
.status.muted{background:var(--bg); color:var(--muted)}
.muted{color:var(--muted)}
.small{font-size:.88rem}

/* ---------- progressive check ---------- */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes rise{from{opacity:0; transform:translateY(4px)}to{opacity:1; transform:none}}
.spin{display:inline-block; width:16px; height:16px; flex:none; border-radius:50%;
  border:2px solid var(--rule); border-top-color:var(--brand); animation:spin .75s linear infinite}
.steps{list-style:none; padding:0; margin:0 0 1.5rem}
.step{display:flex; align-items:center; gap:.7rem; padding:.45rem 0; animation:rise .25s ease-out}
.step.done .spin{animation:none; border:0; background:var(--brand); position:relative}
.step.done .spin::after{content:""; position:absolute; left:5px; top:2px; width:4px; height:8px;
  border:solid #fff; border-width:0 2px 2px 0; transform:rotate(45deg)}
.step.failed .spin{animation:none; border:0; background:var(--crit)}
.step.running .step-label{color:var(--fg); font-weight:600}
.step.done .step-label{color:var(--muted)}
.countries{border:1px solid var(--rule); border-radius:12px; background:var(--surface);
  margin:0 0 1.5rem; overflow:hidden}
.crow{display:grid; grid-template-columns:11rem 10.5rem 1fr; gap:.8rem; align-items:center;
  padding:.75rem .9rem; border-bottom:1px solid var(--rule); font-size:.94rem; animation:rise .25s ease-out;
  transition:background .3s}
.crow:last-child{border-bottom:0}
.crow.pending{color:var(--muted)}
.crow.running{background:var(--brand-soft)}
.crow.bad{background:var(--crit-soft)}
.crow.warn{background:var(--warn-soft)}
.cstatus{display:flex; align-items:center}
.crow.bad .status,.crow.warn .status{background:#fff; border:1px solid currentColor}
.cdetail{color:var(--muted)}
.crow.ok .cdetail,.crow.bad .cdetail,.crow.warn .cdetail{color:var(--fg)}
@media (max-width:640px){
  .crow{grid-template-columns:1fr auto; }
  .cdetail{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){
  .spin{animation-duration:2.5s} .step,.crow{animation:none}
}

/* ---------- monitoring offer ---------- */
.cta-monitor{display:flex; gap:1rem; align-items:center; justify-content:space-between; flex-wrap:wrap;
  background:var(--brand-soft); border:1px solid var(--brand); border-radius:12px;
  padding:1.1rem 1.25rem; margin:1.5rem 0}
.cta-monitor div{flex:1 1 18rem}

/* ---------- footer ---------- */
.site-footer{border-top:1px solid var(--rule); background:var(--surface); padding-block:2rem;
  color:var(--muted); font-size:.88rem}
.site-footer .container{display:grid; gap:.4rem}
.site-footer p{margin:0}
.site-footer .brand{font-size:1rem; margin-bottom:.4rem}
.site-footer .brand svg{width:24px; height:24px}