/* ============================================================
   FRNTCOURT — marketing pages shared brand layer
   Loaded AFTER each page's inline <style> block so it overrides
   the per-page styling with the homepage's visual language. Used
   by /for-clubs, /for-parents, /pricing, /help, /get-started.
   ============================================================ */

body {
  font-family: 'DM Sans', 'Helvetica Neue', sans-serif;
  background: #08090D;
  color: #F0F2F7;
  -webkit-font-smoothing: antialiased;
}

/* ── Brand wordmark ─────────────────────────────────────────── */
.frntcourt-wordmark {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 22px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
}
.wordmark-accent { color: var(--orange, #F46027); }

/* ── NAV — same translucent dark shell + orange CTA pill ────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(8,9,13,0.85) !important;
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
  height: 68px;
  padding: 0 6vw !important;
  transition: border-bottom-color .2s, box-shadow .2s, background .2s;
}
.nav.scrolled {
  border-bottom-color: rgba(244,96,39,0.35) !important;
  box-shadow: 0 6px 28px rgba(0,0,0,0.45);
  background: rgba(8,9,13,0.94) !important;
}
.nav-links a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600;
  font-size: 13px;
  color: #B0B8CC !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.nav-links a:hover { color: var(--orange, #F46027) !important; }

/* ── BUTTONS — pill, Space Grotesk uppercase ──────────────── */
.btn,
.btn-primary,
.btn-secondary,
.btn-outline,
.btn-danger,
a.btn-primary, a.btn-outline, a.btn-secondary, a.btn-danger,
button.btn-primary, button.btn-outline, button.btn-secondary, button.btn-danger {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  transition: transform .12s, opacity .15s, background .15s, border-color .15s, box-shadow .15s;
}
.btn:active, .btn-primary:active, .btn-outline:active, .btn-secondary:active { transform: scale(.97); }
.btn-primary,
a.btn-primary,
button.btn-primary {
  background: var(--orange, #F46027) !important;
  color: #0a0a0a !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(244,96,39,0.25);
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background: var(--orange-hover, #F78C5A) !important;
  box-shadow: 0 8px 22px rgba(244,96,39,0.32) !important;
}
.btn-outline,
a.btn-outline,
button.btn-outline {
  background: transparent !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,0.30) !important;
}
.btn-outline:hover,
a.btn-outline:hover,
button.btn-outline:hover {
  border-color: #fff !important;
  background: rgba(255,255,255,0.04) !important;
}

/* ── DISPLAY HEADINGS — Barlow Condensed italic uppercase ─── */
h1, h2, h3,
.section-title,
.hero h1 {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-style: italic !important;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #F0F2F7;
}
h1, .hero h1 { font-weight: 900 !important; line-height: 0.92 !important; }
h2, .section-title { font-weight: 900 !important; line-height: 1.0 !important; }
h3 { font-weight: 800 !important; line-height: 1.05 !important; }
.section-eyebrow,
.eyebrow {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--orange, #F46027);
  margin-bottom: 6px;
  display: inline-block;
}
.section-sub,
.lead {
  font-family: 'DM Sans', sans-serif !important;
  color: #B0B8CC !important;
}

/* Highlight word inside any heading — orange */
h1 span, h2 span, .section-title span,
h1 .orange, h2 .orange, .section-title .orange {
  color: var(--orange, #F46027) !important;
}

/* ── HERO bg — subtle radial-gradient atmosphere ─────────── */
.hero {
  background:
    radial-gradient(ellipse at 80% 20%, rgba(244,96,39,0.18) 0%, transparent 55%),
    radial-gradient(ellipse at 10% 90%, rgba(34,197,94,0.10) 0%, transparent 55%),
    #08090D !important;
}

/* ── CARDS / surfaces — dark elevated with brand hover ───── */
.card,
.feature-card,
.audience-card,
.plan-card,
.faq-item,
.tier-card,
.role-card {
  background: #141620 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  border-radius: 14px !important;
  transition: border-color .12s, transform .12s, box-shadow .12s !important;
}
.card:hover,
.feature-card:hover,
.audience-card:hover,
.plan-card:hover,
.tier-card:hover,
.role-card:hover {
  border-color: rgba(244,96,39,0.30) !important;
  transform: translateY(-2px);
}

/* Most-popular / featured plan card gets the orange glow ring */
.plan-card--featured,
.plan-card.featured {
  border-color: rgba(244,96,39,0.45) !important;
  box-shadow: 0 8px 36px rgba(244,96,39,0.10) !important;
}

/* ── FORMS ──────────────────────────────────────────────── */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select {
  background: #0E1018 !important;
  border: 1px solid rgba(255,255,255,0.10) !important;
  color: #F0F2F7 !important;
  border-radius: 10px !important;
  font-family: 'DM Sans', sans-serif !important;
  transition: border-color .12s, box-shadow .12s !important;
}
input:focus, textarea:focus, select:focus {
  outline: none !important;
  border-color: rgba(244,96,39,0.6) !important;
  box-shadow: 0 0 0 3px rgba(244,96,39,0.15) !important;
}
label {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #B0B8CC;
}

/* ── FOOTER ─────────────────────────────────────────────── */
.footer {
  background: #08090D !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
.footer-links a {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #B0B8CC;
}
.footer-links a:hover { color: var(--orange, #F46027) !important; }

/* ── PRICING TABLE / TIER CARDS ─────────────────────────── */
.plan-name {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  text-transform: uppercase;
  letter-spacing: -0.005em;
}
.plan-price {
  font-family: 'Barlow Condensed', sans-serif !important;
  font-weight: 900 !important;
  font-style: italic !important;
  letter-spacing: -0.02em;
  color: #F0F2F7;
}
.plan-badge,
.plan-badge--popular,
.plan-badge--elite {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
  padding: 4px 10px !important;
}
.plan-badge--popular {
  background: rgba(244,96,39,0.14) !important;
  color: var(--orange, #F46027) !important;
  border: 1px solid rgba(244,96,39,0.4);
}
.plan-badge--elite {
  background: rgba(201,169,78,0.12) !important;
  color: #C9A94E !important;
  border: 1px solid rgba(201,169,78,0.4);
}
.plan-cta,
.plan-cta--primary,
.plan-cta--outline,
.plan-cta--gold {
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
}
.plan-cta--primary {
  background: var(--orange, #F46027) !important;
  color: #0a0a0a !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(244,96,39,0.25);
}
.plan-cta--outline {
  background: transparent !important;
  border: 1.5px solid rgba(255,255,255,0.25) !important;
  color: #fff !important;
}
.plan-cta--gold {
  background: linear-gradient(135deg, #C9A94E, #a37f25) !important;
  color: #0a0a0a !important;
  border: none !important;
}

/* ── HELP-PAGE ANSWERS / DETAILS  ───────────────────────── */
.help-q,
.faq-item summary,
details summary {
  font-family: 'DM Sans', sans-serif !important;
  font-weight: 700 !important;
  color: #F0F2F7 !important;
}

/* ── COOKIE BANNER ──────────────────────────────────────── */
.cookie-banner {
  background: #141620 !important;
  border: 1px solid rgba(255,255,255,0.06) !important;
  color: #B0B8CC !important;
  border-radius: 12px !important;
}
.cookie-banner a { color: var(--orange, #F46027) !important; }
.cookie-accept {
  background: var(--orange, #F46027) !important;
  color: #0a0a0a !important;
  border: none !important;
  font-family: 'Space Grotesk', sans-serif !important;
  font-weight: 800 !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-radius: 999px !important;
}

/* ── COMPARISON TABLE — same as homepage ────────────────── */
.compare-table th, .compare-table td {
  font-family: 'DM Sans', sans-serif;
  border-color: rgba(255,255,255,0.06) !important;
}
.compare-table thead th {
  font-family: 'Space Grotesk', sans-serif !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #8892A4 !important;
}