/* ==========================================================================
   MicroLeague Sports: Marketing Landing Page
   Design tokens, layout, components, motion.
   Single-theme (deliberate): deep navy ground, royal blue + gold accents.
   ========================================================================== */


:root {
  /* Brand constants */
  --navy-950: #040A22;
  --navy-900: #050D2B;
  --navy-800: #08153A;
  --navy-700: #0E1F52;
  --navy-600: #15307A;
  --royal: #1E4FD8;
  --royal-2: #2F6BFF;
  --royal-3: #5C8BFF;
  --gold: #FFC72C;
  --gold-2: #FFD65C;
  --gold-3: #FFE9A6;
  --red: #D8232A;
  --red-2: #FF4B52;
  --ice: #F3F6FF;
  --mist: #B7C2E6;
  --muted: #5E6A90;

  /* Theme tokens: LIGHT (page default) */
  --bg: #F4F6FB;
  --surface: #FFFFFF;
  --surface-2: #EEF2FA;
  --surface-3: #E1E7F4;
  --ink: #0B1B45;
  --ink-2: #44507A;
  --ink-3: #5E6A90;
  --line: rgba(11, 27, 69, 0.10);
  --line-2: rgba(11, 27, 69, 0.20);
  --card-grad: linear-gradient(180deg, #FFFFFF, #F8FAFE);
  --accent: #1E4FD8;
  --gold-text: #7A5A00;
  --hook: #1E4FD8;
  --live: #0B6E36;
  --live-bg: rgba(18, 161, 80, 0.10);
  --live-line: rgba(18, 161, 80, 0.30);
  --side-a-bg: rgba(216, 35, 42, 0.10); --side-a-fg: #B3151B; --side-a-line: rgba(216, 35, 42, 0.28);
  --side-b-bg: rgba(30, 79, 216, 0.10); --side-b-fg: #1E4FD8; --side-b-line: rgba(30, 79, 216, 0.28);
  --crest-base: #FFFFFF; --crest-mix: 22%;
  --tab-active-bg: #0B1B45; --tab-active-fg: #FFFFFF;
  --shadow-card: 0 24px 50px -24px rgba(11, 27, 69, 0.28), 0 2px 6px rgba(11, 27, 69, 0.05);

  /* Type */
  --font-display: "Oswald", "Impact", "Arial Narrow", sans-serif;
  --font-head: "Inter Tight", "Inter", system-ui, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-cond: "Oswald", "Anton", "Impact", "Arial Narrow", sans-serif;

  /* Scale */
  --container: 1240px;
  --gutter: clamp(16px, 4vw, 40px);
  --radius: 18px;
  --radius-sm: 12px;
  --radius-pill: 999px;
  --shadow-gold: 0 10px 24px -12px rgba(255, 199, 44, 0.5);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}


/* Dark bands: any element with .dark flips the theme tokens for its subtree */
.dark {
  --muted: #7F8DB8;
  --bg: var(--navy-900);
  --surface: var(--navy-800);
  --surface-2: rgba(255, 255, 255, 0.05);
  --surface-3: rgba(255, 255, 255, 0.09);
  --ink: var(--ice);
  --ink-2: var(--mist);
  --ink-3: var(--muted);
  --line: rgba(183, 194, 230, 0.14);
  --line-2: rgba(183, 194, 230, 0.28);
  --card-grad: var(--card-grad);
  --accent: var(--gold);
  --gold-text: var(--gold);
  --hook: var(--gold);
  --live: #3CF28A;
  --live-bg: rgba(60, 242, 138, 0.14);
  --live-line: rgba(60, 242, 138, 0.35);
  --side-a-bg: rgba(255, 75, 82, 0.14); --side-a-fg: #FFB3B6; --side-a-line: rgba(255, 75, 82, 0.3);
  --side-b-bg: rgba(92, 139, 255, 0.14); --side-b-fg: #C4D4FF; --side-b-line: rgba(92, 139, 255, 0.3);
  --crest-base: var(--navy-900); --crest-mix: 45%;
  --tab-active-bg: #FFFFFF; --tab-active-fg: var(--navy-900);
  --shadow-card: 0 20px 50px -20px rgba(0, 0, 0, 0.7);
  color: var(--ink);
}
/* The royal-blue debate band is its own world */
.debate__band {
  --ink: #FFFFFF; --ink-2: rgba(255,255,255,.85); --ink-3: rgba(255,255,255,.65);
  --surface-2: var(--surface-3); --surface-3: rgba(255,255,255,.14);
  --line: rgba(255,255,255,.18); --line-2: rgba(255,255,255,.35);
  --accent: var(--gold); --gold-text: var(--gold); --hook: var(--gold);
  color: #fff;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: auto; -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
.section { position: relative; padding-block: clamp(64px, 8vw, 112px); }
.section--tight { padding-block: clamp(40px, 6vw, 72px); }

/* ---------- Typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 0.96;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  text-wrap: balance;
  margin: 0;
}
.display--xl { font-size: clamp(56px, 9.5vw, 132px); }
.display--lg { font-size: clamp(40px, 5.6vw, 76px); }
.display--md { font-size: clamp(36px, 4.6vw, 64px); }
.display .gold, .h2 .gold, .h3 .gold { color: var(--accent); }
h2, h3, h4 { font-family: var(--font-head); font-weight: 800; letter-spacing: -0.02em; line-height: 1.05; margin: 0; text-wrap: balance; }
.h2 { font-size: clamp(32px, 4vw, 50px); }
.h3 { font-size: clamp(22px, 2.4vw, 30px); }
.h4 { font-size: 18px; }
.lead { font-size: clamp(17px, 1.45vw, 20px); color: var(--ink-2); max-width: 60ch; margin: 0; }
.sub { color: var(--ink-2); max-width: 62ch; margin: 0; }
.livedot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 3px var(--live-bg); flex: none; }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 700; font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase;
  background: var(--gold); color: var(--navy-900);
}
.pill--live { background: var(--live-bg); color: var(--live); border: 1px solid var(--live-line); }
.pill--live { position: relative; }
.pill--live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--live); }
/* the ring is a separate layer animated with transform and opacity only, so the pulse runs on the
   compositor; the old box-shadow pulse repainted its section on every frame of the page */
.pill--live::after { content: ""; position: absolute; left: 13px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%; background: var(--live); opacity: 0; animation: live-ring 1.6s ease-out infinite; }
.pill--blue { background: rgba(47, 107, 255, 0.18); color: var(--royal-3); border: 1px solid rgba(47, 107, 255, 0.35); }
.pill--ghost { background: rgba(255,255,255,0.06); color: var(--ink-2); border: 1px solid var(--line-2); }
@keyframes live-ring { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3.2); opacity: 0; } }
.num { font-family: var(--font-head); font-variant-numeric: tabular-nums; font-weight: 800; letter-spacing: -0.02em; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; isolation: isolate; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill);
  font-family: var(--font-head); font-weight: 800; font-size: 15px; letter-spacing: -0.005em;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .2s, color .2s;
  white-space: nowrap;
}
.btn svg { width: 18px; height: 18px; flex: none; transition: transform .25s var(--ease-out); }
.btn:hover svg { transform: translateX(4px); }
.btn--gold { background: var(--gold); color: var(--navy-900); box-shadow: var(--shadow-gold); }
.btn--gold:hover { background: var(--gold-2); }
.btn--navy { background: var(--navy-800); color: #F3F6FF; border: 1px solid rgba(183,194,230,.28); }
.btn--navy:hover { background: var(--navy-700); }
.btn--white { background: #fff; color: var(--navy-900); }
.btn--white:hover { background: var(--gold-3); }
.btn--ghost { background: transparent; color: var(--ink); border: 1.5px solid rgba(255,255,255,0.35); }
.btn--ghost:hover { border-color: #fff; background: rgba(255,255,255,0.06); }
.btn--royal { background: var(--royal); color: #fff; }
.btn--corner-a { background: #D8232A; color: #fff; }
.btn--corner-a:hover { background: #B3151B; }
.btn--corner-b { background: #2F6BFF; color: #fff; }
.btn--corner-b:hover { background: #1E4FD8; }
.btn--corner-a.is-picked, .btn--corner-b.is-picked { background: var(--live); color: #fff; }
.btn--royal:hover { background: var(--royal-2); }
.btn--sm { min-height: 42px; padding: 0 18px; font-size: 14px; }
.btn--lg { min-height: 60px; padding: 0 34px; font-size: 17px; }
.btn--block { width: 100%; }
.link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 700; color: var(--accent); border-bottom: 2px solid transparent; transition: border-color .2s; }
.link:hover { border-color: var(--accent); }
.link svg { width: 16px; height: 16px; }

/* ---------- Live strip (ticker) ---------- */
.ticker {
  position: relative; z-index: 60; display: flex; align-items: stretch; height: 34px;
  background: var(--navy-950); color: #DDE3F5;
  font-family: var(--font-head); font-weight: 600; font-size: 12.5px; letter-spacing: .01em;
}
.ticker__tag {
  flex: none; display: inline-flex; align-items: center; gap: 7px; padding: 0 16px 0 var(--gutter);
  font-size: 10.5px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: #3CF28A;
  border-right: 1px solid rgba(255, 255, 255, .1);
}
.ticker__tag i { position: relative; width: 6px; height: 6px; border-radius: 50%; background: #3CF28A; }
.ticker__tag i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3CF28A; opacity: 0; animation: live-ring 1.8s ease-out infinite; }
.ticker__viewport { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent); }
.ticker__track { display: flex; width: max-content; animation: marquee 80s linear infinite; }
.ticker:hover .ticker__track { animation-play-state: paused; }
.ticker__item { display: inline-flex; align-items: center; gap: 8px; padding: 0 26px 0 0; white-space: nowrap; }
.ticker__item .dot { width: 5px; height: 5px; border-radius: 1px; background: var(--gold); transform: rotate(45deg); margin-right: 18px; opacity: .9; }
.ticker__item b { font-weight: 700; color: #fff; }
.ticker__item .closes { color: #8B97C4; font-weight: 500; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid rgba(11, 27, 69, .08);
  transition: box-shadow .3s, background .3s;
}
.nav.is-scrolled { background: rgba(255, 255, 255, .97); box-shadow: 0 10px 30px -22px rgba(11, 27, 69, .35); }
/* Same grammar as the platform header: logo left, links left with a soft active pill, outlined stat pills right */
.nav__inner { display: flex; align-items: center; gap: 28px; height: 88px; }
.nav .container { width: calc(100% - 2 * clamp(16px, 2.2vw, 40px)); max-width: none; }
.nav__links { display: flex; align-items: center; gap: 6px; flex: 1; justify-content: flex-start; }
.nav__links a { display: inline-flex; align-items: center; min-height: 36px; padding: 0 13px; border-radius: 9px; font-family: var(--font-body); font-weight: 500; font-size: 15px; color: var(--ink); white-space: nowrap; transition: background .2s, color .2s; }
.nav__links a:hover { background: rgba(11, 27, 69, .05); }
.nav__links a.is-current { background: #EEF1F7; font-weight: 600; }
.nav__actions { display: flex; align-items: center; gap: 10px; }
.nav__pill { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 12px 0 14px; border-radius: 999px; border: 1px solid rgba(11, 27, 69, .14); background: #fff; font-family: var(--font-body); font-weight: 700; font-size: 14px; color: var(--ink); white-space: nowrap; transition: border-color .2s, background .2s; }
.nav__pill:hover { border-color: rgba(11, 27, 69, .3); }
.nav__pill small { font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #7A86AE; }
.nav__pill--login { padding: 0 18px; }
/* The claim: a gold pill with the coin. Flat gold, a crisp inner edge, a soft drop */
.nav__claim { display: inline-flex; align-items: center; gap: 9px; min-height: 42px; padding: 0 18px 0 10px; border-radius: 999px; background: var(--gold); color: var(--navy-900); font-family: var(--font-head); font-weight: 800; font-size: 14px; letter-spacing: -.005em; white-space: nowrap; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 0 0 1px rgba(120, 80, 0, .18), 0 10px 22px -12px rgba(255, 199, 44, .8); transition: background .2s, box-shadow .2s; }
.nav__claim img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(80, 50, 0, .3)); }
.nav__claim:hover { background: #FFD65C; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .5), inset 0 0 0 1px rgba(120, 80, 0, .22), 0 12px 24px -12px rgba(255, 199, 44, .95); }
.nav .logo { flex: none; }
@media (max-width: 1240px) { .nav__inner { gap: 16px; } .nav__links a { padding: 0 10px; font-size: 14px; } }
/* seven links + both pills between 961px and the burger: tighten instead of squeezing the logo */
@media (max-width: 1120px) {
  .nav__inner { gap: 12px; }
  .nav__links { gap: 2px; }
  .nav__links a { padding: 0 8px; font-size: 13.5px; }
  .nav__pill--login { padding: 0 14px; }
  .nav__claim { padding: 0 14px 0 8px; }
}
@media (min-width: 961px) and (max-width: 1120px) { .nav .logo img { height: 44px; } }
@media (max-width: 1040px) { .nav__inner { gap: 10px; } .nav__links { gap: 0; } .nav__links a { padding: 0 7px; font-size: 13px; } }
.nav__burger { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 10px; }
.mobile-menu { background: #fff; border-top: 1px solid var(--line); padding: 14px var(--gutter) 20px; display: grid; gap: 14px; font-family: var(--font-head); font-weight: 700; font-size: 17px; }
.nav__burger span { display: block; width: 22px; height: 2px; background: var(--ink); box-shadow: 0 -7px 0 var(--ink), 0 7px 0 var(--ink); }

/* Logo (official asset) */
.logo { display: inline-flex; align-items: center; }
.logo img { height: 50px; width: auto; display: block; }
.logo--lg img { height: 56px; }

/* ---------- Hero: "Pick your era." split stage ----------
   Built to the design comp on a 1024-wide grid: 1 comp px = var(--u).
   --u scales with the hero width (container units) and caps at a 1440px stage,
   so every measurement below is the comp's coordinate, not a guess. */
.hero {
  --hero-navy: #00174D;
  --hero-gold: #FDCC35;
  --hero-gold-hi: #FED33E;
  --hero-gold-lo: #F3B624;
  --hero-blue: #004CEB;
  --hero-blue-hi: #0049E3;
  --hero-blue-lo: #0050F3;
  --hero-cta-gold: #FDCB28;
  --font-hero: "Oswald", "Anton", "Impact", "Arial Narrow", sans-serif;
  position: relative; overflow: hidden; isolation: isolate;
  container-type: inline-size;
  color: var(--hero-navy);
  background: var(--hero-gold);
}
/* The two worlds: full-bleed halves behind the centered stage */
.hero::before, .hero::after { content: ""; position: absolute; top: 0; bottom: 0; width: 50%; z-index: -1; }
.hero::before { left: 0; background: linear-gradient(180deg, var(--hero-gold-hi) 0%, var(--hero-gold) 42%, var(--hero-gold-lo) 100%); }
.hero::after {
  right: 0;
  background:
    radial-gradient(70% 90% at 100% 60%, rgba(0, 10, 60, .22), transparent 70%),
    linear-gradient(180deg, var(--hero-blue-hi) 0%, var(--hero-blue) 45%, var(--hero-blue-lo) 100%);
}
.hero__stage {
  --u: min(calc(100cqw / 1024), 1.40625px);
  position: relative; z-index: 1; height: calc(465 * var(--u));
  max-width: 1440px; margin-inline: auto;
}
.hero__stage > * { position: absolute; margin: 0; }

/* The ball bleeds in from the left edge, behind the gold card and the CTA */
.hero__ball {
  left: calc(-429 * var(--u)); top: calc(111 * var(--u)); width: calc(640 * var(--u)); max-width: none;
  filter: drop-shadow(0 30px 40px rgba(60, 20, 0, .35));
  pointer-events: none;
}
/* The hoop lives in the blue space to the RIGHT of the card (never over it): its size follows the
   room between the card's right edge (398 comp-px right of centre) and the viewport edge, and the
   backboard bleeds off the top and right the way the ball bleeds off the left. */
.hero__basket {
  --u: min(calc(100cqw / 1024), 1.40625px);
  --free: calc(50cqw - 398 * var(--u));
  --bw: clamp(230px, calc(var(--free) * 1.32), 560px);
  position: absolute; z-index: 0; max-width: none; width: var(--bw);
  left: calc(50% + 398 * var(--u) + 12px - .08 * var(--bw));
  top: calc(-.1 * var(--bw));
  filter: drop-shadow(0 34px 40px rgba(0, 20, 80, .45));
  pointer-events: none;
}
/* Centre seam: thin, translucent, fades in below the eyebrow and out above the CTAs, and sits under the caption pill */
.hero__divider { left: 50%; top: calc(22 * var(--u)); bottom: calc(24 * var(--u)); width: calc(2.5 * var(--u)); transform: translateX(-50%); z-index: 0; background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .78) 12%, rgba(255, 255, 255, .78) 86%, rgba(255, 255, 255, 0) 100%); }

/* Two-tone type: navy over gold, white over blue, split on the stage centre */
.hero__two {
  display: inline-block;
  background: linear-gradient(90deg, var(--hero-navy) 50%, #fff 50%);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.hero__eyebrow {
  left: 0; right: 0; top: calc(16 * var(--u)); text-align: center;
  font-family: var(--font-head); font-weight: 700; font-size: calc(12.5 * var(--u)); line-height: 1;
  letter-spacing: .3em; text-transform: uppercase;
}
.hero__eyebrow .hero__two { margin-right: -.3em; }
.hero__title {
  left: 0; right: 0; top: calc(29 * var(--u)); text-align: center;
  font-family: var(--font-hero); font-weight: 700; font-size: calc(94 * var(--u)); line-height: 1;
  letter-spacing: 0; text-transform: uppercase; white-space: nowrap;
}

/* Era cards */
.era { inset: 0; pointer-events: none; }
.era > * { pointer-events: auto; }
.era__panel {
  position: absolute; top: calc(138 * var(--u)); width: calc(337 * var(--u)); height: calc(226 * var(--u));
  border-radius: calc(14 * var(--u));
}
.era__panel--gold {
  left: calc(113 * var(--u));
  background: linear-gradient(180deg, rgba(255, 255, 255, .36) 0%, rgba(255, 255, 255, .16) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .38), 0 24px 40px -24px rgba(110, 70, 0, .45);
}
.era__panel--blue {
  right: calc(113 * var(--u)); color: #fff;
  background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .07) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .28), 0 24px 40px -24px rgba(0, 0, 70, .6);
}
.era__jersey { position: absolute; top: calc(7 * var(--u)); width: calc(172 * var(--u)); height: calc(222 * var(--u)); display: flex; align-items: flex-end; justify-content: center; }
.era__panel--gold .era__jersey { left: calc(15 * var(--u)); }
.era__panel--blue .era__jersey { right: calc(15 * var(--u)); }
.era__jersey img { height: 100%; width: auto; max-width: none; max-height: 100%; object-fit: contain; filter: drop-shadow(0 18px 22px rgba(0, 0, 0, .32)); }
.era__meta { position: absolute; top: 0; bottom: 0; width: 0; }
.era__panel--gold .era__meta { left: calc(261 * var(--u)); }
.era__panel--blue .era__meta { left: calc(81 * var(--u)); }
.era__meta > * { position: absolute; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.era__year { top: calc(42 * var(--u)); font-family: var(--font-hero); font-weight: 700; font-size: calc(52 * var(--u)); line-height: 1; letter-spacing: 0; }
.era__rule { top: calc(106 * var(--u)); width: calc(70 * var(--u)); height: calc(2 * var(--u)); background: currentColor; display: block; }
.era__team { top: calc(118 * var(--u)); font-family: var(--font-head); font-weight: 700; font-size: calc(15.5 * var(--u)); line-height: 1; letter-spacing: -.01em; }
.era__btn {
  position: absolute; bottom: calc(20 * var(--u)); width: calc(194 * var(--u)); height: calc(40 * var(--u));
  border-radius: 999px; background: #fff; color: var(--hero-navy);
  font-family: var(--font-head); font-weight: 700; font-size: calc(14.5 * var(--u)); line-height: 1; letter-spacing: -.005em;
  display: inline-flex; align-items: center; justify-content: center; white-space: nowrap;
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .35);
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .2s, color .2s;
}
.era__panel--gold .era__btn { right: calc(22 * var(--u)); }
.era__panel--blue .era__btn { left: calc(22 * var(--u)); }
.era__btn:hover { box-shadow: 0 14px 24px -10px rgba(0, 0, 0, .45); }
.era__btn.is-picked { background: var(--live); color: #fff; }
.era__vs {
  position: absolute; left: calc(50% - 37.5 * var(--u)); top: calc(193.5 * var(--u));
  width: calc(75 * var(--u)); height: calc(75 * var(--u)); border-radius: 50%;
  background: #fff; color: var(--hero-navy);
  font-family: var(--font-hero); font-weight: 700; font-size: calc(31 * var(--u)); line-height: 1; letter-spacing: .04em;
  display: grid; place-items: center; padding-bottom: calc(2 * var(--u));
  box-shadow: 0 10px 26px rgba(0, 20, 80, .22);
}
.era__toast {
  position: absolute; left: 0; right: 0; top: calc(122 * var(--u)); margin: auto; width: fit-content;
  background: var(--hero-navy); color: #fff; border: 1px solid rgba(255, 255, 255, .35);
  font-family: var(--font-head); font-weight: 700; font-size: calc(13 * var(--u)); padding: calc(9 * var(--u)) calc(14 * var(--u)); border-radius: 999px;
  display: inline-flex; gap: 10px; align-items: center; opacity: 0; pointer-events: none; z-index: 3; white-space: nowrap;
  transform: translateY(-8px); transition: opacity .35s, transform .45s var(--ease-out);
}
.era__toast.is-on { opacity: 1; transform: translateY(0); }
.era__toast .mlc { color: var(--gold); }
.era__toast .xp { color: var(--royal-3); }

/* Caption + CTAs */
.hero__caption {
  left: 0; right: 0; top: calc(373 * var(--u)); margin: auto; width: fit-content; height: calc(30 * var(--u)); z-index: 2;
  padding: 0 calc(14 * var(--u)); border-radius: calc(8 * var(--u));
  background: var(--hero-navy); color: #fff;
  font-family: var(--font-head); font-weight: 600; font-size: calc(12.2 * var(--u)); line-height: 1; letter-spacing: -.005em;
  display: flex; align-items: center; white-space: nowrap;
}
.hero__cta {
  top: calc(405 * var(--u)); width: calc(225 * var(--u)); height: calc(40 * var(--u)); border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; gap: calc(14 * var(--u));
  font-family: var(--font-head); font-weight: 700; font-size: calc(15 * var(--u)); line-height: 1; letter-spacing: -.005em; white-space: nowrap;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .2s;
}
.hero__cta svg { width: calc(18 * var(--u)); height: calc(18 * var(--u)); flex: none; transition: transform .25s var(--ease-out); }
.hero__cta:hover { filter: brightness(1.06); }
.hero__cta:hover svg { transform: translateX(4px); }
.hero__cta--l { left: calc(44 * var(--u)); background: var(--hero-navy); color: #fff; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .75), 0 14px 30px -14px rgba(0, 0, 0, .5); }
.hero__cta--r { right: calc(44 * var(--u)); background: var(--hero-cta-gold); color: var(--hero-navy); box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .5); }
.hero__cta--r:hover { background: var(--gold-2); }

/* Stacked hero for phones and small tablets: gold world on top, blue world below */
@media (max-width: 860px) {
  .hero::before, .hero::after, .hero__divider, .hero__basket { display: none; }
  .hero__stage {
    --u: min(calc((100cqw - 32px) / 337), 1.1px);
    height: auto; display: grid; grid-template-columns: 1fr; justify-items: center;
    padding: 28px 16px 26px; row-gap: 0;
  }
  .hero__stage > *, .era > * { position: static; grid-column: 1; }
  .hero__stage::before, .hero__stage::after { content: ""; grid-column: 1; z-index: -1; justify-self: stretch; }
  .hero__stage::before { grid-row: 1 / 4; margin: -28px -16px 0; background: linear-gradient(180deg, var(--hero-gold-hi), var(--hero-gold) 60%, var(--hero-gold-lo)); }
  .hero__stage::after { grid-row: 4 / 8; margin: 0 -16px -26px; background: linear-gradient(180deg, var(--hero-blue-hi), var(--hero-blue-lo)); }
  .hero__ball { position: absolute; left: max(-48%, -180px); top: 14%; width: min(80%, 340px); z-index: 0; }
  .hero__eyebrow { grid-row: 1; font-size: 11px; margin-bottom: 12px; }
  .hero__title { grid-row: 2; font-size: clamp(52px, 15.5vw, 72px); white-space: normal; margin-bottom: 18px; }
  .hero__two { background: none; color: var(--hero-navy); -webkit-text-fill-color: currentColor; }
  .era { display: contents; }
  .era__panel { position: relative; inset: auto; grid-column: 1; }
  .era__btn { min-height: 44px; }
  .chip { min-height: 42px; }
  .era__panel--gold { grid-row: 3; margin-bottom: 44px; }
  .era__panel--blue { grid-row: 4; margin-top: 44px; }
  .era__vs { grid-row: 3 / 5; grid-column: 1; align-self: center; justify-self: center; left: auto; top: auto; z-index: 2; margin: 0; }
  .era__toast { grid-row: 1; position: absolute; top: 6px; }
  .hero__caption { grid-row: 5; margin: 22px 0 0; height: auto; padding: 8px 14px; white-space: normal; text-align: center; font-size: 12.5px; line-height: 1.4; max-width: 100%; }
  .hero__cta { grid-row: 6; position: static; width: 100%; max-width: 337px; height: 46px; font-size: 15px; margin-top: 12px; }
  .hero__cta--r { grid-row: 7; }
}

/* ---------- Hero B: "Legends. Reloaded." (variation B, legends.html) ----------
   Dark arena, three glass matchup cards. One card flips every 3s to the next matchup
   of its sport; nothing floats. */
.heroB {
  position: relative; overflow: hidden; isolation: isolate;
  background: #050B25; color: #fff;
  padding-block: clamp(56px, 7vw, 96px) clamp(48px, 6vw, 80px);
}
.heroB__bg { position: absolute; inset: 0; z-index: -2; }
.heroB__bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; opacity: .55; }
.heroB__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5, 11, 37, .55) 0%, rgba(5, 11, 37, .35) 45%, rgba(5, 11, 37, .92) 100%), radial-gradient(70% 60% at 50% 40%, transparent 30%, rgba(5, 11, 37, .6) 100%); }
.heroB__ball { position: absolute; z-index: -1; pointer-events: none; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .6)); }
.heroB__ball--baseball { left: min(-8vw, -90px); top: 22%; width: clamp(280px, 34vw, 520px); }
.heroB__ball--football { right: min(-2vw, -10px); top: 30%; width: clamp(200px, 24vw, 360px); }
.heroB__ball--basketball { right: -6%; bottom: -8%; width: clamp(200px, 24vw, 380px); }
.heroB__copy { position: relative; display: grid; justify-items: center; text-align: center; gap: 14px; }
.heroB__eyebrow { font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .3em; text-transform: uppercase; color: var(--gold); }
.heroB__title { font-family: var(--font-hero, "Oswald", "Anton", sans-serif); font-weight: 700; font-size: clamp(60px, 9.4vw, 136px); line-height: .92; letter-spacing: .005em; text-transform: uppercase; margin: 0; text-wrap: balance; }
.heroB__title em { font-style: normal; color: var(--gold); }
.heroB__sub { margin: 0; max-width: 52ch; font-size: clamp(16px, 1.4vw, 19px); color: rgba(243, 246, 255, .85); }
.heroB__ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 6px; }
.heroB__ctas .btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.heroB__ctas .btn--ghost:hover { border-color: #fff; background: rgba(255, 255, 255, .08); }

/* Three cards: featured in the middle, sport cards either side */
.legends { position: relative; display: grid; grid-template-columns: 1fr 1.25fr 1fr; gap: 20px; align-items: end; margin-top: clamp(28px, 4vw, 48px); perspective: 1600px; }
.legend { position: relative; transform-style: preserve-3d; transition: transform .8s cubic-bezier(.2, .7, .2, 1); min-height: 300px; }
.legend--featured { min-height: 360px; }
.legend__face {
  position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; gap: 12px;
  padding: 18px; border-radius: 22px; backface-visibility: hidden; -webkit-backface-visibility: hidden;
  background: linear-gradient(180deg, rgba(14, 26, 70, .92), rgba(6, 13, 40, .96));
  border: 1px solid rgba(255, 255, 255, .14); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .9), inset 0 1px 0 rgba(255, 255, 255, .08);
  color: #F3F6FF; font-family: var(--font-head);
}
.legend__face--back { transform: rotateY(180deg); }
.legend__hd { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: rgba(243, 246, 255, .65); }
.legend__hd .sporticon { width: 16px; height: 16px; }
.legend--featured .legend__hd { justify-content: center; color: var(--gold); }
.legend__arg { margin: 0; text-align: center; font-family: var(--font-head); font-weight: 800; font-size: clamp(17px, 1.5vw, 22px); line-height: 1.2; letter-spacing: -.01em; color: #fff; }
.legend__teams { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; }
.legend__team { display: grid; justify-items: center; gap: 4px; text-align: center; min-width: 0; }
.legend__team img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .55)); }
.legend__team img.is-fallback { width: 56px; height: 56px; padding: 7px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .22), rgba(255, 255, 255, .08) 70%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.legend--featured .legend__team img { width: 84px; height: 84px; }
.legend--featured .legend__team img.is-fallback { width: 72px; height: 72px; }
.legend__team b { font-family: var(--font-cond); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: .01em; }
.legend--featured .legend__team b { font-size: 40px; }
.legend__team span { font-size: 12.5px; font-weight: 600; color: rgba(243, 246, 255, .8); }
.legend__vs { font-family: var(--font-cond); font-weight: 700; font-size: 14px; letter-spacing: .08em; color: rgba(243, 246, 255, .55); }
.legend__vs::before, .legend__vs::after { content: ""; display: block; width: 1px; height: 22px; margin: 6px auto; background: rgba(255, 255, 255, .15); }
.legend__cells { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.legend__cell { min-height: 40px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .05); color: #fff; font-family: var(--font-head); font-weight: 800; font-size: 13px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; transition: background .2s, border-color .2s; }
.legend__cell::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.legend__cell--a::before { background: #FF4B52; } .legend__cell--b::before { background: #5C8BFF; }
.legend__cell:hover { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .3); }
.legend__cell.is-picked { background: var(--live); border-color: var(--live); }
.legend__cell.is-picked::before { display: none; }
.legend__go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; border-radius: 999px; background: var(--gold); color: var(--navy-900); font-family: var(--font-head); font-weight: 800; font-size: 14.5px; transition: background .2s, transform .25s var(--ease-out); }
.legend__go:hover { background: var(--gold-2); transform: translateY(-1px); }
.legend__go svg { width: 16px; height: 16px; }
.legend__meta { display: flex; justify-content: space-between; font-size: 11.5px; font-weight: 600; color: rgba(243, 246, 255, .6); }
.legend__dots { display: flex; gap: 5px; }
.legend__dots i { width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, .25); }
.legend__dots i.is-on { background: var(--gold); }

