/* ── homepage (extends v3.css) ─────────────────────
   Mobile-first. Base CSS targets a ~320–420px viewport;
   min-width media queries layer in tablet/desktop
   enhancements. Typography is sans-serif throughout —
   no editorial serif, no scrolling tickers. */

.home-app {
  /* Mobile: 18px gutters from screen edge so headers, cards, and
     buttons don't sit right against the bezel. Desktop falls back
     to the shared .app width (12px gutters) since lateral room is
     no longer scarce. */
  width: min(100% - 36px, 1500px);
  padding: 16px 0 24px;
  display: grid;
  gap: 28px;
}

@media (min-width: 720px) {
  .home-app { width: min(100% - 24px, 1500px); padding: 20px 0 32px; gap: 36px; }
}

@media (min-width: 1020px) {
  .home-app { padding: 24px 0 40px; gap: 44px; }
}

/* ── 2026 World Cup announcement banner ───────────── */
.wc-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--accent-deep);
  border-radius: var(--r-md);
  background: linear-gradient(100deg, var(--accent-soft), var(--surface));
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.wc-banner:hover { border-color: var(--accent); transform: translateY(-1px); }
.wc-banner-badge {
  flex: none;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--accent-deep);
  color: #fff;
}
.wc-banner-ball { flex: none; font-size: 22px; line-height: 1; }
.wc-banner-text { flex: 1 1 auto; font-size: 14px; line-height: 1.35; }
.wc-banner-text strong { font-weight: 700; }
.wc-banner-cta {
  flex: none;
  font-weight: 650;
  font-size: 13px;
  color: var(--accent-deep);
  white-space: nowrap;
}
@media (max-width: 600px) {
  .wc-banner { gap: 10px; padding: 11px 13px; align-items: flex-start; }
  .wc-banner-ball { font-size: 19px; }
  .wc-banner-text { font-size: 12.5px; }
  .wc-banner-cta { display: none; }  /* whole banner is tappable on mobile */
}

.home-stage {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  padding: 8px 4px;
}

@media (min-width: 720px) {
  .home-stage { gap: 48px; padding: 16px 4px; }
}

@media (min-width: 1020px) {
  .home-stage {
    grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.1fr);
    gap: 72px;
    padding: 24px 8px;
    align-items: center;
  }
}

/* ── status pill in nav ─────────────────────────── */

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--ink);
}

/* On narrow mobile widths the full ODDS LIVE pill, the Login
   button, and the (intentionally large) logo can't all fit on
   one row — the nav was wrapping below the logo. Collapse the
   pill to a dot-only indicator on small screens so the row
   stays inline. aria-label on the pill still surfaces "Live
   sportsbook odds" for screen readers. */
@media (max-width: 600px) {
  .status-pill {
    padding: 0;
    width: 24px;
    justify-content: center;
    gap: 0;
  }
  .status-pill-text { display: none; }
}

.status-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--positive);
  box-shadow: 0 0 0 3px var(--positive-soft);
  animation: pulse 2.4s ease-in-out infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

/* ── pitch (left column) ────────────────────────── */

.home-pitch {
  display: grid;
  gap: 22px;
  align-content: center;
}

@media (min-width: 1020px) {
  .home-pitch { gap: 26px; }
}

.home-tag {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  width: max-content;
  max-width: 100%;
}

.home-tag-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--positive);
  box-shadow: 0 0 0 3px var(--positive-soft);
  animation: pulse 2.4s ease-in-out infinite;
}

.home-headline {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(34px, 4.4vw, 54px);
  line-height: 1.05;
  letter-spacing: -0.04em;
  color: var(--ink);
  margin: 0;
}

.home-headline em {
  font-style: normal;
  color: var(--accent-deep);
  font-weight: 900;
}

.home-sub {
  max-width: 480px;
  color: var(--ink-2);
  font-size: clamp(18px, 1.7vw, 22px);
  font-weight: 500;
  line-height: 1.35;
  margin: 0;
}

.home-sub strong {
  color: var(--ink);
  font-weight: 800;
}

.home-paragraph {
  max-width: 540px;
  color: var(--muted);
  font-size: clamp(13.5px, 1vw, 15px);
  line-height: 1.55;
  margin: 0;
}

.home-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  margin-top: 10px;
}

