/* ============================================================
   GolfBet — sub-page shell, aligned to BC aesthetic.
   Green/black/white · Sora display · mixed case.
   ============================================================ */

html, body { margin: 0; padding: 0; background: var(--ink-800); color: var(--paper-100); overflow-x: hidden; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--green-500); color: var(--ink-900); }

/* ---- TICKER ---- */
.top-ticker {
  background: var(--ink-900);
  border-bottom: 1px solid var(--rule);
  color: var(--paper-300);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
}
.top-ticker .green { color: var(--green-500); }
.top-ticker .up { color: var(--green-400); }
.top-ticker .down { color: var(--red-500); }

/* ---- NAV (matches homepage) ---- */
nav.bar {
  display: flex; align-items: stretch;
  height: 72px;
  position: sticky; top: 0; z-index: 50;
  background: rgba(var(--gb-ink-rgb),0.85);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
}
.brand {
  display: flex; align-items: center; gap: 12px;
  padding: 0 28px;
  border-right: 1px solid var(--rule);
}
.gmark { width: 36px; height: 36px; display: inline-flex; flex-shrink: 0; }
.gmark svg { width: 100%; height: 100%; }
.gmark .g-stroke { stroke: var(--green-500); }
.gmark .g-fill { fill: var(--green-500); }
.gmark .g-ball { fill: var(--paper-50); }
.gb-wordmark { font-size: 24px; }
.nav-links {
  display: flex; align-items: center; gap: 6px;
  margin: 0 28px 0 auto;
}
.nav-links a {
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 500;
  color: var(--paper-200);
  border-radius: 6px;
  transition: color .15s, background .15s;
}
.nav-links a:hover { color: var(--green-500); background: rgba(255,255,255,0.04); }
.nav-links a.active { color: var(--green-500); background: rgba(var(--gb-mint-rgb),0.08); }
.nav-cta {
  margin-left: 10px;
  background: var(--green-500);
  color: var(--gb-ink) !important;
  font-weight: 600;
  padding: 10px 18px !important;
}
.nav-cta:hover { background: var(--green-400) !important; }

/* ---- PAGE HEADER ---- */
.ph {
  padding: 72px 64px 56px;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: end;
  position: relative;
}
.ph .crumb {
  display: flex; gap: 8px; align-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--paper-400);
  margin-bottom: 22px;
  text-transform: uppercase;
}
.ph .crumb .green { color: var(--green-500); }
.ph h1 {
  margin: 0;
  color: var(--paper-50);
}
.ph h1 .green { color: var(--green-500); }
.ph h1 .red   { color: var(--red-500); }
.ph .right { color: var(--paper-200); font-size: 16px; line-height: 1.6; max-width: 440px; }
.ph .right p { margin: 0; }
.ph .meta {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; gap: 24px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--paper-400);
  text-transform: uppercase;
}
.ph .meta b { color: var(--paper-50); font-family: var(--font-display); font-size: 16px; font-weight: 600; letter-spacing: -0.01em; text-transform: none; }

/* ---- SECTION HEAD ---- */
.section-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  padding: 22px 64px;
  border-bottom: 1px solid var(--rule);
  background: var(--ink-900);
  align-items: center;
}
.section-num {
  font-family: var(--font-mono);
  color: var(--green-500);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
}
.section-ttl {
  font-weight: 600;
  color: var(--paper-50);
}

/* ---- METRIC STRIP ---- */
.metric-strip {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid var(--rule);
  background: var(--ink-900);
}
.metric-strip .m {
  padding: 36px;
  border-left: 1px solid var(--rule);
}
.metric-strip .m:first-child { border-left: none; }
.metric-strip .m .n {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--display-stat);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--paper-50);
}
.metric-strip .m .n.gold,
.metric-strip .m .n.green { color: var(--green-500); }
.metric-strip .m .l {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--paper-400);
  margin-top: 12px;
  text-transform: uppercase;
}

/* ---- SCREENSHOT BAND ---- */
.screenshot-band {
  padding: 48px 64px 64px;
  border-bottom: 1px solid var(--rule);
  background:
    radial-gradient(ellipse 60% 40% at 50% 0%, rgba(var(--gb-mint-rgb),0.08), transparent 70%),
    var(--ink-800);
}
.screenshot-band .shot-copy {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 28px;
  align-items: end;
  margin-bottom: 28px;
}
.screenshot-band .shot-copy h2 {
  margin: 0;
  color: var(--paper-50);
}
.screenshot-band .shot-copy p {
  margin: 0;
  max-width: 620px;
  color: var(--paper-200);
  line-height: 1.55;
}
.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}
.screenshot-card {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--rule-strong);
  background: var(--ink-900);
  border-radius: 28px;
  padding: 8px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.32), 0 0 32px rgba(var(--gb-mint-rgb),0.05);
}
.screenshot-card img {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 18;
  object-fit: cover;
  object-position: top center;
  border-radius: 22px;
  background: var(--ink-700);
}
.screenshot-card .cap {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(var(--gb-text-rgb),0.14);
  border-radius: 14px;
  background: rgba(var(--gb-bg0-rgb),0.78);
  backdrop-filter: blur(8px);
  color: var(--paper-100);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
}
.screenshot-card .cap b {
  color: var(--green-500);
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: -0.02em;
}

