/* ============================================================
   DRAW — a lottery results broadcast
   Direction 1: On Air — full-viewport hard-cut slabs,
   foil-silver vault numeral, persistent right-edge score-bug.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Archivo:ital,wght@0,400;0,500;0,700;1,500&family=Big+Shoulders+Display:wght@600;900&family=Space+Mono:wght@400;700&display=swap');

/* ---- palette + tokens ------------------------------------ */
:root{
  --bg:#0A1A5E;
  --fg:#ECEEF8;
  --accent:#FF4255;
  --accent-text:#FF6B78;
  --muted:#8E97C8;
  --surface:#122470;

  --display:'Big Shoulders Display','Arial Narrow',sans-serif;
  --body:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'Space Mono',ui-monospace,'Courier New',monospace;

  --container:1180px;
  --gutter:72px;
  --bug-w:186px;

  --foil:linear-gradient(164deg,
    #FFFFFF 0%,#FBFCFF 8%,#C4CDEC 17%,#FFFFFF 27%,#FCFDFF 34%,
    #8B96C9 47%,#FFFFFF 57%,#EEF1FC 64%,#9AA4D0 76%,#FFFFFF 87%,#DDE2F4 100%);
  --bg-deep:rgba(3,9,38,.62);
  --card:linear-gradient(180deg,rgba(132,148,225,.13),rgba(132,148,225,0) 44%);
  --card-shadow:inset 0 1px 0 rgba(214,221,255,.10),0 26px 52px -34px rgba(0,4,24,.92);
  --hairline:rgba(142,151,200,.36);
  --hairline-2:rgba(142,151,200,.18);
}

/* ---- reset ----------------------------------------------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
html,body{overflow-x:hidden}
body{
  background:var(--bg);
  color:var(--fg);
  font-family:var(--body);
  font-weight:400;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block}
a{color:var(--accent-text);text-decoration:none}
ul{list-style:none}
button{font:inherit;cursor:pointer;border:0;background:none;color:inherit}
::selection{background:var(--accent);color:#fff}

/* ============================================================
   ATMOSPHERE — layered ground behind every page
   ============================================================ */
.ground{position:fixed;inset:0;z-index:-2;pointer-events:none}
.ground-tint{
  position:fixed;inset:0;z-index:-3;pointer-events:none;
  background:
    radial-gradient(120% 78% at 50% 4%, rgba(58,82,188,.62) 0%, rgba(10,26,94,0) 58%),
    radial-gradient(86% 64% at 50% 122%, rgba(255,66,85,.16) 0%, rgba(10,26,94,0) 56%),
    linear-gradient(180deg, rgba(15,31,108,.6) 0%, rgba(7,16,68,0) 22%);
}
.ground-vignette{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(135% 105% at 50% 40%, rgba(0,0,0,0) 46%, rgba(2,6,30,.78) 100%);
}
.ground-scan{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.42;
  background:repeating-linear-gradient(0deg, rgba(0,0,0,.16) 0 1px, transparent 1px 4px);
  mix-blend-mode:multiply;
}
.ground-grain{
  position:fixed;inset:0;z-index:-1;pointer-events:none;opacity:.05;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.guilloche{position:fixed;inset:0;z-index:-2;width:100%;height:100%;pointer-events:none;opacity:.14}

/* ============================================================
   TYPE TOKENS
   ============================================================ */
.numeral{
  font-family:var(--display);font-weight:900;
  font-size:clamp(150px,38vw,600px);
  line-height:.80;letter-spacing:.012em;
  background:var(--foil);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  position:relative;display:inline-block;
  filter:drop-shadow(0 14px 40px rgba(2,6,30,.6))
         drop-shadow(0 0 38px rgba(186,198,255,.22));
}
.numeral::after{
  content:attr(data-text);
  position:absolute;left:0;top:0;
  background:linear-gradient(100deg,
    transparent 38%,rgba(255,255,255,.55) 47%,#FFFFFF 50%,
    rgba(255,255,255,.55) 53%,transparent 62%);
  background-size:340% 100%;background-position:150% 0;
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  pointer-events:none;
  animation:glint 5200ms linear infinite;
}
.statement{
  font-family:var(--display);font-weight:900;
  font-size:clamp(46px,6.4vw,104px);line-height:.94;
  letter-spacing:-.005em;
}
.page-title{
  font-family:var(--display);font-weight:900;
  font-size:clamp(44px,6vw,84px);line-height:.94;
  letter-spacing:-.005em;
}
.board-label{
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.09em;
  font-size:clamp(13px,1.4vw,22px);color:var(--accent-text);
  line-height:1;
}
.section-title{
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(22px,2.4vw,30px);color:var(--fg);line-height:1.05;
}
.stat-value{
  font-family:var(--display);font-weight:900;
  font-size:clamp(34px,4vw,52px);line-height:.9;
  font-variant-numeric:tabular-nums;
}
.lead{
  font-family:var(--body);font-weight:500;
  font-size:clamp(19px,2vw,23px);line-height:1.5;
  color:var(--fg);max-width:640px;
}
.body,p.body{font-size:17px;line-height:1.62;max-width:640px;color:var(--fg)}
.caption{font-weight:500;font-size:15px;line-height:1.5;color:var(--muted)}
.quote-caption{
  font-weight:500;font-style:italic;
  font-size:clamp(18px,2vw,24px);line-height:1.4;color:var(--fg);
}
.eyebrow{
  font-family:var(--mono);font-weight:700;
  font-size:11px;text-transform:uppercase;letter-spacing:.14em;
  color:var(--muted);
}
.data-mono{font-family:var(--mono);font-size:13px;font-variant-numeric:tabular-nums}
.chyron-type{
  font-family:var(--mono);font-weight:400;
  font-size:12px;text-transform:uppercase;letter-spacing:.18em;color:var(--muted);
}
.accent{color:var(--accent-text)}

/* ============================================================
   SCORE-BUG — fixed right-edge odds ladder (index only)
   ============================================================ */
.score-bug{
  position:fixed;top:56px;right:0;z-index:50;
  width:var(--bug-w);height:calc(100vh - 56px);height:calc(100svh - 56px);
  display:flex;flex-direction:column;justify-content:center;gap:14px;
  padding:26px 20px;
  background:
    linear-gradient(180deg,rgba(8,18,66,.92),rgba(8,18,66,0) 15%,rgba(8,18,66,0) 85%,rgba(8,18,66,.92)),
    var(--surface);
  border-left:2px solid var(--accent);
  box-shadow:-20px 0 46px -30px rgba(0,0,0,.8);
}
.score-bug .bug-head{
  font-family:var(--display);font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--accent-text);
  display:flex;align-items:center;gap:8px;
  padding-bottom:11px;border-bottom:1px solid var(--hairline);
}
.score-bug .bug-head::before{
  content:"";width:7px;height:7px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 9px rgba(255,66,85,.95);
  animation:airpulse 1500ms ease-in-out infinite;
}
.ladder{display:flex;flex-direction:column}
.ladder li{
  font-family:var(--mono);font-weight:700;font-size:15px;
  font-variant-numeric:tabular-nums;letter-spacing:.01em;
  color:var(--fg);
  padding:6.5px 8px 6.5px 13px;position:relative;
  display:flex;justify-content:space-between;align-items:baseline;
  border-left:1.5px solid var(--hairline-2);
  opacity:.95;
}
.ladder li .in{color:var(--muted);font-weight:400;font-size:11.5px}
.ladder li.spent{opacity:.4}
.ladder li.live{
  opacity:1;color:var(--accent-text);font-size:22px;
  padding-top:11px;padding-bottom:11px;
  background:linear-gradient(90deg,rgba(255,66,85,.30),rgba(255,66,85,.04));
  border-left-color:var(--accent);
}
.ladder li.live .in{color:var(--accent-text);font-size:13px}
.ladder li.live::before{
  content:"";position:absolute;left:-1.5px;top:0;bottom:0;width:3px;
  background:var(--accent);
  box-shadow:0 0 13px rgba(255,66,85,1);
  animation:rungpulse 2400ms ease-in-out infinite;
}
.bug-counter{
  padding-top:12px;border-top:1px solid var(--hairline);
  display:flex;flex-direction:column;gap:4px;
}
.bug-counter .lbl{
  font-family:var(--mono);font-weight:700;font-size:9px;
  text-transform:uppercase;letter-spacing:.13em;color:var(--muted);
  line-height:1.3;
}
.bug-counter .val{
  font-family:var(--display);font-weight:900;font-size:30px;color:var(--fg);
  font-variant-numeric:tabular-nums;line-height:1;
}

/* mobile odds strip — hidden on desktop */
.odds-strip{display:none}

/* ============================================================
   CHANNEL STRIP — sub-page header
   ============================================================ */
.channel-strip{
  position:sticky;top:0;z-index:40;
  height:56px;
  background:var(--surface);
  border-bottom:1px solid var(--hairline);
  display:flex;align-items:center;
  padding:0 24px;gap:20px;
}
.channel-strip .brand{
  display:flex;align-items:center;gap:9px;flex-shrink:0;
  font-family:var(--display);font-weight:600;font-size:21px;
  letter-spacing:.04em;color:var(--fg);text-transform:uppercase;
}
.channel-strip .brand svg{width:22px;height:22px;color:var(--fg)}
.channel-strip .strip-chyron{
  font-family:var(--mono);font-size:11px;text-transform:uppercase;
  letter-spacing:.16em;color:var(--muted);
  padding:0 18px;border-left:1px solid var(--hairline);
  white-space:nowrap;
}
.channel-strip nav{
  margin-left:auto;display:flex;gap:20px;overflow-x:auto;
  scrollbar-width:none;
}
.channel-strip nav::-webkit-scrollbar{display:none}
.channel-strip nav a{
  font-family:var(--mono);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  white-space:nowrap;position:relative;padding:4px 0;
  transition:color 120ms ease-out;
}
.channel-strip nav a:hover{color:var(--fg)}
.channel-strip nav a[aria-current="page"]{color:var(--accent-text)}
.channel-strip nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:center;
  transition:transform 160ms ease-out;
}
.channel-strip nav a:hover::after,
.channel-strip nav a[aria-current="page"]::after{transform:scaleX(1)}

