/* bet-on-traffic.com — "Signal" design system (vanilla CSS, mobile-first) */
@font-face{font-family:"Bricolage Grotesque";src:url(/fonts/bricolage.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Chivo Mono";src:url(/fonts/chivomono.woff2) format("woff2");font-weight:400 700;font-display:swap}

:root{
 --bg:#0A0A0A;--bg2:#121212;--bg3:#171717;--line:#262626;--line2:#333;
 --txt:#F5F5F2;--muted:#A3A39B; /* muted on #0A0A0A = 7.9:1 */
 --yel:#FFD400;--red:#FF3B30;--amb:#FFB000;--grn:#2ED573;--sign:#0F7A3D;
 --mono:"Chivo Mono",ui-monospace,SFMono-Regular,monospace;
 --sans:"Bricolage Grotesque",system-ui,-apple-system,"Segoe UI",sans-serif;
 --r:14px;--wrap:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--txt);font:16px/1.55 var(--sans);padding-bottom:72px;overflow-x:clip}
main{overflow-x:clip}
a{color:inherit}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{margin:0;letter-spacing:-.03em;line-height:1.05;font-weight:800}
p{margin:0}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 16px}
.skip{position:absolute;left:-999px;top:8px;background:var(--yel);color:#111;padding:8px 12px;z-index:100;border-radius:6px}
.skip:focus{left:8px}
.hz{height:10px;background:repeating-linear-gradient(135deg,var(--yel) 0 14px,var(--bg) 14px 28px)}
.kicker{display:block;font:700 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--yel)}
.fine{font:400 12px/1.45 var(--mono);color:var(--muted)}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:800 15px/1.2 var(--sans);padding:13px 18px;border-radius:999px;text-decoration:none;white-space:nowrap;position:relative;overflow:hidden;border:2px solid transparent;cursor:pointer;text-align:center;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.main{background:var(--yel);color:#111;box-shadow:0 14px 34px -12px rgba(255,212,0,.55)}
.btn.main::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.5) 50%,transparent 60%);transform:translateX(-120%);animation:sh 3.4s ease-in-out 1.2s infinite}
.btn.ghost{border-color:var(--line2);color:var(--txt);background:var(--bg2)}
.btn.sm{padding:8px 13px;font-size:13px}
@keyframes sh{to{transform:translateX(120%)}}