/* ---- FOOTER ---- */
footer {
  background: var(--ink-900);
  border-top: 1px solid var(--rule);
  padding: 64px 64px 32px;
  color: var(--paper-200);
  font-size: 14px;
}
.foot-grid {
  display: grid;
  grid-template-columns: 1.3fr repeat(4, 1fr);
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}
.foot-grid h4 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--green-500);
  text-transform: uppercase;
  margin: 0 0 16px;
}
.foot-grid ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.foot-grid a { color: var(--paper-200); transition: color .15s; }
.foot-grid a:hover { color: var(--green-500); }
.foot-brand .gb-wordmark { font-size: 36px; }
.foot-brand small {
  display: block;
  color: var(--paper-300);
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 280px;
}
.foot-bottom {
  margin-top: 28px;
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--paper-400);
  letter-spacing: 0.1em;
}
.foot-bottom .green { color: var(--green-500); }

/* ---- CTA BAR (bottom of every sub-page) ---- */
.cta-bar {
  background:
    radial-gradient(ellipse 50% 40% at 50% 50%, rgba(var(--gb-mint-rgb),0.12), transparent 70%),
    var(--ink-900);
  padding: 96px 64px;
  text-align: center;
  border-top: 1px solid var(--rule-strong);
  position: relative;
  overflow: hidden;
}
.cta-bar h2 {
  margin: 0;
  color: var(--paper-50);
}
.cta-bar h2 .green,
.cta-bar h2 .gold { color: var(--green-500); }
.cta-bar p { color: var(--paper-200); max-width: 540px; margin: 18px auto 28px; font-size: 16px; line-height: 1.55; }
.cta-bar .grp { display: inline-flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.cta-bar .btn-gold { background: var(--green-500); color: var(--gb-ink); }
.cta-bar .btn-gold:hover { background: var(--green-400); transform: translateY(-1px); }
.cta-bar-arcs { position: absolute; inset: 0; opacity: 0.55; pointer-events: none; }
.cta-bar-arcs svg { width: 100%; height: 100%; }
.cta-bar-arcs path { stroke: var(--green-500); fill: none; stroke-width: 1.2; stroke-dasharray: 2 6; }

/* ============================================================
   HEADLINE OVERRIDES — drop uppercase from display headlines
   in older sub-pages so they read mixed-case + Sora cleanly.
   Eyebrows, codes, and monospace labels stay uppercase because
   we don't touch text-transform on them.
   ============================================================ */
h1, h2, h3, h4, h5,
.section-ttl,
.feature h3, .feature-grid .feature h3,
.pitch h2, .tiers h3, .tier h3, .step h4,
.faq .q, details.faq-row .q,
.contact h2, .quick .qc h3, .cat h4, .out-card h3,
.status h2, .cats h2, .faq h2,
.studio h2, .templates h2, .pack-copy h2, .pro-copy h2,
.passport h2, .door-sign h2,
.cta-bar h2, .final h2,
.deal-h .t, .calc-head .ttl, .ledger-h .t,
.flight-step h3, .runner-step h3,
.builder-head h2, .menu-head h2, .runner-head h2,
.hb-cocktail .nm, .game-card .gname, .lib-title,
.line .game, .menu-item .nm,
.receipt h4, .tpl .nm, .st .svc, .table-section h2,
.studio .pt h4, .pack-row .id,
.preview-head h2, .board-intro h2,
.library-head h2, .pro-card .ph .t,
.contact .lr .ch, .form .fh, .lib-custom-math strong,
.pair-card .pair-flow, .pair-card .pair-amt,
.pro-card .price .free, .scorebox .v, .ledger-rows .lr .val,
.member-card .hd .nm, .sb-card .t,
.flight-pt h3, .games-card .gr .nm,
.hb-cocktail .rk, .runner-step .n, .flight-step .num,
.flight-pt .n, .step .n, .tier .pay .n,
.metric-strip .m .n {
  text-transform: none !important;
  letter-spacing: -0.02em !important;
}
/* monospace number cells: keep tracking neutral */
.calc-bet .val, .metric-strip .m .n {
  letter-spacing: -0.025em !important;
}
/* buttons keep title case */
.btn, .nav-cta, .ink-btn, .ink-btn.ghost, .btn-gold, .btn-ghost {
  text-transform: none !important;
  letter-spacing: 0 !important;
}
/* Refresh font-family on display elements so they all use Sora */
h1, h2, h3, h4,
.section-ttl, .ph h1, .feature h3, .pitch h2, .tier h3, .step h4,
.studio h2, .templates h2, .pack-copy h2, .pro-copy h2,
.passport h2, .cta-bar h2, .final h2, .builder-head h2,
.runner-head h2, .menu-head h2, .preview-head h2,
.library-head h2, .table-section h2, .contact h2,
.calc-head .ttl, .deal-h .t, .ledger-h .t,
.game-card .gname, .lib-title, .line .game, .menu-item .nm,
.flight-step h3, .runner-step h3, .flight-pt h3,
.member-card .hd .nm, .out-card h3, .quick .qc h3, .cat h4,
.tpl .nm, .st .svc, .receipt h4,
.contact .lr .ch, .form .fh, .lib-custom-math strong,
.pair-card .pair-flow, .pair-card .pair-amt,
.status h2, .cats h2, .faq h2,
.hb-cocktail .nm, .sb-card .t, .games-card .gr .nm,
.metric-strip .m .n {
  font-family: var(--font-display) !important;
  font-weight: 700;
}
/* color: old-gold and old-cream classes auto-map to new palette via aliases */

@media (max-width: 900px) {
  .screenshot-band { padding: 40px 20px 52px; }
  .screenshot-band .shot-copy {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .screenshot-grid { grid-template-columns: 1fr; }
}