/* ============================================================
   streaker — landing + demo styles
   Brand: graphite canvas + heat ramp (steel → plasma → ion → magenta → white-hot)
   Built mobile-first. Desktop breakpoints at the bottom.
   ============================================================ */

:root {
  --gr-950: #0a0b0d;
  --gr-900: #111316;
  --gr-800: #16191e;
  --gr-700: #1d2128;
  --gr-600: #262b34;
  --gr-line: #2a2f3a;

  --ink-0: #f3f4f6;
  --ink-1: #c2c6cf;
  --ink-2: #7a808d;
  --ink-3: #4a4f5b;

  --steel: #3b6ea8;
  --plasma: #5a8dff;
  --ion: #b56dff;
  --magenta: #ff3a8a;
  --whitehot: #fff2c8;
  --hot: #ff3a8a;

  --good: #3ddc84;
  --warn: #ffb74d;
  --bad: #ff5e7a;

  --r-sm: 8px;
  --r-md: 12px;
  --r-lg: 16px;
  --r-xl: 24px;

  --tap: 44px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--gr-950);
  color: var(--ink-0);
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

a { color: var(--ink-0); text-decoration: none; }
a:hover { color: var(--whitehot); }

button { font: inherit; cursor: pointer; }

.display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.03em; }
.mono { font-family: 'JetBrains Mono', monospace; }
.ink-1 { color: var(--ink-1); }
.ink-2 { color: var(--ink-2); }
.ink-3 { color: var(--ink-3); }

.heat-text {
  background: linear-gradient(95deg, var(--steel) 0%, var(--plasma) 30%, var(--ion) 60%, var(--magenta) 85%, var(--whitehot) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
  line-height: 1.1;
  padding-right: 0.22em;
  padding-bottom: 0.12em;
}

/* ============================================================
   site header
   ============================================================ */

.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 20px;
  background: rgba(10, 11, 13, 0.85);
  backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--gr-line);
}

.brand-lockup {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--ink-0);
}

.brand-mark {
  display: block;
  width: 32px;
  height: 32px;
  object-fit: contain;
}

.brand-word {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 28px;
  letter-spacing: -0.05em;
  transform: skewX(-4deg);
  transform-origin: left center;
  display: inline-block;
  padding-right: 0.18em;
  text-transform: lowercase;
}
.brand-word.small { font-size: 22px; }

.site-nav {
  display: none;
  gap: 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.site-nav a { color: var(--ink-1); }
.site-nav a:hover { color: var(--ink-0); }

/* ============================================================
   shared section head
   ============================================================ */

.section-head {
  margin-bottom: 28px;
}
.section-head .num {
  display: block;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.section-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(36px, 8vw, 56px);
  line-height: 0.95;
  letter-spacing: -0.04em;
  margin: 0;
  transform: skewX(-4deg);
  transform-origin: left center;
  text-transform: lowercase;
  padding-right: 0.18em;
  display: inline-block;
}
.section-head .section-blurb {
  margin: 16px 0 0;
  color: var(--ink-1);
  font-size: 16px;
  max-width: 540px;
}

/* ============================================================
   hero
   ============================================================ */

.hero {
  padding: 48px 20px 40px;
  background:
    radial-gradient(ellipse 80% 60% at 110% -10%, rgba(255, 58, 138, 0.12), transparent 55%);
}
.hero-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--magenta);
  margin-bottom: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.eyebrow .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--magenta);
  box-shadow: 0 0 12px var(--magenta);
}

.hero-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(38px, 9vw, 78px);
  line-height: 0.95;
  letter-spacing: -0.045em;
  margin: 0 0 24px;
  transform: skewX(-4deg);
  transform-origin: left center;
  padding-right: 0.2em;
  text-transform: lowercase;
}
.hero-line-1, .hero-line-2 {
  display: block;
}
.hero-line-1 { color: var(--ink-1); }
.hero-line-2 { color: var(--ink-0); }

.hero-sub {
  font-family: 'Inter', sans-serif;
  font-style: normal;
  font-size: 18px;
  line-height: 1.45;
  color: var(--ink-1);
  margin: 0 0 32px;
  max-width: 540px;
}

/* ============================================================
   email forms
   ============================================================ */

.email-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 480px;
}
.email-form input[type="email"] {
  height: var(--tap);
  padding: 0 16px;
  background: var(--gr-900);
  border: 1px solid var(--gr-line);
  color: var(--ink-0);
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  border-radius: var(--r-md);
  outline: none;
  transition: border-color 120ms, box-shadow 120ms;
  min-width: 0;
}
.email-form input[type="email"]:focus {
  border-color: var(--plasma);
  box-shadow: 0 0 0 3px rgba(90, 141, 255, 0.18);
}

