/* Powerhood design system v8 — soft light, neumorphic
   Components are extruded from the page rather than drawn on top of it: the
   surface color equals the background, and depth comes from a paired
   highlight (top-left) and shade (bottom-right). Neutral grays throughout, one
   accent: the brand lime, bright where it fills and darkened where it carries
   text. Blue appears on links only. 8px rhythm. */

:root {
  /* Neutral grays only. The one accent is the brand lime, bright for fills and
     darkened to --lime-ink where it has to carry text. Blue is reserved for
     links and nothing else. */
  --bg: #ededed;
  --surface: #ededed;
  --surface-raised: linear-gradient(145deg, #f6f6f6, #e3e3e3);
  --surface-flat: #efefef;
  --text: #191919;
  --text-2: #5c5c5c;
  --text-3: #949494;
  --lime: #ccff00;
  --lime-hi: #ddff5c;
  --lime-mid: #b2e000;
  --lime-ink: #5c7500;
  --lime-deep: #3f5200;
  --blue: #0b62cc;
  --hairline: rgba(0, 0, 0, .11);
  --hairline-2: rgba(0, 0, 0, .06);
  --card-brd: rgba(255, 255, 255, .7);

  /* neumorphic depth, neutral shade + white highlight */
  --neu-hi: rgba(255, 255, 255, 1);
  --neu-lo: rgba(0, 0, 0, .27);
  --neu-out-sm: 5px 5px 11px var(--neu-lo), -5px -5px 11px var(--neu-hi);
  --neu-out: 9px 9px 20px var(--neu-lo), -8px -8px 18px var(--neu-hi);
  --neu-out-lg: 16px 16px 34px var(--neu-lo), -12px -12px 26px var(--neu-hi);
  --neu-in: inset 5px 5px 11px rgba(0, 0, 0, .28), inset -5px -5px 11px rgba(255, 255, 255, 1);
  --neu-in-sm: inset 3px 3px 6px rgba(0, 0, 0, .2), inset -3px -3px 6px rgba(255, 255, 255, 1);

  --shadow-sm: var(--neu-out-sm);
  --shadow-md: var(--neu-out);
  --radius: 22px;
  --blur: saturate(1.35) blur(14px);
  --paper: #f2f2f0;
  --paper-ink: #23231f;
}

/* ---------- dark theme ---------- */
:root[data-theme="dark"] {
  --bg: #17181b;
  --surface: #17181b;
  --surface-raised: linear-gradient(145deg, #202226, #131417);
  --surface-flat: #1b1c20;
  --text: #ededed;
  --text-2: #9fa0a4;
  --text-3: #6a6b6f;
  --lime-ink: #b2e000;
  /* --lime-deep is deliberately not re-themed: it is the ink printed on the
     lime chips, which keep their bright background in dark mode too. */
  --blue: #57a9ff;
  --hairline: rgba(255, 255, 255, .12);
  --hairline-2: rgba(255, 255, 255, .06);
  --card-brd: rgba(255, 255, 255, .07);
  --neu-hi: rgba(255, 255, 255, .045);
  --neu-lo: rgba(0, 0, 0, .55);
  --neu-in: inset 5px 5px 11px rgba(0, 0, 0, .6), inset -5px -5px 11px rgba(255, 255, 255, .04);
  --neu-in-sm: inset 3px 3px 6px rgba(0, 0, 0, .55), inset -3px -3px 6px rgba(255, 255, 255, .04);
}
/* Components that were painted with literal light values. */
:root[data-theme="dark"] .winner-pop {
  background: rgba(26, 28, 32, .82);
  border-color: rgba(255, 255, 255, .13);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .62), inset 0 1px 0 rgba(255, 255, 255, .06);
}
:root[data-theme="dark"] .ticket {
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(255, 255, 255, .45), transparent 40%),
    linear-gradient(145deg, #e7e5de, #cccac1);
  box-shadow: 10px 10px 26px rgba(0, 0, 0, .6), -6px -6px 16px rgba(255, 255, 255, .04);
}
:root[data-theme="dark"] .drum .glass {
  background:
    radial-gradient(11% 7% at 30% 15%, rgba(255, 255, 255, .35) 45%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(30% 20% at 33% 19%, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0) 75%),
    radial-gradient(56% 44% at 31% 24%, transparent 60%, rgba(255, 255, 255, .1) 66%, transparent 72%),
    radial-gradient(9% 6% at 67% 80%, rgba(255, 255, 255, .16) 40%, transparent 100%),
    radial-gradient(100% 100% at 50% 50%, transparent 58%, rgba(0, 0, 0, .1) 84%, rgba(0, 0, 0, .35) 99.6%);
  border: 1.5px solid rgba(255, 255, 255, .1);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .12),
    inset 0 -22px 40px rgba(0, 0, 0, .4),
    inset 0 16px 32px rgba(255, 255, 255, .08),
    18px 20px 44px rgba(0, 0, 0, .55), -10px -10px 26px rgba(255, 255, 255, .03);
}
:root[data-theme="dark"] .drum .glass::before { box-shadow: inset 0 2px 6px rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .05); }
:root[data-theme="dark"] .drum .glass::after { background: rgba(255, 255, 255, .5); }
:root[data-theme="dark"] .drum .sheen { background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.1) 42%, rgba(255,255,255,.02) 50%, transparent 60%); }
:root[data-theme="dark"] .timer .flap::after {
  background: rgba(0, 0, 0, .5); box-shadow: 0 1px 0 rgba(255, 255, 255, .07);
}
:root[data-theme="dark"] .timer .flap b { text-shadow: 0 1px 1px rgba(0, 0, 0, .6); }
:root[data-theme="dark"] .timer .flap {
  background: linear-gradient(145deg, #2a2c31, #17181c);
  border: 1px solid rgba(255, 255, 255, .08);
  box-shadow: 6px 6px 16px rgba(0, 0, 0, .5), -4px -4px 12px rgba(255, 255, 255, .03);
}
:root[data-theme="dark"] .timer .flap b { color: #ffffff; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); }
:root[data-theme="dark"] .timer .flap::before { background: rgba(0, 0, 0, .6); box-shadow: 1px 0 0 rgba(255, 255, 255, .05); }
:root[data-theme="dark"] tbody tr:hover { background: rgba(255, 255, 255, .04); }
/* logo swap + toggle icon. The `:root` prefix is load-bearing: `.brand .logo`
   sets display:block further down the file, and at equal specificity the later
   rule wins, so both logos rendered at once in light mode. */
:root .brand .logo-dark { display: none; }
:root[data-theme="dark"] .brand .logo-light { display: none; }
:root[data-theme="dark"] .brand .logo-dark { display: block; }
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 7px; margin-left: 6px; color: var(--text); border-radius: 10px; }
.theme-toggle:hover { background: var(--hairline-2); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .moon { display: none; }
:root[data-theme="dark"] .theme-toggle .sun { display: none; }
:root[data-theme="dark"] .theme-toggle .moon { display: inline; }


* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  overflow-x: hidden;
}

.wrap { max-width: 1400px; margin: 0 auto; padding: 0 24px 96px; }

/* ---------- floating navbar ---------- */
.site-header { position: sticky; top: 14px; z-index: 50; padding: 0 16px; }
.site-header .bar {
  position: relative;
  max-width: 1368px; margin: 0 auto; min-height: 62px;
  display: flex; align-items: center; gap: 12px;
  padding: 7px 10px 7px 18px; border-radius: 999px;
  background: var(--surface-raised);
  box-shadow: var(--neu-out);
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); flex-shrink: 0; }
.brand .logo { height: 32px; width: auto; display: block; }
.brand .chain { font-size: 12px; color: var(--text-3); margin-left: 2px; font-weight: 400; }
.site-nav { margin-left: auto; display: flex; gap: 4px; }
.site-nav a {
  font-size: 13.5px; color: var(--text-2); text-decoration: none; letter-spacing: .01em;
  padding: 10px 16px; border-radius: 999px; line-height: 1; white-space: nowrap;
  transition: color .18s, box-shadow .2s, background .2s;
}
.site-nav a:hover { color: var(--text); box-shadow: var(--neu-out-sm); }
.site-nav a.active {
  color: var(--text); font-weight: 600;
  background: var(--surface-flat);
  box-shadow: var(--neu-in-sm);
}
.nav-chip {
  display: inline-flex; align-items: center; gap: 7px; margin-left: 10px;
  padding: 10px 15px; border-radius: 999px; line-height: 1;
  background: linear-gradient(145deg, var(--lime-hi), var(--lime));
  color: var(--lime-deep);
  box-shadow: var(--neu-out-sm);
  font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.nav-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep); animation: pulse 2s ease-in-out infinite; }
