/* VOXEL · one motif: the square voxel. White sheet, black ink, one biro blue that the block carries at scale.
   Buttons, bullets, card tabs and the footer wordmark are all cut from the same square. No rules, shadows or gradients. */
:root{
  --bg:#ffffff; --surface:#f4f4f4; --surface-2:#e9ebf0; --ink:#111111; --muted:#474747; --soft-on-dark:#d0d0d0;
  --accent:#1743cc; --accent-2:#12379f; --accent-ink:#ffffff; --field:#111111; --field-ink:#ffffff; --pale:#dfe3ee;
  --ok:#0f7a3d; --bad:#b3261e;
  --face:"Bricolage Grotesque",system-ui,sans-serif;
  --code:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* taste-skill-ignore: used only by <code> and <pre> (real terminal commands) */
  --m:clamp(16px,3vw,32px);
  --step-small:clamp(0.8125rem,0.79rem + 0.1vw,0.875rem);
  --step-body:clamp(1.0625rem,1rem + 0.25vw,1.1875rem);
  --step-lead:clamp(1.25rem,1.1rem + 0.7vw,1.625rem);
  --step-head:clamp(2.25rem,1.3rem + 3.6vw,4.5rem);
  --step-hero:clamp(3.4rem,6.6vw,7rem);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:400 var(--step-body)/1.5 var(--face);-webkit-font-smoothing:antialiased;overflow-x:clip}
main,section,footer{max-width:100%;overflow-x:clip}
.rounds-grid>*,.acc-grid>*,.plate>*,.acc-col>*{min-width:0}
a{color:inherit}
button,input{font:inherit;color:inherit}
h1,h2,h3{margin:0;font-weight:600;letter-spacing:-0.04em;line-height:.92}
p{margin:0}
code{font-family:var(--code);font-size:.92em}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
::selection{background:var(--accent);color:var(--accent-ink)}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ---------- buttons: the square ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:44px;padding:0 1.1em;border:0;border-radius:0;background:var(--accent);color:var(--accent-ink);font-weight:500;text-decoration:none;cursor:pointer;transition:transform .15s var(--ease),background-color .15s}
.btn:hover{background:var(--accent-2)}
.btn:active{transform:translateY(1px) scale(.98)}
.btn:disabled{background:var(--surface-2);color:var(--muted);cursor:not-allowed}
.btn.big{min-height:56px;padding:0 1.6em;font-size:var(--step-body)}
.btn.ghost{background:var(--surface);color:var(--ink)}
.btn.ghost:hover{background:var(--surface-2)}
.btn.wide{width:100%;margin-top:18px}
.btn.inv{background:var(--bg);color:var(--accent)}
.btn.inv:hover{background:var(--surface)}