.btn-primary {
  height: var(--tap);
  padding: 0 22px;
  border: none;
  border-radius: var(--r-md);
  background: linear-gradient(95deg, var(--plasma) 0%, var(--ion) 55%, var(--magenta) 100%);
  color: white;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 16px;
  letter-spacing: -0.01em;
  text-transform: lowercase;
  transform: skewX(-3deg);
  transform-origin: center;
  transition: transform 120ms, filter 120ms;
  white-space: nowrap;
}
.btn-primary:hover { filter: brightness(1.1); }
.btn-primary:active { transform: skewX(-3deg) scale(0.98); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; filter: grayscale(0.4); }

.btn-secondary {
  height: var(--tap);
  padding: 0 20px;
  border: 1px solid var(--gr-line);
  border-radius: var(--r-md);
  background: var(--gr-800);
  color: var(--ink-0);
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-style: italic;
  text-transform: lowercase;
}
.btn-secondary:hover { border-color: var(--ink-2); }
.btn-secondary:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-ghost {
  background: transparent;
  border: 1px dashed var(--gr-line);
  color: var(--ink-1);
  height: 36px;
  padding: 0 12px;
  border-radius: var(--r-sm);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.btn-ghost:hover { color: var(--ink-0); border-color: var(--ink-3); }

.form-foot {
  margin-top: 12px;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.email-form.success input[type="email"] { border-color: var(--good); }
.email-form .success-msg,
.email-form .error-msg {
  display: none;
  font-size: 14px;
  margin-top: 6px;
}
.email-form .success-msg { color: var(--good); }
.email-form .error-msg { color: var(--bad); }
.email-form.success .success-msg { display: block; }
.email-form.error .error-msg { display: block; }

/* Beehiiv embed container.
   The loader injects an iframe into [data-beehiiv-form]. Give it a max
   width so it doesn't sprawl on desktop, and a transparent background
   so it sits cleanly inside our cards while Beehiiv keeps its own form
   styling. On narrow viewports we break out of the section's gutter so
   Beehiiv's internal form padding doesn't squeeze the email field. */
.beehiiv-host {
  width: 100%;
  max-width: 560px;
  min-height: 56px;
  background: transparent;
}
@media (max-width: 520px) {
  .hero .beehiiv-host,
  .email-tail .beehiiv-host {
    width: calc(100% + 32px);
    max-width: calc(100% + 32px);
    margin-left: -16px;
    margin-right: -16px;
  }
}
.beehiiv-host iframe {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
}
/* Center the embed inside the centered email-tail block */
.email-tail .beehiiv-host { margin-left: 0; }
/* Nudge + season-end cards: full width inside the card */
.nudge-card .beehiiv-host { max-width: 100%; }

/* socials row — under the email-tail email form only */
.socials {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
}

/* hero "keep scrolling" affordance. invites continuation so the hero
   doesn't read as a terminal section. */
.hero-scroll {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 36px;
  padding: 10px 14px;
  border-radius: 999px;
  background: transparent;
  border: 1px solid var(--gr-line);
  color: var(--ink-2);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  transition: color 120ms, border-color 120ms, transform 200ms;
}
.hero-scroll:hover {
  color: var(--ink-0);
  border-color: var(--ink-3);
}
.hero-scroll .arrow {
  display: inline-block;
  font-size: 13px;
  line-height: 1;
  animation: hero-scroll-bounce 1.6s ease-in-out infinite;
}
@keyframes hero-scroll-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(3px); }
}
.socials .social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 8px;
  border: 1px solid var(--gr-line);
  background: var(--gr-800);
  color: var(--ink-2);
  transition: color 120ms, border-color 120ms, background 120ms;
}
.socials .social-icon:hover {
  color: var(--ink-0);
  border-color: var(--ink-3);
  background: var(--gr-700);
}
.socials .social-icon:focus-visible {
  outline: none;
  border-color: var(--magenta);
  box-shadow: 0 0 0 3px rgba(255, 58, 138, 0.25);
}
.socials .social-icon svg {
  width: 18px;
  height: 18px;
  display: block;
}

/* ============================================================
   intro — "what is streaker" + the three game modes.
   sits between the hero and the demo so visitors know what
   this platform is before they play.
   ============================================================ */

.intro {
  padding: 64px 20px;
  border-bottom: 1px solid var(--gr-line);
}
.intro .section-head {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.intro .section-blurb {
  max-width: 720px;
}
.intro-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}
.intro-card {
  position: relative;
  background: var(--gr-900);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-lg);
  padding: 28px 24px 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.intro-card.flagship {
  border-color: rgba(255, 58, 138, 0.55);
  background:
    linear-gradient(180deg, rgba(255, 58, 138, 0.07), transparent 40%),
    var(--gr-900);
  box-shadow: 0 0 0 1px rgba(255, 58, 138, 0.15);
  transition: border-color 180ms, background 180ms, transform 180ms, box-shadow 180ms;
}
/* the flagship card is also a link to #demo. keep body text readable
   on hover by overriding the global a:hover color, and lift the card. */