@media (max-width: 960px) {
  .legends { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; perspective: 1200px; }
  .legend, .legend--featured { min-height: 0; }
  .legend__face { position: relative; }
  .legend__face--back { position: absolute; }
  .heroB__ball--baseball { width: 260px; left: -120px; top: 40%; opacity: .85; }
  .heroB__ball--football { width: 180px; top: 58%; right: -60px; opacity: .85; }
  .heroB__ball--basketball { display: none; }
}
@media (max-width: 640px) {
  .heroB { padding-top: 36px; }
  .heroB__ctas .btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .legend { transition: none; } }

/* ---------- Bonus bar ---------- */
.bonus { position: relative; z-index: 2; margin-block: clamp(24px, 3vw, 40px); }
/* Same grammar as the bracket bar under the wall: gold slab, bold line + small print, navy pill */
.bonus__bar {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px;
  background: var(--gold); color: var(--navy-900); border-radius: 20px; padding: 16px 16px 16px 26px;
}
.bonus__text { font-family: var(--font-head); font-weight: 700; font-size: clamp(15px, 1.5vw, 18px); letter-spacing: -0.01em; }
.bonus__text small { display: block; font-size: 12px; font-weight: 600; opacity: .75; margin-top: 2px; letter-spacing: 0; }
.bonus .btn { background: var(--navy-900); color: #fff; box-shadow: none; min-height: 46px; }
.bonus .btn:hover { background: var(--navy-700); }
.bonus .btn:focus-visible { outline-color: var(--navy-900); outline-offset: 2px; }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 14px; border-radius: var(--radius-pill);
  border: 1px solid var(--line-2); background: var(--surface-2); color: var(--ink-2);
  font-family: var(--font-head); font-weight: 700; font-size: 13px; transition: all .2s;
}
.chip .sporticon { width: 18px; height: 18px; }
.chip:hover { border-color: var(--ink); color: var(--ink); }
.chip.is-active { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }

