/* Cade beta landing. DS v2 (/ds/ds.css) for the voices and parts; the house nav,
   hero panel, CTA plate and footer are drawn by /lib/cade-shapes.js, the same code
   the final pages use, so they cannot drift. */
html{scroll-behavior:smooth}
main{overflow-x:clip}
body{overflow-x:hidden;background:var(--page,#0E0D0C)}
.w{max-width:1280px;margin:0 auto;padding:0 40px;position:relative}
section{position:relative}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
.sec{padding:150px 0 0}
.note{font-family:var(--data);font-size:12px;line-height:1.6;color:var(--meta);max-width:640px;margin:22px 0 0}
.lede{font-family:var(--read);font-size:20px;line-height:1.45;color:#d9d3c3;max-width:620px;margin:16px 0 0}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}

/* ── nav + footer: the house drawings, full bleed ── */
.hfoot svg{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
#footM{display:none}
.hfoot{background:#101010;margin-top:150px}#footD{max-width:1440px}
@media (max-width:1023px){#footD{display:none}#footM{display:block;max-width:600px}}

/* ── hero: the dark stage, the painted art behind, the machine with its orange keyline ── */
.hero{position:relative;overflow:hidden;padding:56px 0 40px}
.hbg{position:absolute;inset:0;background:url(/ds/assets/art/stage-bg.jpg) center/cover;opacity:.35}
.hbg i{position:absolute;inset:0;background:radial-gradient(55% 70% at 76% 42%,rgba(99,48,211,.35),transparent 70%),linear-gradient(180deg,transparent 70%,var(--page))}
.hart{position:absolute;right:max(-150px,calc((100vw - 1440px)/2 - 150px));top:-40px;width:900px;max-width:none;opacity:.95;pointer-events:none}
.hgrid{position:relative;display:grid;grid-template-columns:1.05fr 1fr;gap:64px;align-items:center}
.kick2{font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;text-transform:uppercase;color:var(--orange)}
.hero h1{margin:14px 0 0;font-size:clamp(84px,10.5vw,156px);line-height:.84}
.hero h1 span{display:block;animation:slam .7s cubic-bezier(.2,1.4,.4,1) backwards}.hero h1 span:nth-child(2){animation-delay:.12s}.hero h1 span:nth-child(3){animation-delay:.24s}
.hero h1 .o{color:var(--orange)}
@keyframes slam{from{opacity:0;transform:translateX(-40px) skewX(-8deg)}}
.hero .sub{font-family:var(--read);font-size:22px;line-height:1.45;margin:24px 0 0;max-width:460px;color:#d9d3c3}.hero .sub b{color:var(--paper);font-weight:600}
.hero .ctas{display:flex;align-items:center;gap:24px;margin-top:32px;flex-wrap:wrap}
.hero .cta.big{height:68px;min-width:250px;font-size:30px}
.hero .cats{display:flex;gap:16px;margin-top:30px;flex-wrap:wrap}
.cat{display:flex;align-items:center;gap:0;filter:drop-shadow(4px 4px 0 #000)}
.chex{position:relative;z-index:1;width:52px;aspect-ratio:73/85;clip-path:var(--clip-hex);background:#0B0B0B;display:grid;place-items:center}
.chex>span{width:calc(100% - 6px);aspect-ratio:73/85;clip-path:var(--clip-hex);background:var(--t);display:grid;place-items:center}
.chex svg{width:56%;height:auto}
.cat b{margin-left:-10px;padding:9px 18px 10px 20px;background:#161514;border:2px solid #0B0B0B;font-family:var(--call);font-style:oblique;font-weight:500;font-size:22px;line-height:1;text-transform:uppercase;color:var(--paper);clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}
.hero .machine{margin-top:20px}
/* shortcut plates, their HERO_CTA row */
.plates{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:96px}
.plate.shape{display:flex!important;align-items:center;justify-content:space-between;gap:12px;height:96px;padding:0 30px 0 28px}
.plate>svg .sh{transform:translate(6px,6px)}
.plate small{display:block;font-family:var(--shout);font-weight:600;font-size:15px;letter-spacing:.04em;text-transform:uppercase;color:var(--c)}
.plate b{display:block;font-family:var(--shout);font-style:italic;font-weight:800;font-size:26px;text-transform:uppercase;color:var(--paper)}
.plate i{font-style:normal;font-size:40px;line-height:1;color:var(--paper);transition:color .15s}.plate:hover i{color:var(--c)}
.plate.y{--c:var(--yellow)}.plate.o{--c:var(--orange)}.plate.v{--c:var(--violet)}
.hero .cap{position:relative;margin:30px 0 0;font-family:var(--data);font-size:11.5px;color:var(--meta)}
/* the machine: dark plate on the burst, the pots duel */
.machine{position:relative;isolation:isolate;padding:62px 40px 40px}
.mface{position:absolute;inset:0;z-index:-1;filter:drop-shadow(10px 10px 0 #000)}
.mface i{position:absolute;inset:0;background:#141312;clip-path:var(--clip-panel)}
.mface::before{content:"";position:absolute;inset:-4px;background:var(--orange);clip-path:var(--clip-panel)}
.mlt{position:absolute;top:-30px;left:26px}.mrc{position:absolute;top:-26px;right:24px}
.mq0{color:var(--orange)}
.mq{margin:8px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:34px;line-height:.95;text-transform:uppercase}
.duel{position:relative;display:grid;grid-template-columns:1fr 40px 1fr;align-items:stretch;height:290px;margin:26px 6px 0}
.side{position:relative;transition:transform .2s}
.side.g{--c:var(--yes);--cd:#6F9A36}.side.r{--c:var(--no);--cd:#C21E37}
/* the pot is real SVG (a parallelogram, its stripes, its level), so the web and the Figma import match */
.side .pot{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.side .pot .glow{opacity:0;transition:opacity .3s}
.side.win .pot .glow{opacity:1}
.side .pot .liq{transition:transform .9s cubic-bezier(.34,1.56,.64,1)}
.side .pot .wv{animation:slosh 1.6s ease-in-out infinite alternate}
@keyframes slosh{to{transform:translateX(-11px)}}
.side .who{position:absolute;left:34px;top:40px;font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--c);z-index:2}
.side .pamt{position:absolute;left:0;right:0;top:40%;text-align:center;font-family:var(--shout);font-style:italic;font-weight:800;font-size:76px;line-height:1;color:var(--paper);-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:5px 5px 0 #000;z-index:3}
.side .tagp{position:absolute;bottom:-20px;display:flex;gap:12px;align-items:baseline;background:var(--paper);color:#0B0B0B;padding:7px 14px;box-shadow:4px 4px 0 #000;z-index:4}
.side.g .tagp{left:10px}.side.r .tagp{right:44px}
.side .tagp b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:20px;text-transform:uppercase}.side .tagp i{font-style:italic;font-family:var(--shout);font-weight:800;font-size:22px}
.side.win{transform:translateY(-4px)}
.side.lose{opacity:.55}
.side.bump{animation:bump .35s cubic-bezier(.3,1.8,.5,1)}
@keyframes bump{40%{transform:scale(1.03)}}
.vsb{position:relative;align-self:center;display:grid;place-items:center;z-index:5;margin:0 -60px}
.vsb svg{width:150px;height:118px;overflow:visible;animation:beat 2.8s ease-in-out infinite}
.vsb b{position:absolute;font-family:var(--shout);font-style:italic;font-weight:800;font-size:40px;color:#0B0B0B;transform:rotate(-8deg)}
@keyframes beat{0%,10%,100%{transform:scale(1)}5%{transform:scale(1.08)}}
.mfoot{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:46px}
.coin{position:absolute;width:36px;aspect-ratio:73/85;clip-path:var(--clip-hex);background:var(--c,#FFA800);display:grid;place-items:center;z-index:5;pointer-events:none}
.coin span{width:78%;aspect-ratio:73/85;clip-path:var(--clip-hex);background:#141414;display:grid;place-items:center;font-family:var(--data);font-weight:800;font-size:12px;color:var(--c,#FFA800)}
.coin.you{--c:var(--yellow);width:48px}
.payout{position:absolute;left:50%;bottom:-70px;transform:translateX(-50%) scale(0) rotate(-6deg);width:300px;height:160px;display:grid;place-items:center;text-align:center;color:#0B0B0B;transition:transform .5s cubic-bezier(.2,1.6,.4,1);z-index:6;pointer-events:none}
.payout.on{transform:translateX(-50%) scale(1) rotate(-6deg)}
.payout svg{position:absolute;inset:-14px -10px;width:calc(100% + 20px);height:calc(100% + 28px);overflow:visible}
.payout div{position:relative}.payout small{display:block;font-family:var(--data);font-weight:800;font-size:11px;letter-spacing:.12em}.payout b{display:block;font-family:var(--shout);font-style:italic;font-weight:800;font-size:60px;line-height:.9}

/* ── live feed, their landing feed ── */
.feed{margin-top:34px}
.lfeed.shape{position:relative;display:flex!important;align-items:center;height:72px;width:100%}
.lfeed>svg .sh{transform:translate(5px,5px)}
.lhead{position:relative;z-index:2;display:flex;align-items:center;gap:12px;height:100%;padding:0 18px 0 30px}
.boltb{display:block;width:52px;height:64px;flex:none;margin:-8px 0 -6px}
.lhead b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:20px;color:var(--yellow);text-transform:uppercase;white-space:nowrap}
.lclip{flex:1;overflow:hidden;margin-right:34px;-webkit-mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.lfeed .track{display:flex;width:max-content;animation:marq 42s linear infinite}
.lfeed:hover .track{animation-play-state:paused}
.li{display:flex;align-items:baseline;gap:10px;padding-right:22px;white-space:nowrap;font-family:var(--shout);font-style:italic;font-weight:800;font-size:21px;text-transform:uppercase}
.li .t{font-style:normal;color:var(--orange)}.li .u{font-style:normal;color:var(--yes)}.li .d{font-style:normal;color:var(--no)}
.li .ago{color:#8a857c}.li i{font-style:normal;color:#5b5750}
@keyframes marq{to{transform:translateX(-50%)}}

/* ── 01 receipts: the totals + one card per day, as cade.market's recap ── */
.subrow{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:4px}
.subrow .lede{margin:0}
#receipts .note{margin-top:34px}

/* ── 02 explainer ── */
.ex{display:grid;grid-template-columns:300px 1fr;gap:40px;margin-top:56px;align-items:start}
.rail{display:flex;flex-direction:column;gap:12px}
.rail button{display:flex;align-items:center;gap:14px;text-align:left;padding:14px 16px;background:#0f0e0d;border:3px solid #2c2926;box-shadow:4px 4px 0 #000;font-family:var(--shout);font-style:italic;font-weight:800;font-size:21px;text-transform:uppercase;color:var(--meta);transition:all .2s;cursor:pointer}
.rail button i{display:grid;place-items:center;width:30px;height:30px;flex:none;background:var(--paper);color:#0B0B0B;font-family:var(--shout);font-style:italic;font-weight:800;font-size:16px;box-shadow:2px 2px 0 #000}
.rail button:hover{color:var(--paper)}
.rail button[aria-selected=true]{color:var(--paper);border-color:var(--orange);background:#1a1816}
.rail button[aria-selected=true] i{background:var(--orange);color:#0B0B0B}
.ptop{display:flex;align-items:center;gap:18px}.ptop .prog{flex:1}
.pp{flex:none;border:0;padding:0;background:none;cursor:pointer;filter:drop-shadow(4px 4px 0 #000)}
.pp>span{display:flex;align-items:center;gap:8px;height:38px;padding:0 20px 0 16px;background:var(--yellow);clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
.pp svg{width:14px;height:14px}.pp .i-play{display:none}.pp[aria-pressed=true] .i-play{display:block}.pp[aria-pressed=true] .i-pause{display:none}
.pp em{font-style:normal;font-family:var(--data);font-weight:800;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:#0B0B0B}
.pp:hover>span{background:var(--paper)}.pp:focus-visible{outline:3px solid #FFA800;outline-offset:4px}
.stage{position:relative;isolation:isolate;padding:40px 48px 34px;color:var(--paper)}
.stage .sf{position:absolute;inset:0;z-index:-1;filter:drop-shadow(8px 8px 0 #000)}
.stage .sf i{position:absolute;inset:0;background:#161514;clip-path:var(--clip-quiet)}
.stage .sf::before{content:"";position:absolute;inset:-2px;background:#2A2724;clip-path:var(--clip-quiet)}
.prog{display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.prog i{height:5px;background:#2A2724;position:relative;overflow:hidden}.prog i b{position:absolute;inset:0;background:var(--orange);transform-origin:left;transform:scaleX(0)}
.prog i.done b{transform:scaleX(1)}.prog i.on b{animation:fillp 6s linear forwards}.stage.paused .prog i.on b{animation-play-state:paused}
@keyframes fillp{to{transform:scaleX(1)}}
.sc-k{font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--orange);margin-top:24px}
.sc-t{font-family:var(--shout);font-style:italic;font-weight:800;font-size:52px;line-height:.92;text-transform:uppercase;margin:6px 0 0}
.sc-p{font-family:var(--read);font-size:18px;line-height:1.45;max-width:560px;margin:12px 0 0;color:#d9d3c3}
.board{position:relative;display:grid;grid-template-columns:1fr 150px 1fr;align-items:center;gap:20px;margin-top:26px}
.bpot{position:relative;transform:skewX(-6deg);background:#0E0D0C;color:var(--paper);border:3px solid var(--c);padding:44px 20px 18px;overflow:hidden;box-shadow:6px 6px 0 #000;transition:all .5s var(--ease)}
.bpot::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;background:repeating-linear-gradient(115deg,var(--c) 0 14px,var(--cd) 14px 24px)}
.bpot>*{transform:skewX(6deg)}
.bpot .t{font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.14em;color:var(--c)}
.bpot .v{font-family:var(--shout);font-style:italic;font-weight:800;font-size:84px;line-height:.9;margin-top:6px;color:var(--paper);-webkit-text-stroke:2px #000;paint-order:stroke fill;text-shadow:4px 4px 0 #000}
.bpot .bar{height:14px;background:#2a2826;margin-top:12px}.bpot .bar i{display:block;height:100%;width:var(--w);background:repeating-linear-gradient(90deg,var(--c) 0 10px,var(--cd) 10px 12px);transition:width .8s var(--ease)}
.bpot.g{--c:var(--yes);--cd:#6F9A36}.bpot.r{--c:var(--no);--cd:#C21E37}
.mid{display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.mid .rclock span{font-size:24px}
.mid .lab{font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.12em;color:var(--meta)}
.eq{display:none;align-items:center;justify-content:center;gap:22px;margin-top:26px;font-family:var(--shout);font-style:italic;font-weight:800}
.eq .fr{display:flex;flex-direction:column;align-items:center;font-size:48px;line-height:.95}.eq .fr hr{width:70px;border:0;border-top:3px solid var(--paper);margin:4px 0}
.eq .op{font-size:44px;color:var(--orange)}
.eq .res{background:var(--orange);padding:10px 22px;box-shadow:5px 5px 0 #000;outline:2px solid #0B0B0B;font-size:46px;color:#141414}
.stage[data-s="4"] .eq .res{animation:pop .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop{from{transform:scale(.6)}}
.eq small{display:block;font-family:var(--data);font-style:normal;font-weight:700;font-size:10px;letter-spacing:.12em;color:var(--meta)}
.stage .ssb{width:100%;margin-top:26px;--ssb-h:36px;--ssb-fs:14px;--ssb-drop:4px}
.stage .sfoot{font-family:var(--data);font-size:11.5px;color:var(--meta);margin-top:14px}
.ycoin{position:absolute;z-index:4;transition:all .9s cubic-bezier(.5,-0.4,.3,1.4)}
.stage[data-s="1"] .ycoin{left:calc(50% - 22px);top:-10px}
.stage:not([data-s="1"]) .ycoin{left:14%;top:120px;transform:scale(.8)}
.stage[data-s="3"] .bpot.r{opacity:.35;transform:skewX(-6deg) translateX(-20px) scale(.96)}
.stage[data-s="3"] .bpot.g,.stage[data-s="4"] .bpot.g{box-shadow:6px 6px 0 #000,0 0 0 4px var(--yellow)}
.stage[data-s="4"] .board{display:none}.stage[data-s="4"] .eq{display:flex}
.stage[data-s="2"] .mid .rclock{animation:tick 1s steps(1) infinite}
@keyframes tick{50%{transform:scale(1.06)}}

/* ── 03 demo: the violet dotted band, one dark round card ── */
.band{margin-top:150px;padding:110px 0 100px;isolation:isolate}
.bandbg{position:absolute;inset:0;z-index:-1}
.bandbg svg{display:block;width:100%;height:100%;overflow:visible}
.band .h2 em{color:var(--yellow)}
.band .lede{color:#D9CFEF}
.band .bignum{-webkit-text-stroke-color:rgba(217,200,255,.14);color:rgba(217,200,255,.035)}
.demo{position:relative;margin-top:62px;filter:drop-shadow(12px 12px 0 #000)}
.dpill{position:absolute;top:-17px;left:34px;z-index:2;background:var(--yellow);color:#0B0B0B;font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:9px 22px 9px 20px;clip-path:polygon(4% 0,100% 0,96% 50%,100% 100%,4% 100%,0 50%)}
.dcard{background:#161514;clip-path:var(--clip-panel);padding:44px 40px 38px}
.dtop{display:grid;grid-template-columns:auto 1fr auto auto;gap:22px;align-items:center}
.dtop .med{width:58px;aspect-ratio:1;position:relative;filter:drop-shadow(3px 3px 0 #000)}
.dtop .med i,.dtop .med span{position:absolute;clip-path:polygon(29.3% 0,70.7% 0,100% 29.3%,100% 70.7%,70.7% 100%,29.3% 100%,0 70.7%,0 29.3%)}
.dtop .med .med-o{inset:0;background:#0B0B0B}.dtop .med .med-r{inset:5%;background:var(--violet)}
.dtop .med span{inset:12%;background:#141414;display:grid;place-items:center;font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;color:var(--paper)}
.dq{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:34px;line-height:.95;text-transform:uppercase}
.dq em{font-style:inherit;color:var(--orange)}
.dpool{text-align:right}
.dpool small,.dpx small{display:block;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.dpool b{display:block;margin-top:4px;font-family:var(--data);font-weight:800;font-size:24px;color:var(--paper);font-variant-numeric:tabular-nums}
.dtop .rclock span{font-size:22px;padding:10px 24px}
.dmid{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;margin-top:26px;padding-top:34px;padding-bottom:4px;border-top:1px solid #2A2724}
.dpx{margin:0}.dpx b{display:block;margin-top:4px;font-family:var(--data);font-weight:800;font-size:28px;line-height:1;font-variant-numeric:tabular-nums;transition:color .3s}
.dmid .dbs{width:calc(100% - 8px);--bs-h:60px;--bs-fs:30px;--bs-ws:17px;--bs-vs:68px;--bs-wh:184px}
/* a whale moves the pays: the buttons flash while their numbers roll */
.side-b.flash{animation:sbflash .7s ease-out}.side-b.flash em{display:inline-block;animation:sbpunch .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes sbflash{0%,40%{filter:brightness(1.35)}20%{filter:brightness(1)}100%{filter:none}}
@keyframes sbpunch{0%{transform:none}25%{transform:scale(1.35)}100%{transform:none}}
@media (prefers-reduced-motion:reduce){.side-b.flash,.side-b.flash em{animation:none}}
.dbody{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:30px;margin-top:28px;align-items:stretch}
/* the demo chart is the client's MarketLiveChart (/lib/live-chart.js + .css), the star of the card:
   it takes the column's full height, so the card never has dead space under it */
.chart{position:relative;min-width:0;display:flex;flex-direction:column}
.chart .dlc{flex:1 1 auto;height:auto;min-height:420px}
.dpick{display:flex;flex-direction:column}.dpick #amtHint{margin-bottom:18px}.dpick .sides{margin-top:auto}.dpick .dfoot{margin-top:16px}
.dscrub{margin:10px 0 0 14px;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
@media (hover:none){.dscrub{visibility:hidden}}
.arow{display:flex;justify-content:space-between;align-items:baseline}
.arow b{color:var(--paper)}
.ain{display:flex;align-items:center;gap:6px;margin-top:10px;background:#FFFFFF;border:3px solid #000;box-shadow:5px 5px 0 #000;padding:0 16px;height:62px;font-family:var(--data);font-weight:800;font-size:30px;color:#0B0B0B}
.ain input{flex:1;min-width:0;border:0;outline:0;background:transparent;font:inherit;color:inherit}
.ain:focus-within{outline:3px solid #FFA800;outline-offset:3px}
.ain input[aria-invalid=true]{color:var(--no)}
.chips{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:14px}
.chips button{height:40px;background:#0f0e0d;border:2px solid #3A3531;color:var(--paper);font-family:var(--data);font-weight:800;font-size:14px;cursor:pointer;transition:all .15s}
.chips button:hover{border-color:var(--paper)}
.chips button[aria-pressed=true]{background:var(--yellow);border-color:#000;color:#0B0B0B;box-shadow:3px 3px 0 #000}
.chips button:focus-visible,.side-b:focus-visible,.rail button:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
#amtHint{margin:10px 0 0}
.sides{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.side-b{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;height:96px;border:0;cursor:pointer;color:#0B0B0B;background:var(--c);clip-path:polygon(5% 0,100% 0,95% 100%,0 100%);transition:transform .15s var(--ease),filter .15s}
.sides{filter:drop-shadow(5px 5px 0 #000)}
.side-b.yes{--c:var(--yes)}.side-b.no{--c:var(--no)}
.side-b:hover{transform:translate(-2px,-2px)}.side-b:active{transform:translate(2px,2px)}
.side-b b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:32px;line-height:.9;text-transform:uppercase}
.side-b b::after{content:" \25B2";font-size:.6em;vertical-align:.25em}.side-b.no b::after{content:" \25BC"}
.side-b span{font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase}
.side-b em{font-style:normal;font-weight:800;font-size:15px}
.side-b[aria-disabled=true]{filter:grayscale(1) brightness(.6);cursor:not-allowed}
.dpay{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:18px}
.dpay div{background:#0f0e0d;border:2px solid #2A2724;padding:10px 14px}
.dpay small{display:block;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.dpay b{display:block;margin-top:4px;font-family:var(--data);font-weight:800;font-size:22px;color:var(--paper);font-variant-numeric:tabular-nums}
.dpay div:first-child b{color:var(--yes)}.dpay div:last-child b{color:var(--no)}
.dlive{display:flex;align-items:center;gap:18px;margin-top:26px;padding-top:18px;border-top:1px solid #2A2724;overflow:hidden}
.dl-h{display:flex;align-items:center;gap:8px;flex:none;font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--yellow)}
.dl-h i{width:9px;height:9px;border-radius:50%;background:var(--no);animation:blink 1.2s steps(1) infinite}
.dl-track{display:flex;gap:26px;white-space:nowrap;-webkit-mask:linear-gradient(90deg,#000 85%,transparent);mask:linear-gradient(90deg,#000 85%,transparent)}
.dl-track span{font-family:var(--data);font-weight:700;font-size:13px;color:var(--meta);animation:dlin .45s cubic-bezier(.2,1.4,.4,1)}
.dl-track b{color:var(--paper);font-weight:800}.dl-track em{font-style:normal;font-weight:800}.dl-track .u{color:var(--yes)}.dl-track .d{color:var(--no)}
@keyframes dlin{from{opacity:0;transform:translateX(-24px)}}
.dfoot{position:relative}.dfoot .dpay{margin-top:0}
/* the demo call sits over the payout pair, same footprint: the card keeps one height in every state */
.confirm{position:absolute;left:0;right:0;bottom:0;min-height:100%;z-index:2;display:flex;flex-wrap:wrap;justify-content:space-between;align-content:center;align-items:baseline;gap:4px 12px;padding:8px 14px;background:var(--paper);color:#0B0B0B;box-shadow:5px 5px 0 #000;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s .3s}
.confirm.on{opacity:1;visibility:visible;transform:none;transition:opacity .3s var(--ease),transform .3s var(--ease),visibility 0s}
.confirm .label{color:#5B5548}.confirm b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:20px;line-height:1;text-transform:uppercase;white-space:nowrap}
.dnote{margin-top:34px;color:#B8AED0}

/* ── 04 compare: one accent, the Cade column raised ── */
.ctable{position:relative;margin-top:56px;isolation:isolate}
.ctr{display:grid;grid-template-columns:220px repeat(3,minmax(0,1fr))}
.ctr>span{position:relative;z-index:1;padding:20px 24px;border-top:1px solid #2A2724;font-family:var(--read);font-size:17px;line-height:1.35;color:var(--meta)}
.ctr>span[role=rowheader]{padding-left:0;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta);align-self:stretch;display:flex;align-items:center}
.ctr>span.us{color:var(--paper);font-weight:600;border-top-color:#3A3531}
.ctr.ch>span{border-top:0;padding-top:34px;padding-bottom:22px}
.ctr.ch b{display:block;font-family:var(--call);font-style:oblique;font-weight:500;font-size:30px;line-height:1;text-transform:uppercase;color:var(--paper)}
.ctr.ch small{display:block;margin-top:8px;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--meta)}
.ctr.ch .us b{color:var(--orange)}
.ctag{position:absolute;top:-17px;left:22px;font-style:normal;background:var(--orange);color:#0B0B0B;font-family:var(--shout);font-style:italic;font-weight:800;font-size:20px;text-transform:uppercase;padding:6px 24px 7px 22px;clip-path:polygon(6% 0,100% 0,94% 50%,100% 100%,6% 100%,0 50%);filter:none}
.cus{position:absolute;z-index:0;top:0;bottom:0;left:calc(220px + (100% - 220px)*2/3);width:calc((100% - 220px)/3);background:#1B1917;outline:3px solid var(--orange);box-shadow:10px 10px 0 #000}
.ctable.in .ctr{animation:rowin .5s var(--ease) backwards}
.ctable.in .ctr:nth-child(2){animation-delay:.06s}.ctable.in .ctr:nth-child(3){animation-delay:.12s}.ctable.in .ctr:nth-child(4){animation-delay:.18s}.ctable.in .ctr:nth-child(5){animation-delay:.24s}.ctable.in .ctr:nth-child(6){animation-delay:.3s}
@keyframes rowin{from{opacity:0;transform:translateX(-36px)}}
#compare .note{margin-top:30px}

/* ── 06 beta signup: one orange panel (--clip-quiet, hard black drop, the orange
      halftone), copy + form left, the referral orbit right ── */
.join{padding-top:150px}
.join .w{position:relative}
.beta{position:relative;z-index:1;filter:drop-shadow(10px 10px 0 #000)}
.bpanel{position:relative;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:48px;align-items:center;padding:64px 64px 64px 60px;background:var(--orange);clip-path:var(--clip-quiet);color:#0B0B0B;overflow:hidden}
.bpanel::before{content:"";position:absolute;inset:0;background:radial-gradient(circle,#FF7A00 0 1.6px,transparent 2.2px) 0 0/15px 15px;opacity:.55;pointer-events:none}
.bcopy,.orbit{position:relative}
.bkick{display:inline-block;background:#0B0B0B;color:var(--paper);font-family:var(--shout);font-style:italic;font-weight:800;font-size:16px;letter-spacing:.1em;text-transform:uppercase;padding:7px 14px 6px;box-shadow:3px 3px 0 rgba(0,0,0,.35)}
.bh{margin:22px 0 0;font-size:clamp(38px,4.6vw,64px);font-weight:900;line-height:.9;color:#0B0B0B;max-width:none}
.bbody{margin:20px 0 0;max-width:500px;font-family:var(--read);font-size:19px;line-height:1.45;color:#141414}
.bform{margin-top:30px}
.brow{display:flex;gap:16px;align-items:center}
.bfield{box-sizing:border-box;flex:1;min-width:0;height:58px;background:#0B0B0B;box-shadow:4px 4px 0 #000;padding:2px}
.bfield input{display:block;box-sizing:border-box;width:100%;height:54px;border:0;outline:0;padding:0 18px;background:var(--paper);color:#0B0B0B;font-family:var(--data);font-weight:600;font-size:16px}
.bfield input::placeholder{color:#6F6F6F}
.bfield:focus-within{outline:3px solid #0B0B0B;outline-offset:3px}
.bfield input[aria-invalid=true]{color:var(--no-dark)}
.bsub{flex:none;justify-content:center;height:58px;min-width:0;padding:0 34px 0 30px;font-size:24px;color:var(--paper);background:none;border:0;cursor:pointer}
.bsub span{font-family:var(--read);font-style:normal}
.bsub[aria-busy=true]{opacity:.7;cursor:progress}
.join .msg{min-height:20px;margin:12px 0 0;font-family:var(--data);font-size:12.5px;color:#141414}
.join .msg.err{color:var(--no-dark);font-weight:700}
.bdone{margin-top:30px;background:#0B0B0B;color:var(--paper);padding:22px 24px;box-shadow:5px 5px 0 rgba(0,0,0,.35);max-width:520px;outline:0}
.bdone b{display:block;font-family:var(--shout);font-style:italic;font-weight:900;font-size:36px;line-height:1;text-transform:uppercase;color:var(--yellow)}
.bdone p{margin:10px 0 0;font-family:var(--read);font-size:16px;line-height:1.45}
.bdone .bnote{font-family:var(--data);font-size:11.5px;letter-spacing:.06em;color:var(--meta)}

/* the orbit: friends circle YOU once every 40s; every 0.7s one sends a fee coin in */
.orbit{width:100%;max-width:440px;aspect-ratio:1;margin:0 auto;container-type:inline-size}
.oring{position:absolute;inset:0;width:100%;height:100%}
.ospin{position:absolute;inset:0;animation:ospin 40s linear infinite}
.fr{position:absolute;left:50%;top:50%;width:21cqw;height:21cqw;margin:-10.5cqw 0 0 -10.5cqw;transform:rotate(var(--a)) translate(38cqw) rotate(calc(-1 * var(--a)))}
.fr{filter:drop-shadow(3px 3px 0 #0B0B0B)}
.fr i{position:relative;isolation:isolate;display:grid;place-items:center;width:100%;height:100%;box-sizing:border-box;font-family:var(--data);font-style:normal;font-weight:800;font-size:clamp(11px,3.6cqw,15px);color:#0B0B0B;animation:ospin 40s linear infinite reverse}
.fr i::before,.fr i::after{content:"";position:absolute;z-index:-1;clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%)}
.fr i::before{inset:0;background:#0B0B0B}
.fr i::after{inset:2.5px;background:var(--paper);transition:background .2s}
.fr.send i::after{background:var(--yellow)}
.oyou{position:absolute;left:50%;top:50%;width:38cqw;height:38cqw;margin:-19cqw 0 0 -19cqw;filter:drop-shadow(6px 6px 0 rgba(0,0,0,.35));display:grid;place-content:center;text-align:center;z-index:3;isolation:isolate}
.oyou::before,.oyou::after{content:"";position:absolute;z-index:-1;clip-path:polygon(50% 0,93.3% 25%,93.3% 75%,50% 100%,6.7% 75%,6.7% 25%)}
.oyou::before{inset:0;background:var(--yellow);opacity:0;transition:opacity .2s}
.oyou::after{inset:0;background:#0B0B0B}
.oyou.pulse::before{animation:oglow .45s ease-out}
@keyframes oglow{0%{opacity:0;inset:0}40%{opacity:1;inset:-7px}100%{opacity:0;inset:-3px}}
.oyou b{font-family:var(--shout);font-style:italic;font-weight:900;font-size:13cqw;line-height:.9;text-transform:uppercase;color:var(--yellow)}
.oyou small{margin-top:4px;font-family:var(--data);font-weight:700;font-size:clamp(10px,3cqw,13px);letter-spacing:.08em;text-transform:uppercase;color:var(--paper)}
.oyou.pulse{animation:opulse .45s cubic-bezier(.2,.8,.2,1)}
.fee{position:absolute;z-index:2;width:7.5cqw;left:0;top:0;margin:-4.3cqw 0 0 -3.75cqw;pointer-events:none}
.fee span{font-size:clamp(8px,2.6cqw,11px)}
@keyframes ospin{to{transform:rotate(360deg)}}
@keyframes opulse{0%{transform:scale(1)}40%{transform:scale(1.08)}100%{transform:scale(1)}}
.ospin .fr{will-change:transform}

/* ── floating CTA ── */
.float{position:fixed;left:50%;bottom:24px;z-index:60;opacity:0;transform:translate(-50%,20px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.float.on{opacity:1;transform:translate(-50%,0);pointer-events:auto}

/* ── responsive ── */
@media (max-width:1180px){
 .subrow{flex-direction:column;align-items:flex-start}
 .hgrid{grid-template-columns:minmax(0,1fr);gap:40px}.hero .machine{max-width:600px}
 .hart{width:620px;top:300px;opacity:.5}
 .shead{flex-direction:column;align-items:flex-start}
 .dbody{grid-template-columns:minmax(0,1fr)}
 .chart .dlc{flex:none;height:clamp(320px,52vw,460px);min-height:0}
 .bpanel{grid-template-columns:minmax(0,1fr);gap:40px}
}
@media (max-width:760px){
 .w{padding:0 18px}
 .plates{grid-template-columns:1fr;margin-top:86px}.plates .plate.y{display:none}
 .hart{opacity:.25}
 .hero h1{font-size:clamp(64px,19vw,96px)}
 .ctaplate{max-width:100%;height:auto!important;aspect-ratio:var(--w)/var(--h)}
 .kicker{width:200px;height:35px}
 .hmono{font-size:12px;line-height:1.7}
 .float .ctaplate{width:170px}
 .machine{padding:56px 18px 34px}.mq{font-size:25px}.duel{height:210px;grid-template-columns:1fr 24px 1fr}.side .pamt{font-size:46px}.vsb svg{width:100px;height:80px}.vsb b{font-size:28px}.side .tagp{padding:5px 9px}.side .tagp b{font-size:15px}.side .tagp i{font-size:16px}.payout{width:230px;height:124px;bottom:-56px}.payout b{font-size:44px}
 .h2{white-space:normal}.bignum{font-size:170px;top:-60px}
 .ex{grid-template-columns:1fr}.rail{flex-direction:row;overflow-x:auto;padding-bottom:8px}.rail button{flex:none;font-size:17px}
 .stage{padding:32px 20px 26px}.sc-t{font-size:38px}.board{grid-template-columns:1fr;gap:16px}.bpot .v{font-size:56px}
 .dcard{padding:40px 18px 28px;clip-path:var(--clip-quiet)}.dq{text-align:left;grid-column:1 / -1}.dtop{grid-template-columns:auto minmax(0,1fr)}.dpool{text-align:left}.dq{font-size:26px}.dmid{grid-template-columns:1fr}
 .dmid .dbs{--bs-h:50px;--bs-fs:19px;--bs-ws:13px;--bs-vs:50px;--bs-wh:138px}.dmid .dbs .bs-p.l{left:28px}.dmid .dbs .bs-p.r{right:18px}
 .chart{margin:0 -12px}.chart .dlc{height:330px}.dscrub{margin-left:26px}
 .ctr{grid-template-columns:1fr}.cus{display:none}.ctr.ch{display:none}
 .ctr>span[role=cell]{padding:6px 0;border:0}.ctr>span[role=cell]::before{content:attr(data-h) " · ";font-family:var(--data);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta)}
 .ctr>span[role=rowheader]{padding-top:22px;color:var(--yellow)}
 .ctr>span.us{color:var(--paper)}
 .join{padding-top:110px}
 .bpanel{padding:44px 20px 40px}
 .bh{font-size:clamp(36px,10.5vw,52px)}.bh .bk{display:none}.bbody{font-size:17px}
 .brow{flex-direction:column;align-items:stretch}.bsub{width:100%}
 .orbit{max-width:320px}
 .float{bottom:14px}
}
@media (prefers-reduced-motion:reduce){.side .pot .wv,.side .fill::after,.lfeed .track,.ospin,.fr i{animation:none}}

/* capture / ?static: everything shown, nothing floating */
html.static .reveal{opacity:1;transform:none}
html.static .float{display:none}
@media (max-width:760px){.hero .cats{gap:10px}.chex{width:38px}.cat b{font-size:16px;padding:7px 12px 8px 16px}}

/* ── brief motion pass (2026-10-01): gap-fills only, nothing restyled ── */
/* the header: sticky, smoked glass once the page moves (same look at the top) */
#hnav{position:sticky;top:0;z-index:70}
.hnav .cnl-d{transition:background-color .25s}
.hnav.stuck .cnl-d{background:rgba(11,11,11,.72);-webkit-backdrop-filter:blur(14px) saturate(1.2);backdrop-filter:blur(14px) saturate(1.2)}
.hnav.stuck .cnl-m{-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.hart,.hero .machine{will-change:transform}
/* hero machine: the next market slides in, the house "Stamp · Won" slams, payouts pop */
.mmk.swap{animation:mkin .5s cubic-bezier(.2,1.4,.4,1)}
@keyframes mkin{from{opacity:0;transform:translateX(30px)}}
.mstamp{position:absolute;z-index:7;left:50%;top:92px;width:230px;height:auto;overflow:visible;pointer-events:none;opacity:0;transform:translateX(-50%) scale(2.2) rotate(-14deg)}
.mstamp.on{opacity:1;transform:translateX(-50%) scale(1) rotate(0);transition:transform .38s cubic-bezier(.2,1.5,.4,1),opacity .12s}
.mpops{position:absolute;z-index:6;left:40px;top:150px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
.mpop{text-transform:uppercase;display:flex;gap:8px;align-items:baseline;width:max-content;background:var(--paper);color:#0B0B0B;padding:5px 10px 4px;box-shadow:3px 3px 0 #000;font-family:var(--data);font-weight:800;font-size:13px;letter-spacing:.04em;animation:mpop .42s cubic-bezier(.2,1.6,.4,1) backwards}
.mpop b{font-weight:800;color:#6F9A36}.mpop.you{background:var(--yellow)}.mpop.you b{color:#0B0B0B}
@keyframes mpop{from{opacity:0;transform:translateY(14px) scale(.6)}}
/* explainer: people counts, the struck house line, chips, gains, the stamp */
.bpot .ppl{margin-top:6px;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta)}
.nohouse{display:none;position:relative;margin-top:4px;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:#d9d3c3;text-decoration:none;white-space:nowrap}
.stage[data-s="1"] .nohouse{display:block;font-size:10px;letter-spacing:.04em}
.nohouse::after{content:"";position:absolute;left:-4px;right:-4px;top:50%;height:3px;background:var(--no);transform:scaleX(0);transform-origin:left;transition:transform .45s cubic-bezier(.2,1.2,.4,1)}
.nohouse.struck{color:var(--meta)}.nohouse.struck::after{transform:scaleX(1)}
.xfx{position:absolute;inset:0;z-index:5;pointer-events:none}
.xfx .xc{left:0;top:0;width:30px}
.xfx .xc span{font-size:9px}
.xgain{position:absolute;z-index:6;transform:translateX(-50%);background:var(--yellow);color:#0B0B0B;padding:3px 7px 2px;box-shadow:3px 3px 0 #000;font-family:var(--data);font-weight:800;font-size:12px;white-space:nowrap;animation:xgain .5s cubic-bezier(.2,1.6,.4,1) backwards}
@keyframes xgain{from{opacity:0;transform:translate(-50%,16px) scale(.5)}}
.xstamp{position:absolute;z-index:7;left:50%;top:50%;width:220px;height:123px;overflow:visible;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(2.2) rotate(-12deg)}
.xstamp.on{opacity:1;transform:translate(-50%,-50%) scale(1);transition:transform .38s cubic-bezier(.2,1.5,.4,1),opacity .12s}
/* 04 the equation builds token by token */
/* the orbit's .fr (absolute, rotated) was also catching the equation's fractions */
.eq .fr{position:static;width:auto;height:auto;margin:0;transform:none}
.stage[data-s="4"] .eq>*{animation:tok .42s cubic-bezier(.2,1.6,.4,1) backwards}
.stage[data-s="4"] .eq>:nth-child(2){animation-delay:.45s}.stage[data-s="4"] .eq>:nth-child(3){animation-delay:.9s}.stage[data-s="4"] .eq>:nth-child(4){animation-delay:1.35s}.stage[data-s="4"] .eq>:nth-child(5){animation-delay:1.8s}
@keyframes tok{from{opacity:0;transform:translateY(18px) scale(.6)}}
/* demo: whale entries and the demo nudge */
.dl-track span.wh b{color:var(--yellow)}
.nudge{flex-basis:100%;font-family:var(--data);font-weight:800;font-size:11px;letter-spacing:.04em;white-space:nowrap;text-transform:uppercase;color:#0B0B0B;text-decoration:none}
.nudge u{text-decoration:none;background:#0B0B0B;color:var(--yellow);padding:2px 6px}
.nudge:hover u,.nudge:focus-visible u{background:var(--orange);color:#0B0B0B}
/* compare: the Cade cells pop in, the other columns are struck */
.ctable.in .ctr>span.us[role=cell]{animation:cpop .55s cubic-bezier(.2,1.6,.4,1) backwards}
.ctable.in .ctr:nth-child(2)>span.us{animation-delay:.3s}.ctable.in .ctr:nth-child(3)>span.us{animation-delay:.38s}.ctable.in .ctr:nth-child(4)>span.us{animation-delay:.46s}.ctable.in .ctr:nth-child(5)>span.us{animation-delay:.54s}.ctable.in .ctr:nth-child(6)>span.us{animation-delay:.62s}
@keyframes cpop{from{opacity:0;transform:scale(.7) rotate(-4deg)}}
.ctr>span[role=cell]:not(.us){text-decoration:line-through;text-decoration-thickness:2px;text-decoration-color:rgba(234,42,70,.75)}
.ctr>span[role=cell]::before{display:inline-block;text-decoration:none}
@media (max-width:760px){
 .mstamp{width:160px;top:84px}.mpops{left:22px;top:172px}.mpop:nth-child(n+2){display:none}.mpop{font-size:11px;padding:4px 8px 3px}
 .xstamp{width:200px;height:112px}
 .nohouse{font-size:10px}
 .eq{flex-wrap:wrap;gap:10px 14px}.eq .fr{font-size:38px}.eq .op{font-size:34px}.eq .res{font-size:36px;padding:8px 16px}
}
@media (prefers-reduced-motion:reduce){.hart,.hero .machine{transform:none!important}.mstamp.on,.xstamp.on{transition:none}}
.cta.commit.or .fc{fill:var(--orange)}

/* the rail, per the brief: the live chapter opens with its line, a 6s clock and a fill bar (house plate, no radius) */
.rail button{position:relative;display:grid;grid-template-columns:30px minmax(0,1fr) auto;align-items:center;column-gap:14px;overflow:hidden}
.rail button .rs{font-family:var(--data);font-style:normal;font-weight:800;font-size:12px;letter-spacing:.06em;color:var(--orange);opacity:0;transition:opacity .2s;font-variant-numeric:tabular-nums}
.rail button .rd{grid-column:2/4;max-height:0;opacity:0;overflow:hidden;font-family:var(--read);font-style:normal;font-weight:400;font-size:15px;line-height:1.4;text-transform:none;color:#cfc8b6;transition:max-height .35s var(--ease,ease),opacity .3s,margin .3s}
.rail button .rbar{position:absolute;left:0;top:0;bottom:0;width:5px;background:rgba(255,255,255,.08);opacity:0}
.rail button .rbar b{display:block;width:100%;height:0;background:var(--orange)}
.rail button[aria-selected=true] .rs,.rail button[aria-selected=true] .rbar{opacity:1}
.rail button[aria-selected=true] .rd{max-height:7em;opacity:1;margin-top:8px}
.rail button[aria-selected=true] .rbar b{animation:rfill 6s linear forwards}
.ex.paused .rail button .rbar b,.rail button .rbar b{animation-play-state:running}
.ex.paused .rail button[aria-selected=true] .rbar b{animation-play-state:paused}
@keyframes rfill{to{height:100%}}
@media (max-width:760px){.rail button{grid-template-columns:auto auto auto}.rail button .rd{display:none}.rail button .rbar{top:auto;left:0;right:0;width:auto;height:4px}.rail button .rbar b{height:100%;width:0}.rail button[aria-selected=true] .rbar b{animation-name:rfillx}}
@keyframes rfillx{to{width:100%}}
@media (prefers-reduced-motion:reduce){.rail button[aria-selected=true] .rbar b{animation:none;height:100%}}
.ctag{display:flex;align-items:center;padding:5px 26px 6px 24px;top:-22px}.ctag img{display:block;height:32px;width:auto}
.duel .side .who{display:none}

/* comparison on a phone: a VS toggle picks the rival; each question is one row, theirs struck on the left, ours on an orange plate on the right */
.cvs{display:none}
@media (max-width:760px){
 .cvs{display:flex;align-items:center;gap:8px;margin-top:36px}
 .cvs-k{font-family:var(--data);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta);margin-right:4px}
 .cvs button{flex:1;height:44px;background:#0f0e0d;border:2px solid #2c2926;box-shadow:3px 3px 0 #000;color:var(--meta);font-family:var(--shout);font-style:italic;font-weight:800;font-size:18px;text-transform:uppercase;cursor:pointer;clip-path:polygon(6% 0,100% 0,94% 100%,0 100%)}
 .cvs button[aria-pressed=true]{background:var(--paper);color:#0B0B0B;border-color:#000}
 .cvs button:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
 .ctable{margin-top:18px}
 .ctr{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);column-gap:12px;align-items:center;padding:14px 0 16px;border-top:1px solid #2A2724}
 .ctr>span{border:0!important}
 .ctr>span[role=rowheader]{grid-column:1/-1;padding:0 0 10px;color:var(--yellow);font-size:11px}
 .ctr>span[role=cell]{padding:0;font-size:15px;line-height:1.3}
 .ctr>span[role=cell]::before{content:none}
 #cmp[data-vs="1"] .ctr>span[role=cell]:nth-child(3),#cmp[data-vs="2"] .ctr>span[role=cell]:nth-child(2){display:none}
 .ctr>span[role=cell]:not(.us){color:#8a857c}
 .ctr>span.us[role=cell]{background:var(--orange);color:#0B0B0B;font-weight:700;padding:10px 14px 10px 12px;box-shadow:4px 4px 0 #000;clip-path:polygon(0 0,100% 0,96% 50%,100% 100%,0 100%);filter:none}
 #cmp.swap .ctr>span[role=cell]:not(.us){animation:cswap .35s var(--ease,ease) backwards}
 @keyframes cswap{from{opacity:0;transform:translateX(-14px)}}
}
@media (prefers-reduced-motion:reduce){#cmp.swap .ctr>span[role=cell]{animation:none}}

/* a phone-only line break in the beta headline (see .bm below) */
.bh .bm{display:none}

/* ── mobile polish pass (2026-10-01): phones only, desktop untouched ──
   The hero art no longer floats behind the copy on a phone: it is bled behind the
   machine card instead (its hexagon + burst framed between the categories and the
   card's top edge), with no scroll-linked movement below 760px. */
@media (max-width:760px){
 .hero{padding:40px 0 36px}
 .hart{display:none}
 .hart,.hero .machine{transform:none!important;will-change:auto}
 .hbg{opacity:.28}
 .kick2{font-size:20px}
 .hero h1{margin-top:10px}
 .hero .sub{font-size:19px;margin-top:20px}
 .hero .ctas{display:grid;grid-template-columns:minmax(0,1fr);gap:18px;margin-top:28px;padding-right:8px}
 .hero .cta.big{width:100%;min-width:0;height:64px;font-size:28px}
 .hero .ctas .slat{width:100%;height:52px!important;font-size:20px!important}
 .hero .cats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:26px;padding-right:6px}
 .cat{min-width:0}
 .chex{width:36px;flex:none}
 .cat b{flex:1;min-width:0;font-size:15px;padding:8px 8px 9px 14px;white-space:nowrap;overflow:hidden;text-overflow:clip}
 .hgrid{gap:0}
 .hero .machine{margin-top:196px;max-width:none}
 .machine::before{content:"";position:absolute;z-index:-2;right:-44px;top:-214px;width:520px;aspect-ratio:3/2;background:url(/ds/assets/art/hero-art.jpg) 0 0/100% 100% no-repeat;pointer-events:none;
  -webkit-mask:linear-gradient(90deg,transparent 24%,#000 54%),linear-gradient(180deg,transparent 0,#000 34%,#000 64%,transparent 78%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 24%,#000 54%),linear-gradient(180deg,transparent 0,#000 34%,#000 64%,transparent 78%);mask-composite:intersect}
}
@media (max-width:760px){
 /* shortcut plates: the join plate repeats the CTA right above it, so a phone keeps two */
 .plates{margin-top:64px;gap:18px}.plates .plate.y{display:none!important}
 .plate.shape{height:80px;padding:0 24px 0 24px}
 .plate small{font-size:13px}.plate b{font-size:24px}.plate i{font-size:34px}
 .hero .cap{margin-top:24px;font-size:11px;line-height:1.6}

 /* one vertical rhythm for the bands */
 .sec{padding-top:104px}
 .band{margin-top:104px;padding:84px 0 76px}
 .join{padding-top:96px}
 .hfoot{margin-top:104px}
 .bignum{font-size:140px;top:-44px;right:-4px}
 .h2{font-size:clamp(40px,11.4vw,52px)}
 .lede{font-size:18px;margin-top:14px}
 .note{font-size:11.5px;margin-top:18px}

 /* live predictions: a compact head so the ticker gets the room */
 .feed{margin-top:22px}
 .lfeed.shape{height:60px}
 .lhead{gap:8px;padding:0 10px 0 18px}
 .boltb{width:38px;height:47px;margin:-6px 0 -4px}
 .lhead b{font-size:0}.lhead b::after{content:"[ Live ]";font-size:17px}
 .lclip{margin-right:22px}
 .li{font-size:17px;gap:8px;padding-right:18px}

 /* 01 receipts: tighter stat plates, same voice */
 .recs{margin-top:32px;gap:18px}
 .rec .rf{padding:30px 26px 22px}
 .rec .n{font-size:58px}
 .rec hr{margin:12px 0 10px}
 .rec .k{font-size:12px;letter-spacing:.14em}
 .rec .rdots{width:100px;height:69px;right:16px;top:14px}
 .bgrid{margin-top:36px}
 .bctl{margin-top:10px}
 #receipts .note{margin-top:24px}

 /* 02 explainer: the rail scrolls edge to edge, the two pots face each other */
 .ex{gap:20px;margin-top:32px}
 .rail{margin:0 -18px;padding:4px 18px 12px;gap:10px;scroll-padding-left:18px;scrollbar-width:none;scroll-snap-type:x proximity}
 .rail::-webkit-scrollbar{display:none}
 .rail button{min-height:52px;padding:10px 14px;font-size:17px;scroll-snap-align:start}
 .rail button i{width:28px;height:28px;font-size:15px}
 .stage{padding:28px 18px 24px}
 .ptop{gap:14px}.pp>span{height:44px;padding:0 16px 0 14px}
 .sc-k{margin-top:20px}
 .sc-t{font-size:36px}
 .sc-p{font-size:16.5px}
 .board{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px 14px;margin-top:22px}
 .board .mid{grid-column:1/-1;order:-1;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:8px 14px;min-height:56px}
 .board .mid .rclock span{font-size:20px;padding:10px 24px}
 .bpot{padding:34px 12px 14px;box-shadow:5px 5px 0 #000}
 .bpot::before{height:16px}
 .bpot .t{font-size:11px;letter-spacing:.1em}
 .bpot .v{font-size:46px}
 .bpot .ppl{font-size:11px;letter-spacing:0;line-height:1.35;text-wrap:balance}
 .bpot .bar{height:10px}
 .stage[data-s="1"] .ycoin{left:calc(25% + 22px);top:78px}
 .stage:not([data-s="1"]) .ycoin{left:calc(25% + 18px);top:134px}
 .stage[data-s="3"] .bpot.r{transform:skewX(-6deg) translateX(-6px) scale(.96)}
 .stage[data-s="1"] .nohouse{grid-column:1/-1;justify-self:center;margin-top:0;font-size:11px}
 .stage .ssb{margin-top:22px;--ssb-h:34px;--ssb-fs:13px}
 .stage .sfoot{font-size:11px;line-height:1.55}
 .stage[data-s="4"] .eq{display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:14px 12px}
 .eq>.op:nth-child(4){grid-column:1;justify-self:end}.eq>.res{grid-column:2/4;justify-self:start}.eq small{font-size:11px;letter-spacing:.06em;text-align:center}
 .eq .res small{white-space:normal}

 /* 03 demo card: medallion beside the question, pool and clock on one line */
 .demo{margin-top:44px;filter:drop-shadow(8px 8px 0 #000)}
 .dpill{left:18px;font-size:11px;padding:8px 18px 8px 16px}
 .dcard{padding:38px 18px 24px}
 .dtop{grid-template-columns:46px minmax(0,1fr) auto;gap:16px 14px}
 .dtop .med{width:46px;grid-column:1;grid-row:1}
 .dtop .med span{font-size:19px}
 .dtop .dq{grid-column:2/4;grid-row:1;font-size:24px;line-height:.98}
 .dtop .dpool{grid-column:1/3;grid-row:2}
 .dtop .rclock{grid-column:3;grid-row:2;justify-self:end}
 .dtop .rclock span{font-size:20px;padding:10px 22px}
 .dmid{gap:48px;margin-top:20px;padding-top:22px}
 .dpx b{font-size:26px}
 /* the split's +$N chip rises a shorter way here, so it stays in the air between the price and the bar */
 .dmid .bs-chip{animation-name:bschipm}
 .dbody{gap:24px;margin-top:22px}
 .chart .dlc{height:300px}
 .ain{height:56px;font-size:26px}
 .chips button{height:44px}
 .sides{gap:12px}.side-b{height:84px}.side-b b{font-size:28px}
 .dpay{gap:12px}.dpay div{padding:9px 12px}.dpay small{letter-spacing:.06em}.dpay b{font-size:20px}
 .dlive{gap:14px;margin-top:22px;padding-top:16px}
 .dl-track span{font-size:12px}
 .confirm{padding:8px 12px}
 .nudge{white-space:normal;line-height:1.7}
 .dnote{margin-top:26px}
 /* legibility on a phone: the chart's smallest labels and the battle cards' captions up to 10-11px */
 .demo .lc-ey{font-size:10px}.demo .lc-fg,.demo .lc-cd.compact .lc-fg{font-size:11px}.demo .lc-delta span{font-size:11px}.demo .lc-ticker span{font-size:11px}
 .demo .lc.compact .lc-ptag{font-size:10px}.demo .lc.compact .lc-ptag b,.demo .lc.compact .lc-pnl b{font-size:11px}
 .bnum small,.bft small{font-size:11px;letter-spacing:.1em}
 /* the amount field and the demo nudge: whole-height tap targets */
 .ain input{align-self:stretch}
 .nudge{display:block;padding:13px 0;margin:-12px 0 -13px}

 /* 04 compare: a calmer header for the toggle */
 .cvs{margin-top:28px}
 .cvs button{font-size:17px}

 /* 05 beta: the panel tightens, the orbit sits closer to the form */
 .bpanel{padding:40px 20px 28px;gap:12px}
 .bkick{font-size:14px}
 .bbody{font-size:16.5px;margin-top:16px}
 .bform{margin-top:24px}
 .brow{gap:14px}
 .bsub{height:58px;font-size:23px}
 .join .msg{font-size:12px;min-height:18px}
 .orbit{max-width:276px;margin-top:-6px}
 .bh .bm{display:inline}
 .bdone b{font-size:30px}.bdone p{font-size:15.5px}

 /* the floating plate: 190 wide keeps it 47px tall, over the 44px floor */
 .float .ctaplate{width:190px}
 /* a short scrim under it, so the plate never sits orange-on-orange over the page */
 .float{left:0;right:0;bottom:0;display:flex;justify-content:center;padding:44px 0 calc(14px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(14,13,12,0),rgba(14,13,12,.82) 42%,rgba(14,13,12,.96));transform:translateY(20px)}
 .float.on{transform:none;pointer-events:none}.float.on a{pointer-events:auto}
}
@media (max-width:374px){
 .cat b{font-size:13.5px;padding-left:12px;padding-right:6px}
 .chex{width:32px}
 .h2{font-size:clamp(36px,11.4vw,44px)}
 .sc-t{font-size:32px}
 .bpot .v{font-size:40px}
 .dtop .dq{font-size:22px}
}
@keyframes bschipm{0%{translate:0 0;scale:.5;opacity:0}10%{translate:0 -3px;scale:1.2;opacity:1}22%{translate:0 -8px;scale:1}72%{translate:0 -20px;opacity:1}100%{translate:0 -24px;opacity:0}}