a.intro-card.flagship,
a.intro-card.flagship:hover,
a.intro-card.flagship:focus {
  color: inherit;
  text-decoration: none;
}
a.intro-card.flagship:hover {
  border-color: var(--magenta);
  background:
    linear-gradient(180deg, rgba(255, 58, 138, 0.13), transparent 55%),
    var(--gr-900);
  transform: translateY(-2px);
  box-shadow:
    0 0 0 1px rgba(255, 58, 138, 0.35),
    0 14px 32px -14px rgba(255, 58, 138, 0.5);
}
a.intro-card.flagship:active {
  transform: translateY(0);
}
a.intro-card.flagship:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 58, 138, 0.35),
    0 0 0 1px var(--magenta);
}
.intro-card .stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.intro-card .mode-tag {
  align-self: flex-start;
  display: inline-block;
  margin-top: 4px;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-1);
  background: var(--gr-700);
  border: 1px solid var(--gr-line);
  border-radius: 999px;
}
.intro-card.flagship .mode-tag {
  color: var(--magenta);
  border-color: rgba(255, 58, 138, 0.45);
  background: rgba(255, 58, 138, 0.10);
}
.intro-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.03em;
  transform: skewX(-5deg);
  transform-origin: left center;
  margin: 0;
  text-transform: lowercase;
  display: inline-block;
  padding-right: 0.18em;
}
.intro-card p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-1);
  line-height: 1.55;
}
.intro-footnote {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}

/* ============================================================
   lineup section — the rest of the streaker platform
   sits between the demo and the faq. parlay is the flagship
   above; this is where the broader brand lives.
   ============================================================ */

.lineup {
  padding: 64px 20px;
  border-bottom: 1px solid var(--gr-line);
  background:
    radial-gradient(ellipse 60% 50% at 50% 0%, rgba(181, 109, 255, 0.06), transparent 60%);
}
.lineup .section-head {
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.lineup .section-blurb {
  max-width: 720px;
}
.lineup-intro {
  margin: 18px 0 0;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.lineup-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  max-width: 1100px;
  margin: 0 auto;
}

.lineup-card {
  position: relative;
  background: var(--gr-900);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-lg);
  padding: 28px 24px 24px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.lineup-card .stripe {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.lineup-card .preset-tag {
  align-self: flex-start;
  display: inline-block;
  margin-top: 4px;
  padding: 4px 10px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-1);
  background: var(--gr-700);
  border: 1px solid var(--gr-line);
  border-radius: 999px;
}
.lineup-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 28px;
  letter-spacing: -0.03em;
  transform: skewX(-5deg);
  transform-origin: left center;
  margin: 0;
  text-transform: lowercase;
  display: inline-block;
  padding-right: 0.18em;
}
.lineup-card p {
  margin: 0;
  font-size: 15px;
  color: var(--ink-1);
  line-height: 1.55;
}
.lineup-card .preset-rules {
  margin-top: 6px;
  padding-top: 16px;
  border-top: 1px solid var(--gr-line);
}
.lineup-card .preset-rules ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lineup-card .preset-rules li {
  position: relative;
  padding-left: 22px;
  font-size: 13.5px;
  color: var(--ink-1);
  line-height: 1.5;
}
.lineup-card .preset-rules li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 12px;
  height: 2px;
  background: linear-gradient(90deg, var(--steel), var(--magenta));
}

.lineup-footnote {
  max-width: 720px;
  margin: 28px auto 0;
  text-align: center;
  color: var(--ink-2);
  font-size: 14px;
  line-height: 1.55;
}
.lineup-footnote a {
  color: var(--magenta);
  border-bottom: 1px solid rgba(255, 58, 138, 0.4);
}
.lineup-footnote a:hover {
  color: var(--whitehot);
  border-bottom-color: var(--whitehot);
}

/* ============================================================
   demo section
   ============================================================ */

.demo-section {
  padding: 64px 20px;
  border-bottom: 1px solid var(--gr-line);
}
.demo-section .section-head { max-width: 1100px; margin-left: auto; margin-right: auto; }

.schedule-banner {
  max-width: 1100px;
  margin: 0 auto 16px;
  padding: 12px 16px;
  background: var(--gr-900);
  border: 1px solid var(--gr-line);
  border-left: 3px solid var(--magenta);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.schedule-banner .mono {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--magenta);
}
.schedule-banner .banner-sub {
  font-size: 14px;
  color: var(--ink-1);
}

.demo-app {
  max-width: 1100px;
  margin: 0 auto;
  background: var(--gr-900);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  min-height: 600px;
}

/* ============================================================
   demo: name entry
   ============================================================ */

