/* ============================================================
   SMALL BALL VENTURES — Shared Design System
   Palette: Oakland A's vintage (kelly green + athletics gold)
   ============================================================ */

:root {
  --green-900: #001E16;
  --green-800: #002B20;
  --green-700: #023B31;   /* Matches the logo PNG's bg exactly so it blends seamlessly */
  --green-600: #00513F;
  --green-500: #0B6E4F;
  --green-300: #4FA68A;

  --gold-500: #EFB21E;    /* Athletics gold */
  --gold-600: #D89A0A;
  --gold-300: #F5D26C;

  --cream:    #F5E6C8;    /* vintage paper / scoreboard panel */
  --cream-2:  #EADBB0;
  --bone:     #FBF4DF;

  --ink:      #0E1410;
  --white:    #FFFFFF;
  --rust:     #B23A1F;    /* baseball stitch red, sparingly */

  --shadow-hard: 4px 4px 0 var(--green-900);
  --shadow-gold: 4px 4px 0 var(--gold-600);

  --maxw: 1200px;

  --font-pixel:  'Press Start 2P', 'VT323', monospace;
  --font-mono:   'VT323', 'IBM Plex Mono', ui-monospace, monospace;
  --font-sans:   'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif:  'DM Serif Display', Georgia, 'Times New Roman', serif;
}

/* ----- Reset ----- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; }

html {
  scroll-behavior: smooth;
  background: var(--green-700);
}

body {
  font-family: var(--font-sans);
  color: var(--ink);
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(239,178,30,.08), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(239,178,30,.06), transparent 60%),
    var(--cream);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
}

/* ----- Typography helpers ----- */
.pixel { font-family: var(--font-pixel); letter-spacing: .02em; }
.mono  { font-family: var(--font-mono); }
.serif { font-family: var(--font-serif); }

h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 400; line-height: 1.05; margin: 0 0 .5em; }
h1 { font-size: clamp(2.4rem, 5vw, 4.5rem); }
h2 { font-size: clamp(1.8rem, 3.5vw, 3rem); }
h3 { font-size: clamp(1.3rem, 2.2vw, 1.7rem); }

p { margin: 0 0 1em; }

.eyebrow {
  font-family: var(--font-pixel);
  font-size: .65rem;
  letter-spacing: .25em;
  text-transform: uppercase;
  color: var(--gold-600);
  margin-bottom: 1rem;
  display: inline-block;
}

.eyebrow.on-dark { color: var(--gold-500); }
.eyebrow.eyebrow-on-gold { color: var(--green-900); }

/* ----- Layout ----- */
.container {
  width: 100%;
  max-width: var(--maxw);
  padding: 0 24px;
  margin: 0 auto;
}
.section { padding: clamp(56px, 9vw, 120px) 0; }
.section.dark { background: var(--green-700); color: var(--cream); }
.section.darker { background: var(--green-800); color: var(--cream); }
.section.gold { background: var(--gold-500); color: var(--green-900); }
.section.cream { background: var(--cream); }
.section.section-scoreboard {
  background: #0A0F0C;
  color: var(--cream);
  border-top: 4px solid var(--gold-500);
}

.grid { display: grid; gap: 32px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 900px) {
  .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; }
}

/* ============================================================
   NAVBAR
   ============================================================ */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--green-700);
  border-bottom: 3px solid var(--gold-500);
  color: var(--cream);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 24px;
  max-width: var(--maxw);
  margin: 0 auto;
  gap: 18px;
}
.nav-logo {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  flex: 0 0 auto;
}
.nav-logo img {
  height: 60px;
  width: auto;
  display: block;
  filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
@media (max-width: 600px) {
  .nav-logo img { height: 48px; }
}
.nav-links { display: flex; gap: 6px; align-items: center; }
.nav-links a {
  font-family: var(--font-pixel);
  font-size: .6rem;
  letter-spacing: .15em;
  padding: 10px 14px;
  border: 2px solid transparent;
  text-transform: uppercase;
  color: var(--cream);
  transition: all .15s ease;
}
.nav-links a:hover { color: var(--gold-500); border-color: var(--gold-500); }
.nav-links a.active { color: var(--green-900); background: var(--gold-500); border-color: var(--gold-500); }

.nav-cta {
  font-family: var(--font-pixel);
  font-size: .6rem;
  letter-spacing: .15em;
  background: var(--gold-500);
  color: var(--green-900);
  padding: 10px 14px;
  border: 2px solid var(--gold-500);
  box-shadow: 3px 3px 0 var(--green-900);
  transition: transform .1s ease;
}
.nav-cta:hover { transform: translate(-1px,-1px); box-shadow: 4px 4px 0 var(--green-900); color: var(--green-900); }

.nav-burger { display: none; }

/* The Apply link in .nav-links is mobile-only — it shows up inside the
   open burger menu so phone users have a direct dropdown link to apply.
   On desktop the top-right .nav-cta button covers that role, so we
   hide this duplicate. */
.nav-link-mobile-only { display: none; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px;
    border: 2px solid var(--gold-500); color: var(--gold-500);
    font-family: var(--font-pixel); font-size: .8rem;
  }
  .nav.open .nav-links {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    position: absolute;
    top: 100%; left: 0; right: 0;
    background: var(--green-800);
    padding: 12px 16px;
    border-bottom: 3px solid var(--gold-500);
  }
  .nav.open .nav-links a { padding: 14px; }
  /* In the open mobile dropdown, the Apply link gets a gold pill so
     it reads as the primary action of the menu */
  .nav.open .nav-link-mobile-only {
    display: block;
    background: var(--gold-500);
    color: var(--green-900) !important;
    margin-top: 6px;
    border: 2px solid var(--gold-500);
  }
  /* Hide the top-right .nav-cta on mobile — the dropdown link replaces it */
  .nav-cta { display: none; }
}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: .7rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  padding: 16px 24px;
  border: 3px solid var(--green-900);
  background: var(--gold-500);
  color: var(--green-900);
  box-shadow: 5px 5px 0 var(--green-900);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-2px,-2px); box-shadow: 7px 7px 0 var(--green-900); }
.btn:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 var(--green-900); }

.btn.ghost {
  background: transparent;
  color: var(--cream);
  border-color: var(--gold-500);
  box-shadow: 5px 5px 0 var(--gold-500);
}
.btn.ghost:hover { box-shadow: 7px 7px 0 var(--gold-500); color: var(--white); }

.btn.dark {
  background: var(--green-700);
  color: var(--gold-500);
  border-color: var(--gold-500);
  box-shadow: 5px 5px 0 var(--gold-500);
}

/* ============================================================
   FOOTER (minimal, single thin band)
   ============================================================ */
.footer {
  background: var(--green-900);
  color: var(--cream);
  padding: 22px 0;
  border-top: 2px solid var(--gold-500);
  font-family: var(--font-mono);
  font-size: .9rem;
}
.footer a { color: var(--cream); transition: color .12s ease; }
.footer a:hover { color: var(--gold-500); }

.footer-mini-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.footer-mini-logo {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
}
.footer-mini-logo img {
  height: 34px;
  width: auto;
  image-rendering: pixelated;
  display: block;
}

.footer-mini-links {
  display: flex;
  gap: 22px;
  flex-wrap: wrap;
  justify-content: center;
  flex: 1 1 auto;
}
.footer-mini-links a {
  font-family: var(--font-pixel);
  font-size: .55rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  line-height: 1;
}

.footer-mini-copy {
  color: var(--cream-2);
  letter-spacing: .04em;
  font-size: .85rem;
  flex: 0 0 auto;
}

/* Stack on tablet/phone instead of wrapping awkwardly mid-row */
@media (max-width: 820px) {
  .footer-mini-row {
    flex-direction: column;
    gap: 14px;
    text-align: center;
  }
  .footer-mini-links { gap: 18px; }
}

/* ============================================================
   SCOREBOARD COMPONENT
   ============================================================ */