.btn-primary,
.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 22px;
  border-radius: var(--r-md);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  border: 1px solid var(--ink);
  transition: background 150ms ease, border-color 150ms ease, transform 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.btn-primary {
  background: var(--ink);
  color: #fff;
  box-shadow: 0 1px 0 rgba(12, 12, 14, 0.05), 0 12px 28px -14px rgba(12, 12, 14, 0.55);
}

.btn-primary:hover {
  background: var(--ink-2);
  border-color: var(--ink-2);
  transform: translateY(-1px);
  color: #fff;
}

.btn-ghost {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--line-strong);
}

.btn-ghost:hover {
  border-color: var(--ink);
  color: var(--ink);
  transform: translateY(-1px);
}

.btn-arrow {
  font-family: var(--font-mono);
  font-size: 17px;
  transition: transform 150ms ease;
}

.btn-primary:hover .btn-arrow,
.btn-ghost:hover .btn-arrow { transform: translateX(3px); }

.btn-primary-sm {
  height: 40px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: var(--r-sm);
  box-shadow: none;
}

@media (min-width: 720px) {
  .btn-primary-sm { height: 36px; padding: 0 12px; }
}

.btn-primary-sm:hover { transform: none; box-shadow: none; }
.btn-primary-sm .btn-arrow { font-size: 14px; }

/* Header Login button — outlined, less prominent than the page's
   primary CTA. Tap target stays ≥40px on mobile. Tightened padding
   on the narrowest viewports so it sits beside the logo + status
   pill in a single row. */
.btn-login {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-sm);
  background: var(--surface);
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
}

.btn-login:hover {
  border-color: var(--ink);
  background: var(--surface-2);
  color: var(--ink);
}

@media (min-width: 720px) {
  .btn-login { height: 36px; padding: 0 14px; }
}

/* Dashboard button replaces the Login button when the user has a
   session. Solid black background to feel like a primary CTA — the
   logged-in path should pull users straight into the simulator
   instead of dwelling on the marketing homepage. Matches the
   height/padding rhythm of .btn-login so swapping one for the other
   doesn't shift surrounding elements. */
.btn-dashboard {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--ink, #0c0c0e);
  border-radius: var(--r-sm);
  background: var(--ink, #0c0c0e);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  transition: background 150ms ease, border-color 150ms ease, box-shadow 150ms ease;
}

.btn-dashboard:hover {
  background: #000;
  border-color: #000;
  color: #fff;
  box-shadow: 0 6px 18px -10px rgba(0, 0, 0, 0.45);
}

@media (min-width: 720px) {
  .btn-dashboard { height: 36px; padding: 0 14px; }
}

/* Keep brand + nav on one row on every viewport. Without this,
   .top-nav inherits flex-wrap: wrap and the whole nav cluster
   drops below the logo on narrow screens. */
.top-nav {
  flex-wrap: nowrap;
  gap: 10px;
}

@media (min-width: 720px) {
  .top-nav { gap: 14px; }
}

.home-trust {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
  color: var(--muted);
  font-size: 12.5px;
  font-weight: 500;
}

.home-trust li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.home-trust li + li::before {
  content: "·";
  color: var(--faint);
  margin-right: 4px;
}

/* ── dashboard mock (right column) ───────────────── */

.home-preview { display: block; min-width: 0; }

.mock {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--surface);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.6) inset,
    0 12px 32px -20px rgba(12, 12, 14, 0.25);
}

@media (min-width: 720px) {
  .mock {
    grid-template-columns: 184px minmax(0, 1fr);
    gap: 20px;
    padding: 20px;
    box-shadow:
      0 1px 0 rgba(255, 255, 255, 0.6) inset,
      0 18px 50px -30px rgba(12, 12, 14, 0.35),
      0 60px 110px -60px rgba(12, 12, 14, 0.22);
  }
}

@media (min-width: 1020px) {
  .mock { padding: 22px; gap: 24px; }
}

.mock-rail {
  display: grid;
  gap: 10px;
  align-content: start;
}

.mock-tabs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-2);
}

.mock-tab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 2px;
  border-radius: 5px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mock-tab.active {
  background: var(--ink);
  color: #fff;
}

.mock-cards {
  display: grid;
  gap: 5px;
}

@media (min-width: 720px) {
  /* On desktop the rail is a fixed-width side column, so cap its
     height and let extras scroll. On mobile the rail stacks above
     the board and is expected to be a longer scroll. */
  .mock-cards {
    max-height: 360px;
    overflow-y: auto;
    padding-right: 2px;
    scrollbar-width: thin;
    scrollbar-color: var(--line-strong) transparent;
  }
}