.nav-toggle { display: none; align-items: center; justify-content: center; background: none; border: 0; cursor: pointer; padding: 7px; margin-left: 6px; color: var(--text); border-radius: 10px; }
.nav-toggle:hover { background: rgba(0,0,0,.06); }
.nav-toggle svg { width: 20px; height: 20px; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ---------- typography ---------- */
.kicker {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-2); display: flex; align-items: center; gap: 8px;
}
.kicker .ic { width: 15px; height: 15px; color: var(--text-3); }
.section { margin-top: 72px; }
.section > .kicker { margin-bottom: 20px; }
.lede { font-size: 16px; color: var(--text-2); max-width: 56ch; margin-top: 22px; line-height: 1.65; }

/* Page mastheads: the hero's display voice, one notch quieter, extruded to
   sit in the same material as the cards. */
.page-head { padding: 64px 0 0; }
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .16em;
  color: var(--text-2); margin-bottom: 22px;
  padding: 7px 15px 7px 12px; border-radius: 999px;
  background: var(--surface-flat); box-shadow: var(--neu-in-sm);
}
.page-eyebrow::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
  background: var(--lime); box-shadow: 0 0 0 3px rgba(204, 255, 0, .22);
}
.page-title {
  font-size: clamp(40px, 8vw, 78px); font-weight: 800; text-transform: uppercase;
  /* -.03em pulled `$P` into a collision; this still reads tight without it */
  letter-spacing: -.022em; line-height: .95; margin: 0;
  text-shadow: -1px -1px 0 var(--neu-hi), 2px 3px 5px var(--neu-lo);
}
.page-title .hl {
  color: var(--lime);
  -webkit-text-stroke: .016em #1d2400;
  /* Without this the stroke paints centred on the outline and bites into
     acute joins, which is what notched the K in "WORKS". */
  paint-order: stroke fill;
}
.page-head .rule-under {
  height: 1px; margin-top: 34px; border-radius: 1px;
  background: linear-gradient(90deg, var(--hairline), transparent 62%);
}
@media (max-width: 640px) {
  .page-head { padding: 40px 0 0; }
  .page-eyebrow { font-size: 10px; letter-spacing: .16em; margin-bottom: 14px; }
  .lede { font-size: 15px; margin-top: 18px; }
  .page-head .rule-under { margin-top: 26px; }
}

/* ---------- hero (landing) ---------- */
.hero-top { padding: 88px 0 60px; position: relative; }
/* The headline is sized against its own column, not the viewport, so each of
   its two lines stays on one line at every width. */
.hero-copy { container-type: inline-size; }
.roll-head {
  font-size: clamp(34px, 8vw, 96px); /* fallback where cqw is unsupported */
  font-size: clamp(34px, 15.2cqw, 116px);
  font-weight: 800; text-transform: uppercase;
  letter-spacing: -.022em; line-height: .98; margin: 0;
  /* same extrusion as the page mastheads */
  text-shadow: -1px -1px 0 var(--neu-hi), 2px 3px 5px var(--neu-lo);
}
.roll-head .line2 {
  color: var(--lime);
  -webkit-text-stroke: .016em #1d2400;
  paint-order: stroke fill;
}
.hero-lede { font-size: 16px; color: var(--text-2); max-width: 52ch; margin-top: 30px; line-height: 1.65; }
.hero-lede b { color: var(--text); font-weight: 600; }
.hero-ctas { display: flex; align-items: center; gap: 30px; margin-top: 38px; flex-wrap: wrap; }