/* ============================================================
   INDEX — slabs
   ============================================================ */
.slab{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  padding:104px var(--gutter);
  padding-right:calc(var(--gutter) + var(--bug-w));
}
/* hard cut between slabs — a broadcast switcher edit */
.slab{border-top:1px solid var(--hairline)}
.slab::after{
  content:"";position:absolute;top:-1px;left:0;
  width:96px;height:4px;background:var(--accent);
  box-shadow:0 0 16px rgba(255,66,85,.7);
  pointer-events:none;z-index:1;
}
/* tonal rhythm — alternate slabs sink into a darker band so the
   page is not one continuous cobalt field hero-to-footer */
#beats,#replay{background:var(--bg-deep)}
/* base slabs get a faint top-light so they read as a lit stage too */
#odds::before,#rate::before,#register::before{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(120% 60% at 50% 0%, rgba(70,94,200,.22), rgba(10,26,94,0) 70%);
}
.slab-inner{width:100%;max-width:var(--container);margin:0 auto;position:relative;z-index:1}

/* corner bugs */
.corner{
  position:absolute;top:30px;z-index:5;
  font-family:var(--mono);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
}
.corner.left{left:var(--gutter)}
.corner.right{
  right:calc(var(--bug-w) + 34px);
  display:flex;align-items:center;gap:8px;color:var(--fg);
}
.on-air-dot{
  width:9px;height:9px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 8px rgba(255,66,85,.8);
  animation:airpulse 1500ms ease-in-out infinite;
}
.slab-stamp{
  position:absolute;top:30px;left:var(--gutter);z-index:4;
}