.scoreboard {
  background: var(--green-900);
  border: 4px solid var(--gold-500);
  border-radius: 6px;
  padding: 24px;
  color: var(--gold-500);
  font-family: var(--font-mono);
  box-shadow: 8px 8px 0 var(--green-900);
  position: relative;
}
.scoreboard::before {
  content: "";
  position: absolute; inset: 8px;
  border: 1px dashed rgba(239,178,30,.35);
  pointer-events: none;
  border-radius: 4px;
}
.scoreboard h3 {
  font-family: var(--font-pixel);
  font-size: .8rem;
  letter-spacing: .15em;
  color: var(--gold-500);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.score-row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(239,178,30,.25);
}
.score-row:last-child { border-bottom: none; }
.score-label { font-size: 1.25rem; }
.score-val {
  font-family: var(--font-pixel);
  font-size: 1rem;
  color: var(--white);
}

/* Stat tiles */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }
.stat {
  background: var(--green-900);
  color: var(--cream);
  padding: 22px 18px;
  border: 2px solid var(--gold-500);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.stat::after {
  content: "";
  position: absolute; right: -20px; top: -20px;
  width: 80px; height: 80px;
  background: radial-gradient(circle at center, var(--gold-500) 0 8px, transparent 9px);
  opacity: .12;
}
.stat .num {
  font-family: var(--font-pixel);
  font-size: 1.6rem;
  color: var(--gold-500);
  display: block;
  margin-bottom: 6px;
}
.stat .label {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--cream);
  letter-spacing: .04em;
}

/* ============================================================
   HERO (Home)
   ============================================================ */
.hero {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px),
    radial-gradient(700px 360px at 30% 30%, rgba(239,178,30,.16), transparent 60%),
    var(--green-700);
  color: var(--cream);
  padding: clamp(64px, 10vw, 140px) 0 clamp(80px, 12vw, 160px);
  border-bottom: 6px solid var(--gold-500);
  position: relative;
  overflow: hidden;
}
.hero::after {
  /* baseball diamond watermark */
  content: "";
  position: absolute;
  right: -120px; bottom: -120px;
  width: 540px; height: 540px;
  background:
    conic-gradient(from 45deg, transparent 0 25%, rgba(239,178,30,.07) 25% 50%, transparent 50% 100%);
  transform: rotate(45deg);
  pointer-events: none;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 56px;
  align-items: center;
  position: relative;
  z-index: 1;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* Solo (single-column) hero variant — used on mobile-first home page */
.hero.hero-solo .container {
  position: relative;
  z-index: 1;
  max-width: 820px;
  text-align: left;
}
.hero.hero-solo h1 { max-width: 14ch; }
.hero.hero-solo p.lead { max-width: 60ch; }
@media (max-width: 600px) {
  .hero.hero-solo .hero-cta-row { flex-direction: column; align-items: stretch; }
  .hero.hero-solo .hero-cta-row .btn { text-align: center; }
}

/* ============================================================
   HERO STADIUM — centered, dynamic, animated
   ============================================================ */

.hero-stadium {
  position: relative;
  overflow: hidden;
  background: var(--green-700);
  color: var(--cream);
  padding: clamp(80px, 12vw, 150px) 20px clamp(72px, 10vw, 130px);
  text-align: center;
  border-bottom: 0;
  isolation: isolate;
}
/* Soft corner vignette for depth without a heavy gradient */
.hero-stadium::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(1400px 900px at 50% 50%, transparent 55%, rgba(0,0,0,.22) 100%);
  pointer-events: none;
  z-index: 0;
}

.hero-stadium-inner {
  position: relative;
  z-index: 5;
  max-width: 900px;
  margin: 0 auto;
}

/* ----- Stadium light beams ----- */
.stadium-lights {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}
.beam {
  position: absolute;
  top: -10%;
  width: 280px;
  height: 140%;
  background: linear-gradient(180deg, rgba(239,178,30,.10) 0%, rgba(239,178,30,0) 70%);
  filter: blur(28px);
  transform-origin: top center;
  mix-blend-mode: screen;
  opacity: .7;
}
.beam.b1 { left: 10%;  transform: rotate(-10deg); }
.beam.b2 { left: 45%;  transform: rotate(  2deg); width: 220px; opacity: .55; }
.beam.b3 { right: 8%;  transform: rotate( 10deg); }

/* ----- Diamond background ----- */
.diamond-bg {
  position: absolute;
  left: 50%; bottom: -180px;
  transform: translateX(-50%);
  width: 900px; height: 900px;
  pointer-events: none;
  z-index: 1;
  opacity: .4;
}
.diamond-bg .diamond {
  position: absolute; inset: 0;
  background:
    conic-gradient(from 45deg,
      transparent 0 25%,
      rgba(239,178,30,.08) 25% 50%,
      transparent 50% 75%,
      rgba(239,178,30,.05) 75% 100%);
  border: 2px dashed rgba(239,178,30,.18);
  transform: rotate(45deg);
  border-radius: 12px;
}
.diamond-bg .base {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--gold-500);
  box-shadow: 0 0 14px rgba(239,178,30,.4);
  border-radius: 3px;
  opacity: .55;
}
.diamond-bg .b-home    { left: 50%; bottom: 0;    transform: translateX(-50%) rotate(45deg); }
.diamond-bg .b-first   { right: 0;  top: 50%;     transform: translateY(-50%) rotate(45deg); }
.diamond-bg .b-second  { left: 50%; top: 0;       transform: translateX(-50%) rotate(45deg); }
.diamond-bg .b-third   { left: 0;   top: 50%;     transform: translateY(-50%) rotate(45deg); }

/* ----- Floating baseballs ----- */
.ambient-balls {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.ball {
  position: absolute;
  width: 12px; height: 12px;
  background: var(--cream);
  border-radius: 50%;
  box-shadow:
    inset -2px -2px 0 rgba(0,0,0,.18),
    0 0 8px rgba(255,255,255,.5);
}
.ball::before, .ball::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  border: 1px solid var(--rust);
  border-color: var(--rust) transparent;
  transform: rotate(30deg);
}
.ball::after { transform: rotate(-30deg); }
.ball.b-a { left: 8%;  top: 22%; animation: drift 32s linear infinite; opacity: .35; }
.ball.b-b { left: 86%; top: 18%; animation: drift 38s -8s linear infinite reverse; opacity: .35; }
.ball.b-c { left: 14%; top: 72%; animation: drift 42s -16s linear infinite; opacity: .3; }
.ball.b-d { left: 78%; top: 78%; animation: drift 36s -4s linear infinite reverse; opacity: .3; }
.ball.b-e { display: none; }
@keyframes drift {
  0%   { transform: translate(0, 0)        rotate(0deg);   }
  50%  { transform: translate(-10px, 12px) rotate(180deg); }
  100% { transform: translate(0, 0)        rotate(360deg); }
}

/* ----- Scanlines (very subtle) ----- */
.scanlines {
  position: absolute; inset: 0;
  pointer-events: none;
  z-index: 3;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 5px);
  mix-blend-mode: multiply;
  opacity: .25;
}

/* ----- Location badge (calm, friendly) ----- */
.on-air {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-pixel);
  font-size: .55rem;
  letter-spacing: .25em;
  color: var(--gold-500);
  background: rgba(0,30,22,.55);
  padding: 8px 14px;
  border: 1px solid rgba(239,178,30,.5);
  border-radius: 999px;
  margin-bottom: 32px;
  text-transform: uppercase;
}
.on-air .dot {
  width: 7px; height: 7px;
  background: var(--gold-500);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(239,178,30,.5);
  animation: dot-blink 3.2s ease-in-out infinite;
}
@keyframes dot-blink {
  0%,100% { opacity: 1; }
  50%     { opacity: .55; }
}

/* ----- Headline — 8-bit pixel face matching the logo ----- */
.hero-h1 {
  font-family: 'Press Start 2P', 'Jersey 10', 'VT323', monospace;
  font-weight: 400;
  font-size: clamp(1.4rem, 3.6vw, 2.8rem);
  line-height: 1.45;
  margin: 0 0 30px;
  color: #FFFFFF;
  letter-spacing: .02em;
  text-transform: uppercase;
  /* Crisp pixel rendering */
  -webkit-font-smoothing: none;
  font-smooth: never;
  text-rendering: geometricPrecision;
}
.hero-h1 .line-1,
.hero-h1 .line-2 {
  display: block;
  color: #FFFFFF;
  text-shadow: 0 3px 0 rgba(0,0,0,.35);
}
.hero-h1 .gold {
  color: var(--gold-500);
  animation: gold-blink 1.6s ease-in-out infinite;
  text-shadow:
    0 3px 0 rgba(0,0,0,.4),
    0 0 14px rgba(239,178,30,.5),
    0 0 32px rgba(239,178,30,.22);
}
@keyframes gold-blink {
  0%, 45%, 100% { opacity: 1; }
  50%           { opacity: .25; }
  55%, 90%      { opacity: 1; }
  92%           { opacity: .55; }
  94%           { opacity: 1; }
}
.hero-h1 .line-1,
.hero-h1 .line-2 { display: block; }