.name-entry {
  padding: 64px 24px 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.name-entry .ne-prompt {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(28px, 7vw, 48px);
  letter-spacing: -0.04em;
  line-height: 1;
  margin: 0 0 6px;
  transform: skewX(-4deg);
  transform-origin: center;
  text-transform: lowercase;
  display: inline-block;
  padding-right: 0.2em;
}
.name-entry .ne-sub {
  margin: 0 0 32px;
  color: var(--ink-2);
  font-size: 14px;
  font-family: 'JetBrains Mono', monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.name-entry form {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 380px;
}
.name-entry input {
  height: 52px;
  padding: 0 16px;
  background: var(--gr-800);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-md);
  color: var(--ink-0);
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  text-align: center;
  outline: none;
}
.name-entry input:focus {
  border-color: var(--plasma);
  box-shadow: 0 0 0 3px rgba(90, 141, 255, 0.2);
}

/* ============================================================
   demo: app shell (after name entry)
   ============================================================ */

.demo-shell {
  display: flex;
  flex-direction: column;
  min-height: 600px;
}

.demo-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  background: var(--gr-800);
  border-bottom: 1px solid var(--gr-line);
}
.demo-topbar .week-tag {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.03em;
  transform: skewX(-4deg);
  transform-origin: left center;
  display: inline-block;
  padding-right: 0.18em;
  text-transform: lowercase;
}
.demo-topbar .week-tag .num { color: var(--whitehot); }
.demo-topbar .status-meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-2);
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.demo-topbar .topbar-actions {
  display: inline-flex;
  gap: 6px;
  flex: 0 0 auto;
}

.demo-tabs {
  display: flex;
  border-bottom: 1px solid var(--gr-line);
  background: var(--gr-900);
}
.demo-tab {
  flex: 1;
  min-height: var(--tap);
  background: transparent;
  border: none;
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 12px 8px;
  border-bottom: 2px solid transparent;
  transition: color 120ms, border-color 120ms;
}
.demo-tab.active {
  color: var(--ink-0);
  border-bottom-color: var(--magenta);
}
.demo-tab:not(.active):hover { color: var(--ink-1); }

.demo-body {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* multiplier bars + craft summary */

.craft-row {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 16px;
  background: var(--gr-800);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-md);
}

.multibar {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.multibar-head {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.multibar-head .label { color: var(--ink-2); }
.multibar-head .value { color: var(--ink-0); }
.multibar-track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  height: 10px;
  border-radius: 6px;
  overflow: hidden;
}
.multibar-seg {
  background: var(--gr-700);
  position: relative;
}
.multibar-seg.filled { background: linear-gradient(95deg, var(--plasma), var(--ion)); }
.multibar-seg.current { background: linear-gradient(95deg, var(--ion), var(--magenta)); box-shadow: 0 0 12px rgba(255, 58, 138, 0.5); }
.multibar-seg.unlocked {
  background: linear-gradient(95deg, var(--magenta) 0%, var(--magenta) 50%, var(--gr-700) 50%, var(--gr-700) 100%);
  border: 1px dashed var(--magenta);
  animation: unlockedPulse 1.6s ease-in-out infinite;
}
.multibar-seg.future { background: var(--gr-700); }
@keyframes unlockedPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 58, 138, 0); }
  50% { box-shadow: 0 0 10px rgba(255, 58, 138, 0.45); }
}
@media (prefers-reduced-motion: reduce) {
  .multibar-seg.unlocked { animation: none; }
}
.multibar-cap {
  font-size: 12px;
  color: var(--ink-1);
  line-height: 1.35;
}

