/* Harvestly. Editorial, calm. One motif: the countdown dial from the logo. DM Sans, self-hosted.
   Theme: follows the system; html[data-theme=light|dark] (set by the header button) overrides it. */
@font-face{font-family:"DM Sans";font-weight:400;font-style:normal;font-display:swap;src:url(/assets/fonts/dm-sans-latin-400-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:500;font-style:normal;font-display:swap;src:url(/assets/fonts/dm-sans-latin-500-normal.woff2) format("woff2")}
@font-face{font-family:"DM Sans";font-weight:700;font-style:normal;font-display:swap;src:url(/assets/fonts/dm-sans-latin-700-normal.woff2) format("woff2")}

:root{
  color-scheme:light dark;
  --bg:#FDFBF8; --panel:#F3EDDA; --raise:#FFFFFF; --ink:#1A1A17; --ink2:#524F47;
  --green:#09342B; --amber:#CC9033; --amber-ink:#7D4F06; --soft:#E9DFC0; --line:#D8D0BA; --red:#B3402A;
  --focus:#09342B; --btn-bg:#09342B; --btn-ink:#FDFBF8; --on-amber:#1A1A17;
  --tick-off:#C9C0A4; --tick-on:#CC9033; --hand:#09342B;
  --night:#09342B; --night-ink:#EFE8CF; --night-ink2:#BCC8B7; --night-line:#2C5C4F;
  --sack:#E9DFC0; --sack-line:#CBBE92; --sack-shade:#D9CB9F; --sack-tie:#09342B;
  --ph-frame:#14201C; --ph-screen:#F6F1E3; --ph-in:#FFFFFF; --ph-out:#E9DFC0; --ph-ink:#1A1A17; --ph-sub:#5E5B52;
  --heat0:transparent; --heat1:rgba(204,144,51,.18); --heat2:rgba(204,144,51,.38); --heat3:rgba(204,144,51,.62); --heat3-ink:var(--ink);
  --solid-bg:#09342B; --solid-ink:#FDFBF8; --high-ink:#FFFFFF; --c-a:#09342B;
  --mark-off:#B9AE8C;
  --measure:62ch; --hh:56px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme=light]){
    color-scheme:dark;
    --bg:#09342B; --panel:#0D3F34; --raise:#10473B; --ink:#EFE8CF; --ink2:#BDC8B8;
    --amber:#D9A441; --amber-ink:#D9A441; --soft:#E9DFC0; --line:#2A5C4F; --red:#F0907A;
    --focus:#D9A441; --btn-bg:#D9A441; --btn-ink:#09342B; --on-amber:#09342B;
    --tick-off:#1F5144; --tick-on:#D9A441; --hand:#EFE8CF;
    --night:#051F19; --night-ink:#EFE8CF; --night-ink2:#B5C2B1; --night-line:#1F4A3F;
    --sack:#D8CDA6; --sack-line:#B5A877; --sack-shade:#C2B685; --sack-tie:#09342B;
    --ph-frame:#031512; --ph-screen:#0B2A23; --ph-in:#143D33; --ph-out:#E9DFC0; --ph-ink:#EFE8CF; --ph-sub:#A9B8A8;
    --heat1:rgba(217,164,65,.20); --heat2:rgba(217,164,65,.38); --heat3:rgba(217,164,65,.75); --heat3-ink:#051F19;
    --solid-bg:#E9DFC0; --solid-ink:#09342B; --high-ink:#09342B; --c-a:#E9DFC0;
    --mark-off:#3F7566;
  }
}
:root[data-theme=dark]{
    color-scheme:dark;
    --bg:#09342B; --panel:#0D3F34; --raise:#10473B; --ink:#EFE8CF; --ink2:#BDC8B8;
    --amber:#D9A441; --amber-ink:#D9A441; --soft:#E9DFC0; --line:#2A5C4F; --red:#F0907A;
    --focus:#D9A441; --btn-bg:#D9A441; --btn-ink:#09342B; --on-amber:#09342B;
    --tick-off:#1F5144; --tick-on:#D9A441; --hand:#EFE8CF;
    --night:#051F19; --night-ink:#EFE8CF; --night-ink2:#B5C2B1; --night-line:#1F4A3F;
    --sack:#D8CDA6; --sack-line:#B5A877; --sack-shade:#C2B685; --sack-tie:#09342B;
    --ph-frame:#031512; --ph-screen:#0B2A23; --ph-in:#143D33; --ph-out:#E9DFC0; --ph-ink:#EFE8CF; --ph-sub:#A9B8A8;
    --heat1:rgba(217,164,65,.20); --heat2:rgba(217,164,65,.38); --heat3:rgba(217,164,65,.75); --heat3-ink:#051F19;
    --solid-bg:#E9DFC0; --solid-ink:#09342B; --high-ink:#09342B; --c-a:#E9DFC0;
    --mark-off:#3F7566;
}
:root[data-theme=light]{color-scheme:light}

*,*::before,*::after{box-sizing:border-box}
html{font-size:clamp(16.5px,.3vw + 15.6px,18px);-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"DM Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:1rem;line-height:1.6;font-feature-settings:"tnum" 1;overflow-x:hidden}
img,svg{max-width:100%}
a{color:inherit;text-decoration-thickness:1px;text-underline-offset:.2em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;border-radius:2px}
.night :focus-visible{outline-color:var(--tick-on)}
.vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:12px;top:-60px;z-index:60;background:var(--btn-bg);color:var(--btn-ink);padding:10px 16px;font-weight:700}
.skip:focus{top:12px}
.nb{white-space:nowrap}
.print-only{display:none}
.wrap{width:100%;max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,48px)}
h1,h2,h3{margin:0;font-weight:700;letter-spacing:-.03em;line-height:1.08;text-wrap:balance}
h2{font-size:clamp(2.1rem,1.1rem + 4.2vw,4.4rem);letter-spacing:-.04em;margin-block-end:clamp(22px,3.4vw,44px)}
h3{font-size:1.2rem;letter-spacing:-.015em;line-height:1.25}
p{margin:0 0 1em;text-wrap:pretty}
code{font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.86em;background:var(--panel);padding:.08em .35em;border-radius:3px;overflow-wrap:anywhere}
.night code{background:rgba(255,255,255,.08)}