/* ---- Slab 1 — hero: asymmetric fold + scrolled readout -- */
.hero{position:relative}

/* the fold — the vault numeral struck off-centre, nothing else */
.hero-fold{
  position:relative;
  min-height:100vh;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  overflow:hidden;
}
.hero-spot{
  position:absolute;left:33%;top:43%;transform:translate(-50%,-50%);
  width:96vw;height:74vh;z-index:-1;pointer-events:none;
  background:radial-gradient(45% 50% at 50% 50%,
    rgba(152,170,255,.46),rgba(88,110,212,.17) 44%,rgba(10,26,94,0) 75%);
}
.hero-glow{
  position:absolute;left:0;right:0;top:0;height:36vh;z-index:-1;pointer-events:none;
  background:linear-gradient(180deg,rgba(122,142,232,.22),rgba(10,26,94,0));
}
.hero-stage{
  padding-left:var(--gutter);
  padding-right:calc(var(--bug-w) + 24px);
}
.hero .corner.left{
  font-family:var(--mono);font-weight:700;font-size:14px;
  letter-spacing:.34em;color:var(--accent-text);
  display:flex;align-items:center;
}
.hero .corner.left::before{
  content:"";width:20px;height:2px;background:var(--accent);
  margin-right:11px;box-shadow:0 0 9px rgba(255,66,85,.7);
}
.numeral{margin-left:-.035em}
.vault-unit{
  font-family:var(--display);font-weight:600;font-size:clamp(28px,4vw,64px);
  color:var(--muted);letter-spacing:.04em;display:none;
}
.lower-third{
  display:flex;align-items:stretch;
  margin-top:clamp(22px,3.6vh,46px);
  max-width:760px;
}
.lower-third .lt-bar{
  width:13px;background:var(--accent);flex-shrink:0;
  box-shadow:0 0 18px rgba(255,66,85,.6);
}
.lower-third .lt-text{
  font-family:var(--mono);font-weight:700;
  font-size:clamp(12px,1.4vw,17px);
  text-transform:uppercase;letter-spacing:.26em;color:var(--fg);
  padding:13px 20px;
  background:linear-gradient(90deg,rgba(20,38,118,.92),rgba(20,38,118,.5));
  border-block:1px solid var(--hairline-2);
  display:flex;align-items:center;
}
.lower-third .lt-rule{
  flex:1;align-self:center;height:1px;
  background:linear-gradient(90deg,var(--hairline),transparent);
}

/* the readout — first scrolled card carries the explanatory copy */
.hero-readout{
  position:relative;
  border-top:1px solid var(--hairline);
  padding:clamp(72px,11vh,130px) var(--gutter) clamp(66px,9vh,108px);
  padding-right:calc(var(--gutter) + var(--bug-w));
}
.hero-readout::after{
  content:"";position:absolute;top:-1px;left:0;
  width:96px;height:4px;background:var(--accent);
  box-shadow:0 0 16px rgba(255,66,85,.7);pointer-events:none;
}
.readout-inner{max-width:var(--container);margin:0 auto}
.hero-headline{
  font-family:var(--display);font-weight:600;
  font-size:clamp(31px,4.4vw,62px);line-height:1.02;
  letter-spacing:.004em;max-width:19ch;
}
.readout-cols{
  display:grid;grid-template-columns:1.3fr 1fr;gap:48px;
  margin-top:36px;padding-top:34px;
  border-top:1px solid var(--hairline-2);
}
.hero-sub{
  font-size:clamp(17px,1.35vw,19px);line-height:1.62;color:var(--fg);
}
.hero-vault-caption{max-width:none}
.stat-chips{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:46px;
  border:1px solid var(--hairline);
  background:var(--card),var(--surface);
  box-shadow:var(--card-shadow);
}
.chip{
  padding:26px 30px;
  display:flex;flex-direction:column;gap:11px;align-items:flex-start;
  border-left:1px solid var(--hairline-2);
}
.chip:first-child{border-left:0}
.chip .eyebrow{color:var(--muted)}
.chip .stat-value{color:var(--fg)}