/* Rolling letters, hero title only. Never wraps: the size above guarantees
   each line fits, so the headline is always exactly two lines. */
.roll { display: flex; flex-wrap: nowrap; gap: 0 .24em; }
.roll .rw { display: inline-flex; white-space: nowrap; }
.roll .rl {
  display: inline-block; overflow: hidden; height: 1em; line-height: 1;
  /* The clip box is widened, then pulled back by an equal negative margin, so
     the extrusion has room to fall to the right without shifting the letter or
     the line's width. Uppercase sits well inside the em box, so the vertical
     throw needs no such help. */
  padding: 0 .075em; margin: 0 -.075em;
}
.roll .stack {
  display: block; transform: translateY(103%);
  transition: transform .65s cubic-bezier(.22, .61, .21, 1);
  transition-delay: calc(var(--i) * 26ms);
}
.roll .stack span { display: block; height: 1em; line-height: 1; }
.roll.in .stack { transform: translateY(0); }
.roll.loop .stack {
  transition: none;
  animation: rollLoop 5.2s cubic-bezier(.68, .02, .32, .98) infinite;
  animation-delay: calc(var(--i) * 70ms);
}
@keyframes rollLoop {
  0%, 55% { transform: translateY(0); }
  66%, 88% { transform: translateY(-33.334%); }
  100% { transform: translateY(-66.667%); }
}
@media (prefers-reduced-motion: reduce) {
  .roll .stack { transition: none; transform: none; animation: none !important; }
}

/* Hero stats strip: live numbers for the current draw, as extruded tiles. */
.hero-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 48px;
}
.hero-stats > div {
  padding: 20px 22px; border-radius: 20px;
  background: var(--surface-raised);
  box-shadow: var(--neu-out-sm);
}
.hero-stats .hs-label {
  display: block; font-size: 10.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .13em; color: var(--text-3);
}
.hero-stats .hs-value {
  display: block; margin-top: 6px; font-size: 21px; font-weight: 500;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
}
.hero-stats .hs-value small { font-size: 12px; color: var(--text-3); font-weight: 400; margin-left: 3px; }
.hero-stats .hs-value.money { color: var(--lime-ink); }

/* ---------- live strip ---------- */
.hero {
  display: grid; grid-template-columns: 1fr 1px 1fr; gap: 48px; align-items: start;
  padding: 40px 0 44px;
  margin-top: 34px;
}
.hero .rule { width: 1px; height: 100%; background: linear-gradient(180deg, transparent, var(--hairline) 30%, var(--hairline) 70%, transparent); }
.hero-value {
  font-size: clamp(40px, 8vw, 56px); font-weight: 400; letter-spacing: -.02em; line-height: 1.1;
  font-variant-numeric: tabular-nums; margin-top: 16px; color: var(--lime-ink);
}
.hero-value small { font-size: .4em; font-weight: 400; color: var(--text-3); margin-left: 6px; letter-spacing: 0; }
.hero-sub { font-size: 13px; color: var(--text-2); margin-top: 12px; }
.hero-panel {
  border-radius: var(--radius); padding: 28px;
  background: var(--surface-raised); box-shadow: var(--neu-out);
}

/* ---------- split-flap flip clock, extruded ---------- */
.timer { display: flex; align-items: flex-start; gap: 12px; margin-top: 18px; }
.timer .cell { text-align: center; }
.timer .flap {
  position: relative; min-width: 92px; padding: 16px 12px;
  border-radius: 18px; perspective: 320px;
  background: var(--surface-raised);
  box-shadow: var(--neu-out);
}
.timer .flap::after {
  content: ""; position: absolute; left: 10px; right: 10px; top: 50%; height: 1px;
  background: rgba(0, 0, 0, .16);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .9);
}
.timer .flap b {
  display: block; font-size: 44px; font-weight: 500; letter-spacing: .02em; line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--text);
  text-shadow: 1px 1px 1px rgba(255, 255, 255, .9);
  transform-origin: center top; backface-visibility: hidden;
}
.timer .flap b.tick { animation: flap .34s cubic-bezier(.3, .7, .4, 1); }
@keyframes flap {
  0% { transform: rotateX(-88deg); opacity: .25; }
  60% { transform: rotateX(12deg); }
  100% { transform: rotateX(0); opacity: 1; }
}
.timer .cell label {
  display: block; margin-top: 10px; font-size: 9.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .16em; color: var(--text-3);
}
.timer .sep { font-size: 26px; font-weight: 300; color: var(--text-3); margin-top: 24px; }

/* ---------- cards & grids ---------- */
.card {
  background: var(--surface-raised);
  border-radius: var(--radius);
  box-shadow: var(--neu-out);
  padding: 28px;
  transition: box-shadow .25s;
}
.card:hover { box-shadow: var(--neu-out-lg); }
.card.flat { box-shadow: var(--neu-out-sm); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; }
.stat-grid + .stat-grid { margin-top: 16px; }
.stat-grid > div {
  padding: 18px 20px; border-radius: 18px;
  background: var(--surface-flat); box-shadow: var(--neu-in-sm);
}

