/* Tipolu guides: dark clay ground for the hero, the test preview and the final call to action; the article itself
   reads on one cream surface with a sticky table of contents. Same tokens as the landing page. */
:root{
  color-scheme:dark;
  --bg:#2A1D15; --bg2:#38281D; --bg3:#45322A;
  --sheet:#F6EBDD; --card:#FFF8EF; --ink:#2B2019; --muted:#6E5A4B; --line:#E6D4C0; --glow:#F2C46D;
  --light:#F6EBDD; --light-muted:#C9B39A;
  --peak:#D2553F; --horizon:#6F74C9; --fire:#E0A13A; --river:#2E9C98; --root:#7FA565;
  /* type colours dark enough for text on cream (all at least 4.5:1 on --sheet and --card) */
  --peak-ink:#A63B28; --horizon-ink:#4F54A8; --fire-ink:#85570F; --river-ink:#1A6764; --root-ink:#4A6B36;
  --display:"Fredoka","Figtree",system-ui,sans-serif; --body:"Figtree",system-ui,sans-serif;
  --r:22px; --r-sm:14px;
  --sh:0 18px 40px -18px rgba(0,0,0,.55);
  --ease:cubic-bezier(.2,.8,.2,1); --bounce:cubic-bezier(.34,1.56,.64,1);
  --read:68ch; --wide:1080px; --gut:max(16px,env(safe-area-inset-left,0px));
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
/* Without JavaScript every tab panel and crossroads stays visible; with it, only the active one shows. */
.js [data-off]{display:none !important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--light);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;
  padding-left:var(--gut);padding-right:max(16px,env(safe-area-inset-right,0px));overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
h1,h2,h3,h4{font-family:var(--display);font-weight:600;margin:0;letter-spacing:-.01em;text-wrap:balance}
p{margin:0}
figure{margin:0}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:3px solid var(--glow);outline-offset:3px;border-radius:8px}
.paper :focus-visible{outline-color:var(--ink)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.muted{color:var(--muted)}
.small{font-size:14px}
.stack{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.preview{max-width:var(--wide);margin:12px auto 0;padding:10px 16px;border:1px dashed var(--glow);border-radius:999px;color:var(--glow);font-size:14px;text-align:center}

/* reading progress */
.progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:50;pointer-events:none}
.progress span{display:block;height:100%;width:100%;background:var(--glow);transform-origin:0 50%;transform:scaleX(var(--p,0))}

/* header + footer */
.top{max-width:var(--wide);margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:18px}
.top .brand img{height:32px;width:auto}
.top nav{display:flex;align-items:center;gap:18px;font-size:15px}
.top nav a.txt{text-decoration:none;color:var(--light-muted)}
.top nav a.txt:hover{color:var(--light)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--glow);color:var(--ink);font-weight:700;text-decoration:none;padding:11px 18px;border-radius:999px;box-shadow:0 3px 0 #b88a3a;transition:transform .15s var(--ease),box-shadow .15s;text-align:center}
.pill:hover{transform:translateY(-1px)}
.pill:active{transform:translateY(2px);box-shadow:0 1px 0 #b88a3a}
.pill.ghost{background:var(--card);box-shadow:0 3px 0 var(--line);border:1px solid var(--line)}
.top .pill{padding:8px 14px;font-size:14px}
.pill.big{font-size:18px;padding:15px 26px}
.foot{max-width:var(--wide);margin:56px auto 0;padding-block:24px 96px;border-top:1px solid var(--bg3);display:grid;gap:8px;font-size:14px;color:var(--light-muted)}
.foot a{text-decoration:none}
.foot a:hover{color:var(--light)}

/* hero */
.hero{max-width:var(--wide);margin:8px auto 0;display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.crumbs{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px;font-size:14px;color:var(--light-muted)}
.crumbs li+li::before{content:"›";margin-right:6px}
.crumbs a{text-decoration:none}
.crumbs a:hover{color:var(--light);text-decoration:underline}
.hero h1{font-size:clamp(34px,6vw,64px);line-height:1.04;max-width:18ch}
.lede{font-size:clamp(19px,2.2vw,22px);line-height:1.5;max-width:var(--read)}
.lede strong{color:var(--glow);font-weight:600}
.meta{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:14px;color:var(--light-muted)}
.hero-art{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh);background:var(--bg2)}
.hero-art img{width:100%;aspect-ratio:16/9;object-fit:cover;max-height:min(560px,70vh)}
.hero-art figcaption{position:absolute;left:16px;bottom:16px;right:16px;max-width:430px;background:rgba(42,29,21,.86);color:var(--light);padding:12px 16px;border-radius:var(--r-sm);font-size:14px;line-height:1.45}
@media (max-width:640px){
  .hero-art img{aspect-ratio:auto;height:45vh;max-height:45vh;object-position:62% 50%}
  .hero-art figcaption{position:static;max-width:none;border-radius:0;font-size:13px;padding:10px 14px}
}
.hub h1{max-width:20ch}

/* the cream reading surface */
.paper{background:var(--sheet);color:var(--ink);margin:32px calc(-1 * var(--gut)) 0;padding:28px var(--gut) 56px}
@media (min-width:1000px){.paper{max-width:1180px;margin:40px auto 0;border-radius:var(--r);padding:56px 48px 72px}}
.layout{display:grid;grid-template-columns:minmax(0,1fr)}
@media (min-width:1000px){.layout{grid-template-columns:220px minmax(0,var(--read));gap:56px;justify-content:center}.layout.solo{grid-template-columns:minmax(0,var(--read))}}
.body{display:grid;grid-template-columns:minmax(0,1fr);gap:0;min-width:0}
.body > section{display:grid;gap:18px;grid-template-columns:minmax(0,1fr)}
.body > section + section{margin-top:36px}
.body > section:empty{display:none}
.paper h2{font-size:clamp(27px,3.4vw,36px);line-height:1.12;margin-top:12px;scroll-margin-top:72px}
.paper h3{font-size:21px;line-height:1.25;scroll-margin-top:72px}
.paper .sub{color:var(--muted)}
.paper a{color:var(--ink);text-decoration-color:var(--glow);text-decoration-thickness:2px;text-underline-offset:3px}
.paper a:hover{text-decoration-color:var(--ink)}
.paper a.pending{text-decoration-style:dashed;text-decoration-color:var(--peak)}
.paper a.pill{text-decoration:none}

/* table of contents: sticky column on desktop, a collapsible bar on phones */
.toc{position:sticky;top:0;z-index:20;margin:-28px calc(-1 * var(--gut)) 20px;background:var(--sheet);border-bottom:1px solid var(--line)}
.toc summary{list-style:none;cursor:pointer;display:flex;gap:10px;align-items:center;padding:12px var(--gut);font:700 13px/1.2 var(--body);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";margin-left:auto;width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .2s}
.toc details[open] summary::after{transform:rotate(-135deg)}
.toc-now{font:600 15px/1.2 var(--display);letter-spacing:0;text-transform:none;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.toc ol{list-style:none;margin:0;padding:0 var(--gut) 12px;display:grid;gap:2px;max-height:60vh;overflow:auto}
.toc a{display:block;padding:7px 10px;border-radius:10px;text-decoration:none;font-size:15px;line-height:1.35;color:var(--muted);border-left:3px solid transparent}
.toc a:hover{color:var(--ink);background:var(--card)}
.toc a[aria-current="true"]{color:var(--ink);border-left-color:var(--glow);background:var(--card);font-weight:600}
@media (min-width:1000px){
  .toc{margin:0;background:none;border:0;align-self:start;top:24px}
  .toc summary{padding:0 0 10px;pointer-events:none}
  .toc summary::after,.toc-now{display:none}
  .toc ol{padding:0;max-height:calc(100vh - 80px)}
}

/* plain prose */
.prose{display:grid;gap:16px}
.prose ul,.prose ol{margin:0;padding-left:22px;display:grid;gap:8px}
.prose table{border-collapse:collapse;width:100%;font-size:15px;line-height:1.45}
.prose .tbl{overflow-x:auto}
.prose th,.prose td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--line);vertical-align:top}
.prose th{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.prose tbody tr:hover{background:var(--card)}
.prose blockquote{margin:0;padding:12px 16px;border-left:3px solid var(--glow);background:var(--card);border-radius:0 12px 12px 0}
@media (max-width:600px){
  .prose table,.prose tbody,.prose tr,.prose td{display:block;width:100%}
  .prose thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .prose tr{border-bottom:1px solid var(--line);padding:10px 0}
  .prose td{border:0;padding:4px 0}
  .prose td::before{content:attr(data-label);display:block;font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
  .prose td:first-child{font-weight:700;display:block}
  .prose td:first-child::before{display:none}
  .prose td:empty{display:none}
}
.story{font-size:19px;line-height:1.65;display:grid;gap:14px}

/* cards: only stats, the type grid, crossroads, the calculator and callouts */
.card,.callout,.keypoints{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);padding:20px 22px;display:grid;gap:12px}
.callout h3{font-size:19px}
.callout ul,.callout ol{margin:0;padding-left:20px;display:grid;gap:6px}
.callout.warn{border-left:4px solid var(--peak)}
.keypoints{border-left:4px solid var(--glow)}
.keypoints h2{font-size:22px;margin:0}
.keypoints ul{margin:0;padding-left:20px;display:grid;gap:10px}

/* facts */
.facts{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.facts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.fact{background:var(--card);border-radius:var(--r-sm);padding:20px;display:grid;gap:8px;align-content:start;border:1px solid var(--line)}
.fact b{font:600 clamp(36px,4vw,46px)/1 var(--display)}
.fact.phrase b{font-size:22px;line-height:1.2}
.fact p{font-size:15px;line-height:1.5}
.fact cite{font-style:normal;font-size:13px;color:var(--muted)}
.fact cite a{color:var(--muted)}

/* tabs (every panel is in the HTML; only one shows) */
.tab-row{display:flex;flex-wrap:wrap;gap:8px}
.tab-row button{font:600 18px/1 var(--display);padding:12px 18px;border-radius:999px;background:var(--card);border:2px solid var(--line);color:var(--ink);transition:background .2s var(--ease),color .2s;font-variant-numeric:tabular-nums;min-width:56px}
.tab-row button[aria-selected="true"]{background:var(--ink);color:var(--sheet);border-color:var(--ink)}
.tab-panel{margin-top:14px;display:grid;gap:12px}
.tab-panel .cols{display:grid;grid-template-columns:1fr 1fr;gap:0}
.tab-panel .cols > div{padding:4px 18px 4px 0;display:grid;gap:4px;align-content:start}
.tab-panel .cols > div + div{padding:4px 0 4px 18px;border-left:1px solid var(--line)}
.tab-panel h4{font:700 12px/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.tab-panel .more{font-size:15px}
@media (max-width:560px){.tab-panel .cols{grid-template-columns:1fr;gap:12px}.tab-panel .cols > div + div{padding:12px 0 0;border-left:0;border-top:1px solid var(--line)}}

/* steps */
.trail{list-style:none;margin:0;padding:0;display:grid}
.trail li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;padding-bottom:24px;position:relative}
.trail li::before{content:"";position:absolute;left:21px;top:46px;bottom:0;border-left:3px dotted #CDB79E}
.trail li:last-child::before{display:none}
.trail .n{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font:600 20px/1 var(--display);background:var(--card);border:2px solid var(--line)}
.trail li:last-child .n{background:var(--ink);color:var(--glow);border-color:var(--ink)}
.trail h3{margin-top:8px}
.trail p{margin-top:6px}
.trail .ex{margin-top:10px;border-left:3px solid var(--fire);padding:2px 0 2px 12px;font-size:15px;line-height:1.5;color:var(--ink)}
.art img{border-radius:var(--r-sm);width:100%}
.art figcaption{font-size:14px;color:var(--muted);margin-top:8px}

/* types: one column on phones, 3 + 2 on desktop */
.types{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.type{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--c);border-radius:var(--r-sm);padding:14px 16px;display:grid;grid-template-columns:72px minmax(0,1fr);gap:14px;align-items:start;transition:box-shadow .2s,transform .25s var(--bounce)}
.type img{width:72px;height:auto;max-height:88px;object-fit:contain;margin:0 auto}
.type h3{font-size:22px;color:var(--ci)}
.type .trait{font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.type p{font-size:15px;line-height:1.5;margin-top:4px}
.type .tip b{color:var(--ci)}
.type.you{box-shadow:0 0 0 3px var(--c);transform:translateY(-2px)}
.type.you .tip{background:color-mix(in srgb,var(--c) 14%,transparent);border-radius:8px;padding:6px 8px}
.you-tag{font-size:13px;font-weight:700;color:var(--ci)}
@media (min-width:760px){
  .types{grid-template-columns:repeat(6,minmax(0,1fr))}
  .type{grid-column:span 2;grid-template-columns:minmax(0,1fr);text-align:left}
  .type:nth-child(n+4){grid-column:span 3}
  .type img{height:96px;width:auto;margin:0}
}
.typelines{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.typelines li{display:grid;grid-template-columns:12px minmax(0,1fr);gap:12px;align-items:baseline;padding:8px 10px;border-radius:10px;transition:background .2s}
.typelines b{color:var(--ci)}
.typelines li.you{background:var(--card);box-shadow:inset 3px 0 0 var(--c)}
.dot{width:12px;height:12px;border-radius:50%;background:var(--c);display:inline-block}

/* traits (example result) */
.result{grid-template-columns:minmax(0,1fr);gap:20px}
@media (min-width:640px){.result{grid-template-columns:180px minmax(0,1fr);align-items:center}}
.result .who{display:grid;gap:8px;justify-items:center;text-align:center}
.result .who img{height:130px;width:auto}
.badge{display:inline-flex;gap:6px;align-items:center;font:600 18px/1 var(--display);padding:8px 14px;border-radius:999px;background:var(--sheet);border:1px solid var(--line)}
.bars{display:grid;gap:12px}
.bar{display:grid;grid-template-columns:110px minmax(0,1fr) 34px;gap:12px;align-items:center;font-size:15px}
.bar .track{display:block;height:14px;border-radius:999px;background:var(--line);overflow:hidden}
.bar .fill{display:block;height:100%;width:calc(var(--v) * 1%);background:var(--c);border-radius:999px}
.bar .v{font-variant-numeric:tabular-nums;text-align:right;font-weight:700}

/* Lu */
.lu{grid-template-columns:80px minmax(0,1fr);align-items:center}
.lu img{width:80px;height:auto}
.lu b{font-family:var(--display);font-weight:600}

/* stories */
.cases{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.cases{grid-template-columns:repeat(2,minmax(0,1fr))}}
.case{border-left:3px solid var(--river);padding:4px 0 4px 16px;display:grid;gap:8px}
.case.miss{border-left-color:var(--peak)}
.case.todo{border:2px dashed var(--peak);border-radius:var(--r-sm);padding:14px}
.case h3{font-size:19px}
.case .tag{font:700 12px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--peak-ink);margin-left:6px}
.todo-tag{font:700 12px/1.2 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--peak-ink)}
.case dl{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px 14px;font-size:14px}
.case dt{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.case dd{margin:0}

/* worksheet */
.worksheet ol{margin:0;padding-left:22px;display:grid;gap:14px}
.worksheet label{display:grid;gap:2px;margin-bottom:6px}
.worksheet label span{font-size:14px;color:var(--muted)}
.worksheet textarea,.money input,.money select{width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;border:1.5px solid var(--line);border-radius:10px;padding:10px 12px}
.worksheet textarea{resize:vertical;min-height:52px}
.worksheet textarea:focus,.money input:focus,.money select:focus{outline:3px solid var(--glow);outline-offset:1px;border-color:var(--ink)}
.ws-actions{display:flex;flex-wrap:wrap;gap:12px 18px;align-items:center}

/* money number */
.money-in{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
@media (min-width:560px){.money-in{grid-template-columns:repeat(2,minmax(0,1fr))}}
.money label{display:grid;gap:4px;font-size:14px;color:var(--muted);font-weight:600}
.money .cur{position:relative;display:block}
.money .cur i{position:absolute;left:12px;top:50%;transform:translateY(-50%);font-style:normal;color:var(--muted)}
.money .cur input{padding-left:38px}
.money-out{display:grid;gap:4px;background:var(--sheet);border-radius:12px;padding:14px 16px}
.money-out .runway{font:600 34px/1.1 var(--display)}
.money-out .verdict{font-size:16px}
.linkbtn{font-size:14px;color:var(--muted);text-decoration:underline;justify-self:start}

/* faq: in the HTML when closed */
.faq{display:grid;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:16px 0;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.faq summary h3{font-size:19px;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 26px/1 var(--body);color:var(--muted);transition:transform .2s;flex:none}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq .ans{padding:0 0 16px;display:grid;gap:10px}

/* sources */
.sources{font-size:14px;color:var(--muted);display:grid;gap:10px;border-top:1px solid var(--line);padding-top:24px}
.sources h2{font-size:20px;color:var(--ink);margin:0}
.sources ol,.sources ul{margin:0;padding-left:20px;display:grid;gap:6px}
.sources a{color:var(--muted)}

/* dark band: test preview + final CTA */
.band{max-width:var(--wide);margin:56px auto 0;display:grid;gap:56px;grid-template-columns:minmax(0,1fr)}
.band > section{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
.band h2{font-size:clamp(27px,3.4vw,38px);line-height:1.12;scroll-margin-top:24px}
.band .sub{color:var(--light-muted);max-width:60ch}

/* demo clip */
.demo{display:grid;gap:24px;align-items:center;grid-template-columns:minmax(0,1fr)}
@media (min-width:760px){.demo{grid-template-columns:minmax(0,1fr) 240px}}
.demo ul{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.demo li{display:grid;grid-template-columns:34px minmax(0,1fr);gap:12px;align-items:start}
.demo li span{width:34px;height:34px;border-radius:50%;background:var(--bg2);display:grid;place-items:center;font:600 16px/1 var(--display);color:var(--glow)}
.demo li p{color:var(--light-muted)}
.demo li b{color:var(--light);display:block}
.clip{display:grid;gap:10px;justify-items:center}
.phone{position:relative;width:min(220px,62vw);aspect-ratio:9/19.5;border-radius:32px;background:#120c08;padding:8px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7),0 0 0 2px #4a3628}
.phone video{width:100%;height:100%;object-fit:cover;border-radius:25px;background:var(--bg2)}
.vid-btn{position:absolute;right:16px;bottom:16px;width:44px;height:44px;border-radius:50%;background:rgba(42,29,21,.85);display:grid;place-items:center;box-shadow:0 0 0 2px rgba(246,235,221,.5)}
.vid-btn svg{width:20px;height:20px;fill:var(--light)}
.vid-btn .i-play,.vid-btn.paused .i-pause{display:none}
.vid-btn.paused .i-play{display:inline}
.clip figcaption{font-size:14px;color:var(--light-muted);text-align:center;max-width:260px}

/* crossroads: on phones the image, prompt and both options fit on one screen */
.walk{display:grid;gap:16px;grid-template-columns:minmax(0,1fr)}
.scene{display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.stage{position:relative;border-radius:var(--r);overflow:hidden;height:min(44vh,360px);background:var(--bg2) center/cover no-repeat;box-shadow:var(--sh);display:flex;align-items:flex-end}
.stage::after{content:"";position:absolute;inset:40% 0 0;background:linear-gradient(transparent,rgba(26,17,11,.92));pointer-events:none}
.stage .q{position:relative;z-index:2;padding:16px 18px;font:600 clamp(18px,2.4vw,23px)/1.3 var(--display);color:var(--light);text-shadow:0 1px 2px rgba(0,0,0,.4)}
.stage .pop{position:absolute;right:6%;bottom:22%;height:46%;width:auto;z-index:1;transform:translateY(30px) scale(.6);opacity:0;transition:transform .45s var(--bounce),opacity .25s;filter:drop-shadow(0 10px 14px rgba(0,0,0,.45))}
.stage .pop.on{transform:none;opacity:1}
.stage .step{position:absolute;top:14px;left:14px;z-index:2;background:rgba(42,29,21,.85);color:var(--light);font:700 12px/1 var(--body);letter-spacing:.12em;text-transform:uppercase;padding:8px 12px;border-radius:999px}
.opts{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.opt{text-align:left;background:var(--sheet);border:2px solid transparent;border-radius:16px;padding:12px 14px;display:grid;gap:4px;align-content:start;color:var(--ink);box-shadow:0 3px 0 #b9a48c;transition:transform .12s var(--ease),box-shadow .12s,border-color .2s}
.opt b{font:600 18px/1.15 var(--display)}
.opt span{font-size:14px;line-height:1.4;color:var(--muted)}
.opt:hover{border-color:var(--glow)}
.opt:focus-visible{outline:3px solid var(--glow);outline-offset:3px}
.opt:active{transform:translateY(3px);box-shadow:0 0 0 #b9a48c}
.opt[aria-pressed="true"]{border-color:var(--c);background:#fff}
.opt:disabled{cursor:default}
@media (max-width:420px){.opt span{display:none}.stage{height:min(38vh,300px)}}
@media (min-width:860px){.scene{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:stretch}.stage{height:auto;min-height:380px}.opts{grid-template-columns:1fr;align-content:center}}
.walk-out{background:var(--sheet);color:var(--ink);border-radius:var(--r);padding:22px;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.walk-out .big{font:600 24px/1.25 var(--display)}
.walk-out .out-line{font-size:18px}
.walk-out .pill{justify-self:start}
.mix{display:flex;gap:4px;height:12px}
.mix i{flex:1;border-radius:999px;background:var(--c)}
.mix-names{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px;font-size:14px;color:var(--muted)}
.mix-names li{display:flex;gap:6px;align-items:center}

/* final CTA */
.cta{background:var(--bg2);border-radius:var(--r);padding:clamp(28px,5vw,56px);display:grid;gap:18px;justify-items:center;text-align:center;overflow:hidden}
.cta .cast{display:flex;align-items:flex-end;justify-content:center;gap:clamp(2px,1.2vw,14px);margin-bottom:6px}
.cta .cast img{height:clamp(54px,9vw,100px);width:auto;animation:hop 2.4s var(--ease) infinite}
.cta .cast img:nth-child(2){animation-delay:.2s}.cta .cast img:nth-child(3){animation-delay:.4s}.cta .cast img:nth-child(4){animation-delay:.6s}.cta .cast img:nth-child(5){animation-delay:.8s}
@keyframes hop{0%,70%,100%{transform:translateY(0)}80%{transform:translateY(-12px)}}
.cta h2{font-size:clamp(28px,4vw,44px);max-width:22ch}
.cta p{color:var(--light-muted);max-width:52ch}
.cta small{color:var(--light-muted);font-size:14px}

/* sticky call to action on phones, after 40% of the page */
.sticky-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(16px,env(safe-area-inset-right,0px)) calc(10px + env(safe-area-inset-bottom,0px)) var(--gut);background:rgba(42,29,21,.96);border-top:1px solid var(--bg3);transform:translateY(110%);transition:transform .3s var(--ease);font-size:14px;color:var(--light-muted)}
.sticky-cta.on{transform:none}
.sticky-cta .pill{padding:10px 16px;font-size:15px;white-space:nowrap}
@media (min-width:1000px){.sticky-cta{display:none}}

/* hub */
.cards{display:grid;gap:14px;grid-template-columns:minmax(0,1fr)}
@media (min-width:720px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.card-link,.cards .card{background:var(--sheet);color:var(--ink);border-radius:var(--r);padding:22px;display:grid;gap:10px;text-decoration:none;transition:transform .2s var(--ease)}
.cards .card:hover{transform:translateY(-3px)}
.cards .card h3{font-size:22px;line-height:1.2}
.cards .card span{font-size:13px;color:var(--muted)}

@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none !important;transition:none !important}}

/* print: the whole guide on white, or only the worksheet */
#ws-print{display:none}
@media print{
  html.print-ws #ws-print{display:block}
  :root{color-scheme:light}
  body{background:#fff;color:#000;padding:0}
  .top nav,.progress,.sticky-cta,.toc,.band,.foot,.hero-art,.ws-actions,.money{display:none !important}
  .paper{background:#fff;margin:0;padding:0}
  .hero{color:#000}
  html.print-ws body > *:not(#ws-print){display:none !important}
  #ws-print .worksheet{border:0;padding:0;background:#fff;gap:10px}
  #ws-print h3{font-size:22pt}
  #ws-print ol{gap:6mm}
  #ws-print .ws-line{border:1px solid #999;border-radius:6px;min-height:24mm;padding:6px 8px;white-space:pre-wrap}
  #ws-print .ws-brand{margin-top:8mm;font-size:9pt;color:#555}
}
.paper .body > section > h3:first-child{font-size:23px;margin-top:4px}
.toc summary > span:first-child{white-space:nowrap;flex:none}