/* Underline kept gold but solid (the whole word is dotted, this is the
   bar beneath it). Tone it down a little so the dots stay the star. */
.hero-h1 .underline-gold {
  position: relative;
  display: inline-block;
  color: #FFFFFF;
}
.hero-h1 .underline-gold::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -.18em;
  height: 6px;
  background: var(--gold-500);
  box-shadow: 0 0 8px rgba(239,178,30,.4);
  animation: underline-grow 1.6s ease-out .3s both;
  transform-origin: left;
  /* keep edge crisp/pixel-like */
  image-rendering: pixelated;
}
@keyframes underline-grow {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
/* (legacy class kept harmless in case markup still references it) */
.hero-h1 .flicker { animation: gold-blink 1.6s ease-in-out infinite; }

/* ----- Lead (subtle) ----- */
.hero-lead {
  font-family: var(--font-sans);
  font-weight: 300;
  font-size: clamp(.92rem, 1.25vw, 1.05rem);
  color: rgba(245,230,200,.72);
  max-width: 56ch;
  margin: 0 auto 32px;
  line-height: 1.6;
  letter-spacing: .005em;
}
.hero-lead strong {
  color: rgba(245,230,200,.95);
  font-weight: 500;
}

/* ----- CTA row ----- */
.hero-stadium .hero-cta-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 44px;
}
@media (max-width: 540px) {
  .hero-stadium .hero-cta-row { flex-direction: column; align-items: stretch; padding: 0 12px; }
  .hero-stadium .hero-cta-row .btn { text-align: center; }
}

/* ----- Mini scoreboard strip ----- */
.hero-mini-board {
  display: inline-grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0;
  background: var(--green-900);
  border: 3px solid var(--gold-500);
  box-shadow:
    0 0 0 4px var(--green-900),
    8px 8px 0 rgba(0,0,0,.35);
  margin-top: 12px;
  font-family: var(--font-pixel);
  overflow: hidden;
  min-width: min(640px, 100%);
}
.hero-mini-board.hero-mini-board--3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  min-width: min(560px, 100%);
}
.mb-cell {
  padding: 18px 16px;
  border-right: 2px dashed rgba(239,178,30,.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 88px;
}
.mb-cell:last-child { border-right: none; }
.mb-k {
  font-size: .55rem;
  letter-spacing: .22em;
  color: var(--cream);
  opacity: .85;
  text-align: center;
  line-height: 1.2;
  white-space: nowrap;
}
.mb-v {
  font-size: clamp(1rem, 2.4vw, 1.4rem);
  color: var(--gold-500);
  text-shadow: 0 0 10px rgba(239,178,30,.5);
  letter-spacing: .03em;
  line-height: 1;
}
@media (max-width: 600px) {
  .hero-mini-board,
  .hero-mini-board.hero-mini-board--3 {
    grid-template-columns: 1fr;
    min-width: 280px;
    width: 100%;
  }
  .mb-cell {
    border-right: none;
    border-bottom: 2px dashed rgba(239,178,30,.3);
    padding: 14px 12px;
    min-height: 64px;
  }
  .mb-cell:last-child { border-bottom: none; }
}

/* ============================================================
   PORTFOLIO SCOREBOARD ROWS (Draft Board page)
   ============================================================ */

.sb-section-label {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 2px solid var(--gold-500);
}
.sb-section-label > span:first-child {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 1.3rem;
  letter-spacing: .12em;
  color: var(--gold-500);
  text-transform: uppercase;
}
.sb-section-meta {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--cream);
  opacity: .65;
  letter-spacing: .04em;
}
.sb-section-label--gap { margin-top: 56px; }

.sb-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 4px;
}

.sb-row {
  display: grid;
  grid-template-columns: 88px 1fr 260px 110px;
  align-items: stretch;
  background: #0E1A14;
  border: 1px solid #1F2D24;
  border-left: 4px solid var(--gold-500);
  overflow: hidden;
  transition: transform .12s ease, border-color .12s ease;
}
.sb-row:hover { transform: translateX(2px); border-left-color: var(--white); }

.sb-tag {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  letter-spacing: .12em;
  color: var(--gold-500);
  background: #061410;
  border-right: 1px solid #1F2D24;
}

.sb-team {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 18px;
  min-width: 0;
}
.sb-tile {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 1.15rem;
  letter-spacing: .04em;
  color: #fff;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.12), 0 1px 0 rgba(0,0,0,.4);
}
.sb-info { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sb-info h3 {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: clamp(1.2rem, 2.2vw, 1.6rem);
  letter-spacing: .03em;
  color: #fff;
  margin: 0;
  text-transform: uppercase;
  line-height: 1;
}
.sb-sector {
  font-family: 'Inter', sans-serif;
  font-size: .9rem;
  color: #B8B8B8;
}

.sb-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-left: 1px solid #1F2D24;
}
.sb-stat {
  padding: 12px 14px;
  display: flex; flex-direction: column; justify-content: center; gap: 4px;
  border-right: 1px solid #1F2D24;
}
.sb-stat:last-child { border-right: none; }
.sb-stat .k {
  font-family: 'Press Start 2P', monospace;
  font-size: .5rem;
  letter-spacing: .2em;
  color: var(--gold-500);
  opacity: .8;
}
.sb-stat .v {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  font-size: .92rem;
  color: #fff;
  letter-spacing: .02em;
}

.sb-status {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  border-left: 1px solid #1F2D24;
}
.sb-status.active   { color: #29D67D; background: rgba(41,214,125,.06); }
.sb-status.pipeline { color: var(--gold-500); background: rgba(239,178,30,.06); }

@media (max-width: 800px) {
  .sb-row {
    grid-template-columns: 1fr;
  }
  .sb-tag {
    border-right: none;
    border-bottom: 1px solid #1F2D24;
    padding: 8px 0;
    justify-content: flex-start;
    padding-left: 18px;
  }
  .sb-stats {
    border-left: none;
    border-top: 1px solid #1F2D24;
  }
  .sb-status {
    border-left: none;
    border-top: 1px solid #1F2D24;
    padding: 12px 0;
  }
}

/* Open spots grid */
.sb-open-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 2fr;
  gap: 10px;
  margin-top: 6px;
}
.sb-open {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 22px 14px;
  background: rgba(255,255,255,.04);
  border: 2px dashed rgba(239,178,30,.4);
  color: var(--cream);
  text-align: center;
  transition: all .15s ease;
}
.sb-open:hover {
  background: rgba(239,178,30,.08);
  border-style: solid;
  border-color: var(--gold-500);
  transform: translateY(-2px);
}
.sb-open-num {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.1rem;
  color: var(--gold-500);
}
.sb-open-label {
  font-family: 'Inter', sans-serif;
  font-size: .82rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #B8B8B8;
}
.sb-open-cta {
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  letter-spacing: .15em;
  color: var(--gold-500);
  margin-top: 4px;
}
.sb-open-more {
  border-style: solid;
  border-color: var(--gold-500);
  background: var(--green-900);
}

@media (max-width: 800px) {
  .sb-open-grid { grid-template-columns: repeat(2, 1fr); }
  .sb-open-more { grid-column: span 2; }
}
@media (max-width: 460px) {
  .sb-open-grid { grid-template-columns: 1fr; }
  .sb-open-more { grid-column: span 1; }
}

/* ----- mobile tightening ----- */
@media (max-width: 600px) {
  .hero-stadium { padding-top: 64px; padding-bottom: 56px; }
  .hero-h1 { letter-spacing: 0; }
  .stadium-lights .beam { width: 140px; }
  .diamond-bg { width: 600px; height: 600px; bottom: -120px; }
  .ambient-balls .ball { width: 9px; height: 9px; }
}

/* ============================================================
   OPPORTUNITY SECTION
   ============================================================ */

.opp-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-bottom: 56px;
}
@media (max-width: 760px) { .opp-stats { grid-template-columns: 1fr; } }