.mock-card {
  display: grid;
  gap: 5px;
  padding: 8px 10px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--surface);
}

.mock-card-active {
  border-color: var(--ink);
  box-shadow: inset 3px 0 0 var(--accent);
  padding-left: 12px;
}

.mock-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.mock-card-sport {
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 6px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.mock-card-teams {
  display: inline-flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.mock-at {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--faint);
  font-weight: 500;
}

.mock-card-tip {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--muted);
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* ── mock board ──────────────────────────────────── */

.mock-board {
  display: grid;
  gap: 16px;
  align-content: start;
  min-width: 0;
}

.mock-board-head {
  display: grid;
  gap: 8px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}

/* "Sample preview" badge — explicitly signals the right side of
   the mock is an illustration of the simulator's output, not a
   live, clickable game. Uses the warn (gold) palette so it reads
   as informational/non-interactive at a glance. */
.mock-sample-tag {
  align-self: start;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 22px;
  padding: 0 10px;
  border-radius: 999px;
  background: var(--warn-soft, #f8eecb);
  color: var(--warn, #8a6422);
  border: 1px solid rgba(138, 109, 59, 0.3);
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.mock-sample-dot {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--warn, #8a6422);
}

/* The whole mock is wrapped in a single anchor (.mock-link) that
   opens the simulator's Today view. Users who don't realize the
   content is illustrative can still tap anywhere on the graphic
   and land somewhere useful. We disable pointer events on the
   inner card-like elements so the *whole* mock reads as one
   target, not a grid of separate links. */
.mock .mock-card,
.mock .mock-tab,
.mock .mock-stat,
.mock .mock-box-row {
  pointer-events: none;
}

.mock-link {
  display: block;
  text-decoration: none;
  color: inherit;
  border-radius: var(--r-lg);
  transition: transform 200ms ease;
}

.mock-link .mock {
  transition: box-shadow 220ms ease, border-color 200ms ease;
}

.mock-link:hover .mock {
  border-color: var(--line-strong);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 22px 60px -28px rgba(12, 12, 14, 0.42),
    0 70px 130px -50px rgba(12, 12, 14, 0.28);
}

@media (hover: hover) and (min-width: 720px) {
  .mock-link:hover { transform: translateY(-2px); }
}

.mock-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 4px;
}

.mock-title {
  font-family: var(--font-sans);
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink);
  margin: 0;
}

/* ── mock right-side: sample game snapshot + box score ─────
   The right side is a static showcase of what the simulator
   produces — labeled "Sample output · MLB" so it's clearly
   illustrative, not pretending to be a live sim. Color tokens
   mirror the actual dashboard (.stat-cell--bet signal-strong
   /-neutral/-weak) so the visual language carries over. */

/* Game snapshot card (matchup + simulated score + book line) */

.mock-snapshot {
  display: grid;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

.mock-snapshot-headline {
  display: flex;
}

.mock-snapshot-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.mock-snapshot-prob {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
}

.mock-snapshot-prob-team {
  display: grid;
  gap: 2px;
  justify-items: start;
}
.mock-snapshot-prob-team:last-child { justify-items: end; }

.mock-snapshot-abbr {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--muted);
}

.mock-snapshot-pct {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--ink-2);
  line-height: 1;
}

.mock-snapshot-prob-team-fav .mock-snapshot-abbr { color: var(--ink); }
.mock-snapshot-prob-team-fav .mock-snapshot-pct  { color: var(--ink); }

/* Two-tone horizontal bar showing the implied win-prob split.
   The away segment uses the faint ink tone, the home (favored)
   segment uses the accent — same visual hierarchy as the team
   abbreviations above it. */
.mock-snapshot-bar {
  display: flex;
  height: 8px;
  border-radius: 999px;
  overflow: hidden;
  background: var(--surface-3, var(--line-soft));
}
.mock-snapshot-bar-away,
.mock-snapshot-bar-home {
  height: 100%;
  width: var(--w, 50%);
}
.mock-snapshot-bar-away { background: var(--line-strong); }
.mock-snapshot-bar-home { background: var(--accent-deep); }

.mock-snapshot-lines {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  padding-top: 10px;
  border-top: 1px solid var(--line);
}

.mock-snapshot-line {
  display: grid;
  gap: 3px;
  padding-right: 6px;
}
.mock-snapshot-line + .mock-snapshot-line {
  padding-left: 10px;
  border-left: 1px solid var(--line-soft);
}

.mock-snapshot-line-tag {
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}

.mock-snapshot-line-val {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}

/* Sample box score — color-coded stat cells */

.mock-box {
  display: grid;
  gap: 10px;
}

.mock-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px 12px;
  flex-wrap: wrap;
}