/* ---------- Trending matchups: dark band, card wall ----------
   Reference: PrizePicks "Run Your Game" (dark card shell, corner-tinted header,
   split action cells, staggered columns scrubbed on scroll). Red corner = side A,
   blue corner = side B, everywhere on the page. */
.trend {
  position: relative; overflow: hidden;
  background: var(--navy-900);
  padding-top: clamp(56px, 7vw, 88px); padding-bottom: clamp(48px, 6vw, 72px);
}
/* Vignette + a static chalk-dust grain, hero-style; nothing moves */
.trend::before, .trend::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.trend::before { background: radial-gradient(120% 90% at 50% 35%, rgba(30, 79, 216, .18) 0%, transparent 55%), radial-gradient(90% 70% at 50% 50%, transparent 45%, rgba(0, 0, 0, .55) 100%); }
.trend::after { opacity: .05; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"); }
.trend > * { position: relative; z-index: 1; }
.trend__head { display: flex; align-items: center; gap: 14px 18px; flex-wrap: wrap; }
.trend__title { font-family: var(--font-head); font-weight: 800; font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -0.02em; }
.trend__updated { font-size: 13px; color: var(--ink-3); }
.trend__sub { margin-top: 10px; }
.trend__chips { margin-top: 18px; }
.chip.is-active { background: var(--gold); border-color: var(--gold); color: var(--navy-900); }

/* Card wall: five staggered columns, clipped like a teaser, parallaxed by JS */
.wall { --card-w: 236px; --wall-gap: 18px; margin-top: 14px; max-height: clamp(640px, 64vw, 920px); overflow: hidden; overflow: clip; }
.wall.is-clipped { -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 0%, #000 78%, transparent 100%); }
.wall__empty { grid-column: 1 / -1; text-align: center; color: var(--ink-2); padding: 48px 20px; font-family: var(--font-head); font-weight: 600; }
/* 22px of the chips-to-wall gap lives INSIDE the clip box, so the 14px column drift can never push a card above the edge */
.wall__cols { display: grid; grid-template-columns: repeat(var(--cols, 5), var(--card-w)); gap: var(--wall-gap); justify-content: center; padding-top: 22px; }
.wall__col { display: grid; gap: var(--wall-gap); align-content: start; }
.wall__col[data-offset="1"] { padding-top: 72px; }
.wall__col[data-offset="2"] { padding-top: 136px; }
/* A filtered set reads as a list, not a wall: cards in order, no arch, no clip, nothing moving */
.wall.is-flat { max-height: none; overflow: visible; }
.wall.is-flat.is-clipped { -webkit-mask-image: none; mask-image: none; }
.wall__cols.is-flat { grid-auto-rows: max-content; align-items: start; }
/* One league: the cards in a row share their five row heights (header, status, question, entry,
   picks), so every section lines up across the row even when one question runs a line longer.
   Desktop grid only; the phone rail is a flex row. Browsers without subgrid keep the plain grid. */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 961px) {
    .wall__cols.is-flat { row-gap: 0; }
    .wall__cols.is-flat > .mcard { grid-row: span 5; grid-template-rows: subgrid; margin-bottom: var(--wall-gap); }
  }
}
.wall__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px 24px; flex-wrap: wrap; margin-top: 6px; font-size: 12.5px; color: var(--ink-3); }
.wall__foot .link { color: var(--gold); }