/* header */
.top{position:sticky;top:0;z-index:20;background:rgba(10,10,10,.9);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:10px;padding-bottom:10px}
.logo{text-decoration:none;font:800 16px var(--sans);letter-spacing:-.02em;display:inline-flex;align-items:center;gap:8px}
.logo b{color:var(--yel)}
.mini-tl{width:12px;height:28px;border-radius:6px;background:#1C1C1C;border:1px solid #2E2E2E;display:grid;gap:2px;padding:2px}
.mini-tl i{display:block;border-radius:50%;background:#222}
.mini-tl i:nth-child(1){background:var(--red)}.mini-tl i:nth-child(2){background:var(--amb)}.mini-tl i:nth-child(3){background:var(--grn)}
.nav{display:none;gap:18px;font:500 14px var(--sans);color:var(--muted)}
.nav a{text-decoration:none}.nav a:hover,.nav a[aria-current]{color:var(--txt)}
.top-r{display:flex;align-items:center;gap:8px}
.burger{width:40px;height:40px;border-radius:50%;border:1px solid var(--line2);background:var(--bg2);display:grid;place-content:center;gap:4px;cursor:pointer}
.burger span{display:block;width:16px;height:2px;background:var(--txt);border-radius:2px}
.mnav{border-top:1px solid var(--line);background:var(--bg2)}
.mnav .wrap{display:grid;padding-top:6px;padding-bottom:6px}
.mnav a{padding:12px 0;border-bottom:1px solid var(--line);text-decoration:none;font-weight:600}
.mnav a:last-child{border:0}
.crumbs{padding-top:10px;font:400 12px var(--mono);color:var(--muted)}
.crumbs ol{list-style:none;margin:0;padding:0;display:flex;gap:8px;flex-wrap:wrap}
.crumbs li+li::before{content:"/";margin-right:8px;opacity:.5}
.crumbs a{text-decoration:none}.crumbs a:hover{color:var(--txt)}

/* hero */
.hero{padding-top:12px;padding-bottom:8px}
.sig{display:grid;grid-template-columns:96px 1fr;gap:12px;align-items:stretch}
.light{background:#151515;border:2px solid #2A2A2A;border-radius:22px;padding:10px;display:grid;gap:10px;grid-auto-rows:min-content;align-content:center;box-shadow:inset 0 2px 0 rgba(255,255,255,.05),0 20px 40px -20px #000;position:relative}
.light::before{content:"";position:absolute;left:50%;top:-16px;width:24px;height:16px;background:#1C1C1C;transform:translateX(-50%);border-radius:6px 6px 0 0}
.lamp{aspect-ratio:1;width:100%;border-radius:50%;background:#1B1B1B;border:3px solid #0A0A0A;position:relative;transition:background .25s,box-shadow .25s}
.lamp::after{content:"";position:absolute;inset:18% 22% 48% 22%;border-radius:50%;background:rgba(255,255,255,.08)}
.s0 .l-red{background:var(--red);box-shadow:0 0 28px 6px rgba(255,59,48,.55)}
.s1 .l-amb{background:var(--amb);box-shadow:0 0 28px 6px rgba(255,176,0,.55)}
.s2 .l-grn{background:var(--grn);box-shadow:0 0 28px 6px rgba(46,213,115,.55)}
.board{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;align-content:space-between;gap:8px;position:relative;overflow:hidden}
.board::before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 3px);pointer-events:none}
.ph{font:700 11px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap}
.ph b{color:var(--txt)}
.s0 .ph b{color:var(--red)}.s1 .ph b{color:var(--amb)}.s2 .ph b{color:var(--grn)}
.seg{font:700 clamp(64px,20vw,120px)/.9 var(--mono);letter-spacing:-.04em;color:var(--yel);text-shadow:0 0 24px rgba(255,212,0,.35);font-variant-numeric:tabular-nums;transition:color .25s}
.seg small{font-size:.28em;color:var(--muted);letter-spacing:0;margin-left:6px;text-shadow:none}
.s2 .seg{color:var(--grn);text-shadow:0 0 24px rgba(46,213,115,.4)}
.msg{font:500 13.5px/1.35 var(--sans);color:var(--muted);min-height:2.6em}
.msg b{color:var(--txt)}
.prog{height:6px;background:#222;border-radius:3px;overflow:hidden}
.prog i{display:block;height:100%;width:0;background:var(--amb);transition:width .1s linear}
.s2 .prog i{background:var(--grn)}
.pick{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.pick button{appearance:none;border:1px solid var(--line2);background:var(--bg3);color:var(--txt);border-radius:9px;padding:7px 4px;font:700 12px/1.15 var(--sans);cursor:pointer}
.pick button small{display:block;font:400 10.5px var(--mono);color:var(--muted);margin-top:2px}
.pick button[aria-pressed="true"]{border-color:var(--yel);background:rgba(255,212,0,.12);color:var(--yel)}
.pick button[aria-pressed="true"] small{color:var(--yel)}
.copy .kicker{margin-top:18px}
h1{font-size:clamp(30px,9vw,72px);line-height:.95;letter-spacing:-.04em;margin:6px 0 12px;text-transform:uppercase;font-variation-settings:"opsz" 96}
h1 em{font-style:normal;color:var(--yel)}
.ans{font-size:16px;color:#D4D4CF;padding-left:14px;border-left:4px solid var(--yel)}
.ans b{color:var(--txt)}
.ctas{display:flex;gap:10px;margin-top:16px}
.ctas .btn{flex:1 1 0;min-width:0;white-space:normal}
.age{margin-top:10px;font:400 12px var(--mono);color:var(--muted)}

/* chapters */
.ch{padding:36px 0;position:relative}
.ch.tint{background:var(--bg2);border-block:1px solid var(--line)}
.ch.tint2{background:linear-gradient(180deg,#0A0A0A,#141208 50%,#0A0A0A)}
.ch-h{display:grid;gap:8px;margin-bottom:18px;max-width:760px}
.ch-h h2{font-size:clamp(26px,6.4vw,44px);text-transform:uppercase}
.ch-h .lead{font-size:16.5px;color:#D4D4CF}
.ch-h.med{grid-template-columns:72px 1fr;align-items:center;column-gap:14px}
.ch-h.med .kicker,.ch-h.med h2,.ch-h.med .lead{grid-column:2}
.ch-h.med .lead{grid-column:1/-1}
.med-img{grid-row:1/3;width:72px;height:72px;border-radius:50%;background:radial-gradient(circle at 50% 45%,#222,#0A0A0A 70%);border:1px solid var(--line2);overflow:hidden;display:grid;place-items:center}
.med-img img{width:100%;height:100%;object-fit:cover;mix-blend-mode:screen;animation:fl 7s ease-in-out infinite}
@keyframes fl{0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-3px) rotate(2deg)}}
.prose{display:grid;gap:12px;font-size:16px;color:#D4D4CF;max-width:760px}
.prose b{color:var(--txt)}
.two{display:grid;gap:18px}
.sidefig{display:none}

/* tiles / cards */
.tiles{display:grid;gap:10px}
.tile{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:6px;position:relative;transition:transform .2s,border-color .2s}
.tile:hover{transform:translateY(-2px);border-color:var(--line2)}
.tile .kicker{color:var(--muted)}
.tile h3{font-size:18px}
.tile p{font-size:14px;color:var(--muted)}
.tile.hot{border-color:rgba(255,212,0,.45);background:linear-gradient(180deg,rgba(255,212,0,.08),transparent 60%),var(--bg3)}
.tile.hot .kicker{color:var(--yel)}

/* phases timeline */
.phs{display:grid;gap:8px;position:relative}
.p{display:grid;grid-template-columns:46px 1fr;gap:12px;align-items:start;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:12px;--c:var(--yel)}
.p i{width:46px;height:46px;border-radius:50%;border:3px solid #0A0A0A;background:var(--c);box-shadow:0 0 18px 2px color-mix(in srgb,var(--c) 60%,transparent);display:grid;place-items:center;font:700 13px var(--mono);color:#111}
.p b{display:block;font-size:16px}.p p{margin:2px 0 0;font-size:13.5px;color:var(--muted)}
.p small{font:700 10px var(--mono);letter-spacing:.14em;color:var(--c);text-transform:uppercase}

/* markets widget */
.mkt{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:12px;min-width:0;align-self:start}
.mkt .row{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
.mkt .line{font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mkt .line b{color:var(--yel);font-size:16px;letter-spacing:0}
.mkt .line input{accent-color:var(--yel);vertical-align:middle;width:min(120px,40vw)}
.strip{display:grid;grid-template-columns:repeat(19,minmax(0,1fr));gap:2px;min-width:0}
.strip i{aspect-ratio:1/1.6;min-width:0;border-radius:3px;background:#1E1E1E;display:grid;place-items:center;font:700 clamp(7px,2.2vw,10px) var(--mono);color:#8A8A84;overflow:hidden;font-style:normal;transition:background .2s,color .2s,transform .2s}
.strip i.win{background:var(--grn);color:#03210F;transform:scaleY(1.08)}
.strip i.line{outline:2px solid var(--yel);outline-offset:-2px;color:var(--yel)}
.mkt .expl{font-size:14px;color:var(--muted);min-height:4.3em}
.mkt .expl b{color:var(--txt)}
.mkdefs{display:grid;gap:8px;margin-top:4px}
.mkdefs div{display:grid;grid-template-columns:34px 1fr;gap:10px;align-items:start;font-size:14px;color:var(--muted)}
.mkdefs i{width:34px;height:34px;border-radius:8px;background:var(--bg3);border:1px solid var(--line2);display:grid;place-items:center;font:700 14px var(--mono);color:var(--yel);font-style:normal}
.mkdefs b{color:var(--txt)}

/* vs panel */
.vs{display:grid;gap:10px}
.vs .side{background:var(--bg3);border:1px solid var(--line);border-radius:var(--r);padding:14px;display:grid;gap:8px}
.vs .side.cam{border-color:rgba(46,213,115,.4)}
.vs .side h3{font-size:18px;display:flex;align-items:center;gap:8px}
.vs .side h3 i{width:10px;height:10px;border-radius:50%;background:var(--muted)}
.vs .side.cam h3 i{background:var(--grn);box-shadow:0 0 10px var(--grn)}
.vs ul{margin:0;padding-left:18px;font-size:14px;color:var(--muted);display:grid;gap:4px}
.rcpt{background:#0B140E;border:1px solid rgba(46,213,115,.3);border-radius:var(--r);padding:14px;display:grid;gap:8px;position:relative;overflow:hidden}
.rcpt::before{content:"PROVABLY FAIR";position:absolute;right:-28px;top:14px;transform:rotate(35deg);background:var(--grn);color:#062;font:800 9px/1 var(--mono);letter-spacing:.14em;padding:4px 34px}
.rcpt .kicker{color:var(--grn)}
.rcpt dl{margin:0;display:grid;gap:6px}
.rcpt dl div{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:baseline;font:400 12px/1.4 var(--mono)}
.rcpt dt{color:var(--muted);white-space:nowrap}
.rcpt dd{margin:0;color:#D4D4CF;word-break:break-all}
.rcpt dd.g{color:var(--grn)}
.rcpt .step{display:flex;gap:6px;flex-wrap:wrap;font:700 10px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.rcpt .step span{border:1px solid rgba(46,213,115,.35);border-radius:999px;padding:4px 8px}
.rcpt .step span.on{background:rgba(46,213,115,.15);color:var(--grn)}
.callout{border:1px solid rgba(255,212,0,.4);background:linear-gradient(135deg,rgba(255,212,0,.1),transparent 60%),var(--bg2);border-radius:var(--r);padding:14px 16px;font-size:15px;color:#D4D4CF}
.callout b{color:var(--yel)}

/* feeds */
.feeds{display:grid;gap:8px}
.feed{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:end;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-decoration:none;position:relative;overflow:hidden;transition:transform .2s;aspect-ratio:4/3;isolation:isolate}
.feed img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .6s ease;filter:saturate(1.05) contrast(1.05)}
.feed:hover img{transform:scale(1.05)}
.feed::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(10,10,10,0) 45%,rgba(10,10,10,.55) 70%,rgba(10,10,10,.92) 100%)}
.feed .tag{position:absolute;left:12px;top:10px;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,10,10,.55);border:1px solid rgba(255,255,255,.18);padding:4px 7px;border-radius:999px;backdrop-filter:blur(4px)}
.feed .tag i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:5px;animation:blink 1.2s steps(2) infinite;vertical-align:middle}
@keyframes blink{50%{opacity:.25}}
.feed:hover{transform:translateY(-2px)}
.feed b{font-size:17px;display:block}
.feed small{font:400 12px var(--mono);color:var(--muted);display:block;margin-top:2px}
.feed .st{text-align:right;font:700 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.feed .st time{display:block;font:700 22px/1 var(--mono);color:var(--txt);letter-spacing:-.02em;margin-bottom:3px;font-variant-numeric:tabular-nums}
.feed[data-state="peak"] .st{color:var(--grn)}
.feed[data-state="day"] .st{color:var(--amb)}
.feed[data-state="night"] .st{color:#B0B0A8}
.feed[data-state="peak"]::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--grn)}
.feed.more{border-style:dashed}.feed.more img{filter:saturate(.6) brightness(.85)}
.feed.more .st{color:var(--muted)}
.legend{display:flex;gap:14px;flex-wrap:wrap;font:400 11.5px var(--mono);color:var(--muted);margin-top:10px}
.legend i{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:middle}

/* exits */
.exits{display:grid;gap:12px}
.ex{display:grid;background:var(--bg3);border:1px solid var(--line);border-radius:16px;overflow:hidden;text-decoration:none;color:var(--txt);box-shadow:0 16px 30px -16px #000;transition:transform .2s,border-color .2s}
.ex:hover{transform:translateY(-3px);border-color:var(--line2)}
.ex-sign{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;background:var(--sign);border-bottom:3px solid #fff;padding:10px 14px;box-shadow:inset 0 0 0 2px var(--sign),inset 0 0 0 4px rgba(255,255,255,.9)}
.ex .n{font:800 10px var(--sans);letter-spacing:.1em;text-transform:uppercase;background:#fff;color:var(--sign);padding:3px 6px;border-radius:4px;text-align:center;line-height:1.1}
.ex .n b{display:block;font-size:16px}
.ex-logo{height:30px;width:auto;max-width:190px;object-fit:contain;justify-self:start}
.ex .ar{font:800 24px var(--sans);color:#fff}
.ex-poster{position:relative;aspect-ratio:16/9;overflow:hidden;background:#000}
.ex-poster img{width:100%;height:100%;object-fit:cover;transition:transform .6s}
.ex:hover .ex-poster img{transform:scale(1.05)}
.ex-badge{position:absolute;left:10px;bottom:10px;font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#fff;background:rgba(10,10,10,.6);border:1px solid rgba(255,255,255,.2);padding:4px 8px;border-radius:999px;backdrop-filter:blur(4px)}
.ex-meta{display:grid;gap:2px;padding:12px 14px}
.ex-meta b{font:800 18px/1.1 var(--sans);letter-spacing:-.02em}
.ex-meta small{font:400 11.5px/1.4 var(--mono);color:var(--muted)}
.note{margin-top:10px;font:400 12.5px/1.45 var(--mono);color:var(--muted)}

/* faq */
.faq{display:grid;gap:8px;max-width:820px}
.faq details{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:0 14px}
.faq summary{cursor:pointer;list-style:none;padding:14px 0;font-weight:700;font-size:16px;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:700 22px/1 var(--mono);color:var(--yel);flex:none}
.faq details[open] summary::after{content:"–"}
.faq details p{padding:0 0 14px;font-size:15px;color:var(--muted)}

/* RG */
.rg{background:#140C0C;border:1px solid rgba(255,59,48,.35);border-radius:18px;padding:16px;display:grid;gap:10px}
.rg h2{font-size:20px;display:flex;align-items:center;gap:10px}
.rg h2 i{width:34px;height:34px;border-radius:50%;background:#FFB3AE;color:#3A0A07;display:grid;place-items:center;font:800 13px var(--sans);font-style:normal;flex:none}
.rg p{font-size:14.5px;color:#D4D4CF}
.rg ul{margin:0;padding-left:18px;font-size:14px;color:var(--muted);display:grid;gap:4px}

/* footer / sticky */
.foot{margin-top:40px;background:var(--bg2)}
.foot-in{display:grid;gap:22px;padding-top:28px;padding-bottom:20px}
.foot p{font-size:14px;color:var(--muted);margin-top:10px}
.foot-cols{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}
.foot-cols div{display:grid;gap:6px;align-content:start}
.foot-cols a{font-size:14px;text-decoration:none;color:#D4D4CF}
.foot-cols a:hover{color:var(--yel)}
.foot-b{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;padding-top:12px;padding-bottom:16px;border-top:1px solid var(--line);font:400 12px var(--mono);color:var(--muted)}
.sbar{position:fixed;left:0;right:0;bottom:0;z-index:30;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:rgba(10,10,10,.92);backdrop-filter:blur(10px);border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}
.sbar .btn{flex:1}.sbar small{font:700 11px var(--mono);color:var(--muted)}
.rail{display:none}

/* reveal */
html.js .reveal{opacity:0;transform:translateY(14px);transition:opacity .6s ease,transform .6s ease}
html.js .reveal.in{opacity:1;transform:none}

@media(min-width:640px){
 .tiles.c3{grid-template-columns:repeat(3,1fr)}
 .tiles.c2{grid-template-columns:repeat(2,1fr)}
 .feeds{grid-template-columns:repeat(2,1fr)}
 .vs{grid-template-columns:1fr 1fr}
 .foot-cols{grid-template-columns:repeat(3,1fr)}
}
@media(min-width:820px){
 body{padding-bottom:0}.sbar{display:none}.nav{display:flex}.burger{display:none}
 .hero{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;padding-top:28px;padding-bottom:16px}
 .sig{grid-template-columns:120px 1fr;min-height:400px}
 .copy .kicker{margin-top:0}
 .ch{padding:56px 0}
 .phs{grid-template-columns:repeat(5,1fr)}
 .p{grid-template-columns:1fr}.p i{margin-bottom:8px}
 .exits{grid-template-columns:repeat(3,1fr)}
 .feeds{grid-template-columns:repeat(4,1fr)}
 .two{grid-template-columns:1fr 1fr;align-items:start}
 .foot-in{grid-template-columns:1.1fr 1.4fr;gap:40px}
 .sidefig{display:grid;place-items:center}
 .sidefig img{width:min(100%,360px);mix-blend-mode:screen;filter:drop-shadow(0 20px 40px rgba(0,0,0,.8));animation:fl 8s ease-in-out infinite}
}
@media(min-width:1560px){
 .rail{display:block;position:fixed;top:88px;width:250px;z-index:5}
 .rail.l{left:calc(50% - var(--wrap)/2 - 280px)}
 .rail.r{right:calc(50% - var(--wrap)/2 - 280px)}
 .rail .box{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px;margin-bottom:12px}
 .rail .box.dark{background:#111;border-color:var(--line2)}
 .spy{display:grid;gap:2px;margin-top:8px}
 .spy a{display:flex;align-items:center;gap:10px;font-size:13.5px;text-decoration:none;color:var(--muted);padding:7px 8px;border-radius:8px}
 .spy a i{width:8px;height:8px;border-radius:50%;background:var(--c);opacity:.5}
 .spy a.on{color:var(--txt);background:var(--bg3)}.spy a.on i{opacity:1;box-shadow:0 0 8px var(--c)}
 .qf{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:10px 0 14px}
 .qf dt{font:700 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
 .qf dd{margin:2px 0 0;font:700 17px var(--mono);color:var(--yel)}
 .rail .btn{width:100%;margin-bottom:8px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important}
 html.js .reveal{opacity:1;transform:none}
}
.ex-logo-stake{height:34px}.ex-logo-roobet{height:42px}

/* sub-page hero */
.phero{padding-top:12px;padding-bottom:8px}
.phero-fig{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/10;background:#000}
.phero-fig img{width:100%;height:100%;object-fit:cover;animation:kb 18s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.phero-fig .tag{position:absolute;left:12px;top:12px;font:700 10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(10,10,10,.55);border:1px solid rgba(255,255,255,.18);padding:4px 8px;border-radius:999px;backdrop-filter:blur(4px)}
.phero-fig .tag i{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--red);margin-right:5px;animation:blink 1.2s steps(2) infinite;vertical-align:middle}
.phero-stats{position:absolute;left:0;right:0;bottom:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);background:linear-gradient(0deg,rgba(10,10,10,.92),rgba(10,10,10,.4));padding:12px}
.phero-stats div{padding:0 4px}
.phero-stats dt{font:700 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#C9C9C2}
.phero-stats dd{margin:2px 0 0;font:700 18px/1 var(--mono);color:var(--yel)}
@media(min-width:820px){.phero{display:grid;grid-template-columns:1.1fr 1fr;gap:32px;align-items:center;padding-top:28px;padding-bottom:16px}}

/* tz grid */
.tzg{background:var(--bg2);border:1px solid var(--line);border-radius:18px;padding:14px;display:grid;gap:10px}
.tzg-h{display:flex;justify-content:space-between;align-items:baseline;gap:10px;flex-wrap:wrap}
.tzg-now{font:700 12px var(--mono);color:var(--txt)}
.tzg-row{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:2px}
.tzg-row i{display:grid;place-items:center;aspect-ratio:1/2.2;border-radius:3px;background:#3A3A3A;font:700 clamp(7px,2vw,10px) var(--mono);color:#111;font-style:normal;min-width:0;overflow:hidden;position:relative}
.tzg-row i[data-s="peak"]{background:var(--grn)}.tzg-row i[data-s="day"]{background:var(--amb)}.tzg-row i[data-s="night"]{color:#E6E6E0}
.tzg-row i.now{outline:2px solid var(--yel);outline-offset:-2px}
.tzg-row i small{position:absolute;bottom:2px;font-size:.8em;opacity:.9}
.tzg-lab{display:flex;justify-content:space-between;gap:8px;flex-wrap:wrap;font:400 11px var(--mono);color:var(--muted)}
.tzg-lab i{display:inline-block;width:8px;height:8px;border-radius:50%;vertical-align:middle;margin:0 3px}
.tzg-lab i[style*="#555"]{background:#3A3A3A!important}

/* steps (how-to) */
.steps{display:grid;gap:10px;counter-reset:s}
.step{display:grid;grid-template-columns:48px 1fr;gap:12px;background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.step i{width:48px;height:48px;border-radius:12px;background:var(--yel);color:#111;display:grid;place-items:center;font:800 20px var(--sans);font-style:normal}
.step b{display:block;font-size:16px}.step p{margin:3px 0 0;font-size:14px;color:var(--muted)}
@media(min-width:820px){.steps{grid-template-columns:repeat(5,1fr)}.step{grid-template-columns:1fr}.step i{margin-bottom:8px}}

/* spec cards & compare */
.spec{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.spec div{background:var(--bg3);border:1px solid var(--line);border-radius:12px;padding:12px}
.spec dt{font:700 9.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.spec dd{margin:4px 0 0;font:700 18px/1.1 var(--mono);color:var(--yel)}
.spec dd small{display:block;font:400 11.5px var(--mono);color:var(--muted);margin-top:4px}
@media(min-width:640px){.spec{grid-template-columns:repeat(4,1fr)}}
.bars{display:grid;gap:8px}
.bar{display:grid;grid-template-columns:110px 1fr auto;gap:10px;align-items:center;font-size:13.5px}
.bar span:first-child{color:var(--muted)}
.bar .track{height:10px;background:#222;border-radius:5px;overflow:hidden}
.bar .track i{display:block;height:100%;width:var(--w);background:var(--yel);transition:width 1s ease}
.bar b{font:700 13px var(--mono)}
.signal-cycle{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.signal-cycle div{border-radius:12px;padding:12px;border:1px solid var(--line);background:var(--bg3);display:grid;gap:4px}
.signal-cycle i{width:18px;height:18px;border-radius:50%;background:var(--c);box-shadow:0 0 12px var(--c)}
.signal-cycle b{font-size:14px}.signal-cycle small{font:400 11.5px var(--mono);color:var(--muted)}
.chip{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line2);border-radius:999px;padding:4px 10px;font:700 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.t{width:100%;border-collapse:collapse;font-size:14px;min-width:520px}
table.t th{font:700 10px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);text-align:left;padding:8px 10px;border-bottom:1px solid var(--line2)}
table.t td{padding:10px;border-bottom:1px solid var(--line);vertical-align:top}
table.t td b{color:var(--txt)}
.legal{max-width:760px;display:grid;gap:12px;color:#D4D4CF;font-size:15.5px}
.legal h2{font-size:22px;margin-top:14px;text-transform:uppercase}
.legal ul{margin:0;padding-left:20px;color:var(--muted)}
@media(min-width:820px){.phs.c3{grid-template-columns:repeat(3,1fr)}.phs.c4{grid-template-columns:repeat(4,1fr)}}

/* wave fixes: timelines inside half-width columns stack vertically */
@media(min-width:820px){.two .phs,.two .steps{grid-template-columns:1fr}.two .phs .p,.two .steps .step{grid-template-columns:46px 1fr}.two .steps .step{grid-template-columns:48px 1fr}.two .phs .p i,.two .steps .step i{margin-bottom:0}}
/* figure band */
.figband{margin:0 0 18px;position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line);aspect-ratio:16/7;background:#000}
.figband img{width:100%;height:100%;object-fit:cover}
.figband figcaption{position:absolute;left:0;right:0;bottom:0;padding:10px 14px;font:400 12.5px/1.4 var(--mono);color:#E6E6E0;background:linear-gradient(0deg,rgba(10,10,10,.9),rgba(10,10,10,0))}
.figband figcaption b{color:var(--yel);font-weight:700}
.two .figband{aspect-ratio:4/3;margin:0}
/* exits: desktop density */
@media(min-width:820px){.exits{gap:16px}.ex-sign{padding:14px 18px}.ex-logo{height:36px;max-width:220px}.ex-logo-stake{height:40px}.ex-logo-roobet{height:48px}.ex .n{font-size:11px}.ex .n b{font-size:18px}.ex-poster{aspect-ratio:16/10}.ex-meta{padding:14px 18px 16px;grid-template-columns:1fr auto;align-items:center}.ex-meta b{font-size:22px;grid-row:1/3}.ex-meta small{grid-column:2;text-align:right}}