.stat-label {
  font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em;
  color: var(--text-2);
}
.stat-value {
  font-size: clamp(21px, 2.1vw, 28px); font-weight: 400; letter-spacing: -.015em; margin-top: 6px;
  font-variant-numeric: tabular-nums; line-height: 1.25;
}
.stat-value small { font-size: 13px; color: var(--text-3); font-weight: 400; margin-left: 4px; }
.stat-value.bronze { color: var(--lime-ink); }
.stat-value.accent { color: var(--lime-ink); }
.stat-hint { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* ---------- controls ---------- */
button.primary, a.primary {
  display: inline-flex; align-items: center; justify-content: center; text-decoration: none; cursor: pointer;
  background: linear-gradient(145deg, #2c2c2c, #131313); color: #ffffff;
  font: inherit; font-size: 14px; font-weight: 600;
  border: 0; border-radius: 14px; padding: 14px 26px; min-height: 48px;
  transition: transform .18s, box-shadow .18s;
  box-shadow: 6px 6px 14px rgba(0, 0, 0, .24), -5px -5px 12px rgba(255, 255, 255, .9);
}
button.primary:hover, a.primary:hover { transform: translateY(-1px); box-shadow: 9px 9px 20px rgba(0, 0, 0, .28), -7px -7px 16px rgba(255, 255, 255, .95); }
button.primary:active, a.primary:active {
  transform: translateY(0);
  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .5), inset -2px -2px 6px rgba(255, 255, 255, .12);
}
button.ghost {
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--text);
  background: var(--surface-raised); border: 0; border-radius: 14px;
  padding: 13px 22px; min-height: 48px; box-shadow: var(--neu-out-sm);
  transition: box-shadow .18s;
}
button.ghost:active { box-shadow: var(--neu-in-sm); }
input[type="number"], input[type="text"] {
  width: 100%; font: inherit; font-size: 16px; color: var(--text);
  background: var(--surface-flat); border: 0; border-radius: 14px;
  padding: 14px 17px; outline: none; min-height: 50px;
  box-shadow: var(--neu-in);
  transition: box-shadow .18s;
  font-variant-numeric: tabular-nums;
}
input:focus { box-shadow: var(--neu-in), 0 0 0 3px rgba(122, 153, 0, .25); }
input::placeholder { color: var(--text-3); }

/* ---------- raffle ticket ---------- */
.ticket {
  position: relative; border-radius: var(--radius); padding: 26px;
  background:
    radial-gradient(140% 100% at 50% 0%, rgba(255, 255, 255, .7), transparent 40%),
    linear-gradient(145deg, #fafaf8, #e8e8e4);
  color: var(--paper-ink);
  box-shadow: 10px 10px 24px rgba(0, 0, 0, .2), -8px -8px 18px rgba(255, 255, 255, 1);
}
.ticket .t-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .18em;
  color: rgba(35, 35, 31, .75);
}
.ticket .stamp {
  /* The ticket stays light paper in both themes, so its ink is literal: a
     themed --lime-ink would go pale on the stock in dark mode. */
  border: 2px solid rgba(92, 117, 0, .5); color: #5c7500;
  border-radius: 8px; padding: 3px 9px; transform: rotate(-5deg); white-space: nowrap;
  font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
}
.ticket .tear { position: relative; height: 0; border-top: 2px dashed rgba(35, 35, 31, .28); margin: 20px -26px; }
.ticket .tear::before, .ticket .tear::after {
  content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--bg);
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, .18), inset -2px -2px 5px rgba(255, 255, 255, .9);
}
.ticket .tear::before { left: -11px; }
.ticket .tear::after { right: -11px; }
.ticket input[type="number"] {
  background: #f4f4f1; color: var(--paper-ink);
  box-shadow: inset 4px 4px 9px rgba(0, 0, 0, .16), inset -3px -3px 8px rgba(255, 255, 255, 1);
}
.ticket input:focus { box-shadow: inset 4px 4px 9px rgba(0, 0, 0, .16), inset -3px -3px 8px rgba(255, 255, 255, 1), 0 0 0 3px rgba(204, 255, 0, .45); }
.ticket input::placeholder { color: rgba(35, 35, 31, .38); }
.ticket .t-result { font-size: 13.5px; color: rgba(35, 35, 31, .82); min-height: 40px; }
.ticket .barcode {
  height: 34px; margin-top: 14px; border-radius: 2px; opacity: .85;
  background: repeating-linear-gradient(90deg,
    var(--paper-ink) 0 2px, transparent 2px 5px,
    var(--paper-ink) 5px 6px, transparent 6px 9px,
    var(--paper-ink) 9px 12px, transparent 12px 14px);
}
.ticket .serial {
  margin-top: 6px; font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 10px; letter-spacing: .3em; color: rgba(35, 35, 31, .5); text-align: center;
}

/* ---------- tables ---------- */
.table-wrap { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left; font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .12em; color: var(--text-2); padding: 0 12px 12px; white-space: nowrap;
  border-bottom: 1px solid var(--hairline);
}
td {
  padding: 14px 12px; border-bottom: 1px solid var(--hairline-2);
  font-variant-numeric: tabular-nums; vertical-align: top;
}
tr:last-child td { border-bottom: 0; }
tbody tr { transition: background .18s; }
tbody tr:hover { background: rgba(255, 255, 255, .5); }
td a, .link { color: var(--blue); text-decoration: none; }
td a:hover, .link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mono { font-family: ui-monospace, "SF Mono", "Menlo", monospace; font-size: 13px; letter-spacing: 0; }
.muted { color: var(--text-2); font-size: 13px; }
.value-em { color: var(--lime-ink); font-weight: 600; }

/* ---------- chips & pills ---------- */
.chip-i {
  display: inline-block; width: 15px; height: 15px; border-radius: 50%;
  border: 2px dashed currentColor; position: relative; flex-shrink: 0;
}
.chip-i::after {
  content: ""; position: absolute; inset: 2.5px; border-radius: 50%;
  border: 1px solid currentColor; opacity: .65;
}
.pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
  padding: 6px 12px; border-radius: 999px;
  background: var(--surface-flat); box-shadow: var(--neu-in-sm); color: var(--text-2);
}
.pill .ic { width: 12px; height: 12px; }
.pill.cold, .pill.recv { color: var(--text-2); }
.pill.hot { color: var(--lime-ink); }
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600; color: var(--lime-deep);
  background: linear-gradient(145deg, var(--lime-hi), var(--lime));
  box-shadow: var(--neu-out-sm);
  border-radius: 999px; padding: 7px 14px;
}
.badge .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--lime-deep); animation: pulse 2s ease-in-out infinite; }