/* ---------- bar ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:20;display:flex;align-items:center;gap:28px;padding:14px var(--m);background:var(--bg)}
.mark{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:var(--step-lead);letter-spacing:-0.05em;text-decoration:none}
.vx{width:26px;height:26px;display:inline-block;flex-shrink:0}
.links{display:flex;gap:24px;margin-left:auto}
.links a{text-decoration:none;font-weight:500}
.links a:hover{color:var(--accent)}
.live{display:inline-flex;align-items:center;gap:8px;font-size:var(--step-small);color:var(--muted)}
.live i{width:9px;height:9px;background:var(--muted);transition:background-color .3s}
.live.on i{background:var(--ok)}
.live.off i{background:var(--bad)}

/* ---------- the dive ---------- */
.dive{position:relative}
.stage{position:sticky;top:0;height:100svh;margin-bottom:-100svh;overflow:hidden}
.stage canvas{pointer-events:none}
#chunk{position:absolute;top:0;left:0;width:100vw;height:100svh;display:block}
.layer{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;gap:24px;padding:110px var(--m) 60px calc(var(--m) + 4vw);max-width:calc(46vw + var(--m))}
.layer h1{font-size:var(--step-hero)}
.layer h2{font-size:var(--step-head)}
.layer p{max-width:36ch;font-size:var(--step-lead);line-height:1.38}
.layer .lead{font-size:var(--step-lead);line-height:1.35;max-width:30ch}
.hero .btn{align-self:flex-start}
.cmd{display:inline-flex;align-items:center;justify-content:space-between;gap:16px;width:100%;max-width:440px;min-height:52px;padding:0 6px 0 16px;border:0;background:var(--field);color:var(--field-ink);cursor:pointer;text-align:left;transition:transform .15s var(--ease)}
.cmd:active{transform:scale(.99)}
.cmd span{padding:8px 12px;background:#2a2a2a;font-size:var(--step-small);font-weight:500}
.cmd:hover span{background:var(--accent)}
.figs{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:12px 40px;margin:8px 0 0}
.figs div{display:flex;flex-direction:column;gap:4px}
.figs dt{white-space:nowrap;font-size:clamp(1.9rem,2.8vw,3rem);font-weight:600;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}
.figs dd{margin:0;color:var(--muted)}
.hashes{display:flex;flex-direction:column;gap:2px;max-width:460px}
.hashes code{display:block;padding:10px 14px;background:var(--surface);color:var(--muted);font-size:var(--step-small);white-space:pre}
.hashes .hit{background:var(--accent);color:var(--accent-ink)}
.code-art{margin:0;padding:18px 20px;max-width:460px;background:var(--field);color:var(--field-ink);font:500 15px/1.15 var(--code);white-space:pre;overflow-x:auto}
.code-art span{display:block;margin-top:14px;color:#9fb6ff}

/* ---------- showcase: the square plate ---------- */
.plate{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;min-height:88svh;background:var(--surface)}
.plate-img{display:grid;place-items:center;padding:40px}
.block-live{position:relative;width:min(100%,62svh);aspect-ratio:1;background:var(--pale);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;padding:28px;color:var(--ink)}
.block-live i{position:absolute;inset:auto 0 0 0;height:0%;background:var(--accent);transition:height 1s linear}
.block-live b,.block-live span{position:relative;font-variant-numeric:tabular-nums}
.block-live b,.block-live span{align-self:flex-start;background:var(--ink);color:var(--bg);padding:.08em .22em}
.block-live b{font-size:var(--step-hero);font-weight:600;letter-spacing:-0.05em;line-height:.95}
.block-live span{font-size:var(--step-lead);margin-top:6px}
.plate-copy{display:flex;flex-direction:column;justify-content:space-between;gap:40px;padding:56px var(--m) 40px 40px}
.tabs{display:flex;gap:28px}
.tabs button{border:0;background:none;padding:6px 0;font-size:var(--step-body);color:var(--muted);cursor:pointer;font-weight:500}
.tabs button[aria-selected="true"]{color:var(--ink)}
.tabs button[aria-selected="true"]::before{content:"";display:inline-block;width:10px;height:10px;background:var(--accent);margin-right:8px;vertical-align:1px}
.tab-body h2{font-size:var(--step-head);margin-bottom:28px}
.tab-body p{max-width:34ch;font-size:var(--step-lead);line-height:1.35}
.cells{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.cell{display:flex;align-items:center;padding:0 22px;min-height:72px;border:0;font-weight:500;text-decoration:none;cursor:pointer;transition:transform .15s var(--ease)}
.cell:active{transform:scale(.99)}
.cell.ink{background:var(--ink);color:var(--bg)}
.cell.tone{background:var(--surface-2);color:var(--ink)}
.cell:hover{outline:0;filter:brightness(1.08)}

/* ---------- how it works: stages as one bar ---------- */
.stages{position:relative;z-index:1;background:var(--bg);padding:180px var(--m) 140px}
.stages h2{font-size:var(--step-hero);margin-bottom:64px}
.bar-row{display:flex;gap:6px;height:22vh;min-height:150px}
.seg{flex-basis:0;min-width:12%;padding:20px;color:var(--accent-ink)}
.seg b{font-size:var(--step-lead);font-weight:600;letter-spacing:-0.03em}
.s1{background:var(--ink)}
.s2{background:#3a3a3a}
.s3{background:var(--accent-2)}
.s4{background:var(--accent)}
.bar-notes{display:flex;gap:6px;margin-top:18px}
.bar-notes p{flex-basis:0;min-width:12%;font-size:var(--step-body);max-width:none;padding-right:12px}

/* ---------- the live thing: estimate ---------- */
.estimate{position:relative;z-index:1;display:flex;flex-direction:column;justify-content:space-between;gap:80px;min-height:88svh;padding:140px var(--m) 72px;background:var(--accent);color:var(--accent-ink)}
.estimate h2{font-size:var(--step-head)}
.slider{display:grid;grid-template-columns:1fr auto;gap:10px 16px;width:min(100%,420px);margin-top:28px;font-size:var(--step-body)}
.slider output{font-weight:600;font-variant-numeric:tabular-nums}
.slider input{grid-column:1/-1;width:100%;height:44px;accent-color:#ffffff;cursor:pointer}
.est-bottom{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;flex-wrap:wrap}
.est-fig{font-size:clamp(5.5rem,16vw,15rem);font-weight:600;line-height:.8;letter-spacing:-0.05em;font-variant-numeric:tabular-nums}
.est-fig small{font-size:.22em;letter-spacing:-0.02em;margin-left:.2em}
.est-how{max-width:34ch;font-size:var(--step-body)}

/* ---------- switches ---------- */
.switches{position:relative;z-index:1;background:var(--bg)}
.sw{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 24px;min-height:20vh;padding:28px var(--m);background:var(--bg);transition:background-color .35s var(--ease)}
.sw p{font-size:var(--step-head);font-weight:600;letter-spacing:-0.035em;line-height:1;color:var(--muted);transition:color .35s}
.sw .then{grid-column:1/2;font-size:var(--step-body);max-width:60ch;display:none}
.sw.on .then{display:block}
.sw.on p{color:var(--ink)}
.sw.on:nth-child(1){background:var(--surface)}
.sw.on:nth-child(2){background:var(--pale)}
.sw.on:nth-child(3){background:var(--surface-2)}
.sw.on:nth-child(4){background:#d6def6}
.tg{grid-row:1/3;grid-column:2;position:relative;width:76px;height:40px;border:0;background:var(--surface-2);cursor:pointer;transition:background-color .2s}
.tg::after{content:"";position:absolute;top:6px;left:6px;width:28px;height:28px;background:var(--bg);transition:transform .2s var(--ease)}
.tg[aria-checked="true"]{background:var(--accent)}
.tg[aria-checked="true"]::after{transform:translateX(36px)}

/* ---------- dashboard ---------- */
.access{position:relative;z-index:1;background:var(--field);color:var(--field-ink);padding:160px var(--m) 120px}
.acc-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:56px}
.acc-head h2{font-size:var(--step-hero)}
.acc-head p{max-width:36ch;color:#cfcfcf}
.acc-out{max-width:620px;padding:40px;background:#1c1c1c;display:flex;flex-direction:column;align-items:flex-start;gap:18px}
.acc-out p{color:#d8d8d8}
.wallet-list{display:flex;flex-direction:column;gap:6px;width:100%;max-width:360px}
.wallet-list:empty{display:none}
.wallet-list button{display:flex;align-items:center;gap:10px;min-height:48px;padding:0 14px;border:0;background:#2a2a2a;cursor:pointer;text-align:left}
.wallet-list button:hover{background:var(--accent)}
.wallet-list img{width:22px;height:22px}
.acc-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.acc-col{display:flex;flex-direction:column;gap:12px}
.pane{padding:28px;background:#1c1c1c}
.pane h3{font-size:var(--step-lead);letter-spacing:-0.02em}
.pane.warn{background:#3a1512}
.pane p{margin-top:10px}
.note{color:#bdbdbd;font-size:var(--step-small)}
.msg{min-height:1.2em;margin-top:10px;color:#d8d8d8;font-size:var(--step-small)}
.msg.err{color:#ff9d94}
.msg a{color:inherit}
.row-between{display:flex;align-items:center;justify-content:space-between;gap:12px}
.row-gap{display:flex;gap:6px}
.keybox{display:block;margin-top:14px;padding:14px;background:#000;color:#bcd0ff;word-break:break-all;font-size:var(--step-small)}
.access .cmds{margin-top:18px}
.access .cmd{max-width:none;background:#000}
.big-num{margin-top:20px;font-size:var(--step-head);font-weight:600;letter-spacing:-0.04em;line-height:1;font-variant-numeric:tabular-nums}
.big-num small{font-size:.3em;color:#bdbdbd;letter-spacing:0}
.mini{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:24px 0 0}
.mini dt{color:#bdbdbd;font-size:var(--step-small)}
.mini dd{margin:4px 0 0;font-size:var(--step-body);font-weight:500;font-variant-numeric:tabular-nums}
.tagx{padding:4px 10px;background:var(--accent);font-size:var(--step-small);font-weight:500}
.gate-art{margin:14px 0 0;padding:14px;background:#000;color:#ffd5d0;font:500 15px/1.12 var(--code);white-space:pre;overflow-x:auto}
.row-in{display:flex;gap:6px;margin-top:14px}
.row-in input{flex:1;min-width:0;min-height:48px;padding:0 14px;border:0;background:#000;color:#fff;font-size:var(--step-body)}
.wd-list{list-style:none;margin:14px 0 0;padding:0}
.wd-list li{display:flex;justify-content:space-between;padding:8px 0;font-size:var(--step-small)}
.wd-list li::before{content:"";width:8px;height:8px;background:var(--accent);margin:7px 10px 0 0;flex-shrink:0}
.wd-list li span:first-of-type{margin-right:auto}

/* ---------- rounds ---------- */
.network{position:relative;z-index:1;background:var(--bg);padding:180px var(--m) 140px}
.net-head{display:flex;justify-content:space-between;align-items:flex-end;gap:32px;flex-wrap:wrap;margin-bottom:48px}
.net-head h2{font-size:var(--step-hero)}
.net-head p{max-width:40ch}
.rounds-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tbl-wrap{background:var(--surface)}
.tbl-head{padding:18px 20px;font-size:var(--step-lead);letter-spacing:-0.02em;background:var(--surface-2)}
.tbl-scroll{max-height:440px;overflow:auto}
.tbl{width:100%;border-collapse:collapse;font-size:var(--step-small);font-variant-numeric:tabular-nums}
.tbl th{position:sticky;top:0;background:var(--surface);text-align:left;font-weight:500;color:var(--muted);padding:12px 20px}
.tbl td{padding:10px 20px;white-space:nowrap}
.tbl tbody tr:nth-child(even){background:#fafafa}
.tbl .r{text-align:right}
.tbl .empty{text-align:center;color:var(--muted);padding:36px}
.tbl tr.click{cursor:pointer}
.tbl tr.click:hover,.tbl tr.sel{background:#dfe6fb}
.tbl .you,.tbl .rig{display:inline-block;margin-left:8px;padding:1px 7px;font-size:12px;font-weight:500}
.tbl .you{background:var(--accent);color:#fff}
.tbl .rig{background:var(--ink);color:#fff}
.payouts{margin-top:12px}

/* ---------- faq: index cards cut from the square ---------- */
.faq{position:relative;z-index:1;background:var(--surface);padding:180px var(--m) 160px}
.faq h2{font-size:var(--step-hero);margin:0 0 56px 16vw}
.cards{margin:0 16vw;display:flex;flex-direction:column}
.card{position:relative;margin-top:-6px;padding:0;background:var(--bg)}
.card:first-child{margin-top:0}
.card.c2{background:var(--pale)}
.card.c3{background:#d6def6}
.card summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:10px;padding:22px 26px 26px}
.card summary::-webkit-details-marker{display:none}
.card .tab{align-self:flex-start;padding:6px 14px;background:var(--ink);color:var(--bg);font-size:var(--step-body);font-weight:500}
.card:nth-child(2) .tab{margin-left:150px}.card:nth-child(3) .tab{margin-left:300px}.card:nth-child(4) .tab{margin-left:450px}.card:nth-child(5) .tab{margin-left:600px}.card:nth-child(6) .tab{margin-left:750px}
.card .q{font-size:var(--step-lead);font-weight:500;letter-spacing:-0.02em}
.card[open] .tab{background:var(--accent)}
.card p{padding:0 26px 30px;max-width:56ch;font-size:var(--step-body)}

/* ---------- cta: the action tile ---------- */
.tiles{position:relative;z-index:1;display:grid;grid-template-columns:1fr 4fr 1fr;gap:10px;padding:120px 0;background:var(--bg);overflow:hidden}
.tile{min-height:360px}
.tile.side{background:var(--pale);margin-left:-40px}
.tile.side.dark{background:var(--ink);margin:0 -40px 0 0}
.tile.main{background:var(--accent);color:var(--accent-ink);display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:16px;padding:40px}
.tile.main h2{font-size:var(--step-head)}
.tile.main p{font-size:var(--step-body);max-width:40ch}

/* ---------- footer: the mark built from blocks ---------- */
.foot{background:var(--ink);color:var(--bg);padding:80px var(--m) 32px}
.blocks{display:flex;align-items:flex-end;gap:4px;height:34svh;min-height:200px}
.blocks span{flex:1;display:flex;align-items:flex-end;justify-content:center;background:var(--accent);color:var(--ink);font-size:clamp(4rem,14vw,14rem);font-weight:600;letter-spacing:-0.06em;line-height:.78;overflow:hidden;padding-bottom:.04em}
.blocks span:nth-child(even){background:var(--bg)}
.foot-cols{display:grid;grid-template-columns:repeat(3,1fr) 1.4fr;gap:32px;margin-top:56px}
.foot-cols h3{font-size:var(--step-small);letter-spacing:0;color:#bdbdbd;font-weight:500;margin-bottom:12px}
.foot-cols a{display:block;padding:4px 0;text-decoration:none;font-size:var(--step-small)}
.foot-cols a:hover{color:#9fb6ff}
.foot .fine{font-size:var(--step-small);color:#d0d0d0;max-width:44ch}
.foot-last{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-top:56px;font-size:var(--step-small);color:#d0d0d0}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:24px;z-index:50;transform:translate(-50%,16px);opacity:0;visibility:hidden;padding:12px 18px;background:var(--ink);color:var(--bg);font-size:var(--step-small);transition:opacity .2s,transform .2s var(--ease);pointer-events:none}
.toast.on{opacity:1;visibility:visible;transform:translate(-50%,0)}

/* ---------- entrances (content stays visible without script) ---------- */
.js .rise{opacity:0;transform:translateY(24px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.js .rise.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rise{opacity:1;transform:none;transition:none}}

/* ---------- phone: its own composition ---------- */
@media (max-width:760px){
  .bar{gap:12px;padding:12px 16px;position:absolute}
  .links,.live{display:none}
  .bar .btn{margin-left:auto;min-height:40px}
  #chunk{left:-20vw;top:52svh;width:140vw;height:60svh}
  .layer{max-width:none;justify-content:flex-start;padding:96px 16px 52svh}
  .layer h1{font-size:13vw}
  .layer h2{font-size:11vw}
  .figs{grid-template-columns:repeat(3,1fr);gap:8px 14px}
  .figs dt{font-size:7vw}
  .plate{grid-template-columns:1fr;min-height:0}
  .plate-img{padding:16px}
  .plate-copy{padding:24px 16px 40px}
  .tab-body h2{font-size:var(--step-lead)}
  .cells{grid-template-columns:1fr}
  .cell{min-height:60px}
  .stages{padding:110px 16px 90px}
  .stages h2{font-size:11vw;margin-bottom:36px}
  .bar-row{flex-direction:column;height:70svh}
  .bar-notes{display:none}
  .seg{min-height:72px}
  .seg b{font-size:var(--step-lead)}
  .estimate{padding:110px 16px 56px;min-height:84svh}
  .estimate h2{font-size:var(--step-lead)}
  .slider{width:100%}
  .est-fig{font-size:24vw}
  .sw{min-height:132px;padding:22px 16px}
  .sw p{font-size:6.4vw;grid-column:1}
  .sw .tg{grid-row:1;align-self:center}
  .access,.network{padding:110px 16px 80px}
  .acc-grid,.rounds-grid{grid-template-columns:1fr}
  .mini{grid-template-columns:repeat(2,1fr)}
  .faq{padding:110px 16px}
  .faq h2{margin:0 0 32px;font-size:9vw}
  .cards{margin:0}
  .card .tab{margin-left:0!important}
  .card:nth-child(2) .tab{margin-left:48px!important}.card:nth-child(3) .tab{margin-left:96px!important}.card:nth-child(5) .tab{margin-left:48px!important}.card:nth-child(6) .tab{margin-left:96px!important}
  .tiles{grid-template-columns:1fr 1fr;padding:80px 16px}
  .tile.main{grid-column:1/-1;grid-row:1;min-height:300px;padding:28px}
  .tile.side{min-height:120px;margin:0!important}
  .blocks{height:22svh}
  .foot-cols{grid-template-columns:1fr 1fr}
  .foot .fine{grid-column:1/-1}
  .foot-last{flex-direction:column;align-items:flex-start}
}

/* ---------- found pictures, cut to the square ---------- */
.sq{margin:8px 0 0;width:min(100%,420px)}
.sq img{display:block;width:100%;aspect-ratio:1;object-fit:cover;filter:grayscale(1) contrast(1.05)}
.sq figcaption{margin-top:8px;font-size:var(--step-small);color:var(--muted)}
.tile.photo{padding:0;overflow:hidden}
.tile.photo img{display:block;width:100%;height:100%;object-fit:cover;filter:grayscale(1)}
.foot .credits{grid-column:1/-1;max-width:none}
.foot .credits a{color:inherit}
@media (max-width:760px){.sq{width:100%}.layer{padding-bottom:58svh}}

/* depth: the stage behind the chunk darkens a step per chapter (set by scene.js) */
.stage{background:var(--depth,var(--bg));transition:background-color .6s var(--ease)}
.layer{--f:transparent}
/* crops: square, centred, no zoom */
.hashes code{background:var(--bg)}
.sq .crop{display:block;overflow:hidden;aspect-ratio:1}
.sq{overflow:visible}

/* phone: the copy sits on the stage's field as one solid block, the chunk shows below it */
@media (max-width:760px){
  .layer{gap:0}
  .layer>*{position:relative;z-index:1}
  .layer>h1,.layer>h2,.layer>p,.layer>.figs{background:var(--depth,var(--bg));padding:10px 0;margin:0 -16px;padding-left:16px;padding-right:16px}
  .layer>.cmd,.layer>.btn,.layer>.hashes,.layer>.code-art{margin-top:16px}
  .layer .sq{display:none}
  .figs dd{font-size:var(--step-small)}
}

@media (max-width:760px){.layer p,.layer .lead{color:var(--ink)}.sw p{color:var(--ink)}.sw:not(.on) p{opacity:.72}}


/* ================= compact pass: shorter chapters, smaller type, tighter sections ================= */
:root{
  --step-small:clamp(0.8125rem,0.79rem + 0.1vw,0.875rem);
  --step-body:clamp(1rem,0.96rem + 0.18vw,1.0625rem);
  --step-lead:clamp(1.0625rem,1rem + 0.35vw,1.25rem);
  --step-head:clamp(1.9rem,1.2rem + 2.2vw,3.1rem);
  --step-hero:clamp(2.6rem,1.4rem + 3.8vw,4.6rem);
}
html{scroll-behavior:auto}
.layer{min-height:78svh;gap:18px;padding-top:90px;padding-bottom:40px}
.layer .lead,.layer p{font-size:var(--step-lead);max-width:34ch}
.figs dt{font-size:clamp(1.5rem,2vw,2.2rem)}
.figs{gap:10px 32px}
.sq{width:min(100%,320px)}
.hashes code{padding:8px 12px;font-size:13px}
.code-art{font-size:13px;padding:14px 16px}
.cmd{min-height:46px}
.btn.big{min-height:50px}
.plate{min-height:64svh}
.block-live{width:min(100%,48svh);padding:22px}
.block-live b{font-size:clamp(2.4rem,4.6vw,4.2rem)}
.plate-copy{padding:40px var(--m) 32px 32px;gap:28px}
.tab-body h2{font-size:var(--step-head);margin-bottom:16px}
.tab-body p{font-size:var(--step-lead)}
.cell{min-height:58px}
.stages{padding:110px var(--m) 90px}
.stages h2,.acc-head h2,.net-head h2{font-size:var(--step-head)}
.stages h2{margin-bottom:36px}
.bar-row{height:14vh;min-height:110px}
.seg b{font-size:var(--step-lead)}
.estimate{min-height:62svh;padding:96px var(--m) 52px;gap:48px}
.estimate h2{font-size:var(--step-head)}
.est-fig{font-size:clamp(4rem,9.5vw,8.5rem)}
.sw{min-height:12vh;padding:20px var(--m)}
.sw p{font-size:clamp(1.3rem,1rem + 1.3vw,2.1rem)}
.access,.network{padding:110px var(--m) 90px}
.acc-head,.net-head{margin-bottom:36px}
.pane{padding:22px}
.big-num{font-size:clamp(2.4rem,3.6vw,3.4rem)}
.faq{padding:110px var(--m) 100px}
.faq h2{font-size:var(--step-head);margin-bottom:36px}
.card summary{padding:16px 22px 18px}
.card .q{font-size:var(--step-lead)}
.card p{font-size:var(--step-body);padding:0 22px 22px}
.tiles{padding:80px 0}
.tile{min-height:260px}
.tile.main h2{font-size:var(--step-head)}
.blocks{height:22svh;min-height:150px}
.blocks span{font-size:clamp(3rem,9vw,9rem)}
.foot-cols{margin-top:40px}
.foot-last{margin-top:40px}
@media (max-width:760px){
  .layer{min-height:92svh;padding:84px 16px 48svh}
  .layer h1{font-size:10.5vw}
  .layer h2{font-size:8.6vw}
  .stages h2,.estimate h2,.acc-head h2,.net-head h2,.faq h2{font-size:8.6vw}
  .est-fig{font-size:19vw}
  .sw p{font-size:5.2vw}
  .blocks{height:16svh}
}

/* copy over the 3D world: a solid plate of the stage's own colour keeps every line readable */
@media (min-width:761px){
  .layer>h1,.layer>h2,.layer>p,.layer>.figs{position:relative;z-index:1;align-self:flex-start;background:var(--depth,var(--bg));outline:10px solid var(--depth,var(--bg))}
}