.opp-stat {
  background: var(--green-900);
  border: 3px solid var(--gold-500);
  padding: 36px 24px;
  text-align: center;
  box-shadow: 8px 8px 0 rgba(0,0,0,.35);
  position: relative;
  transition: transform .15s ease, box-shadow .15s ease;
}
.opp-stat:hover { transform: translate(-3px,-3px); box-shadow: 11px 11px 0 rgba(0,0,0,.45); }
.opp-stat.featured {
  background: var(--gold-500);
  border-color: var(--green-900);
}
.opp-stat.featured .opp-num { color: var(--green-900); text-shadow: none; }
.opp-stat.featured .opp-label { color: var(--green-900); }
.opp-stat.featured .opp-label em { color: var(--green-700); }

.opp-num {
  display: block;
  font-family: 'Bebas Neue', 'Oswald', Impact, sans-serif;
  font-size: clamp(3rem, 7vw, 5rem);
  line-height: 1;
  color: var(--gold-500);
  text-shadow: 0 0 18px rgba(239,178,30,.5);
  letter-spacing: .02em;
  margin-bottom: 10px;
}
.opp-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 1.05rem;
  line-height: 1.35;
  color: var(--cream);
  letter-spacing: .03em;
}
.opp-label em {
  display: inline-block;
  font-style: normal;
  font-family: var(--font-pixel);
  font-size: .55rem;
  letter-spacing: .15em;
  color: var(--gold-500);
  margin-top: 6px;
}

.opp-bullets {
  list-style: none;
  padding: 0;
  margin: 0 auto 48px;
  max-width: 780px;
  display: grid;
  gap: 14px;
}
.opp-bullets li {
  position: relative;
  padding: 16px 18px 16px 56px;
  background: rgba(0,30,22,.5);
  border-left: 3px solid var(--gold-500);
  color: var(--cream);
  font-size: 1.05rem;
  line-height: 1.5;
}
.opp-bullets li::before {
  content: "★";
  position: absolute;
  left: 22px;
  top: 14px;
  font-family: 'Press Start 2P', monospace;
  font-size: .75rem;
  color: var(--gold-500);
}
.opp-bullets li strong { color: var(--white); }

.opp-quote {
  text-align: center;
  margin-top: 8px;
  padding-top: 32px;
  border-top: 2px dashed rgba(239,178,30,.3);
}
.opp-quote .pull-quote {
  font-size: clamp(1.4rem, 2.6vw, 2rem);
  margin: 0 auto;
  max-width: 36ch;
}

/* ============================================================
   AI-ERA STUDIO SECTION (cream paper)
   ============================================================ */