/* ---- Slab 2 — odds: the 14-rung ladder board ------------ */
/* trimmed bottom padding so the board does not float above a void */
#odds{padding-block:88px 64px}
.odds-layout{
  display:grid;grid-template-columns:minmax(248px,328px) 1fr;
  gap:52px;align-items:center;margin-top:22px;
}
.odds-copy .statement{font-size:clamp(40px,4.8vw,66px);margin-bottom:24px}
.odds-copy .lead{margin-bottom:22px}
.odds-foot-cap{max-width:330px}

.odds-board{
  background:var(--card),linear-gradient(180deg,rgba(8,18,66,.5),rgba(8,18,66,.12)),var(--surface);
  border:1px solid var(--hairline);
  border-left:3px solid var(--accent);
  padding:10px 30px 6px;
  box-shadow:var(--card-shadow);
}
.rungs{display:flex;flex-direction:column;list-style:none}
.rung{border-top:1px solid var(--hairline-2)}
.rung:first-child{border-top:0}
.rung-main{
  display:grid;grid-template-columns:122px 1fr;align-items:center;
  gap:24px;padding:8px 0;
}
.rung-odds{
  font-family:var(--mono);font-weight:700;
  display:flex;align-items:baseline;gap:7px;
  font-variant-numeric:tabular-nums;
}
.rung-odds .r-in{
  color:var(--muted);font-size:10px;font-weight:400;letter-spacing:.09em;
}
.rung-odds .r-n{color:var(--fg);font-size:17px;letter-spacing:.01em}
.rung-slice{
  position:relative;height:13px;
  background:repeating-linear-gradient(90deg,var(--hairline-2) 0 1px,transparent 1px 10px);
  border:1px solid var(--hairline-2);
}
.slice-fill{
  position:absolute;left:0;top:0;bottom:0;
  width:var(--w);min-width:5px;
  background:linear-gradient(180deg,var(--muted),rgba(142,151,200,.5));
}
.rung.live{
  background:linear-gradient(90deg,rgba(255,66,85,.17),rgba(255,66,85,.02));
  margin:0 -30px;padding:0 30px;position:relative;border-top:0;
}
.rung.live::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:4px;
  background:var(--accent);box-shadow:0 0 16px rgba(255,66,85,.95);
}
.rung.live .rung-main{padding:15px 0 9px}
.rung.live .rung-odds .r-in{color:var(--accent-text);font-size:12px}
.rung.live .rung-odds .r-n{color:var(--accent-text);font-size:28px}
.rung.live .rung-slice{height:15px;border-color:rgba(255,66,85,.42)}
.rung.live .slice-fill{
  background:var(--accent);box-shadow:0 0 13px rgba(255,66,85,1);
}
.rung-counter{
  display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;padding:0 0 15px;
}
.rung-counter .rc-lbl{
  font-family:var(--mono);font-weight:700;font-size:10px;
  text-transform:uppercase;letter-spacing:.13em;color:var(--muted);
}
.rung-counter .rc-val{
  font-family:var(--display);font-weight:900;font-size:25px;color:var(--accent-text);
  font-variant-numeric:tabular-nums;line-height:1;
}

/* ---- Slab 3 — beats ------------------------------------- */
.slab-head{margin-bottom:46px}
.slab-head .statement{margin-top:14px}
.beats-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;
}
.beat-card{
  background:var(--card),var(--surface);
  border:1px solid var(--hairline);
  box-shadow:var(--card-shadow);
  padding:28px 30px 32px;
  display:flex;flex-direction:column;gap:16px;
}
.beat-card .beat-figure{
  width:100%;height:auto;
  border-bottom:1px solid var(--hairline-2);padding-bottom:18px;
}
.beat-card .eyebrow{color:var(--accent-text)}
.beat-card .body{font-size:16px}

/* ---- Slab 4 — same rate --------------------------------- */
.rate-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:38px;
}
.rate-card{
  background:var(--card),var(--surface);border:1px solid var(--hairline);
  box-shadow:var(--card-shadow);
  padding:36px 34px;
  display:flex;flex-direction:column;gap:22px;
}
.rate-card .rate-buy{
  font-family:var(--display);font-weight:900;
  font-size:clamp(30px,3.4vw,46px);line-height:.92;color:var(--fg);
}
.rate-flow{display:flex;flex-direction:column;gap:14px}
.rate-step{display:flex;align-items:center;gap:14px}
.rate-step .marker{
  width:11px;height:11px;flex-shrink:0;border:1.5px solid var(--accent);
  border-radius:50%;
}
.rate-step.is-result .marker{background:var(--accent)}
.rate-step .rate-label{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;color:var(--fg);
}
.rate-step .rate-label.muted{color:var(--muted)}
.rate-rule{height:1px;background:var(--hairline-2);margin-left:25px}
.rate-caption{margin-top:30px;text-align:center;max-width:620px;margin-inline:auto}

