/* Cade landing v3 (client feedback 2026-10-02), copied from v2: hero + the orange referral band as one opening,
   one signup (the hero), a compact testnet numbers band, how it works with a looping picture per step.
   hero = promise + signup, beside it a live round on their Wager Replay card (the demo lives there now);
   then numbers, how it works, compare, the orange panel. House heads: eyebrow + ghost number (ds.css .shead).
   Sections sit on alternating grounds with a keyline between them; one moving thing per screen at most.
   DS v2 (/ds/ds.css) for voices and parts; nav, CTA plate and footer from /lib/cade-shapes.js. */
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
main{overflow-x:clip}
body{overflow-x:hidden;background:var(--page,#0E0D0C)}
/* the house torn edge, lightly: DS_PANEL_CLIP at the scale ds.css gives the profile row on a phone (.prow) */
:root{--clip-torn-lite:polygon(12px 5px,36% 6px,34.5% 0%,56% 5px,calc(100% - 8px) 0%,calc(100% - 1px) 12%,calc(100% - 6px) 32%,calc(100% - 1px) 50%,calc(100% - 7px) 64%,calc(100% - 2px) 80%,calc(100% - 6px) calc(100% - 3px),77% 100%,50% calc(100% - 4px),53% 100%,18px calc(100% - 1px),4px 72%,1px 50%,5px 20%)}
.w{max-width:1280px;margin:0 auto;padding:0 40px;position:relative}
section{position:relative;scroll-margin-top:84px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.note{font-family:var(--data);font-size:12px;line-height:1.6;color:var(--meta);max-width:640px;margin:24px 0 0}
.lede{font-family:var(--read);font-size:20px;line-height:1.45;color:#d9d3c3;max-width:620px;margin:14px 0 0}

/* ── header: sticky, smoked glass once the page moves ── */
#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)}

/* ── section bands: alternating grounds, a keyline between them, one rhythm ── */
.sec{padding:112px 0}
.sec.alt{background:#161514;border-top:2px solid #2A2724;border-bottom:2px solid #2A2724}
.sec+.sec:not(.alt):not(.band){border-top:2px solid #2A2724}
.alt+.sec,.band+.sec{border-top:0}
.shd{margin:0 0 48px}
.shd .h2{white-space:normal}
.h2 em{font-style:inherit;color:var(--orange)}

/* ── footer ── */
.hfoot svg{display:block;width:100%;height:auto;margin:0 auto;overflow:visible}
#footM{display:none}
.hfoot{background:#101010}#footD{max-width:1440px}
@media (max-width:1023px){#footD{display:none}#footM{display:block;max-width:600px}}

/* ── 1 hero: the faint grey art backdrop, copy + signup left, the live round right ── */
.hero{position:relative;overflow:hidden;padding:56px 0 88px}
.hbg{position:absolute;inset:0;background:url(/ds/assets/art/stage-bg.jpg) center/cover;opacity:.3;pointer-events:none}
.hbg i{position:absolute;inset:0;background:linear-gradient(180deg,transparent 60%,var(--page))}
.hgrid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:56px;align-items:center}
.pill{display:inline-block;background:#0B0B0B;color:var(--yellow);border:2px solid #2A2724;font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;padding:7px 12px 6px;box-shadow:3px 3px 0 #000}
.hero h1{margin:18px 0 0;font-size:clamp(64px,7.4vw,108px);line-height:.86}
.hero h1 span{display:block}
.hero h1 .o{color:var(--orange)}
.hero .sub{font-family:var(--read);font-size:21px;line-height:1.45;margin:22px 0 0;max-width:520px;color:#d9d3c3}
.hero .sub b{color:var(--paper);font-weight:600}
.hero .ben{margin:22px 0 0;max-width:520px;font-family:var(--call);font-style:oblique;font-weight:500;font-size:24px;line-height:1.15;text-transform:uppercase;color:var(--yellow)}
.hsign{margin-top:16px;max-width:560px}
.hsign .bform{margin:0}
.hsign .bsub{color:#0B0B0B}
.hsign .msg{min-height:18px;margin:10px 0 0;font-family:var(--data);font-size:12px;color:var(--meta)}
.hsign .msg.err{color:var(--no);font-weight:700}
.hsign .bdone{margin-top:0;background:#161514;border:2px solid #2A2724;box-shadow:5px 5px 0 #000}
.chex{position:relative;z-index:1;width:46px;aspect-ratio:73/85;clip-path:var(--clip-hex);background:#0B0B0B;display:grid;place-items:center;flex:none}
.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}
/* ── 2 the numbers: the three stat plates (ds.css .recs) ── */
.recs{margin-top:0}

/* ── 3 how it works: numbered tabs, one still picture per step, previous / next ── */
.steps{position:relative;background:#161514;border:2px solid #2A2724;box-shadow:8px 8px 0 #000}
.stabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:2px solid #2A2724}
.stabs button{display:flex;align-items:center;gap:14px;min-height:72px;padding:14px 22px;background:transparent;border:0;border-right:2px solid #2A2724;color:var(--meta);font-family:var(--shout);font-style:italic;font-weight:800;font-size:22px;text-transform:uppercase;text-align:left;cursor:pointer;position:relative}
.stabs button:last-child{border-right:0}
.stabs button i{display:grid;place-items:center;width:34px;height:34px;flex:none;background:#2A2724;color:var(--paper);font-family:var(--data);font-style:normal;font-weight:800;font-size:15px;box-shadow:2px 2px 0 #000}
.stabs button:hover{color:var(--paper)}
.stabs button[aria-selected=true]{color:var(--paper);background:#1E1C1A}
.stabs button[aria-selected=true]::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:4px;background:var(--orange)}
.stabs button[aria-selected=true] i{background:var(--orange);color:#0B0B0B}
.stabs button:focus-visible{outline:3px solid #FFA800;outline-offset:-3px}
.spanels{display:grid}
.spanel{grid-area:1/1;display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:48px;align-items:center;padding:44px 48px 28px;outline:0}
.spanel[hidden]{display:grid;visibility:hidden}
.spanel:focus-visible{outline:3px solid #FFA800;outline-offset:-6px}
.sk{margin:0;font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.scopy h3{margin:8px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:52px;line-height:.92;text-transform:uppercase;color:var(--paper)}
.scopy p:not(.sk){margin:14px 0 0;font-family:var(--read);font-size:18px;line-height:1.5;color:#d9d3c3;max-width:440px}
.sart{position:relative;background:#0E0D0C;border:2px solid #2A2724;padding:28px 28px 30px;min-height:300px;display:flex;flex-direction:column;justify-content:center}
.iq{display:flex;justify-content:space-between;align-items:center;gap:16px}
.iq .rclock span{font-size:20px;padding:9px 24px}
.iqq{margin:16px 0 0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;line-height:.95;text-transform:uppercase;color:var(--paper)}
.iqq em{font-style:inherit;color:var(--orange)}
.iyou{display:flex;align-items:center;gap:10px;margin:18px 0 0;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--paper)}
.iyou span{background:var(--yellow);color:#0B0B0B;padding:4px 8px 3px;box-shadow:2px 2px 0 #000;font-weight:800}
.board{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.bpot{position:relative;transform:skewX(-6deg);background:#161514;color:var(--paper);border:3px solid var(--c);padding:40px 20px 18px;overflow:hidden;box-shadow:6px 6px 0 #000}
.bpot::before{content:"";position:absolute;left:0;right:0;top:0;height:20px;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:72px;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 .ppl{margin-top:6px;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta)}
.bpot.g{--c:var(--yes);--cd:#6F9A36}.bpot.r{--c:var(--no);--cd:#C21E37}
.sart .ssb{width:100%;margin-top:26px;--ssb-h:36px;--ssb-fs:14px;--ssb-drop:4px}
.eq{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:18px;margin-top:28px;font-family:var(--shout);font-style:italic;font-weight:800;color:var(--paper)}
.eq .fr{display:flex;flex-direction:column;align-items:center;font-size:46px;line-height:.95}
.eq .fr hr{width:64px;border:0;border-top:3px solid var(--paper);margin:4px 0}
.eq .op{font-size:40px;color:var(--orange)}
.eq .res{background:var(--orange);padding:10px 20px;box-shadow:5px 5px 0 #000;outline:2px solid #0B0B0B;font-size:44px;color:#141414;text-align:center}
.eq small{display:block;margin-top:6px;font-family:var(--data);font-style:normal;font-weight:700;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--meta);text-align:center}
.eq .res small{color:#141414}
.snav{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin:0;padding:0 48px 28px}
.scount{font-family:var(--data);font-weight:800;font-size:13px;letter-spacing:.12em;color:var(--meta);min-width:48px;text-align:center}
.snav button{display:block}

/* ── 5 compare: one accent, the Cade column raised ── */
.ctable{position:relative;margin-top:24px;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}

/* ── 6 the orange panel (second CTA): copy + form left, the referral orbit right ── */
.join{padding:112px 0}
.jwrap{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}
.jsign{margin-top:30px}
.bform{margin:0}
.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}
.jsign .msg{min-height:20px;margin:12px 0 0;font-family:var(--data);font-size:12.5px;color:#141414}
.jsign .msg.err{color:var(--no-dark);font-weight:700}
.bdone{margin-top:0;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}

/* the fee coin the orbit sends */
.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)}
.bh .bm{display:none}

/* ── floating CTA: bottom right on desktop, only between the two signups ── */
.float{position:fixed;right:28px;bottom:24px;z-index:60;opacity:0;transform:translateY(20px);pointer-events:none;transition:opacity .3s var(--ease),transform .3s var(--ease)}
.float.on{opacity:1;transform:none;pointer-events:auto}
@media (prefers-reduced-motion:reduce){.float{transition:none}}

/* capture / ?static: nothing floating */
html.static .float{display:none}
@media (prefers-reduced-motion:reduce){.ospin,.fr i{animation:none}}

/* ── responsive: the 1180 / 760 rungs ── */
@media (max-width:959px){.hgrid{grid-template-columns:minmax(0,1fr);gap:56px}.hm{justify-self:start}}
@media (max-width:1180px){
 .hgrid{gap:40px}
 .spanel{grid-template-columns:minmax(0,1fr);gap:28px}
 .bpanel{grid-template-columns:minmax(0,1fr);gap:40px}
}
/* comparison on a phone: a comic VS header (the rival tabs on the left, their starburst stamped CADE on the right, the
   yellow VS between, the desktop column's parts), then one versus line per question: the question as a caption, the rival's
   answer dim on the left, a tiny VS, Cade's answer on a small paper plate on the right. The rival tab swaps (and slams) the
   left answers only. Shapes: the hero tab plate, their starburst (--clip-burst), plain rectangles. */
.cvs{display:none}
@media (max-width:760px){
 .cvs{position:relative;display:grid;grid-template-columns:minmax(0,1fr) auto auto;grid-template-areas:"tabs x us" "st . sm";align-items:center;column-gap:8px;row-gap:8px;margin-top:30px}
 .cvs-k{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
 .cvs-tabs{grid-area:tabs;display:grid;gap:8px;min-width:0}
 .cvs button{display:flex;align-items:stretch;width:100%;height:44px;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(3px 3px 0 #000);transition:transform .15s var(--ease)}
 .cvs button b{flex:1;min-width:0;display:flex;align-items:center;padding:0 14px 0 12px;background:#161514;border:2px solid #2c2926;font-family:var(--call);font-style:oblique;font-weight:500;font-size:19px;line-height:1;text-transform:uppercase;color:var(--meta);white-space:nowrap;clip-path:polygon(0 0,100% 0,94% 100%,0 100%);transition:color .15s,background .15s}
 .cvs button:hover b{color:var(--paper)}
 .cvs button[aria-pressed=true] b{background:var(--paper);border-color:#0B0B0B;color:#0B0B0B}
 .cvs button:active{transform:translate(2px,2px)}
 .cvs button:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
 .cvs-x{grid-area:x;font-family:var(--shout);font-style:italic;font-weight:900;font-size:40px;line-height:1;color:#FAF424;-webkit-text-stroke:3px #0B0B0B;paint-order:stroke fill;text-shadow:3px 3px 0 #000;transform:rotate(-8deg);padding:0 2px}
 .cvs-us{grid-area:us;display:block;filter:drop-shadow(4px 4px 0 #000)}
 .cvs-burst{position:relative;display:grid;place-items:center;width:112px;height:84px;transform:rotate(-8deg)}
 .cvs-burst::before{content:"";position:absolute;inset:0;background:var(--yellow);clip-path:var(--clip-burst)}
 .cvs-burst::after{content:"";position:absolute;inset:5px;background:var(--orange);clip-path:var(--clip-burst)}
 .cvs-burst img{position:relative;z-index:1;height:26px;width:auto}
 .cvs-sub{font-family:var(--data);font-weight:700;font-size:11px;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--meta)}
 .cvs-them{grid-area:st}
 .cvs-mine{grid-area:sm;max-width:112px;text-align:center;color:var(--orange)}
 .cvs-them span{display:none}
 .cvs[data-vs="1"] .cvs-them [data-vs="1"],.cvs[data-vs="2"] .cvs-them [data-vs="2"]{display:inline}
 .ctable{margin-top:22px}
 .ctr{grid-template-columns:minmax(0,1fr) 26px minmax(0,1.2fr);column-gap:8px;align-items:center;padding:14px 0 16px;border-top:1px solid #2A2724}
 .ctr::after{content:"VS";grid-column:2;grid-row:2;justify-self:center;font-family:var(--shout);font-style:italic;font-weight:900;font-size:14px;line-height:1;color:#FAF424;-webkit-text-stroke:2px #0B0B0B;paint-order:stroke fill;opacity:.85}
 .ctr>span{border:0!important}
 .ctr>span[role=rowheader]{grid-column:1/-1;padding:0 0 10px;font-size:11px;letter-spacing:.1em;color:#b9b2a4}
 .ctr>span[role=cell]{grid-row:2;padding:0;font-size:15px;line-height:1.3}
 .ctr>span[role=cell]:not(.us){grid-column:1;color:#8a857c}
 .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.us[role=cell]{grid-column:3;justify-self:stretch;background:var(--paper);color:#0B0B0B;font-weight:600;font-size:14.5px;line-height:1.25;padding:7px 10px 8px;box-shadow:3px 3px 0 #000}
}
@media (max-width:374px){
 .cvs{column-gap:6px}
 .cvs button b{font-size:17px;padding:0 12px 0 10px}
 .cvs-x{font-size:32px}
 .cvs-burst{width:92px;height:69px}
 .cvs-burst img{height:21px}
 .cvs-mine{max-width:92px}
 .ctr{grid-template-columns:minmax(0,1fr) 22px minmax(0,1.25fr);column-gap:6px}
 .ctr>span[role=cell]{font-size:14px}
 .ctr>span.us[role=cell]{font-size:14px;padding:6px 8px 7px}
}


@media (max-width:760px){
 .w{padding:0 18px}
 section{scroll-margin-top:64px}
 .sec,.join{padding:72px 0}
 .shd{margin-bottom:32px}
 .h2{font-size:clamp(38px,11vw,52px)}
 .lede{font-size:17px;margin-top:10px}
 .note{font-size:11.5px;margin-top:18px}

 /* hero: headline, value, signup and categories in the first screen */
 .hero{padding:18px 0 56px}
 .hbg{opacity:.22}
 .pill{font-size:11px;padding:5px 9px 4px}
 .hero h1{margin-top:12px;font-size:clamp(46px,14.2vw,58px);line-height:.86}
 .hero .sub{font-size:16.5px;line-height:1.4;margin-top:12px}
 .hero .ben{font-size:18px;margin-top:12px}
 .hsign{margin-top:12px}
 .brow{flex-direction:column;align-items:stretch;gap:12px}
 .bfield{height:52px}.bfield input{height:48px}
 .bsub{width:100%;height:52px;font-size:22px}
 .hsign .msg{min-height:0;margin-top:6px}
 .hsign .msg:empty{display:none}
 .hgrid{gap:40px}

 /* numbers */
 .rec .rf{padding:28px 24px 20px}
 .rec .n{font-size:56px}
 .rec hr{margin:12px 0 10px}
 .rec .k{font-size:12px;letter-spacing:.14em}
 .rec .rdots{width:100px;height:69px;right:16px;top:14px}

 /* how it works: the tabs stay one row of numbers + short words */
 .steps{box-shadow:5px 5px 0 #000}
 .stabs button{flex-direction:column;align-items:flex-start;gap:8px;min-height:0;padding:12px 10px 12px;font-size:15px;line-height:1}
 .stabs button i{width:28px;height:28px;font-size:13px}
 .spanel{padding:24px 16px 18px;gap:20px}
 .scopy h3{font-size:36px}
 .scopy p:not(.sk){font-size:16px}
 .sart{padding:18px 14px 20px;min-height:0}
 .iqq{font-size:23px}
 .board{gap:14px}
 .bpot{padding:30px 12px 12px;box-shadow:4px 4px 0 #000}
 .bpot::before{height:14px}
 .bpot .t{font-size:10.5px;letter-spacing:.08em}
 .bpot .v{font-size:46px}
 .bpot .ppl{font-size:10.5px;letter-spacing:.02em;line-height:1.35}
 .sart .ssb{margin-top:20px;--ssb-h:32px;--ssb-fs:13px}
 .eq{gap:10px 12px;margin-top:20px}.eq .fr{font-size:34px}.eq .op{font-size:28px}.eq .res{font-size:32px;padding:8px 14px}.eq small{font-size:9.5px;letter-spacing:.04em}
 .eq .fr hr{width:44px}
 .snav{padding:0 16px 18px}

 /* the orange panel */
 .bpanel{padding:40px 20px 28px;gap:12px}
 .bkick{font-size:14px}
 .bh{font-size:clamp(36px,10.5vw,52px)}.bh .bk{display:none}.bh .bm{display:inline}
 .bbody{font-size:16.5px;margin-top:16px}
 .jsign{margin-top:24px}
 .jsign .msg{font-size:12px;min-height:18px}
 .orbit{max-width:276px;margin-top:-6px}
 .bdone b{font-size:30px}.bdone p{font-size:15.5px}

 /* the floating plate: full width with a short scrim, so it never sits orange on orange */
 .float{left:0;right:0;bottom:0;display:flex;justify-content:center;padding:36px 0 calc(12px + env(safe-area-inset-bottom,0px));background:linear-gradient(180deg,rgba(14,13,12,0),rgba(14,13,12,.85) 42%,rgba(14,13,12,.96))}
 .float.on{pointer-events:none}.float.on a{pointer-events:auto}
 .float .ctaplate{width:200px;height:auto!important;aspect-ratio:var(--w)/var(--h)}
}
@media (max-width:374px){
 .hero h1{font-size:46px}
 .hero .sub{font-size:15.5px}
 .stabs button{font-size:13.5px;padding:10px 8px}
 .scopy h3{font-size:32px}
 .bpot .v{font-size:40px}
}
.cta.commit.or .fc{fill:var(--orange)}
.ctag{display:flex;align-items:center;padding:5px 26px 6px 24px;top:-22px}.ctag img{display:block;height:32px;width:auto}
@media (max-width:760px){.cus,.ctr.ch{display:none}.ctag{display:none}.rec .n{font-size:50px}.recs{gap:16px}}
/* the orbit's .fr (absolute, rotated) must not catch the equation's fractions */
.eq .fr{position:static;width:auto;height:auto;margin:0;transform:none;filter:none}
/* the equation: the fraction and the pot on one line, the result under them */
.eq{display:grid;grid-template-columns:auto auto auto;justify-content:center;align-items:center;gap:16px 20px}
.eq>.op:nth-child(4){grid-column:1;justify-self:end}
.eq>.res{grid-column:2/4;justify-self:start}
/* the floating plate only where the page gutter can hold it (never over content); everywhere
   else the sticky header carries the same "Get early access" plate, always in view */
@media (max-width:1799px){.float{display:none}}

/* ══ the hero's live round: their Wager Replay card, live ══
   Port of frontend-v1 meme-madness/components/replay/MemeMadnessWagerReplay.module.css (sizes in cqw
   of the frame, as the source). Tokens: --mm-ink #0B0B0B (pc-text-on-accent), --mm-surface #141414
   (pc-text-on-paper), --mm-raised #1c1c1c, cream #EFE9D8, muted #A1A1A1, lime #91BB4F, red #EA2A46,
   yellow #FAF424; display = Futura PT Cond (--call, 500, oblique: the only cut we host), mono = JetBrains Mono. */
.hm{position:relative;width:100%;max-width:560px;justify-self:end}
/* ours: the category tabs above the frame, the hex category marks from v1 */
.hm-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px}
.hm-tab{display:flex;align-items:center;min-width:0;padding:0;border:0;background:none;cursor:pointer;filter:drop-shadow(3px 3px 0 #000);transition:transform .15s var(--ease)}
.hm-tab .chex{width:40px}
.hm-tab b{flex:1;min-width:0;margin-left:-10px;padding:8px 10px 9px 16px;background:#161514;border:2px solid #0B0B0B;font-family:var(--call);font-style:oblique;font-weight:500;font-size:19px;line-height:1;text-transform:uppercase;color:var(--meta);white-space:nowrap;text-align:left;clip-path:polygon(0 0,100% 0,94% 100%,0 100%);transition:color .15s,background .15s}
.hm-tab:hover b{color:var(--paper)}
.hm-tab[aria-selected=true] b{background:var(--paper);color:#0B0B0B}
.hm-tab:not([aria-selected=true]) .chex{filter:saturate(.35) brightness(.8)}
.hm-tab:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.hm-cap{margin:22px 0 0;font-family:var(--data);font-size:11.5px;line-height:1.5;color:var(--meta)}
.hm-nudge{font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.04em;text-transform:uppercase;color:var(--paper);text-decoration:none}
.hm-nudge u{text-decoration:none;background:var(--orange);color:#0B0B0B;padding:3px 7px}
.hm-nudge:hover u,.hm-nudge:focus-visible u{background:var(--yellow)}

.wr{--ink:#0B0B0B;--surf:#141414;--raised:#1c1c1c;--cream:#EFE9D8;--muted:#A1A1A1;--lime:#91BB4F;--red:#EA2A46;--yel:#FAF424;--accent:#FFA800;
  position:relative;container-type:inline-size;width:100%;overflow:hidden;background:var(--surf);color:var(--cream);isolation:isolate;clip-path:var(--clip-torn-lite)}
/* ours: the frame wears the house torn edge, lightly (DS_PANEL_CLIP at the profile row's phone scale);
   the source's .4cqw ink keyline and 1.4cqw hard shadow ride on the wrapper so they follow the edge */
.wr-sh{filter:drop-shadow(2px 0 0 #0B0B0B) drop-shadow(-2px 0 0 #0B0B0B) drop-shadow(0 2px 0 #0B0B0B) drop-shadow(0 -2px 0 #0B0B0B) drop-shadow(8px 8px 0 #000)}
.wr[data-accent=violet]{--accent:#9652EF}
.wr-field{position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--accent) 38%,transparent) 0%,transparent 60%),linear-gradient(180deg,transparent 55%,color-mix(in srgb,var(--accent) 12%,transparent) 100%);transition:background .4s}
.wr-content{position:relative;z-index:1;display:grid;grid-template-rows:auto auto 1fr auto auto;padding:4.2cqw 5.2cqw;gap:2.2cqw}
.wr-head{display:flex;align-items:center;justify-content:space-between;gap:2cqw}
.wr-brand{flex:none;width:13cqw;aspect-ratio:581.869/353.78;background:#fff;opacity:.92;-webkit-mask:url(/ds/assets/cade-wordmark.svg) left center/contain no-repeat;mask:url(/ds/assets/cade-wordmark.svg) left center/contain no-repeat}
.wr-badge{flex:none;font-family:var(--shout);font-style:italic;font-weight:800;font-size:3.6cqw;letter-spacing:.14em;text-transform:uppercase;padding:.2em .7em;border:.5cqw solid currentColor;color:var(--yel);background:var(--surf);box-shadow:.7cqw .7cqw 0 var(--ink);transform:rotate(5deg)}
.wr-badge[data-live=true]::before{content:"";display:inline-block;width:.55em;height:.55em;margin-right:.45em;border-radius:50%;background:currentColor;vertical-align:.05em;animation:wrpulse .9s ease-in-out infinite}
.wr-badge[data-stamp=WON]{color:var(--lime)}.wr-badge[data-stamp=LOST]{color:var(--red)}
@keyframes wrpulse{0%,100%{opacity:1}50%{opacity:.25}}
.wr-coinrow{display:flex;align-items:center;gap:2.8cqw;min-width:0}
.wr-art{flex:none;width:13cqw;aspect-ratio:1;display:grid;place-items:center;overflow:visible;filter:drop-shadow(.6cqw .6cqw 0 var(--ink))}
.wr-art[data-kind=plate]{display:block}
.wr-plate{display:block;width:118%;height:auto;max-width:none;margin:-14% 0 0 -9%}
.wr-art svg{display:block;width:100%;height:100%;overflow:visible}
.wr-art[data-kind=team] svg,.wr-art[data-kind=ticker] svg{height:auto}
.wr-coin{display:flex;flex-direction:column;gap:.8cqw;min-width:0}
.wr-tickrow{display:flex;align-items:center;gap:2cqw;min-width:0}
.wr-ticker{margin:0;font-family:var(--shout);font-style:italic;font-weight:800;font-size:7cqw;line-height:.9;letter-spacing:.01em;text-transform:uppercase;color:var(--cream);text-shadow:.5cqw .5cqw 0 var(--ink);white-space:nowrap}
.wr-dir{margin:0;white-space:nowrap;font-family:var(--shout);font-style:italic;font-weight:700;font-size:4cqw;line-height:1;letter-spacing:.06em;padding:.25em .7em .3em;border:.4cqw solid var(--ink);box-shadow:.6cqw .6cqw 0 var(--ink);color:var(--ink);background:var(--lime);transform:skewX(-6deg)}
.wr-dir[data-direction=lower]{background:var(--red);color:var(--cream)}
.wr-dir:not([hidden]){animation:wrlabel .42s cubic-bezier(.16,1,.3,1)}
.wr-lane{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-family:var(--data);font-weight:700;font-size:2.6cqw;letter-spacing:.14em;color:var(--yel)}
/* the plot */
.wr-plot{position:relative;height:46cqw;contain:paint;border:.35cqw solid rgb(240 234 217 / .16);background:rgb(0 0 0 / .35);transition:border-color .3s}
.wr[data-tone=win] .wr-plot{border-color:color-mix(in srgb,var(--lime) 55%,transparent)}
.wr[data-tone=loss] .wr-plot{border-color:color-mix(in srgb,var(--red) 55%,transparent)}
.wr-plot canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.wr-marks{position:absolute;inset:0;z-index:2;pointer-events:none}
.wr-bet,.wr-you,.wr-head-dot{position:absolute;z-index:2;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none}
.wr-bet{background:color-mix(in srgb,var(--lime) 80%,transparent);border:.25cqw solid var(--ink)}
.wr-bet[data-side=lower]{background:color-mix(in srgb,var(--red) 80%,transparent)}
.wr-you{z-index:3;width:3.6cqw;height:3.6cqw;background:var(--yel);border:.4cqw solid var(--ink);box-shadow:.5cqw .5cqw 0 var(--ink)}
.wr-you[data-avatar=true]{width:7cqw;height:7cqw;overflow:hidden;background:var(--cream)}
.wr-you img{display:block;width:100%;height:100%;object-fit:cover}
.wr-head-dot{z-index:3;width:2.6cqw;height:2.6cqw;background:var(--cream);border:.3cqw solid var(--ink)}
.wr-head-dot::after{content:"";position:absolute;inset:-.3cqw;border-radius:50%;border:.3cqw solid var(--cream);animation:wrhalo 1.1s ease-out infinite}
.wr-head-dot[data-final=true]{width:3.2cqw;height:3.2cqw;border-width:.35cqw}.wr-head-dot[data-final=true]::after{content:none}
.wr-bet[data-fresh=true]{animation:wrpop .42s cubic-bezier(.16,1,.3,1)}
.wr-you[data-fresh=true]{animation:wrslam .52s cubic-bezier(.16,1,.3,1)}
@keyframes wrhalo{0%{transform:scale(.8);opacity:.8}100%{transform:scale(2.4);opacity:0}}
@keyframes wrpop{0%{transform:translate(-50%,-50%) scale(0)}60%{transform:translate(-50%,-50%) scale(1.7)}100%{transform:translate(-50%,-50%) scale(1)}}
@keyframes wrslam{0%{transform:translate(-50%,-50%) scale(2.8);opacity:0}55%{transform:translate(-50%,-50%) scale(.9);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}
@keyframes wrlabel{0%{transform:skewX(-6deg) scale(.7);opacity:0}100%{transform:skewX(-6deg) scale(1);opacity:1}}
.wr-lbl{position:absolute;z-index:4;margin:0;font-family:var(--data);font-weight:700;font-size:2.4cqw;letter-spacing:.1em;padding:.25em .6em;background:var(--ink);color:var(--cream);white-space:nowrap;font-variant-numeric:tabular-nums}
.wr-line{left:1.2cqw;bottom:1.6cqw;color:var(--yel)}
.wr-pick{background:var(--yel);color:var(--ink)}
.wr-final{right:1.2cqw;font-size:2.8cqw}
.wr-final[data-corner=bottom]{bottom:1.6cqw}.wr-final[data-corner=top]{top:1.6cqw}
.wr-clock{position:absolute;z-index:4;top:1.6cqw;left:1.6cqw;margin:0;font-family:var(--data);font-weight:700;font-size:3cqw;letter-spacing:.08em;color:var(--yel);font-variant-numeric:tabular-nums}
.wr-flash{position:absolute;inset:0;z-index:2;pointer-events:none;background:var(--lime);opacity:0}
.wr-flash[data-tone=loss]{background:var(--red)}
.wr-flash.on{animation:wrflash .52s ease-out forwards}
@keyframes wrflash{0%{opacity:.35}100%{opacity:0}}
/* the book: the DS ShareSplitBar, the bets and the volume */
.wr-book{display:flex;flex-direction:column;gap:1cqw}
.wr-ssb{--ssb-h:4.2cqw;--ssb-fs:max(1.9cqw,11px);--ssb-drop:0px}
.wr-meta{margin:0;text-align:center;font-family:var(--data);font-weight:700;font-size:2.5cqw;letter-spacing:.1em;color:var(--yel);font-variant-numeric:tabular-nums}
/* the readout: the live IF ▲ WINS figure, then the realized PNL; ours: the SlatButton pair in the aside */
.wr-readout{display:flex;align-items:center;justify-content:space-between;gap:3cqw}
.wr-main{display:flex;flex-direction:column;align-items:flex-start;gap:1.2cqw;min-width:0}
.wr-rlabel{margin:0;white-space:nowrap;font-family:var(--shout);font-style:italic;font-weight:700;font-size:3cqw;letter-spacing:.18em;color:var(--muted)}
.wr-ar{font-style:normal}
.wr-rvalue{margin:0;display:inline-block;font-family:var(--data);font-weight:800;font-size:11cqw;line-height:.9;padding:.16em .4em .14em;background:var(--raised);border:.4cqw solid var(--ink);box-shadow:1cqw 1cqw 0 var(--ink);font-variant-numeric:tabular-nums;color:var(--cream);transition:color .16s ease;white-space:nowrap}
.wr-rvalue[data-tone=win]{color:var(--lime)}.wr-rvalue[data-tone=loss]{color:var(--red)}
.wr-recap{margin:0;white-space:nowrap;font-family:var(--data);font-weight:700;font-size:2.6cqw;letter-spacing:.1em;color:var(--muted);font-variant-numeric:tabular-nums}
.wr-aside{flex:none;display:flex;flex-direction:column;gap:1.6cqw;width:38%}

/* the client's SlatButton (design-system/buttons/SlatButton.tsx), its own art (/ds/assets/ds/buttons/battle-slatbutton*.svg):
   lime / red face over the black slat, the label in Futura PT Cond with the 1.5px double-print, press 4px */
.slatp{position:relative;display:block;width:100%;aspect-ratio:250/77;border:0;padding:0;margin:0;background:transparent;cursor:pointer;color:#F0EAD9;
  font-family:var(--call);font-style:normal;font-weight:500;letter-spacing:.06em;text-transform:uppercase;text-shadow:1.5px 1.5px 0 #000;--press:4px;transition:transform .16s cubic-bezier(.16,1,.3,1),filter .2s}
.slatp img{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.slatp .sl-l{position:absolute;left:9.6%;right:4.4%;top:0;height:84.3%;display:flex;align-items:center;justify-content:center;gap:.45em;white-space:nowrap;pointer-events:none}
.slatp b{font-weight:500;font-size:4.6cqw;line-height:1}
button.slatp:hover:not([aria-disabled=true]){transform:translate(calc(var(--press) * -1),calc(var(--press) * -1))}
button.slatp:active:not([aria-disabled=true]){transform:translate(var(--press),var(--press))}
.slatp:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
.slatp[aria-disabled=true]{cursor:not-allowed;filter:grayscale(1) brightness(.6)}
.slatp[aria-disabled=true][data-on=true]{filter:none}
/* how it works, step 1: the same pair, still */
.hm-pk2{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:22px;container-type:inline-size}
.hm-pk2 .slatp b{font-size:clamp(20px,6.4cqw,30px)}
.hm-pk2 .slatp:not(.is-you){filter:grayscale(.6) brightness(.6)}
.hm-pays{margin:8px 0 0;font-family:var(--data);font-weight:800;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--paper)}

@media (max-width:760px){
 .hm{max-width:none}
 .hm-tabs{gap:6px;margin-bottom:14px}
 .hm-tab .chex{width:32px}
 .hm-tab b{font-size:15px;padding:7px 4px 8px 13px}
 .wr-content{padding:5cqw 5cqw 5.4cqw;gap:3cqw}
 .wr-brand{width:16cqw}.wr-badge{font-size:4cqw}
 .wr-art{width:15cqw}.wr-ticker{font-size:8.4cqw}.wr-dir{font-size:5cqw}
 .wr-lane{font-size:3.1cqw;letter-spacing:.08em}
 .wr-plot{height:56cqw}
 .wr-lbl{font-size:3cqw}.wr-clock{font-size:3.6cqw}.wr-final{font-size:3.2cqw}
 .wr-ssb{--ssb-h:max(4.2cqw,18px)}.wr-meta{font-size:max(3.1cqw,11px)}
 .wr-rlabel{font-size:3.6cqw}.wr-rvalue{font-size:11cqw}.wr-recap{font-size:2.9cqw;letter-spacing:.04em}
 .wr-aside{width:40%;gap:2.4cqw}
 .slatp b{font-size:max(4.6cqw,15px)}
 .hm-pk2{gap:12px}
}
@media (prefers-reduced-motion:reduce){.wr-badge[data-live=true]::before,.wr-head-dot::after,.wr-bet,.wr-you,.wr-dir,.wr-flash.on{animation:none!important}.slatp{transition:none}}
html.static .wr-head-dot::after,html.static .wr-badge::before{animation:none}

/* ══ landing only (body.lp), 2026-10-02 owner pass: one ground, light breaks, house edges ══ */
/* one continuous dark ground: no section slabs; the faint grey art backdrop carries on under the page */
.lp main{position:relative}
.lp main::before{content:"";position:absolute;left:0;right:0;top:820px;bottom:0;background:url(/ds/assets/art/stage-bg.jpg) center top/1536px auto repeat-y;opacity:.07;pointer-events:none;
  -webkit-mask:linear-gradient(180deg,transparent,#000 240px,#000 calc(100% - 240px),transparent);mask:linear-gradient(180deg,transparent,#000 240px,#000 calc(100% - 240px),transparent)}
.lp .sec,.lp .sec.alt{background:none;border:0;padding:128px 0}
body.lp .sec+.sec,body.lp .sec+.sec:not(.alt):not(.band){border-top:0}
/* the break between sections: --clip-quiet's own top edge (a line with its 4px notch), low contrast */
.lp .sec::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(1200px,calc(100% - 80px));height:6px;background:rgba(240,234,217,.2);
  clip-path:polygon(0 0,34% 0,calc(34% + 34px) 4px,calc(34% + 68px) 0,100% 0,100% 2px,calc(34% + 68px) 2px,calc(34% + 34px) 6px,34% 2px,0 2px)}
.lp .shd .h2{margin-top:0}
.lp .shd{margin-bottom:44px}

/* how it works: the box wears the light torn edge; keyline + hard shadow on the wrapper so they follow it */
.lp .steps-sh{filter:drop-shadow(2px 0 0 #2A2724) drop-shadow(-2px 0 0 #2A2724) drop-shadow(0 2px 0 #2A2724) drop-shadow(0 -2px 0 #2A2724) drop-shadow(8px 8px 0 #000)}
.lp .steps{border:0;box-shadow:none;background:#161514;clip-path:var(--clip-torn-lite)}
/* the picture frame: --clip-quiet, its 2px keyline drawn as the outer layer of the same silhouette */
.lp .sart{border:0;background:#2A2724;clip-path:var(--clip-quiet);isolation:isolate}
.lp .sart::before{content:"";position:absolute;inset:2px;z-index:-1;background:#0E0D0C;clip-path:var(--clip-quiet)}
/* back / next: their SlatButton silhouette (source-shapes SLAT), the back one mirrored */
.lp .snav{gap:16px}
.lp .snb{display:inline-grid;white-space:nowrap;width:124px;height:46px;padding:0 14px 0 20px;border:0;background:none;cursor:pointer;grid-auto-flow:column;gap:10px;font-family:var(--call);font-style:oblique;font-weight:500;font-size:20px;line-height:1;text-transform:uppercase;color:#0B0B0B}
.lp .snb.prev{padding:0 20px 0 14px}
.lp .snb.prev>svg{transform:scaleX(-1)}
.lp .snb .ar{display:block;width:14px;height:14px}.lp .snb .ar svg{display:block;width:100%;height:100%}
.lp .snb[disabled]{opacity:.35;cursor:default;transform:none}
.lp .snb[disabled]>svg .sh{transform:translate(4px,4px)}
@media (prefers-reduced-motion:reduce){.lp .snb,.lp .snb>svg .sh{transition:none}}

/* compare: the raised Cade column takes --clip-quiet; its orange keyline is the outer layer, the shadow a filter */
.lp .cus{background:none;outline:0;box-shadow:none;filter:drop-shadow(10px 10px 0 #000)}
.lp .cus::before,.lp .cus::after{content:"";position:absolute;clip-path:var(--clip-quiet)}
.lp .cus::before{inset:0;background:var(--orange)}
.lp .cus::after{inset:3px;background:#1B1917}

@media (max-width:760px){
 .lp main::before{top:900px;background-size:900px auto;opacity:.06}
 .lp .sec,.lp .sec.alt{padding:64px 0}
 .lp .sec::before{width:calc(100% - 36px);clip-path:polygon(0 0,30% 0,calc(30% + 24px) 4px,calc(30% + 48px) 0,100% 0,100% 2px,calc(30% + 48px) 2px,calc(30% + 24px) 6px,30% 2px,0 2px)}
 .lp .shd{margin-bottom:24px}
 .lp .steps-sh{filter:drop-shadow(2px 0 0 #2A2724) drop-shadow(-2px 0 0 #2A2724) drop-shadow(0 2px 0 #2A2724) drop-shadow(0 -2px 0 #2A2724) drop-shadow(5px 5px 0 #000)}
 .lp .snb{width:108px;height:42px;font-size:18px}
 .lp .wr-sh{filter:drop-shadow(1.5px 0 0 #0B0B0B) drop-shadow(-1.5px 0 0 #0B0B0B) drop-shadow(0 1.5px 0 #0B0B0B) drop-shadow(0 -1.5px 0 #0B0B0B) drop-shadow(5px 5px 0 #000)}
 /* condensed: the three numbers as slim plates */
 .lp .recs{gap:12px}
 .lp .rec{filter:drop-shadow(5px 5px 0 #000)}
 .lp .rec .rf{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px 16px 22px}
 .lp .rec .n{font-size:44px}
 .lp .rec hr{display:none}
 .lp .rec .k{font-size:11px;letter-spacing:.1em;text-align:right;max-width:120px}
 .lp .rec .rdots{width:70px;height:48px;right:10px;top:8px;opacity:.6}
 .lp .orbit{max-width:224px}
 .lp .bpanel{padding:34px 20px 24px}
}

/* ══ review pass 2026-10-02 (brief + identity + QA): landing only (body.lp) ══ */
html:has(body.lp){scroll-padding-top:84px}
:root{--clip-torn-card:polygon(8px 3px,36% 4px,35% 0%,56% 3px,calc(100% - 5px) 0%,100% 12%,calc(100% - 2px) 34%,100% 52%,calc(100% - 2px) 70%,100% 86%,calc(100% - 3px) calc(100% - 2px),77% 100%,50% calc(100% - 3px),53% 100%,12px calc(100% - 1px),3px 72%,0% 50%,3px 20%)}
/* the injected header's height is reserved, so it never pushes the page */
.lp #hnav{min-height:70px}
@media (max-width:960px){.lp #hnav{min-height:60px}}
.lp .cnl-m .cnl-brand{height:44px;margin:2.6px 0}
/* further down the page: the faint house pattern (hex outline, halftone, the card's trace over its dashed line) */
.lp main::before{background:url(assets/house-pattern.svg) 220px 0/440px 440px repeat;opacity:.04}
/* hero copy: the one-line explainer before the referral line */
.lp .hero .how1{margin:14px 0 0;max-width:520px;font-family:var(--read);font-weight:600;font-size:21px;line-height:1.35;color:var(--paper)}
.lp .hero .ben{margin-top:16px}
.lp .hsign .bfield:focus-within{outline:3px solid #FFA800;outline-offset:3px}
/* the card: frame width for the keyline and shadow in cqw (their .4cqw / 1.4cqw), a lighter torn edge */
.lp .hm{container-type:inline-size}
.lp .wr{clip-path:var(--clip-torn-card)}
.lp .wr-sh{filter:drop-shadow(.4cqw 0 0 #0B0B0B) drop-shadow(-.4cqw 0 0 #0B0B0B) drop-shadow(0 .4cqw 0 #0B0B0B) drop-shadow(0 -.4cqw 0 #0B0B0B) drop-shadow(1.4cqw 1.4cqw 0 #000)}
.lp .wr-tickrow{min-height:7.6cqw}
.lp .wr-coinrow{height:13cqw}.lp .wr-art{height:13cqw}
.lp .wr-lane{font-size:max(2.6cqw,11px)}
.lp .wr-lbl{font-size:max(2.4cqw,11px)}
.lp .wr-final{font-size:max(2.6cqw,11px);white-space:pre;text-align:right;line-height:1.35}
.lp .wr-clock{font-size:max(3cqw,12px)}
.lp .wr-rlabel{font-size:max(3cqw,11px)}
.lp .wr-recap{font-size:max(2.6cqw,11px);letter-spacing:.06em}
.lp .wr-meta{font-size:max(2.5cqw,11px)}
.lp .wr-bet{opacity:.85}
/* the readout keeps one height in every state: a figure once you hold a side, both sides' odds before */
.lp .wr-rvalue{box-sizing:border-box;height:13.4cqw;display:flex;flex-direction:column;justify-content:center;align-items:flex-start}
.lp .wr-rvalue[data-mode=pays]{font-size:max(3cqw,11px);line-height:1.3;gap:.3em;padding:0 .9em;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.wr-pays b{font-weight:800}
.wr-pays[data-side=higher] b{color:var(--lime)}.wr-pays[data-side=lower] b{color:var(--red)}
.wr-pays[data-hl=true]{color:var(--cream)}
.wr-pays[data-won=false]{opacity:.45}
/* ShareSplitBar's absence state, their emptyLabel */
.wr-ssb .ssb-e{display:none}
.wr-ssb[data-empty=true] .pl,.wr-ssb[data-empty=true] .v{visibility:hidden}
.wr-ssb[data-empty=true] .ssb-e{display:flex;position:absolute;inset:0;align-items:center;justify-content:center;background:#1c1c1c;outline:1.5px solid #000;font-family:var(--data);font-weight:700;font-size:var(--ssb-fs);letter-spacing:.14em;color:#9c9c9c}
/* the note under the card holds one height whichever line shows */
.lp .hm-cap{display:grid}.lp .hm-cap>*{grid-area:1/1}.lp .hm-cap>[hidden]{display:block;visibility:hidden}
/* taps: 44px or more */
.lp .hm-tab{min-height:44px}
/* their SlatButton art is drawn preserveAspectRatio=none: on a phone the slat stretches to the 44px tap floor */
.lp #wr .slatp{min-height:44px}
.lp .hm-tab b{display:flex;align-items:center;min-height:44px;box-sizing:border-box}
/* the stat plates: stocks wear #9652EF with paper text */
.lp .rec.v .n,.lp .rec.v .k{color:var(--paper)}.lp .rec.v hr{border-top-color:var(--paper)}
/* hard shadows only */
.lp .bkick{box-shadow:3px 3px 0 #000}
.lp .bdone{box-shadow:5px 5px 0 #000}
.lp .oyou{filter:drop-shadow(6px 6px 0 #000)}
.lp .oyou small{font-size:max(11px,3cqw);letter-spacing:.04em;line-height:1.1}
.lp .fee span{font-size:max(11px,2.6cqw)}
/* sections: a visible break, a steadier rhythm */
.lp .sec,.lp .sec.alt{padding:92px 0}
.lp .sec::before{background:rgba(240,234,217,.45)}
.lp .shd{margin-bottom:36px}
/* how it works: no dead space, a grey disabled Back, the equation on one line */
.lp .spanel{padding:36px 48px 20px}
.lp .sart{min-height:0}
.lp .snav{padding:0 48px 24px}
.lp .snb[disabled]{opacity:.45;color:#8a857c}
.lp .snb[disabled]>svg .fc{fill:#3A3734}
.lp .eq{display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-start;gap:16px}
.lp .eq>.op{align-self:center;margin-top:-1.2em}
.lp .eq small{font-size:11px;letter-spacing:.06em;max-width:13ch;white-space:normal;line-height:1.25}
.lp .eq .res{display:flex;flex-direction:column;align-items:center}
.lp .bpot .t,.lp .bpot .ppl{font-size:11px}
/* compare: tighter rows */
.lp .ctr>span{padding:16px 22px}
.lp .ctr>span[role=rowheader]{padding-left:0}
.lp .ctr.ch>span{padding-top:28px;padding-bottom:18px}
/* footer: the 1440 drawing only where it reads at 89% or more; below that the phone drawing, lifted to the 11px floor */
@media (max-width:1279px){.lp #footD{display:none}.lp #footM{display:block;max-width:600px}}
/* Cookie preferences: a small house dialog */
.ckd{width:min(520px,calc(100% - 32px));max-width:none;padding:0;border:0;background:transparent;color:var(--paper);overflow:visible}
.ckd::backdrop{background:rgba(11,11,11,.72)}
.ckd form{position:relative;margin:0;background:#161514;border:2px solid #0B0B0B;box-shadow:8px 8px 0 #000;padding:30px 28px 26px}
.ckd h2{margin:0;padding-right:56px;font-size:36px;line-height:.95;color:var(--paper)}
.ckd p{margin:12px 0 0;font-family:var(--read);font-size:16px;line-height:1.45;color:#d9d3c3}
.ckd .cks{font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow)}
.ckd .bnote{font-family:var(--data);font-size:11.5px;color:var(--meta)}
.ckb{display:flex;flex-wrap:wrap;gap:14px;margin-top:22px}
.lp .ckd .snb{width:auto;height:46px;padding:0 24px 0 28px;font-size:19px}
.ckx{position:absolute;top:8px;right:8px;min-width:44px;height:44px;padding:0 8px;background:none;border:0;color:var(--meta);font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
.ckx:hover{color:var(--paper)}
.ckd button:focus-visible{outline:3px solid #FFA800;outline-offset:3px}
@media (max-width:760px){
 .lp main::before{background-size:340px 340px;opacity:.04}
 .lp .hero .how1{font-size:16.5px;margin-top:10px}
 .lp .hero .ben{margin-top:10px}
 .lp .wr-tickrow{min-height:8.8cqw}
 .lp .wr-coinrow,.lp .wr-art{height:15cqw}
 .lp .wr-aside{width:44%}
 .lp .wr-recap{letter-spacing:0}
 .lp .sec,.lp .sec.alt{padding:60px 0}
 .lp .shd{margin-bottom:24px}
 .lp .spanel{padding:22px 16px 14px}
 .lp .snav{padding:0 16px 18px}
 .lp .snb{height:46px}
 .lp .eq{gap:8px}.lp .eq .fr{font-size:28px}.lp .eq .op{font-size:22px}.lp .eq .res{font-size:24px;padding:6px 10px}.lp .eq .fr hr{width:34px}
 .lp .eq small{max-width:10ch;letter-spacing:.02em}
 .lp .orbit{max-width:260px}
 .lp .ctr>span{padding:0}
 .lp .ctr>span[role=rowheader]{padding:0 0 10px}
 .lp .ckd h2{font-size:30px}
}

/* ══ shared with /arcade (it loads this file): the parts of the v1 landing the arcade still wears ══
   restored verbatim from /archive/landing-2026-10-01/landing.css; nothing on this page uses them but the confirm strip. */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.reveal.in{opacity:1;transform:none}
html.static .reveal{opacity:1;transform:none}
.kick2{font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;text-transform:uppercase;color:var(--orange)}
.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}
.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%)}}
.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)}}
.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}
.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}
@media (max-width:760px){
 .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}
 .dlive{gap:14px;margin-top:22px;padding-top:16px}.dl-track span{font-size:12px}
 .confirm{padding:8px 12px}.nudge{display:block;white-space:normal;line-height:1.7;padding:13px 0;margin:-12px 0 -13px}
 .kick2{font-size:20px}
}
@media (prefers-reduced-motion:reduce){.lfeed .track{animation:none}}

/* ══ pass 2026-10-02 (b): the client's hero art back, the notched pill, their amber chart, the entries ══ */
/* 1 the art the client liked ("the subtle gray transparent background elements"): v1's backdrop, the grey
   translucent mascot wall (.hbg, stage-bg.jpg) and the hero art (.hart, hero-art-fade.png), placed as in v1 */
.lp .hbg{background:url(/ds/assets/art/stage-bg.jpg) center/cover;opacity:.35}
.lp .hbg i{background:linear-gradient(180deg,transparent 70%,var(--page))}
.hart{position:absolute;right:max(-150px,calc((100vw - 1440px)/2 - 150px));top:-40px;width:900px;height:auto;max-width:none;pointer-events:none;will-change:transform;
  /* grey and translucent, as the client remembers it: the art drawn in greys at low opacity, under the card */
  filter:grayscale(1) contrast(.9);opacity:.34}
.hero>.w{z-index:1}
@media (max-width:1180px){.hart{width:620px;top:300px;opacity:.28}}
/* phones: the right of the headline is empty, so the art fills it, cropped and anchored top-right, low; the
   mascot wall is pulled to the same side and fades out under the copy. Still: no scroll-linked motion here */
@media (max-width:760px){
 .lp .hbg{background-size:auto 560px;background-position:right -40px top 0;background-repeat:no-repeat;opacity:.3;
  -webkit-mask:linear-gradient(90deg,transparent 8%,#000 62%),linear-gradient(180deg,#000 55%,transparent 82%);-webkit-mask-composite:source-in;
  mask:linear-gradient(90deg,transparent 8%,#000 62%) intersect,linear-gradient(180deg,#000 55%,transparent 82%)}
 .lp .hbg i{display:none}
 .hart{display:block;width:600px;right:-176px;left:auto;top:-44px;opacity:.2;transform:none!important;will-change:auto;
  -webkit-mask:radial-gradient(closest-side circle at 65% 47%,#000 62%,transparent 100%);mask:radial-gradient(closest-side circle at 65% 47%,#000 62%,transparent 100%)}
}
@media (prefers-reduced-motion:reduce){.hart{transform:none!important}}

/* 2 the pill: their StatusBadge notched chip (chips/chip-notched.svg face, .notch in ds.css), stretched to the
   label, a keyline and one hard shadow */
.lp .pill{position:relative;display:inline-flex;align-items:center;height:40px;padding:2px 34px 0 30px;background:none;border:0;box-shadow:none;
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:18px;line-height:1;letter-spacing:.06em;text-transform:uppercase;color:var(--yellow);filter:drop-shadow(4px 4px 0 #000)}
.lp .pill>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lp .pill>svg path{fill:#0B0B0B;stroke:rgba(240,234,217,.42);stroke-width:2}
.lp .pill>b{position:relative;font:inherit;white-space:nowrap}

/* 3 the chart: their amber glow on black for every category (--pc-surface-hero-orange, the card's default
   accent); a pick only leans the glow toward lime (in the money) or red (out of it), it never recolours the card */
.wr-field::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity .6s ease,background .6s ease;
  background:radial-gradient(90% 70% at 100% 0%,color-mix(in srgb,var(--glow,var(--lime)) 30%,transparent) 0%,transparent 62%)}
.wr[data-tone=win] .wr-field::after{--glow:var(--lime);opacity:.55}
.wr[data-tone=loss] .wr-field::after{--glow:var(--red);opacity:.55}
@media (prefers-reduced-motion:reduce){.wr-field::after{transition:none}}

/* 4 the hero's right side: the card, and beside it the people in the pot */
.lp .hm{container-type:normal;max-width:none;width:100%}
.lp .hm-card{container-type:inline-size;min-width:0}
.lp .hm-row{display:grid;grid-template-columns:minmax(0,480px) 212px;gap:22px;align-items:start;justify-content:end}
.lp .hm-cap{max-width:714px;margin-left:auto}
.lp .hgrid{grid-template-columns:minmax(0,1fr) auto;gap:44px}
/* the entries: their activity-row voice (account in Futura PT Cond, the pick chip of their prediction row, the
   amount in mono) on their leaderboard row plate (.lrow: #161616, 2px #343434, the cream keyline for YOU) */
.ent{--max:6;--step:46px;min-width:0;padding-top:4px}
.ent-h{display:grid;gap:6px;padding-bottom:12px;border-bottom:2px solid #2A2724}
.ent-k{margin:0;display:flex;align-items:center;gap:8px;font-family:var(--data);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#B8B3A7}
.ent-k::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--no);animation:dsblink 1.2s step-end infinite}
.ent[data-state=settled] .ent-k::before{background:#5b5750;animation:none}
.ent-pot{margin:0;display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.ent-pk{font-family:var(--data);font-weight:800;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}
.ent-pot b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:30px;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums;text-shadow:2px 2px 0 #000}
.ent-m{margin:0;font-family:var(--data);font-weight:700;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow)}
.ent-l{position:relative;height:calc(var(--max) * var(--step) - 6px);margin:14px 0 0;padding:0;list-style:none;overflow:hidden}
.ent-r{position:absolute;left:0;right:3px;top:0;height:40px;box-sizing:border-box;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(52px,auto);align-items:center;gap:8px;padding:0 10px 0 11px;
  border:2px solid #343434;border-radius:0;background:#161616;transform:translateY(calc(var(--i) * var(--step)));transition:transform .45s var(--ease),opacity .45s var(--ease),border-color .3s,background-color .3s}
.ent-r[data-in]{opacity:0;transform:translateY(calc(var(--i) * var(--step) - 18px))}
.ent-r[data-out]{opacity:0}
.ent-n{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--call);font-style:oblique;font-weight:500;font-size:17px;line-height:1;text-transform:uppercase;color:#F0EAD9}
.ent-s{display:inline-flex;align-items:center;justify-content:center;min-width:30px;padding:3px 6px 2px;border:2px solid #000;box-shadow:2px 2px 0 #000;font-family:var(--shout);font-style:italic;font-weight:800;font-size:13px;line-height:1;text-transform:uppercase;color:#fff;text-shadow:1.5px 1.5px 0 #000;background:var(--yes)}
.ent-r[data-side=lower] .ent-s{background:var(--no)}
.ent-a{justify-self:end;font-family:var(--data);font-weight:800;font-size:13px;color:#F0EAD9;font-variant-numeric:tabular-nums;white-space:nowrap}
/* yours: the leaderboard row's YOU keyline, the name on the yellow pick label of the card */
.ent-r[data-you]{border-color:#F0EAD9;background:#202020}
.ent-r[data-you] .ent-n{justify-self:start;padding:3px 7px 2px;background:var(--yellow);color:#0B0B0B;font-family:var(--data);font-style:normal;font-weight:800;font-size:12px;letter-spacing:.1em}
/* the bell: winners take their share in lime, the rest dim with their stake gone */
.ent-r[data-state=won]{border-color:color-mix(in srgb,var(--yes) 60%,#343434)}
.ent-r[data-state=won] .ent-a{font-family:var(--shout);font-style:italic;font-size:19px;color:var(--yes);text-shadow:1.5px 1.5px 0 #000}
.ent-r[data-state=lost]{opacity:.42}
.ent-r[data-state=lost] .ent-a{color:var(--no)}
.ent-r[data-you][data-state=lost]{opacity:.7}
.ent-f{margin:12px 0 0;min-height:2.6em;font-family:var(--data);font-weight:700;font-size:11px;line-height:1.35;letter-spacing:.08em;text-transform:uppercase;color:var(--meta)}
.ent[data-state=settled] .ent-f{color:var(--yellow)}
@media (prefers-reduced-motion:reduce){.ent-r{transition:none}.ent-k::before{animation:none}}
html.static .ent-k::before{animation:none}

/* below 1180 the card and the copy share the row, so the entries go under the card, four rows */
@media (max-width:1180px){
 .lp .hgrid{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:40px}
 .lp .hm-row{grid-template-columns:minmax(0,1fr);gap:0;justify-content:stretch}
 .lp .hm-cap{max-width:none}
 .ent{--max:4;margin-top:26px;padding-top:0}
 .ent-h{grid-template-columns:auto 1fr;align-items:baseline;column-gap:16px}
 .ent-k{grid-column:1/-1}
 .ent-m{justify-self:end}
 .ent-f{min-height:0}
}
@media (max-width:959px){.lp .hgrid{grid-template-columns:minmax(0,1fr)}.lp .hm{max-width:560px}}
@media (max-width:760px){
 .lp .hm{max-width:none}
 .lp .pill{height:36px;padding:2px 28px 0 24px;font-size:15px;filter:drop-shadow(3px 3px 0 #000)}
 .ent{margin-top:22px;--step:44px}
 .ent-r{height:38px}
 .ent-pot b{font-size:26px}
 .ent-n{font-size:16px}
}

/* 5 review: one chip for the one offer, wherever it appears (the panel's kicker takes the hero pill's notched chip) */
.lp .bkick{position:relative;display:inline-flex;align-items:center;height:38px;padding:2px 32px 0 28px;background:none;box-shadow:none;filter:drop-shadow(3px 3px 0 rgba(0,0,0,.45))}
.lp .bkick>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lp .bkick>svg path{fill:#0B0B0B;stroke:#0B0B0B;stroke-width:2}
.lp .bkick>b{position:relative;font:inherit;white-space:nowrap}
/* headlines and the hero copy break where they read best: no one-word last line */
.lp .shd .h2,.lp .bh{text-wrap:balance}
.lp .hero .sub,.lp .hero .how1,.lp .hero .ben,.lp .bbody,.lp .lede{text-wrap:pretty}
@media (max-width:760px){.lp .bkick{height:34px;padding:2px 26px 0 22px}}

/* owner 2026-10-02: no drifting hero art; the subtle grey mascot wall stays, fixed */
.hart{display:none!important}
.hbg,.hbg i{transform:none!important;animation:none!important}

/* owner 2026-10-02: the chip is a calm slanted plate drawn as SVG, so the keyline shows on every side */
.lp .pill,.lp .bkick{position:relative;display:inline-flex;align-items:center;height:auto;padding:9px 26px 8px 24px;
  background:none;clip-path:none;box-shadow:none;filter:drop-shadow(3px 3px 0 #000)}
.lp .pill>svg,.lp .bkick>svg{display:block;position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.lp .pill>svg path{fill:#151413;stroke:rgba(240,234,217,.4);stroke-width:1.5}
.lp .bkick>svg path{fill:#0B0B0B;stroke:#0B0B0B;stroke-width:1.5}
.lp .pill>b,.lp .bkick>b{position:relative;font:inherit;white-space:nowrap;line-height:1}
.lp .pill{font-size:15px;letter-spacing:.08em;color:var(--yellow)}
.lp .bkick{font-size:14px;color:var(--paper)}

/* owner 2026-10-02: one even rhythm in the phone hero; no dead gap between the CTA and the category tabs */
@media (max-width:760px){
  .lp .pill{font-size:13px;padding:8px 22px 7px 20px}
  .hero{padding:20px 0 40px}
  .hero h1{margin-top:18px}
  .hgrid{gap:28px!important}
  .lp .hm-tabs{margin-bottom:12px}
}

/* owner 2026-10-02: the empty right of the phone headline holds three live round tickets, one per category,
   one line each, kept inside the headline's own height so nothing below is covered */
.hstk{display:none}
@media (max-width:760px){
  .hhead{position:relative}
  .hstk{display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;gap:8px;position:absolute;right:0;top:20px;bottom:6px}
  .tk{display:flex;align-items:center;gap:8px;height:34px;padding:0 8px 0 10px;background:#151413;transform:rotate(var(--r));
    border-left:4px solid var(--c);box-shadow:3px 3px 0 #000;outline:1px solid rgba(240,234,217,.14)}
  .tk:nth-child(2){margin-right:12px}
  .tk i{font-family:var(--shout);font-style:italic;font-weight:800;font-size:13px;letter-spacing:.05em;color:var(--c)}
  .tk b{font-family:var(--data);font-weight:800;font-size:13px;color:var(--paper);font-variant-numeric:tabular-nums;transition:color .3s;min-width:7ch;text-align:right}
  .tk em{font-style:normal;font-family:var(--data);font-weight:800;font-size:11px;padding:3px 6px;color:#0B0B0B}
  .tk em.u{background:var(--yes)}.tk em.d{background:var(--no);color:var(--paper)}
  .tk b.up{color:var(--yes)}.tk b.dn{color:var(--no)}
}
@media (max-width:370px){.tk{gap:6px;padding:0 6px 0 8px}.tk i,.tk b{font-size:12px}.tk b{min-width:6.5ch}.tk:nth-child(2){margin-right:6px}}

/* how it works: the tab panel is the frame; the picture's own keyline frame inside it made three nested boxes on step 2 (2026-10-02) */
.lp .sart{background:none;clip-path:none}.lp .sart::before{display:none}

/* the hero runs under the transparent header (owner 2026-10-02: no band at the top, the art shows through until scroll) */
.lp main>.hero:first-child,body>main>.hero:first-of-type{margin-top:-70px;padding-top:126px}
@media (max-width:960px){.lp main>.hero:first-child,body>main>.hero:first-of-type{margin-top:-60px}}

/* ══ v3, client feedback 2026-10-02 ══════════════════════════════════════════════════════════════════════
   order: hero (the one signup) + the orange referral band as one opening, the numbers as one compact band,
   how it works with a looping picture per step, compare, footer. */
/* the opening: the hero hands straight over to the orange band, no section break between them */
.lp main>.hero:first-child{padding-bottom:36px}
.crew{position:relative;padding:0 0 88px}
.crew .bpanel{grid-template-columns:minmax(0,1.3fr) minmax(0,.7fr);gap:40px;padding:44px 56px 44px 52px}
.crew .bh{margin-top:18px;font-size:clamp(38px,4vw,58px)}
.crew .bbody{margin-top:16px}
.crew .orbit{max-width:300px}
.crew .bact{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:26px}
.crew .bact[hidden]{display:none}
.bgo{display:inline-flex;align-items:center;justify-content:center;flex:none;height:58px;padding:0 34px 0 30px;font-size:24px;color:var(--paper);background:none;border:0;cursor:pointer;text-decoration:none}
.bgo span{font-family:var(--read);font-style:normal}
.bgo:focus-visible{outline:3px solid #0B0B0B;outline-offset:3px}
.bhint{margin:0;max-width:280px;font-family:var(--data);font-weight:700;font-size:12px;line-height:1.45;color:#141414}
.crew .bdone{margin-top:26px}

/* the numbers: one band. The heading on the left, three figures on the right, nothing tall */
.lp .sec.nums{padding:56px 0}
.nrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:48px;align-items:end}
.nk{margin:0 0 10px;font-family:var(--data);font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.nums .h2{margin:0;font-size:clamp(44px,4.6vw,64px)}
.nlede{margin:10px 0 0;max-width:470px;font-family:var(--read);font-size:17px;line-height:1.45;color:#d9d3c3;text-wrap:pretty}
.nfig{display:flex;margin:0}
.nfig>div{display:flex;flex-direction:column-reverse;justify-content:flex-end;padding:0 0 0 32px;margin-left:32px;border-left:2px solid #2A2724}
.nfig>div:first-child{margin-left:0}
.nfig dd{margin:0;padding-bottom:12px;font-family:var(--shout);font-style:italic;font-weight:800;font-size:64px;line-height:.9;color:var(--paper);text-shadow:3px 3px 0 #000;font-variant-numeric:tabular-nums;
  background:linear-gradient(var(--b),var(--b)) left bottom/44px 4px no-repeat}
.nfig dt{margin-top:10px;font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--meta)}

/* how it works, the pictures (landing.js 3b): a question plate, the YES / NO pots, chips, the winners' meters */
.lp .sart.stg{--dw:28px;--dh:13px;--fh:112px;--lh:36px;--mh:58px;--stamp-fs:30px;display:block;padding:4px 10px 10px 0;overflow:hidden;min-height:0}
.stw{display:flex;flex-direction:column;gap:16px}
.qplate{align-self:flex-start;margin:0;padding:10px 16px 8px;background:#EFE9D8;color:#0B0B0B;border:2px solid #0B0B0B;box-shadow:4px 4px 0 #000;
  font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;line-height:1;text-transform:uppercase}
.qplate em{font-style:inherit}
.pyrow{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.stg .cm-pays{position:relative;justify-self:start;transform-origin:0 50%}
.ptbl{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:6px}
.pot{--c:var(--yes);box-shadow:5px 5px 0 #000;transition:opacity .4s var(--ease)}
.pot.n{--c:var(--no)}
.face{position:relative;height:var(--fh);background:color-mix(in srgb,var(--c) 16%,#0E0D0C);border:3px solid var(--c);border-bottom:0}
.lip{display:flex;align-items:center;justify-content:space-between;gap:8px;height:var(--lh);margin:0;padding:0 14px;background:var(--c);color:#0B0B0B;border-top:2px solid #0B0B0B}
.lip b{font-family:var(--shout);font-style:italic;font-weight:800;font-size:22px;letter-spacing:.14em;text-transform:uppercase}
.lip .amt{font-family:var(--data);font-weight:800;font-size:15px;font-variant-numeric:tabular-nums}
.pot.n .lip{color:#FFFFFF}
.pot.lost{opacity:.45}
.dk{position:absolute;width:var(--dw);height:var(--dh);border-radius:50%;background:#FFA800;border:1.5px solid #0B0B0B;box-sizing:border-box;
  box-shadow:0 2px 0 #B87400,0 3.5px 0 #0B0B0B;transform:translate(-50%,-50%)}
.dk.you{background:#FAF424;box-shadow:0 2px 0 #A8A000,0 3.5px 0 #0B0B0B}
.stg .cm-tag{--cm-fs:13px}
.tgt{position:absolute;width:calc(var(--dw) * 2.3);height:calc(var(--dh) * 2.6);border:2px dashed var(--yes);border-radius:50%;box-sizing:border-box;transform:translate(-50%,-50%);opacity:0}
.hv{position:absolute;z-index:45;width:var(--dw);height:var(--dh);margin:calc(var(--dh) / -2) 0 0 calc(var(--dw) / -2)}
.hv .dk{left:50%!important;top:50%!important}
.hv .sp{position:absolute;bottom:100%;width:2px;background:rgb(239 233 216/.7);opacity:0;transform-origin:50% 100%}
.hv .sp:nth-of-type(1){left:18%;height:22px}.hv .sp:nth-of-type(2){left:calc(50% - 1px);height:34px}.hv .sp:nth-of-type(3){right:18%;height:26px}
.stg .iyou{margin:2px 0 0}
.ptbl .cm-stamp{z-index:70}
.mtrs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px}
.mbox{position:relative;display:block;height:var(--mh);background:#0E0D0C;border:2px solid #3A3531;box-shadow:4px 4px 0 #000}
.mtr.you .mbox{border-color:#F0EAD9}
.mfill{position:absolute;inset:0;background:var(--yes);transform-origin:50% 100%;transform:scaleY(0);transition:transform .22s cubic-bezier(.16,1,.3,1)}
.mlab{display:flex;align-items:baseline;justify-content:space-between;gap:6px;margin:8px 0 0}
.mh{font-family:var(--data);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--meta)}
.mtr.you .mh{color:var(--yellow)}
.mv{font-family:var(--shout);font-style:italic;font-weight:800;font-size:24px;line-height:1;color:var(--paper);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.mfill,.pot{transition:none}}
html.static .mfill,html.static .pot{transition:none}

@media (max-width:1180px){.crew .bpanel{grid-template-columns:minmax(0,1fr)}.crew .orbit{max-width:260px}}
@media (max-width:1100px){.nrow{grid-template-columns:minmax(0,1fr);gap:28px}}
@media (max-width:760px){
 .lp main>.hero:first-child{padding-bottom:28px}
 .crew{padding:0 0 56px}
 .lp .crew .bpanel{padding:30px 20px 26px;gap:22px}
 .crew .bh{font-size:clamp(34px,10.5vw,48px)}
 .crew .bact{flex-direction:column;align-items:stretch;gap:12px;margin-top:20px}
 .bgo{width:100%;height:52px;font-size:22px}
 .bhint{max-width:none}
 .lp .crew .orbit{max-width:200px;margin-top:0}
 .lp .sec.nums{padding:44px 0}
 .nums .h2{font-size:clamp(40px,12vw,52px)}
 .nlede{font-size:15.5px}
 .nfig{display:grid;grid-template-columns:auto auto auto;justify-content:start}
 .nfig>div{padding-left:14px;margin-left:14px}
 .nfig dd{font-size:clamp(26px,8.6vw,36px);padding-bottom:9px;background-size:28px 3px;text-shadow:2px 2px 0 #000}
 .nfig dt{font-size:11px;letter-spacing:.08em;margin-top:8px}
 .lp .sart.stg{--dw:22px;--dh:10px;--fh:86px;--lh:30px;--mh:44px;--stamp-fs:22px;padding:2px 6px 8px 0}
 .stw{gap:12px}
 .qplate{font-size:19px;padding:8px 12px 6px;box-shadow:3px 3px 0 #000}
 .ptbl,.pyrow{gap:12px}
 .lip{padding:0 10px}.lip b{font-size:18px;letter-spacing:.1em}.lip .amt{font-size:13px}
 .pot{box-shadow:4px 4px 0 #000}
 .stg .cm-pays{--cm-fs:11px}
 .stg .cm-tag{--cm-fs:12px}
 .mtrs{gap:10px;margin-top:28px}
 .mh{font-size:11px;letter-spacing:0}
 .mv{font-size:19px}
}
@media (max-width:374px){
 .nfig>div{padding-left:10px;margin-left:10px}
 .nfig dt{letter-spacing:.04em}
 .lp .sart.stg{--fh:78px}
 .qplate{font-size:17px}
 .mtrs{gap:8px}
 .mlab{flex-direction:column;align-items:flex-start;gap:2px}
}
/* step 1: room above the pots for the hovering chip and its YOU tag */
.ptbl.room{margin-top:40px}
@media (max-width:760px){.ptbl.room{margin-top:34px}}
@media (max-width:1100px){.nfig>div:first-child{border-left:0;padding-left:0}}
@media (max-width:760px){.lp .crew .orbit{max-width:184px}}