.section-formula {
  position: relative;
  background:
    radial-gradient(900px 460px at 50% -10%, rgba(0,56,49,.08), transparent 65%),
    var(--cream);
  color: var(--green-900);
  padding: clamp(56px, 8vw, 110px) 0 clamp(72px, 10vw, 130px);
  border-top: 1px solid rgba(0,56,49,.12);
  text-align: center;
  overflow: hidden;
}
.section-formula::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 60px;
  background:
    radial-gradient(circle at center, rgba(0,56,49,.20) 1px, transparent 2px) 0 0 / 18px 18px;
  opacity: .35;
  pointer-events: none;
  mask: linear-gradient(180deg, #000, transparent);
  -webkit-mask: linear-gradient(180deg, #000, transparent);
}

.formula-eyebrow {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: .58rem;
  letter-spacing: .25em;
  color: var(--green-900);
  margin-bottom: 16px;
  padding: 6px 12px;
  border: 1px solid var(--green-700);
  border-radius: 999px;
  background: rgba(0,56,49,.05);
}

.formula-h2 {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  line-height: 1.1;
  color: var(--green-900);
  margin: 0 0 16px;
  letter-spacing: -.005em;
}
.formula-h2 .gold { color: var(--gold-600); }

.formula-lead {
  max-width: 62ch;
  margin: 0 auto 56px;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(.95rem, 1.4vw, 1.1rem);
  line-height: 1.6;
  color: var(--green-700);
}

/* ============================================================
   OBP EQUATION (Tech + Operator + Distribution + Capital = OBP)
   ============================================================ */

.obp-equation {
  display: flex;
  align-items: stretch;
  justify-content: center;
  flex-wrap: wrap;
  gap: 14px;
  max-width: 1080px;
  margin: 0 auto;
}
.obp-term,
.obp-result {
  flex: 1 1 160px;
  min-width: 150px;
  max-width: 220px;
  background: var(--green-900);
  border: 3px solid var(--gold-500);
  padding: 22px 14px;
  text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  box-shadow: 6px 6px 0 rgba(0,0,0,.4);
  transition: transform .15s ease;
}
.obp-term:hover { transform: translate(-2px,-2px); }
.obp-icon {
  font-family: 'Press Start 2P', monospace;
  font-size: 1.4rem;
  color: var(--gold-500);
  margin-bottom: 4px;
  text-shadow: 0 0 10px rgba(239,178,30,.5);
}
.obp-term-label {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 1.5rem;
  letter-spacing: .04em;
  color: var(--white);
  line-height: 1;
}
.obp-term-sub {
  font-family: var(--font-mono);
  font-size: .95rem;
  line-height: 1.25;
  color: var(--cream);
  opacity: .8;
  letter-spacing: .02em;
}

.obp-op,
.obp-equals {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 2.4rem;
  color: var(--green-900);
  align-self: center;
  padding: 0 4px;
  line-height: 1;
}
.obp-equals {
  color: var(--green-900);
}

@media (max-width: 760px) {
  .obp-equation { flex-direction: column; align-items: stretch; }
  .obp-term, .obp-result { max-width: none; }
  .obp-op, .obp-equals { align-self: center; padding: 0; }
}

.obp-result {
  position: relative;
  background:
    linear-gradient(135deg,
      #F5D26C 0%,
      var(--gold-500) 45%,
      #E0A30E 100%);
  border: 4px solid var(--green-900);
  color: var(--green-900);
  box-shadow:
    6px 6px 0 var(--green-900),
    0 0 0 0 rgba(239,178,30,.55);
  flex: 0 0 200px;
  min-width: 180px;
  max-width: 220px;
  padding: 22px 16px;
  align-self: center;
  animation: obp-result-pulse 2.6s ease-in-out infinite;
  overflow: visible;
}

@keyframes obp-result-pulse {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow:
      6px 6px 0 var(--green-900),
      0 0 0 0 rgba(239,178,30,.55);
  }
  50% {
    transform: translateY(-3px) scale(1.04);
    box-shadow:
      6px 6px 0 var(--green-900),
      0 0 44px 10px rgba(239,178,30,.55);
  }
}

/* Outward "radar ping" ring that emanates from the tile every 2s */
.obp-result::before {
  content: "";
  position: absolute;
  inset: -4px;
  border: 3px solid var(--gold-500);
  animation: obp-ping 2.2s ease-out infinite;
  pointer-events: none;
}
@keyframes obp-ping {
  0%   { transform: scale(1);    opacity: .8; }
  60%  { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}

/* Twinkling star accent in the top-right corner */
.obp-result::after {
  content: "★";
  position: absolute;
  top: -16px;
  right: -12px;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.1rem;
  color: var(--gold-500);
  text-shadow:
    0 0 10px rgba(239,178,30,.95),
    0 0 22px rgba(239,178,30,.55);
  animation: obp-star-twinkle 1.8s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes obp-star-twinkle {
  0%, 100% { transform: rotate(0deg) scale(1);   opacity: 1; }
  35%      { transform: rotate(180deg) scale(1.3); opacity: .7; }
  50%      { transform: rotate(180deg) scale(.6); opacity: .4; }
  65%      { transform: rotate(360deg) scale(1.3); opacity: 1; }
}

/* "Punchline" label sized larger and weighted heavier */
.obp-result .obp-result-label {
  font-size: 2.2rem;
  letter-spacing: .06em;
  font-weight: 400;
  color: var(--green-900);
  text-shadow: 1px 1px 0 rgba(255,255,255,.25);
  position: relative;
  z-index: 1;
}
.obp-result .obp-result-label {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 1.5rem;
  letter-spacing: .05em;
  color: var(--green-900);
  line-height: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.obp-result .obp-result-label .line { display: block; line-height: 1; }
.obp-result .obp-result-sub {
  font-family: var(--font-mono);
  font-size: .95rem;
  color: var(--green-900);
  opacity: .8;
  letter-spacing: .02em;
}


/* ============================================================
   CO-FOUNDER POSITIONING SECTION
   ============================================================ */

.cofounder-block {
  text-align: center;
}
.cofounder-tag {
  display: inline-block;
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  letter-spacing: .25em;
  background: var(--green-900);
  color: var(--gold-500);
  padding: 8px 14px;
  border: 2px solid var(--green-900);
  margin-bottom: 22px;
  box-shadow: 4px 4px 0 var(--green-900);
}
.cofounder-h2 {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-weight: 400;
  font-size: clamp(2.2rem, 5.5vw, 4rem);
  line-height: 1;
  letter-spacing: .015em;
  color: var(--green-900);
  margin: 0 0 18px;
  text-transform: uppercase;
}
.cofounder-h2 em {
  font-style: italic;
  font-family: var(--font-serif);
  text-transform: none;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--green-900);
}
.cofounder-lead {
  max-width: 56ch;
  margin: 0 auto 36px;
  font-size: 1.1rem;
  color: var(--green-900);
}
.cofounder-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 24px;
}
@media (max-width: 760px) { .cofounder-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .cofounder-grid { grid-template-columns: 1fr; } }
.cofounder-pill {
  background: var(--green-900);
  color: var(--cream);
  padding: 16px 14px;
  border: 3px solid var(--green-900);
  box-shadow: 4px 4px 0 var(--green-700);
  text-align: center;
  display: flex; flex-direction: column; gap: 6px;
}
.cofounder-pill strong {
  font-family: 'Press Start 2P', monospace;
  font-size: .6rem;
  letter-spacing: .15em;
  color: var(--gold-500);
}
.cofounder-pill span {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--cream);
  opacity: .9;
  letter-spacing: .02em;
}

/* Sub-bullets inside VS comparison */
.vs-col ul ul.sub {
  margin: 8px 0 0;
  padding-left: 0;
}
.vs-col ul ul.sub li {
  border-bottom: none;
  padding: 4px 0 4px 22px;
  font-size: .95rem;
  opacity: .9;
}
.vs-col ul ul.sub li::before {
  content: "—";
  font-family: var(--font-mono);
  font-size: .9rem;
  top: 4px;
  color: inherit;
  opacity: .6;
}
.vs-col ul li strong { color: var(--green-900); }

.hero h1 {
  font-family: var(--font-serif);
  color: var(--white);
}
.hero h1 .gold { color: var(--gold-500); }
.hero p.lead {
  font-size: 1.2rem;
  max-width: 56ch;
  color: var(--cream);
  margin: 14px 0 28px;
}
.hero-cta-row { display: flex; gap: 16px; flex-wrap: wrap; }

.hero-card {
  background: var(--green-900);
  border: 4px solid var(--gold-500);
  padding: 22px;
  box-shadow: 10px 10px 0 var(--green-900);
}
.hero-card h3 {
  font-family: var(--font-pixel);
  font-size: .8rem;
  letter-spacing: .2em;
  color: var(--gold-500);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.lineup {
  font-family: var(--font-mono);
  font-size: 1.05rem;
  color: var(--cream);
}
.lineup-row {
  display: grid;
  grid-template-columns: 26px 1fr auto;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed rgba(239,178,30,.2);
}
.lineup-row:last-child { border-bottom: none; }
.lineup-row .num { color: var(--gold-500); font-family: var(--font-pixel); font-size: .7rem; }
.lineup-row .stat-val { color: var(--white); font-family: var(--font-pixel); font-size: .7rem; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  background: var(--bone);
  border: 3px solid var(--green-700);
  padding: 24px;
  box-shadow: 6px 6px 0 var(--green-700);
  transition: transform .15s ease, box-shadow .15s ease;
}
.card:hover { transform: translate(-3px,-3px); box-shadow: 9px 9px 0 var(--green-700); }
.card .num-tag {
  display: inline-block;
  font-family: var(--font-pixel);
  font-size: .6rem;
  letter-spacing: .2em;
  color: var(--gold-600);
  margin-bottom: 12px;
}
.card h3 { font-family: var(--font-serif); font-size: 1.5rem; margin-bottom: 8px; color: var(--green-900); }
.card p { color: #2A2F2B; font-size: 1rem; }

.card.dark {
  background: var(--green-800);
  border-color: var(--gold-500);
  box-shadow: 6px 6px 0 var(--green-900);
  color: var(--cream);
}
.card.dark:hover { box-shadow: 9px 9px 0 var(--green-900); }
.card.dark h3 { color: var(--white); }
.card.dark p { color: var(--cream); }
.card.dark .num-tag { color: var(--gold-500); }


/* ============================================================
   "VS" comparison block
   ============================================================ */
.vs-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 24px;
  align-items: stretch;
}
@media (max-width: 760px) { .vs-grid { grid-template-columns: 1fr; } }

.vs-col {
  background: var(--bone);
  border: 3px solid var(--green-700);
  padding: 28px;
  box-shadow: 6px 6px 0 var(--green-700);
}
.vs-col.them { background: #E9E1C8; border-style: dashed; }
.vs-col h3 {
  font-family: var(--font-pixel);
  font-size: .8rem;
  letter-spacing: .15em;
  color: var(--green-900);
  text-transform: uppercase;
  margin-bottom: 16px;
}
.vs-col ul { padding: 0; margin: 0; list-style: none; }
.vs-col li {
  padding: 10px 0 10px 28px;
  position: relative;
  font-size: 1.02rem;
  border-bottom: 1px dotted #B7A372;
}
.vs-col li:last-child { border-bottom: none; }
.vs-col li::before {
  content: "✕";
  position: absolute; left: 0; top: 9px;
  font-family: var(--font-pixel);
  font-size: .8rem;
  color: var(--rust);
}
.vs-col.us li::before { content: "✓"; color: var(--green-700); }

.vs-divider {
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel);
  font-size: 1.2rem;
  color: var(--gold-600);
  background: var(--green-700);
  color: var(--gold-500);
  width: 64px;
  border: 3px solid var(--green-900);
  box-shadow: 4px 4px 0 var(--green-900);
}
@media (max-width: 760px) { .vs-divider { width: 100%; padding: 12px 0; } }

/* ============================================================
   PROCESS / STRATEGY
   ============================================================ */
.process-list { counter-reset: step; }
.process-step {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 2px dashed var(--green-700);
}
.process-step:last-child { border-bottom: none; }
.process-step .step-num {
  font-family: var(--font-pixel);
  font-size: 1.6rem;
  color: var(--gold-600);
  text-align: right;
}
.process-step h3 {
  font-family: var(--font-serif);
  font-size: 1.6rem;
  color: var(--green-900);
  margin-bottom: 6px;
}
.process-step p { font-size: 1.05rem; color: #2A2F2B; }

/* ============================================================
   PORTFOLIO BASEBALL CARDS
   ============================================================ */
.bb-card {
  background: var(--bone);
  border: 4px solid var(--green-700);
  box-shadow: 6px 6px 0 var(--green-900);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: transform .15s ease;
}
.bb-card:hover { transform: translateY(-4px); }
.bb-card-top {
  background: var(--green-700);
  color: var(--gold-500);
  padding: 12px 16px;
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 3px solid var(--gold-500);
}
.bb-card-top .ticker {
  font-family: var(--font-pixel);
  font-size: .65rem;
  letter-spacing: .2em;
  text-transform: uppercase;
}
.bb-card-top .stage {
  background: var(--gold-500);
  color: var(--green-900);
  font-family: var(--font-pixel);
  font-size: .55rem;
  padding: 4px 8px;
  letter-spacing: .15em;
}
.bb-card-img {
  background:
    repeating-linear-gradient(45deg, var(--green-500) 0 12px, var(--green-600) 12px 24px);
  height: 160px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-pixel);
  color: var(--white);
  font-size: 1.6rem;
  letter-spacing: .15em;
  text-shadow: 3px 3px 0 var(--green-900);
  border-bottom: 3px solid var(--gold-500);
}
.bb-card-body { padding: 18px; }
.bb-card-body h3 {
  font-family: var(--font-serif);
  font-size: 1.4rem;
  color: var(--green-900);
  margin-bottom: 6px;
}
.bb-card-body .role {
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--green-700);
  margin-bottom: 12px;
}
.bb-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: var(--green-900);
  color: var(--gold-500);
  font-family: var(--font-mono);
  border-top: 3px solid var(--green-700);
}
.bb-stats div {
  padding: 10px;
  text-align: center;
  border-right: 1px solid rgba(239,178,30,.25);
}
.bb-stats div:last-child { border-right: none; }
.bb-stats .k { font-family: var(--font-pixel); font-size: .55rem; opacity: .8; display: block; margin-bottom: 4px; }
.bb-stats .v { font-family: var(--font-pixel); font-size: .8rem; color: var(--white); }