/* ---- Slab 5 — instant replay ---------------------------- */
.scratch-panel{
  background:var(--card),var(--surface);border:1px solid var(--hairline);
  box-shadow:var(--card-shadow);
  padding:38px 36px 40px;margin-top:34px;
}
.replay-body{margin-top:8px}
.steps-row{
  display:grid;grid-template-columns:repeat(4,1fr);gap:0;
  margin-top:30px;
}
.step-cell{
  padding:0 22px;border-left:1px solid var(--hairline-2);
  display:flex;flex-direction:column;gap:9px;
}
.step-cell:first-child{padding-left:0;border-left:0}
.step-num{
  font-family:var(--mono);font-weight:700;font-size:11px;color:var(--accent-text);
  letter-spacing:.1em;
}
.step-label{
  font-family:var(--mono);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
}
.step-value{
  font-family:var(--display);font-weight:900;font-size:21px;
  color:var(--fg);line-height:1;letter-spacing:.01em;
}
.step-note{font-size:13px;line-height:1.5;color:var(--muted)}
.replay-timeline-wrap{margin-top:34px}
.replay-timeline-wrap svg{width:100%;height:auto}
.replay-timeline-cap{margin-top:14px;max-width:560px}

/* result — the worked-draw scratch ticket */
.ticket-result{margin-top:34px}
.ticket-face{
  position:relative;
  display:grid;grid-template-columns:190px 1fr;
  background:
    radial-gradient(150% 130% at 6% 0%,rgba(255,66,85,.13),transparent 60%),
    var(--bg);
  border:1.5px solid var(--accent);
}
/* left stub — barcode + perforation seam */
.ticket-stub{
  position:relative;
  padding:26px;
  display:flex;flex-direction:column;justify-content:space-between;gap:26px;
  border-right:2px dashed var(--hairline);
}
.ticket-stub .stub-glyph{
  width:40px;height:40px;color:var(--muted);
}
.ticket-stub .stub-code{
  height:54px;
  background:repeating-linear-gradient(90deg,
    var(--muted) 0 2px,transparent 2px 5px,
    var(--muted) 5px 8px,transparent 8px 12px,
    var(--muted) 12px 13px,transparent 13px 18px);
  opacity:.5;
}
.ticket-stub::before,.ticket-stub::after{
  content:"";position:absolute;right:-10px;width:18px;height:18px;
  border-radius:50%;background:var(--bg);border:1.5px solid var(--accent);
}
.ticket-stub::before{top:-10px}
.ticket-stub::after{bottom:-10px}
/* main — the struck result + the scratch window */
.ticket-main{
  display:flex;align-items:center;gap:36px;flex-wrap:wrap;
  padding:34px 42px;
}
.result-window{position:relative;flex-shrink:0}
.result-stamp{
  display:flex;flex-direction:column;align-items:center;gap:3px;
  padding:16px 38px 18px;
  border:3px solid var(--accent);border-radius:52%/50%;
  box-shadow:inset 0 0 0 1.5px rgba(255,66,85,.38);
  transform:rotate(-6deg);
}
.result-tag{
  font-family:var(--mono);font-weight:700;font-size:10px;
  text-transform:uppercase;letter-spacing:.2em;color:var(--accent-text);
}
.result-hit{
  font-family:var(--display);font-weight:900;
  font-size:clamp(56px,7vw,96px);line-height:.82;
  color:var(--accent);letter-spacing:.03em;
}
.result-note{font-size:14px;color:var(--muted);max-width:266px;line-height:1.6}
/* foil — silver scratch-off layer, torn diagonal wipe.
   Resting state is CLEARED: a page that is never scrolled (a static
   capture, reduced-motion) shows the HIT result, never a blank foil.
   motion.js adds .is-armed to snap it shut once the page is scrolled,
   then removes it (with .can-wipe present) to play the reveal. */
.foil{
  position:absolute;inset:-14px -22px;z-index:3;cursor:pointer;
  border:1px solid rgba(255,255,255,.22);
  clip-path:polygon(100% 0,100% 100%,98% 100%,108% 80%,98% 60%,108% 40%,98% 20%,108% 0);
}
.foil svg{width:100%;height:100%}
.foil.is-armed{
  clip-path:polygon(100% 0,100% 100%,-6% 100%,6% 80%,-6% 60%,6% 40%,-6% 20%,6% 0);
}
.foil.can-wipe{
  transition:clip-path 300ms cubic-bezier(.16,1,.3,1);
}
.foil:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
.replay-quote{margin-top:36px;max-width:680px}
.replay-quote .quote-caption{text-indent:-.4em}

/* ---- Slab 6 — register: a framed broadcast board -------- */
.register-board{
  display:grid;grid-template-columns:minmax(300px,.94fr) 1.16fr;
  margin-top:40px;
  background:var(--card),var(--surface);
  border:1px solid var(--hairline);
  border-left:3px solid var(--accent);
  box-shadow:var(--card-shadow);
}
.register-head{
  padding:clamp(38px,4vw,56px) clamp(32px,3.4vw,48px);
  border-right:1px solid var(--hairline);
  display:flex;flex-direction:column;justify-content:space-between;gap:40px;
}
.register-head .statement{font-size:clamp(40px,4.6vw,68px)}
.register-seal{
  width:clamp(122px,14vw,166px);height:auto;align-self:flex-start;
  filter:drop-shadow(0 12px 28px rgba(2,6,30,.55));
}
.register-ledger{display:flex;flex-direction:column}
.reg-row{
  display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;
  padding:clamp(22px,2.5vw,30px) clamp(30px,3.2vw,46px);
  border-top:1px solid var(--hairline-2);
}
.reg-row:first-child{border-top:0}
.reg-idx{
  font-family:var(--mono);font-weight:700;font-size:13px;
  color:var(--accent-text);letter-spacing:.08em;padding-top:3px;
}
.reg-body{display:flex;flex-direction:column;gap:10px}
.reg-body .eyebrow{
  color:var(--accent-text);font-size:12px;letter-spacing:.1em;line-height:1.4;
}
.reg-body .reg-line{font-size:clamp(15px,1.15vw,17px);line-height:1.62;color:var(--fg)}

