:root {
  --ground:#F7F9FB; --surface:#FFFFFF; --line:#DFE5EB; --line-2:#EDF1F5;
  --ink:#14212E; --ink-2:#4A5C6E; --muted:#7A8B9A;
  --blue:#1668A8; --blue-dk:#10527F; --blue-lt:#E7F1F9;
  --good:#1C7A52; --good-bg:#E6F4ED; --bad:#A63A26; --bad-bg:#FAE5E0; --bad-row:#FDF6F4;
  --display:"Libre Franklin","Helvetica Neue",Arial,sans-serif;
  --body:"Source Sans 3","Helvetica Neue",Arial,sans-serif;
  --wide:68rem;
}
* { box-sizing:border-box; }
html, body { overflow-x:hidden; }
body { margin:0; background:var(--ground); color:var(--ink); font-family:var(--body); font-size:18px; line-height:1.65; -webkit-font-smoothing:antialiased; }
.wrap { width:min(100% - 2.5rem, var(--wide)); margin-inline:auto; }
h1,h2,h3,.btn,nav a,.brand-name { font-family:var(--display); }
h1,h2,h3 { margin:0; font-weight:800; letter-spacing:-0.03em; line-height:1.15; text-wrap:pretty; }
p { margin:0; }
img { display:block; max-width:100%; }

