/* BestBets.Today public front page: "Staircase" in the Ink & Emerald scheme.
   Approved comp: .impeccable/mocks/canon/home-canon3-staircase.png. Colors below are sampled from it. */

@font-face {
  font-family: "Mona Sans";
  src: url("/homepage-assets/fonts/mona-sans-var.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-display: swap;
}
@font-face {
  font-family: "Mona Sans Italic";
  src: url("/homepage-assets/fonts/mona-sans-italic-var.woff2") format("woff2");
  font-weight: 200 900;
  font-stretch: 75% 125%;
  font-style: italic;
  font-display: swap;
}

:root {
  --ink: #0a0f15;
  --ink-nav: #0b1116;
  --ink-raised: #0f151d;
  --card: #0c1118;
  --line: rgb(214 226 240 / 0.1);
  --line-2: rgb(214 226 240 / 0.18);
  --text: #f5f7fa;
  --text-2: #c2cad3;
  --text-3: #95a1ad;

  --emerald: #30dcb4;
  --emerald-rgb: 48 220 180;
  --emerald-soft: #7ff0d3;
  --emerald-ink: #032a21;
  --coral: #f84d56;
  --coral-rgb: 248 77 86;
  --coral-hot: #ff6169;
  --coral-small: #df323d; /* white text on this passes 4.5:1 at small sizes */
  --coral-press: #e8404a; /* hover for large coral buttons: white text 4.0:1 */
  --coral-small-press: #c9262f; /* hover for small coral buttons: white text 5.5:1 */

  --standard: #b4c2cf; --standard-hi: #e1e8ee; --standard-deep: #56636f; --standard-rgb: 180 194 207;
  --premium: #3a86e8;  --premium-hi: #83b8ff;  --premium-deep: #2256c4;  --premium-rgb: 58 134 232;
  --high: #8656e6;     --high-hi: #bb9dff;     --high-deep: #6a3be0;     --high-rgb: 134 86 230;
  --elite: #f0c75a;    --elite-hi: #ffe7a3;    --elite-deep: #a8781c;    --elite-rgb: 240 199 90;

  --display: "Mona Sans Italic", "Mona Sans", system-ui, sans-serif;
  --sans: "Mona Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --gutter: clamp(16px, 4vw, 48px);
  --shell: 1320px;
  --nav-h: 68px;
  --band-h: 138px;
}

.tier-standard { --tier: var(--standard); --tier-hi: var(--standard-hi); --tier-deep: var(--standard-deep); --tier-rgb: var(--standard-rgb); --tier-ink: #0d141b; --tier-btn: #46535f; --tier-btn-hi: #56636f; }
.tier-premium  { --tier: var(--premium);  --tier-hi: var(--premium-hi);  --tier-deep: var(--premium-deep);  --tier-rgb: var(--premium-rgb);  --tier-ink: #fff;    --tier-btn: #2256c4; --tier-btn-hi: #2d66dc; }
.tier-high     { --tier: var(--high);     --tier-hi: var(--high-hi);     --tier-deep: var(--high-deep);     --tier-rgb: var(--high-rgb);     --tier-ink: #fff;    --tier-btn: #6a3be0; --tier-btn-hi: #7a4cef; }
.tier-elite    { --tier: var(--elite);    --tier-hi: var(--elite-hi);    --tier-deep: var(--elite-deep);    --tier-rgb: var(--elite-rgb);    --tier-ink: #1f1604; --tier-btn: #3a2c10; --tier-btn-hi: #4b3814; }

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--ink);
  color-scheme: dark;
  scrollbar-color: #2a3542 var(--ink);
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 12px);
}
body {
  margin: 0;
  min-width: 320px;
  background: var(--ink);
  color: var(--text);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.55;
  font-variant-numeric: lining-nums proportional-nums;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  caret-color: var(--emerald);
  overflow-x: clip;
}
::selection { background: var(--emerald); color: var(--emerald-ink); }
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--ink); }
::-webkit-scrollbar-thumb { background: #243039; border: 3px solid var(--ink); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: #33424f; }
:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; border-radius: 6px; }
a { color: inherit; text-underline-offset: 0.22em; text-decoration-thickness: 1.5px; }
img { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
ol, ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.15em; height: 1.15em; flex: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link {
  position: fixed; left: 16px; top: -60px; z-index: 100;
  padding: 10px 16px; border-radius: 10px;
  background: var(--emerald); color: var(--emerald-ink); font-weight: 700; text-decoration: none;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 12px; }
.shell { width: min(100%, var(--shell) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ---------- Buttons ---------- */
.btn {
  --h: 48px;
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: var(--h); padding: 0 1.35em;
  border: 0; border-radius: 10px;
  font: 700 1.02rem/1 var(--sans); letter-spacing: 0.005em;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: transform 0.25s var(--ease), background-color 0.25s var(--ease), box-shadow 0.25s var(--ease), color 0.25s var(--ease);
}
.btn .icon { transition: transform 0.3s var(--ease); }
.btn:hover .icon { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }
.btn-sm { --h: 40px; font-size: 0.95rem; padding: 0 1.15em; }
.btn-lg { --h: 56px; font-size: 1.18rem; padding: 0 1.55em; }
.btn-coral {
  background: var(--coral); color: #fff;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.25), inset 0 -2px 0 rgb(120 10 20 / 0.25), 0 14px 28px -14px rgb(var(--coral-rgb) / 0.85);
}
.btn-coral.btn-sm { background: var(--coral-small); }
.btn-coral:hover { background: var(--coral-press); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.3), inset 0 -2px 0 rgb(120 10 20 / 0.2), 0 18px 32px -14px rgb(var(--coral-rgb) / 0.95); }
.btn-coral.btn-sm:hover { background: var(--coral-small-press); }
.btn-emerald-line {
  background: rgb(4 18 16 / 0.86); color: var(--emerald);
  box-shadow: inset 0 0 0 1.5px rgb(var(--emerald-rgb) / 0.8);
}
.btn-emerald-line:hover { background: rgb(var(--emerald-rgb) / 0.14); color: var(--emerald-soft); transform: translateY(-1px); }
.text-link {
  display: inline-flex; align-items: center; gap: 0.45em;
  color: var(--emerald); font-weight: 650; text-decoration: none;
  padding-bottom: 3px; border-bottom: 1.5px solid rgb(var(--emerald-rgb) / 0.4);
  transition: border-color 0.25s var(--ease), color 0.25s var(--ease);
}
.text-link:hover { color: var(--emerald-soft); border-color: var(--emerald-soft); }
.text-link .icon { width: 1em; height: 1em; transition: transform 0.3s var(--ease); }
.text-link:hover .icon { transform: translateX(3px); }

/* ---------- Navigation ---------- */
.site-nav {
  position: sticky; top: 0; z-index: 50;
  background: rgb(11 17 22 / 0.88);
  backdrop-filter: saturate(1.3) blur(16px);
}
.nav-inner {
  width: min(100%, 1600px); margin: 0 auto;
  height: var(--nav-h); padding: 0 var(--gutter);
  display: flex; align-items: center; gap: clamp(18px, 2.8vw, 48px);
}
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
.brand-mark { width: clamp(28px, 2.5vw, 38px); height: auto; aspect-ratio: 34 / 24; flex: none; }
.brand-name {
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 90%;
  font-size: clamp(1.45rem, 2.3vw, 2.25rem); line-height: 1; letter-spacing: -0.012em; color: #fff;
}
.brand-name span { color: inherit; }
.nav-links { display: flex; align-items: center; gap: clamp(20px, 2.6vw, 38px); }
.nav-links a {
  position: relative; padding: 23px 0; white-space: nowrap;
  color: var(--text); text-decoration: none; font-weight: 500; font-size: 1.02rem;
  transition: color 0.25s var(--ease);
}
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 14px; height: 2px; border-radius: 2px;
  background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.nav-links a:hover { color: #fff; }
.nav-links a:hover::after { transform: scaleX(1); }
.nav-links a.is-lead { color: var(--emerald); font-weight: 650; }
.nav-links a.is-lead::after { transform: scaleX(1); background: var(--emerald); }
.slate-capsule {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: 9px;
  height: 38px; padding: 0 18px; border-radius: 999px;
  border: 1px solid transparent;
  background:
    linear-gradient(var(--ink-nav), var(--ink-nav)) padding-box,
    linear-gradient(90deg, rgb(var(--emerald-rgb) / 0.75), rgb(var(--coral-rgb) / 0.75)) border-box;
  color: var(--text); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase; white-space: nowrap;
}
.slate-capsule strong { color: var(--emerald); font-weight: 700; }
.slate-capsule [data-capsule-detail]:not(:empty)::before { content: "·"; margin: 0 8px 0 0; color: var(--text-3); }
.slate-capsule.is-quiet strong, .slate-capsule.is-waiting strong { color: var(--text-2); }
.capsule-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--emerald); flex: none; }
.slate-capsule.is-quiet .capsule-dot, .slate-capsule.is-waiting .capsule-dot { background: var(--text-3); }
.nav-actions { display: flex; align-items: center; gap: clamp(16px, 1.8vw, 26px); flex: none; }
.nav-signin { color: var(--text); text-decoration: none; font-weight: 500; font-size: 1rem; }
.nav-signin:hover { color: #fff; text-decoration: underline; }
.nav-rule {
  height: 2px;
  background: linear-gradient(90deg, rgb(var(--emerald-rgb) / 0.15), var(--emerald) 16%, rgb(var(--emerald-rgb) / 0.9) 42%, var(--coral) 84%, rgb(var(--coral-rgb) / 0.2));
  box-shadow: 0 3px 14px -2px rgb(var(--emerald-rgb) / 0.35);
}
.mobile-menu { display: none; }

/* ---------- Hero ---------- */
.hero { position: relative; isolation: isolate; overflow: clip; background: var(--ink); }
.hero-stage { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-plate-corner {
  transform: none; object-position: 50% 0%;
  -webkit-mask: radial-gradient(52% 58% at 100% 0%, #000 45%, transparent 100%);
  mask: radial-gradient(52% 58% at 100% 0%, #000 45%, transparent 100%);
}
/* The band's coral spilling into the top-right corner; the plates carry their own floodlights. */
.hero-stage::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  background:
    radial-gradient(60% 55% at 100% 0%, rgb(var(--coral-rgb) / 0.46), transparent 72%);
}
.hero-plate {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 68%;
  filter: brightness(1.16) saturate(1.06) contrast(1.05);
  transform: scaleX(-1);
}
.hero-band {
  position: absolute; left: -14%; width: 128%; top: 27.5%; height: 27%;
  transform: rotate(-19.7deg); transform-origin: 50% 50%;
  background: linear-gradient(90deg, #27b995 0%, #3dd6b0 16%, #48e1bb 34%, #7fdcbb 45%, #dc948b 56%, #fa766c 68%, #fd7066 84%, #f7636a 100%);
  -webkit-mask: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 12%, #000 30%, #000 70%, rgb(0 0 0 / 0.55) 88%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 12%, #000 30%, #000 70%, rgb(0 0 0 / 0.55) 88%, transparent 100%);
  opacity: 1;
  overflow: hidden;
}
/* The comp's upper coral streak, running the band's angle through the corner above Elite. */
.hero-band-hi {
  left: 44%; width: 78%; top: -2%; height: 17%;
  background: linear-gradient(90deg, rgb(253 112 102 / 0) 0%, rgb(250 110 104 / 0.55) 30%, #fb7068 62%, #ff8a7a 100%);
  opacity: 0.9;
}
.band-streaks {
  position: absolute; inset: -30% -4%;
  background: url("/homepage-assets/img/home/band-streaks.webp") center / 100% 100% no-repeat;
  transform: rotate(0.5deg);
  mix-blend-mode: soft-light; opacity: 0.95;
}
.hero-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgb(255 255 255 / 0) 30%, rgb(255 255 255 / 0.16) 50%, rgb(255 255 255 / 0) 70%);
  mix-blend-mode: screen;
}
.hero-athlete {
  position: absolute; z-index: 1; left: 36.5%; top: 1%; width: auto; height: 102%;
  object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.55)) drop-shadow(-6px -2px 18px rgb(var(--emerald-rgb) / 0.18)) brightness(1.04) contrast(1.04);
}
.hero-shade {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgb(10 15 21 / 0.78) 0%, rgb(10 15 21 / 0.44) 20%, rgb(10 15 21 / 0.04) 34%, transparent 46%),
    linear-gradient(180deg, rgb(10 15 21 / 0.28) 0%, transparent 10%);
}
.hero-inner {
  position: relative;
  /* The composition keeps the comp's proportions and also fits the viewport's height, so the engine strip always shows. */
  width: min(100%, 1600px, max(1040px, calc((100svh - var(--nav-h) - var(--band-h)) * 1536 / 822)));
  margin: 0 auto;
  aspect-ratio: 1536 / 822;
  container-type: inline-size;
}
/* The copy lines up with the nav's gutter even when the composition is narrower than the window. */
.hero-copy { position: absolute; left: max(2.9cqw, calc(var(--gutter) - (100vw - 100cqw) / 2)); top: 4.2%; width: 44%; z-index: 3; }
@container (max-width: 1440px) { .hero-copy { left: calc(var(--gutter) - (100vw - 100cqw) / 2); } }
.hero-title {
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 88%;
  font-size: 6.9cqi; line-height: 0.93; letter-spacing: -0.004em; word-spacing: 0.045em;
  text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 30px rgb(0 0 0 / 0.35);
}
.hero-title .line { display: block; white-space: nowrap; }
.hero-lede span { display: block; }
.hero-lede {
  margin-top: 1.9cqi; max-width: none;
  font-size: max(16px, 1.24cqi); line-height: 1.36; color: #e9edf1;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 1.2cqi; }
.hero-copy .btn-lg { --h: max(44px, 3.2cqi); font-size: max(15px, 1.22cqi); padding: 0 max(14px, 1.3cqi); }
.hero-copy .btn-emerald-line { font-weight: 600; font-size: max(14px, 1.1cqi); }
/* White on the bright coral only passes as large text (18.66px bold); smaller renders use the deeper coral. */
.hero-copy .btn-coral { background: var(--coral-small); }
.hero-copy .btn-coral:hover { background: var(--coral-small-press); }
@container (min-width: 1530px) { .hero-copy .btn-coral { background: var(--coral); } .hero-copy .btn-coral:hover { background: var(--coral-press); } }

.hero-stairs { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero-stairs .pick-card { position: absolute; pointer-events: auto; }
.hero-stairs[data-count="4"] .pick-card:nth-child(1) { left: 18.2%; width: 14.7%; --edge: 0.329; }
.hero-stairs[data-count="4"] .pick-card:nth-child(2) { left: 35.6%; width: 17.1%; --edge: 0.527; }
.hero-stairs[data-count="4"] .pick-card:nth-child(3) { left: 54.6%; top: 22.8%; width: 21.9%; }
.hero-stairs[data-count="4"] .pick-card:nth-child(4) { left: 78.1%; top: 8.5%; width: 20.3%; }
.hero-stairs[data-count="3"] .pick-card:nth-child(1) { left: 33.5%; width: 17.3%; --edge: 0.508; }
.hero-stairs[data-count="3"] .pick-card:nth-child(2) { left: 54.6%; width: 21.9%; --edge: 0.765; }
.hero-stairs[data-count="3"] .pick-card:nth-child(3) { left: 78.1%; top: 8.5%; width: 20.3%; }
.hero-stairs[data-count="2"] .pick-card:nth-child(1) { left: 52%;   top: 22%;  width: 22.5%; }
.hero-stairs[data-count="2"] .pick-card:nth-child(2) { left: 77.5%; top: 8%;   width: 20.5%; }
.hero-stairs[data-count="1"] .pick-card:nth-child(1) { left: 62%;   top: 14%;  width: 23%; }
/* The lower steps stand on the engine strip's rising edge instead of hanging from a fixed top, so a taller card (a free
   pick adds its player, a hidden-pick chip and a button) grows upward rather than sliding under the strip. --edge is the
   card's right side as a share of the composition. The edge stands cut × x ÷ viewport above the base there: while the cut
   is 6.6vw that is 3.3vw − 3.3cqw + 6.6cqw × --edge, and past 1576px the 104px cap bounds it. */
.hero-stairs[data-count="4"] .pick-card:nth-child(-n+2),
.hero-stairs[data-count="3"] .pick-card:nth-child(-n+2) {
  top: auto;
  bottom: calc(min(3.3vw - 3.3cqw + 6.6cqw * var(--edge), 104px * max(var(--edge), 0.5)) + max(14px, 1.2cqi));
}
.hero-stairs .is-featured { z-index: 2; }
/* home.js sets --photo-h when the lowest step gives up photo height to clear the hero's buttons; a headshot shrinks with
   the photo so the face stays above the ring. */
.hero-stairs .card-photo { width: 100%; height: var(--photo-h, auto); }
.hero-stairs .card-photo.has-headshot img.headshot { max-width: calc(var(--photo-h, 100cqi) * 0.95); }
/* Narrower compositions keep tap-sized buttons, so the lower steps shift right to keep the comp's clearance. */
@container (max-width: 1299px) {
  .hero-stairs[data-count="4"] .pick-card:nth-child(1) { left: 21%; width: 13.2%; --edge: 0.342; }
  .hero-stairs[data-count="4"] .pick-card:nth-child(2) { left: 38.4%; width: 16.6%; --edge: 0.55; }
  .hero-stairs[data-count="4"] .pick-card:nth-child(3) { left: 56.2%; width: 21%; }
  .hero-stairs[data-count="4"] .pick-card:nth-child(4) { left: 78.6%; width: 19.8%; }
  .hero-stairs[data-count="3"] .pick-card:nth-child(1) { left: 38.6%; width: 16%; --edge: 0.546; }
  /* Minimum text sizes make the copy relatively taller here; a slightly smaller headline keeps the buttons above the first step. */
  .hero-copy { top: 3.4%; }
  .hero-title { font-size: 6.5cqi; }
  .hero-copy .hero-tagline { font-size: max(19px, 1.9cqi); }
}
.stairs-note {
  position: absolute; right: 1.6%; bottom: calc(clamp(44px, 6.6vw, 104px) + 16px); max-width: min(34ch, 19.5cqw); z-index: 3;
  font-size: max(13px, 0.92cqi); line-height: 1.4; color: var(--text-2); text-align: right;
}

/* ---------- Engine band ---------- */
.engine-band {
  --cut: clamp(44px, 6.6vw, 104px);
  position: relative; z-index: 3;
  min-height: var(--band-h);
  margin-top: calc(-1 * var(--cut)); padding-top: var(--cut);
  background: linear-gradient(180deg, #0c1219, var(--ink) 55%);
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
}
.engine-band::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--cut);
  background: linear-gradient(90deg, var(--emerald), var(--coral));
  -webkit-mask: linear-gradient(to bottom right, transparent calc(50% - 1.5px), #000 50%, transparent calc(50% + 1.5px));
  mask: linear-gradient(to bottom right, transparent calc(50% - 1.5px), #000 50%, transparent calc(50% + 1.5px));
  opacity: 0.85;
}
.engine-band-inner {
  width: min(100%, 1600px); margin: 0 auto;
  padding: 18px var(--gutter) 26px;
  display: grid; grid-template-columns: minmax(120px, 0.7fr) minmax(0, 4fr) minmax(200px, 1.1fr);
  align-items: center; gap: clamp(16px, 2.4vw, 40px);
}
.engine-label {
  font-family: var(--display); font-style: italic; font-weight: 500; font-stretch: 100%;
  font-size: 1.06rem; line-height: 1.3; color: var(--text-2); letter-spacing: 0;
}
.engine-label span { display: block; color: var(--text-3); font-size: 0.92rem; }
.engine-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: end; }
.engine-figures li { position: relative; display: grid; gap: 4px; justify-items: start; padding: 0 clamp(8px, 1.6vw, 28px); }
.engine-figures li + li::before {
  content: ""; position: absolute; left: -9px; top: 50%; width: 18px; height: 18px; translate: 0 -70%;
  background: var(--emerald);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 4 8 8-8 8' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m8 4 8 8-8 8' fill='none' stroke='%23000' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}
.engine-figures.is-plain li + li::before { width: 1px; height: 46px; translate: 0 -60%; left: 0; background: var(--line-2); -webkit-mask: none; mask: none; }
.engine-figures strong {
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 92%;
  font-size: clamp(2.2rem, 3.85vw, 4rem); line-height: 0.95; letter-spacing: -0.01em; color: #fff;
}
.engine-figures span { font-size: clamp(0.95rem, 1.1vw, 1.12rem); color: var(--text); font-weight: 500; line-height: 1.2; }
.engine-figures[aria-busy="true"] strong { width: 3.2em; height: 0.9em; border-radius: 6px; background: linear-gradient(90deg, #141c26, #1c2632, #141c26); background-size: 200% 100%; }
.motion .engine-figures[aria-busy="true"] strong { animation: shimmer 1.6s linear infinite; }
.engine-note { font-size: 0.86rem; line-height: 1.45; color: var(--text-3); max-width: 30ch; justify-self: end; }

/* ---------- Pick card (shared by hero, board and join) ---------- */
.pick-card {
  container-type: inline-size;
  position: relative;
  --glow: 0.85;
  transition: transform 0.45s var(--ease), filter 0.45s var(--ease);
}
.card-frame {
  position: relative;
  border-radius: max(10px, 4.2cqi);
  padding: 2.5px;
  background: linear-gradient(165deg, var(--tier-hi) 0%, var(--tier) 30%, var(--tier-hi) 55%, var(--tier) 100%);
  box-shadow:
    0 0 0 1px rgb(var(--tier-rgb) / 0.45),
    0 0 9cqi 0 rgb(var(--tier-rgb) / calc(var(--glow) * 0.75)),
    0 12cqi 18cqi -6cqi rgb(var(--tier-rgb) / calc(var(--glow) * 0.8)),
    0 10cqi 18cqi -6cqi rgb(0 0 0 / 0.75);
  transition: box-shadow 0.45s var(--ease);
}
.tier-elite .card-frame {
  background: linear-gradient(160deg, #fff1bf 0%, #f0c75a 18%, #b7862a 42%, #ffe29a 58%, #c99632 78%, #fbe2a0 100%);
}
.card-inner {
  position: relative; overflow: hidden;
  border-radius: calc(max(10px, 4.2cqi) - 2.5px);
  background: var(--card);
}
.card-inner::after {
  content: ""; position: absolute; inset: 0; z-index: 5; border-radius: inherit; pointer-events: none;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), inset 0 0 4cqi rgb(var(--tier-rgb) / 0.35);
}
.card-photo { position: relative; aspect-ratio: 1.36; overflow: hidden; background: #111822; }
.card-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 26%; filter: saturate(0.92) contrast(1.05); }
.card-photo::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: radial-gradient(130% 100% at 82% 4%, rgb(var(--tier-rgb) / 0.6), transparent 66%), linear-gradient(rgb(var(--tier-rgb) / 0.16), rgb(var(--tier-rgb) / 0.16));
  mix-blend-mode: soft-light;
}
.card-photo::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgb(12 17 24 / 0.55) 0%, rgb(12 17 24 / 0) 26%, rgb(12 17 24 / 0) 56%, rgb(12 17 24 / 0.9) 100%);
}
.card-photo.has-headshot img.headshot { position: absolute; left: 50%; bottom: 0; width: 78%; height: auto; translate: -50% 0; object-fit: contain; z-index: 0; filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.5)); }
.card-photo.has-headshot img.backdrop { position: absolute; inset: 0; filter: brightness(0.6) blur(2px); }
.card-top {
  position: absolute; left: 0; right: 0; top: 0; z-index: 3;
  display: flex; flex-wrap: wrap; align-items: center; gap: 1.4cqi 1.8cqi;
  padding: 3.4cqi 3.8cqi 0 3.4cqi;
}
.tier-tab {
  display: inline-flex; align-items: center; flex: none;
  height: max(22px, 8.4cqi); padding: 0 4.4cqi 0 3cqi;
  clip-path: polygon(0 0, 100% 0, calc(100% - 3.2cqi) 100%, 0 100%);
  background: linear-gradient(180deg, var(--tier-hi), var(--tier) 55%);
  color: var(--tier-ink);
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 94%;
  font-size: max(11px, 4.4cqi); letter-spacing: 0.01em; text-transform: uppercase; line-height: 1; white-space: nowrap;
}
.tier-premium .tier-tab, .tier-high .tier-tab { background: linear-gradient(180deg, var(--tier), var(--tier-deep)); }
.free-tag {
  display: inline-flex; align-items: center; height: max(18px, 6.6cqi); padding: 0 3.2cqi 0 2.4cqi;
  clip-path: polygon(0 0, 100% 0, calc(100% - 2cqi) 100%, 0 100%);
  background: rgb(var(--emerald-rgb) / 0.95); color: var(--emerald-ink);
  font-weight: 800; font-size: max(10px, 3.2cqi); letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; flex: none;
}
.card-time { margin-left: auto; font-size: max(11px, 3.8cqi); font-weight: 600; color: #fff; white-space: nowrap; text-shadow: 0 1px 8px rgb(0 0 0 / 0.6); }
.card-ring {
  --ring: max(41cqi, 90px);
  position: relative; z-index: 4;
  width: var(--ring); aspect-ratio: 1; margin: calc(var(--ring) * -0.634) auto 0;
  display: grid; place-items: center;
}
.card-ring > svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.card-ring .disc { fill: rgb(10 14 20 / 0.9); }
.card-ring .track { fill: none; stroke: rgb(255 255 255 / 0.13); stroke-width: 9; }
.card-ring .floor { fill: none; stroke: rgb(var(--tier-rgb) / 0.55); stroke-width: 9; stroke-linecap: butt; }
.card-ring .arc { fill: none; stroke: var(--tier); stroke-width: 9; stroke-linecap: butt; transition: stroke-dashoffset 1.3s var(--ease); }
.tier-elite .card-ring .arc { stroke: url(#none); stroke: var(--elite); }
.card-ring .tick { stroke: rgb(10 14 20 / 0.95); stroke-width: 3; }
.ring-value { position: relative; display: grid; justify-items: center; text-align: center; line-height: 1; }
.ring-value strong {
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 90%;
  font-size: calc(var(--ring) * 0.273); letter-spacing: -0.02em; color: #fff;
}
.ring-value strong.is-range { font-size: calc(var(--ring) * 0.192); }
.ring-value span { margin-top: 1.4cqi; font-size: max(10px, 3.25cqi); font-weight: 650; font-stretch: 75%; letter-spacing: 0.03em; text-transform: uppercase; color: #e8edf2; line-height: 1.2; }
.card-body {
  position: relative; z-index: 3;
  margin-top: -10cqi; padding: 12.5cqi 5cqi 5cqi;
  background: linear-gradient(180deg, #121823 0%, var(--card) 38%);
  clip-path: polygon(0 7cqi, 29% 0, 71% 0, 100% 7cqi, 100% 100%, 0 100%);
}
.card-body::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 7cqi;
  background: linear-gradient(180deg, rgb(var(--tier-rgb) / 0.28), transparent);
  clip-path: polygon(0 100%, 29% 0, 71% 0, 100% 100%, 100% 100%, 0 100%);
  pointer-events: none;
}
.card-head { text-align: center; }
.card-player { font-size: max(14px, 6.4cqi); font-weight: 650; line-height: 1.15; color: #fff; }
.card-market { margin-top: 0.8cqi; font-size: max(12px, 4.6cqi); color: var(--text-2); line-height: 1.25; }
.card-pick {
  margin-top: 2.4cqi;
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 90%;
  font-size: 11.6cqi; line-height: 0.95; letter-spacing: -0.012em; text-transform: uppercase; color: #fff;
}
.card-sealed { display: flex; align-items: center; gap: 4cqi; text-align: left; }
.card-sealed .lock { width: max(16px, 8cqi); height: max(16px, 8cqi); color: #f3f5f8; --keyhole: var(--card); flex: none; }
.card-sealed h3 { font-size: max(13px, 5.9cqi); font-weight: 650; line-height: 1.15; color: #fff; }
.card-sealed p { margin-top: 0.8cqi; font-size: max(11px, 4.5cqi); line-height: 1.25; color: var(--text-2); }
.card-evidence {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  margin-top: 4.4cqi; padding-top: 4.2cqi;
  border-top: 1px solid var(--line-2);
}
.card-evidence div { display: grid; gap: 1cqi; justify-items: center; text-align: center; padding: 0 1cqi; }
.card-evidence div + div { border-left: 1px solid var(--line-2); }
.card-evidence dt { font-size: max(11px, 4.1cqi); color: var(--text-2); line-height: 1.2; white-space: nowrap; }
.card-evidence dd { font-family: var(--display); font-style: italic; font-weight: 850; font-stretch: 92%; font-size: max(14px, 7cqi); line-height: 1; color: #fff; white-space: nowrap; }
.card-btn {
  display: flex; align-items: center; justify-content: center; gap: 0.5em;
  min-height: max(34px, 13.4cqi); margin-top: 4.6cqi; padding: 0 3cqi;
  border-radius: max(8px, 3cqi);
  background: linear-gradient(180deg, var(--tier-btn-hi), var(--tier-btn));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(var(--tier-rgb) / 0.55);
  color: #fff; text-decoration: none; font-weight: 650; font-size: max(12px, 5.2cqi); white-space: nowrap;
  transition: filter 0.25s var(--ease), transform 0.25s var(--ease);
}
.tier-elite .card-btn { box-shadow: inset 0 1px 0 rgb(255 240 200 / 0.25), inset 0 0 0 1.5px rgb(var(--elite-rgb) / 0.95); color: #fff6de; }
.tier-standard .card-btn { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.18), inset 0 0 0 1px rgb(var(--standard-rgb) / 0.7); }
.card-btn:hover { filter: brightness(1.14); }
.card-btn:active { transform: translateY(1px); }
.pick-card:hover { transform: translateY(-5px); --glow: 1; }
/* The smallest cards (lower steps on laptop screens) trade photo height for room, never text size. */
@container (max-width: 190px) {
  .card-photo { aspect-ratio: 1.8; }
  .card-btn { min-height: 30px; margin-top: 3.4cqi; }
}
.pick-card:hover .card-photo img { transform: scale(1.04); }
.card-photo img { transition: transform 1.2s var(--ease); }

/* Ghost cards: tier frames while tonight's board loads or before release. */
.pick-card.is-ghost .card-frame { background: linear-gradient(165deg, rgb(var(--tier-rgb) / 0.75), rgb(var(--tier-rgb) / 0.35)); --glow: 0.25; }
.pick-card.is-ghost .card-photo { aspect-ratio: 1.36; }
.pick-card.is-ghost .card-body { min-height: 42cqi; }
.pick-card.is-ghost .card-frame > .card-photo,
.pick-card.is-ghost .card-frame > .card-body { background: linear-gradient(90deg, #111822, #17202c, #111822); background-size: 200% 100%; }
.motion .pick-card.is-ghost .card-frame > .card-photo,
.motion .pick-card.is-ghost .card-frame > .card-body { animation: shimmer 1.8s linear infinite; }
.pick-card.is-ghost .card-frame > .card-photo { border-radius: calc(max(10px, 4.2cqi) - 2px) calc(max(10px, 4.2cqi) - 2px) 0 0; }
.pick-card.is-ghost .card-frame > .card-body { border-radius: 0 0 calc(max(10px, 4.2cqi) - 2px) calc(max(10px, 4.2cqi) - 2px); clip-path: none; margin-top: 0; }
.pick-card.is-waiting .card-photo img { filter: grayscale(0.6) brightness(0.55); }
.pick-card.is-waiting { --glow: 0.45; }
.card-waiting { text-align: center; }
.card-waiting h3 { font-size: max(13px, 5.9cqi); font-weight: 650; line-height: 1.15; color: #fff; }
.card-waiting p { margin-top: 1cqi; font-size: max(11px, 4.5cqi); line-height: 1.3; color: var(--text-2); }
.pick-card.is-waiting .ring-value strong { color: var(--text-2); }

/* ---------- Free picks ----------
   A free pick wears an emerald frame in any band, so "free" reads before the tier does. The tier tab and
   ring keep the rating's colour. Before kickoff its button pulses: visitors get the join offer, members claim. */
.pick-card.is-free .card-frame {
  background: linear-gradient(165deg, var(--emerald-soft) 0%, var(--emerald) 32%, #1fb893 58%, var(--emerald-soft) 78%, var(--emerald) 100%);
  box-shadow:
    0 0 0 1px rgb(var(--emerald-rgb) / 0.6),
    0 0 9cqi 0 rgb(var(--emerald-rgb) / calc(var(--glow) * 0.7)),
    0 12cqi 18cqi -6cqi rgb(var(--emerald-rgb) / calc(var(--glow) * 0.7)),
    0 10cqi 18cqi -6cqi rgb(0 0 0 / 0.75);
}
.pick-card.is-free .card-inner::after { box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14), inset 0 0 4cqi rgb(var(--emerald-rgb) / 0.4); }
.pick-card.is-free .card-body::before { background: linear-gradient(180deg, rgb(var(--emerald-rgb) / 0.3), transparent); }
.pick-card[data-free-card] { cursor: pointer; }
.pick-card.is-gated .card-photo.has-headshot img.headshot { filter: drop-shadow(0 10px 18px rgb(0 0 0 / 0.5)) saturate(0.9); }

.card-pick.is-hidden {
  display: inline-flex; align-items: center; gap: 2.4cqi;
  margin-top: 2.2cqi; padding: 1.2cqi 3.2cqi 1.2cqi 2.4cqi;
  border-radius: max(6px, 2.2cqi);
  background: rgb(var(--emerald-rgb) / 0.1);
  box-shadow: inset 0 0 0 1px rgb(var(--emerald-rgb) / 0.45);
  font-size: max(15px, 6.6cqi); color: var(--emerald-soft);
}
.card-pick.is-hidden .icon { width: 0.9em; height: 0.9em; flex: none; color: var(--emerald); --keyhole: #0b1a17; }


button.card-btn { width: 100%; border: 0; font-family: inherit; cursor: pointer; }
.card-btn.card-free {
  background: linear-gradient(180deg, #52f0cb, var(--emerald) 60%, #22c29d);
  color: var(--emerald-ink); font-weight: 750;
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -2px 0 rgb(3 42 33 / 0.18), 0 0 14px -2px rgb(var(--emerald-rgb) / 0.55);
}
.card-btn.card-free:hover { filter: brightness(1.08); }
.card-btn.card-free.is-used {
  background: rgb(var(--emerald-rgb) / 0.12); color: var(--emerald-soft);
  box-shadow: inset 0 0 0 1px rgb(var(--emerald-rgb) / 0.5);
}
.card-btn.card-free[aria-disabled="true"] { pointer-events: none; filter: saturate(0.6) brightness(0.9); }
.motion .card-btn.card-free.is-live { animation: free-pulse 2.2s var(--ease-in-out) infinite; }
.motion .pick-card:hover .card-btn.card-free.is-live { animation-duration: 1.4s; }
@keyframes free-pulse {
  0%, 100% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -2px 0 rgb(3 42 33 / 0.18), 0 0 0 0 rgb(var(--emerald-rgb) / 0.6), 0 0 12px -2px rgb(var(--emerald-rgb) / 0.5); }
  55% { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.45), inset 0 -2px 0 rgb(3 42 33 / 0.18), 0 0 0 5px rgb(var(--emerald-rgb) / 0), 0 0 24px 2px rgb(var(--emerald-rgb) / 0.75); }
}

/* The hero's free-pick button glows emerald while there's a free pick to read or claim. */
.btn.is-free-cta { position: relative; }
.btn.is-free-cta::after {
  content: ""; position: absolute; inset: -3px; border-radius: inherit; pointer-events: none;
  box-shadow: 0 0 0 2px rgb(var(--emerald-rgb) / 0.85), 0 0 22px 2px rgb(var(--emerald-rgb) / 0.45);
}
.motion .btn.is-free-cta::after { animation: free-halo 2.2s var(--ease-in-out) infinite; }
@keyframes free-halo { 0%, 100% { opacity: 0.55; transform: scale(1); } 55% { opacity: 1; transform: scale(1.025); } }

/* Kept narrow so it sits in the open space left of the staircase's first step. */
.free-note {
  position: relative; max-width: 13.5rem;
  margin-top: 20px; padding-left: 20px;
  font-size: 0.9rem; line-height: 1.4; color: var(--text-2); text-shadow: 0 1px 10px rgb(0 0 0 / 0.7);
}
.free-note strong { display: block; color: var(--emerald); font-weight: 750; font-size: 1rem; }
.free-dot { position: absolute; left: 0; top: 0.42em; width: 9px; height: 9px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px rgb(var(--emerald-rgb) / 0.18); }
.motion .free-dot { animation: free-halo 2.2s var(--ease-in-out) infinite; }
.free-note[hidden] { display: none; }

/* The join offer a visitor sees when they reach for a free pick. */
.free-gate {
  width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  margin: auto; padding: 0; border: 0; border-radius: 18px;
  background: transparent; color: var(--text); overflow: visible;
}
.free-gate::backdrop { background: rgb(4 7 11 / 0.72); backdrop-filter: blur(6px); }
.gate-panel {
  position: relative; display: grid; gap: 16px; justify-items: start;
  padding: 28px 26px 24px; border-radius: 18px; overflow: auto; max-height: calc(100dvh - 32px);
  background:
    radial-gradient(120% 70% at 100% 0%, rgb(var(--emerald-rgb) / 0.2), transparent 60%),
    linear-gradient(180deg, #111a22, var(--ink-raised));
  box-shadow: 0 0 0 1.5px rgb(var(--emerald-rgb) / 0.7), 0 0 44px -6px rgb(var(--emerald-rgb) / 0.45), 0 30px 60px -20px rgb(0 0 0 / 0.8);
}
.motion .free-gate[open] .gate-panel { animation: gate-in 0.42s var(--ease); }
@keyframes gate-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } }
.gate-panel .free-tag { height: 24px; font-size: 11px; padding: 0 18px 0 10px; clip-path: polygon(0 0, 100% 0, calc(100% - 8px) 100%, 0 100%); }
.gate-panel h2 {
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 90%;
  font-size: clamp(1.7rem, 6vw, 2.2rem); line-height: 0.98; text-transform: uppercase; color: #fff; text-wrap: balance;
}
.gate-close {
  position: absolute; top: 12px; right: 12px; display: grid; place-items: center;
  width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.06); color: var(--text-2); cursor: pointer;
}
.gate-close:hover { background: rgb(255 255 255 / 0.12); color: #fff; }
.gate-close .icon { width: 18px; height: 18px; }
.gate-pick { display: grid; gap: 3px; margin-top: -4px; }
.gate-pick strong { font-size: 1.15rem; font-weight: 700; color: #fff; }
.gate-pick span { font-size: 0.92rem; color: var(--text-2); }
.gate-pick b { color: var(--emerald); font-weight: 750; }
.gate-lock {
  display: flex; align-items: center; gap: 14px; width: 100%;
  padding: 14px 16px; border-radius: 12px;
  background: rgb(var(--emerald-rgb) / 0.08); box-shadow: inset 0 0 0 1px rgb(var(--emerald-rgb) / 0.4);
}
.gate-lock .icon { width: 26px; height: 26px; color: var(--emerald); --keyhole: #0e1a19; flex: none; }
.gate-lock p { display: grid; gap: 2px; }
.gate-lock strong { color: #fff; font-weight: 700; }
.gate-lock span { font-size: 0.9rem; color: var(--text-2); }
.gate-perks { display: grid; gap: 10px; width: 100%; list-style: none; padding: 0; margin: 2px 0 0; }
.gate-perks li { display: flex; align-items: center; gap: 12px; font-size: 0.97rem; line-height: 1.35; color: var(--text-2); }
.gate-perks strong { color: #fff; font-weight: 650; }
.gate-perks b {
  display: grid; place-items: center; flex: none; min-width: 46px; height: 34px; padding: 0 8px; border-radius: 8px;
  font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.05rem;
  background: linear-gradient(180deg, #52f0cb, var(--emerald)); color: var(--emerald-ink);
}
.gate-cta { width: 100%; justify-content: center; margin-top: 4px; }
.gate-alt { justify-self: center; font-size: 0.93rem; color: var(--text-2); }

.home-toast {
  position: fixed; left: 50%; bottom: 20px; z-index: 60; max-width: min(520px, calc(100vw - 32px));
  padding: 12px 18px; border-radius: 12px; translate: -50% 0;
  background: #0f1c1a; color: #eafff8; font-weight: 600; font-size: 0.95rem; line-height: 1.4;
  box-shadow: 0 0 0 1px rgb(var(--emerald-rgb) / 0.6), 0 18px 40px -12px rgb(0 0 0 / 0.8);
  opacity: 0; transform: translateY(12px); pointer-events: none; transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.home-toast:empty { display: none; }
.home-toast.is-shown { opacity: 1; transform: none; }
.home-toast.is-error { background: #221114; color: #ffe3e5; box-shadow: 0 0 0 1px rgb(var(--coral-rgb) / 0.7), 0 18px 40px -12px rgb(0 0 0 / 0.8); }

/* ---------- Sections ---------- */
.section { position: relative; padding: clamp(84px, 10vw, 136px) 0; }
.section-head { display: flex; align-items: end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; margin-bottom: clamp(32px, 4vw, 52px); }
.section h2 {
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 90%;
  font-size: clamp(2.3rem, 4.8vw, 4.3rem); line-height: 0.96; letter-spacing: -0.01em; word-spacing: 0.06em; text-transform: uppercase;
  text-wrap: balance; color: #fff;
}
.section-head p, .section-lede { margin-top: 16px; max-width: 58ch; color: var(--text-2); font-size: 1.08rem; line-height: 1.55; text-wrap: pretty; }
.state-line { color: var(--text-2); font-size: 1.02rem; }
.state-line button { margin-left: 8px; background: none; border: 0; color: var(--emerald); font-weight: 700; text-decoration: underline; cursor: pointer; }

/* The hero's diagonal cut, carried down the page on raised sections. */
.cut-top {
  --cut: clamp(36px, 5.2vw, 84px);
  padding-top: calc(var(--cut) + clamp(72px, 8vw, 112px));
  clip-path: polygon(0 var(--cut), 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, #0e151e 0%, #0b1118 100%);
}
.cut-top::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: var(--cut);
  background: linear-gradient(90deg, var(--emerald), var(--coral));
  -webkit-mask: linear-gradient(to bottom right, transparent calc(50% - 1.5px), #000 50%, transparent calc(50% + 1.5px));
  mask: linear-gradient(to bottom right, transparent calc(50% - 1.5px), #000 50%, transparent calc(50% + 1.5px));
  opacity: 0.7;
}

/* Board */
.board-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 236px), 1fr));
  gap: clamp(20px, 2.2vw, 30px); align-items: start;
}
.board-grid > .state-line, .board-grid > .board-empty { grid-column: 1 / -1; }
.board-empty {
  display: grid; gap: 14px; justify-items: start;
  padding: clamp(28px, 4vw, 44px); border-radius: 16px;
  background: linear-gradient(135deg, rgb(var(--emerald-rgb) / 0.08), rgb(var(--coral-rgb) / 0.06)), var(--ink-raised);
  box-shadow: inset 0 0 0 1px var(--line);
}
.board-empty h3 { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 92%; font-size: clamp(1.5rem, 2.4vw, 2rem); text-transform: uppercase; line-height: 1; word-spacing: 0.06em; }
.board-empty p { max-width: 58ch; color: var(--text-2); }

/* Ladder (tier legend) */
.ladder { background: var(--ink); }
.ladder-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px); align-items: end; }
.ladder-copy p { margin-top: 18px; color: var(--text-2); font-size: 1.08rem; max-width: 46ch; }
.ladder-copy .ladder-fine { font-size: 0.98rem; color: var(--text-3); }
.ladder-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 18px); align-items: end; min-height: 380px; }
.ladder-step {
  --h: calc(46% + var(--rung) * 18%);
  position: relative; height: var(--h); min-height: 176px;
  display: flex; flex-direction: column; justify-content: flex-start; gap: 10px;
  padding: 16px 16px 18px;
  border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, rgb(var(--tier-rgb) / 0.28), rgb(var(--tier-rgb) / 0.05) 70%, transparent);
  box-shadow: inset 0 2px 0 var(--tier), inset 0 0 0 1px rgb(var(--tier-rgb) / 0.3);
  transform-origin: bottom;
  overflow: hidden; isolation: isolate;
}
.ladder-step::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--art) center 28% / cover no-repeat;
  -webkit-mask: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 30%, #000 72%, transparent 100%);
  mask: linear-gradient(180deg, transparent 0%, rgb(0 0 0 / 0.55) 30%, #000 72%, transparent 100%);
  opacity: 0.5; filter: saturate(0.9);
}
.ladder-step::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgb(var(--tier-rgb) / 0.2), rgb(10 15 21 / 0.35) 60%, rgb(10 15 21 / 0.85));
}
.tier-elite.ladder-step { background: linear-gradient(180deg, rgb(var(--elite-rgb) / 0.34), rgb(var(--elite-rgb) / 0.06) 70%, transparent); }
.rung-tab {
  align-self: flex-start; display: inline-flex; align-items: center; height: 28px; padding: 0 16px 0 10px;
  clip-path: polygon(0 0, 100% 0, calc(100% - 9px) 100%, 0 100%);
  background: linear-gradient(180deg, var(--tier-hi), var(--tier));
  color: var(--tier-ink);
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 94%; font-size: 0.86rem; text-transform: uppercase; white-space: nowrap;
}
.tier-premium .rung-tab, .tier-high .rung-tab { background: linear-gradient(180deg, var(--tier), var(--tier-deep)); }
.rung-range { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 88%; font-size: clamp(1.35rem, 2.05vw, 2.05rem); line-height: 1; color: #fff; letter-spacing: -0.015em; white-space: nowrap; }
.rung-cost { font-size: 0.95rem; font-weight: 600; color: var(--text); }
.rung-count { margin-top: auto; font-size: 0.92rem; font-weight: 600; color: #fff; }
.rung-count:empty { display: none; }

/* Engine story */
.engine { background: radial-gradient(90% 60% at 50% 0%, #0f1a22 0%, var(--ink) 70%); }
.engine-head { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 20px 64px; align-items: end; margin-bottom: clamp(32px, 4vw, 56px); }
.engine-head p { color: var(--text-2); font-size: 1.08rem; max-width: 48ch; }
.engine-stage { display: grid; gap: clamp(24px, 3vw, 40px); }
.dot-field {
  position: relative; height: clamp(320px, 34vw, 440px);
  border-radius: 18px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 100%, #0e1720, #0a0f15 70%);
  box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -40px rgb(0 0 0 / 0.9);
}
.dot-field canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.dot-field figcaption { position: absolute; left: 18px; bottom: 14px; font-size: 0.85rem; color: var(--text-2); }
.field-legend {
  position: absolute; left: 18px; top: 16px; z-index: 1;
  display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 10px 14px; border-radius: 12px;
  background: rgb(10 15 21 / 0.82); box-shadow: inset 0 0 0 1px var(--line);
  font-size: 0.92rem; color: var(--text-2);
}
.field-legend li { display: inline-flex; align-items: center; gap: 8px; }
.field-legend strong { color: #fff; font-weight: 700; }
.field-legend i, .engine-steps h3 i { width: 10px; height: 10px; border-radius: 2px; flex: none; display: inline-block; }
.k-scanned i { background: rgb(190 204 219 / 0.28); box-shadow: inset 0 0 0 1px rgb(190 204 219 / 0.4); }
.k-modeled i { background: rgb(190 204 219 / 0.7); }
.k-reviewed i { background: var(--emerald); }
.k-published i { background: linear-gradient(135deg, var(--premium), var(--high) 50%, var(--elite)); }
.engine-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px); }
.engine-steps li { position: relative; padding-top: 22px; border-top: 2px solid var(--line-2); transition: border-color 0.6s var(--ease); }
.engine-steps li::before { content: ""; position: absolute; left: 0; top: -2px; width: 100%; height: 2px; background: var(--emerald); transform: scaleX(0); transform-origin: left; transition: transform 0.9s var(--ease); }
.engine-steps li:last-child::before { background: linear-gradient(90deg, var(--emerald), var(--coral)); }
.engine-steps li.is-lit::before, .engine-steps.is-static li::before { transform: none; }
.engine-steps.is-playing li::before { transform: scaleX(var(--p, 0)); transition: none; }
.engine-steps.is-playing li { transition: opacity 0.5s var(--ease); }
.engine-steps.is-playing li:not(.is-active):not(.is-done) { opacity: 0.45; }
.engine-steps li.is-active h3 i { animation: step-pulse 1.1s ease-in-out infinite; }
.field-legend strong { font-variant-numeric: tabular-nums; }
.field-legend.is-playing li { transition: opacity 0.4s var(--ease); }
.field-legend.is-playing li:not(.is-active):not(.is-done) { opacity: 0.45; }
.field-legend li.is-active i { animation: step-pulse 1.1s ease-in-out infinite; }
.field-phase {
  position: absolute; right: 18px; bottom: 12px; z-index: 1;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--emerald);
}
.field-phase:empty { display: none; }
.field-phase::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; animation: phase-blink 1.2s ease-in-out infinite; }
@keyframes step-pulse { 50% { box-shadow: 0 0 0 5px rgb(48 220 180 / 0.2); } }
@keyframes phase-blink { 50% { opacity: 0.25; } }
@media (max-width: 640px) { .field-phase { right: auto; left: 18px; bottom: 34px; } }
.engine-steps h3 { display: flex; align-items: center; gap: 10px; font-size: 1.15rem; font-weight: 700; color: #fff; letter-spacing: 0.01em; }

.engine-steps p { margin-top: 6px; color: var(--text-2); font-size: 0.98rem; line-height: 1.5; }

/* Record */
.record { background: linear-gradient(180deg, var(--ink), #0b1219); }
.record-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 80px) clamp(32px, 5vw, 80px); align-items: start; }
.record-copy p { margin: 18px 0 26px; color: var(--text-2); font-size: 1.08rem; max-width: 44ch; }
.record-board {
  padding: clamp(22px, 3vw, 36px); border-radius: 18px;
  background: var(--ink-raised); box-shadow: inset 0 0 0 1px var(--line), 0 30px 60px -44px rgb(0 0 0 / 1);
}
.record-figures { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.record-figures div { display: grid; gap: 6px; }
.record-figures dt { font-size: 0.92rem; color: var(--text-2); font-weight: 600; }
.record-figures dd { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 92%; font-size: clamp(2.2rem, 4.2vw, 3.6rem); line-height: 0.95; color: #fff; }
.record-figures .is-win dd { color: var(--emerald); }
.record-figures .is-loss dd { color: var(--coral-hot); }
.record-split { display: flex; height: 12px; margin-top: 24px; border-radius: 999px; overflow: hidden; background: rgb(255 255 255 / 0.06); gap: 3px; }
.record-split span { height: 100%; border-radius: 999px; transform-origin: left; transition: transform 1.2s var(--ease); }
.record-split .w { background: var(--emerald); }
.record-split .l { background: var(--coral); }
.record-split .p { background: var(--standard); }
.record-rate { margin-top: 18px; color: var(--text); font-size: 1rem; }
.record-rate strong { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.3rem; }
.record-rate small, .record-period { display: block; margin-top: 6px; color: var(--text-3); font-size: 0.88rem; }
.record-empty { color: var(--text-2); }
.record-empty strong { display: block; font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.6rem; color: #fff; text-transform: uppercase; margin-bottom: 8px; }
/* Results tape: every settled pick, free and paid, as a torn ticket stub.
   Two lanes drift in opposite directions; hover, focus or the Pause button holds them. */
.tape { position: relative; margin-top: clamp(56px, 7vw, 96px); isolation: isolate; }
.tape::before {
  /* The brand's emerald-to-coral diagonal, dimmed to a stage the stubs ride across. */
  content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: 70px; height: 440px;
  background: linear-gradient(100deg, rgb(var(--emerald-rgb) / 0.14), rgb(var(--emerald-rgb) / 0.03) 45%, rgb(var(--coral-rgb) / 0.03) 55%, rgb(var(--coral-rgb) / 0.13));
  clip-path: polygon(0 12%, 100% 0, 100% 88%, 0 100%);
}
.tape-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 22px; margin-bottom: 26px; }
.tape-head h3 {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 92%;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1; text-transform: uppercase; color: #fff; letter-spacing: 0.005em;
}
.tape-live { position: relative; width: 11px; height: 11px; border-radius: 50%; background: var(--emerald); box-shadow: 0 0 0 4px rgb(var(--emerald-rgb) / 0.18); flex: none; }
.motion .tape-live::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--emerald); animation: tape-ping 2.4s var(--ease) infinite; }
@keyframes tape-ping { from { transform: scale(0.6); opacity: 0.9; } to { transform: scale(2.4); opacity: 0; } }
.tape-tally { flex: 1 1 320px; margin: 0; color: var(--text-2); font-size: 0.98rem; }
.tape-tally strong { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1.12rem; color: #fff; letter-spacing: 0.01em; }
.tape-tally .w { color: var(--emerald); }
.tape-tally .l { color: var(--coral-hot); }
.tape-tally .p { color: var(--standard-hi); }
.tape-form { display: inline-flex; gap: 4px; margin-left: 10px; vertical-align: -2px; }
.tape-form i { width: 9px; height: 16px; border-radius: 3px; background: var(--standard-deep); transform: skewX(-12deg); }
.tape-form i.win { background: var(--emerald); }
.tape-form i.loss { background: var(--coral); }
.tape-pause {
  display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 16px 0 13px; border: 0; border-radius: 999px; cursor: pointer;
  background: rgb(255 255 255 / 0.06); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--text); font: 650 0.9rem/1 var(--sans);
  transition: background-color 0.25s var(--ease), box-shadow 0.25s var(--ease);
}
.tape-pause[hidden] { display: none; }
.tape-pause:hover { background: rgb(255 255 255 / 0.1); box-shadow: inset 0 0 0 1px rgb(var(--emerald-rgb) / 0.5); }
.tape-pause:focus-visible { outline: 2px solid var(--emerald); outline-offset: 3px; }
.tape-pause .icon { width: 16px; height: 16px; }

.tape-stage {
  display: grid; gap: 18px; padding: 8px 0 14px; overflow: hidden;
  -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tape-stage.is-state { -webkit-mask: none; mask: none; }
.tape-lane { display: flex; width: max-content; gap: 18px; padding: 6px 0; }
.motion .tape-lane { animation: tape-drift var(--dur, 120s) linear infinite; }
.motion .tape-lane.is-reverse { animation-direction: reverse; }
.motion .tape-stage:hover .tape-lane, .motion .tape.is-paused .tape-lane { animation-play-state: paused; }
/* Each lane holds its stubs twice; moving by half its width (plus half a gap) loops without a seam. */
@keyframes tape-drift { from { transform: translateX(0); } to { transform: translateX(calc(-50% - 9px)); } }

.stub {
  --cut: 244px; --tear: 104px; --notch: 10px;
  --result: var(--standard); --result-hi: var(--standard-hi); --result-rgb: var(--standard-rgb);
  position: relative; flex: none; display: grid; grid-template-columns: var(--cut) var(--tear); width: calc(var(--cut) + var(--tear)); min-height: 186px;
  border-radius: 14px; background: linear-gradient(160deg, #131c27, #0c1219 70%);
  box-shadow: inset 0 0 0 1px var(--line-2);
  -webkit-mask: radial-gradient(circle at var(--cut) 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
                radial-gradient(circle at var(--cut) 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
  mask: radial-gradient(circle at var(--cut) 0, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) top / 100% 51% no-repeat,
        radial-gradient(circle at var(--cut) 100%, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) bottom / 100% 51% no-repeat;
  transition: transform 0.4s var(--ease), background 0.4s var(--ease);
}
.stub.win { --result: var(--emerald); --result-hi: var(--emerald-soft); --result-rgb: var(--emerald-rgb); }
.stub.loss { --result: var(--coral); --result-hi: var(--coral-hot); --result-rgb: var(--coral-rgb); }
.stub:hover { transform: translateY(-4px); background: linear-gradient(160deg, #17222e, #0e151d 70%); }
.stub-main { position: relative; display: flex; flex-direction: column; gap: 5px; min-width: 0; padding: 16px 16px 14px 20px; }
/* The confidence tier rides the left edge, in the same rarity colors as the board. */
.stub-main::before { content: ""; position: absolute; left: 0; top: 16px; bottom: 16px; width: 4px; border-radius: 0 4px 4px 0; background: linear-gradient(180deg, var(--tier-hi), var(--tier-deep)); }
.stub-meta { display: flex; align-items: center; gap: 8px; min-height: 20px; font-size: 0.72rem; font-weight: 750; letter-spacing: 0.09em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.stub-meta .lg { color: var(--text); }
.stub-meta .free { padding: 3px 7px 2px; border-radius: 5px; background: rgb(var(--emerald-rgb) / 0.14); color: var(--emerald); }
.stub-player { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.06rem; font-weight: 700; color: #fff; }
.stub-call { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 0.88rem; }
.stub-call b { font-family: var(--display); font-style: italic; font-weight: 900; font-size: 0.96rem; text-transform: uppercase; letter-spacing: 0.02em; color: #fff; }
.stub-call .ln { font-weight: 750; color: #fff; }
.stub-gauge { position: relative; height: 32px; margin-top: auto; }
.stub-gauge .track { position: absolute; left: 0; right: 0; bottom: 4px; height: 7px; border-radius: 999px; background: rgb(255 255 255 / 0.08); overflow: hidden; }
.stub-gauge .fill { position: absolute; left: 0; top: 0; bottom: 0; width: var(--actual); border-radius: 999px; background: linear-gradient(90deg, rgb(var(--result-rgb) / 0.3), var(--result)); }
.stub-gauge .mark { position: absolute; left: var(--line); bottom: 0; width: 2px; height: 15px; margin-left: -1px; border-radius: 2px; background: #fff; box-shadow: 0 0 0 2px rgb(10 15 21 / 0.8); }
.stub-gauge .mark span { position: absolute; bottom: 17px; left: 50%; transform: translateX(-50%); font-size: 0.68rem; font-weight: 750; letter-spacing: 0.04em; color: var(--text-2); white-space: nowrap; }
.stub-rating { font-size: 0.72rem; font-weight: 750; letter-spacing: 0.04em; color: var(--tier-hi); white-space: nowrap; }

.stub-final {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 2px; padding: 44px 8px 16px;
  background: linear-gradient(180deg, rgb(var(--result-rgb) / 0.06), rgb(var(--result-rgb) / 0.22));
  text-align: center;
}
/* Perforation between the ticket and its tear-off. */
.stub-final::before { content: ""; position: absolute; left: -1px; top: 16px; bottom: 16px; border-left: 2px dashed rgb(214 226 240 / 0.24); }
.stub-final .k { font-size: 0.66rem; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text-3); }
.stub-final strong { font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 90%; font-size: 2.7rem; line-height: 0.95; color: var(--result-hi); font-variant-numeric: tabular-nums; }
.stub-final .unit { font-size: 0.66rem; font-weight: 750; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); max-width: 90px; line-height: 1.2; }
.stub-final .margin { margin-top: 5px; padding: 3px 8px 2px; border-radius: 999px; background: rgb(var(--result-rgb) / 0.16); font-size: 0.74rem; font-weight: 800; color: var(--result-hi); font-variant-numeric: tabular-nums; }
/* The cashed-ticket stamp, pressed across the tear-off. */
.stub-stamp {
  position: absolute; z-index: 2; right: 14px; top: 14px; padding: 5px 9px 4px;
  border: 2.5px solid var(--result); border-radius: 7px; color: var(--result-hi);
  font-family: var(--display); font-style: italic; font-weight: 900; font-size: 1rem; letter-spacing: 0.1em; text-transform: uppercase; line-height: 1;
  background: rgb(10 15 21 / 0.55); box-shadow: 0 6px 18px -8px rgb(var(--result-rgb) / 0.8);
  transform: rotate(-9deg); pointer-events: none;
}
.motion .tape.is-in .stub-stamp { animation: stamp-in 0.5s calc(0.3s + var(--i, 0) * 0.08s) cubic-bezier(0.2, 1.5, 0.4, 1) backwards; }
@keyframes stamp-in { from { transform: rotate(-26deg) scale(2); opacity: 0; } }

/* Join */
.join { overflow: clip; background: var(--ink); isolation: isolate; }
.join-band {
  position: absolute; z-index: -1; left: -15%; right: -15%; top: 30%; height: 44%;
  transform: rotate(-12deg);
  background: linear-gradient(90deg, rgb(26 150 122 / 0.5), rgb(46 214 172 / 0.45) 35%, rgb(239 98 91 / 0.45) 70%, rgb(248 77 86 / 0.5));
  -webkit-mask: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
  mask: linear-gradient(180deg, transparent, #000 40%, #000 60%, transparent);
  filter: blur(2px);
}
.join-layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: clamp(32px, 5vw, 80px); align-items: center; }
.join-copy p { margin-top: 18px; color: var(--text); font-size: 1.12rem; max-width: 50ch; }
.join-copy .hero-actions { margin-top: 30px; }
.join-copy .join-fine { margin-top: 18px; font-size: 0.92rem; color: var(--text-2); }
.join-card { justify-self: center; width: min(100%, 330px); }
.join-card .pick-card { rotate: 3deg; }
.join-card-label { margin-bottom: 14px; text-align: center; font-size: 0.95rem; color: var(--text-2); font-weight: 600; }

/* Footer */
.site-footer { border-top: 1px solid var(--line); background: #080c11; padding: 48px 0 40px; }
.footer-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 26px 48px; align-items: start; }
.footer-brand p { margin-top: 12px; color: var(--text-2); font-size: 0.95rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: flex-end; }
.footer-links a { color: var(--text-2); text-decoration: none; font-size: 0.95rem; }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.legal { grid-column: 1 / -1; padding-top: 22px; border-top: 1px solid var(--line); color: var(--text-3); font-size: 0.84rem; line-height: 1.6; max-width: 110ch; }

/* =====================================================================
   Hero headline and tagline
   ===================================================================== */
/* The period is emerald; TODAY rides a slanted emerald-to-coral slab, cut like the tier tabs.
   The slab's stops keep white TODAY at 3.2:1 or better along its whole length. */
.w-dot { color: var(--emerald); }
.w-today {
  position: relative; display: inline-block; isolation: isolate;
  padding: 0.03em 0.2em 0.02em 0.1em; margin-left: -0.04em;
  text-shadow: 0 0.04em 0.16em rgb(10 15 21 / 0.4);
}
.w-today::before {
  content: ""; position: absolute; z-index: -1; inset: 0.1em -0.06em 0.04em -0.02em;
  background: linear-gradient(100deg, #15977a 0%, #1aa383 40%, #e2474f 60%, #e8404a 100%);
  transform: skewX(-14deg); border-radius: 0.05em;
  box-shadow: 0 0.14em 0.5em -0.12em rgb(var(--coral-rgb) / 0.5), inset 0 0.03em 0 rgb(255 255 255 / 0.3);
}
/* The hook sells in two beats: the refusals in white, the promise in emerald on its own line. */
.hero-tagline {
  margin-top: 1.2cqi;
  font-family: var(--display); font-style: italic; font-weight: 800; font-stretch: 94%;
  font-size: max(21px, 1.95cqi); line-height: 1.06; letter-spacing: -0.006em; color: #fff;
  text-shadow: 0 1px 16px rgb(0 0 0 / 0.55);
}
.hero-tagline em { display: block; font-style: inherit; color: var(--emerald); }
.hero-copy .hero-lede { margin-top: 0.6cqi; max-width: max(300px, 33cqi); font-size: max(14px, 1.05cqi); line-height: 1.45; color: var(--text-2); text-wrap: balance; }
.hero-copy .hero-lede span { display: inline; }

/* =====================================================================
   Locked cards: the photo lock and the unlock control
   ===================================================================== */
.tier-standard { --unlock-bg: linear-gradient(180deg, #eef2f6 0%, #c3cfda 46%, #97a6b5 100%); --unlock-ink: #0d141b; }
.tier-premium  { --unlock-bg: linear-gradient(180deg, #3a7cdf 0%, #2966d0 46%, #1f50bd 100%); --unlock-ink: #fff; }
.tier-high     { --unlock-bg: linear-gradient(180deg, #8458e6 0%, #6c3cdf 46%, #5a2bcf 100%); --unlock-ink: #fff; }
.tier-elite    { --unlock-bg: linear-gradient(160deg, #fff1bf 0%, #f0c75a 30%, #c9962f 62%, #f3d27a 100%); --unlock-ink: #1f1604; }

/* A locked pick's photo is darkened and sealed with a padlock badge in its tier color. */
.pick-card.is-locked .card-photo img { filter: saturate(0.75) brightness(0.55) contrast(1.05); }
.card-lock-badge {
  display: grid; place-items: center; position: absolute; z-index: 3;
  left: 50%; top: 30cqi; translate: -50% -50%;
  width: 24cqi; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, rgb(255 255 255 / 0.14), rgb(10 15 21 / 0.88) 70%);
  box-shadow: inset 0 0 0 2px var(--tier), 0 0 7cqi rgb(var(--tier-rgb) / 0.55), 0 6cqi 10cqi -4cqi rgb(0 0 0 / 0.8);
  transition: scale 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.card-lock-badge svg { width: 52%; height: 52%; color: var(--tier-hi); --keyhole: #0c1118; }
/* On the smallest cards there is no room above the ring, so the lock moves inside it. */
.ring-lock { display: none; }
@container (max-width: 190px) {
  .card-lock-badge { display: none; }
  .ring-lock { display: block; width: 12px; height: 12px; margin-bottom: 2px; color: var(--tier-hi); --keyhole: #0c1118; }
}
.pick-card.is-locked:hover .card-lock-badge { scale: 1.07; box-shadow: inset 0 0 0 2px var(--tier-hi), 0 0 9cqi rgb(var(--tier-rgb) / 0.8), 0 6cqi 10cqi -4cqi rgb(0 0 0 / 0.8); }
.card-sealed { justify-content: center; text-align: center; }
.card-sealed .lock { display: none; }
.card-sealed h3 {
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 92%;
  text-transform: uppercase; letter-spacing: 0.01em; color: var(--tier-hi);
}
.card-sealed p { max-width: 30ch; }

/* The unlock control: tier-lit, with a lock that springs open. */
.card-unlock {
  position: relative; isolation: isolate; overflow: hidden;
  justify-content: flex-start; gap: 2.2cqi;
  min-height: max(42px, 16cqi); margin-top: 5cqi; padding: 0 1.8cqi 0 3.6cqi;
  border-radius: max(10px, 3.4cqi);
  background: var(--unlock-bg); color: var(--unlock-ink);
  font-family: var(--display); font-style: italic; font-weight: 900; font-stretch: 94%;
  font-size: max(14px, 5.9cqi); letter-spacing: 0.012em; text-transform: uppercase;
  box-shadow:
    inset 0 1px 0 rgb(255 255 255 / 0.42), inset 0 -2px 0 rgb(0 0 0 / 0.22),
    0 0 0 1px rgb(var(--tier-rgb) / 0.75),
    0 9cqi 14cqi -7cqi rgb(var(--tier-rgb) / 0.95);
  transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease), filter 0.3s var(--ease);
}
.tier-elite .card-unlock, .tier-standard .card-unlock { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.6), inset 0 -2px 0 rgb(0 0 0 / 0.2), 0 0 0 1px rgb(var(--tier-rgb) / 0.9), 0 9cqi 14cqi -7cqi rgb(var(--tier-rgb) / 0.9); color: var(--unlock-ink); }
.card-unlock::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 32%, rgb(255 255 255 / 0.5) 50%, transparent 68%);
  transform: translateX(-130%); transition: transform 0.9s var(--ease);
}
.card-unlock:hover, .card-unlock:focus-visible { transform: translateY(-2px); filter: brightness(1.06); }
.card-unlock:hover::after, .card-unlock:focus-visible::after { transform: translateX(130%); }
.card-unlock:focus-visible { outline: 2px solid var(--tier-hi); outline-offset: 3px; }
.unlock-lock { width: 1.3em; height: 1.3em; flex: none; overflow: visible; }
.unlock-lock rect { fill: currentColor; }
.unlock-shackle {
  fill: none; stroke: currentColor; stroke-width: 2.5; stroke-linecap: round;
  transform-box: fill-box; transform-origin: 100% 100%; transition: transform 0.4s var(--ease);
}
.card-unlock:hover .unlock-shackle, .card-unlock:focus-visible .unlock-shackle { transform: translateY(-1.5px) rotate(-30deg); }
.unlock-label { line-height: 1; white-space: nowrap; }
.unlock-cost {
  margin-left: auto; display: inline-flex; align-items: center; gap: 0.28em; height: 1.95em; padding: 0 0.85em; border-radius: 999px;
  background: rgb(10 15 21 / 0.86); color: var(--tier-hi);
  font-family: var(--sans); font-style: normal; font-weight: 700; font-size: max(10.5px, 0.7em); letter-spacing: 0.01em; text-transform: none; white-space: nowrap;
}
.unlock-cost b { font-weight: 800; color: #fff; }
.cost-short { display: none; }
@container (max-width: 250px) { .unlock-word { display: none; } }
@container (max-width: 205px) { .cost-long { display: none; } .cost-short { display: inline; } .card-unlock { gap: 1.6cqi; padding-left: 3cqi; } }

/* ---------- Motion (opt-in via html.motion, set before first paint) ---------- */
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgb(var(--emerald-rgb) / 0.55); } 70% { box-shadow: 0 0 0 9px rgb(var(--emerald-rgb) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--emerald-rgb) / 0); } }
@keyframes title-in { from { opacity: 0; transform: translate3d(-0.35em, 0.28em, 0) skewX(-6deg); clip-path: inset(0 0 100% 0); } to { opacity: 1; transform: none; clip-path: inset(-10% -5% -12% -5%); } }
@keyframes rise-in { from { opacity: 0; transform: translate3d(0, 18px, 0); } to { opacity: 1; transform: none; } }
@keyframes band-in { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@keyframes athlete-in { from { opacity: 0; transform: translate3d(-3%, 4%, 0) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes plate-in { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
@keyframes deal-in { from { opacity: 0; transform: translate3d(-34px, 46px, 0) rotate(-4deg) scale(0.94); } to { opacity: 1; transform: none; } }
@keyframes streak-drift { from { transform: translate3d(-3%, 0, 0) rotate(2deg); } to { transform: translate3d(3%, 0, 0) rotate(2deg); } }
@keyframes rung-in { from { transform: scaleY(0.2); opacity: 0; } to { transform: none; opacity: 1; } }

.motion .capsule-dot { animation: pulse 2.4s var(--ease) infinite; }
.motion .hero-plate { animation: plate-in 1.6s var(--ease) both; }
.motion .hero-band { animation: band-in 1.25s 0.15s var(--ease-in-out) both; }
.motion .band-streaks { animation: streak-drift 14s ease-in-out 1.4s infinite alternate; }
.motion .hero-athlete { animation: athlete-in 1.3s 0.3s var(--ease) both; }
.motion .hero-title .line { display: block; animation: title-in 1s var(--ease) both; }
.motion .hero-title .line-1 { animation-delay: 0.1s; }
.motion .hero-title .line-2 { animation-delay: 0.22s; }
.motion .hero-tagline { animation: rise-in 0.9s 0.34s var(--ease) both; }
.motion .hero-lede { animation: rise-in 0.9s 0.42s var(--ease) both; }
.motion .hero-copy .hero-actions { animation: rise-in 0.9s 0.54s var(--ease) both; }
.motion .engine-band { animation: rise-in 1s 0.8s var(--ease) both; }
.motion .pick-card.is-dealt { animation: deal-in 0.95s calc(0.55s + var(--step, 0) * 0.13s) var(--ease) backwards; }
.motion .board-grid .pick-card.is-dealt { animation-delay: calc(var(--step, 0) * 0.08s); }
.motion .ladder-step { animation: rung-in 0.9s calc(var(--rung) * 0.12s) var(--ease) both; animation-play-state: paused; }
.motion .ladder.is-in .ladder-step { animation-play-state: running; }
.motion .record-split span { transform: scaleX(0); }
.motion .record-board.is-in .record-split span { transform: none; }

@media (hover: hover) and (pointer: fine) {
  .hero-stairs .pick-card { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) translateY(var(--lift, 0px)); }
  .hero-stairs .pick-card:hover { --lift: -6px; }
}

/* ---------- Responsive ---------- */
@media (min-width: 1101px) and (max-height: 900px) {
  :root { --band-h: 92px; }
  .engine-band { --cut: clamp(40px, 5vw, 80px); }
  .engine-band-inner { padding: 8px var(--gutter) 16px; }
  .engine-figures strong { font-size: clamp(1.9rem, 2.7vw, 2.6rem); }
  .engine-figures span { font-size: 0.95rem; }
  .engine-note { font-size: 0.8rem; }
}
@media (max-width: 1380px) {
  .slate-capsule [data-capsule-detail] { display: none; }
}
@media (max-width: 1240px) {
  .engine-band-inner { grid-template-columns: minmax(0, 4fr) minmax(180px, 1fr); }
  .engine-label { grid-column: 1 / -1; }
}
@media (max-width: 1100px) {
  :root { --band-h: 0px; }
  .nav-links { display: none; }
  .hero-inner { width: 100%; aspect-ratio: auto; container-type: normal; padding: clamp(36px, 6vw, 64px) var(--gutter) 0; }
  .hero-band-hi { display: none; }
  .hero-copy { position: relative; left: auto; top: auto; width: auto; max-width: 720px; }
  .hero-title { font-size: clamp(3.1rem, 10.5vw, 6.6rem); }
  .hero-copy .hero-tagline { margin-top: 18px; font-size: clamp(1.35rem, 4.4vw, 1.85rem); }
  .hero-copy .hero-lede { margin-top: 12px; max-width: 46ch; font-size: clamp(0.98rem, 1.9vw, 1.1rem); }
  .hero-actions { margin-top: 26px; }
  .hero-copy .btn-lg { --h: 56px; font-size: 1.14rem; }
  .hero-athlete { left: auto; right: -4%; top: 8px; height: min(640px, 74vw); }
  .hero-band { top: min(360px, 34vw); height: min(270px, 26vw); }
  .hero-shade { background: linear-gradient(90deg, rgb(10 15 21 / 0.86) 0%, rgb(10 15 21 / 0.5) 45%, rgb(10 15 21 / 0.12) 75%), linear-gradient(0deg, var(--ink) 0%, rgb(10 15 21 / 0.35) 30%, transparent 55%); }
  .hero-lede span { display: inline; }
  .hero-stairs {
    position: relative; inset: auto; pointer-events: auto;
    display: flex; align-items: flex-end; gap: 16px;
    margin: 40px calc(-1 * var(--gutter)) 0; padding: 36px var(--gutter) 28px;
    overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none;
  }
  .hero-stairs::-webkit-scrollbar { display: none; }
  .hero-stairs .pick-card, .hero-stairs[data-count] .pick-card:nth-child(n) {
    position: relative; left: auto; top: auto; bottom: auto;
    flex: 0 0 clamp(210px, 29vw, 280px); width: auto;
    margin-bottom: calc(var(--step, 0) * 14px);
    scroll-snap-align: center;
  }
  .hero-stairs .pick-card.is-featured { flex-basis: clamp(236px, 33vw, 310px); order: -1; }
  .stairs-note { position: static; text-align: left; margin: 0 var(--gutter) 8px; max-width: none; font-size: 0.92rem; }
  .engine-band { --cut: 40px; }
  .engine-band-inner { grid-template-columns: 1fr; padding-top: 22px; }
  .engine-note { justify-self: start; max-width: 60ch; }
  .ladder-layout, .record-layout, .join-layout, .engine-head { grid-template-columns: 1fr; }
  .ladder-steps { min-height: 320px; }
  .join-card { justify-self: start; }
}
@media (max-width: 760px) {
  :root { --nav-h: 60px; }
  .nav-inner { gap: 12px; }
  .brand-name { font-size: 1.36rem; }
  .brand-mark { width: 27px; height: 19px; }
  .slate-capsule { display: none; }
  .nav-actions { margin-left: auto; gap: 10px; }
  .nav-signin { display: none; }
  .mobile-menu { display: block; position: relative; }
  .mobile-menu summary { list-style: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 10px; cursor: pointer; box-shadow: inset 0 0 0 1px var(--line-2); }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .mobile-menu summary .icon { width: 22px; height: 22px; }
  .mobile-menu .icon-close, .mobile-menu[open] summary .icon:not(.icon-close) { display: none; }
  .mobile-menu[open] .icon-close { display: block; }
  .mobile-panel {
    position: fixed; left: 0; right: 0; top: calc(var(--nav-h) + 2px);
    display: grid; padding: 8px var(--gutter) 20px;
    background: rgb(11 17 22 / 0.97); backdrop-filter: blur(16px);
    border-bottom: 1px solid var(--line-2);
  }
  .mobile-panel a { padding: 15px 0; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 1.08rem; font-weight: 550; }
  .mobile-panel a:last-child { border-bottom: 0; color: var(--emerald); }
  .hero-title { font-size: clamp(2.9rem, 14.6vw, 4.6rem); }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions .btn { width: 100%; }
  .hero-athlete { right: -24%; top: 60px; height: min(560px, 118vw); }
  .hero-band { top: 190px; height: 190px; }
  .hero-title { text-shadow: 0 2px 24px rgb(0 0 0 / 0.6); }
  .hero-copy::before {
    content: ""; position: absolute; z-index: -1; left: -24px; right: -24px; top: 38%; bottom: -14px;
    background: linear-gradient(90deg, rgb(10 15 21 / 0.94) 0%, rgb(10 15 21 / 0.86) 58%, rgb(10 15 21 / 0.55) 82%, rgb(10 15 21 / 0) 100%);
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 20px), transparent);
    mask: linear-gradient(180deg, transparent 0, #000 36px, #000 calc(100% - 20px), transparent);
  }
  .hero-lede { text-shadow: 0 1px 14px rgb(0 0 0 / 0.75); }
  .field-legend { position: static; margin: 12px; }
  .hero-stairs .pick-card, .hero-stairs[data-count] .pick-card:nth-child(n) { flex-basis: 74vw; margin-bottom: 0; }
  .hero-stairs .pick-card.is-featured { flex-basis: 78vw; }
  .engine-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 0; }
  .engine-figures li:nth-child(3)::before { display: none; }
  .engine-figures li { padding: 0 12px; }
  .ladder-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); min-height: 0; align-items: stretch; }
  .ladder-step { height: auto; min-height: 150px; }
  .engine-steps { grid-template-columns: 1fr; }
  .board-grid { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 76%; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--gutter)); padding: 16px var(--gutter) 30px; scrollbar-width: none; }
  .board-grid::-webkit-scrollbar { display: none; }
  .board-grid > .pick-card { scroll-snap-align: center; }
  .board-grid > .state-line, .board-grid > .board-empty { grid-column: auto; width: calc(100vw - 2 * var(--gutter)); }
  .record-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .stub { --cut: 204px; --tear: 94px; }
  .tape::before { top: 150px; height: 400px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; }
  .pick-card:hover { transform: none; }
  .engine-steps li.is-active h3 i, .field-legend li.is-active i, .field-phase::before { animation: none; }
  .stub:hover { transform: none; }
}
.stairs-note button.text-link { background: none; border: 0; border-bottom: 1.5px solid rgb(var(--emerald-rgb) / 0.4); padding: 0 0 3px; cursor: pointer; font: inherit; font-weight: 650; color: var(--emerald); }

/* Without motion the tape is a pair of swipeable shelves instead of a drift. */
html:not(.motion) .tape-stage { -webkit-mask: none; mask: none; }
html:not(.motion) .tape-lane { width: auto; overflow-x: auto; scroll-snap-type: x mandatory; padding: 6px var(--gutter) 12px; scrollbar-width: thin; }
html:not(.motion) .tape-lane .stub { scroll-snap-align: start; }
html:not(.motion) .tape-lane .stub[aria-hidden="true"] { display: none; }