:root{--bg:#F7F8F4;--bg2:#EDF1EA;--surface:#fff;--ink:#14231D;--ink2:#3E5A4F;--line:#D3DDD6;--brand:#123D32;--brand2:#0B2B23;--onbrand:#fff;--link:#1B6A47;--accent:#4CAF78;--onaccent:#0B2A21;--cta:#E5B84B;--oncta:#123D32;--tint:#E2EFE7;--warmink:#715000;--warmtint:#FAF0D2;--deep:#123D32;--deep2:#0D2E25;--ondeep:#F7F8F4;--ondeep2:#BDD2C7;--wm:#123D32;--wm2:#2FAB6F;--err:#A3281F;--focus:#0B57D0;--shadow:0 1px 2px rgba(18,61,50,.06),0 8px 24px rgba(18,61,50,.09);--r:14px;--r2:10px;--s1:4px;--s2:8px;--s3:12px;--s4:16px;--s5:24px;--s6:32px;--s7:48px;--s8:72px;--s9:96px;--fs-s:.875rem;--fs-b:1.0625rem;--fs-l:1.1875rem;--fs-h3:1.25rem;--fs-h2:clamp(1.55rem,3.2vw,2.1rem);--fs-h1:clamp(2.1rem,5.4vw,3.6rem)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){--bg:#0C1F19;--bg2:#10281F;--surface:#14312A;--ink:#F1F5EF;--ink2:#B3C9BD;--line:#2A4B40;--brand:#8FD9AE;--brand2:#B4E9C9;--onbrand:#0C1F19;--link:#8FD9AE;--tint:#173A2F;--warmink:#E5B84B;--warmtint:#3A3012;--deep:#0A1D17;--deep2:#0E2820;--ondeep:#F1F5EF;--ondeep2:#B3C9BD;--wm:#F1F5EF;--err:#FF8A80;--focus:#8AB4F8;--shadow:0 1px 2px rgba(0,0,0,.4),0 8px 24px rgba(0,0,0,.35)}}
:root[data-theme=dark]{--bg:#0C1F19;--bg2:#10281F;--surface:#14312A;--ink:#F1F5EF;--ink2:#B3C9BD;--line:#2A4B40;--brand:#8FD9AE;--brand2:#B4E9C9;--onbrand:#0C1F19;--link:#8FD9AE;--tint:#173A2F;--warmink:#E5B84B;--warmtint:#3A3012;--deep:#0A1D17;--deep2:#0E2820;--ondeep:#F1F5EF;--ondeep2:#B3C9BD;--wm:#F1F5EF;--err:#FF8A80;--focus:#8AB4F8}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:84px}
body{margin:0;background:var(--bg);color:var(--ink);font:var(--fs-b)/1.65 system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased}
img,svg{max-width:100%}
img{height:auto;display:block}
.wrap{max-width:1120px;margin:0 auto;padding:0 20px}
.narrow{max-width:780px}
.skip{position:absolute;left:-999px;top:8px;background:var(--brand);color:var(--onbrand);padding:10px 16px;border-radius:8px;z-index:50;font-weight:600}
.skip:focus{left:8px}
a{color:var(--link);text-underline-offset:3px}a:hover{color:var(--brand2)}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.spr{position:absolute;width:0;height:0}
.btnp{margin-top:16px}.fpad{margin-top:32px}.hint.tight{margin:0 0 8px}
.ic{width:22px;height:22px;flex:none;vertical-align:-4px}
h1,h2,h3,h4{line-height:1.15;letter-spacing:-.015em;font-weight:760}
h1{font-size:var(--fs-h1);margin:0 0 var(--s4)}
h2{font-size:var(--fs-h2);margin:var(--s7) 0 var(--s3)}
h3{font-size:var(--fs-h3);margin:var(--s5) 0 var(--s2);line-height:1.25}
h4{font-size:1.05rem;margin:var(--s4) 0 var(--s1)}
p,li{max-width:68ch}
p{margin:0 0 var(--s4)}
.lede{font-size:var(--fs-l);color:var(--ink2);max-width:60ch;line-height:1.55}
.eyebrow{display:inline-block;font-size:var(--fs-s);font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--warmink);margin:0 0 var(--s2)}
.sec .eyebrow,.hero .eyebrow{margin-bottom:var(--s2)}
.deep .eyebrow{color:var(--cta)}
/* header */
.top{position:sticky;top:0;z-index:30;background:color-mix(in srgb,var(--surface) 92%,transparent);-webkit-backdrop-filter:saturate(1.4) blur(10px);backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.bar{display:flex;gap:var(--s4);align-items:center;justify-content:space-between;min-height:64px}
.logo{display:inline-flex;align-items:center;gap:10px;font-weight:800;font-size:1.28rem;letter-spacing:-.02em;text-decoration:none;color:var(--ink);min-height:44px}
.logo:hover{color:var(--ink)}
.mark{border-radius:22%;flex:none}
.wm{color:var(--wm)}.wm .t{color:var(--wm2)}.lt{display:flex;flex-direction:column;line-height:1.1}.tl{display:none;font-size:.7rem;font-weight:600;letter-spacing:.04em;color:var(--ink2)}@media (min-width:1080px){.tl{display:block}}
.menu{display:none;gap:2px;align-items:center}
.menu a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--ink2);text-decoration:none;border-radius:8px;font-size:.98rem;font-weight:550}
.menu a:hover,.menu a[aria-current]{color:var(--brand);background:var(--tint)}
.hcta{display:flex;gap:var(--s2);align-items:center}
.hcta .btn{margin:0;white-space:nowrap}
.mnav{position:relative;background:none;border:0;padding:0;margin:0;border-radius:0}
.mnav summary{list-style:none;cursor:pointer;min-height:44px;min-width:44px;display:inline-flex;align-items:center;justify-content:center;padding:0 12px;border:1px solid var(--line);border-radius:10px;font-weight:600;background:var(--surface);color:var(--ink)}
.mnav summary::-webkit-details-marker{display:none}
.mnav[open] summary{background:var(--tint)}
.mnav nav{position:absolute;right:0;top:52px;width:min(86vw,320px);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:var(--s2);display:flex;flex-direction:column}
.mnav nav a{display:flex;align-items:center;min-height:48px;padding:0 14px;color:var(--ink);text-decoration:none;border-radius:8px;font-weight:600}
.mnav nav a:hover,.mnav nav a[aria-current]{background:var(--tint);color:var(--brand)}
.mnav nav .btn{margin:var(--s2) 0 0;justify-content:center}
@media (min-width:900px){.menu{display:flex}.mnav{display:none}}
@media (max-width:899px){.hcta .btn.hide-s{display:none}}
@media (max-width:480px){.bar{gap:8px}.logo{font-size:1.1rem;gap:8px}.logo .mark{width:34px;height:34px}.hcta{gap:6px}.hcta .btn.sm{padding:8px 14px;font-size:.9rem}.mnav summary{padding:0 10px}}
/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;background:var(--cta);color:var(--oncta);text-decoration:none;padding:10px 22px;border-radius:999px;font:inherit;font-weight:700;line-height:1.2;border:2px solid var(--cta);margin:6px 8px 6px 0;cursor:pointer;text-align:center}
.btn:hover{background:var(--cta);border-color:var(--cta);color:var(--oncta);filter:brightness(1.07)}
.btn.alt{background:transparent;color:var(--brand);border-color:var(--brand)}
.btn.alt:hover{background:var(--tint);color:var(--brand2);filter:none}
.btn.dark{background:var(--brand);border-color:var(--brand);color:var(--onbrand)}
.btn.sm{min-height:44px;padding:8px 18px;margin:0;font-size:.95rem}
.btn.lg{min-height:54px;padding:12px 28px;font-size:1.08rem}
.deep .btn.alt,.band .btn.alt{color:var(--ondeep);border-color:var(--ondeep2);background:transparent}
.deep .btn.alt:hover,.band .btn.alt:hover{background:rgba(255,255,255,.1);color:#fff}
.pill{display:inline-flex;align-items:center;gap:10px;min-height:48px;padding:6px 18px 6px 14px;border-radius:12px;background:#101a15;color:#fff;text-decoration:none;border:1px solid #2c3d33;line-height:1.1}
.pill:hover{background:#18271f;color:#fff}
.pill small{display:block;font-size:.7rem;opacity:.85;font-weight:500}
.pill b{display:block;font-size:1.05rem}
.btnrow{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;margin:var(--s5) 0 var(--s3)}
.btnrow .btn{margin:0}
/* sections */
.pg{padding-bottom:var(--s8)}
.sec{padding:var(--s8) 0}
.sec.alt{background:var(--bg2)}
.sec>.wrap>h2:first-child,.sec .hd h2{margin-top:0}
.deep{background:linear-gradient(160deg,var(--deep),var(--deep2));color:var(--ondeep)}
.deep p,.deep li{color:var(--ondeep)}
.deep .lede{color:var(--ondeep2)}
.deep a:not(.btn){color:#fff}
.hd{max-width:720px;margin:0 0 var(--s6)}
.hd.c{margin-left:auto;margin-right:auto;text-align:center}
.hd.c .lede{margin-left:auto;margin-right:auto}
.hd p:last-child{margin-bottom:0}
/* hero */
.hero{padding:var(--s7) 0 var(--s8);background:radial-gradient(1200px 520px at 85% -10%,var(--tint),transparent 60%),var(--bg)}
.hero.deep{background:radial-gradient(900px 480px at 85% 0%,rgba(242,164,58,.16),transparent 60%),linear-gradient(160deg,var(--deep),var(--deep2))}
.hero .grid2{display:grid;gap:var(--s6);align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){.hero .grid2{grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:var(--s7)}}
.hero h1 em,.hl{font-style:normal;color:var(--warmink)}
.deep h1 em,.deep .hl{color:var(--cta)}
.hero .lede{margin-bottom:var(--s3)}
.fine{font-size:var(--fs-s);color:var(--ink2);max-width:62ch}
.deep .fine{color:var(--ondeep2)}
.keep{font-size:var(--fs-s);color:var(--ink2);margin:var(--s4) 0 0;display:flex;gap:8px;align-items:flex-start}
.deep form.f p,.deep form.f label{color:var(--ink)}
.deep .keep{color:var(--ondeep2)}
.doors{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:var(--s6)}
.door{display:block;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4) var(--s5);box-shadow:var(--shadow);min-height:44px}
.door:hover{border-color:var(--brand);color:var(--ink)}
.door b{display:flex;align-items:center;gap:8px;font-size:1.08rem;color:var(--brand)}
.door span{display:block;color:var(--ink2);font-size:.95rem;margin-top:4px;line-height:1.45}
.door.top1{background:var(--cta);border-color:var(--cta)}
.door.top1,.door.top1 b,.door.top1 span{color:var(--oncta)}
.door.top1:hover{filter:brightness(1.06)}
/* device frames */
.phone{position:relative;margin:0 auto;width:min(100%,290px);background:#0d1712;border-radius:38px;padding:9px;box-shadow:0 24px 50px rgba(8,26,17,.28),0 2px 0 rgba(255,255,255,.08) inset}
.phone img{border-radius:30px;width:100%}
.phone::before{content:"";position:absolute;top:14px;left:50%;width:70px;height:6px;margin-left:-35px;border-radius:6px;background:#0d1712;z-index:1}
.screen{background:#0d1712;border-radius:16px;padding:8px;box-shadow:0 20px 44px rgba(8,26,17,.25)}
.screen img{border-radius:9px;width:100%}
.fig{margin:0}
.fig figcaption{font-size:var(--fs-s);color:var(--ink2);margin-top:var(--s3);text-align:center}
.deep .fig figcaption{color:var(--ondeep2)}
.phones{display:flex;gap:var(--s4);justify-content:center;align-items:flex-start}
.phones .fig{flex:1 1 0;max-width:260px;min-width:0}
.phones .phone{width:100%;border-radius:30px;padding:6px}
.phones .phone img{border-radius:24px}
.phones .phone::before{display:none}
.print-sheet{background:#fff;border-radius:6px;box-shadow:var(--shadow);padding:6px;border:1px solid var(--line)}
.print-sheet img{width:100%}
/* cards and grids */
.grid{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:var(--s4) 0}
.grid.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5)}
.card h3,.card h2{margin-top:0;font-size:1.15rem}
.card p{margin:var(--s2) 0 0;color:var(--ink2);font-size:.98rem;line-height:1.55}
.card p:first-of-type{margin-top:var(--s2)}
a.card{display:block;text-decoration:none;color:var(--ink);box-shadow:var(--shadow)}
a.card:hover{border-color:var(--brand);color:var(--ink)}
a.card b{display:block;color:var(--brand);font-size:1.08rem;margin-bottom:4px}
a.card .more{display:inline-flex;align-items:center;gap:4px;margin-top:var(--s3);color:var(--brand);font-weight:650;font-size:.95rem}
.tools{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(270px,1fr));margin:var(--s5) 0}
.tool{display:flex;gap:var(--s3);align-items:flex-start;text-decoration:none;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:var(--s4)}
.tool:hover{border-color:var(--brand);color:var(--ink)}
.tool .ic{color:var(--brand);width:26px;height:26px;margin-top:2px}
.tool b{display:block;color:var(--ink)}.tool span{display:block;color:var(--ink2);font-size:.92rem;line-height:1.4}
.feat{display:flex;gap:var(--s3);align-items:flex-start}
.feat .bubble{flex:none;width:46px;height:46px;border-radius:14px;background:var(--tint);color:var(--brand);display:grid;place-items:center}
.feat h3{margin:0 0 4px;font-size:1.08rem}
.feat p{margin:0;color:var(--ink2);font-size:.98rem}
.deep .feat .bubble{background:rgba(255,255,255,.1);color:var(--cta)}
.deep .feat p{color:var(--ondeep2)}
.featgrid{display:grid;gap:var(--s5) var(--s6);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.chips{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:var(--s4) 0}
.chips li{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:6px 14px;font-size:.92rem;max-width:none}
.chips li b{color:var(--ink2);font-weight:600;margin-right:4px}
.tag{display:inline-block;white-space:nowrap;font-size:.72rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;border-radius:999px;padding:2px 10px;border:1px solid var(--ink2);color:var(--ink2);vertical-align:middle;margin-left:6px}
.steps3{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));counter-reset:st;list-style:none;padding:0;margin:0}
.steps3>li{counter-increment:st;position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);max-width:none;box-shadow:var(--shadow)}
.steps3>li::before{content:counter(st);display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--accent);color:var(--onaccent);font-weight:800;margin-bottom:var(--s3)}
.steps3 h3{margin:0 0 6px;font-size:1.15rem}
.steps3 p{margin:0;color:var(--ink2)}
.split{display:grid;gap:var(--s6);align-items:center;grid-template-columns:minmax(0,1fr)}.split>*,.grid2>*,.layout>*{min-width:0}
@media (min-width:900px){.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s8)}.split.flip>:first-child{order:2}}
.split h2{margin-top:0}
.ticks{list-style:none;padding:0;margin:var(--s4) 0}
.ticks li{position:relative;padding-left:32px;margin:0 0 var(--s2);max-width:none}
.ticks li::before{content:"";position:absolute;left:0;top:.38em;width:20px;height:20px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23123D32' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/14px no-repeat}
.deep .ticks li::before{background-color:rgba(255,255,255,.14)}
.callouts{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin:var(--s5) 0}
.callout{border-radius:var(--r);padding:var(--s4) var(--s5);border:1px solid var(--line);background:var(--surface)}
.callout b{display:block;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brand);margin-bottom:4px}
.callout.win b{color:var(--warmink)}
.callout p{margin:0}
.worked{background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--cta);border-radius:var(--r);padding:var(--s4) var(--s5);box-shadow:var(--shadow)}
.worked p:last-child{margin-bottom:0}
.note{background:var(--tint);border-radius:var(--r2);padding:var(--s4) var(--s5);margin:var(--s5) 0}
.note h2{margin-top:0;font-size:1.3rem}
.note p:last-child{margin-bottom:0}
.draft{background:var(--warmtint);color:var(--warmink);border-radius:var(--r2);padding:10px 14px;margin:16px 0;font-size:var(--fs-s)}
/* comparison */
.vs{display:grid;gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--surface)}
.vs{margin-bottom:var(--s4)}
.vs .h{display:none}
.vs .row2{display:grid;gap:4px;padding:var(--s4) var(--s5);border-top:1px solid var(--line)}
.vs .row2:first-of-type{border-top:0}
.vs .l{color:var(--ink2)}
.vs .l::before{content:"By hand: ";font-weight:700;color:var(--ink)}
.vs .r{font-weight:560}
.vs .r::before{content:"With the app: ";font-weight:700;color:var(--brand)}
@media (min-width:760px){.vs{grid-template-columns:1fr 1fr}.vs .h{display:block;padding:var(--s3) var(--s5);font-weight:750;background:var(--bg2);border-bottom:1px solid var(--line)}.vs .h.r2{background:var(--tint);color:var(--brand)}.vs .row2{display:contents}.vs .row2>div{padding:var(--s3) var(--s5);border-top:1px solid var(--line)}.vs .l::before,.vs .r::before{content:none}.vs .l{text-decoration:none}}
.timeline{list-style:none;padding:0;margin:0;border-left:3px solid var(--line);margin-left:10px}
.timeline li{position:relative;padding:0 0 var(--s5) var(--s5);max-width:none}
.timeline li::before{content:"";position:absolute;left:-10px;top:6px;width:17px;height:17px;border-radius:50%;background:var(--cta);border:3px solid var(--bg)}
.timeline b{display:block}
/* tables, facts, details */
.tw{overflow-x:auto;margin:var(--s4) 0;border-radius:var(--r2)}
table{border-collapse:collapse;width:100%;font-size:.95rem;background:var(--surface)}
caption{text-align:left;font-weight:650;padding:6px 0}
th,td{border:1px solid var(--line);padding:9px 12px;text-align:left;vertical-align:top}
thead th{background:var(--tint)}
tbody th{font-weight:650}
dl.facts{display:grid;grid-template-columns:max-content 1fr;gap:4px 16px}
dl.facts dt{font-weight:650}dl.facts dd{margin:0}
details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r2);padding:2px 18px;margin:var(--s2) 0}
summary{cursor:pointer;font-weight:650;padding:12px 0;min-height:44px}
details[open] summary{border-bottom:1px solid var(--line);margin-bottom:var(--s2)}
.faqs{max-width:820px}
/* forms */
form.f{color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);margin:var(--s4) 0;box-shadow:var(--shadow)}
fieldset{border:1px solid var(--line);border-radius:var(--r2);margin:var(--s3) 0;padding:8px 14px 12px}
legend{font-weight:650;padding:0 6px}
.row{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
label{display:block;font-weight:650;font-size:.95rem;margin:var(--s3) 0 4px}
label.inline{display:inline-flex;align-items:center;gap:6px;font-weight:400;margin:4px 12px 4px 0;min-height:36px}
input,select,textarea{font:inherit;width:100%;padding:9px 12px;border:1px solid var(--ink2);border-radius:10px;background:var(--bg);color:var(--ink);min-height:46px}
input[type=checkbox]{width:22px;height:22px;min-height:0}
textarea{min-height:110px}
.hint{font-size:var(--fs-s);color:var(--ink2);margin:4px 0 0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.result{background:var(--surface);border:2px solid var(--brand);border-radius:var(--r);padding:var(--s2) var(--s5) var(--s4);margin:var(--s5) 0;box-shadow:var(--shadow)}
.result:empty{display:none}
.big{font-size:1.15rem;margin:var(--s3) 0 4px}.big b{display:block;font-size:clamp(2rem,6vw,2.8rem);color:var(--brand);letter-spacing:-.02em;line-height:1.1}
.means{background:var(--tint);border-radius:var(--r2);padding:10px 14px;margin:var(--s3) 0}
.err{color:var(--err);font-weight:650}
.ok{color:var(--brand);font-weight:650}
#thanks{display:none}#thanks:target{display:block}
.steps{counter-reset:s;list-style:none;padding:0}
.steps li{counter-increment:s;position:relative;padding:0 0 var(--s3) 46px;max-width:72ch}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:32px;height:32px;border-radius:50%;background:var(--accent);color:var(--onaccent);display:grid;place-items:center;font-weight:700;font-size:.95rem}
.cols{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
/* article and toc */
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px;padding:0;margin:var(--s4) 0 0;font-size:var(--fs-s);color:var(--ink2)}
.crumbs li{max-width:none;display:flex;align-items:center}
.crumbs li+li::before{content:"/";margin-right:6px;color:var(--ink2);opacity:.6}
.crumbs a{display:inline-block;padding:10px 0}
.pagehead{padding:var(--s2) 0 var(--s5)}
.pagehead h1{font-size:clamp(1.9rem,4.4vw,3rem);margin:var(--s2) 0 var(--s3)}.pagehead{padding-top:var(--s5)}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s3) var(--s5);margin:var(--s4) 0;font-size:.95rem}
.toc ol{margin:4px 0;padding-left:20px}
.toc a{display:inline-block;padding:4px 0}
.layout{display:grid;gap:var(--s6);grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.layout.withtoc{grid-template-columns:minmax(0,1fr) 260px}.layout.withtoc>article{grid-column:1;grid-row:1}.layout.withtoc .toc{grid-column:2;grid-row:1;position:sticky;top:88px;margin-top:0;align-self:start}}
article h2{margin-top:var(--s7)}
article p,article li{font-size:1.08rem;line-height:1.72}
article .note p,article .note li{font-size:1rem}
.meta{font-size:var(--fs-s);color:var(--ink2)}
.cats{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:var(--s4) 0}
.cats a{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border:1px solid var(--line);border-radius:999px;text-decoration:none;background:var(--surface);color:var(--ink);font-weight:600}
.cats a:hover{border-color:var(--brand);color:var(--brand)}
.az{display:flex;flex-wrap:wrap;gap:6px;list-style:none;padding:0;margin:var(--s4) 0}
.az a{display:grid;place-items:center;min-width:44px;min-height:44px;border-radius:10px;border:1px solid var(--line);background:var(--surface);text-decoration:none;font-weight:700}
dl.gl dt{font-weight:750;margin-top:var(--s4);font-size:1.08rem}
dl.gl dd{margin:2px 0 0;max-width:68ch}
/* demo */
.demo{background:var(--surface);color:var(--ink);border:1px solid var(--line);border-radius:var(--r);padding:var(--s4);box-shadow:var(--shadow)}
.demo h3{margin:0 0 var(--s2)}
.demo .tabs{display:flex;gap:6px;margin:var(--s3) 0;flex-wrap:wrap}
.demo .tabs button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font:inherit;font-weight:650;cursor:pointer}
.demo .tabs button[aria-pressed=true]{background:var(--brand);color:var(--onbrand);border-color:var(--brand)}
.dgrid{display:grid;gap:var(--s2)}
@media (min-width:560px){.dgrid{grid-template-columns:1fr 1fr}}
.split.top{align-items:start}
@media (min-width:900px){.split.top>:first-child{position:sticky;top:96px}}
.dp{display:grid;grid-template-columns:1fr auto;gap:var(--s2);align-items:center;background:var(--bg);border-radius:var(--r2);padding:8px 12px}
.dp .nm{font-weight:700}.dp .nm small{display:block;font-weight:500;color:var(--ink2)}
.dots{color:var(--warmink);letter-spacing:2px;font-size:1.1rem;line-height:1}
.stepper{display:flex;align-items:center;gap:6px}
.stepper button{display:grid;place-items:center;padding:0;width:46px;height:46px;border-radius:12px;border:1px solid var(--brand);background:var(--surface);color:var(--brand);font-size:1.5rem;font-weight:700;cursor:pointer;line-height:1}
.stepper button:hover{background:var(--tint)}
.stepper output{display:grid;place-items:center;min-width:40px;font-size:1.5rem;font-weight:800}
.dres{margin-top:var(--s3);background:var(--tint);border-radius:var(--r2);padding:var(--s3) var(--s4)}
.dres p{margin:0 0 4px}
.dres .big2{font-size:1.25rem;font-weight:800;color:var(--brand)}
.dcard{overflow-x:auto;margin:var(--s3) 0}
.dcard table{font-size:.9rem;min-width:360px}
.dcard td,.dcard th{padding:6px 8px;text-align:center}
.dcard th:first-child,.dcard td:first-child{text-align:left}
.dcard .cur{background:var(--warmtint)}
.pos{color:var(--brand);font-weight:700}.neg{color:var(--err);font-weight:700}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
ul.plain{list-style:none;padding:0;margin:8px 0}
ul.plain li{padding:4px 8px;border-radius:8px;max-width:none}
ul.plain li.cur{background:var(--warmtint)}
.hnav{align-items:center;justify-content:space-between;gap:8px;margin:8px 0;font-weight:700}
.hnav button{width:48px;height:48px;border-radius:12px;border:1px solid var(--line);background:var(--bg);color:var(--ink);font-size:1.5rem;cursor:pointer}
.dres[hidden]{display:none}
.dcard tr.cur td,.dcard tr.cur th{background:var(--warmtint)}
/* page extras */
.leadcard{padding:var(--s5);color:var(--ink)}
.leadcard h2{margin:0 0 var(--s2);font-size:1.4rem}
.leadcard p{color:var(--ink2)}
.leadcard form.f{border:0;box-shadow:none;padding:0;margin:0}
.story{margin:0 0 var(--s8);align-items:center}
.story .phone{width:min(100%,240px)}
.story h3{font-size:clamp(1.3rem,2.6vw,1.7rem);margin-top:0}
.story .eyebrow{margin-bottom:4px}
.bigicon{display:grid;place-items:center;min-height:200px;border-radius:var(--r);background:var(--tint);color:var(--brand)}
.ic.xl{width:72px;height:72px}
.price{font-size:1.3rem;font-weight:800;color:var(--brand);margin:var(--s2) 0}
.card.pick{border:2px solid var(--accent)}
.calcbox form.f{margin-top:0}
.means::before{content:"What this means: ";font-weight:700}
.gamehero{display:grid;gap:var(--s6);align-items:center}
@media (min-width:900px){.gamehero:has(.phone){grid-template-columns:1.2fr .8fr}}
.pagehead .btnrow{margin-top:var(--s4)}
.hpills{display:flex;gap:6px}
/* picker */
.picker{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:var(--s5);box-shadow:var(--shadow)}
.picker fieldset{border:0;padding:0;margin:0 0 var(--s4)}
.picker legend{padding:0;margin-bottom:6px}
.opts{display:flex;flex-wrap:wrap;gap:var(--s2)}
.opts label{display:inline-flex;margin:0;font-weight:600}
.opts input{position:absolute;opacity:0;width:1px;height:1px;min-height:0}
.opts span{display:inline-flex;align-items:center;min-height:46px;padding:0 18px;border:1px solid var(--line);border-radius:999px;background:var(--bg);cursor:pointer}
.opts input:checked+span{background:var(--brand);color:var(--onbrand);border-color:var(--brand)}
.opts input:focus-visible+span{outline:3px solid var(--focus);outline-offset:2px}
.recs{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-top:var(--s4)}
.rec{border:2px solid var(--brand);border-radius:var(--r);padding:var(--s4);background:var(--surface)}
.rec h3{margin:0}.rec h3 a{display:inline-block;padding:10px 0}.note a{display:inline-block;padding:10px 4px}.rec .why{color:var(--ink2);font-size:.95rem}
/* checklist, cheat sheets, planner */
.check{list-style:none;padding:0}
.check li{position:relative;padding:10px 0 10px 40px;border-bottom:1px solid var(--line);max-width:none}
.check li::before{content:"";position:absolute;left:4px;top:13px;width:20px;height:20px;border:2px solid var(--ink2);border-radius:5px;background:var(--surface)}
.check b{display:block}
.cheat{background:var(--surface);border:2px solid var(--ink);border-radius:var(--r);padding:var(--s5)}
.cheat h2{margin-top:var(--s4);font-size:1.15rem}
.cheat h1{font-size:2rem;margin:0}
.cheat .two{display:grid;gap:var(--s4);grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.cheat ol,.cheat ul{margin:0;padding-left:20px}
.cheat li{margin-bottom:4px;font-size:.98rem;line-height:1.5}
.sched{font:.95rem/1.6 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;min-height:260px}
/* band, footer, bar */
.band{background:linear-gradient(160deg,var(--deep),var(--deep2));color:var(--ondeep);border-radius:var(--r);padding:var(--s7) var(--s5);margin:var(--s7) 0 0}
.band h2{margin:0 0 var(--s2);color:#fff}
.band p{color:var(--ondeep)}
.band a:not(.btn){color:#fff}
.foot{background:var(--deep);color:var(--ondeep2);padding:var(--s7) 0 var(--s7);font-size:.95rem}
.foot a.logo{display:inline-flex;padding:0}.foot a{color:var(--ondeep);display:flex;align-items:center;padding:4px 0;text-decoration:none;min-height:44px}
.foot a:hover{text-decoration:underline;color:#fff}
.fcols{display:grid;gap:var(--s5);grid-template-columns:repeat(auto-fit,minmax(160px,1fr))}
.fcols b{display:block;color:#fff;margin-bottom:6px}
.foot .logo{margin-bottom:var(--s2);align-items:center}.foot .wm{color:#F7F8F4}.foot .wm .t{color:#4CAF78}.foot .mark{box-shadow:0 0 0 1px rgba(255,255,255,.28)}
.foot .fine{color:var(--ondeep2)}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:none;gap:var(--s2);padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--line);box-shadow:0 -8px 24px rgba(0,0,0,.12);justify-content:center}
.mbar.on{display:flex}
.mbar .btn{margin:0;flex:1;max-width:360px}
@media (min-width:900px){.mbar{display:none!important}}
.rv{transition:opacity .5s ease,transform .5s ease}
.js-rv .rv:not(.in){opacity:0;transform:translateY(14px)}
@media (prefers-reduced-motion:no-preference){.btn,a.card,.door,.tool,.cats a{transition:background .15s,border-color .15s,transform .15s,box-shadow .15s}a.card:hover,.door:hover,.tool:hover{transform:translateY(-2px)}html{scroll-behavior:smooth}}
@media (prefers-reduced-motion:reduce){.rv{transition:none}.js-rv .rv:not(.in){opacity:1;transform:none}}
.pb{display:none!important}.js .pb{display:inline-flex!important}.js .tabs.pb,.js .hnav.pb{display:flex!important}.js .stepper button.pb{display:grid!important}
@media print{
 :root{--bg:#fff;--bg2:#fff;--surface:#fff;--ink:#000;--ink2:#222;--line:#999;--brand:#000;--tint:#eee;--warmink:#000;--deep:#fff;--deep2:#fff;--ondeep:#000;--ondeep2:#222}
 body{font-size:11.5pt;line-height:1.4;background:#fff}
 .top,.foot,.skip,.btn,form,.crumbs,.mbar,.menu,.mnav,.noprint,.pb,.band,.sec.alt.noprint{display:none!important}
 a{color:#000;text-decoration:underline}
 .sec{padding:12pt 0}.hero{padding:0;background:#fff}
 .result,.card,details,table,.worked,.cheat{break-inside:avoid}
 details>*{display:block}
 .rv{opacity:1!important;transform:none!important}
 .cheat{border:1.5pt solid #000;padding:12pt}
 @page{margin:14mm}
}