/* Ahead — site styles, v2.

   Design notes
   - Black and sun amber come from the Ahead mark. Amber is used as a highlighter:
     it marks the one figure in a block that matters, the primary action and
     keyboard focus. Links, icons and data stay in ink.
   - Money is shown as an itemised slip (label, dotted leader, amount, small print),
     never as a banner number.
   - Two voices: Funnel (sans) is Ahead speaking; Source Serif is Bybit quoted word
     for word, set small, with its source.
   - Funnel's figures are tabular at every weight, so columns of fees line up
     without a monospace face. */

@font-face{font-family:"Funnel Display";src:url("/assets/fonts/funnel-display-latin-wght.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Funnel Sans";src:url("/assets/fonts/funnel-sans-latin-wght.woff2") format("woff2");font-weight:300 800;font-style:normal;font-display:swap}
@font-face{font-family:"Source Serif 4";src:url("/assets/fonts/source-serif-4-latin-400.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

:root{
  --bg:#000000; --surface:#111113; --surface-2:#1c1c20; --line:#2a2a2f; --line-2:#44444c;
  --text:#f4f2ed; --muted:#a4a4ab;
  --amber:#ffb020; --on-amber:#181000; --amber-ink:#ffb020;
  --display:"Funnel Display","Avenir Next","Segoe UI",system-ui,sans-serif;
  --body:"Funnel Sans",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --serif:"Source Serif 4",Georgia,"Noto Serif","Times New Roman",serif;
  color-scheme:dark;
}
@media (prefers-color-scheme:light){
  :root:not([data-theme="dark"]){
    --bg:#f5f5f1; --surface:#ffffff; --surface-2:#ebebe5; --line:#dcdcd4; --line-2:#b9b9af;
    --text:#131311; --muted:#5b5b55; --amber-ink:#7a4a00;
    color-scheme:light;
  }
}
:root[data-theme="light"]{
  --bg:#f5f5f1; --surface:#ffffff; --surface-2:#ebebe5; --line:#dcdcd4; --line-2:#b9b9af;
  --text:#131311; --muted:#5b5b55; --amber-ink:#7a4a00;
  color-scheme:light;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:1rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--text);font:400 1.0625rem/1.6 var(--body);overflow-wrap:break-word;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
@media (min-width:720px){body{font-size:1.125rem}}
a{color:inherit;text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:.09em;text-underline-offset:.2em}
a:hover{text-decoration-thickness:.16em}
:focus-visible{outline:3px solid var(--amber);outline-offset:3px;border-radius:4px}
img,svg{max-width:100%}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none !important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.icon{width:1.25rem;height:1.25rem;flex:none}

.wrap{max-width:42rem;margin:0 auto;padding-left:max(1.25rem,env(safe-area-inset-left,0px));padding-right:max(1.25rem,env(safe-area-inset-right,0px))}
.skip{position:absolute;left:-999px;top:0;background:var(--amber);color:var(--on-amber);padding:.6rem .9rem;font-weight:600;text-decoration:none}
.skip:focus{left:.5rem;top:.5rem;z-index:10}

/* ---------- header */
.site-head{border-bottom:1px solid var(--line)}
.site-head .wrap{display:flex;flex-wrap:wrap;align-items:center;column-gap:1.1rem;padding-top:.8rem;padding-bottom:.75rem}
.brand{display:flex;align-items:center;gap:.55rem;margin-right:auto;font:700 1.42rem/1 var(--display);letter-spacing:-.015em;text-decoration:none}
.brand svg{width:1.75rem;height:1.75rem;flex:none}
.nav{display:flex;gap:1.5rem;order:3;width:100%;padding-top:.7rem;font-size:.97rem;font-weight:500}
.nav a{text-decoration:none;padding:.2rem 0;color:var(--muted)}
.nav a:hover{color:var(--text)}
.nav a[aria-current="page"]{color:var(--text);box-shadow:0 .14em 0 var(--amber)}
@media (max-width:400px){.nav{gap:1.05rem;font-size:.93rem}}
.theme{display:grid;place-items:center;width:2.4rem;height:2.4rem;border:1px solid var(--line);border-radius:.7rem;background:none;color:var(--muted);cursor:pointer}
.theme:hover{color:var(--text);border-color:var(--line-2)}
.theme .moon{display:none}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .theme .sun{display:none}:root:not([data-theme="dark"]) .theme .moon{display:block}}
:root[data-theme="light"] .theme .sun{display:none}
:root[data-theme="light"] .theme .moon{display:block}
@media (min-width:640px){.nav{order:0;width:auto;padding-top:0}}

/* ---------- type */
h1,h2,h3{font-family:var(--display);font-weight:700;margin:0;text-wrap:balance}
h1{font-size:clamp(2.05rem,7.6vw,3.15rem);line-height:1.06;letter-spacing:-.022em;margin:2.2rem 0 .95rem}
h2{font-size:clamp(1.45rem,4.9vw,1.8rem);line-height:1.14;letter-spacing:-.014em;margin:2.8rem 0 .8rem}
h3{font-size:1.16rem;line-height:1.25;letter-spacing:-.004em;font-weight:650;margin:1.75rem 0 .4rem}
p{margin:0 0 1.05rem}
ul,ol{margin:0 0 1.1rem;padding-left:1.3rem}
li{margin:.32rem 0}
li::marker{color:var(--muted)}
strong,b{font-weight:650}
mark{background:var(--amber);color:var(--on-amber);font-weight:600;padding:.04em .3em;border-radius:.24em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.checked{font-size:.9rem;line-height:1.55;color:var(--muted);margin:0 0 1.5rem}
.checked b{color:var(--text);font-weight:600}
.fine{font-size:.84rem;line-height:1.55;color:var(--muted)}

/* ---------- reading pages */
.doc{max-width:42rem;position:relative}
.answer{margin:0 0 1.3rem;padding:1.15rem 1.2rem 1.25rem;background:var(--surface);border:1px solid var(--line);border-radius:1rem}
.answer h2{font:650 .92rem/1.2 var(--body);letter-spacing:0;margin:0 0 .55rem;color:var(--muted)}
.answer p{font-size:1.12em;line-height:1.5;margin:0 0 .7rem}
.answer p:last-child{margin-bottom:0}

/* on this page: folded on phones, a side rail on wide screens */
.toc{margin:0 0 .3rem;border-top:1px solid var(--line);border-bottom:1px solid var(--line);font-size:.95rem}
.toc summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:.8rem 0;font-weight:600}
.toc summary::-webkit-details-marker{display:none}
.toc summary::after{content:"";width:.5rem;height:.5rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg) translate(-.15rem,-.15rem)}
.toc[open] summary::after{transform:rotate(-135deg) translate(-.1rem,-.1rem)}
.toc ol{margin:0;padding:0 0 .9rem 1.25rem}
.toc li{margin:.28rem 0}
.toc a{text-decoration-color:transparent}
.toc a:hover{text-decoration-color:var(--amber)}

/* Bybit, word for word */
.clip{margin:1.2rem 0 1.4rem;padding:.9rem 1.05rem .8rem;background:var(--surface);border:1px solid var(--line);border-radius:.3rem}
.clip blockquote{margin:0;font:400 1rem/1.5 var(--serif)}
.clip figcaption{margin-top:.5rem;font-size:.8rem;color:var(--muted)}
.clip cite{font-style:normal}

/* numbered steps (real sequences only) */
.steps{counter-reset:s;list-style:none;padding:0;margin:1.1rem 0 1.3rem}
.steps li{counter-increment:s;position:relative;margin:0;padding:.2rem 0 1.05rem 3rem;min-height:2.3rem}
.steps li::before{content:counter(s);position:absolute;left:0;top:0;width:2.1rem;height:2.1rem;border-radius:50%;border:1.5px solid var(--line-2);font:700 1rem/1.95rem var(--display);text-align:center}

/* ---------- tables */
.table-wrap{overflow-x:auto;margin:1rem -1.25rem 1.5rem;padding:0 1.25rem}
table{border-collapse:collapse;width:100%;font-size:.94rem}
th,td{text-align:left;padding:.66rem 1rem .66rem 0;border-bottom:1px solid var(--line);vertical-align:top}
th:last-child,td:last-child{padding-right:0}
thead th{font-weight:600;color:var(--muted);font-size:.84rem;vertical-align:bottom;border-bottom-color:var(--line-2)}
tbody th{font-weight:650}
tr.total th,tr.total td{border-bottom:0;font-weight:650}
td.num,th.num{text-align:right}
td.num{white-space:nowrap}
caption{caption-side:bottom;text-align:left;font-size:.83rem;line-height:1.5;color:var(--muted);padding-top:.65rem}
.yes,.no{font-weight:650}
.ot{display:flex;align-items:center;gap:.75rem}
.ot svg{width:4.3rem;height:auto;flex:none;color:var(--line-2)}

/* comparison tables that stack on phones: each row becomes a labelled block */
@media (max-width:600px){
  table.stack thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
  table.stack,table.stack tbody,table.stack tr,table.stack th,table.stack td{display:block}
  table.stack tr{border-bottom:1px solid var(--line);padding:.9rem 0 .75rem}
  table.stack tbody th{border:0;padding:0 0 .4rem;font-family:var(--display);font-size:1.05rem;font-weight:700}
  table.stack td{border:0;padding:.22rem 0}
  table.stack td::before{content:attr(data-label) ": ";color:var(--muted);font-size:.86rem}
  table.stack td.num{text-align:left}
  table.stack td.empty{display:none}
  table.stack caption{display:block}
  th,td{padding-right:.7rem}
}

/* ---------- sources */
sup.ref{font-size:.68em;line-height:0;margin-left:.1em}
sup.ref a{text-decoration:none;padding:0 .16em;color:var(--amber-ink);font-weight:600}
sup.ref a:hover{text-decoration:underline}
.sources ol{padding-left:1.4rem;font-size:.92rem}
.sources li{margin:.6rem 0}
.sources .meta{display:block;color:var(--muted);font-size:.86rem}
:target{scroll-margin-top:1rem}
.sources li:target{background:var(--surface);outline:1px solid var(--line-2);outline-offset:.4rem;border-radius:.2rem}

/* what we couldn't confirm: dashed outline = not settled */
.unknown{border:1.5px dashed var(--line-2);border-radius:1rem;padding:1.05rem 1.2rem 1rem;margin:2.8rem 0 0}
.unknown h2{margin:0 0 .5rem;font-size:1.22rem}
.unknown ul{margin:0;padding-left:1.15rem}
.unknown li{margin:.4rem 0}

/* ---------- buttons, fields, chips */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font:600 1rem/1.2 var(--body);padding:.85rem 1.15rem;border-radius:.75rem;border:1px solid transparent;cursor:pointer;text-decoration:none}
.btn-primary{background:var(--amber);color:var(--on-amber)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-quiet{background:none;border-color:var(--line-2)}
.btn-quiet:hover{border-color:var(--muted)}
.money{position:relative}
.money span{position:absolute;left:.8rem;top:50%;transform:translateY(-50%);font:600 1.15rem var(--display);color:var(--muted);pointer-events:none}
.money input{width:100%;font:600 1.15rem/1.2 var(--display);background:var(--bg);border:1px solid var(--line-2);border-radius:.7rem;padding:.68rem .8rem .68rem 1.7rem}
.money input:hover{border-color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:.4rem;border:0;padding:0;margin:0}
.chip{position:relative}
.chip input{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer}
.chip span{display:block;padding:.5rem .82rem;border:1px solid var(--line-2);border-radius:999px;font-size:.95rem;font-weight:500;line-height:1.2;white-space:nowrap}
.chip input:hover + span{border-color:var(--muted)}
.chip input:checked + span{background:var(--text);border-color:var(--text);color:var(--bg);font-weight:600}
.chip input:focus-visible + span{outline:3px solid var(--amber);outline-offset:2px}
.chips.even6{display:grid;grid-template-columns:repeat(6,1fr)}
.chips.even5{display:grid;grid-template-columns:repeat(5,1fr)}
.chips.even6 .chip span,.chips.even5 .chip span{text-align:center;padding-left:.2rem;padding-right:.2rem}
.in{border:0;padding:0;margin:0;min-width:0}
.in > label,.in > legend{display:block;padding:0;font-size:.88rem;font-weight:500;color:var(--muted);margin-bottom:.4rem}
.chip-note{font-size:.86rem;line-height:1.5;color:var(--muted);margin:.5rem 0 0;min-height:2.6em}

/* ---------- the fee slip */
.slip{background:var(--surface);border:1px solid var(--line);border-radius:1.15rem;margin:0}
.slip-head{padding:1.15rem 1.15rem 1.2rem}
.slip-head h2,.slip-title{font:700 1.12rem/1.25 var(--display);letter-spacing:-.008em;margin:0 0 .95rem}
.slip-inputs{display:grid;gap:1rem}
.slip-body{padding:.5rem 1.15rem .55rem;border-top:1px dashed var(--line-2)}
.slip-row{display:flex;align-items:baseline;gap:.5rem;padding:.56rem 0}
.slip-row > span:first-child{min-width:0}
.slip-row small{display:block;font-size:.8rem;line-height:1.35;color:var(--muted)}
.slip-row .dots{flex:1;min-width:.8rem;border-bottom:1.5px dotted var(--line-2);transform:translateY(-.3em)}
.slip-row b{font:650 1.06rem/1.2 var(--display);white-space:nowrap}
.slip-row .of{width:3.9em;text-align:right;font-size:.86rem;color:var(--muted);white-space:nowrap}
.slip-row.total{padding-top:.75rem}
.slip-row.total > span:first-child{font-weight:650}
.slip-row.total b{font-size:1.3rem}
.slip-cols{display:flex;justify-content:flex-end;gap:.5rem;padding:.35rem 0 0;font-size:.76rem;color:var(--muted)}
.slip-cols span:last-child{width:4.5em;text-align:right}
.slip-sum{margin:.5rem 0 .55rem;font-size:.95rem;line-height:1.5}
.slip-foot{padding:.85rem 1.15rem 1rem;border-top:1px dashed var(--line-2)}
.slip-foot p{margin:0;font-size:.8rem;line-height:1.55;color:var(--muted)}
.slip-foot p + p{margin-top:.45rem}

/* three ways, as bars */
.ways{margin:.2rem 0 .3rem}
.way{display:grid;grid-template-columns:1fr auto;gap:.1rem .8rem;align-items:baseline;padding:.5rem 0}
.way span{font-size:.93rem}
.way b{font:650 1rem var(--display)}
.way i{grid-column:1 / -1;display:block;height:.45rem;border-radius:.25rem;background:var(--surface-2)}
.way i u{display:block;height:100%;border-radius:.25rem;background:var(--line-2);min-width:.3rem}
.way.best i u{background:var(--amber)}

/* ---------- our code */
.code-card{background:var(--surface);border:1px solid var(--line);border-radius:1.15rem;padding:1.25rem 1.15rem 1.15rem;margin:2.8rem 0 0}
.code-card h2{margin:0 0 .5rem;font-size:1.25rem}
.code-card p{margin:0 0 .8rem}
.code-line{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem .8rem;margin:1rem 0}
.code-field{display:flex;align-items:stretch;border:1px solid var(--line-2);border-radius:.8rem;background:var(--bg);overflow:hidden}
.code-field .code{font:700 1.55rem/1 var(--display);letter-spacing:.14em;padding:.72rem .5rem .72rem 1rem;user-select:all}
.code-field button{display:grid;place-items:center;width:3.1rem;border:0;border-left:1px solid var(--line);background:none;color:var(--text);cursor:pointer}
.code-field button:hover{background:var(--surface-2)}
.code-field button:focus-visible{outline-offset:-3px;border-radius:.6rem}
.code-field .i-check{display:none}
.code-field button.done .i-copy{display:none}
.code-field button.done .i-check{display:block}
.copy-status{font-size:.9rem;font-weight:600;margin:0;min-width:3.5rem}
.code-card .btn-primary{display:flex;width:100%;text-align:center}
.code-card .fine{margin:.3rem 0 0}

/* ---------- footer */
.site-foot{border-top:1px solid var(--line);margin-top:4.5rem;padding:1.9rem 0 3rem;font-size:.88rem;line-height:1.6;color:var(--muted)}
.site-foot p{margin:0 0 .8rem;max-width:42rem}
.site-foot a{color:var(--text)}
.foot-links{display:flex;flex-wrap:wrap;gap:.4rem 1.4rem;list-style:none;padding:0;margin:0 0 1.1rem}
.foot-links li{margin:0}
.foot-links a{font-weight:500}

/* ---------- home */
.hero h1{font-size:clamp(2.45rem,10vw,4.1rem);line-height:1;letter-spacing:-.028em;margin-top:2.5rem}
.lede{font-size:1.16em;line-height:1.5;color:var(--muted);max-width:33rem;margin-bottom:0}
.jump{margin:1.1rem 0 0;font-size:.95rem;display:flex;flex-wrap:wrap;gap:.45rem 1.4rem}
.jump a[href="/start/"]{font-weight:600}
.hero .slip{margin-top:1.8rem}
.hero .code-card{margin-top:1.1rem}

/* ---------- home: the scroll stage. Without WebGL or with reduced motion it is a plain hero. */
.stage-canvas,.stage-hint,.cap-2,.cap-3{display:none}
.cap-big{font:700 clamp(2rem,8.4vw,3.3rem)/1.04 var(--display);letter-spacing:-.026em;margin:0 0 .8rem;color:var(--text);max-width:16ch}
.cap p:not(.cap-big):not(.jump){color:var(--muted);font-size:1.05rem;max-width:30rem}
.scrolly .stage{height:330vh;height:330svh;position:relative}
body{overflow-x:clip}
.scrolly .stage-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;width:100vw;margin-left:calc(50% - 50vw)}
.scrolly .stage-canvas{display:block;position:absolute;inset:0;width:100%;height:100%}
.scrolly .stage-copy{position:absolute;top:0;bottom:0;left:50%;width:min(100%,68rem);transform:translateX(-50%);pointer-events:none}
.scrolly .stage-copy .cap{left:max(1.25rem,env(safe-area-inset-left,0px));right:max(1.25rem,env(safe-area-inset-right,0px))}
.scrolly .cap{display:block;position:absolute;left:0;right:0;top:0;pointer-events:auto;will-change:opacity,transform}
.scrolly .cap-2,.scrolly .cap-3{opacity:0;visibility:hidden}
.scrolly .cap-1 h1{margin-top:1.6rem}
.scrolly .cap-2,.scrolly .cap-3{padding-top:1.6rem}
.scrolly .stage-hint{display:flex;align-items:center;gap:.6rem;position:absolute;left:50%;translate:-50% 0;bottom:calc(1.2rem + env(safe-area-inset-bottom,0px));margin:0;font-size:.82rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.stage-hint span{display:block;width:1px;height:2.2rem;background:linear-gradient(var(--amber),transparent);animation:hint 1.8s ease-in-out infinite}
@keyframes hint{0%{transform:scaleY(.2);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}100%{transform:scaleY(1);transform-origin:bottom;opacity:0}}
.scrolly .stage + .hero-tools{margin-top:0}
.hero-tools{padding-top:.4rem}
@media (max-height:700px){.scrolly .cap-1 .lede{display:none}}
.index{list-style:none;padding:0;margin:.4rem 0 0}
.index li{border-top:1px solid var(--line);padding:1.05rem 0 1.1rem;margin:0}
.index li:last-child{border-bottom:1px solid var(--line)}
.index a{font:700 1.26rem/1.2 var(--display);letter-spacing:-.012em;text-decoration:none}
.index a:hover{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:.12em}
.index p{margin:.4rem 0 0;color:var(--muted);font-size:.96rem}
.index time{display:block;font-size:.82rem;color:var(--muted);margin-top:.4rem}
.section-lede{color:var(--muted);font-size:.98rem;margin:.2rem 0 .3rem}
#guides{margin-top:2.6rem}

/* ---------- beginner course */
.course{list-style:none;padding:0;margin:1.2rem 0 1.6rem}
.course li{display:grid;grid-template-columns:2.5rem minmax(0,1fr);column-gap:.95rem;align-items:start;margin:0;padding:1rem 0 1.05rem;border-top:1px solid var(--line)}
.course li:last-child{border-bottom:1px solid var(--line)}
.course .n{grid-row:1 / span 3;width:2.3rem;height:2.3rem;border-radius:50%;border:1.5px solid var(--line-2);color:var(--muted);font:700 1rem/2.12rem var(--display);text-align:center}
.course li.ready .n{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.course .t{display:flex;flex-wrap:wrap;align-items:baseline;gap:.3rem .6rem;font:700 1.2rem/1.25 var(--display);letter-spacing:-.01em;padding-top:.25rem}
.course li.later .t{color:var(--muted)}
.course .t a{text-decoration:none}
.course .t a:hover{text-decoration:underline;text-decoration-color:var(--amber);text-decoration-thickness:.12em}
.course p{grid-column:2;margin:.35rem 0 0;color:var(--muted);font-size:.96rem}
.course p.also{font-size:.9rem}
.tag{display:inline-block;font:600 .74rem/1 var(--body);letter-spacing:.01em;padding:.32rem .55rem;border-radius:99px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap}
.tag.soon{border-style:dashed}
.course.compact{margin:.6rem 0 0}
.course.compact li{padding:.7rem 0;align-items:center}
.course.compact .n{width:2rem;height:2rem;line-height:1.82rem;font-size:.92rem}
.course.compact .t{font-size:1.06rem;padding-top:0}
.promise{margin-top:1.8rem}
.promise p{font-size:1rem}

.lesson-bar{display:flex;flex-wrap:wrap;align-items:center;gap:.35rem .8rem;margin:1.6rem 0 -.6rem;font-size:.9rem;color:var(--muted)}
.lesson-bar a{color:var(--text);font-weight:600;text-decoration:none}
.lesson-bar a:hover{text-decoration:underline}
.progress{display:grid;grid-template-columns:repeat(8,1fr);gap:3px;flex:1 1 100%;max-width:18rem}
.progress i{height:4px;border-radius:2px;background:var(--line)}
.progress i.on{background:var(--amber)}
.lesson-nav{display:grid;grid-template-columns:1fr 1fr;gap:.6rem;margin:2.2rem 0 0}
.lesson-nav a,.lesson-nav span{display:block;min-width:0;padding:.8rem .95rem;border:1px solid var(--line);border-radius:.85rem;font-weight:650;line-height:1.3;text-decoration:none}
.lesson-nav a:hover{border-color:var(--amber)}
.lesson-nav small{display:block;font-weight:500;font-size:.8rem;color:var(--muted);margin-bottom:.2rem}
.lesson-nav .next{grid-column:2;text-align:right}
.lesson-nav .none{border:0;padding:0}
.lesson-nav .soon{color:var(--muted);border-style:dashed}
.lesson-nav em{font-style:normal;font-weight:500;font-size:.85rem}

/* a sequence at a glance */
.flow{list-style:none;counter-reset:f;padding:0;margin:1rem 0 .6rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem}
.flow li{counter-increment:f;display:flex;align-items:center;gap:.6rem;margin:0;padding:.7rem .8rem;background:var(--surface);border:1px solid var(--line);border-radius:.8rem;font-weight:600;font-size:.95rem;line-height:1.25}
.flow li::before{content:counter(f);flex:none;width:1.65rem;height:1.65rem;border-radius:50%;border:1.5px solid var(--line-2);font:700 .85rem/1.5rem var(--display);text-align:center}
.flow li.key{border-color:var(--amber)}
.flow li.key::before{background:var(--amber);border-color:var(--amber);color:var(--on-amber)}
.flow-cap{font-size:.92rem;color:var(--muted);margin:.2rem 0 1.2rem}
@media (min-width:720px){.flow{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- calculator */
.tabs{display:flex;gap:1.6rem;border-bottom:1px solid var(--line);margin:1.7rem 0 1.4rem}
.tabs button{background:none;border:0;padding:.2rem 0 .7rem;font:600 1.02rem var(--body);color:var(--muted);cursor:pointer;margin-bottom:-1px;border-bottom:2px solid transparent}
.tabs button:hover{color:var(--text)}
.tabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--amber)}
.panel > h2{margin-top:2.2rem}
.tabs-on .panel > h2{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.tool{display:grid;gap:1.4rem}
.tool-in{display:grid;gap:1.25rem;align-content:start;min-width:0}
.tool-out{display:contents}
.tool-out .calc-head{order:-1}
.tool-out .ladder{order:2}
#panel-month .tool-in{gap:0}
.calc-head{background:var(--surface);border:1px solid var(--line);border-radius:1.15rem;padding:1.2rem 1.15rem 1.05rem}
.calc-label{font-size:.95rem;color:var(--muted);margin:0}
.calc-big{font:700 clamp(2.4rem,11vw,3.4rem)/1.05 var(--display);letter-spacing:-.025em;margin:.3rem 0 .3rem}
.calc-note{font-size:.92rem;color:var(--muted);margin:0}
.calc-strip{display:flex;flex-wrap:wrap;gap:.2rem 1.7rem;margin:1rem 0 0;padding-top:.9rem;border-top:1px dashed var(--line-2)}
.calc-strip div{min-width:7.2rem}
.calc-strip dt{font-size:.82rem;color:var(--muted)}
.calc-strip dd{margin:.1rem 0 .3rem;font:650 1.12rem var(--display)}
.field{display:grid;grid-template-columns:1fr 8.6rem;gap:.9rem;align-items:center;padding:.72rem 0;border-bottom:1px solid var(--line)}
.field label{font-size:.98rem;min-width:0}
.field .rate,.field .hint{display:block;font-size:.8rem;line-height:1.4;color:var(--muted);margin-top:.15rem}
.field input[type=text]{width:100%;font:600 1rem var(--display);text-align:right;background:var(--surface);border:1px solid var(--line-2);border-radius:.6rem;padding:.58rem .65rem}
.slider{padding:.95rem 0;border-bottom:1px solid var(--line)}
.slider label{display:flex;justify-content:space-between;gap:1rem;font-size:.98rem;margin-bottom:.4rem}
.slider output{font:650 1rem var(--display)}
.slider input{width:100%;accent-color:var(--amber);height:1.6rem}
.ladder{margin:.9rem 0 0}
.rail-vip{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.rail-vip i{display:block;height:.5rem;border-radius:.25rem;background:var(--surface-2)}
.rail-vip i.on{background:var(--line-2)}
.rail-vip i.now{background:var(--amber)}
.rail-labels{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:.45rem;font-size:.7rem;font-weight:500;color:var(--muted);text-align:center}
.rail-labels span.now{color:var(--text);font-weight:700}
.ladder p{font-size:.95rem;margin:.9rem 0 0}
details.more{margin:2rem 0 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
details.more summary{cursor:pointer;padding:.9rem 0;font-weight:600}
details.more .table-wrap{margin-top:0}

.live{position:sticky;bottom:calc(.75rem + env(safe-area-inset-bottom,0px));z-index:2;text-decoration:none;display:flex;align-items:baseline;gap:.7rem;padding:.72rem 1rem;background:var(--surface-2);border:1px solid var(--line-2);border-radius:.9rem;box-shadow:0 .6rem 1.6rem rgba(0,0,0,.35)}
.live span:first-child{font-size:.9rem;color:var(--muted)}
.live b{font:700 1.2rem/1 var(--display)}
.live span:last-child{margin-left:auto;font-size:.9rem;color:var(--muted)}

/* ---------- wide screens: a reading column with a rail beside it */
@media (min-width:1080px){
  .wrap{max-width:68rem;padding-left:max(2rem,env(safe-area-inset-left,0px));padding-right:max(2rem,env(safe-area-inset-right,0px))}
  .hero{display:grid;grid-template-columns:minmax(0,1fr) 25.5rem;column-gap:4.5rem;align-items:start;padding-top:1.2rem}
  .hero-text{grid-column:1;grid-row:1}
  .hero h1{font-size:3.55rem}
  .chips.even5{grid-template-columns:repeat(10,1fr)}
  .hero .slip{grid-column:2;grid-row:1 / span 2;margin-top:2.7rem}
  .hero .code-card{grid-column:1;grid-row:2;margin-top:2.2rem;max-width:33rem}
  .hero-tools .code-card,.hero-tools .slip{grid-row:1}
  .hero-tools .code-card{margin-top:2.7rem}
  .scrolly .cap{top:50%;bottom:auto;max-width:31rem}
  .scrolly .cap-1 h1{margin-top:0}
  .scrolly .cap-2,.scrolly .cap-3{padding-top:0}
  .scrolly .stage-copy .cap{translate:0 -50%;left:2rem;right:auto}
  .cols{display:grid;grid-template-columns:minmax(0,42rem) minmax(0,1fr);column-gap:4.5rem;align-items:start}
  .cols .side h2{font-size:1.3rem;margin-top:3.1rem}
  .cols .side p,.cols .side .index p{font-size:.95rem}
  .toc{position:absolute;left:calc(100% + 4.5rem);top:.4rem;width:17rem;height:calc(100% - .4rem);margin:0;border:0}
  .toc-in{position:sticky;top:1.5rem}
  .toc summary{pointer-events:none;padding-top:0}
  .toc summary::after{display:none}
  .toc ol{padding-left:1.15rem;font-size:.92rem;color:var(--muted)}
  .tool{grid-template-columns:minmax(0,1fr) 25.5rem;column-gap:4.5rem;align-items:start}
  .tool > .slip,.tool > .tool-out{position:sticky;top:1.5rem}
  .tool-out{display:block}
  .tool-out .ladder{margin-top:1.6rem}
  .text{max-width:42rem}
  .live{display:none}
}
.doc > .lede{margin:.5rem 0 1rem}