/* ---------- Matchup card ---------- */
.mcard {
  --corner-a: #FF4B52; --corner-a-tint: rgba(216, 35, 42, .62); --corner-a-solid: #D8232A;
  --corner-b: #5C8BFF; --corner-b-tint: rgba(30, 79, 216, .62);
  --card: #0F1B45;
  /* header texture: one arena for now; per-sport files go in assets/cards/tex-<sport>.webp (see below) */
  --tex: url("assets/cards/tex-arena.webp");
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto 1fr auto auto;
  background: linear-gradient(180deg, #14224F 0%, #0C1740 100%); color: #F3F6FF;
  border-radius: 18px; overflow: hidden; isolation: isolate;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 24px 40px -28px rgba(0, 0, 0, .8);
  font-family: var(--font-head);
}
.mcard[data-sport="basketball"] { --tex: url("assets/cards/tex-arena.webp"); }
.mcard[data-sport="football"]   { --tex: url("assets/cards/tex-arena.webp"); }
.mcard[data-sport="baseball"]   { --tex: url("assets/cards/tex-arena.webp"); }
.mcard[data-sport="soccer"]     { --tex: url("assets/cards/tex-arena.webp"); }
/* Header: arena photo under a diagonal red-corner / blue-corner split, lit from the top */
.mcard__hd {
  position: relative; padding: 12px 14px 12px; min-height: 158px; display: grid; grid-template-rows: auto 1fr; gap: 10px;
  background:
    linear-gradient(180deg, rgba(5, 13, 43, .1) 0%, rgba(5, 13, 43, 0) 45%, rgba(12, 23, 64, .95) 100%),
    linear-gradient(104deg, var(--corner-a-tint) 0%, var(--corner-a-tint) 42%, rgba(12, 23, 64, .2) 50%, var(--corner-b-tint) 58%, var(--corner-b-tint) 100%),
    var(--tex) center / cover no-repeat, #0C1740;
}
.mcard__hd::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .28) 40%, rgba(255, 255, 255, 0)); transform: skewX(-14deg); pointer-events: none; }
.mcard__row { position: relative; z-index: 1; display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; font-size: 11.5px; font-weight: 700; color: rgba(243, 246, 255, .82); letter-spacing: .02em; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.mcard__row .sporticon { width: 14px; height: 14px; filter: none; }
.mcard__theme { display: block; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mcard__theme .sporticon { display: inline-block; vertical-align: -2px; margin-right: 4px; }
.mcard__hot { flex: none; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px; border-radius: 999px; background: rgba(5, 13, 43, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); color: #fff; font-size: 11px; white-space: nowrap; text-shadow: none; }
/* Both sides share one fixed skeleton (art box, year, two reserved lines of name), so the years sit
   on one line whatever the API sends: a one-word nation beside a four-word college, a flag beside a
   helmet, a kit with no render yet. Nothing here may size itself from content. */
.mcard__teams { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 6px; }
.mcard__team { display: grid; grid-template-rows: 72px 28px 26px; justify-items: center; align-items: start; text-align: center; row-gap: 4px; min-width: 0; }
.mcard__art { width: 100%; height: 72px; display: flex; align-items: flex-end; justify-content: center; }
.mcard__art .kit { margin: 0; flex: none; }
.mcard__art .kit--render { width: 72px; height: 72px; }
.mcard__art .kit--flag { align-self: center; width: 64px; height: 44px; }
/* Colourable kit marks (no club logos, decisions doc Sep 19): the sport's kit in team colours */
.kit { width: 62px; height: 62px; display: block; margin-bottom: 4px; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .45)); }
/* photoreal kit renders: sit on the baseline, a little larger than the vector fallback */
.kit--flip { transform: scaleX(-1); }
.kit--render { width: 72px; height: 72px; object-fit: contain; object-position: center bottom; margin-bottom: 2px; filter: drop-shadow(0 10px 12px rgba(0, 0, 0, .55)); }
/* national flags: a finished object, not a raw rectangle */
.kit--flag { width: 64px; height: 44px; object-fit: cover; border-radius: 6px; margin: 9px 0 11px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .28), 0 8px 16px -6px rgba(0, 0, 0, .7); }
.deck__thumb .kit { width: 30px; height: 30px; margin: 0; }
.deck__thumb .kit--flag { width: 30px; height: 21px; margin: 0; border-radius: 3px; }
.kit--inline { width: 26px; height: 26px; margin: 0 2px 0 0; vertical-align: -7px; display: inline-block; }
.share__logo.kit--render { width: 54px; height: 54px; display: block; margin: 0 auto 4px; }
.mcard__team b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-cond); font-weight: 700; font-size: 28px; line-height: 28px; letter-spacing: .01em; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
/* two lines always reserved; a longer name steps down a size (main.js nameFit), then clamps */
.mcard__name { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; max-width: 100%; height: 26px; font-size: 11.5px; font-weight: 600; line-height: 13px; color: rgba(243, 246, 255, .8); overflow-wrap: break-word; }
.mcard__name.is-long { font-size: 10.5px; }
.mcard__name.is-xlong { font-size: 10px; }
/* centred on the art box */
.mcard__vs { align-self: start; margin-top: 25px; padding: 3px 7px; border-radius: 6px; border: 1px solid rgba(255, 255, 255, .35); background: rgba(5, 13, 43, .45); font-family: var(--font-cond); font-weight: 700; font-style: normal; font-size: 11px; line-height: 14px; letter-spacing: .1em; color: #fff; }
/* one status line ("Closes in 2d 8h", "Final · Brazil won"); a long winner wraps once, never more */
.mcard__strip { display: flex; align-items: center; min-width: 0; padding: 8px 14px; border-bottom: 1px solid rgba(255, 255, 255, .07); font-size: 11px; font-weight: 700; line-height: 1.3; letter-spacing: .04em; text-transform: uppercase; color: rgba(243, 246, 255, .62); }
.mcard__strip > span { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-width: 0; overflow-wrap: break-word; }
.mcard__strip .is-closing { color: #FF9A9E; }
.mcard__arg { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; margin: 0; padding: 12px 14px 0; font-size: 12.5px; line-height: 1.4; color: rgba(243, 246, 255, .78); font-style: italic; overflow-wrap: break-word; }
/* entry line: replaces the pick split (removed Sep 21; the API does not carry it yet) */
.mcard__entry { padding: 12px 14px 10px; text-align: center; font-size: 12.5px; color: rgba(243, 246, 255, .62); font-weight: 600; }
.mcard__entry b { color: var(--gold); font-weight: 800; }
.mcard__stat { display: grid; justify-items: center; gap: 4px; padding: 12px 14px 12px; text-align: center; }
.mcard__stat b { font-size: 26px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; display: inline-flex; align-items: baseline; gap: 8px; }
.mcard__stat b i { font-style: normal; }
.mcard__stat b .a { color: var(--corner-a); } .mcard__stat b .b { color: var(--corner-b); } .mcard__stat b .dot { color: rgba(243, 246, 255, .4); font-size: 18px; }
.mcard__stat small { font-size: 12px; color: rgba(243, 246, 255, .6); font-weight: 600; }
.mcard__bar { width: 100%; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); display: flex; gap: 2px; overflow: hidden; margin-top: 8px; }
.mcard__bar i { display: block; height: 100%; width: 0; transition: width 1s var(--ease-out); }
.mcard__bar i:first-child { background: var(--corner-a); border-radius: 6px 2px 2px 6px; }
.mcard__bar i:last-child { background: var(--corner-b); border-radius: 2px 6px 6px 2px; margin-left: auto; }
.mcard__cells { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, .08); background: rgba(5, 13, 43, .35); }
.mcard__cell {
  min-width: 0; min-height: 56px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 5px;
  font-family: var(--font-head); font-weight: 800; font-size: 14px; line-height: 1.1; text-align: center; color: #fff;
  transition: background .2s, color .2s, opacity .2s;
}
/* the team label never grows the cell: two lines at most, a size down for long names */
.mcard__label { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; min-width: 0; overflow-wrap: break-word; }
.mcard__label.is-long { font-size: 12.5px; }
.mcard__label.is-xlong { font-size: 12px; }
.mcard__cell:disabled { cursor: default; opacity: .5; }
.mcard__cell:disabled:hover { background: none; }
.mcard__cell + .mcard__cell { border-left: 1px solid rgba(255, 255, 255, .08); }
.mcard__cell:focus-visible { outline-offset: -4px; border-radius: 0; }
.chip.is-active:focus-visible, .bracket__btn:focus-visible, .toast__go:focus-visible, .toast__close:focus-visible { outline-color: var(--navy-900); outline-offset: 2px; }
.mcard__cell::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.mcard__cell--a::before { background: var(--corner-a); } .mcard__cell--b::before { background: var(--corner-b); }
.mcard__cell:hover { background: rgba(255, 255, 255, .06); }
.mcard__cell.is-picked::before { display: none; }
.mcard__cell--a.is-picked { background: var(--corner-a-solid); color: #fff; }
.mcard__cell--b.is-picked { background: var(--corner-b); color: var(--navy-950); }
.mcard.has-pick .mcard__cell:not(.is-picked) { opacity: .62; }
.mcard:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 0 0 1px rgba(255, 255, 255, .16), 0 28px 44px -26px rgba(0, 0, 0, .85); }
.mcard.has-pick { box-shadow: inset 0 0 0 1px var(--picked, rgba(255,255,255,.2)); }
.mcard.has-pick[data-picked="a"] { --picked: var(--corner-a); } .mcard.has-pick[data-picked="b"] { --picked: var(--corner-b); }

/* ---------- Bracket bar (below the wall) ---------- */
.bracket {
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 18px;
  margin-top: 26px; padding: 16px 16px 16px 26px; border-radius: 20px;
  background: var(--gold); color: var(--navy-900);
}
.bracket__text { font-family: var(--font-head); font-weight: 700; font-size: clamp(15px, 1.5vw, 18px); letter-spacing: -0.01em; }
.bracket__text small { display: block; font-size: 12px; font-weight: 600; opacity: .75; margin-top: 2px; letter-spacing: 0; }
.bracket__btn { background: var(--navy-900); color: #fff; box-shadow: none; min-height: 46px; }
.bracket__btn:hover { background: var(--navy-700); }

/* ---------- Pick toast (fixed, PrizePicks bonus-bar grammar) ---------- */
.toast {
  position: fixed; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); z-index: 80; transform: translate(-50%, 24px);
  display: grid; grid-template-columns: auto 1fr auto auto; align-items: center; gap: 16px;
  width: min(640px, calc(100% - 32px)); padding: 10px 10px 10px 22px; border-radius: 999px;
  background: var(--gold); color: var(--navy-900);
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
  font-family: var(--font-head); opacity: 0; pointer-events: none;
  transition: opacity .32s, transform .32s cubic-bezier(.2, .8, .2, 1);
}
.toast.is-on { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.toast__label { font-weight: 800; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; opacity: .75; white-space: nowrap; }
.toast__text { font-weight: 600; font-size: 14px; line-height: 1.3; }
.toast__text b { font-weight: 800; }
.toast__go { display: inline-flex; align-items: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 999px; background: var(--navy-900); color: #fff; font-weight: 800; font-size: 14px; white-space: nowrap; }
.toast__go svg { width: 16px; height: 16px; }
.toast__go:hover { background: var(--navy-700); }
.toast__close { width: 36px; height: 36px; border-radius: 50%; font-size: 22px; line-height: 1; opacity: .6; }
.toast__close:hover { opacity: 1; background: rgba(0, 0, 0, .08); }

@media (max-width: 1100px) { .wall { --card-w: 224px; } }
@media (max-width: 960px) {
  .wall { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  /* hold the rail's height before the board is built, so nothing below it moves when it arrives */
  .wall__cols { min-height: 420px; }
  .wall__cols { display: flex; justify-content: flex-start; gap: 14px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding: 6px var(--gutter) 18px; scrollbar-width: none; }
  .wall__cols::-webkit-scrollbar { display: none; }
  .wall__col { display: contents; }
  .wall__col[data-offset] { padding-top: 0; }
  .wall__cols .mcard { flex: 0 0 var(--card-w); scroll-snap-align: start; order: var(--rank, 0); }
  .wall { max-height: none; }
  .wall.is-clipped { -webkit-mask-image: none; mask-image: none; }
  .bracket { grid-template-columns: 1fr; text-align: center; justify-items: center; border-radius: 24px; padding: 18px; }
  .toast { grid-template-columns: 1fr auto auto; gap: 10px; padding: 12px 10px 12px 18px; border-radius: 22px; }
  .toast__label { display: none; }
  .toast__text { font-size: 13px; }
}

/* ---------- Engine callout ---------- */
.engine { padding-block: clamp(40px, 5vw, 64px) clamp(24px, 3vw, 40px); }
.engine__band {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center;
  background: var(--surface);
  border: 1px solid var(--line); border-radius: 24px; padding: clamp(24px, 3.6vw, 44px); box-shadow: var(--shadow-card);
}
.engine__copy { display: grid; gap: 18px; position: relative; }
.engine__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; position: relative; }
.stat { background: var(--surface-2); border: 1px solid var(--line); border-radius: 14px; padding: 16px; display: grid; gap: 4px; }
.stat__n { font-family: var(--font-display); font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; color: var(--accent); letter-spacing: .01em; }
.stat__l { font-size: 12.5px; color: var(--ink-2); font-weight: 600; line-height: 1.3; }
.engine__sim { position: relative; background: var(--navy-900); border: 1px solid var(--line-2); border-radius: 20px; padding: 20px; display: grid; gap: 14px; }
.engine__simhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 12px; color: var(--ink-3); font-family: var(--font-head); font-weight: 600; letter-spacing: .02em; }
.engine__score { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; text-align: center; }
.engine__score .t { font-size: 12.5px; color: var(--ink-2); font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 6px; }
.engine__score .t img { width: 22px; height: 22px; object-fit: contain; }
.engine__score .s { font-family: var(--font-display); font-weight: 700; font-size: 44px; line-height: 1; }
.engine__score .f { font-size: 11px; color: var(--ink-3); letter-spacing: .12em; text-transform: uppercase; font-weight: 700; }
.engine__chart { width: 100%; height: 110px; }
.engine__chart path { fill: none; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.engine__chart .a { stroke: var(--red-2); }
.engine__chart .b { stroke: var(--royal-3); }
.engine__chart .grid { stroke: var(--line); stroke-width: 1; }
.engine__feed { display: grid; gap: 6px; font-size: 12.5px; color: var(--ink-2); }
.engine__feed div { display: flex; gap: 10px; }
.engine__feed span:first-child { color: var(--gold); font-family: var(--font-head); font-weight: 700; min-width: 52px; white-space: nowrap; }

/* ---------- Play / Earn / Win (pinned) ---------- */
.loop { background: var(--navy-950); position: relative; overflow-x: clip; }
.loop__intro { text-align: center; display: grid; justify-items: center; gap: 14px; padding-top: clamp(64px, 9vw, 120px); }
.loop__intro .lead { max-width: 52ch; }
.loop__stage { position: relative; }
/* Flat by default (no JS, reduced motion, phones): the three steps stack.
   JS adds .is-pinned for the scroll-driven version on larger screens. */
.loop__sticky { display: grid; }
.loop__panels { position: relative; display: grid; gap: clamp(24px, 4vw, 48px); }
.loop.is-pinned .loop__sticky { position: sticky; top: 74px; height: calc(100vh - 74px); min-height: 640px; overflow: hidden; }
.loop.is-pinned .loop__sticky > .container { height: 100%; }
.loop.is-pinned .loop__panels { gap: 0; }
.loop__panel {
  display: grid; grid-template-columns: 1fr 1.05fr; gap: clamp(28px, 5vw, 64px); align-items: center;
  padding-block: 32px;
}
.loop.is-pinned .loop__panel { grid-area: 1 / 1; padding-block: 56px 70px; opacity: 0; pointer-events: none; }
.loop.is-pinned .loop__panel.is-active { pointer-events: auto; }
.loop__word { font-family: var(--font-display); font-weight: 700; font-size: clamp(64px, 9vw, 128px); line-height: .9; letter-spacing: .01em; text-transform: uppercase; }
.loop__word span { display: block; }
.loop__word .solid { color: var(--ink); }
.loop__word .ghost { font-family: var(--font-head); font-weight: 600; font-size: clamp(16px, 1.5vw, 20px); letter-spacing: 0; line-height: 1.3; text-transform: none; color: var(--ink-3); margin-top: 8px; }
.loop__text { display: grid; gap: 14px; max-width: 48ch; }
.loop__text .h3 { font-size: clamp(20px, 2.1vw, 28px); }
/* Play and Win lists (Sep 24): each label and its line used to share one flex row, so every line
   started wherever its label happened to end and "Redeem it." broke in two. The labels now share one
   column, each kept on a single line, and every description starts on the same vertical; phones put
   the label above its line, indented to sit under the label text. */
.loop__text ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(10.25em, max-content) minmax(0, 1fr); column-gap: 18px; row-gap: 12px; align-items: baseline; }
/* 10.25em fits the longest label ("Hold presale MLC."), so Play and Win share one text column and the
   descriptions do not jump sideways as the panels swap */
.loop__text li { display: contents; color: var(--ink-2); font-size: 14.5px; line-height: 1.45; }
/* the dot is inline, so each row aligns on the label's text baseline rather than on the dot */
.loop__text li b { display: block; white-space: nowrap; color: var(--ink); }
.loop__text li b::before { content: ""; display: inline-block; width: 5px; height: 5px; margin-right: 10px; border-radius: 50%; background: var(--gold); vertical-align: middle; transform: translateY(-1px); }
.loop__text li span { min-width: 0; }
@media (max-width: 640px) {
  .loop__text ul { grid-template-columns: minmax(0, 1fr); row-gap: 3px; }
  .loop__text li span { padding-left: 15px; margin-bottom: 10px; }   /* 5px dot + 10px gap */
  .loop__text li:last-child span { margin-bottom: 0; }
}
.loop__visual { position: relative; display: grid; place-items: center; min-height: 420px; }
.loop__nav { display: none; position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); gap: 6px; padding: 6px; border-radius: 999px; background: rgba(8, 21, 58, .92); border: 1px solid var(--line-2); z-index: 5; }
.loop__nav button { padding: 9px 18px; border-radius: 999px; font-family: var(--font-head); font-weight: 800; font-size: 13px; letter-spacing: .06em; color: var(--ink-2); transition: all .25s; }
.loop__nav button.is-active { background: var(--gold); color: var(--navy-900); }
.loop__spacer { display: none; }
.loop.is-pinned .loop__nav { display: flex; }
.loop.is-pinned .loop__spacer { display: block; height: 240vh; }