.mock-box-kicker {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.mock-box-legend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.mock-box-legend-pill {
  display: inline-flex;
  align-items: center;
  height: 16px;
  padding: 0 6px;
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
}

.mock-box-row {
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-md);
  background: var(--surface);
}

.mock-box-player {
  display: grid;
  gap: 1px;
}

.mock-box-player strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--ink);
}

.mock-box-player-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}

.mock-box-cells {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.mock-stat {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px 8px;
  padding: 7px 9px;
  border: 1px solid var(--line-soft);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  font-variant-numeric: tabular-nums;
}

.mock-stat-label {
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.mock-stat-val {
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.015em;
  line-height: 1;
}

.mock-stat-sub {
  grid-column: 1 / -1;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 500;
  color: var(--muted);
  letter-spacing: 0;
}

/* Signal-tinted backgrounds — mirror v3.css .stat-cell--bet exactly
   so the homepage box score reads as the same product. */

.mock-signal-strong {
  background: var(--positive-soft);
  border-color: rgba(44, 106, 74, 0.35);
  color: var(--positive);
}
.mock-signal-strong .mock-stat-sub { color: var(--positive); }
.mock-signal-strong.mock-box-legend-pill { color: var(--positive); }

.mock-signal-neutral {
  background: var(--warn-soft);
  border-color: rgba(138, 109, 59, 0.30);
  color: var(--warn);
}
.mock-signal-neutral .mock-stat-sub { color: var(--warn); }
.mock-signal-neutral.mock-box-legend-pill { color: var(--warn); }

.mock-signal-weak {
  background: var(--negative-soft);
  border-color: rgba(139, 53, 39, 0.30);
  color: var(--negative);
}
.mock-signal-weak .mock-stat-sub { color: var(--negative); }
.mock-signal-weak.mock-box-legend-pill { color: var(--negative); }

@media (max-width: 540px) {
  .mock-snapshot-pct { font-size: 20px; }
  .mock-snapshot-prob { gap: 8px; }
  .mock-snapshot-lines { grid-template-columns: 1fr 1fr; row-gap: 8px; }
  .mock-snapshot-line:nth-child(3) { grid-column: 1 / -1; padding-left: 0; border-left: 0; }
  .mock-box-cells { gap: 4px; }
  .mock-stat { padding: 6px 7px; }
  .mock-stat-val { font-size: 14px; }
}

.mock-empty {
  margin: 0;
  padding: 14px;
  border: 1px dashed var(--line);
  border-radius: var(--r-sm);
  background: var(--surface-2);
  color: var(--muted);
  font-size: 12.5px;
  line-height: 1.5;
}


/* ── loading skeletons for the rail cards ────────── */

.mock-card-loading {
  background: var(--surface-2);
  border-color: var(--line-soft);
}

.mock-card-skeleton {
  display: block;
  height: 14px;
  width: 70%;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--line-soft) 0%,
    var(--line) 50%,
    var(--line-soft) 100%
  );
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s linear infinite;
}

@keyframes skeleton-shimmer {
  from { background-position: 200% 0; }
  to   { background-position: -200% 0; }
}

@media (prefers-reduced-motion: reduce) {
  .mock-card-skeleton { animation: none; }
}

/* ── footer ──────────────────────────────────────── */

.home-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 20px;
  padding: 24px 4px 8px;
  border-top: 1px solid var(--line);
  font-size: 12px;
  color: var(--muted);
}

@media (min-width: 720px) {
  .home-foot { padding: 28px 4px 8px; }
}

.home-foot-brand { font-weight: 600; color: var(--ink-2); }

.home-foot-links {
  display: inline-flex;
  gap: 14px;
  margin-left: auto;
}

.home-foot-links a {
  color: var(--ink-2);
  font-weight: 500;
}

.home-foot-links a:hover { color: var(--accent-deep); }

.home-foot-disclaimer {
  flex-basis: 100%;
  margin: 0;
  font-size: 11.5px;
  color: var(--faint);
  line-height: 1.5;
}

/* ── rolling games banner ────────────────────────── */

.games-band {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  height: 44px;
  padding: 0 14px 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  overflow: hidden;
}

.games-band-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding-right: 14px;
  border-right: 1px solid var(--line);
  height: 100%;
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}