/* ---------- masthead (sticky; hides while scrolling down, returns on scroll up) ---------- */
.masthead{position:sticky;top:0;z-index:40;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:0 16px;min-height:var(--hh);padding:6px clamp(16px,4vw,40px);background:var(--bg);border-bottom:1px solid var(--line);transition:transform .25s ease}
.masthead.is-hidden{transform:translateY(-101%)}
@media (prefers-reduced-motion:reduce){.masthead{transition:none}}
.brand{display:block;line-height:0}
.brand img{display:block;height:30px;width:auto}
.logo-d{display:none!important}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .logo-l{display:none!important}:root:not([data-theme=light]) .logo-d{display:block!important}}
:root[data-theme=dark] .logo-l{display:none!important}:root[data-theme=dark] .logo-d{display:block!important}
.masthead nav ul{display:flex;flex-wrap:wrap;justify-content:center;gap:0 clamp(12px,2.4vw,30px);margin:0;padding:0;list-style:none}
.masthead nav a{display:inline-flex;align-items:center;min-height:40px;padding:0 2px;font-size:.9rem;font-weight:500;text-decoration:none;color:var(--ink2);border-bottom:2px solid transparent}
.masthead nav a:hover{color:var(--ink);border-bottom-color:var(--line)}
.masthead nav a[aria-current=page]{color:var(--ink);border-bottom-color:var(--amber)}
.theme-btn{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1.5px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.theme-btn:hover{border-color:var(--ink)}
.theme-btn[aria-pressed=true] svg{transform:scaleX(-1)}
@media (max-width:720px){
  .masthead{grid-template-columns:1fr auto;grid-template-areas:"brand theme" "nav nav";row-gap:0;padding-block:6px 0}
  .brand{grid-area:brand}.theme-btn{grid-area:theme;width:36px;height:36px}.masthead nav{grid-area:nav}
  .masthead nav a{min-height:36px;font-size:.88rem}
}

/* ---------- common bits ---------- */
.sec{padding-block:clamp(64px,9vw,128px);border-top:1px solid var(--line)}
.sec:first-of-type{border-top:0}
.panel{background:var(--panel)}
.night{--bg:var(--night);--ink:var(--night-ink);--ink2:var(--night-ink2);--line:var(--night-line);--tick-off:var(--night-line);--tick-on:#D9A441;--hand:var(--night-ink);--amber-ink:#D9A441;--panel:rgba(255,255,255,.05);--raise:rgba(255,255,255,.07);--red:#F0907A;--btn-bg:#D9A441;--btn-ink:#09342B;--focus:#D9A441;--amber:#D9A441;--on-amber:#09342B;--solid-bg:#E9DFC0;--solid-ink:#09342B;--high-ink:#09342B;--mark-off:#3F7566;--c-a:#E9DFC0;
  background:var(--night);color:var(--night-ink);border-top:0}
.mark{display:flex;align-items:center;gap:12px;margin:0 0 clamp(18px,3vw,30px);font-size:.82rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--ink2)}
.mark-dial{width:36px;height:36px;flex:none}
.mark-n{color:var(--amber-ink);font-weight:700;margin-right:.35em}
.lede{font-size:clamp(1.15rem,1rem + .7vw,1.55rem);line-height:1.4;color:var(--ink);max-width:34ch;margin:18px auto 22px;letter-spacing:-.01em}
.fine{font-size:.84rem;line-height:1.5;color:var(--ink2);max-width:70ch}
.prose{max-width:var(--measure)}
.prose p,.prose-wide p{font-size:1.06rem}
.prose-wide{max-width:70ch}
.prose h3,.h3-gap{margin:0 0 .6em}
.h3-gap{margin-top:2.2em}
.actions{display:flex;flex-wrap:wrap;gap:12px 28px;align-items:center;justify-content:center;margin:0}
.actions-left{justify-content:flex-start;margin-top:2em}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 26px;background:var(--btn-bg);color:var(--btn-ink);font-family:inherit;font-weight:700;font-size:1rem;line-height:1.2;text-decoration:none;border:2px solid var(--btn-bg);border-radius:3px;cursor:pointer;text-align:center;letter-spacing:-.005em;overflow-wrap:anywhere}
.btn:hover{background:transparent;color:var(--btn-bg)}
.night .btn:hover{color:#D9A441}
.btn-quiet{background:transparent;color:var(--ink);border-color:var(--ink);min-height:44px;padding:8px 20px}
.btn-quiet:hover{background:var(--ink);color:var(--bg)}
.textlink{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink);text-decoration-thickness:2px;text-decoration-color:var(--amber);text-underline-offset:.28em}
.textlink:hover{text-decoration-color:var(--ink)}
/* reference markers: inline, no space before or after, never split from the word or the full stop */
.refs{white-space:nowrap}
.ref{display:inline;position:relative;font-size:.8em;font-weight:700;line-height:0;vertical-align:baseline;color:var(--amber-ink);text-decoration:none;margin:0 .06em;padding:0 .04em;border-radius:2px}
.ref{top:-.32em}
.ref::before{content:"["}.ref::after{content:"]"}
.ref:hover{background:var(--panel);text-decoration:underline}
.tag{display:inline-block;padding:2px 9px;font-size:.7rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;border:1.5px solid transparent;border-radius:2px;line-height:1.5;white-space:nowrap;vertical-align:middle}
.tag-source,.tag-verified{background:var(--solid-bg);color:var(--solid-ink)}
.tag-source-based{background:var(--solid-bg);color:var(--solid-ink);outline:1.5px dashed var(--solid-ink);outline-offset:-4px}
.tag-calibration,.tag-secondary{background:var(--amber);color:var(--on-amber)}
.tag-programme,.tag-cited{border:1.5px dashed var(--ink);color:var(--ink)}
.tag-unvalidated{border:1.5px solid var(--red);color:var(--ink)}
.tag-estimate{border:1.5px solid var(--ink);color:var(--ink);font-size:.8rem;margin-right:.4em;position:relative;top:-.18em}
.two{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr;align-items:start}
@media (min-width:900px){.two{grid-template-columns:5fr 7fr}}
.dial{display:block}
.dial .t{stroke:var(--tick-off);fill:none}
.dial .t.on{stroke:var(--tick-on)}
.dial-medium .t.on{stroke:var(--amber)}
.dial-high .t.on{stroke:var(--red)}
.dial .hand{stroke:var(--hand);stroke-linecap:round}
.mark-dial .t{stroke:var(--mark-off)}.mark-dial .t.on{stroke:var(--amber)}
.night .mark-dial .t.on{stroke:#D9A441}

/* ---------- hero ---------- */
.hero{padding:clamp(18px,3vw,40px) 0 clamp(48px,8vw,96px);text-align:center}
.hero-in{display:grid;justify-items:center;grid-template-areas:"dial" "lede" "actions" "note" "example" "phone"}
.hero-stage{grid-area:dial;--d:clamp(250px,70vw,380px);position:relative;width:var(--d);height:var(--d);margin:0 auto}
@media (min-width:1000px){.hero-stage{--d:clamp(210px,calc(100vh - 540px),400px)}
  .hero{padding-top:clamp(12px,2vh,28px)}
  .hero .lede{max-width:54ch;margin:4px auto 14px}
  .hero .actions{gap:10px 22px}
  .hero .example{margin-top:10px}}
.hero-ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.hero h1{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:calc(var(--d)*.02)}
.hero .num{font-size:calc(var(--d)*.4);line-height:.86;letter-spacing:-.06em;font-weight:700;color:var(--ink);font-feature-settings:"tnum" 1}
.hero .unit{font-size:calc(var(--d)*.1);font-weight:500;letter-spacing:-.02em;margin-top:calc(var(--d)*.02);color:var(--ink)}
.hero .lede{grid-area:lede;margin:8px auto 20px;max-width:38ch}
.hero .actions{grid-area:actions}
.hero .form-note{grid-area:note}
.example{grid-area:example;max-width:52ch;margin:18px auto 0;font-size:.86rem;line-height:1.5;color:var(--ink2)}
.hero-phone{grid-area:phone;margin:clamp(32px,6vw,56px) 0 0;width:100%;display:flex;flex-direction:column;align-items:center;gap:8px}
@media (max-width:999px){.hero-phone .phone{--pw:min(calc(100vw - 48px),260px)}}
@media (min-width:1000px){
  .hero-in{grid-template-columns:auto auto;justify-content:center;column-gap:clamp(56px,7vw,112px);grid-template-areas:"dial phone" "lede phone" "actions phone" "note phone" "example phone";align-items:center;align-content:center}
  .hero-phone{margin:0;align-self:center}
  .hero-phone .phone{--pw:clamp(190px,calc((100vh - 200px)/2.16),300px)}
}
@keyframes tick-in{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:no-preference){
  .js .hero-ring .t.on{animation:tick-in .35s ease-out both}
  .js .hero-ring .hand{animation:tick-in .5s ease-out 1.3s both}
}

/* ---------- phone and messages ---------- */
/* THE phone, used on every page. One width token (--pw) sets every size, so it can never be stretched or squat: body 1 : 2.16 (about 72 x 155 mm),
   bezel 2.6% of the width, punch-hole camera, status bar, Android messages header, thread, compose bar, gesture bar. Text never drops under 12px. */
.phone{--pw:min(calc(100vw - 48px),300px);--bz:calc(var(--pw)*.026);position:relative;width:var(--pw);height:calc(var(--pw)*2.16);background:var(--ph-frame);border-radius:calc(var(--pw)*.12);padding:var(--bz);box-shadow:0 0 0 1px rgba(255,255,255,.16),0 24px 50px -24px rgba(9,52,43,.45);text-align:left;box-sizing:border-box;display:flex;flex:none}
.phone::before,.phone::after{content:"";position:absolute;right:calc(var(--pw)*-.012);width:calc(var(--pw)*.014);background:var(--ph-frame);border-radius:0 2px 2px 0}
.phone::before{top:21%;height:7%}
.phone::after{top:32%;height:12%}
.phone-screen{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;background:var(--ph-screen);color:var(--ph-ink);border-radius:calc(var(--pw)*.095);overflow:hidden;font-size:max(12px,calc(var(--pw)*.04))}
.ph-status{display:flex;align-items:center;justify-content:space-between;padding:calc(var(--pw)*.03) calc(var(--pw)*.07) 0;height:calc(var(--pw)*.1);font-size:max(12px,calc(var(--pw)*.038));font-weight:700;flex:none}
.ph-hole{position:absolute;left:50%;top:calc(var(--pw)*.026);width:calc(var(--pw)*.034);height:calc(var(--pw)*.034);margin-left:calc(var(--pw)*-.017);border-radius:50%;background:var(--ph-frame)}
.ph-icons{display:flex;align-items:center;gap:calc(var(--pw)*.015)}
.ph-icons svg{height:max(9px,calc(var(--pw)*.034));width:auto}
.phone-head{display:flex;align-items:center;gap:calc(var(--pw)*.02);padding:calc(var(--pw)*.02) calc(var(--pw)*.03) calc(var(--pw)*.025);border-bottom:1px solid rgba(128,128,110,.22);flex:none}
.ph-ic{display:flex;color:var(--ph-ink)}.ph-ic svg{width:max(18px,calc(var(--pw)*.058));height:auto}
.ph-avatar{display:grid;place-items:center;flex:none;width:calc(var(--pw)*.1);height:calc(var(--pw)*.1);min-width:30px;min-height:30px;border-radius:50%;background:var(--ph-out)}
.ph-avatar img{height:60%;width:auto}
.ph-who{flex:1;min-width:0}
.phone-head strong{display:block;font-size:max(14px,calc(var(--pw)*.047));line-height:1.2}
.phone-head small{display:block;font-size:max(12px,calc(var(--pw)*.038));color:var(--ph-sub);line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.thread{list-style:none;margin:0;padding:0}
.phone .thread{flex:1;min-height:0;overflow:hidden;padding:calc(var(--pw)*.04) calc(var(--pw)*.035);display:flex;flex-direction:column}
.phone .thread>:first-child{margin-top:auto}
.phone .msg{margin-bottom:calc(var(--pw)*.035)}
.phone .msg p{font-size:max(12px,calc(var(--pw)*.046))}
.phone .msg-meta{font-size:max(12px,calc(var(--pw)*.034))}
.ph-compose{flex:none;display:flex;align-items:center;gap:calc(var(--pw)*.01);margin:0 calc(var(--pw)*.03);padding:calc(var(--pw)*.012) calc(var(--pw)*.025);border-radius:calc(var(--pw)*.07);background:var(--ph-in);border:1px solid rgba(128,128,110,.25);font-size:max(12px,calc(var(--pw)*.038));color:var(--ph-sub)}
.ph-compose .ph-ic{color:var(--ph-sub)}
.ph-field{flex:1;min-width:0}
.ph-nav{flex:none;height:calc(var(--pw)*.07);display:grid;place-items:center}
.ph-nav i{display:block;width:34%;height:calc(var(--pw)*.014);min-height:3px;border-radius:4px;background:var(--ph-ink);opacity:.7}
/* typing indicator and message arrival (hero) */
.msg-typing p{display:flex;gap:calc(var(--pw)*.018);align-items:center;padding:calc(var(--pw)*.04) calc(var(--pw)*.05)}
.msg-typing i{display:block;width:calc(var(--pw)*.022);height:calc(var(--pw)*.022);min-width:6px;min-height:6px;border-radius:50%;background:var(--ph-sub);opacity:.5}
@keyframes ph-dot{0%,80%,100%{opacity:.3}40%{opacity:1}}
@keyframes ph-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){
  .msg-typing i{animation:ph-dot 1s infinite}.msg-typing i:nth-child(2){animation-delay:.18s}.msg-typing i:nth-child(3){animation-delay:.36s}
  .msg.is-new{animation:ph-in .3s ease-out both}
}
.msg{display:flex;flex-direction:column;margin:0 0 10px;max-width:92%}
.msg p{margin:0;padding:10px 13px;font-size:.84rem;line-height:1.42;border-radius:15px 15px 15px 4px;background:var(--ph-in);color:var(--ph-ink);border:1px solid rgba(128,128,110,.2);text-wrap:pretty}
.msg-meta{font-size:.76rem;color:var(--ph-sub);margin:3px 4px 0}
.msg-out{align-self:flex-end;align-items:flex-end}
.msg-out p{border-radius:15px 15px 4px 15px;background:var(--ph-out);color:#1A1A17;border-color:transparent;font-weight:500}
.msg-in{align-self:flex-start}
html[data-sms=sw] [data-l=en],html:not([data-sms=sw]) [data-l=sw]{display:none}
.seg{display:inline-flex;border:1.5px solid var(--ink);border-radius:3px;overflow:hidden}
.seg button{font-family:inherit;font-weight:500;font-size:.8rem;line-height:1;min-height:30px;padding:0 12px;border:0;background:transparent;color:var(--ink);cursor:pointer}
.seg button[aria-pressed=true]{background:var(--ink);color:var(--bg);font-weight:700}
.seg-wrap{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.seg-note{font-size:.8rem;color:var(--ink2);max-width:30ch;line-height:1.35}
.rules-bar{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:center;justify-content:space-between;margin:0 0 clamp(24px,4vw,44px)}
.rules-bar p{margin:0;color:var(--ink2);font-size:.95rem;max-width:60ch}
.ph{background:rgba(204,144,51,.2);box-shadow:0 0 0 2px rgba(204,144,51,.2);border-radius:3px;font-size:.88em;white-space:nowrap}

/* ---------- 2. problem ---------- */
.problem .two{align-items:center}
.sacks{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,3vw,40px);align-items:end}
.sk{margin:0;text-align:center}
.sk-art{position:relative;display:block;max-width:230px;margin:0 auto}
.sack{width:100%;height:auto;display:block}
.sk:nth-child(2) .sack{transform:scaleX(-1) rotate(-2deg);transform-origin:50% 100%}
.sk-badge{position:absolute;right:8%;top:34%;width:2.4em;height:2.4em;border-radius:50%;background:var(--solid-bg);color:var(--solid-ink);display:grid;place-items:center;font-weight:700;font-size:1.1rem;box-shadow:0 0 0 3px var(--bg)}
.sk:nth-child(2) .sk-badge{right:auto;left:8%}
.sk figcaption{margin-top:12px;font-size:.95rem;line-height:1.4}
.sk figcaption>b{display:block;font-size:1.05rem}
.sk-note{display:block;color:var(--ink2);min-height:2.9em}
.sk-note b{color:var(--ink)}
.when-on{display:none}
.sacks[data-state=shown] .when-on,#reveal[aria-pressed=true] .when-on{display:inline}
.sacks[data-state=shown] .when-off,#reveal[aria-pressed=true] .when-off{display:none}
.sacks[data-state=shown] .sk:nth-child(2) .sk-badge{background:var(--amber);color:var(--on-amber)}
.sacks[data-state=shown] .sk:nth-child(1) .sk-badge::before{content:"13%"}
.sacks[data-state=shown] .sk:nth-child(2) .sk-badge::before{content:"18%"}
.sacks[data-state=shown] .sk-badge{font-size:0}
.sacks[data-state=shown] .sk-badge::before{font-size:.86rem}
.sk-badge{transition:background .3s}
.sk-neck,.sk-body{fill:var(--sack)}
.sk-weave{stroke:var(--sack-line);stroke-width:.7;fill:none;opacity:.7}
.sk-shade{fill:var(--sack-shade);opacity:.55}
.sk-tie{stroke:var(--sack-tie);stroke-width:5;stroke-linecap:round;fill:none}
.sk-knot,.sk-ear{stroke:var(--sack-tie);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;fill:none}
.sk-outline{fill:none;stroke:var(--sack-line);stroke-width:1.5;stroke-linejoin:round}
.sk-seam{stroke:var(--sack-line);stroke-width:1.2;stroke-dasharray:3 3;fill:none}
.reveal-wrap{margin-top:1.6em}
.ledger-wrap{margin-top:clamp(56px,8vw,104px);padding-top:clamp(28px,4vw,48px);border-top:2px solid var(--ink)}
.ledger-wrap h3{margin-bottom:clamp(14px,2.4vw,28px);font-size:clamp(1.15rem,1rem + .8vw,1.6rem)}
.ledger{list-style:none;margin:0 0 20px;padding:0}
.led-row{display:grid;grid-template-columns:1fr auto;gap:2px 16px;align-items:end;padding:16px 0 18px;border-bottom:1px solid var(--line)}
.led-m,.led-d{font-size:.95rem;color:var(--ink2)}
.led-m b,.led-d b{display:block;font-size:clamp(2.6rem,1.4rem + 5vw,5.4rem);line-height:.95;letter-spacing:-.05em;color:var(--ink)}
.led-d{text-align:right}
.tape{grid-column:1/-1;height:14px;margin-top:10px}
.tape line{stroke:var(--amber)}
.led-row:nth-child(1) .tape line{stroke:var(--solid-bg)}
.led-row:nth-child(3) .tape line{stroke:var(--red)}

/* ---------- 3. why now ---------- */
.dateline{margin:0 0 14px;font-size:.82rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.why h2{max-width:12ch}
.why-grid{display:grid;gap:clamp(28px,5vw,64px);grid-template-columns:1fr;border-top:2px solid var(--ink);padding-top:clamp(24px,4vw,40px)}
@media (min-width:860px){.why-grid{grid-template-columns:1fr 1fr}.why-stat+.why-stat{border-left:1px solid var(--line);padding-left:clamp(28px,5vw,64px)}.why-stat .big{display:flex;align-items:flex-end;min-height:1.9em}}
.big{display:block;font-size:clamp(2.6rem,1.2rem + 5.2vw,5.6rem);font-weight:700;line-height:.95;letter-spacing:-.05em;margin-bottom:.22em}
.why-stat p{max-width:36ch;font-size:1.08rem}
.quote{margin:clamp(40px,6vw,72px) 0 0;padding:clamp(22px,3vw,34px) 0 0;border-top:1px solid var(--line)}
.quote blockquote{margin:0 0 14px;padding:0}
.quote blockquote p{margin:0;font-size:clamp(1.5rem,1rem + 2.2vw,2.7rem);font-weight:500;letter-spacing:-.03em;line-height:1.15;max-width:24ch;text-wrap:balance}
.quote figcaption{max-width:60ch;font-size:.92rem;color:var(--ink2)}

/* ---------- 4. twelve days (scrollytelling) ---------- */
.story{padding-block:clamp(64px,9vw,120px) 0}
.story-intro{padding-bottom:clamp(24px,4vw,48px)}
.story h2{margin-bottom:18px}
.story-lede{max-width:56ch;font-size:1.12rem;color:var(--ink2)}
.noscript{padding:14px 16px;border:1px dashed var(--ink2);margin-top:16px}
.track{position:relative}
.stage{padding-block:clamp(20px,3vw,36px) clamp(64px,9vw,120px)}
.js .track{height:calc(100svh + 12 * 34svh)}
.js .stage{position:sticky;top:0;height:100svh;padding-block:clamp(14px,2.4vh,28px) clamp(10px,2vh,24px);display:flex;align-items:center;overflow:hidden}
@media (prefers-reduced-motion:reduce){.js .track{height:auto}.js .stage{position:static;height:auto;overflow:visible;padding-block:24px 80px}}
.stage-in{display:grid;gap:clamp(12px,2.4vw,40px);grid-template-columns:1fr;align-items:center}
@media (min-width:980px){.stage-in{grid-template-columns:4fr 7fr}}
.st-day{margin:0;font-size:clamp(3rem,1.2rem + 5vw,6rem);font-weight:700;line-height:1.1;letter-spacing:-.06em;display:flex;align-items:baseline;gap:.25em;flex-wrap:nowrap;white-space:nowrap}
.st-of{font-size:max(.8125rem,.22em);font-weight:500;letter-spacing:0;color:var(--ink2)}
.st-date{margin:4px 0 clamp(8px,1.6vh,16px);font-size:.95rem;color:var(--ink2);font-weight:500}
.st-cap{margin:0 0 clamp(8px,1.6vh,16px);font-size:clamp(.98rem,.9rem + .35vw,1.14rem);line-height:1.45;max-width:40ch}
.controls{display:flex;align-items:center;gap:10px;max-width:360px}
.ctl{flex:none;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--ink);background:transparent;color:var(--ink);font-family:inherit;font-weight:700;font-size:1.1rem;line-height:1;cursor:pointer}
.ctl:hover{background:var(--ink);color:var(--bg)}
.scrub{flex:1;display:block}
.scrub input{width:100%;height:44px;margin:0;background:transparent;accent-color:var(--tick-on);cursor:pointer}
.st-right{display:grid;gap:clamp(8px,1.6vh,16px);min-width:0}
.gauges{display:grid;grid-template-columns:auto 1fr;gap:clamp(12px,3vw,32px);align-items:center}
.gauge-dial,.out-dial{position:relative;width:clamp(112px,28vw,170px);aspect-ratio:1}
.dial-host,.dial-host svg{width:100%;height:100%}
.dial-read{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding-bottom:6%}
.dial-read b{font-size:clamp(1.8rem,1.1rem + 2.2vw,3rem);line-height:.9;letter-spacing:-.05em}
.dial-read span{font-size:.76rem;color:var(--ink2);margin-top:2px;line-height:1.2;max-width:70%}
.gauge-col{display:flex;flex-direction:column;align-items:center;gap:4px}
.gauge-col .dial-scale{max-width:21ch;margin:0}
.meters{margin:0;display:grid;gap:8px}
.meters>div{display:grid;grid-template-columns:minmax(0,9.5em) 1fr;align-items:center;gap:8px}
.meters dt{font-size:.82rem;color:var(--ink2)}
.meters dd{margin:0;font-weight:700;font-size:1.05rem;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.meters .sub{font-weight:400;font-size:.78rem;color:var(--ink2)}
.bar{display:block;flex:1;height:8px;background:var(--tick-off);border-radius:1px;overflow:hidden;max-width:140px}
.bar i{display:block;height:100%;width:0;background:var(--amber)}
.pill{display:inline-block;padding:3px 12px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;border-radius:2px;line-height:1.4}
.pill-low{background:var(--solid-bg);color:var(--solid-ink)}
.pill-medium{background:var(--amber);color:var(--on-amber)}
.pill-high{background:var(--red);color:var(--high-ink)}
.pill-sm{font-size:.76rem;letter-spacing:0;text-transform:none;padding:2px 8px;white-space:nowrap}
.chart{margin:0}
.chart figcaption{display:flex;flex-wrap:wrap;gap:2px 14px;justify-content:space-between;font-size:.78rem;color:var(--ink2);margin-bottom:4px}
.legend{display:inline-flex;gap:4px 12px;align-items:center;flex-wrap:wrap}
.legend>span{white-space:nowrap}
.lg{display:inline-block;width:9px;height:9px;margin-right:4px;border-radius:1px;vertical-align:baseline}
.lg-a{background:var(--ink)}.lg-f{border:1.5px dashed var(--ink2);width:11px}.lg-r{background:var(--amber);border-radius:50%}
.lg-l{height:0;width:14px;border-top:2px dashed var(--amber);border-radius:0;margin-bottom:3px}
.lg-1{height:0;width:16px;border-top:3px solid var(--c-a);border-radius:0;margin-bottom:3px}
.lg-2{height:0;width:16px;border-top:3px solid var(--amber);border-radius:0;margin-bottom:3px}
.chart svg{display:block;width:100%;height:auto}
.chart-note{margin:4px 0 0;font-size:.78rem;line-height:1.4;color:var(--ink2);max-width:60ch}
.wx-a{fill:var(--ink);opacity:.85}
.wx-f{fill:none;stroke:var(--ink2);stroke-width:1.2;stroke-dasharray:3 2.4}
.wx-now{fill:none;stroke:var(--amber);stroke-width:2}
.wx-r{fill:var(--amber)}
/* chart text keeps one size in screen pixels: main.js sets --u (SVG units per pixel) on every chart svg */
.c-axis,.c-lab,.g-n,.g-lab,.g-sub,.tl{font-family:"DM Sans",sans-serif}
.c-axis{font-size:calc(var(--u,1)*11.5px);font-weight:500;fill:var(--ink2)}
.c-lab{font-size:calc(var(--u,1)*12.5px);font-weight:700;fill:var(--ink)}
.c-grid{stroke:var(--line);stroke-width:1}
.c-limit,.ml-limit{stroke:var(--amber);stroke-width:1.5;stroke-dasharray:5 4}
.c-air{stroke:var(--ink2);stroke-width:1.5;stroke-dasharray:1.5 4;stroke-linecap:round}   /* S5-01: dotted grey, never confused with the dashed amber limit */
.c-lab-limit{fill:var(--amber-ink);font-weight:500}
.ml-line,.c-line{fill:none;stroke:var(--ink);stroke-width:2.4;stroke-linejoin:round;stroke-linecap:round}
.ml-dot{fill:var(--amber);stroke:var(--bg);stroke-width:2}
.c-a{stroke:var(--c-a)}.c-b{stroke:var(--amber)}
.c-knock{fill:var(--bg);stroke:none}
.panel .c-knock{fill:var(--panel)}
.sms-empty{margin:auto;font-size:.82rem;color:var(--ph-sub);text-align:center;padding:12px}
.sms-more-li{list-style:none;display:flex;justify-content:center}
.sms-more-li[hidden],.sms-more-li:has(.sms-more[hidden]){display:none}
.sms-more{display:block;align-self:center;font:inherit;font-size:.78rem;font-weight:700;color:var(--ph-ink);background:transparent;border:1.5px solid var(--ph-ink);border-radius:14px;padding:3px 12px;min-height:24px;margin:0 0 6px;cursor:pointer}
.sms-more[hidden]{display:none}
.sms-more:hover{background:var(--ph-ink);color:var(--ph-screen)}
@media (max-width:979px){
  .stage-in{height:100%;grid-template-rows:auto minmax(0,1fr);align-items:stretch;gap:8px}
  .st-left{display:grid;grid-template-columns:auto 1fr;column-gap:12px;align-items:end}
  .st-left .st-cap,.st-left .controls{grid-column:1/-1}
  .st-day{font-size:clamp(2.4rem,11vw,3.4rem)}
  .st-date{margin:0;text-align:right;align-self:end;font-size:.88rem}
  .st-cap{font-size:.95rem;line-height:1.4;margin:4px 0 4px}
  .controls{max-width:none}
  .ctl{width:40px;height:40px}.scrub input{height:40px}
  .st-right{grid-template-rows:auto minmax(0,1fr);gap:8px;min-height:0}
  .st-main{gap:8px}
  .gauge-dial{width:clamp(108px,30vw,120px)}
  .dial-read b{font-size:1.4rem}
  .dial-read{padding-bottom:12%}.dial-read span{margin-top:0}
  .meters{gap:4px}
  .meters>div{grid-template-columns:7.6em 1fr;gap:6px}
  .meters dd{font-size:.95rem}
}
@media (max-width:979px) and (max-height:900px){.chart.ml{display:none}}
@media (max-width:979px) and (max-height:700px){.chart.wx figcaption .legend{display:none}}
@media (max-width:979px) and (prefers-reduced-motion:reduce){.stage-in{height:auto}.sms-wrap{min-height:360px}}

/* ---------- 5. calculator ---------- */
.calc-lede{max-width:56ch;font-size:1.1rem;color:var(--ink2);margin-bottom:clamp(24px,4vw,48px)}
.calc-grid{display:grid;gap:clamp(18px,4vw,56px);grid-template-columns:1fr}
@media (min-width:980px){.calc-grid{grid-template-columns:5fr 7fr;align-items:start}.calc-bar{display:none!important}}
.calc-form{display:grid;gap:22px}
fieldset{margin:0;padding:0;border:0;min-width:0}
legend{padding:0;margin-bottom:10px;font-weight:700;font-size:1.02rem;letter-spacing:-.01em}
.opts{display:grid;gap:8px;margin-bottom:14px}
.opt{display:flex;align-items:center;gap:12px;min-height:48px;padding:8px 14px;border:1.5px solid var(--line);border-radius:3px;background:var(--raise);cursor:pointer;font-weight:500}
.opt:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.opt input{width:24px;height:24px;margin:0;flex:none;accent-color:var(--hand)}
.field{display:grid;gap:6px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;align-items:start}
.field label{font-size:.88rem;font-weight:500;color:var(--ink2)}
input[type=text],input[type=number],select{width:100%;min-height:48px;padding:8px 12px;font-family:inherit;font-weight:500;font-size:1.05rem;line-height:1.2;color:var(--ink);background:var(--raise);border:1.5px solid var(--ink2);border-radius:3px;font-feature-settings:"tnum" 1}
select{appearance:auto}
input[type=text]:focus-visible,select:focus-visible{outline-offset:1px}
input[aria-invalid=true]{border-color:var(--red);box-shadow:inset 0 0 0 1px var(--red)}
.err{margin:0;font-size:.82rem;line-height:1.35;color:var(--red);font-weight:500}
.err[hidden]{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme=dark]) .err{color:#9A2F1B}}
:root[data-theme=light] .err{color:#9A2F1B}
.presets{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.chip{min-height:36px;padding:4px 14px;font-family:inherit;font-weight:500;font-size:.86rem;line-height:1.2;color:var(--ink);background:transparent;border:1.5px solid var(--ink2);border-radius:999px;cursor:pointer}
.chip:hover{border-color:var(--ink);background:var(--panel);text-decoration:underline;text-underline-offset:.2em}
.chip[aria-pressed=true]{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.hint{font-size:.85rem;color:var(--ink2);margin:8px 0 0}
.wx-use{margin:18px 0 0}
.wx-use .hint{max-width:56ch}
#wx-note:not(.on){margin:0}  /* N8-07: stays in the accessibility tree, empty, so the first result is announced */
.sat{display:grid;gap:14px;margin:32px 0 0;align-items:center}
.sat img{display:block;width:100%;max-width:360px;height:auto;aspect-ratio:1;border-radius:8px}
.sat figcaption p{font-size:.92rem;line-height:1.5;color:var(--ink2);margin:0 0 6px;max-width:60ch}
.sat .sat-credit{font-size:.84rem}
@media (min-width:760px){.sat{grid-template-columns:360px minmax(0,1fr);gap:28px}}
.calc-bar{position:sticky;bottom:8px;z-index:5;display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--ink);color:var(--bg);border-radius:4px;box-shadow:0 8px 24px -8px rgba(0,0,0,.4);font-weight:700;font-size:.92rem;line-height:1.3}
.calc-bar .pill{flex:none}
.calc-bar[data-state=invalid],.calc-bar[data-state=empty]{font-weight:500}
.calc-out{display:grid;gap:14px 28px;grid-template-columns:auto 1fr;align-items:center;padding:clamp(18px,3vw,32px);background:var(--panel);border:1px solid var(--line);border-radius:4px}
.out-top{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.out-title{font-size:clamp(1.5rem,1.1rem + 1.6vw,2.2rem);letter-spacing:-.03em;line-height:1.1;margin:0;flex:1 1 14ch}
.out-dial{width:clamp(130px,30vw,190px)}
.out-dial .dial-read b{font-size:clamp(2.2rem,1.4rem + 2.6vw,3.4rem)}
.dial-scale{margin:6px 0 0;font-size:.74rem;line-height:1.3;color:var(--ink2);text-align:center;max-width:16ch}
.out-dial-wrap{display:flex;flex-direction:column;align-items:center}
.out-lead{font-size:1.1rem;line-height:1.35;margin:0 0 12px;font-weight:500;letter-spacing:-.015em}
.out-nums{margin:0 0 10px;display:flex;flex-wrap:wrap;gap:6px 28px}
.out-nums div{min-width:7em}
.out-nums dt{font-size:.8rem;color:var(--ink2)}
.out-nums dd{margin:0;font-size:1.4rem;font-weight:700;letter-spacing:-.03em}
.out-note{font-size:.95rem;margin:0 0 .6em;color:var(--ink)}
.out-msg{grid-column:1/-1;margin:0;font-size:1.05rem;color:var(--ink2)}
.calc-out .chart,.calc-out .flags{grid-column:1/-1}
.calc-out[data-state=invalid] .out-top,.calc-out[data-state=invalid] .out-dial-wrap,.calc-out[data-state=invalid] .out-body,.calc-out[data-state=invalid] .chart,.calc-out[data-state=invalid] .flags,
.calc-out[data-state=empty] .out-top,.calc-out[data-state=empty] .out-dial-wrap,.calc-out[data-state=empty] .out-body,.calc-out[data-state=empty] .chart,.calc-out[data-state=empty] .flags{display:none}
.calc-out[data-state=ok] .out-msg{display:none}
.calc-out[data-state=invalid] .out-msg{color:var(--ink);font-weight:500}
.flags{margin:0;padding:14px 0 0 1.1em;border-top:1px solid var(--line);font-size:.88rem;color:var(--ink2);display:grid;gap:4px}
.flags .on{color:var(--ink);font-weight:700}
@media (max-width:560px){.calc-out{grid-template-columns:1fr;justify-items:start}.out-dial-wrap{justify-self:center}}

/* ---------- 6. rules ---------- */
.rule-list{list-style:none;margin:0;padding:0}
.rule{display:grid;gap:18px clamp(20px,4vw,56px);grid-template-columns:1fr;padding:clamp(28px,4vw,52px) 0;border-top:2px solid var(--ink)}
@media (min-width:900px){.rule{grid-template-columns:clamp(72px,9vw,120px) 5fr 6fr;align-items:start}}
.rule-n{display:block;font-size:clamp(4rem,2rem + 7vw,8rem);font-weight:700;line-height:.8;letter-spacing:-.06em;color:var(--amber-ink);width:.62em;text-align:left}
@media (min-width:900px){.rule-n{width:auto}}
.rule-t h3{font-size:clamp(1.4rem,1.1rem + 1vw,2rem);letter-spacing:-.03em;margin-bottom:.6em}
.rule-t p{max-width:46ch}
.rule-ex{min-width:0}
.rule-ex .tape-wrap{margin-bottom:14px}
.tape70{width:100%;height:auto;display:block}
.tape70 .tl{font-size:calc(var(--u,1)*12px);font-weight:500;fill:var(--ink2)}
.tape70 .tk{stroke:var(--ink2);opacity:.45}.tape70 .tk.hit{stroke:var(--amber);opacity:1}
.tape70 .tl-lead{stroke:var(--ink2);stroke-width:1;opacity:.6}

/* ---------- 7. know (tables) ---------- */
.know-lede{max-width:56ch;font-size:1.1rem;color:var(--ink2)}
.key{list-style:none;margin:1.4em 0 clamp(24px,4vw,40px);padding:0;display:grid;gap:10px 28px;font-size:.92rem;grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr))}
.key li{display:grid;grid-template-columns:7.8rem 1fr;align-items:start;gap:10px}
.key .tag{justify-self:start}
.key-col{grid-template-columns:1fr}
.table-wrap{overflow-x:auto;margin:0 0 28px;-webkit-overflow-scrolling:touch;border-top:2px solid var(--ink)}
.table-wrap:focus-visible{outline-offset:-2px}
.scroll-hint{display:none;margin:-14px 0 24px;font-size:.8rem;color:var(--ink2)}
table{border-collapse:collapse;width:100%}
.params{font-size:.93rem}
.params th,.params td{padding:14px 14px 14px 0;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);font-weight:400}
.params thead th{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);font-weight:700;border-bottom:1px solid var(--ink)}
.params tbody th{font-weight:700;letter-spacing:-.01em}
.params .pn{float:left;margin-left:0;width:2em}
.params tbody th{padding-left:2em;text-indent:-2em}
.params .sub{display:block;font-weight:400;font-size:.82rem;color:var(--ink2);margin-top:2px;text-indent:0}
.pn{display:inline-block;min-width:2em;text-indent:0;color:var(--amber-ink);font-weight:700}
.params.p5 col.c1{width:19%}.params.p5 col.c2{width:22%}.params.p5 col.c3{width:11%}.params.p5 col.c4{width:36%}.params.p5 col.c5{width:12%}
.params.p4 col.c1{width:22%}.params.p4 col.c2{width:28%}.params.p4 col.c3{width:12%}.params.p4 col.c4{width:38%}
.msgs col.c1{width:26%}.msgs col.c2{width:16%}.msgs col.c3{width:58%}
.msgs td:nth-child(2){white-space:nowrap}
.limits{margin-top:clamp(32px,5vw,64px);max-width:72ch}
.limits h3{margin-bottom:.7em}
.limits ul,.measures{margin:0;padding:0;list-style:none;display:grid;gap:0}
.limits li,.measures li{padding:14px 0 14px 28px;border-top:1px solid var(--line);position:relative;font-size:1.02rem}
.limits li::before,.measures li::before{content:"";position:absolute;left:0;top:1.35em;width:14px;height:4px;background:var(--amber);border-radius:1px}
.limits li:last-child,.measures li:last-child{border-bottom:1px solid var(--line)}
.measures{max-width:74ch}
.assume li .tag{margin-right:.5em;font-size:.7rem;padding:1px 7px}
@media (max-width:820px){
  .params thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .params,.params tbody,.params tr,.params th,.params td{display:block;width:100%!important}
  .params col{display:none}
  .params tr{padding:14px 0;border-bottom:1px solid var(--line)}
  .params th,.params td{border:0;padding:3px 0}
  .params tbody th{padding-left:2em;text-indent:-2em}
  .params td[data-label]::before{content:attr(data-label);display:block;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2);font-weight:700;margin-top:6px}
  .params td[data-label="Label"]::before{display:none}
}

/* ---------- 8. next: the gate ---------- */
.gate-fig{margin:0}
.gate{width:100%;height:auto;display:block;overflow:visible;max-width:560px}
.g-ok{fill:var(--heat2)}
.g-axis{stroke:var(--ink)}.g-tk{stroke:var(--ink)}
.g-n{font-size:calc(var(--u,1)*12.5px);font-weight:500;fill:var(--ink2)}
.g-line{stroke:var(--amber);stroke-linecap:round}
.g-lab{font-size:calc(var(--u,1)*14px);font-weight:700;fill:var(--ink)}
.g-sub{font-size:calc(var(--u,1)*12px);font-weight:500;fill:var(--ink2)}
.gate-legend{list-style:none;margin:10px 0 0;padding:0;display:grid;gap:4px;font-size:.88rem;color:var(--ink2)}
.gate-legend b{color:var(--ink)}
.next-two{margin-top:clamp(16px,2.4vw,28px)}
.key-dates{margin:clamp(28px,4vw,40px) 0 0;max-width:62ch;font-size:.95rem;color:var(--ink2)}

/* ---------- 9. partners / who ---------- */
.partners h2{max-width:20ch}
.who{margin:0 0 clamp(24px,4vw,40px);display:grid;gap:0;grid-template-columns:1fr}
.who>div{display:grid;gap:4px 28px;grid-template-columns:1fr;padding:18px 0;border-top:1px solid var(--line)}
.who>div:last-child{border-bottom:1px solid var(--line)}
.who dt{font-weight:700;font-size:1.25rem;letter-spacing:-.025em;line-height:1.2}
.who dd{margin:0;max-width:56ch;font-size:1.04rem}
@media (min-width:860px){.who>div{grid-template-columns:5fr 7fr;align-items:baseline}.who dt{font-size:1.5rem}}
.partners-fit{max-width:66ch;font-size:1.06rem}
.partners .actions{justify-content:flex-start;margin-top:1.6em}

/* ---------- secondary pages ---------- */
.phero{padding:clamp(36px,6vw,80px) 0 clamp(36px,5vw,64px);text-align:center}
.phero h1{font-size:clamp(2.4rem,1.2rem + 5.2vw,5.6rem);letter-spacing:-.045em;max-width:16ch;margin:0 auto}
.phero .lede{max-width:40ch}
.phero-in{display:flex;flex-direction:column;align-items:center}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:0}
.steps li{padding:clamp(20px,3vw,34px) 0;border-top:1px solid var(--line);display:grid;gap:8px 40px;grid-template-columns:1fr;align-items:start}
@media (min-width:860px){.steps li{grid-template-columns:4fr 8fr}.steps li h3{grid-row:1/3}}
.steps li:last-child{border-bottom:1px solid var(--line)}
.steps h3{font-size:clamp(1.3rem,1rem + 1vw,1.8rem);letter-spacing:-.03em}
.steps p{max-width:62ch;margin:0 0 .7em}
.steps-4{grid-template-columns:1fr}
.steps+.prose-wide{margin-top:clamp(20px,3vw,32px)}
.eg{padding:10px 14px;background:var(--panel);border-left:3px solid var(--amber);font-size:.95rem}
.panel .eg{background:var(--bg)}
.chart-fig{margin:28px 0 0}
.chart-svg{width:100%;max-width:860px;height:auto;display:block}
.chart-keys{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;font-size:.92rem;max-width:70ch}
.chart-keys li{display:flex;gap:10px;align-items:baseline}
.chart-keys .lg{flex:none}
.grid-table{font-size:.82rem;min-width:0;font-feature-settings:"tnum" 1}
.grid-table caption{caption-side:top;text-align:left;font-size:.9rem;font-weight:700;padding:14px 0 10px;white-space:normal;max-width:78ch}
.grid-table th,.grid-table td{padding:6px 8px;text-align:right;border:1px solid var(--line);font-weight:400}
.grid-table thead th{font-weight:700;color:var(--ink2);background:var(--bg)}
.panel .grid-table thead th,.panel .grid-table tbody th{background:var(--panel)}
.grid-table tbody th{text-align:left;font-weight:700;white-space:nowrap;background:var(--bg);position:sticky;left:0;z-index:1}
.grid-table .corner{text-align:left;font-size:.74rem;line-height:1.3;white-space:normal;min-width:7.5em;position:sticky;left:0;z-index:2}
.grid-table-emc{min-width:760px}
.h0{background:var(--heat0)}.h1{background:var(--heat1)}.h2{background:var(--heat2)}.h3{background:var(--heat3);color:var(--heat3-ink)}
.est{font-size:1rem}
.est th,.est td{padding:14px 14px 14px 0;text-align:left;border-bottom:1px solid var(--line);font-weight:400}
.est thead th{font-size:.78rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--ink);font-weight:700}
.est tbody th{font-weight:700}
.est td{font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
@media (max-width:640px){
  .est thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .est,.est tbody,.est tr,.est th,.est td{display:block;width:100%}
  .est tr{padding:12px 0;border-bottom:1px solid var(--line)}
  .est th,.est td{border:0;padding:2px 0}
  .est tbody th{font-size:1rem;margin-bottom:6px}
  .est td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:1.1rem;padding:3px 0}
  .est td::before{content:attr(data-label);font-size:.82rem;font-weight:400;letter-spacing:0;color:var(--ink2)}
}
.srcs{list-style:none;margin:0;padding:0}
.src{display:grid;grid-template-columns:2.6em 1fr;gap:6px;padding:14px 0;border-top:1px solid var(--line);scroll-margin-top:72px}
.src:target{background:var(--panel);outline:2px solid var(--amber)}
.src-n{font-weight:700;color:var(--amber-ink);font-size:1.05rem}
.src-t{margin:0 0 4px;font-weight:500;overflow-wrap:anywhere}
.src-m{margin:0;font-size:.88rem;color:var(--ink2)}
.nf{padding-block:clamp(24px,4vw,48px) clamp(32px,5vw,56px)}
.nf-dial{position:relative;width:min(48vw,170px);aspect-ratio:1;margin:0 auto 14px}
.nf-dial .hero-ring{position:absolute;inset:0}
.nf-n{position:absolute;inset:0;margin:0;display:grid;place-items:center;font-size:clamp(3rem,14vw,4.6rem);font-weight:700;letter-spacing:-.06em}
.nf .lede{margin-block:12px 18px}