/* Loop visuals */
.vis-play { position: relative; width: min(100%, 300px); }
/* Card deck: one card in view; the leaver lifts away, the next rises from the crest row */
.deck { width: min(100%, 400px); position: relative; z-index: 1; }
/* Sport ball behind the panel: big, faint, static; only its opacity changes with the card's sport */
.deck__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.deck__bg img { position: absolute; right: -14%; bottom: -12%; width: min(60%, 420px); opacity: 0; transition: opacity .9s ease; }
.deck__bg img.is-on { opacity: .13; }
.deck__stage { position: relative; }
.deck__card { position: absolute; left: 0; top: 0; width: 100%; opacity: 0; transform: translateY(62%) scale(.42); transform-origin: 50% 100%; pointer-events: none; transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .35s ease; will-change: transform, opacity; box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .8); }
.deck__card.is-in { opacity: 1; transform: none; pointer-events: auto; }
.deck__card.is-out { opacity: 0; transform: translateY(-34px) scale(.94); transition: transform .4s cubic-bezier(.4, 0, .6, 1), opacity .3s ease; }
.mcard__cell--a.is-demo { background: var(--corner-a-solid); color: #fff; } .mcard__cell--a.is-demo::before { background: #fff; }
.mcard__cell--b.is-demo { background: var(--corner-b); color: var(--navy-950); } .mcard__cell--b.is-demo::before { background: var(--navy-950); }
.deck__thumbs { position: relative; z-index: 4; display: flex; align-items: center; gap: 8px; margin-top: 18px; }
.deck__thumb { display: inline-flex; align-items: center; gap: 3px; padding: 6px 9px; border-radius: 12px; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); opacity: .5; transition: opacity .3s, border-color .3s, background .3s; }
.deck__thumb img { width: 28px; height: 28px; padding: 3px; border-radius: 50%; object-fit: contain; background: radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .24), rgba(255, 255, 255, .08) 70%); }
.deck__thumb:hover { opacity: .85; }
.deck__thumb.is-on { opacity: 1; border-color: rgba(255, 199, 44, .7); background: rgba(255, 199, 44, .12); }
.deck__next { margin-left: auto; width: 42px; height: 42px; border-radius: 50%; background: var(--gold); color: var(--navy-900); display: grid; place-items: center; transition: background .2s; }
.deck__next svg { width: 18px; height: 18px; }
.deck__next:hover { background: var(--gold-2); }
@media (prefers-reduced-motion: reduce) { .deck__card { transition: none; } }
/* Earn: a week of earnings as a still ledger card, the MLC coin resting on its corner */
.ledger {
  position: relative; width: min(100%, 500px); margin-top: 34px;
  background: #0F1B45; border: 1px solid rgba(255, 255, 255, .1); border-radius: 22px; padding: 26px 26px 20px;
  font-family: var(--font-head); color: #F3F6FF; box-shadow: 0 40px 80px -40px rgba(0, 0, 0, .8);
}
.ledger__coin { position: absolute; top: -92px; right: -44px; width: 210px; height: 210px; pointer-events: none; }
.ledger__coin img { position: relative; width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .55)); }
.ledger__eyebrow { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(243, 246, 255, .6); }
.ledger__totals { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 12px 0 18px; padding-right: 120px; }
.ledger__totals b { display: block; font-size: 36px; font-weight: 800; letter-spacing: -0.02em; line-height: 1; font-variant-numeric: tabular-nums; }
.ledger__totals small { display: block; margin-top: 4px; font-size: 12px; font-weight: 600; color: rgba(243, 246, 255, .62); }
.ledger .mlc { color: var(--gold); } .ledger .xp { color: var(--royal-3); }
.ledger__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .1); }
.ledger__rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid rgba(255, 255, 255, .08); font-size: 14px; color: rgba(243, 246, 255, .82); }
.ledger__rows li span b { color: #fff; font-weight: 700; }
.ledger__rows em { font-style: normal; display: inline-flex; gap: 10px; flex: none; font-weight: 800; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.ledger__rows i { font-style: normal; }
.ledger__foot { display: flex; justify-content: space-between; align-items: center; padding-top: 12px; font-size: 12.5px; color: rgba(243, 246, 255, .62); }
.ledger__foot b { color: #fff; font-size: 13.5px; }
.vis-win { position: relative; width: min(100%, 580px); border-radius: 24px; overflow: hidden; border: 1px solid var(--line-2); box-shadow: var(--shadow-card); background: #0F1B45; display: grid; }
.vis-win img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.vis-win__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.vis-win__item { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .1); border-radius: 12px; padding: 11px 14px; font-family: var(--font-head); font-weight: 700; font-size: 14px; color: #F3F6FF; display: flex; gap: 8px; align-items: center; }
.vis-win__item small { display: block; font-weight: 600; color: rgba(243, 246, 255, .62); font-size: 12px; }

/* ---------- MLC + XP explainer ---------- */
.economy { padding-top: 0; }
.economy__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.ecard { position: relative; overflow: hidden; border-radius: 24px; padding: clamp(24px, 3vw, 36px); display: grid; gap: 18px; align-content: start; border: 1px solid var(--line); }
.ecard { background: var(--surface); box-shadow: var(--shadow-card); }
.ecard__head { display: flex; align-items: center; gap: 14px; position: relative; }
.ecard__icon { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 18px; }
.ecard--mlc .ecard__icon { background: var(--gold); color: var(--navy-900); }
.ecard--xp .ecard__icon { background: var(--royal); color: #fff; }
.ecard__icon--img { background: none !important; width: 70px; height: 70px; }
.ecard__icon--img img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(11, 27, 69, .25)); }
.ecard__art { position: absolute; right: 12px; bottom: 4px; width: clamp(200px, 21vw, 270px); pointer-events: none; filter: drop-shadow(0 22px 28px rgba(11, 27, 69, .25)); }
.ecard--mlc:has(.ecard__art:not([style*="none"])) p { max-width: 55%; }
.ecard__head .h3 { font-size: clamp(22px, 2.2vw, 28px); }
.ecard__head small { display: block; color: var(--ink-2); font-size: 13px; font-weight: 600; margin-top: 2px; }
.ecard p { margin: 0; color: var(--ink-2); position: relative; }
.ecard p b { color: var(--ink); }

.ladder { display: grid; gap: 0; position: relative; }
.rung { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--line); }
.rung:first-child { border-top: 0; }
.rung__n { font-family: var(--font-display); font-weight: 700; font-size: 18px; color: var(--ink-3); display: grid; place-items: center; }
.rung__n img { width: 44px; height: 44px; object-fit: contain; }
.rung__n i { font-style: normal; display: none; }
.rung__n:has(img[style*="none"]) i, .rung__n:not(:has(img)) i { display: block; }
.rung__t { font-family: var(--font-head); font-weight: 800; font-size: 15px; }
.rung__t small { display: block; font-weight: 600; color: var(--ink-2); font-size: 12.5px; }
.rung__xp { font-family: var(--font-head); font-weight: 700; font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.rung.is-you { background: rgba(47,107,255,.10); border-radius: 12px; padding-inline: 12px; margin-inline: -12px; border-top: 0; }
.rung.is-you .rung__xp { color: var(--accent); }

/* ---------- Debate driver ---------- */
.debate { position: relative; overflow: hidden; padding-block: clamp(40px, 5vw, 64px) clamp(48px, 6vw, 80px); }
.rep { padding-top: clamp(40px, 5vw, 64px); }
.debate__band {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(24px, 4vw, 64px); align-items: center;
  background: linear-gradient(135deg, #1E4FD8 0%, #1A45C4 100%);
  border-radius: 24px; padding: clamp(28px, 4vw, 56px);
}
/* Ball sits IN FRONT of the band, hugging its top-left corner (anchored to the container edge) */
.debate__ball { --bw: clamp(96px, 12vw, 190px); z-index: 2; width: var(--bw); left: max(calc((100% - var(--container)) / 2 - .58 * var(--bw)), -3%); top: -10px; opacity: 1; filter: drop-shadow(0 36px 30px rgba(3, 10, 40, .55)); }
.debate__copy { display: grid; gap: 18px; position: relative; z-index: 1; }
.debate__copy .display { font-size: clamp(36px, 4.6vw, 60px); }
.debate__copy .lead { color: rgba(255,255,255,.85); }
.debate__form { display: flex; gap: 8px; background: #fff; border-radius: 16px; padding: 8px 8px 8px 18px; align-items: center; color: var(--navy-900); }
.debate__form input { flex: 1; min-width: 0; border: 0; outline: 0; font: inherit; font-size: 15px; color: var(--navy-900); background: transparent; font-family: var(--font-head); font-weight: 600; }
.debate__form input::placeholder { color: #6B7699; }
.debate__form .btn { min-height: 46px; }
.debate__chips { display: flex; gap: 8px; flex-wrap: wrap; }
.debate__chips .chip { border-color: rgba(255,255,255,.35); color: #fff; background: var(--surface-3); }
.debate__chips .chip:hover { background: #fff; color: var(--navy-900); }
.debate__thread { position: relative; z-index: 1; display: grid; gap: 12px; }
.bubble { max-width: 88%; background: #fff; color: var(--navy-900); border-radius: 18px 18px 18px 4px; padding: 12px 16px; font-family: var(--font-head); font-weight: 600; font-size: 14.5px; box-shadow: 0 14px 30px -14px rgba(0,0,0,.5); display: grid; gap: 4px; }
.bubble small { color: #6B7699; font-size: 11.5px; font-weight: 700; letter-spacing: .04em; }
.bubble--gold { background: var(--gold); border-radius: 18px 18px 4px 18px; margin-left: auto; }
.bubble--navy { background: var(--navy-900); color: #fff; }
.bubble--navy small { color: var(--ink-2); }
.bubble__stats { display: flex; gap: 14px; font-size: 12px; color: #6B7699; font-weight: 700; }
.bubble--navy .bubble__stats { color: var(--ink-2); }

/* ---------- Rep / leaderboard ---------- */
.rep__grid { display: grid; grid-template-columns: 1fr 1.1fr 1fr; gap: 20px; align-items: stretch; }
.rep__copy { display: grid; gap: 22px; align-content: center; justify-items: center; }
/* A hand of record cards: one physical-looking card with two behind it, no motion */
.fan { position: relative; width: 340px; height: 400px; }
.fan__card { position: absolute; left: 50%; top: 50%; width: 238px; height: 332px; margin: -166px 0 0 -119px; border-radius: 20px; padding: 18px;
  background: linear-gradient(160deg, #142A6B 0%, #0A1B4C 45%, #050E2C 100%); box-shadow: 0 30px 50px -22px rgba(5, 13, 43, .55), inset 0 0 0 2px var(--gold), inset 0 0 0 4px rgba(5, 13, 43, .9), inset 0 0 0 5px rgba(255, 199, 44, .45); color: #fff; }
.fan__card::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, .14) 0%, rgba(255, 255, 255, 0) 42%); pointer-events: none; }
.fan__card--back2 { transform: rotate(-16deg) translate(-42px, 10px); opacity: .55; }
.fan__card--back1 { transform: rotate(-7deg) translate(-18px, 4px); opacity: .8; }
.fan__card--front { transform: rotate(4deg); display: grid; grid-template-rows: auto 1fr auto auto auto; gap: 4px; justify-items: center; text-align: center; }
.fan__logo { width: 84px; height: auto; justify-self: start; }
.fan__badge { width: 108px; height: 108px; align-self: center; filter: drop-shadow(0 12px 16px rgba(0, 0, 0, .5)); }
.fan__num { font-family: var(--font-cond); font-weight: 700; font-size: 60px; line-height: 1; letter-spacing: .01em; color: #fff; }
.fan__num i { font-style: normal; font-size: 30px; color: var(--gold); margin-left: 2px; }
.fan__lbl { font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: rgba(243, 246, 255, .7); }
.fan__foot { display: flex; justify-content: space-between; width: 100%; margin-top: 8px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, .16); font-family: var(--font-head); font-weight: 700; font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--gold); }
.rep__cta { text-align: center; }
/* The player card is the same object as the fan graphic beside it: navy, gold-foil edge, a sheen */
.profile { position: relative; overflow: hidden; border-radius: 24px; padding: 26px 24px 22px; display: grid; gap: 18px; color: #fff;
  background: linear-gradient(160deg, #142A6B 0%, #0A1B4C 45%, #050E2C 100%);
  box-shadow: 0 34px 60px -26px rgba(5, 13, 43, .6), inset 0 0 0 2px var(--gold), inset 0 0 0 4px rgba(5, 13, 43, .9), inset 0 0 0 5px rgba(255, 199, 44, .45); }
.profile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(115deg, rgba(255, 255, 255, .12) 0%, rgba(255, 255, 255, 0) 40%); pointer-events: none; }
.profile__logo { position: absolute; right: 22px; top: 16px; width: 72px; height: auto; opacity: .95; }
.profile__name small img { width: 18px; height: 18px; vertical-align: -4px; margin-right: 5px; }
.profile__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.profile__foot span { font-family: var(--font-head); font-weight: 700; font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.profile__head { display: flex; align-items: center; gap: 14px; position: relative; padding-right: 84px; min-height: 92px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-family: var(--font-display); font-weight: 700; font-size: 19px; background: var(--gold); color: var(--navy-900); }
.profile__name { font-family: var(--font-head); font-weight: 800; font-size: 18px; }
.profile__name small { display: block; font-weight: 600; font-size: 12.5px; color: var(--ink-2); }
.profile__rank { margin-left: auto; text-align: right; position: absolute; right: 0; top: 46px; }
.profile__rank b { font-family: var(--font-display); font-weight: 700; font-size: 30px; color: var(--gold); display: block; line-height: 1; }
.profile__rank small { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.profile__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; position: relative; }
.pstat { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; padding: 12px; display: grid; gap: 2px; }
.pstat b { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1.05; letter-spacing: .01em; font-variant-numeric: tabular-nums; color: #fff; white-space: nowrap; }
.pstat small { font-size: 11.5px; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.ring { position: relative; width: 100%; height: 8px; border-radius: 8px; background: rgba(255, 255, 255, .12); overflow: hidden; }
.ring i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #FFE07A, var(--gold)); border-radius: 8px; }
.profile__xp { display: grid; gap: 8px; font-size: 12.5px; color: var(--ink-2); font-family: var(--font-head); font-weight: 600; position: relative; }
.profile__xp div { display: flex; justify-content: space-between; }
.profile__xp b { color: var(--ink); }
.badges { display: flex; gap: 8px; flex-wrap: wrap; position: relative; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .16); font-size: 12px; font-weight: 700; font-family: var(--font-head); color: var(--mist); }
.badge.is-gold { background: rgba(255,199,44,.16); border-color: rgba(255,199,44,.6); color: var(--gold); }
.board { border-radius: 24px; border: 1px solid var(--line-2); background: var(--surface); box-shadow: var(--shadow-card); padding: 20px; display: grid; gap: 4px; align-content: start; }
.board__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-head); font-weight: 800; font-size: 15px; margin-bottom: 6px; }
.board__head small { font-weight: 700; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }
.row { display: grid; grid-template-columns: 30px 1fr auto auto; gap: 12px; align-items: center; padding: 10px 10px; border-radius: 12px; font-family: var(--font-head); font-size: 14px; font-weight: 600; }
.row:nth-child(-n+4) .row__n { color: var(--accent); }
.row__n { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--ink-3); }
.row__u { display: flex; align-items: center; gap: 10px; }
.row__u i { width: 28px; height: 28px; border-radius: 50%; background: var(--navy-700); color: #fff; display: grid; place-items: center; font-style: normal; font-size: 11px; font-weight: 800; }
.row__acc { color: var(--ink-2); font-variant-numeric: tabular-nums; }
.row__xp { color: var(--accent); font-weight: 800; font-variant-numeric: tabular-nums; }
.row.is-you { background: rgba(30,79,216,.07); border: 1px solid rgba(30,79,216,.22); margin-top: 6px; }
.row.is-you .row__n { color: var(--accent); }
.board__foot { margin-top: 8px; padding: 0 10px; font-size: 13px; }

/* ---------- Pre-sale ---------- */
.presale { position: relative; overflow: hidden; background: var(--navy-950); }
.presale__bg { position: absolute; inset: 0; pointer-events: none; }
.presale__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .22; }
.presale__bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--navy-950) 0%, rgba(4,10,34,.5) 40%, var(--navy-950) 100%); }
.presale__head { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 28px; align-items: end; margin-bottom: 34px; }
.presale__head .display { font-size: clamp(34px, 4.3vw, 58px); }
.presale__status { display: grid; gap: 12px; background: var(--surface-2); border: 1px solid var(--line-2); border-radius: 18px; padding: 18px; background: rgba(8, 21, 58, .78); }
.presale__status .top { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: var(--ink-2); }
.presale__status .top b { color: var(--gold); }
.presale__bar { height: 10px; border-radius: 10px; background: var(--surface-3); overflow: hidden; }
.presale__bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--gold), #FFE07A); border-radius: 10px; }
.countdown { display: flex; gap: 10px; }
.countdown div { flex: 1; text-align: center; background: var(--navy-900); border: 1px solid var(--line); border-radius: 12px; padding: 10px 6px; }
.countdown b { display: block; font-family: var(--font-display); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.countdown small { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); font-weight: 700; }
.tiers { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
.tier { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 16px; align-content: stretch; border-radius: 24px; padding: 26px; background: var(--navy-800); border: 1px solid var(--line-2); transition: transform .35s var(--ease-out), border-color .25s; }
.tier:hover { border-color: rgba(183,194,230,.45); }
.tier--featured, .tier--featured:hover { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 30px 60px -40px rgba(255,199,44,.35); }
.tier__flag { position: absolute; top: -12px; left: 24px; background: var(--gold); color: var(--navy-900); font-family: var(--font-head); font-weight: 800; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; }
.tier__name { font-family: var(--font-display); font-weight: 700; font-size: 28px; letter-spacing: .02em; text-transform: uppercase; }
.tier__lock { font-family: var(--font-head); font-weight: 800; font-size: 26px; letter-spacing: -0.02em; }
.tier__lock small { display: block; font-size: 12.5px; color: var(--ink-2); font-weight: 600; letter-spacing: 0; }
.tier__bonus { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 10px; background: rgba(255,199,44,.12); border: 1px solid rgba(255,199,44,.3); color: var(--gold); font-family: var(--font-head); font-weight: 800; font-size: 14px; width: max-content; }
.tier ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.tier li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; color: var(--ink-2); }
.tier li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--gold); }
.tier .btn { align-self: end; }
.presale__kicker { margin: 0; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; letter-spacing: .28em; text-transform: uppercase; color: var(--gold); }
.presale__cta { position: relative; display: flex; gap: 14px 24px; flex-wrap: wrap; align-items: center; margin-top: 26px; }
.presale__custom { font-size: 13.5px; color: var(--mist); }
/* Founder pre-sale: one panel, one statement, one CTA (decisions doc, Sep 19) */
.founder { position: relative; display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: clamp(24px, 4vw, 52px); align-items: center;
  background: rgba(8, 21, 58, .72); border: 1px solid var(--line-2); border-radius: 26px; padding: clamp(22px, 3.2vw, 40px); backdrop-filter: blur(6px); }
.founder__art { width: 100%; height: auto; border-radius: 18px; }
.founder__copy { display: grid; gap: 16px; justify-items: start; }
.founder__copy .display { font-size: clamp(34px, 4.6vw, 58px); margin: 0; }
.founder__copy .lead { margin: 0; max-width: 56ch; }
.founder__copy .presale__note { margin-top: 2px; }
@media (max-width: 860px) { .founder { grid-template-columns: 1fr; } .founder__art { max-width: 280px; justify-self: center; } }
.presale__note { position: relative; margin-top: 18px; font-size: 12.5px; color: var(--ink-3); max-width: 80ch; }

/* ---------- FAQ ---------- */
.faq__grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(24px, 4vw, 64px); }
.faq__copy { display: grid; gap: 14px; align-content: start; position: sticky; top: 100px; }
.faq__list { display: grid; gap: 10px; }
.qa { border: 1px solid var(--line); border-radius: 14px; background: var(--surface); overflow: hidden; transition: border-color .2s; }
.qa[open] { border-color: var(--line-2); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 20px; font-family: var(--font-head); font-weight: 700; font-size: 16px; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; transition: transform .3s var(--ease-out), background .2s; }
.qa summary i::before { content: "+"; font-style: normal; font-weight: 700; font-size: 18px; line-height: 1; color: var(--accent); }
.qa[open] summary i { transform: rotate(45deg); background: var(--surface-2); }
/* Answers open and close on one CSS transition (the 0fr -> 1fr grid row), so the motion is the
   same on every device and does not depend on the animation library, which phones no longer load.
   JS only flips .is-collapsed and holds the <details> open until the close has finished. */
.qa__a { display: grid; grid-template-rows: 1fr; padding: 0 20px 20px; color: var(--ink-2); font-size: 15px; max-width: 70ch; opacity: 1;
  transition: grid-template-rows .34s var(--ease-out), padding-bottom .34s var(--ease-out), opacity .26s ease .04s; }
.qa__body { min-height: 0; overflow: hidden; }
.qa.is-collapsed .qa__a { grid-template-rows: 0fr; padding-bottom: 0; opacity: 0; transition: grid-template-rows .28s cubic-bezier(.4, 0, .2, 1), padding-bottom .28s cubic-bezier(.4, 0, .2, 1), opacity .18s ease; }
.qa__a p { margin: 0; }
.qa__a p + p { margin-top: 10px; }

/* ---------- Final CTA ---------- */
.final { position: relative; overflow: hidden; text-align: center; padding-block: clamp(80px, 12vw, 160px); background: var(--navy-900); }
.final__bg { position: absolute; inset: 0; pointer-events: none; }
.final__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .28; }
.final__bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient(70% 60% at 50% 40%, rgba(30,79,216,.35), transparent 70%), linear-gradient(180deg, var(--navy-950), transparent 30%, transparent 70%, var(--navy-900)); }
/* The four balls live in the arena, not on top of it: big, faint, softened, tinted into the navy */
.final__balls { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.final__balls img { position: absolute; width: clamp(160px, 22vw, 360px); opacity: .14; }
.final__balls img:nth-child(1) { left: -4%; top: 6%; transform: rotate(-18deg); }
.final__balls img:nth-child(2) { right: -5%; top: 2%; width: clamp(140px, 18vw, 300px); }
.final__balls img:nth-child(3) { left: 4%; bottom: -10%; width: clamp(140px, 18vw, 300px); }
.final__balls img:nth-child(4) { right: 2%; bottom: -14%; }
.final__inner { position: relative; display: grid; justify-items: center; gap: 22px; }
.final__inner .display { font-size: clamp(44px, 7.5vw, 104px); }
.final__inner .lead { max-width: 74ch; }
.final__inner .lead b { white-space: nowrap; }
.final__ctas { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ---------- Footer ---------- */
.footer { border-top: 1px solid var(--line); background: var(--navy-950); padding-block: 48px 28px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: 28px; }
.footer__col h4 { font-size: 13px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 14px; }
.footer__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer__col a { color: var(--ink-2); font-size: 14.5px; }
.footer__col a:hover { color: #fff; }
.footer__brand { display: grid; gap: 14px; align-content: start; }
.footer__brand p { margin: 0; color: var(--ink-2); font-size: 14px; max-width: 34ch; }
.social { display: flex; gap: 8px; }
.social a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; color: var(--ink-2); transition: all .2s; }
.social a:hover { background: #fff; color: var(--navy-900); border-color: #fff; }
.social svg { width: 16px; height: 16px; }
.footer__bottom { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 36px; padding-top: 18px; border-top: 1px solid var(--line); font-size: 12.5px; color: var(--ink-3); }
.footer__bottom .tag { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.footer__follow { font-family: var(--font-head); font-weight: 600; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }

/* ---------- Copy-driven modules ---------- */
.underdog { display: flex; gap: 12px; align-items: center; margin-top: 18px; padding: 12px 16px; border-radius: 14px; background: rgba(255,199,44,.08); border: 1px dashed rgba(255,199,44,.35); font-size: 13.5px; color: var(--ink-2); }
.underdog b { color: var(--gold-text); }
.underdog img { width: 34px; height: 34px; object-fit: contain; flex: none; filter: drop-shadow(0 4px 8px rgba(255,199,44,.35)); }
.proofchips { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; margin-top: 6px; }
.proofchip { border-top: 1px solid var(--line-2); padding-top: 14px; display: grid; gap: 6px; align-content: start; }
.proofchip b { font-family: var(--font-head); font-weight: 700; font-size: 15px; letter-spacing: -0.01em; }
.proofchip span { font-size: 13px; color: var(--ink-2); line-height: 1.45; }
.engine__last { position: relative; display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-head); font-weight: 600; font-size: 12.5px; color: var(--ink-3); }
.engine__last b { color: var(--ink); font-weight: 700; }
.earn-table { display: grid; gap: 0; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.earn-table div { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 13.5px; color: var(--ink-2); }
.earn-table div:first-child { border-top: 0; }
.earn-table b { font-family: var(--font-head); font-weight: 800; font-size: 13px; white-space: nowrap; }
.earn-table .mlc { color: var(--gold-text); } .earn-table .xp { color: var(--accent); }
.oneliner { text-align: center; display: grid; gap: 6px; justify-items: center; margin-block: 30px 34px; }
.oneliner .h2 { font-size: clamp(30px, 3.8vw, 46px); }
.oneliner small { color: var(--ink-2); font-size: 14px; }
.steps { list-style: none; margin: 4px 0 0; padding: 14px 0 0; border-top: 1px solid rgba(255,255,255,.28); display: flex; flex-wrap: wrap; gap: 10px 26px; }
.steps li { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-head); font-weight: 700; font-size: 14.5px; color: #fff; }
.steps b { font-size: 12px; letter-spacing: .08em; color: var(--gold); }
.share { position: relative; z-index: 1; background: var(--navy-900); --ink: var(--ice); --ink-2: var(--mist); --ink-3: var(--muted); --line: rgba(183,194,230,.14); --line-2: rgba(183,194,230,.28); --surface-2: rgba(255,255,255,.05); color: var(--ink); border: 1px solid var(--line-2); border-radius: 20px; padding: 18px; display: grid; gap: 12px; box-shadow: var(--shadow-card); }
.share__head { display: flex; justify-content: space-between; align-items: center; font-family: var(--font-head); font-weight: 700; font-size: 12.5px; color: var(--ink-2); }
.share__head b { color: var(--gold); }
.share__vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; text-align: center; }
.share__vs .y { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; }
.share__logo { width: 40px; height: 40px; object-fit: contain; margin: 0 auto 6px; display: block; }
.share__vs .c { font-size: 12.5px; color: var(--ink-2); font-weight: 600; }
.share__line { font-family: var(--font-head); font-weight: 600; font-size: 14.5px; font-style: italic; color: var(--ink); padding: 10px 14px; border-left: 3px solid var(--gold); background: var(--surface-2); border-radius: 0 10px 10px 0; }
.share__foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; color: var(--ink-3); }
.debate__stats { display: flex; gap: 18px; flex-wrap: wrap; font-family: var(--font-head); font-weight: 700; font-size: 13px; color: rgba(255,255,255,.85); }
.debate__stats b { color: var(--gold); }
.feed { display: grid; gap: 8px; }
.feed div { display: flex; gap: 10px; align-items: center; font-size: 13px; color: rgba(255,255,255,.85); padding: 9px 12px; border-radius: 10px; background: rgba(0,0,0,.18); }
.feed div b { color: #fff; }
.feed div span:last-child { margin-left: auto; color: var(--gold); font-weight: 700; font-family: var(--font-head); white-space: nowrap; }
.stagebar { display: grid; grid-template-columns: 1fr 1.6fr 1fr; gap: 6px; }
.stage { display: grid; gap: 6px; }
.stage__bar { height: 8px; border-radius: 8px; background: var(--surface-3); overflow: hidden; }
.stage__bar i { display: block; height: 100%; width: 0; background: var(--muted); border-radius: 8px; }
.stage--done .stage__bar i { width: 100%; background: var(--mist); }
.stage--now .stage__bar i { background: linear-gradient(90deg, var(--gold), #FFE07A); }
.stage small { font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; gap: 6px; }
.stage--now small { color: var(--gold); }
.whynow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 26px; position: relative; }
.presale__why { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; align-items: center; margin-bottom: 30px; }
.presale__why:has(.presale__art:not([style*="none"])) { grid-template-columns: minmax(280px, .9fr) 1.3fr; }
.presale__art { width: 100%; max-width: 460px; justify-self: center; filter: drop-shadow(0 40px 50px rgba(0, 0, 0, .55)); }
.presale__why:has(.presale__art:not([style*="none"])) .whynow { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
.whynow { gap: 24px; }
.whynow div { padding: 14px 0; border-top: 1px solid var(--line-2); font-size: 14px; color: var(--ink-2); line-height: 1.45; }
.whynow b { display: block; font-family: var(--font-head); font-weight: 700; font-size: 15px; color: var(--ink); margin-bottom: 4px; }
.tier__receive { font-size: 12.5px; color: var(--ink-2); margin-top: -8px; }
.tier__receive b { color: var(--gold); }
.baseline { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-bottom: 30px; position: relative; }
.baseline span { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-head); font-weight: 600; font-size: 13px; color: var(--ink-2); }
.baseline span::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: var(--gold); }
.final__pair { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.final__pair .btn { min-width: 220px; }
.legal { font-size: 11.5px; color: var(--ink-3); line-height: 1.55; max-width: 110ch; margin-top: 24px; }
@media (max-width: 960px) {
  .whynow { grid-template-columns: 1fr; gap: 0; }
  .presale__why:has(.presale__art:not([style*="none"])) { grid-template-columns: 1fr; }
  .presale__art { max-width: 340px; }
  .proofchips { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .engine__simhead span + span { display: none; }
  .engine__score .t { font-size: 11.5px; line-height: 1.2; }
  .engine__score .s { font-size: 38px; }
  .debate__form { flex-wrap: wrap; padding: 8px; }
  .debate__form input { flex: 1 1 100%; padding: 8px 10px; }
  .debate__form .btn { width: 100%; }
  .stagebar { grid-template-columns: 1fr; }
  /* the Founder CTA label is longer than a phone is wide: full width, wrap onto two balanced lines */
  .presale__cta .btn { width: 100%; white-space: normal; text-wrap: balance; text-align: center; padding: 14px 24px; font-size: 16px; line-height: 1.25; }
}

/* ---------- Decorative floaters ---------- */
.floater { position: absolute; pointer-events: none; filter: drop-shadow(0 30px 30px rgba(0,0,0,.5)); }

/* ---------- Reveal defaults (JS enhances; content is visible at rest) ---------- */
/* (no blanket will-change: GSAP promotes elements only while they animate) */

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .rep__grid { grid-template-columns: 1fr 1fr; }
  .rep__copy { grid-column: 1 / -1; }
  .fan { height: 380px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 960px) {
  .ticker { display: none; }  /* decisions doc: hide the live ticker on mobile */
  .nav__links, .nav__pill--login { display: none; }
  .nav__burger { display: inline-flex; }
  .nav__inner { height: 66px; gap: 12px; }
  .nav .container { width: calc(100% - 32px); }
  .nav__actions { margin-left: auto; }
  .nav__claim { min-height: 38px; font-size: 13px; padding: 0 14px 0 8px; }
  .nav__claim img { width: 22px; height: 22px; }
  .logo img { height: 40px; }
  .ticker__tag { padding-right: 12px; }
  .engine__band { grid-template-columns: 1fr; }
  .loop__panel { grid-template-columns: 1fr; align-content: center; gap: 20px; }
  .loop__word { font-size: clamp(72px, 18vw, 120px); }
  .loop__visual { min-height: 0; }
  .loop.is-pinned .loop__sticky { min-height: 560px; top: 66px; height: calc(100vh - 66px); }
  .economy__grid { grid-template-columns: 1fr; }
  .debate__band { grid-template-columns: minmax(0, 1fr); }
  .debate__copy > * { min-width: 0; }
  .presale__head { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: 1fr; }
  .faq__grid { grid-template-columns: 1fr; }
  .faq__copy { position: static; }
  .bonus__bar { grid-template-columns: 1fr; text-align: center; justify-items: center; }
}
@media (max-width: 640px) {
  .wall__cols { min-height: 356px; }   /* shorter cards here: the question is hidden */
  /* Leaderboard on a small phone: a 1fr column cannot shrink below its content, and the fan and
     the rows needed ~350px, so on a 360px Galaxy the whole page could be dragged sideways. */
  .rep__grid { grid-template-columns: minmax(0, 1fr); }
  .rep__grid > * { min-width: 0; }
  .fan { width: 100%; max-width: 340px; }      /* the cards are centred in it, so nothing visibly moves */
  #record { overflow-x: clip; }                /* the tilted back card's corner, past the screen edge */
  .profile__stats { gap: 8px; }
  .pstat { padding: 10px 8px; }
  .pstat b { font-size: 24px; }
  .pstat small { white-space: normal; font-size: 11px; line-height: 1.25; }
  .profile__head { padding-right: 70px; }
  .profile__logo { width: 58px; }
  .engine__stats { grid-template-columns: 1fr 1fr; }
  .footer__grid { grid-template-columns: 1fr; }
  .loop__word { font-size: 64px; }
  .loop__text .h3 { font-size: 22px; }
  .loop.is-pinned .loop__panel { padding-top: 60px; }
  .ledger { width: min(100%, 360px); }
  .vis-play { width: min(100%, 320px); margin-inline: auto; }
  .deck__thumb img { width: 22px; height: 22px; }
  .deck__bg img { width: 240px; right: -22%; bottom: -8%; }
  .deck__bg img.is-on { opacity: .1; }
  .vis-win { margin-inline: auto; }
  .mcard__arg { display: none; }
  .ledger { margin-top: 40px; padding: 18px 16px 14px; }
  .ledger__coin { width: 130px; height: 130px; top: -60px; right: -12px; }
  .ecard__art { position: static; order: 10; width: 180px; justify-self: center; margin-top: 4px; }
  .ecard--mlc:has(.ecard__art:not([style*="none"])) p { max-width: none; }
  .ledger__totals { padding-right: 70px; }
  .ledger__totals { padding-right: 60px; }
}

@media (max-width: 420px) {
  .row { grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 8px; padding: 10px 8px; }
  .row__u { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .row__u i { display: inline-grid; vertical-align: middle; margin-right: 8px; }
  .board__head { flex-wrap: wrap; gap: 2px 12px; }
}

/* ---------- "Create your own" card (Eddie and Michael, Sep 24) ----------
   Same frame as a matchup card (five rows, so it sits in the league grid's shared rows), marked as an
   action rather than a matchup: a gold edge, the sport's kit as a dashed outline, Michael's line as the
   headline and one gold call to action. */
.mcard--create { color: inherit; text-decoration: none; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255, 199, 44, .55), inset 0 1px 0 rgba(255, 255, 255, .1), 0 24px 40px -28px rgba(0, 0, 0, .8);
  transition: box-shadow .25s var(--ease-out); }
.mcard--create:hover { box-shadow: inset 0 0 0 1.5px var(--gold), inset 0 1px 0 rgba(255, 255, 255, .14), 0 28px 44px -26px rgba(0, 0, 0, .85); }
.mcard--create:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.mcard__plus { display: inline-grid; place-items: center; width: 14px; height: 14px; margin-right: 4px; vertical-align: -2px; border-radius: 50%;
  background: var(--gold); color: var(--navy-900); font-style: normal; font-size: 11px; font-weight: 800; line-height: 1; }
/* header: ghost kits in the art row, the headline across the year + name rows (72 + 4 + 28 + 4 + 26px) */
.mcard__teams--create { grid-template-rows: 72px auto; row-gap: 4px; }
.mcard__art--ghost { position: relative; }
.mcard__art--ghost .kit { width: 58px; height: 58px; filter: none; }
.mcard__art--ghost .kit > * { display: none; }
.mcard__art--ghost .kit > :first-child { display: inline; fill: rgba(255, 255, 255, .06); stroke: rgba(255, 255, 255, .62); stroke-width: 1.4;
  stroke-dasharray: 3.2 2.6; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.mcard__art--ghost::after { content: "?"; position: absolute; left: 50%; bottom: 29px; transform: translate(-50%, 50%);
  font-family: var(--font-cond); font-weight: 700; font-size: 24px; line-height: 1; color: rgba(255, 255, 255, .82); }
.mcard__title { grid-column: 1 / -1; display: grid; grid-template-rows: 28px 26px; row-gap: 4px; justify-items: center; text-align: center; min-width: 0; }
.mcard__title b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-cond); font-weight: 700;
  font-size: 25px; line-height: 28px; letter-spacing: .01em; text-transform: uppercase; text-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.mcard__title span { align-self: center; font-size: 11px; font-weight: 800; line-height: 13px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.mcard__strip .is-create { color: var(--gold); }
.mcard--create .mcard__arg { font-style: normal; color: rgba(243, 246, 255, .82); }
.mcard__cells--create { grid-template-columns: minmax(0, 1fr); }
.mcard--create .mcard__cell--create { gap: 8px; background: var(--gold); color: var(--navy-900); transition: background .2s; }
.mcard--create .mcard__cell--create::before { display: none; }
.mcard--create .mcard__cell--create svg { width: 16px; height: 16px; flex: none; transition: transform .25s var(--ease-out); }
.mcard--create:hover .mcard__cell--create { background: var(--gold-2); }
.mcard--create:hover .mcard__cell--create svg { transform: translateX(3px); }

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
  .ticker__track { animation: none; }

}

/* Sep 21 meeting: engine is a call-out, tiers have no thresholds, the debate box is a demo */
.engine__band--callout { grid-template-columns: 1fr; text-align: center; }
.engine__band--callout .engine__copy { max-width: 860px; margin-inline: auto; }
.engine__band--callout .proofchips { justify-content: center; }
.rung { grid-template-columns: 44px 1fr; }
.debate__form--demo input { pointer-events: none; color: var(--navy-900); cursor: default; }
.debate__form--demo { position: relative; }
.debate__form--demo::after { content: ""; position: absolute; right: 18px; top: 50%; width: 2px; height: 22px; transform: translateY(-50%); background: var(--navy-900); animation: caret 1.1s steps(2, start) infinite; }
@keyframes caret { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .debate__form--demo::after { animation: none; } }

/* Founders pre-sale rounds (Wajeeh, Sep 22): the open round fills, the next round waits at its price */
.rounds { display: grid; grid-template-columns: 1.4fr auto 1fr; gap: 10px; align-items: end; }
.round { display: grid; gap: 7px; }
.round small { font-family: var(--font-head); font-weight: 700; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); display: flex; justify-content: space-between; gap: 6px; }
.round--now small { color: var(--gold); }
.round__bar { height: 8px; border-radius: 8px; background: var(--surface-3); overflow: hidden; }
.round__bar i { display: block; height: 100%; width: 0; background: var(--muted); border-radius: 8px; }
.round--now .round__bar i { background: linear-gradient(90deg, var(--gold), #FFE07A); }
.round__price { display: flex; align-items: baseline; gap: 8px; }
.round__price b { font-family: var(--font-display); font-weight: 700; font-size: 30px; line-height: 1; letter-spacing: .01em; color: var(--ink); font-variant-numeric: tabular-nums; }
.round--now .round__price b { color: var(--gold); }
.round__price span { font-size: 11.5px; font-weight: 600; color: var(--ink-3); line-height: 1.2; }
.round__step { color: var(--ink-3); padding-bottom: 6px; }
.round__step svg { width: 18px; height: 18px; }
.presale__alt { position: relative; display: inline-flex; margin-top: 18px; color: var(--mist); font-weight: 600; }
.presale__alt:hover { color: #fff; }
@media (max-width: 640px) { .rounds { grid-template-columns: 1fr; } .round__step { transform: rotate(90deg); justify-self: start; padding: 0 0 0 4px; } }

/* Finished simulations on the wall (the creator feed carries them): final score, winner marked,
   the cells and entry line open the result on the platform instead of taking a pick */
.mcard__strip .is-final { color: var(--gold); }
.mcard__cell.is-result { text-decoration: none; cursor: pointer; gap: 8px; }
.mcard__cell.is-result em { flex: none; font-style: normal; font-family: var(--font-display); font-size: 22px; line-height: 1; margin-left: auto; color: rgba(243, 246, 255, .55); font-variant-numeric: tabular-nums; }
/* a finished game reads as a scoreboard: one full-width row per side, score on the right,
   so a long name and a three-digit score never share half a card */
.mcard__cells--result { grid-template-columns: minmax(0, 1fr); }
.mcard__cells--result .mcard__cell { min-height: 40px; padding: 7px 14px; justify-content: flex-start; text-align: left; }
.mcard__cells--result .mcard__cell + .mcard__cell { border-left: 0; border-top: 1px solid rgba(255, 255, 255, .08); }
.mcard__cells--result .mcard__cell em { font-size: 20px; }
.mcard__cells--result .mcard__label { font-size: 13.5px; } /* a full-width row has room: one size for every name */
.mcard__cell.is-result.is-winner { color: #fff; }
.mcard__cell.is-result.is-winner em { color: var(--gold); }
.mcard__cell.is-result:not(.is-winner) { opacity: .62; }
.mcard.is-draw .mcard__cell.is-result { opacity: 1; color: #fff; }
.mcard.is-done .mcard__entry .link { font-size: 12.5px; }

/* ---------- Hero overrides (era-hero.css stays verbatim) ---------- */
/* Hero offers (Eddie, Sep 24): the welcome bonus and the Founder presale, one bar split in two. On
   desktop both halves share a single row, so the bar is the same height as before and the hero's
   fit-to-screen maths (which measures .ep-bonus) keeps the cards exactly the size they were. */
.ep-page .ep-hero .ep-bonus.bonus--split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ep-page .ep-hero .bonus--split .bonus__bar { min-width: 0; margin: 0; }
@media (min-width: 701px) {
  .ep-page .ep-hero .bonus--split .bonus__bar { gap: 14px; padding: 10px 10px 10px 18px; }
  .ep-page .ep-hero .bonus--split .btn { padding: 0 18px; }
}
/* the presale half is the welcome half inverted: navy with a gold edge and a gold button, the same
   pairing as the Founders section further down */
.ep-page .ep-hero .bonus__bar--presale { background: rgba(8, 21, 58, .94); color: #F3F6FF;
  box-shadow: inset 0 0 0 1px rgba(255, 199, 44, .6), 0 18px 40px -24px rgba(0, 0, 0, .85); }
.ep-page .ep-hero .bonus__bar--presale .bonus__text small { color: rgba(243, 246, 255, .74); opacity: 1; }
.ep-page .ep-hero .bonus__bar--presale .btn { background: var(--gold); color: var(--navy-900); }
.ep-page .ep-hero .bonus__bar--presale .btn:hover { background: var(--gold-2); }
.ep-page .ep-hero .bonus__bar--presale .btn:focus-visible { outline-color: var(--gold); }
.bonus__live { display: inline-flex; align-items: center; gap: 8px; }
.bonus__live i { position: relative; width: 8px; height: 8px; border-radius: 50%; background: #3BE37F; flex: none; }
.bonus__live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3BE37F; opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  /* transform + opacity only: the pulse runs on the compositor and never repaints the bar */
  .bonus__live i::after { animation: bonus-live 2.4s ease-out infinite; }
}
@keyframes bonus-live { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(2.6); opacity: 0; } }
@media (max-width: 700px) {
  /* a phone stacks them; each keeps the existing phone layout (text, then a full-width button) */
  .ep-page .ep-hero .ep-bonus.bonus--split { grid-template-columns: minmax(0, 1fr); gap: 10px; }
}
/* The outgoing plate is told to snap to transparent the instant the incoming one finishes fading
   (transition: opacity 0s linear 380ms). On a phone the new background often has not painted by
   then -- decoding and rastering a full-screen photo takes longer than the fade -- and the navy
   canvas shows through for a few frames: the dark flash mid-swipe. Holding the old one a little
   longer and fading it out underneath the new one costs nothing when the switch is quick (the
   incoming plate is opaque and on top by 380ms) and removes the flash when it is not. */
.ep-page .ep-plate { transition: opacity 320ms ease 420ms; }

/* Headline "SETTLE IT. GET REWARDS." (MrFixHealthcare, Sep 23) is 70% longer than the line the hero was sized
   for, and the hero forces one line on phones, so it ran off the screen. Each phrase now stays
   whole and the only break is between them: one line where it fits, "SETTLE IT." over the gold
   "GET REWARDS." where it does not. Never a split gold phrase, never an overflow. */
.ep-page .ep-copy h1 { white-space: normal; text-wrap: balance; }
.ep-page .ep-copy h1 .ep-h1-a,
.ep-page .ep-copy h1 em { display: inline-block; white-space: nowrap; }
.ep-page .ep-hero .ep-subtitle { text-wrap: balance; }
@media (max-width: 700px) {
  /* two lines on a phone, so the words can be larger than the one-line size allowed */
  .ep-page .ep-hero .ep-copy h1 { font-size: clamp(30px, 9.6vw, 46px); line-height: 1.02; }
}
/* The "Drag to discover" hint was removed (Sep 22): keep a gap under the carousel, and on phones
   enough of one that the arrows (21px below the stage) clear the league tabs. */
.ep-page .ep-hero .ep-tabs { margin-top: 18px; }
@media (max-width: 700px) { .ep-page .ep-hero .ep-tabs { margin-top: 36px; } }

@media (prefers-reduced-motion: reduce) { .pill--live::after, .ticker__tag i::after { animation: none; } }

/* ---------- Sep 29 review fixes ---------- */
/* Hero offers: both buttons are one size, and each sits inside its card with the same 14px of air
   above, below and to the right. At 42px tall in a 63px card with a 10px inset the buttons filled the
   card and read as touching its edge. 36px tall, 13px type and 156px wide keeps the small print on
   one line and the card at the height the hero's fit-to-screen maths expects. */
@media (min-width: 701px) {
  .ep-page .ep-hero .bonus--split .bonus__bar { padding-right: 14px; }
  .ep-page .ep-hero .bonus--split .btn { width: 156px; min-height: 36px; padding: 0 14px; gap: 8px; font-size: 13px; }
  .ep-page .ep-hero .bonus--split .btn svg { width: 16px; height: 16px; }
}

/* Tilted hero cards: smooth edges. A side card is painted flat and then tilted by the GPU, which
   resamples it. A 1px line is one texel wide, so as the tilted edge drifts across screen pixels the
   line swings from full strength to almost nothing and back every 8 or so rows: the card outline
   looked beaded and stair-stepped. A 2px line at half strength keeps the same brightness at any
   phase (measured on the blue channel: 69-168 before, 102-120 after), and the outer half softens the
   silhouette too. The centre card is not tilted, so it keeps its crisp 1px gold edge. */
.ep-page .ep-hero .ep-card:not(.is-current) .ep-card-surface {
  border-color: #7890a880;
  box-shadow: 0 0 0 1px #7890a880, 0 17px 40px #0006, inset 0 0 0 4px #0b1a2b, inset 0 0 0 6px #6c7e8d2e;
}
.ep-page .ep-hero .ep-card.is-preview:not(.is-current) .ep-card-surface {
  border-color: #e7c98180;
  box-shadow: 0 0 0 1px #e7c98180, 0 24px 50px #0008, 0 0 20px #e5c68d20;
}
.ep-page .ep-hero .ep-card:not(.is-current) .ep-card-header { border-bottom-color: #7890a817; box-shadow: 0 1px 0 #7890a817; }
.ep-page .ep-hero .ep-card:not(.is-current) .ep-team:first-child { border-right-color: #879db816; box-shadow: 1px 0 0 #879db816; }

/* Play deck thumbnails: every kit sits on a light disc, so a navy helmet or cap reads on the navy
   panel; flags are round badges the same size as the kits; the arrow never gets squeezed. */
.deck__thumb { justify-content: center; min-height: 46px; }
.deck__thumb img { background: radial-gradient(circle at 50% 38%, #fff 0%, #dde4f2 74%); box-shadow: 0 2px 6px rgba(0, 0, 0, .35); }
.deck__thumb img.kit--flag { width: 28px; height: 28px; padding: 0; margin: 0; object-fit: cover; border-radius: 50%; background: none;
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .85), 0 2px 6px rgba(0, 0, 0, .35); }
.deck__next { flex: none; }
@media (max-width: 640px) {
  .deck__thumbs { gap: 6px; }
  .deck__thumb { flex: 1 1 0; min-width: 0; padding: 6px 4px; gap: 2px; }
  .deck__thumb img, .deck__thumb img.kit--flag { width: 24px; height: 24px; }
}

@media (max-width: 640px) {
  /* MicroLeague Coin card: the coin stack is decoration, and on a phone it is 180px of scroll */
  .ecard__art { display: none; }

  /* Player card stats: a vertical list (value, then what it means) instead of three cramped
     tiles whose labels broke mid-phrase ("Accuracy ·" / "118-74") */
  .profile__stats { grid-template-columns: minmax(0, 1fr); gap: 0; background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .12); border-radius: 14px; }
  .pstat { background: none; border: 0; border-radius: 0; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; gap: 12px; padding: 11px 14px; }
  .pstat + .pstat { border-top: 1px solid rgba(255, 255, 255, .1); }
  .pstat b { font-size: 26px; }
  .pstat small { white-space: nowrap; font-size: 12.5px; text-align: right; overflow: hidden; text-overflow: ellipsis; }
  /* the record card stands upright on a phone: the two cards behind it step up vertically
     instead of fanning out sideways, and the stack is smaller since the player card repeats it */
  .fan { zoom: .82; height: 380px; }
  .fan__card { margin-top: -154px; }
  .fan__card--back2 { transform: translateY(-40px) scale(.9); opacity: .45; }
  .fan__card--back1 { transform: translateY(-20px) scale(.95); opacity: .75; }
  .profile__xp span { white-space: nowrap; }
  .fan__card--front { transform: none; }

  /* Debate steps: two by two, not a ragged wrap */
  .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; }

  /* Footer links: two columns under the brand block instead of one 1,100px list */
  .footer__grid { grid-template-columns: 1fr 1fr; gap: 30px 20px; }
  .footer__brand { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  /* leaderboard: "1204" ran into the avatar in a 24px rank column */
  .row { grid-template-columns: 34px minmax(0, 1fr) auto auto; }
  .row.is-you .row__n { font-size: 13px; letter-spacing: -.02em; }
}