.parlay-summary {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 4px;
}
.parlay-summary .metric {
  background: var(--gr-700);
  border-radius: var(--r-sm);
  padding: 10px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid transparent;
}
.parlay-summary .metric.points {
  border-color: var(--gr-600);
  background: linear-gradient(180deg, var(--gr-700), var(--gr-800));
}
.parlay-summary .metric .m-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.parlay-summary .metric .m-value {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  letter-spacing: -0.03em;
  transform: skewX(-4deg);
  margin-top: 4px;
  color: var(--ink-0);
}
.parlay-summary .metric.points .m-value {
  background: linear-gradient(95deg, var(--plasma), var(--magenta), var(--whitehot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.18em;
}

/* matchups */

.matchup-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 8px;
  align-items: stretch;
}
.matchup .center {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0 4px;
  min-width: 20px;
}
.matchup .center .at { color: var(--ink-3); }

.team-pick {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: space-between;
  text-align: left;
  background: var(--gr-800);
  border: 1px solid var(--gr-line);
  color: var(--ink-0);
  border-radius: var(--r-md);
  padding: 10px 12px;
  min-width: 0;
  min-height: 64px;
  transition: border-color 120ms, background 120ms, transform 80ms;
  cursor: pointer;
}
.team-pick:hover:not(:disabled) {
  border-color: var(--ink-3);
  background: var(--gr-700);
}
.team-pick:active:not(:disabled) { transform: scale(0.98); }
.team-pick.selected {
  border-color: var(--magenta);
  background: linear-gradient(135deg, rgba(255, 58, 138, 0.16), rgba(181, 109, 255, 0.08));
  box-shadow: 0 0 0 1px var(--magenta), 0 8px 24px -10px rgba(255, 58, 138, 0.6);
}
.team-pick:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  background: var(--gr-900);
}
.team-pick .row1 {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 6px;
  min-width: 0;
}
.team-pick .row1 .code {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.03em;
  transform: skewX(-5deg);
  transform-origin: left center;
  display: inline-block;
  padding-right: 0.16em;
}
.team-pick .row1 .row1-right {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 8px;
  min-width: 0;
}
.team-pick .row1 .prob {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--ink-1);
}
.team-pick.selected .row1 .prob { color: var(--whitehot); }
.team-pick .row1 .spread {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--gr-line);
  background: var(--gr-700);
  color: var(--ink-2);
  white-space: nowrap;
}
.team-pick .row1 .spread.fav {
  color: var(--whitehot);
  border-color: var(--magenta);
  background: rgba(255, 58, 138, 0.12);
}
.team-pick .row1 .spread.dog {
  color: var(--ink-3);
  border-color: var(--gr-line);
  background: var(--gr-800);
}
.team-pick.selected .row1 .spread.fav {
  background: rgba(255, 58, 138, 0.22);
}
.team-pick .row2 {
  display: flex;
  justify-content: space-between;
  margin-top: 4px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.team-pick.selected .row2 { color: var(--ink-1); }

/* uses pip row: B-pill + 3 dots, between row1 and row2.
   Each pip is open (available) or spent (consumed). A pending modifier
   highlights the slot that would be consumed if this team is added. */
.team-pick .availability {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 5px;
}
.team-pick .base-pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--gr-line);
  background: var(--gr-900);
  color: var(--ink-3);
  line-height: 1.1;
}
.team-pick .base-pill.open {
  color: var(--magenta);
  border-color: rgba(255, 58, 138, 0.45);
}
.team-pick .base-pill.spent {
  color: var(--ink-3);
  background: var(--gr-700);
  border-color: var(--gr-line);
}
.team-pick .base-pill.pending {
  box-shadow: 0 0 0 1px var(--magenta), 0 0 6px rgba(255, 58, 138, 0.45);
}
.team-pick .use-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--gr-900);
  border: 1px solid var(--gr-line);
}
.team-pick .use-dot.open {
  background: var(--gr-700);
  border-color: var(--ink-3);
}
.team-pick .use-dot.spent {
  background: var(--magenta);
  border-color: var(--magenta);
  opacity: 0.55;
}
.team-pick .use-dot.pending {
  box-shadow: 0 0 0 2px rgba(255, 58, 138, 0.45);
}
.team-pick.selected .base-pill.open { box-shadow: 0 0 0 1px var(--magenta); }
.team-pick:disabled .base-pill.pending,
.team-pick:disabled .use-dot.pending { box-shadow: none; }

/* parlay legs (chips above submit button) */

.legs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  /* Reserve the row's vertical space even when empty so the matchup
     grid below doesn't shift when the first leg lands. Border-box
     accounting matches the empty placeholder exactly via a
     transparent border + identical padding. Min-height tuned to fit
     a populated leg-chip without growing the row. */
  min-height: 50px;
  padding: 6px 12px;
  border: 1px solid transparent;
  border-radius: var(--r-md);
}
.legs-row.empty {
  border-style: dashed;
  border-color: var(--gr-line);
  background: rgba(255, 58, 138, 0.04);
  justify-content: center;
}
.legs-row .legs-empty-hint {
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.leg-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--gr-700);
  border: 1px solid var(--gr-600);
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 600;
  letter-spacing: -0.02em;
  font-size: 14px;
}
.leg-chip .leg-tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  font-style: normal;
}
.leg-chip.base { border-color: var(--magenta); }
.leg-chip.base .leg-tag { color: var(--magenta); }
.leg-chip .remove {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--gr-600);
  border: none;
  color: var(--ink-1);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.leg-chip .remove:hover { background: var(--bad); color: white; }

.submit-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
/* Ghost spacer for the clear-picks button when no picks are drafted.
   Keeps the submit row height constant so the matchup grid below
   doesn't shift when the first leg is added. */
.submit-row .btn-ghost.is-spacer {
  visibility: hidden;
  pointer-events: none;
}

/* life on the line — opt-in card. only renders when the player has
   1 life and a 3+ leg parlay drafted. armed state lights it magenta. */