/* ============================================================
   FOOTER — 3-zone end credit
   ============================================================ */
.site-footer{position:relative;z-index:2;border-top:1px solid var(--hairline)}
.footer-main{
  max-width:var(--container);margin:0 auto;
  padding:56px var(--gutter);
  display:grid;grid-template-columns:1fr 1.3fr 1fr;gap:40px;align-items:start;
}
.footer-brand{
  display:flex;align-items:center;gap:11px;
  font-family:var(--display);font-weight:600;font-size:30px;
  letter-spacing:.04em;text-transform:uppercase;color:var(--fg);
}
.footer-brand svg{width:34px;height:34px;color:var(--fg)}
.footer-nav{
  display:grid;grid-template-columns:1fr 1fr;gap:10px 40px;
}
.footer-nav a{
  font-family:var(--mono);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  position:relative;width:fit-content;
  transition:color 120ms ease-out;
}
.footer-nav a:hover{color:var(--accent-text)}
.footer-cta{display:flex;flex-direction:column;gap:10px}
.footer-cta a{
  font-family:var(--mono);font-size:13px;letter-spacing:.04em;
  color:var(--fg);width:fit-content;position:relative;
  transition:color 120ms ease-out;
}
.footer-cta a:hover{color:var(--accent-text)}
.footer-cta a::after{
  content:"";position:absolute;left:0;right:0;bottom:-3px;height:1.5px;
  background:var(--accent);transform:scaleX(0);transform-origin:center;
  transition:transform 160ms ease-out;
}
.footer-cta a:hover::after{transform:scaleX(1)}
.footer-cta .footer-tag{
  font-family:var(--mono);font-size:11px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin-top:6px;
}

/* ============================================================
   SUB-PAGE — shared document shell
   ============================================================ */
.doc{
  max-width:var(--container);margin:0 auto;
  padding:0 var(--gutter);
}
.doc-narrow{max-width:760px}
.doc-head{
  padding:112px 0 0;
}
.doc-head .board-label{margin-bottom:18px}
.doc-head .lead{margin-top:26px}
.fold-rule{
  height:1px;background:var(--hairline);
  margin:64px 0;position:relative;
}
.fold-rule::after{
  content:"FOLD";
  position:absolute;right:0;top:-7px;background:var(--bg);
  padding-left:12px;
  font-family:var(--mono);font-size:9px;letter-spacing:.2em;color:var(--hairline);
}

/* ---- mechanic — alternating diagram rows ----------------- */
.mech-row{
  display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center;
  padding:74px 0;
  border-top:1px solid var(--hairline-2);
}
.mech-row:first-of-type{border-top:0}
.mech-row .mech-text{display:flex;flex-direction:column;gap:14px}
.mech-row.flip .mech-text{order:2}
.mech-row.flip .mech-figure{order:1}
.mech-text .eyebrow{color:var(--accent-text)}
.mech-figure svg{width:100%;height:auto}
.code-block{
  font-family:var(--mono);font-size:13.5px;line-height:1.7;
  background:var(--surface);border:1px solid var(--hairline);
  border-left:3px solid var(--accent);
  padding:24px 26px;color:var(--fg);
  overflow-x:auto;
}
.code-block .tok{color:var(--accent-text)}
.code-block .dim{color:var(--muted)}
.formula-cap{margin-top:16px;font-size:14px;line-height:1.6}
.mech-outro{
  margin-top:24px;padding:34px 0 96px;
  border-top:1px solid var(--hairline);
}
.mech-outro a{
  font-family:var(--display);font-weight:600;font-size:clamp(20px,2.4vw,30px);
  text-transform:uppercase;letter-spacing:.02em;color:var(--fg);
  display:inline-flex;align-items:baseline;gap:12px;
  transition:color 120ms ease-out;
}
.mech-outro a:hover{color:var(--accent-text)}
.mech-outro a .arrow{color:var(--accent-text)}