/* Filters bar */
.filters {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 32px;
}
.filters button {
  font-family: var(--font-pixel);
  font-size: .6rem;
  letter-spacing: .15em;
  padding: 10px 14px;
  border: 2px solid var(--green-700);
  background: var(--bone);
  color: var(--green-900);
  text-transform: uppercase;
}
.filters button.active {
  background: var(--green-700);
  color: var(--gold-500);
}

/* ============================================================
   PAGE INTRO BLOCK (subpage hero)
   ============================================================ */
.page-intro {
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.06) 0 1px, transparent 1px 4px),
    var(--green-700);
  color: var(--cream);
  padding: clamp(56px, 9vw, 110px) 0 clamp(40px, 6vw, 70px);
  border-bottom: 4px solid var(--gold-500);
  text-align: center;
}
.page-intro h1 { color: var(--white); }
.page-intro p { color: var(--cream); max-width: 60ch; font-size: 1.15rem; margin-left: auto; margin-right: auto; }

/* ============================================================
   QUOTE / DIAMOND DIVIDER
   ============================================================ */
.diamond-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 0 auto 32px;
  justify-content: center;
}
.diamond-divider::before, .diamond-divider::after {
  content: "";
  height: 2px; background: var(--gold-500); flex: 1;
  max-width: 80px;
}
.diamond-divider span {
  font-family: var(--font-pixel);
  font-size: .65rem;
  letter-spacing: .25em;
  color: var(--gold-500);
}
.diamond-divider.on-gold::before,
.diamond-divider.on-gold::after { background: var(--green-900); }
.diamond-divider.on-gold span { color: var(--green-900); }

/* Pull-quote highlight styled to read on gold */
.pull-quote .ink { color: var(--green-900); border-bottom: 4px solid var(--green-900); padding-bottom: 2px; }

/* Button variant for the gold CTA section: dark green button on gold */
.btn.btn-on-gold {
  background: var(--green-700);
  color: var(--gold-500);
  border-color: var(--green-900);
  box-shadow: 5px 5px 0 var(--green-900);
}
.btn.btn-on-gold:hover { box-shadow: 7px 7px 0 var(--green-900); color: var(--white); }

.pull-quote {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  line-height: 1.2;
  color: var(--green-900);
  text-align: center;
  max-width: 26ch;
  margin: 0 auto;
}
.pull-quote.on-dark { color: var(--cream); }
.pull-quote .gold { color: var(--gold-600); }
.pull-quote.on-dark .gold { color: var(--gold-500); }
.cite {
  display: block;
  font-family: var(--font-pixel);
  font-size: .75rem;
  letter-spacing: .22em;
  margin-top: 22px;
  color: var(--gold-600);
  text-transform: uppercase;
  text-align: center;
  line-height: 1.4;
}
.cite.on-dark { color: var(--gold-500); }
/* On a gold section background, switch to dark green so the cite is readable */
.section.gold .cite {
  color: var(--green-900);
  opacity: .92;
}

/* ============================================================
   TICKER MARQUEE (legacy, kept for fallback)
   ============================================================ */
.ticker {
  background: var(--green-900);
  color: var(--gold-500);
  border-top: 3px solid var(--gold-500);
  border-bottom: 3px solid var(--gold-500);
  padding: 10px 0;
  overflow: hidden;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  letter-spacing: .05em;
}
.ticker-inner {
  display: inline-block;
  white-space: nowrap;
  animation: marquee 40s linear infinite;
  padding-left: 100%;
}
.ticker-inner span { margin: 0 28px; }
.ticker-inner .up { color: #6BD58A; }
.ticker-inner .dn { color: #E37C7C; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* ============================================================
   ESPN-STYLE PORTFOLIO TICKER
   ============================================================ */
.espn-ticker {
  display: flex;
  align-items: stretch;
  background: var(--gold-500);
  border-top: 3px solid var(--green-900);
  border-bottom: 3px solid var(--green-900);
  height: 56px;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  color: var(--green-900);
  position: relative;
  z-index: 4;
  overflow: hidden;
}

.espn-brand {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--green-900);
  border-right: 3px solid var(--green-900);
  padding: 0 18px;
  min-width: 110px;
  position: relative;
  z-index: 3;
  box-shadow: 4px 0 12px rgba(0,0,0,.35);
}
.espn-brand-logo {
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 1.5rem;
  letter-spacing: .08em;
  color: var(--gold-500);
  line-height: 1;
}
.espn-brand-sub {
  font-family: 'Inter', sans-serif;
  font-size: .55rem;
  letter-spacing: .2em;
  color: var(--cream);
  text-transform: uppercase;
  margin-top: 4px;
  opacity: .9;
  white-space: nowrap;
}

.espn-track {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  position: relative;
}
.espn-track::before,
.espn-track::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: 36px;
  z-index: 2;
  pointer-events: none;
}
.espn-track::before { left: 0;  background: linear-gradient(90deg, var(--gold-500), transparent); }
.espn-track::after  { right: 0; background: linear-gradient(270deg, var(--gold-500), transparent); }

.espn-rail {
  display: flex;
  align-items: center;
  height: 100%;
  width: max-content;
  animation: espn-marquee 60s linear infinite;
  will-change: transform;
}
/* Only pause on devices that have a real hover. On touch devices,
   :hover sticks after the first tap and would freeze the ticker. */
@media (hover: hover) {
  .espn-ticker:hover .espn-rail { animation-play-state: paused; }
}

.espn-group {
  display: flex;
  align-items: center;
  height: 100%;
  flex-shrink: 0;
}

@keyframes espn-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}

.espn-item {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 100%;
  padding: 0 22px;
  border-right: 1px solid rgba(0,30,22,.18);
  flex-shrink: 0;
}

.espn-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  font-family: 'Bebas Neue', 'Oswald', sans-serif;
  font-size: 1rem;
  letter-spacing: .04em;
  color: #fff;
  border-radius: 3px;
  flex: 0 0 auto;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 1px 0 rgba(0,0,0,.25);
}

.espn-team {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: .92rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--green-900);
  white-space: nowrap;
}
.espn-meta {
  font-family: 'Inter', sans-serif;
  font-weight: 500;
  font-size: .82rem;
  color: rgba(0,30,22,.7);
  letter-spacing: .01em;
  white-space: nowrap;
}
.espn-jv {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--green-900);
  text-transform: uppercase;
  padding: 3px 8px;
  border: 1.5px solid var(--green-900);
  border-radius: 2px;
  background: rgba(0,30,22,.06);
}
.espn-status {
  font-family: 'Inter', sans-serif;
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 4px 9px;
  border-radius: 2px;
}
.espn-status.active {
  color: #FFFFFF;
  background: var(--green-700);
  border: 1.5px solid var(--green-900);
}
.espn-status.pipeline {
  color: var(--green-900);
  background: rgba(0,0,0,.05);
  border: 1.5px solid var(--green-900);
}
.espn-status.down {
  color: #FFFFFF;
  background: #B12727;
  border: 1.5px solid var(--green-900);
}

@media (max-width: 700px) {
  .espn-ticker { height: 50px; }
  .espn-brand { min-width: 84px; padding: 0 10px; }
  .espn-brand-logo { font-size: 1rem; letter-spacing: .06em; }
  .espn-brand-sub { font-size: .44rem; letter-spacing: .15em; }
  .espn-item { padding: 0 14px; gap: 10px; }
  /* Keep .espn-meta (the headline) visible — was previously hidden,
     which left mobile users seeing only source names with no news. */
  .espn-team {
    font-size: .68rem;
    flex-shrink: 0;
    color: rgba(0, 30, 22, .65);   /* muted dark-green so headline reads as primary */
  }
  .espn-meta {
    font-size: .8rem;
    color: var(--green-900);
    font-weight: 600;
  }
  .espn-jv { font-size: .68rem; padding: 2px 6px; }
  .espn-status { font-size: .62rem; padding: 3px 6px; }
  .espn-rail { animation-duration: 45s; }
}