/* ---------- flow diagram ---------- */
.flow { display: grid; grid-template-columns: 1fr 44px 1fr 44px 1fr; align-items: stretch; }
.flow .node {
  border-radius: var(--radius);
  padding: 24px; background: var(--surface-raised); box-shadow: var(--neu-out);
}
.flow .node .ic { width: 20px; height: 20px; color: var(--lime-ink); margin-bottom: 12px; }
.flow .node h3 { font-size: 14px; font-weight: 600; letter-spacing: -.005em; }
.flow .node p { font-size: 13px; color: var(--text-2); margin-top: 6px; line-height: 1.55; }
.flow .node p b { color: var(--text); font-weight: 600; }
.flow .arrow { display: flex; align-items: center; justify-content: center; color: var(--text-3); }
.flow .arrow .ic { width: 18px; height: 18px; animation: drift 2.4s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateX(-2px); opacity: .4; } 50% { transform: translateX(4px); opacity: 1; } }

/* Split view: two winners drawn side by side each hour. */
.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.prize-card { position: relative; }
.prize-card .p-rank {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .14em;
  color: var(--text-2);
}
.prize-card .p-amount {
  font-size: clamp(26px, 4.5vw, 34px); font-weight: 500; letter-spacing: -.02em;
  margin-top: 14px; font-variant-numeric: tabular-nums; line-height: 1.15;
}
.prize-card .p-amount small { font-size: .45em; color: var(--text-3); margin-left: 6px; }
.prize-card .p-amount.money { color: var(--lime-ink); }
.prize-card .p-amount.tokens { color: var(--lime-ink); }
.prize-card .p-amount.neutral { color: var(--text-2); }
.prize-card p { font-size: 13.5px; color: var(--text-2); margin-top: 10px; line-height: 1.6; }
.prize-card .p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.prize-card .p-alt {
  font-size: 13px; color: var(--text-3); margin-top: 5px;
  font-variant-numeric: tabular-nums; min-height: 19px;
}

/* ETH / USD switch, for figures denominated in the fee asset. */
.unit-toggle {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; flex-shrink: 0;
  background: var(--surface-flat); box-shadow: var(--neu-in-sm);
}
.unit-toggle button {
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--text-3); background: none; border: 0; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; line-height: 1; min-height: 30px;
  transition: color .18s, box-shadow .18s, background .18s;
}
.unit-toggle button.on {
  color: var(--text); background: var(--surface-raised); box-shadow: var(--neu-out-sm);
}
.unit-toggle button:disabled { opacity: .45; cursor: default; }
.unit-toggle.mini { padding: 2px; }
.unit-toggle.mini button { padding: 4px 8px; font-size: 9.5px; min-height: 22px; letter-spacing: .04em; }
.hero-stats .hs-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.prize-card .p-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.prize-card .p-alt {
  font-size: 13px; color: var(--text-3); margin-top: 5px;
  font-variant-numeric: tabular-nums; min-height: 19px;
}

/* ETH / USD switch, for figures denominated in the fee asset. */
.unit-toggle {
  display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; flex-shrink: 0;
  background: var(--surface-flat); box-shadow: var(--neu-in-sm);
}
.unit-toggle button {
  font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--text-3); background: none; border: 0; cursor: pointer;
  padding: 7px 13px; border-radius: 999px; line-height: 1; min-height: 30px;
  transition: color .18s, box-shadow .18s, background .18s;
}
.unit-toggle button.on {
  color: var(--text); background: var(--surface-raised); box-shadow: var(--neu-out-sm);
}
.unit-toggle button:disabled { opacity: .45; cursor: default; }
.prize-card p b { color: var(--text); font-weight: 600; }