/* ---- whitepaper — reading column ------------------------- */
.paper{
  max-width:680px;margin:0 auto;padding:0 var(--gutter) 110px;
}
.paper-head{text-align:center;padding-top:96px}
.paper-head .page-title{margin-top:16px}
.paper-body{font-size:18px;line-height:1.72}
.paper-body p{margin:20px 0;color:var(--fg)}
.paper-body em{color:var(--muted);font-style:italic}
.paper-body h2{
  font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.03em;
  font-size:clamp(22px,2.6vw,30px);
  margin:54px 0 6px;color:var(--fg);
}
.paper-body h2 + p{margin-top:14px}
.paper-body h3{
  font-family:var(--display);font-weight:600;font-size:19px;
  text-transform:uppercase;letter-spacing:.04em;
  margin:34px 0 4px;color:var(--accent-text);
}
.paper-body a{
  color:var(--accent-text);border-bottom:1px solid rgba(255,66,85,.4);
  transition:border-color 120ms ease-out;
}
.paper-body a:hover{border-color:var(--accent-text)}
.paper-body code{
  font-family:var(--mono);font-size:.86em;
  background:rgba(142,151,200,.14);padding:2px 6px;color:var(--fg);
}
.paper-body pre{
  font-family:var(--mono);font-size:13px;line-height:1.65;
  background:var(--surface);border:1px solid var(--hairline);
  border-left:3px solid var(--accent);
  padding:22px 24px;margin:24px 0;overflow-x:auto;color:var(--fg);
}
.paper-body pre code{background:none;padding:0;font-size:13px}
.paper-body ul{margin:18px 0;padding-left:0}
.paper-body li{
  position:relative;padding-left:26px;margin:9px 0;color:var(--fg);
}
.paper-body li::before{
  content:"";position:absolute;left:4px;top:11px;
  width:7px;height:7px;background:var(--accent);
}
.paper-rule{height:1px;background:var(--hairline);margin:46px 0}
.paper-fig{margin:34px 0}
.paper-fig svg{width:100%;height:auto}
.paper-fig figcaption{
  margin-top:12px;font-family:var(--mono);font-size:11px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);text-align:center;
}
.paper-end{
  text-align:center;font-style:italic;color:var(--muted);
  font-size:17px;margin-top:48px;
}

/* ---- specs — data tables --------------------------------- */
.spec-cluster{
  padding:50px 0;border-top:1px solid var(--hairline-2);
}
.spec-cluster:first-of-type{border-top:0;padding-top:18px}
.spec-cluster .section-title{margin-bottom:24px}
.spec-row{
  display:flex;align-items:baseline;gap:14px;
  padding:14px 0;border-bottom:1px solid var(--hairline-2);
}
.spec-row .spec-key{
  font-family:var(--mono);font-weight:700;font-size:12px;
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted);
  white-space:nowrap;
}
.spec-row .spec-dots{
  flex:1;border-bottom:1px dotted var(--hairline);
  transform:translateY(-3px);min-width:24px;
}
.spec-row .spec-val{
  font-family:var(--mono);font-size:13px;color:var(--fg);
  text-align:right;font-variant-numeric:tabular-nums;
}
.spec-row.wide{flex-direction:column;gap:10px;align-items:flex-start}
.spec-row.wide .spec-dots{display:none}
.spec-row.wide .spec-val{
  text-align:left;width:100%;
  background:var(--surface);border:1px solid var(--hairline);
  border-left:3px solid var(--accent);
  padding:16px 18px;overflow-x:auto;white-space:nowrap;
}

/* ---- faq — single Q/A column ----------------------------- */
.faq-col{max-width:760px;margin:0 auto;padding:0 var(--gutter) 104px}
.faq-item{
  padding:34px 0;border-bottom:1px solid var(--hairline-2);
  display:grid;grid-template-columns:54px 1fr;gap:8px 20px;
}
.faq-item:last-child{border-bottom:0}
.faq-q-num{
  font-family:var(--mono);font-weight:700;font-size:13px;color:var(--accent-text);
  letter-spacing:.06em;padding-top:4px;
}
.faq-q{grid-column:2}
.faq-a{
  grid-column:2;font-size:17px;line-height:1.64;color:var(--muted);
  max-width:600px;margin-top:12px;
}

/* ---- security — stacked sections + caveat ---------------- */
.sec-section{
  padding:52px 0;border-top:1px solid var(--hairline-2);
}
.sec-section:first-of-type{border-top:0}
.sec-section .eyebrow{color:var(--accent-text);display:block;margin-bottom:12px}
.sec-section .section-title{margin-bottom:16px;max-width:760px}
.sec-section .body{max-width:680px;color:var(--fg)}
.sec-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.sec-grid svg{width:100%;height:auto}
.sec-caveat{
  background:var(--surface);
  border-left:3px solid var(--accent);
  padding:42px 44px;margin:26px 0;
}
.sec-caveat .caveat-flag{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--mono);font-weight:700;font-size:11px;
  text-transform:uppercase;letter-spacing:.13em;color:var(--accent-text);
  margin-bottom:14px;
}
.sec-caveat .caveat-flag::before{
  content:"";width:8px;height:8px;background:var(--accent);
  transform:rotate(45deg);
}

/* ============================================================
   KEYFRAMES
   ============================================================ */
@keyframes glint{
  0%,56%{background-position:175% 0}
  100%{background-position:-75% 0}
}
@keyframes airpulse{
  0%,100%{opacity:1;box-shadow:0 0 6px rgba(255,66,85,.5)}
  50%{opacity:.45;box-shadow:0 0 13px rgba(255,66,85,.95)}
}
@keyframes rungpulse{
  0%,100%{box-shadow:0 0 5px rgba(255,66,85,.5);opacity:.55}
  50%{box-shadow:0 0 14px rgba(255,66,85,1);opacity:1}
}
/* beat key-on — accent element wipes in on scroll */
[data-motion="beat"] .beat-active{
  clip-path:inset(0 100% 0 0);
  transition:clip-path 200ms cubic-bezier(.2,.8,.2,1);
}
[data-motion="beat"].is-keyed .beat-active{clip-path:inset(0 0 0 0)}

/* ============================================================
   RESPONSIVE — tablet
   ============================================================ */