/* ============================================================
   TEAM GRID
   ============================================================ */
.team-grid { display: grid; gap: 28px; grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .team-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .team-grid { grid-template-columns: 1fr; } }

.player {
  background: var(--bone);
  border: 3px solid var(--green-700);
  padding: 0;
  box-shadow: 6px 6px 0 var(--green-700);
  overflow: hidden;
}
.player-img {
  background:
    radial-gradient(160px 100px at 50% 100%, rgba(0,0,0,.25), transparent 70%),
    repeating-linear-gradient(90deg, var(--green-600) 0 18px, var(--green-500) 18px 36px);
  height: 190px;
  display: flex; align-items: flex-end; justify-content: center;
  position: relative;
  overflow: hidden;
}

/* Real photo overlay — sits on top of the silhouette and pinstripe bg.
   If the image fails to load, onerror hides it and the silhouette
   shows through naturally. */
.player-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  z-index: 2;
  /* Clearer rendering: native saturation, slight contrast lift,
     browser-optimized scaling on small/upscaled source images. */
  filter: contrast(1.06) saturate(1.05) brightness(1.02);
  image-rendering: -webkit-optimize-contrast;
  image-rendering: auto;
  -ms-interpolation-mode: bicubic;
  backface-visibility: hidden;
  transform: translateZ(0); /* force GPU rasterization for crisper resampling */
}
.player-img .num {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-pixel);
  color: var(--gold-500);
  font-size: .9rem;
  background: var(--green-900);
  padding: 6px 8px;
  border: 2px solid var(--gold-500);
}
.player-img .silhouette {
  width: 90px; height: 130px;
  background: var(--green-900);
  border-radius: 50% 50% 14px 14px / 60% 60% 14px 14px;
  position: relative;
  margin-bottom: -2px;
  box-shadow: 0 -4px 0 var(--gold-500) inset;
}
.player-img .silhouette::before {
  content: "";
  position: absolute; left: 50%; top: -18px; transform: translateX(-50%);
  width: 44px; height: 44px;
  background: var(--green-900);
  border-radius: 50%;
}
.player-body { padding: 18px; }
.player-body h3 { font-size: 1.3rem; color: var(--green-900); margin-bottom: 4px; }
.player-body .pos {
  font-family: var(--font-pixel);
  font-size: .55rem;
  letter-spacing: .2em;
  color: var(--gold-600);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.player-body p { font-size: .95rem; color: #2A2F2B; }

/* Team org tiers (Managing Partner / Operations / Advisors) */
.team-tier { margin-top: 56px; }
.team-tier:first-of-type { margin-top: 0; }
.team-tier-label {
  font-family: 'Press Start 2P', monospace;
  font-size: .65rem;
  letter-spacing: .25em;
  color: var(--gold-500);
  text-transform: uppercase;
  text-align: center;
  padding-bottom: 14px;
  margin-bottom: 28px;
  border-bottom: 2px dashed rgba(239,178,30,.3);
}

/* Single-card variant — centers the lone Managing Partner card */
.team-grid--single {
  grid-template-columns: minmax(280px, 420px);
  justify-content: center;
}

/* Two-card variant — centers a pair of cards (used for EIR row) */
.team-grid--two {
  grid-template-columns: repeat(2, minmax(280px, 380px));
  justify-content: center;
}
@media (max-width: 700px) {
  .team-grid--two { grid-template-columns: 1fr; }
}

.team-recruit-hint {
  margin: 56px 0 0;
  text-align: center;
  color: var(--cream);
  font-family: var(--font-mono);
  font-size: 1.05rem;
  opacity: .85;
}
.team-recruit-hint a {
  color: var(--gold-500);
  text-decoration: underline;
}

/* ============================================================
   ROSTER · LOADING (placeholder screen for the team section)
   ============================================================ */
.roster-loading {
  max-width: 720px;
  margin: 0 auto;
  text-align: center;
}
.rl-screen {
  position: relative;
  background: var(--green-900);
  border: 4px solid var(--gold-500);
  box-shadow: 8px 8px 0 rgba(0,0,0,.45);
  padding: 44px 32px 40px;
  overflow: hidden;
  isolation: isolate;
}
.rl-scanlines {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: multiply;
}
.rl-hud {
  position: relative; z-index: 2;
  display: flex;
  justify-content: space-between;
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  letter-spacing: .15em;
  color: var(--gold-500);
  margin-bottom: 32px;
}
.rl-title {
  position: relative; z-index: 2;
  font-family: 'Press Start 2P', monospace;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  color: var(--gold-500);
  text-shadow: 0 3px 0 rgba(0,0,0,.5);
  letter-spacing: .04em;
  margin: 0 0 26px;
}
.rl-dots span {
  display: inline-block;
  animation: rl-dot-blink 1.4s steps(2, end) infinite;
}
.rl-dots span:nth-child(2) { animation-delay: .25s; }
.rl-dots span:nth-child(3) { animation-delay: .5s; }
@keyframes rl-dot-blink {
  0%, 50% { opacity: 0; }
  51%, 100% { opacity: 1; }
}
.rl-meta {
  position: relative; z-index: 2;
  font-family: 'Press Start 2P', monospace;
  font-size: .55rem;
  letter-spacing: .15em;
  color: var(--cream);
  margin: 0 0 30px;
}
.rl-slots {
  position: relative; z-index: 2;
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 28px;
}
.rl-slot {
  width: 50px; height: 50px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Press Start 2P', monospace;
  font-size: 1.4rem;
  color: var(--gold-500);
  background: var(--green-700);
  border: 2px solid var(--gold-500);
  animation: rl-pulse 2s ease-in-out infinite;
}
.rl-slot:nth-child(2) { animation-delay: .2s; }
.rl-slot:nth-child(3) { animation-delay: .4s; }
.rl-slot:nth-child(4) { animation-delay: .6s; }
.rl-slot:nth-child(5) { animation-delay: .8s; }
@keyframes rl-pulse {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50%      { opacity: 1;   transform: translateY(-3px); }
}
.rl-sub {
  position: relative; z-index: 2;
  font-family: var(--font-mono);
  font-size: 1rem;
  color: var(--cream);
  opacity: .85;
  margin: 0 0 22px;
}
.rl-blink {
  position: relative; z-index: 2;
  font-family: 'Press Start 2P', monospace;
  font-size: .65rem;
  letter-spacing: .15em;
  color: var(--white);
  margin: 0;
  animation: rl-blink 1s steps(2) infinite;
}
@keyframes rl-blink {
  50% { opacity: .15; }
}
.rl-cta {
  margin-top: 32px;
  display: inline-block;
}
@media (max-width: 600px) {
  .rl-screen { padding: 28px 18px 24px; }
  .rl-title { font-size: 1.4rem; }
  .rl-slot { width: 40px; height: 40px; font-size: 1.1rem; }
  .rl-meta, .rl-blink, .rl-hud { font-size: .5rem; letter-spacing: .12em; }
  .rl-sub { font-size: .92rem; }
  .rl-slots { gap: 8px; }
}

/* ============================================================
   UTIL
   ============================================================ */
.center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-2 { margin-top: 32px; }
.mt-3 { margin-top: 48px; }

.callout {
  background: var(--gold-500);
  color: var(--green-900);
  padding: 28px 32px;
  border: 3px solid var(--green-900);
  box-shadow: 6px 6px 0 var(--green-900);
  font-family: var(--font-mono);
  font-size: 1.15rem;
}
.callout strong { font-family: var(--font-pixel); font-size: .9rem; letter-spacing: .1em; display: block; margin-bottom: 8px; }

/* ============================================================
   MOBILE OPTIMIZATIONS
   Consolidated rules tuned for phone viewports.
   ============================================================ */

/* iOS / horizontal-overflow guards */
html, body { overflow-x: hidden; }
img, svg { max-width: 100%; height: auto; }

/* Tablet + below */
@media (max-width: 760px) {
  .container { padding: 0 16px; }
  .section { padding: clamp(48px, 8vw, 96px) 0; }

  /* Cards a little tighter */
  .card { padding: 22px; box-shadow: 4px 4px 0 var(--green-700); }
  .card.dark { box-shadow: 4px 4px 0 var(--green-900); }

  /* Pull quotes scale down */
  .pull-quote { font-size: clamp(1.3rem, 5vw, 2rem); }

  /* Diamond dividers tighter */
  .diamond-divider { gap: 10px; }
  .diamond-divider span { font-size: .55rem; letter-spacing: .18em; }
}

/* Phone */
@media (max-width: 600px) {
  /* Nav */
  .nav-inner { padding: 8px 16px; gap: 12px; }
  .nav-burger { width: 44px; height: 44px; font-size: 1rem; }
  .nav.open .nav-links a { padding: 16px; font-size: .65rem; }

  /* Hero */
  .hero-stadium { padding: 56px 16px 64px; }
  .hero-h1 {
    font-size: clamp(1.3rem, 5.4vw, 1.9rem);
    line-height: 1.18;          /* tight: pixel fonts have built-in vertical space */
    letter-spacing: .015em;
    margin: 0 auto 22px;
    max-width: 18ch;            /* keeps line wrapping balanced */
    /* Disable subpixel-aliasing artifacts that turn pixel-font drop
       shadows into visible "ghost letters" on retina iOS */
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeSpeed;
  }
  .hero-h1 .line-1,
  .hero-h1 .line-2 {
    display: block;
    text-shadow: 0 1px 0 rgba(0,0,0,.3); /* was 3px — too chunky on mobile */
    margin-bottom: .35em;       /* small explicit gap between the two lines */
  }
  .hero-h1 .line-2 { margin-bottom: 0; }
  .hero-h1 .gold {
    text-shadow:
      0 1px 0 rgba(0,0,0,.35),
      0 0 12px rgba(239,178,30,.45);
  }
  /* The animated gold underline under "VENTURE STUDIOS." is too chunky
     on a small headline; the period already ends the line cleanly */
  .hero-h1 .underline-gold::after { display: none; }
  .hero-lead { font-size: .95rem; line-height: 1.55; }
  /* Skip the desktop rhetorical-break <br> on phone — both sentences
     already wrap, the extra break created an awkward gap */
  br.desktop-only { display: none; }
  .on-air { font-size: .5rem; padding: 6px 12px; letter-spacing: .2em; }

  /* Hero CTAs full-width and stacked */
  .hero-stadium .hero-cta-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-stadium .hero-cta-row .btn { text-align: center; width: 100%; }

  /* Mini scoreboard cells */
  .mb-cell { padding: 14px 12px; min-height: 56px; gap: 8px; }
  .mb-k { font-size: .5rem; letter-spacing: .18em; }
  .mb-v { font-size: 1.1rem; }

  /* Buttons larger touch target */
  .btn { padding: 14px 20px; font-size: .65rem; box-shadow: 4px 4px 0 var(--green-900); }
  .btn:hover { box-shadow: 5px 5px 0 var(--green-900); }
  .btn.ghost { box-shadow: 4px 4px 0 var(--gold-500); }
  .btn.ghost:hover { box-shadow: 5px 5px 0 var(--gold-500); }

  /* AI-Era / OBP section */
  .formula-eyebrow { font-size: .5rem; padding: 5px 10px; letter-spacing: .2em; }
  .formula-h2 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .formula-lead { font-size: .95rem; }
  .obp-term { padding: 16px 12px; }
  .obp-term-label { font-size: 1.25rem; }
  .obp-term-sub { font-size: .85rem; }

  /* OBP result on phone */
  .obp-result { padding: 16px 12px; flex: 0 0 auto; min-width: 160px; max-width: 180px; }
  .obp-result .obp-result-label { font-size: 1.7rem; }

  /* VS comparison */
  .vs-col { padding: 22px; }
  .vs-col h3 { font-size: .7rem; letter-spacing: .12em; }
  .vs-col li { font-size: .95rem; padding: 8px 0 8px 26px; }

  /* About scoreboard / Franchise Card */
  .scoreboard { padding: 18px; box-shadow: 5px 5px 0 var(--green-900); }
  .score-row { padding: 5px 0; }
  .score-label { font-size: 1.05rem; }

  /* Player cards */
  .player { box-shadow: 4px 4px 0 var(--green-700); }
  .player-img { height: 200px; }
  .player-body { padding: 16px; }
  .player-body h3 { font-size: 1.25rem; }
  .player-body p { font-size: .92rem; }
  .pos { font-size: .5rem !important; letter-spacing: .15em; }

  /* Team tier */
  .team-tier { margin-top: 36px; }
  .team-tier-label { font-size: .55rem; letter-spacing: .2em; padding-bottom: 10px; margin-bottom: 20px; }

  /* Page intro */
  .page-intro { padding: 48px 0 36px; }
  .page-intro h1 { font-size: clamp(1.8rem, 7vw, 2.6rem); line-height: 1.1; }
  .page-intro p { font-size: 1rem; }
  .eyebrow { font-size: .55rem; letter-spacing: .2em; }

  /* ESPN ticker — narrow phones */
  .espn-ticker { height: 46px; }
  .espn-brand { min-width: 74px; padding: 0 8px; }
  .espn-brand-logo { font-size: .9rem; }
  .espn-brand-sub { font-size: .4rem; letter-spacing: .12em; }
  .espn-item { padding: 0 12px; gap: 8px; }
  .espn-team { font-size: .6rem; }
  .espn-meta { font-size: .72rem; }
  .espn-rail { animation-duration: 40s; }

  /* Portfolio scoreboard */
  .sb-tag { font-size: .5rem; padding: 8px 0; padding-left: 16px; }
  .sb-team { padding: 12px 16px; gap: 12px; }
  .sb-tile { width: 38px; height: 38px; font-size: 1rem; }
  .sb-info h3 { font-size: 1.1rem; }
  .sb-sector { font-size: .82rem; }
  .sb-stat { padding: 10px 12px; }
  .sb-stat .k { font-size: .45rem; }
  .sb-stat .v { font-size: .85rem; }
  .sb-status { padding: 10px 0; font-size: .65rem; }

  /* Open spots */
  .sb-open { padding: 18px 12px; }
  .sb-open-num { font-size: 1rem; }
  .sb-open-label { font-size: .72rem; }

  /* Invest form */
  .invest-form-card { padding: 24px 18px; box-shadow: 5px 5px 0 var(--green-900); }
  .invest-h2 { font-size: 1.6rem; }
  .invest-h2-sub { font-size: .95rem; }
  .invest-form legend { font-size: .52rem; padding: 5px 8px; }
  .invest-form input,
  .invest-form select,
  .invest-form textarea { font-size: 1rem; padding: 14px 12px; } /* 16px+ stops iOS auto-zoom on focus */
  .radio-card { padding: 14px 10px; font-size: .9rem; }
  .radio-row { padding: 12px 12px; font-size: .9rem; }
  .check-pill { padding: 10px 12px; font-size: .85rem; }
  .form-actions .btn { width: 100%; }
  .invest-disclosures { padding: 22px 18px; font-size: .84rem; }

  /* Footer (already stacks at 820px, just minor polish) */
  .footer { padding: 18px 0; }
  .footer-mini-logo img { height: 30px; }
  .footer-mini-links { gap: 14px; }
  .footer-mini-links a { font-size: .5rem; letter-spacing: .15em; }
  .footer-mini-copy { font-size: .78rem; }

  /* CTA section quote sizing */
  .pull-quote { font-size: clamp(1.4rem, 6.5vw, 2rem); line-height: 1.2; }
  .cite { font-size: .55rem; letter-spacing: .2em; }
}

/* Tiny phones (≤380px): one more pass of tightening */
@media (max-width: 380px) {
  .hero-h1 { font-size: 1.4rem; }
  .nav-cta { padding: 9px 12px; font-size: .55rem; }
  .nav-burger { width: 40px; height: 40px; }
  .player-img { height: 180px; }
}

/* Tap state — gives buttons obvious touch feedback when :hover doesn't fire */
@media (hover: none) {
  .btn:active,
  .nav-cta:active { transform: translate(2px, 2px); }
  .card:active { transform: translate(0, 0); }
}