/* ---------- supply / unlock bars ---------- */
.supply-bar {
  display: flex; gap: 5px; height: 42px; border-radius: 16px; padding: 5px;
  background: var(--surface-flat);
  box-shadow: var(--neu-in);
}
.supply-bar div { height: 100%; border-radius: 11px; box-shadow: 0 2px 4px rgba(0, 0, 0, .16); }
.seg-public { background: linear-gradient(180deg, var(--lime), var(--lime-mid)); }
.seg-locked { background: linear-gradient(180deg, #dedede, #bcbcbc); }
.supply-legend { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 18px; }
.supply-legend > span { font-size: 13px; color: var(--text-2); display: flex; align-items: flex-start; gap: 9px; line-height: 1.55; }
.supply-legend > span > span { display: block; }
.supply-legend i { width: 10px; height: 10px; border-radius: 3px; display: block; flex-shrink: 0; margin-top: 6px; }
.supply-legend b { color: var(--text); font-weight: 600; }

/* Daily unlock ladder: 21 equal days, spent ones greyed out. */
.ladder { display: flex; align-items: stretch; gap: 5px; height: 72px; margin-top: 8px; }
.ladder i {
  flex: 1; border-radius: 7px; display: block; position: relative;
  background: linear-gradient(180deg, var(--lime-hi), var(--lime-mid));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 3px 3px 7px rgba(0, 0, 0, .18);
}
.ladder i.spent {
  background: var(--surface-flat);
  box-shadow: var(--neu-in-sm);
}
/* the day in progress: filled from the bottom by how much of it has gone out */
.ladder i.part {
  background:
    linear-gradient(180deg,
      transparent 0%, transparent calc(100% - var(--p, 0%)),
      var(--lime-hi) calc(100% - var(--p, 0%)), var(--lime-mid) 100%),
    var(--surface-flat);
  box-shadow: var(--neu-in-sm);
}

/* Today's tranche, hour by hour. */
.day-panel {
  margin-top: 24px; padding: 20px 22px; border-radius: 18px;
  background: var(--surface-flat); box-shadow: var(--neu-in-sm);
}
.day-head { display: flex; flex-wrap: wrap; gap: 16px 24px; align-items: flex-start; justify-content: space-between; }
.day-amount {
  font-size: clamp(20px, 2.1vw, 26px); font-weight: 400; margin-top: 6px;
  letter-spacing: -.015em; font-variant-numeric: tabular-nums; color: var(--lime-ink);
}
.day-amount small { font-size: 13px; color: var(--text-3); font-weight: 400; margin-left: 4px; }
.day-next { text-align: right; }
.day-clock {
  font-size: 22px; font-weight: 400; margin-top: 6px;
  font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}
.day-ticks { display: flex; gap: 4px; height: 16px; margin-top: 18px; }
.day-ticks i {
  flex: 1; border-radius: 4px; display: block;
  background: var(--surface); box-shadow: var(--neu-in-sm);
}
.day-ticks i.done { background: linear-gradient(180deg, var(--lime-hi), var(--lime-mid)); box-shadow: 0 1px 3px rgba(0, 0, 0, .18); }
.day-legend { font-size: 12.5px; color: var(--text-3); margin-top: 12px; }
.day-legend b { color: var(--text-2); font-weight: 600; }

/* ---------- steps as lotto balls ---------- */
.steps { list-style: none; counter-reset: step; }
.steps li { counter-increment: step; display: grid; grid-template-columns: 48px 1fr; gap: 16px; padding: 18px 0; align-items: start; }
.steps li + li { border-top: 1px solid var(--hairline-2); }
.steps li::before {
  content: counter(step);
  width: 36px; height: 36px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 800; color: #223300;
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, .9), transparent 42%),
    radial-gradient(circle at 50% 50%, #ecfea3 0%, var(--lime) 55%, #abd600 82%, #617a00 100%);
  box-shadow:
    inset -4px -6px 10px rgba(97, 122, 0, .3),
    inset 2px 3px 5px rgba(255, 255, 255, .85),
    5px 5px 12px rgba(0, 0, 0, .2), -3px -3px 8px rgba(255, 255, 255, .9);
}
.steps h4 { font-size: 14.5px; font-weight: 600; letter-spacing: -.005em; margin-top: 7px; }
.steps p { font-size: 14px; color: var(--text-2); margin-top: 4px; max-width: none; }
.steps b { color: var(--text); font-weight: 600; }

/* ---------- links, notes, footer ---------- */
.u-link {
  position: relative; display: inline-flex; align-items: center;
  color: var(--text); text-decoration: none; font-size: 14px; font-weight: 500;
}
.u-link::before {
  content: ""; pointer-events: none; position: absolute; left: 0; bottom: -3px;
  height: 1px; width: 100%; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
}
.u-link:hover::before { transform-origin: left; transform: scaleX(1); }
.u-link .arrow { width: .55em; height: .55em; margin-left: .35em; opacity: 0; transform: translateY(3px); transition: opacity .3s, transform .3s; }
.u-link:hover .arrow { opacity: 1; transform: translateY(0); }

.note {
  border-top: 1px solid var(--hairline-2); margin-top: 24px; padding-top: 20px;
  font-size: 13.5px; color: var(--text-2); line-height: 1.65; max-width: none;
}
.note b { color: var(--text); font-weight: 600; }
.site-footer {
  margin-top: 96px; padding: 26px 28px; border-radius: var(--radius);
  background: var(--surface-flat); box-shadow: var(--neu-in-sm);
  font-size: 13px; color: var(--text-2); line-height: 1.75;
}
.site-footer b { color: var(--text); font-weight: 600; }

.ic { width: 18px; height: 18px; flex-shrink: 0; }
.tok { font-weight: 600; color: var(--text); white-space: nowrap; }

/* ---------- the lottery drum ---------- */
.hero-grid { display: grid; grid-template-columns: 1.12fr .88fr; gap: 48px; align-items: center; }
.machine { display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; }
.drum { position: relative; width: min(430px, 78vw); aspect-ratio: 1; flex: 0 0 auto; }
/* Two-column hero: the sphere is sized to the height of the copy beside it,
   so the two halves of the row read as one block. Below this the hero stacks
   and the drum goes back to sizing off the viewport. */
@media (min-width: 1025px) {
  .machine { align-self: stretch; }
  /* 95%, not 100%: the copy's box is taller than the type looks, because the
     headline's line box adds leading above the cap height. Trimming that much
     lines the sphere's top and bottom up with the text you actually see. */
  .drum { height: 95%; width: auto; max-width: 100%; transform: translateY(7px); }
  /* The neck, pedestal and ground shadow hang below the sphere. The caption
     used to reserve that room; now the stats strip does. */
  .hero-stats { margin-top: 116px; }
}
.drum canvas { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%; }

/* Clear acrylic sphere in a bright studio: crisp speculars, visible wall
   thickness, fresnel edge, equator seam. */
.drum .glass {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background:
    radial-gradient(11% 7% at 30% 15%, rgba(255, 255, 255, .95) 45%, rgba(255, 255, 255, 0) 100%),
    radial-gradient(30% 20% at 33% 19%, rgba(255, 255, 255, .38), rgba(255, 255, 255, 0) 75%),
    radial-gradient(56% 44% at 31% 24%, transparent 60%, rgba(255, 255, 255, .28) 66%, transparent 72%),
    radial-gradient(9% 6% at 67% 80%, rgba(255, 255, 255, .5) 40%, transparent 100%),
    radial-gradient(100% 100% at 50% 50%, transparent 58%, rgba(0, 0, 0, .012) 76%, rgba(0, 0, 0, .035) 89%, rgba(0, 0, 0, .07) 97%, rgba(0, 0, 0, .12) 99.6%);
  border: 1.5px solid rgba(0, 0, 0, .14);
  box-shadow:
    inset 0 0 0 2px rgba(255, 255, 255, .65),
    inset 0 -22px 40px rgba(0, 0, 0, .1),
    inset 0 16px 32px rgba(255, 255, 255, .4),
    18px 20px 44px rgba(0, 0, 0, .22), -12px -12px 30px rgba(255, 255, 255, .8);
}
/* inner wall line: the second surface of the acrylic */
.drum .glass::before {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, .05);
  box-shadow: inset 0 2px 6px rgba(255, 255, 255, .5);
}
/* sharp secondary sparkle */
.drum .glass::after {
  content: ""; position: absolute; left: 24.5%; top: 11%; width: 3.2%; height: 2%;
  border-radius: 50%; background: rgba(255, 255, 255, .95);
  transform: rotate(-32deg);
}
.drum .sheen {
  position: absolute; inset: 3.5%; border-radius: 50%; pointer-events: none;
  background: linear-gradient(115deg, transparent 32%, rgba(255, 255, 255, .28) 42%, rgba(255, 255, 255, .06) 50%, transparent 60%);
}
/* moulding seam around the equator */
.drum .seam {
  position: absolute; left: 1.5%; right: 1.5%; top: 34%; height: 26%;
  border-radius: 50%; pointer-events: none;
  border-bottom: 1.5px solid rgba(0, 0, 0, .055);
}
.drum .seam::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  transform: translateY(1.5px);
}

