/* Layout: one calm column, left-aligned. Hero, how it works, comparison table, privacy, FAQ.
   Tokens first; every color below comes from them. */
:root{
  --bg:#f3f5f3;          /* neutral with a slight green bias, same hue family as the accent */
  --surface:#ffffff;
  --ink:#16201b;
  --mute:#58645d;
  --line:#d5dcd6;
  --accent:#17684a;
  --accent-ink:#ffffff;
  --accent-soft:#e1efe8;
  --focus:#0b57d0;
  --font:-apple-system,BlinkMacSystemFont,"SF Pro Text","Helvetica Neue",system-ui,sans-serif;
  --font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",system-ui,sans-serif;
  --mono:ui-monospace,"SF Mono",Menlo,monospace;
  color-scheme:dark;
}
  :root:not([data-theme="light"]){
    --bg:#101612;--surface:#18201b;--ink:#eaf0ec;--mute:#9fada5;--line:#2a3430;
    --accent:#7fd3b0;--accent-ink:#0c1f17;--accent-soft:#1b2c24;--focus:#8ab4f8;
    color-scheme:dark;
  }
:root[data-theme="dark"]{
  --bg:#101612;--surface:#18201b;--ink:#eaf0ec;--mute:#9fada5;--line:#2a3430;
  --accent:#7fd3b0;--accent-ink:#0c1f17;--accent-soft:#1b2c24;--focus:#8ab4f8;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:17px/1.6 var(--font);
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
main{max-width:720px;margin:0 auto;padding-block:clamp(40px,8vw,88px) 64px;display:flex;flex-direction:column;gap:clamp(40px,7vw,64px)}
h1{font:640 clamp(32px,6.4vw,50px)/1.1 var(--font-display);letter-spacing:-.025em;margin:0;text-wrap:balance}
h2{font:620 22px/1.25 var(--font-display);letter-spacing:-.012em;margin:0 0 12px;text-wrap:balance}
p{margin:0}
.eyebrow{font-size:13px;font-weight:600;letter-spacing:.07em;text-transform:uppercase;color:var(--mute)}
.lede{font-size:20px;line-height:1.5;color:var(--mute);max-width:34em}
a{color:var(--accent)}
a:focus-visible,summary:focus-visible,.btn:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:6px}
.hero{display:flex;flex-direction:column;gap:20px}
.cta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-top:4px}
.btn{display:inline-flex;align-items:center;min-height:46px;padding:0 22px;border-radius:10px;font-weight:600;text-decoration:none;font-size:17px;border:1.5px solid var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-ink)}
.btn.secondary{background:transparent;color:var(--accent)}
.btn.off{border-style:dashed;border-color:var(--line);color:var(--mute);cursor:default}
.fine{font-size:15px;color:var(--mute)}
.key{display:inline-block;min-width:1.9em;text-align:center;font:600 .92em/1.5 var(--font);border:1px solid var(--line);border-bottom-width:3px;border-radius:7px;padding:0 .5em;background:var(--surface);white-space:nowrap}
.steps{margin:0;padding:0;list-style:none;display:grid;gap:12px;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.steps li::before{content:counter(s);width:34px;height:34px;border-radius:50%;background:var(--accent-soft);color:var(--accent);font-weight:650;display:grid;place-items:center;font-size:16px}
.steps li>span{padding-top:3px}
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:16px}
th,td{text-align:left;padding:12px 16px;vertical-align:top;border-top:1px solid var(--line)}
thead th{border-top:0;font-size:15px;vertical-align:bottom}
thead th .sub{display:block;font-weight:400;color:var(--mute);font-size:14px}
tbody th{font-weight:500;width:34%}
td.full,thead th.full{background:var(--accent-soft)}
.yes{font-weight:600}
.no{color:var(--mute)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;gap:14px}
.net{margin:0;padding-left:20px;display:grid;gap:6px}
ul.plain{margin:0;padding-left:20px;display:grid;gap:8px}
details{border-top:1px solid var(--line);padding:14px 0}
details:last-of-type{border-bottom:1px solid var(--line)}
summary{cursor:pointer;font-weight:600}
details p{margin-top:8px;color:var(--mute)}
footer{color:var(--mute);font-size:15px;display:flex;flex-wrap:wrap;gap:6px 18px}
@media (max-width:600px){table{min-width:0;font-size:15px}th,td{padding:10px 10px}tbody th{width:30%}}
@media (max-width:480px){body{font-size:16px}.lede{font-size:18px}.btn{width:100%;justify-content:center}}
@media (prefers-reduced-motion:no-preference){.btn{transition:background-color .12s,color .12s}.btn.primary:hover{filter:brightness(1.08)}.btn.secondary:hover{background:var(--accent-soft)}}

button.btn{font:inherit;cursor:pointer;border:0}

code{overflow-wrap:anywhere}

/* ---- screen-size scaling (owner 8 Nov 2026: at 100% browser zoom on a 1512 pt MacBook the site looked small; 133% looked right).
   --z grows with the window width (about width / 1140), so a 1280 laptop, a 1512 or 1728 MacBook and a 27" display all look proportionally
   the same as the old 133% view. Phones and tablets (under 1200 px) are untouched, and the layout breakpoints still follow the real window. ---- */
:root{--z:1}
@media (min-width:1200px){:root{--z:1.06}}
@media (min-width:1300px){:root{--z:1.14}}
@media (min-width:1400px){:root{--z:1.23}}
@media (min-width:1500px){:root{--z:1.32}}
@media (min-width:1600px){:root{--z:1.4}}
@media (min-width:1700px){:root{--z:1.49}}
@media (min-width:1800px){:root{--z:1.58}}
@media (min-width:1920px){:root{--z:1.68}}
@media (min-width:2100px){:root{--z:1.84}}
@media (min-width:2300px){:root{--z:2.0}}
@media (min-width:2560px){:root{--z:2.24}}
@media (min-width:2900px){:root{--z:2.54}}
@media (min-width:3300px){:root{--z:2.9}}
@media (min-width:3800px){:root{--z:3.3}}
body.zm main{zoom:var(--z)}
/* same thin bottom bar as the main pages (owner 9 Nov) */
body{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column}
body>main{flex:1;width:100%;box-sizing:border-box}
main>footer:last-child{margin-top:auto;border-top:1px solid var(--line);padding-top:10px;font-size:13px;gap:4px 18px}