@media (max-width:1040px){
  :root{--gutter:40px}
  .mech-row{grid-template-columns:1fr;gap:30px;padding:54px 0}
  .mech-row.flip .mech-text{order:1}
  .mech-row.flip .mech-figure{order:2}
  .sec-grid{grid-template-columns:1fr;gap:28px}
  .register-board{grid-template-columns:1fr}
  .register-head{border-right:0;border-bottom:1px solid var(--hairline)}
  .readout-cols{grid-template-columns:1fr;gap:26px}
  .footer-main{grid-template-columns:1fr 1fr}
}

/* ============================================================
   RESPONSIVE — mobile ≤720px
   ============================================================ */
@media (max-width:720px){
  :root{--gutter:20px}
  body{padding-bottom:48px}

  /* score-bug → bottom strip */
  .score-bug{display:none}
  .odds-strip{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    position:fixed;left:0;right:0;bottom:0;z-index:50;height:48px;
    padding:0 18px;
    background:linear-gradient(180deg,rgba(8,20,72,.96),rgba(10,26,94,.98));
    border-top:1px solid var(--hairline);
  }
  .odds-strip .strip-rung{
    font-family:var(--mono);font-weight:700;font-size:13px;
    color:var(--accent-text);letter-spacing:.04em;
    display:flex;align-items:center;gap:8px;
  }
  .odds-strip .strip-rung::before{
    content:"";width:7px;height:7px;background:var(--accent);border-radius:50%;
    box-shadow:0 0 8px rgba(255,66,85,.9);
  }
  .odds-strip .strip-next{
    font-family:var(--mono);font-size:10px;letter-spacing:.1em;
    text-transform:uppercase;color:var(--muted);
  }

  .slab{
    padding:88px var(--gutter) 76px;
    padding-right:var(--gutter);
  }
  .corner.right{right:var(--gutter)}
  .slab-stamp,.corner.left{left:var(--gutter)}

  .hero-stage{padding-left:var(--gutter);padding-right:var(--gutter)}
  .numeral{font-size:clamp(84px,27vw,230px)}
  .lower-third{margin-top:22px;max-width:none}
  .lower-third .lt-rule{display:none}
  .hero-readout{padding-right:var(--gutter)}
  .hero-headline{font-size:clamp(27px,7vw,40px)}
  .readout-cols{grid-template-columns:1fr;gap:22px;margin-top:26px;padding-top:26px}
  .stat-chips{grid-template-columns:1fr;margin-top:30px}
  .chip{border-left:0;border-top:1px solid var(--hairline-2)}
  .chip:first-child{border-top:0}

  .odds-layout{grid-template-columns:1fr;gap:30px}
  .odds-board{padding:8px 20px 4px}
  .rung-main{grid-template-columns:100px 1fr;gap:16px}
  .rung-odds .r-n{font-size:15px}
  .rung.live{margin:0 -20px;padding:0 20px}
  .rung.live .rung-odds .r-n{font-size:22px}
  .rung-counter{padding-bottom:13px}

  .beats-grid{grid-template-columns:1fr;gap:18px}
  .beat-card{padding:24px 22px 26px}
  .rate-grid{grid-template-columns:1fr;gap:18px}

  .scratch-panel{padding:26px 20px 30px}
  .steps-row{grid-template-columns:1fr;gap:0}
  .step-cell{
    padding:18px 0;border-left:0;
    border-top:1px solid var(--hairline-2);
  }
  .step-cell:first-child{border-top:0;padding-top:0}
  .ticket-face{grid-template-columns:1fr}
  .ticket-stub{
    flex-direction:row;align-items:center;gap:18px;
    padding:18px 20px;
    border-right:0;border-bottom:2px dashed var(--hairline);
  }
  .ticket-stub .stub-code{flex:1;height:38px}
  .ticket-stub::before,.ticket-stub::after{display:none}
  .ticket-main{padding:30px 24px;gap:26px}
  .foil{inset:-12px -16px}

  .register-board{grid-template-columns:1fr}
  .register-head{
    border-right:0;border-bottom:1px solid var(--hairline);
    padding:30px var(--gutter);gap:26px;
  }
  .register-head .statement{font-size:clamp(34px,9vw,52px)}
  .reg-row{padding:22px var(--gutter)}

  .footer-main{grid-template-columns:1fr;gap:34px;padding:44px var(--gutter)}
  .footer-brand{font-size:26px}

  .doc{padding:0 var(--gutter)}
  .doc-head{padding-top:80px}
  .channel-strip{padding:0 16px;gap:12px}
  .channel-strip .strip-chyron{display:none}

  .paper{padding:0 var(--gutter) 80px}
  .paper-head{padding-top:72px}
  .paper-body{font-size:17px}

  .spec-row{flex-direction:column;align-items:flex-start;gap:5px;padding:13px 0}
  .spec-row .spec-dots{display:none}
  .spec-row .spec-val{text-align:left}

  .faq-col{padding:0 var(--gutter) 80px}
  .faq-item{grid-template-columns:1fr;gap:6px}
  .faq-q-num{padding-top:0}
  .faq-q,.faq-a{grid-column:1}

  .sec-caveat{padding:30px 24px}
  .fold-rule{margin:46px 0}
}

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .numeral::after{display:none}
  .foil{display:none}
  [data-motion="beat"] .beat-active{clip-path:inset(0 0 0 0)}
  .ladder li.live::before{opacity:1;box-shadow:0 0 10px rgba(255,66,85,.9)}
}