.lol-toggle {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  margin-top: 4px;
  border-radius: var(--r-md);
  border: 1px solid var(--gr-line);
  background: var(--gr-800);
  cursor: pointer;
  transition: border-color 140ms, background 140ms, box-shadow 140ms;
}
.lol-toggle:hover {
  border-color: var(--ink-3);
  background: var(--gr-700);
}
.lol-toggle input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--magenta);
  cursor: pointer;
}
.lol-toggle input[type="checkbox"]:disabled { cursor: not-allowed; opacity: 0.4; }
.lol-toggle.pending-legs {
  cursor: default;
  border-style: dashed;
  background: var(--gr-900);
}
.lol-toggle.pending-legs:hover {
  border-color: var(--gr-line);
  background: var(--gr-900);
}
.lol-toggle.pending-legs .lol-title { color: var(--ink-2); }
.lol-toggle.pending-legs .lol-body { color: var(--ink-3); }
.lol-toggle .lol-copy {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.lol-toggle .lol-title {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.02em;
  text-transform: lowercase;
  color: var(--ink-0);
}
.lol-toggle .lol-body {
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  line-height: 1.45;
}
.lol-toggle.armed {
  border-color: var(--magenta);
  background:
    linear-gradient(135deg, rgba(255, 58, 138, 0.18), rgba(181, 109, 255, 0.08));
  box-shadow: 0 0 0 1px rgba(255, 58, 138, 0.4), 0 12px 28px -14px rgba(255, 58, 138, 0.55);
}
.lol-toggle.armed .lol-title { color: var(--whitehot); }
.lol-toggle.armed .lol-body { color: var(--ink-1); }

/* submit button with LOL armed: amplified magenta gradient + caps. */
.btn-primary.lol {
  background: linear-gradient(95deg, var(--magenta), var(--ion) 60%, var(--magenta));
  text-transform: uppercase;
  letter-spacing: 0.12em;
  box-shadow: 0 0 0 1px rgba(255, 58, 138, 0.5), 0 16px 32px -16px rgba(255, 58, 138, 0.7);
}
.btn-primary.lol:hover { filter: brightness(1.08); }

/* LOL outcome badges on the results card. hit = magenta pill,
   miss = red ribbon. Always stack above the points/verdict on their
   own line; chip-shaped via fit-content + auto margin. */
.lol-badge {
  display: block;
  width: fit-content;
  padding: 4px 10px;
  margin: 0 auto 10px;
  border-radius: 999px;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lol-badge.hit {
  color: var(--whitehot);
  background: linear-gradient(95deg, rgba(255, 58, 138, 0.5), rgba(181, 109, 255, 0.4));
  border: 1px solid var(--magenta);
}
.lol-badge.miss {
  color: var(--whitehot);
  background: rgba(255, 58, 138, 0.18);
  border: 1px solid var(--bad);
}

/* leaderboard */

.leaderboard {
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: var(--gr-800);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-md);
  padding: 8px;
}
.leader-row {
  display: grid;
  grid-template-columns: 28px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  background: transparent;
  border: 1px solid transparent;
}
.leader-row.you {
  background: rgba(255, 58, 138, 0.08);
  border-color: rgba(255, 58, 138, 0.3);
}
.leader-row .rank {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
}
.leader-row .name-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.leader-row .name {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 15px;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.leader-row .name .you-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--magenta);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}
.leader-row .meta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.leader-row .lives {
  display: inline-flex;
  gap: 2px;
  align-items: center;
}
.leader-row .life-pip {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 6px rgba(61, 220, 132, 0.5);
}
.leader-row .life-pip.dead { background: var(--gr-600); box-shadow: none; }
.leader-row.out .name { color: var(--ink-3); text-decoration: line-through; }
.leader-row .points {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.03em;
  transform: skewX(-4deg);
  padding-right: 0.16em;
}
.leader-row.heat-1 .points { color: var(--plasma); }
.leader-row.heat-2 .points { color: var(--ion); }
.leader-row.heat-3 .points { color: var(--magenta); text-shadow: 0 0 14px rgba(255, 58, 138, 0.4); }
.leader-row.heat-4 .points {
  background: linear-gradient(95deg, var(--ion), var(--magenta) 50%, var(--whitehot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* results screen */

.results-stack {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.results-head {
  text-align: center;
  padding: 24px 16px 8px;
}
.results-head .week-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 6px;
}
.results-head .verdict {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 7vw, 48px);
  letter-spacing: -0.04em;
  transform: skewX(-4deg);
  display: inline-block;
  padding-right: 0.2em;
  text-transform: lowercase;
  margin: 0;
}
.results-head .verdict.hit {
  background: linear-gradient(95deg, var(--plasma), var(--magenta), var(--whitehot));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.results-head .verdict.miss { color: var(--ink-2); }
.results-head .verdict.eliminated { color: var(--bad); }
.results-head .detail {
  margin-top: 8px;
  font-size: 15px;
  color: var(--ink-1);
}

.score-math {
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink-1);
  background: var(--gr-800);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-md);
  padding: 12px 16px;
  margin: 0 auto;
  max-width: 480px;
}
.score-math .equals {
  color: var(--whitehot);
  font-weight: 700;
}

.game-results {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.game-result {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--gr-800);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-md);
  font-size: 14px;
}
.game-result.you-picked { border-color: var(--magenta); }
.game-result .team {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
}
.game-result .team .code { font-style: italic; font-size: 16px; }
.game-result .team .score {
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  color: var(--ink-1);
}
.game-result .team.away { justify-content: flex-end; text-align: right; }
.game-result .team.winner { color: var(--ink-0); }
.game-result .team.loser { color: var(--ink-3); }
.game-result .team.you-team { color: var(--magenta); }
.game-result .vs {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.bot-picks {
  background: var(--gr-800);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-md);
  padding: 12px 14px;
}
.bot-picks-head {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 10px;
}
.bot-pick-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  padding: 6px 0;
  font-size: 13px;
  border-top: 1px solid var(--gr-line);
}
.bot-pick-row:first-of-type { border-top: none; }
.bot-pick-row .b-name { font-family: 'Space Grotesk', sans-serif; font-weight: 500; }
.bot-pick-row .b-teams { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
.bot-pick-row .b-team {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  background: var(--gr-700);
  color: var(--ink-1);
  letter-spacing: 0.04em;
}
.bot-pick-row .b-team.win { background: rgba(61, 220, 132, 0.15); color: var(--good); }
.bot-pick-row .b-team.loss { background: rgba(255, 94, 122, 0.15); color: var(--bad); text-decoration: line-through; }
.bot-pick-row .b-pts {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-1);
  white-space: nowrap;
}
.bot-pick-row .b-pts.hit { color: var(--whitehot); }