/* Neck, brushed pedestal, bolts, ground shadow. */
.drum .neck {
  position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);
  width: 122px; height: 26px;
  background: linear-gradient(180deg, #d4d4d4, #a9a9a9);
  clip-path: polygon(9% 0, 91% 0, 100% 100%, 0 100%);
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, .8);
}
.drum .base {
  position: absolute; bottom: -44px; left: 50%; transform: translateX(-50%);
  width: 74%; height: 36px; border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, .7), rgba(255, 255, 255, 0) 12%, rgba(255, 255, 255, .5) 28%, rgba(255, 255, 255, 0) 45%, rgba(255, 255, 255, .8) 60%, rgba(255, 255, 255, 0) 78%, rgba(255, 255, 255, .55)),
    linear-gradient(180deg, #e0e0e0, #b5b5b5 60%, #999999);
  border: 1px solid rgba(0, 0, 0, .12);
  box-shadow: 0 16px 30px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -3px 6px rgba(0, 0, 0, .18);
}
.drum .base::before {
  content: ""; position: absolute; top: 8px; left: 9%; right: 9%; height: 1px;
  border-radius: 1px; background: rgba(0, 0, 0, .18);
}
.drum .base::after {
  content: ""; position: absolute; bottom: 8px; left: 16%; width: 6px; height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffffff, #7c7c7c);
  box-shadow: calc(100% + 180px) 0 0 0 #8a8a8a, inset 0 -1px 1px rgba(0, 0, 0, .35);
}
.drum .shadow {
  position: absolute; bottom: -58px; left: 50%; transform: translateX(-50%);
  width: 92%; height: 24px; border-radius: 50%; z-index: -1;
  background: radial-gradient(50% 50% at 50% 50%, rgba(0, 0, 0, .28), transparent 72%);
  filter: blur(5px);
}
.drum { cursor: pointer; }

/* Winner cards, inside the glass: the ticket above the drawn ball, the fee
   share below it. Sized in % of the drum so they hold place as it scales. */