.games-band-dot {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--positive);
  box-shadow: 0 0 0 3px var(--positive-soft);
  animation: pulse 2.4s ease-in-out infinite;
}

.games-band-track-wrap {
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  align-items: center;
}

.games-band-track-wrap::before,
.games-band-track-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 56px;
  z-index: 2;
  pointer-events: none;
}
.games-band-track-wrap::before { left: 0; background: linear-gradient(90deg, var(--surface), transparent); }
.games-band-track-wrap::after  { right: 0; background: linear-gradient(270deg, var(--surface), transparent); }

.games-band-track {
  display: inline-flex;
  align-items: center;
  gap: 22px;
  white-space: nowrap;
  animation: games-band-scroll 70s linear infinite;
  will-change: transform;
}

.games-band:hover .games-band-track { animation-play-state: paused; }

@keyframes games-band-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

.game-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  font-size: 12.5px;
  color: var(--ink-2);
  font-weight: 500;
}

.game-chip-tag {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 3px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.14em;
}

.tag-nba  { background: rgba(176, 133, 51, 0.16); color: var(--accent-deep); }
.tag-mlb  { background: rgba(44, 106, 74, 0.14);  color: var(--positive); }
.tag-nhl  { background: rgba(31, 79, 166, 0.14);  color: #1f4fa6; }
.tag-wnba { background: rgba(200, 60, 60, 0.13);  color: #b13a3a; }
.tag-nfl  { background: rgba(12, 12, 14, 0.08);   color: var(--ink); }

.game-chip-match {
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.005em;
}

.game-chip-match em {
  font-style: normal;
  color: var(--faint);
  font-weight: 500;
  padding: 0 3px;
}

.game-chip-time {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.02em;
}

@media (prefers-reduced-motion: reduce) {
  .games-band-track { animation: none; }
}

@media (max-width: 540px) {
  .games-band { padding: 0 10px 0 10px; }
  .games-band-label { padding-right: 10px; font-size: 9.5px; letter-spacing: 0.1em; }
  .game-chip { font-size: 12px; gap: 6px; }
  .games-band-track { gap: 16px; }
}

/* ── bottom CTA box ──────────────────────────────
   Mirrors methodology.css .cta-block / .cta-title /
   .cta-btn-primary in voice and proportions: serif
   editorial headline, gold accent button. Visually
   distinct from the hero's dark-ink primary so it
   reads as a closing CTA, not a duplicate. */

.home-cta-box {
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
  padding: 36px 24px;
  margin: 24px 4px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: linear-gradient(180deg, var(--surface) 0%, var(--surface-2) 100%);
}

@media (min-width: 720px) {
  .home-cta-box { padding: 44px 32px; margin: 32px 4px 24px; }
}

@media (min-width: 1020px) {
  .home-cta-box { padding: 56px 40px; margin: 40px 4px 24px; }
}

/* Type mirrors the hero: bold sans headline + medium-weight sans
   sub, same letter-spacing ratios. Sizes are scaled down from the
   hero (headline 34–54 → 28–42; sub 18–22 → 16–18) so the CTA
   reads as a "closing argument" of the hero, not a competing one. */
.home-cta-title {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(28px, 4.2vw, 42px);
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--ink);
}

.home-cta-copy {
  margin: 0 auto;
  max-width: 560px;
  font-family: var(--font-sans);
  font-weight: 500;
  color: var(--ink-2);
  font-size: clamp(16px, 1.4vw, 18px);
  line-height: 1.45;
}

/* Gold accent button — mirrors methodology .cta-btn-primary.
   Self-contained so this rule doesn't depend on .btn-primary
   from elsewhere (whose dark-ink style would conflict). */
.home-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 50px;
  min-height: 48px;
  min-width: 48px;
  padding: 0 22px;
  margin-top: 6px;
  border-radius: var(--r-sm);
  background: var(--accent);
  color: var(--surface);
  border: 1px solid var(--accent-deep);
  font-weight: 600;
  font-size: 14.5px;
  letter-spacing: 0.01em;
  box-shadow: none;
  transition: transform 0.08s ease, background 0.15s ease, border-color 0.15s ease;
}

.home-cta-btn:hover {
  transform: translateY(-1px);
  background: var(--accent-deep);
  color: var(--surface);
  border-color: var(--accent-deep);
}

.home-cta-btn .btn-arrow { font-family: var(--font-mono); font-size: 16px; }