/* player's own pick card — emphasized */
.bot-picks.player-picks {
  border-color: var(--magenta);
  background: linear-gradient(180deg, rgba(255, 58, 138, 0.06), var(--gr-800));
}
.bot-picks.player-picks .bot-picks-head { color: var(--magenta); }
.bot-pick-row.you .b-name { display: inline-flex; align-items: center; gap: 8px; }
.bot-pick-row.you .b-name .you-badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: var(--magenta);
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-weight: 500;
}

/* schedule explorer */

.schedule-view { display: flex; flex-direction: column; gap: 16px; }
.week-pills {
  display: flex;
  overflow-x: auto;
  gap: 6px;
  padding: 4px 2px 12px;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.week-pill {
  flex: 0 0 auto;
  height: 36px;
  min-width: 60px;
  border-radius: 18px;
  border: 1px solid var(--gr-line);
  background: var(--gr-800);
  color: var(--ink-1);
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0 12px;
}
.week-pill.now { border-color: var(--magenta); color: var(--ink-0); background: linear-gradient(135deg, rgba(255, 58, 138, 0.15), rgba(181, 109, 255, 0.05)); }
.week-pill.active { background: var(--ink-0); color: var(--gr-950); border-color: var(--ink-0); }

.schedule-week {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.schedule-game {
  padding: 12px 14px;
  background: var(--gr-800);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-md);
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.schedule-game .schedule-matchup {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 12px;
  align-items: center;
}
.schedule-game .team-side {
  display: flex;
  align-items: center;
  min-width: 0;
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-style: italic;
}
.schedule-game .team-side .team-name {
  font-size: 15px;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.schedule-game .team-side.away {
  justify-content: flex-end;
  text-align: right;
}
.schedule-game .game-mid {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex: 0 0 auto;
}
.schedule-game .game-mid .at { font-size: 13px; }
.schedule-game.byes {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: block;
  text-align: center;
  padding: 12px;
}
@media (max-width: 520px) {
  .schedule-game .team-side .team-name { font-size: 14px; }
}

/* email nudge */

.nudge-card {
  background: linear-gradient(135deg, var(--gr-900), var(--gr-800));
  border: 1px solid var(--magenta);
  border-radius: var(--r-lg);
  padding: 20px;
  position: relative;
  margin: 20px 0;
}
.nudge-card h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  margin: 0 0 8px;
  transform: skewX(-4deg);
  display: inline-block;
  padding-right: 0.18em;
  text-transform: lowercase;
  letter-spacing: -0.03em;
}
.nudge-card p {
  margin: 0 0 16px;
  color: var(--ink-1);
  font-size: 15px;
}
.nudge-card .nudge-form { display: flex; flex-direction: column; gap: 8px; }
.nudge-card .dismiss {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--gr-700);
  border: none;
  color: var(--ink-2);
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.nudge-card .dismiss:hover { color: var(--ink-0); background: var(--gr-600); }

/* season-end card */

.season-end {
  text-align: center;
  padding: 32px 24px;
}
.season-end .final-headline {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: clamp(32px, 8vw, 56px);
  margin: 0 0 8px;
  transform: skewX(-4deg);
  display: inline-block;
  padding-right: 0.2em;
  text-transform: lowercase;
}
.season-end .final-stats {
  margin: 16px 0 24px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.season-end .restart-row {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin-top: 16px;
  flex-wrap: wrap;
}

/* notice toast */

.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--gr-700);
  border: 1px solid var(--gr-line);
  color: var(--ink-0);
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 10px 30px -10px rgba(0,0,0,0.6);
  max-width: calc(100vw - 32px);
  text-align: center;
}

/* ============================================================
   FAQ + tail email
   ============================================================ */

.faq {
  padding: 64px 20px;
  border-bottom: 1px solid var(--gr-line);
}
.faq-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 800px;
  margin: 0 auto;
}
.faq details {
  background: var(--gr-900);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-md);
  padding: 14px 18px;
  cursor: pointer;
}
.faq details[open] { border-color: var(--gr-600); }
.faq summary {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-style: italic;
  font-size: 17px;
  letter-spacing: -0.02em;
  list-style: none;
  outline: none;
  text-transform: lowercase;
  position: relative;
  padding-right: 28px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 0;
  color: var(--ink-2);
  font-family: 'JetBrains Mono', monospace;
  font-size: 18px;
  transition: transform 120ms;
}
.faq details[open] summary::after { content: "−"; color: var(--magenta); }
.faq p {
  margin: 12px 0 0;
  color: var(--ink-1);
  font-size: 15px;
  line-height: 1.6;
}