.winner-pop {
  position: absolute; left: 50%;
  transform: translateX(-50%) translateY(12px) scale(.88);
  opacity: 0; pointer-events: none; text-align: center; z-index: 3;
  max-width: 68%;
  background: rgba(255, 255, 255, .74);
  -webkit-backdrop-filter: blur(7px) saturate(1.3); backdrop-filter: blur(7px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, .95);
  border-radius: 14px; padding: 9px 15px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, .13), inset 0 1px 0 rgba(255, 255, 255, .9);
  transition: opacity .45s cubic-bezier(.2, .65, .3, 1), transform .45s cubic-bezier(.2, .65, .3, 1);
}
.winner-pop.top { top: 13%; }
.winner-pop.bottom { bottom: 12%; }
.winner-pop.show { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
.winner-pop .w-label {
  font-size: 8.5px; font-weight: 800; letter-spacing: .2em;
  color: var(--lime-ink); text-transform: uppercase;
}
.winner-pop .w-addr {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 12.5px; margin-top: 3px; letter-spacing: -.01em;
}
.winner-pop .w-prize { font-size: 12px; color: var(--lime-ink); margin-top: 1px; font-weight: 700; }
.winner-pop .w-sub {
  font-size: 9.5px; color: var(--text-3); margin-top: 1px;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 640px) {
  .winner-pop { padding: 7px 12px; border-radius: 12px; max-width: 76%; }
  .winner-pop .w-addr { font-size: 11px; }
  .winner-pop .w-prize { font-size: 10px; }
}

/* =====================================================================
   Responsive. Breakpoints: 1024 (tablet), 760 (small tablet), 640 (phone),
   400 (small phone). Everything below reflows to one column, tables become
   stacked records, and tap targets stay at least 44px.
   ===================================================================== */

@media (max-width: 1024px) {
  .hero-grid { grid-template-columns: 1fr; gap: 56px; }
  /* stacked: the drum sizes off the viewport, so reserve the pedestal room here */
  .machine { padding-bottom: 88px; }
  .hero-top { padding: 56px 0 40px; }
  .section { margin-top: 56px; }
  .hero-stats { grid-template-columns: repeat(2, 1fr); }
  /* Keep 4-up stat rows balanced as 2×2 rather than 3 + 1. */
  .stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 860px) {
  .site-nav a { padding: 10px 12px; font-size: 13px; }
  .brand .chain { display: none; }
}

@media (max-width: 760px) {
  .flow { grid-template-columns: 1fr; gap: 10px; }
  .flow .arrow { transform: rotate(90deg); padding: 6px 0; }
  .flow .arrow .ic { animation: none; }
  .grid-2, .split-2 { grid-template-columns: 1fr; gap: 18px; }
  .hero { grid-template-columns: 1fr; gap: 34px; padding: 32px 0; margin-top: 24px; }
  .hero .rule { display: none; }
}

@media (max-width: 640px) {
  .wrap { padding: 0 14px 64px; }
  .site-header { top: 10px; padding: 0 10px; }
  .site-header .bar { padding: 7px 8px 7px 12px; gap: 8px; min-height: 58px; border-radius: 26px; }
  .brand .logo { height: 26px; }
  .site-nav { gap: 2px; }
  .site-nav a { padding: 9px 10px; font-size: 12px; }

  .hero-top { padding: 40px 0 32px; }
  .hero-lede { font-size: 15px; margin-top: 22px; }
  .hero-ctas { gap: 18px; margin-top: 28px; }
  .hero-ctas .primary { width: 100%; }
  .hero-stats { gap: 10px; margin-top: 32px; }
  .hero-stats > div { padding: 14px 15px; border-radius: 16px; }
  .hero-stats .hs-value { font-size: 18px; }
  .hero-stats .hs-label { font-size: 9.5px; letter-spacing: .1em; }

  .section { margin-top: 44px; }
  .card { padding: 20px 18px; border-radius: 18px; }
  .card:hover { box-shadow: var(--neu-out); }
  .ticket { padding: 20px 18px; border-radius: 18px; }
  .ticket .tear { margin: 18px -18px; }
  .ticket .t-head { font-size: 10px; letter-spacing: .12em; }
  .flow .node { padding: 18px; border-radius: 18px; }
  .stat-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .stat-grid > div { padding: 14px 15px; border-radius: 15px; }
  .stat-value { font-size: 21px; }
  .stat-label { font-size: 10px; letter-spacing: .08em; }

  .timer { gap: 8px; }
  .timer .flap { min-width: 0; flex: 1; padding: 13px 6px; border-radius: 14px; }
  .timer .cell { flex: 1; min-width: 0; }
  .timer { display: flex; }
  .timer .flap b { font-size: clamp(26px, 9vw, 38px); }
  .timer .sep { font-size: 20px; margin-top: 18px; }
  .timer .cell label { font-size: 8.5px; letter-spacing: .1em; }

  .steps li { grid-template-columns: 36px 1fr; gap: 12px; padding: 16px 0; }
  .steps li::before { width: 30px; height: 30px; font-size: 12.5px; }
  .steps h4 { margin-top: 4px; }
  .steps p { font-size: 13.5px; }
  .supply-legend { grid-template-columns: 1fr; gap: 12px; }
  .supply-legend > span { font-size: 12.5px; }
  .ladder { height: 54px; gap: 3px; }
  .day-panel { padding: 16px 15px; }
  .day-next { text-align: left; }
  .day-ticks { height: 13px; gap: 3px; }
  .ladder i { border-radius: 5px; }
  .site-footer { margin-top: 56px; padding: 20px 18px; font-size: 12.5px; }

  /* Tables reflow into stacked records; headers move into each cell. */
  table thead { display: none; }
  table, table tbody, table tr, table td { display: block; width: 100%; }
  table tr {
    padding: 14px 0; border-bottom: 1px solid var(--hairline);
  }
  table tr:last-child { border-bottom: 0; }
  table tbody tr:hover { background: none; }
  table td {
    padding: 3px 0; border: 0; text-align: left !important;
    display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  }
  table td::before {
    content: attr(data-label);
    font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .1em;
    color: var(--text-3); flex-shrink: 0;
  }
  table td:empty { display: none; }
  table td > * { text-align: right; }
  table td[colspan] { display: block; }
  table td[colspan]::before { content: none; }
}

@media (max-width: 359px) {
  .site-nav a { padding: 9px 7px; font-size: 11px; letter-spacing: 0; }
  .brand .logo { height: 22px; }
  .hero-stats { grid-template-columns: 1fr; }
  .stat-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 11px 56px; }
}

/* Coarse pointers never get the hover-only affordances. */
@media (hover: none) {
  .u-link .arrow { opacity: 1; transform: none; }
  .card:hover { box-shadow: var(--neu-out); }
  .site-nav a:hover { box-shadow: none; }
}

/* Mobile navbar: keep the next-draw countdown, collapse links into a menu.
   Collapses at 880, not 720: between those widths the four links, the chip and
   the two toggles overflowed the bar. */
@media (max-width: 880px) {
  .nav-toggle { display: inline-flex; }
  .nav-chip { display: inline-flex; margin-left: auto; }
  .site-nav {
    position: absolute; top: calc(100% + 10px); right: 0; left: 0;
    margin-left: 0; flex-direction: column; gap: 2px;
    background: var(--surface); border: 1px solid var(--card-brd);
    border-radius: 16px; padding: 8px; z-index: 60;
    box-shadow: 0 16px 44px rgba(0, 0, 0, .16);
    display: none;
  }
  .site-header.nav-open .site-nav { display: flex; }
  .site-nav a { padding: 12px 14px; font-size: 14.5px; border-radius: 10px; }
}

:root[data-theme="dark"] button.primary,
:root[data-theme="dark"] a.primary {
  background: linear-gradient(145deg, #303034, #1b1b1f);
  box-shadow: 5px 5px 14px rgba(0, 0, 0, .55), -4px -4px 12px rgba(255, 255, 255, .03);
}
:root[data-theme="dark"] button.primary:hover,
:root[data-theme="dark"] a.primary:hover {
  box-shadow: 7px 7px 20px rgba(0, 0, 0, .6), -5px -5px 14px rgba(255, 255, 255, .04);
}
:root[data-theme="dark"] button.primary:active,
:root[data-theme="dark"] a.primary:active {
  box-shadow: inset 3px 3px 8px rgba(0, 0, 0, .6), inset -2px -2px 6px rgba(255, 255, 255, .03);
}

/* Small phones: the bar carries the mark, the countdown and two buttons. Tighten
   them below 420, and drop the countdown below 360 where it simply will not fit.
   These come last so they win over the collapse block above. */
@media (max-width: 420px) {
  .nav-chip { font-size: 11px; padding: 8px 11px; gap: 5px; }
  .brand .logo { height: 24px; }
  .nav-toggle, .theme-toggle { padding: 6px; margin-left: 2px; }
}
@media (max-width: 360px) {
  .nav-chip { display: none; }
}