/* ---------- footer ---------- */
.foot{background:var(--night);color:var(--night-ink);padding:clamp(36px,5vw,60px) 0 28px;--ink:var(--night-ink)}
.foot a{color:var(--night-ink)}
.foot-grid{display:grid;gap:28px 48px;grid-template-columns:1fr}
@media (min-width:760px){.foot-grid{grid-template-columns:1fr auto;align-items:start}}
.foot-logo{display:inline-block;line-height:0;margin-bottom:16px}
.foot-logo img{display:block;height:34px;width:auto}
.foot-line{margin:0 0 .5em;max-width:52ch;font-size:.98rem}
.foot-nav ul{list-style:none;margin:0;padding:0;display:grid;gap:0}
.foot-nav a{display:inline-flex;align-items:center;min-height:36px;font-size:.98rem}
.foot-small{margin:32px 0 0;font-size:.8rem;line-height:1.5;color:var(--night-ink2);border-top:1px solid var(--night-line);padding-top:18px;max-width:none}
.foot-small a{color:var(--night-ink2)}


/* ---------- additions ---------- */
.st-aside{display:block;margin-top:.5em;font-size:.86em;color:var(--ink2);line-height:1.4}
.story-caveat{max-width:62ch;font-size:.95rem;color:var(--ink2);margin:0 0 8px}
.meter-sub{display:block;font-size:.76rem;font-weight:500;color:var(--ink2);letter-spacing:0}
.c-end{font-size:calc(var(--u,1)*13px);font-weight:700;fill:var(--ink)}
.alt{font-weight:400;color:var(--ink2)}
.grid-table .alt{font-size:.9em}
@media (max-width:900px){.scroll-hint{display:block}}
@media print{
  .print-only{display:block!important}
  .sacks{width:28%;margin-inline:auto}
  :root{--bg:#fff;--panel:#fff;--ink:#000;--ink2:#333;--line:#bbb;--amber-ink:#333}
  html{font-size:11.5pt}
  body{background:#fff;color:#000}
  .masthead,.skip,.theme-btn,.calc-form,.calc-bar,.controls,.actions,.seg,.seg-wrap,.rules-bar .seg,.hero-phone,.reveal-wrap,#reveal,.scroll-hint,.noscript{display:none!important}
  .sec,.hero,.phero{padding-block:14pt;break-inside:auto}
  .night,.foot{background:#fff!important;color:#000!important;--ink:#000;--ink2:#333;--night-ink:#000;--night-ink2:#333}
  .foot a,.foot-small a{color:#000}
  .js .track,.track{height:auto!important}
  .js .stage,.stage{position:static!important;height:auto!important;overflow:visible!important;padding-block:8pt!important}
  .stage-in{display:block;height:auto}
  #thread{height:auto!important;overflow:visible!important}
  .sms-tools{display:none!important}
  .sacks .when-on{display:inline!important}.sacks .when-off{display:none!important}
  .table-wrap{overflow:visible;break-inside:auto}
  tr,.msg,.src,figure,.rule,.who>div{break-inside:avoid}
  h2,h3{break-after:avoid}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:8pt;overflow-wrap:anywhere}
  .ref::after{content:"]"}
  .ref[href]::after{content:"]"}
  .refs a::after{content:"]"!important}
  .tag{border:1px solid #000!important;background:#fff!important;color:#000!important}
  .pill{border:1px solid #000;background:#fff!important;color:#000!important}
  .mark-dial,.dial{max-width:60pt}
  .hero-stage{--d:200px}
  .hero-ring,.hero-stage .dial{max-width:none!important}
  .js .hero-ring .t.on,.js .hero-ring .hand,.hero-ring .t,.hero-ring .hand{animation:none!important;opacity:1!important}
  .masthead{position:static!important}
}

/* ---------- story on small screens: make room for the messages ---------- */
@media (max-width:560px){
  .st-aside{display:none}
  .stage .chart.wx{display:none}
}
@media (max-height:900px){.stage .chart.wx,.chart-note{display:none}}
@media (min-width:700px){.foot-nav ul{display:flex;flex-wrap:wrap;gap:6px 24px}.foot-grid{align-items:end}}
.nf h1{font-size:clamp(2rem,1.2rem + 3vw,3.6rem)}
.nf{padding-block:12px 20px}.nf-dial{width:min(40vw,128px);margin-bottom:8px}.nf .lede{margin-block:8px 14px}

.ext{margin-left:.45em;flex:none}
.form-note{margin:14px auto 0;max-width:46ch;font-size:.92rem;color:var(--ink2);text-align:center}
.foot-form{min-height:24px}

/* No JavaScript: hide the interactive shells that would render dead (story stage, calculator form and result, language toggles, reveal button).
   The sacks show their numbers, and each hidden shell has a noscript note. */
html:not(.js) .track,html:not(.js) .calc-grid,html:not(.js) .seg-wrap,html:not(.js) .reveal-wrap{display:none}
html:not(.js) .sacks .when-on{display:inline}
html:not(.js) .sacks .when-off{display:none}
.nojs-note{display:none}
html:not(.js) .nojs-note{display:block}
/* the 'air settles at' label on the calculator chart sits on lines: knock out a halo behind it */
.c-halo{paint-order:stroke;stroke:var(--bg);stroke-width:5px;stroke-linejoin:round}
.panel .c-halo{stroke:var(--panel)}
/* Short pages (404, thanks, privacy on a tall screen): the footer sits at the bottom, no paper strip below it. */
@media screen{body{min-height:100vh;min-height:100svh;display:flex;flex-direction:column}main{flex:1 0 auto}}
/* the 404 numeral sits inside the ring, not over its ticks */
.nf-n{font-size:clamp(2rem,9vw,3rem)}

/* four or more characters (365+, 3,650+) are set smaller so they stay inside the ring, clear of the ticks */
.dial-read b.long{font-size:clamp(1.35rem,.9rem + 1.5vw,2.2rem)}
.out-dial .dial-read b.long{font-size:clamp(1.6rem,1rem + 1.8vw,2.5rem)}
@media (max-width:979px){.dial-read b.long{font-size:1.2rem}}

/* hero phone: static final state without JavaScript or under reduced motion; hero.js plays the conversation */
.hero-phone .msg.pre{display:none}
.hero-phone.playing .msg.pre{display:flex}
.hero-phone .thread{scrollbar-width:none}
.hero-phone .thread::-webkit-scrollbar{display:none}
.hero-ctl{display:none;font:inherit;font-size:.86rem;font-weight:500;color:var(--ink2);background:transparent;border:1.5px solid var(--ink2);border-radius:999px;min-height:30px;padding:2px 16px;cursor:pointer}
.hero-ctl:hover{color:var(--ink);border-color:var(--ink)}
.js .hero-phone.playing .hero-ctl,.js .hero-phone.can-play .hero-ctl{display:inline-block}
.rule-ex{display:flex;flex-direction:column;align-items:center;gap:20px}
.rule-ex .tape-wrap{align-self:stretch}
.rule-ex .phone{--pw:min(calc(100vw - 48px),320px)}

/* story: the phone beside the gauges on wide screens, the open-bottomed phone under them on small ones */
.sms-wrap{display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0;min-width:0}
.sms-tools{align-self:stretch;display:flex;justify-content:center}
.sms-tools .seg-wrap{justify-content:center}
.sms-tools .seg-note{display:none;font-weight:400;margin:0}
html[data-sms=sw] .sms-tools .seg-note{display:block;flex-basis:100%;max-width:none;font-size:.74rem;text-align:center}
.st-main{display:grid;gap:clamp(8px,1.6vh,16px);min-width:0;align-content:center}
#thread{overflow-y:auto;overflow-x:hidden;scrollbar-width:thin;overscroll-behavior:contain}
.phone #thread>:first-child{margin-top:0}
#thread>li.early{display:none}
.sms-wrap .phone{--pw:min(calc(100vw - 48px),264px)}
@media (min-width:980px){
  .st-right{grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:clamp(20px,2.6vw,40px)}
  .sms-wrap .phone{--pw:clamp(200px,calc((100svh - 190px)/2.16),280px)}
}
@media (max-width:979px){
  /* the top of the same phone, open at the bottom: same width, same type, never squat */
  .sms-wrap{overflow:hidden}
  .sms-wrap .phone{flex:none;height:auto;border-radius:calc(var(--pw)*.12) calc(var(--pw)*.12) 0 0;padding-bottom:0;box-shadow:0 0 0 1px rgba(255,255,255,.16)}
  .sms-wrap .phone::before,.sms-wrap .phone::after,.sms-wrap .ph-compose,.sms-wrap .ph-nav{display:none}
  .sms-wrap .phone-screen{border-radius:calc(var(--pw)*.095) calc(var(--pw)*.095) 0 0}
}
.hero-phone .msg[hidden]{display:none}

/* collapsed detail: the one pattern used wherever a page keeps necessary detail out of the way */
details.more{margin:16px 0 0;max-width:68ch}
details.more>summary{display:flex;align-items:center;gap:10px;min-height:36px;cursor:pointer;font-weight:700;list-style:none;border-bottom:1.5px solid var(--amber);width:fit-content;max-width:100%}
details.more>summary::-webkit-details-marker{display:none}
details.more>summary::before{content:"+";display:inline-block;width:1em;text-align:center;font-weight:700;color:var(--amber-ink)}
details.more[open]>summary::before{content:"\2013"}
details.more>summary:hover{border-bottom-color:var(--ink)}
details.more>:not(summary){margin-top:12px}
details.more .table-wrap{max-width:none}
details.more[open]{max-width:none}
details.more>p,details.more>ul{max-width:68ch}
ul.plain{margin:0;padding-left:1.1em;display:grid;gap:6px}
.night details.more>summary::before{color:var(--amber)}
.rule-ex .phone.ph-sm{--pw:min(calc(100vw - 48px),270px)}
@media (max-width:979px) and (max-height:780px){.sms-wrap .ph-status{display:none}.sms-wrap .phone{padding-top:calc(var(--pw)*.05)}.sms-wrap .phone-screen{border-radius:calc(var(--pw)*.07) calc(var(--pw)*.07) 0 0}}
@media (max-width:979px){.sms-wrap .thread{padding-bottom:calc(var(--pw)*.02)}}

/* S7-01: small phones (short screens). The newest message must fit whole in the story phone, so the pinned stage spends less
   height on everything above it: one-line day heading, tighter caption and controls, smaller gauges, no phone name bar. */
@media (max-width:979px) and (max-height:760px){
  .stage{padding-block:8px 6px}
  .stage-in,.st-right,.st-main{gap:4px}
  .st-day{font-size:1.7rem;line-height:1.1}
  .st-date{font-size:.8rem}
  .st-cap{font-size:.84rem;line-height:1.28;margin:2px 0}
  .ctl{width:34px;height:34px}.scrub input{height:34px}
  .gauge-dial{width:84px}
  .dial-read b{font-size:1.1rem}.dial-read span{font-size:.7rem}
  .meters{gap:2px}.meters>div{grid-template-columns:7em 1fr}.meters dt,.meters dd{font-size:.8rem}
  .sms-tools{gap:4px;margin:0}
  .sms-tools .seg-note{font-size:.7rem;line-height:1.2;margin:0}
  .sms-wrap .phone-head{display:none}
  .sms-wrap .phone{padding-top:calc(var(--pw)*.03)}
  .phone .thread{padding-top:6px}
}
@media (max-width:979px) and (max-height:680px){
  .st-cap{font-size:.8rem;line-height:1.22}
  .gauge-dial{width:76px}
  .st-day{font-size:1.5rem}
}