.email-tail {
  padding: 64px 20px;
  text-align: left;
  max-width: 800px;
  margin: 0 auto;
}

/* ============================================================
   footer + modal
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--gr-line);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: 13px;
  color: var(--ink-2);
}
.footer-left { display: flex; flex-direction: column; gap: 4px; }
.footer-right { display: flex; gap: 16px; flex-wrap: wrap; }
.footer-right a, .footer-right .link-button { color: var(--ink-1); }
.footer-right a:hover { color: var(--ink-0); }
.link-button {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: var(--ink-1);
}
.link-button:hover { color: var(--ink-0); }
.small { font-size: 13px; }

/* modal */

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0;
}
.modal[hidden] { display: none; }
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
}
.modal-panel {
  position: relative;
  background: var(--gr-900);
  border: 1px solid var(--gr-line);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.modal-head {
  position: sticky;
  top: 0;
  background: var(--gr-900);
  border-bottom: 1px solid var(--gr-line);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  z-index: 1;
}
.modal-head h2 {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 24px;
  margin: 0;
  transform: skewX(-4deg);
  display: inline-block;
  padding-right: 0.18em;
  text-transform: lowercase;
  letter-spacing: -0.03em;
}
.icon-button {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gr-700);
  border: none;
  color: var(--ink-0);
  font-size: 22px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.icon-button:hover { background: var(--gr-600); }
.modal-body {
  padding: 20px 24px 40px;
}
.modal-body h3 {
  font-family: 'Space Grotesk', sans-serif;
  font-style: italic;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  margin: 24px 0 8px;
  text-transform: lowercase;
  color: var(--magenta);
}
.modal-body h3:first-child { margin-top: 0; }
.modal-body p { color: var(--ink-1); margin: 0 0 10px; }
.modal-body ul { color: var(--ink-1); margin: 0 0 12px; padding-left: 20px; }
.modal-body li { margin-bottom: 4px; }
.modal-body strong { color: var(--ink-0); }
.modal-body em { color: var(--whitehot); font-style: normal; }

/* ============================================================
   desktop breakpoints
   ============================================================ */

@media (min-width: 720px) {
  .site-nav { display: flex; }
  .hero { padding: 80px 32px 64px; }
  .intro { padding: 96px 32px; }
  .intro-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
  .demo-section { padding: 96px 32px; }
  .lineup { padding: 96px 32px; }
  .lineup-grid { grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
  .faq { padding: 96px 32px; }
  .email-form { flex-direction: row; align-items: flex-start; }
  .email-form input[type="email"] { flex: 1; }
  .name-entry form { flex-direction: row; }
  .name-entry form .btn-primary { flex: 0 0 auto; }
  .demo-body { padding: 28px 32px; }
  .matchup .center { min-width: 28px; }
  .modal {
    align-items: center;
    padding: 32px;
  }
  .modal-panel {
    max-width: 720px;
    border-radius: var(--r-lg);
    max-height: 80vh;
  }
  .site-footer {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

@media (min-width: 980px) {
  .hero-headline { font-size: 84px; }
  .demo-body {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    padding: 32px;
  }
  .demo-body.full { grid-template-columns: 1fr; }
  .demo-body .col-main { min-width: 0; }
  .demo-body .col-side {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-self: start;
    position: sticky;
    top: 80px;
  }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}