.btn { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; font-weight:700; font-size:1.05rem; padding:1.05rem 2.1rem; border-radius:8px; border:1px solid transparent; transition:background .14s,border-color .14s,color .14s; }
.btn-primary { background:var(--blue); color:#fff; }
.btn-primary:hover { background:var(--blue-dk); }
.btn-quiet { border-color:#CBD5DF; color:var(--ink); background:var(--surface); }
.btn-quiet:hover { border-color:var(--ink); }
.btn-sm { padding:.65rem 1.3rem; font-size:.95rem; }
.btn:focus-visible { outline:2px solid var(--blue); outline-offset:3px; }

header { background:var(--surface); border-bottom:1px solid var(--line); }
.bar { display:flex; align-items:center; gap:2rem; padding:1rem 0; }
.brand { display:flex; align-items:center; gap:.75rem; text-decoration:none; color:var(--ink); margin-right:auto; }
.brand img { width:46px; height:46px; object-fit:cover; border-radius:9px; }
.brand-name { font-weight:800; font-size:1.3rem; letter-spacing:-0.035em; white-space:nowrap; }
nav { display:flex; gap:1.85rem; }
nav a { color:var(--ink-2); text-decoration:none; font-size:1rem; font-weight:600; }
nav a:hover, nav a.on { color:var(--blue); }
@media (max-width:860px) { nav { display:none; } }

.hero { background:var(--surface); padding:4.25rem 0; }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:3.5rem; align-items:center; }
.hero h1 { font-size:clamp(2.2rem,4.8vw,3.4rem); margin-bottom:1.4rem; }
.hero .sub { font-size:1.25rem; color:var(--ink-2); margin-bottom:2.2rem; }
.cta-row { display:flex; gap:.85rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.fine { font-size:.97rem; color:var(--muted); }
.hero-photo { border-radius:16px; overflow:hidden; box-shadow:0 3px 6px rgba(20,33,46,.06), 0 34px 64px -30px rgba(20,33,46,.45); }
.hero-photo img { width:100%; height:440px; object-fit:cover; }
@media (max-width:940px) {
  .hero-grid { grid-template-columns:1fr; gap:2.5rem; }
  .cta-row .btn { flex-grow:1; }
  .hero-photo img { height:280px; }
}

.cover { background:var(--surface); border:1px solid var(--line); border-radius:14px; box-shadow:0 2px 4px rgba(20,33,46,.04),0 30px 60px -34px rgba(20,33,46,.4); overflow:hidden; }
.cover-head { padding:1.15rem 1.5rem; border-bottom:1px solid var(--line-2); font-family:var(--display); font-weight:700; font-size:1.02rem; }
.cover-row { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1rem 1.5rem; border-bottom:1px solid var(--line-2); }
.cover-row:last-child { border-bottom:0; }
.cover-row.bad { background:var(--bad-row); }
.cover-row .dev { font-weight:600; font-size:1.02rem; }
.tag { font-family:var(--display); font-weight:700; font-size:.82rem; padding:.35rem .8rem; border-radius:999px; white-space:nowrap; }
.tag.ok { color:var(--good); background:var(--good-bg); }
.tag.no { color:var(--bad); background:var(--bad-bg); }

.band { padding:4.25rem 0; border-top:1px solid var(--line); }
.band-white { background:var(--surface); }
.head { max-width:40rem; margin-bottom:2.5rem; }
.head h2 { font-size:clamp(1.7rem,3.4vw,2.3rem); margin-bottom:.85rem; }
.head p { font-size:1.15rem; color:var(--ink-2); }

.split { display:grid; grid-template-columns:1fr 1fr; gap:3.5rem; align-items:center; }
@media (max-width:940px) { .split { grid-template-columns:1fr; gap:2.5rem; } }

.cards { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }
.card { background:var(--surface); border:1px solid var(--line); border-radius:12px; overflow:hidden; display:flex; flex-direction:column; }
.band-white .card { background:var(--ground); }
.card img { width:100%; height:180px; object-fit:cover; }
.card .body { padding:1.6rem; }
.card h3 { font-size:1.2rem; font-weight:700; margin-bottom:.6rem; }
.card p { color:var(--ink-2); font-size:1.05rem; }

.steps { display:flex; flex-direction:column; gap:1.75rem; }
.step { display:flex; gap:1.2rem; align-items:flex-start; }
.step .n { width:36px; height:36px; border-radius:50%; background:var(--blue); color:#fff; font-family:var(--display); font-weight:800; font-size:1rem; display:grid; place-items:center; flex:none; }
.step h3 { font-size:1.15rem; font-weight:700; margin-bottom:.3rem; }
.step p { color:var(--ink-2); font-size:1.05rem; }

.mailframe { background:#EDF2F7; border:1px solid var(--line); border-radius:14px; padding:1.9rem; }
.mail { background:var(--surface); border:1px solid var(--line); border-radius:10px; overflow:hidden; box-shadow:0 20px 40px -26px rgba(20,33,46,.35); }
.mail-head { padding:1rem 1.35rem; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:.75rem; }
.mail-head img { width:32px; height:32px; object-fit:cover; border-radius:7px; }
.mail-body { padding:1.5rem 1.35rem; }
.mail-links { display:flex; flex-direction:column; gap:.6rem; margin:1.3rem 0; }
.mail-link { display:flex; align-items:center; justify-content:space-between; gap:1rem; border:1px solid var(--line); border-radius:8px; padding:.85rem 1rem; font-size:.98rem; font-weight:600; }
.mail-link .go { color:var(--blue); font-size:.9rem; }

.plans { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(17rem,1fr)); }
.plan { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:2.1rem; display:flex; flex-direction:column; }
.plan.best { border:2px solid var(--blue); padding:calc(2.1rem - 1px); position:relative; }
.plan .pop { position:absolute; top:-13px; left:2.1rem; background:var(--blue); color:#fff; font-family:var(--display); font-weight:700; font-size:.8rem; padding:.3rem .85rem; border-radius:999px; }
.plan h3 { font-size:1.35rem; margin-bottom:.35rem; }
.plan .devices { font-size:1.02rem; color:var(--muted); margin-bottom:1.4rem; }
.price { display:flex; align-items:baseline; gap:.35rem; margin-bottom:1.8rem; }
.price b { font-family:var(--display); font-size:3.2rem; font-weight:800; letter-spacing:-0.045em; }
.plan.best .price b { color:var(--blue); }
.price span { font-size:1.02rem; color:var(--muted); }
.plan ul { list-style:none; margin:0 0 1.8rem; padding:0; display:grid; gap:.75rem; }
.plan li { display:flex; gap:.7rem; align-items:flex-start; font-size:1.02rem; color:var(--ink-2); }
.plan li svg { flex:none; margin-top:.4rem; }
.plan .btn { margin-top:auto; width:100%; }

.plain { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:2.1rem; max-width:44rem; }
.plain h2 { font-size:1.5rem; margin-bottom:1rem; }
.plain p { color:var(--ink-2); margin-bottom:1rem; font-size:1.05rem; }
.plain p:last-child { margin-bottom:0; }
.plain strong { color:var(--ink); font-weight:600; }

.faq { max-width:44rem; }
details { border-bottom:1px solid var(--line); }
summary { cursor:pointer; list-style:none; padding:1.2rem 2.2rem 1.2rem 0; font-family:var(--display); font-weight:700; font-size:1.1rem; position:relative; }
summary::-webkit-details-marker { display:none; }
summary::after { content:"+"; position:absolute; right:.3rem; top:50%; transform:translateY(-50%); color:var(--blue); font-size:1.5rem; font-weight:600; }
details[open] summary::after { content:"\2013"; }
summary:hover { color:var(--blue); }
summary:focus-visible { outline:2px solid var(--blue); outline-offset:2px; }
details .a { padding-bottom:1.3rem; color:var(--ink-2); font-size:1.05rem; max-width:54ch; }

.final { background:var(--surface); border-top:1px solid var(--line); padding:4rem 0; text-align:center; }
.final h2 { font-size:clamp(1.7rem,3.4vw,2.3rem); margin-bottom:.8rem; }
.final p { color:var(--ink-2); font-size:1.15rem; margin-bottom:2rem; }

.pagehead { background:var(--surface); border-bottom:1px solid var(--line); padding:3.5rem 0; }
.pagehead h1 { font-size:clamp(2rem,4.2vw,3rem); margin-bottom:1rem; }
.pagehead p { font-size:1.2rem; color:var(--ink-2); max-width:46rem; }
.back { display:inline-flex; align-items:center; gap:.4rem; color:var(--blue); text-decoration:none; font-weight:600; font-size:1rem; margin-bottom:1.25rem; }
.back:hover { text-decoration:underline; }

table.cmp { width:100%; border-collapse:collapse; min-width:36rem; }
.cmp-scroll { overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:var(--surface); }
table.cmp th, table.cmp td { padding:1rem 1.3rem; text-align:left; border-bottom:1px solid var(--line-2); }
table.cmp thead th { font-family:var(--display); font-size:.95rem; color:var(--ink); background:#F1F5F9; border-bottom:1px solid var(--line); }
table.cmp thead th.num, table.cmp td.num { text-align:center; }
table.cmp tbody tr:last-child th, table.cmp tbody tr:last-child td { border-bottom:0; }
table.cmp tbody th { font-weight:600; font-family:var(--body); font-size:1.02rem; color:var(--ink); }
table.cmp td { font-size:1rem; color:var(--ink-2); }
table.cmp .hi { background:#F4FAFE; }
.ck { color:var(--good); font-weight:700; }
.dash { color:#BFCAD4; }

footer { padding:2rem 0; display:flex; justify-content:space-between; gap:1rem; flex-wrap:wrap; font-size:.97rem; color:var(--muted); border-top:1px solid var(--line); }
footer a { color:var(--ink-2); }

/* ---- statistics ---- */
.stats { display:grid; gap:1.4rem; grid-template-columns:repeat(auto-fit,minmax(15rem,1fr)); }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:2rem; }
.band-white .stat { background:var(--ground); }
.stat b { display:block; font-family:var(--display); font-size:3rem; font-weight:800; letter-spacing:-0.045em; color:var(--blue); line-height:1; margin-bottom:.7rem; }
.stat p { color:var(--ink-2); font-size:1.05rem; }
.stat .src { display:block; margin-top:.8rem; font-size:.88rem; color:var(--muted); }
.stat .src a { color:var(--muted); }
.sourcenote { margin-top:1.75rem; font-size:.95rem; color:var(--muted); }
.sourcenote a { color:var(--ink-2); }
.pull { border-left:4px solid var(--blue); padding:.4rem 0 .4rem 1.5rem; margin:2rem 0; font-size:1.35rem; font-family:var(--display); font-weight:700; line-height:1.35; max-width:40rem; }
.prose { max-width:44rem; }
.prose p { color:var(--ink-2); font-size:1.08rem; margin-bottom:1.2rem; }
.prose p:last-child { margin-bottom:0; }
.prose strong { color:var(--ink); font-weight:600; }
.prose h3 { font-size:1.3rem; margin:2.25rem 0 .8rem; }