/* ─── content.css ─────────────────────────────────────────────────────────
   v=440 — Modular stylesheet for standalone STATIC content/marketing pages
   (e.g. /learn/*). These pages are plain static HTML served outside the React
   app, so each one links three stylesheets:
     1. styles.css   — design tokens (:root) + .brand-logo sizing + base.
     2. homepage.css — the shared marketing nav (.home-nav*), so the nav is
                       IDENTICAL to the React app's by construction. No
                       duplication: one source of truth, reused here.
     3. content.css  — this file, the article-specific typography below.
   No inline or embedded <style> per the modular-CSS rule. New static pages
   reuse all three; only page-unique styling (if any) goes here.
*/

body {
    margin: 0;
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}
html { scroll-behavior: smooth; }

/* The marketing nav markup uses <a> tags here (vs the app's <button>s), so
   kill the default underline. Layout, colors, and the green Subscribe button
   are all inherited unchanged from homepage.css. */
.home-nav a { text-decoration: none; }

/* ── Page + Article ──
   v=445 — mirrors the legal pages: a padded page wrapper (side gutters) with a
   centered bg-card panel inside, so the white body text reads on a softer
   elevated surface instead of straight on the near-black page. */
.content-page { padding: 32px 16px 48px; }
.article {
    max-width: 800px;
    margin: 0 auto;
    padding: 40px 48px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.article .eyebrow {
    font-size: 0.75rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.16em; color: var(--accent); margin-bottom: 14px;
}
.article h1 { font-size: 2.4rem; font-weight: 900; letter-spacing: -0.02em; line-height: 1.12; margin: 0 0 20px; }
.article h2 { font-size: 1.5rem; font-weight: 800; letter-spacing: -0.01em; margin: 44px 0 14px; line-height: 1.2; }
.article h3 { font-size: 1.1rem; font-weight: 700; margin: 28px 0 8px; color: var(--text-primary); }
.article p { color: var(--text-secondary); margin: 0 0 18px; }
/* v=446 — short sub-headline (deck) under the H1. This is the emphasized line
   now; the intro paragraph dropped to body size (the old .lead was removed). */
.article .deck { font-size: 1.2rem; line-height: 1.5; font-weight: 400; color: var(--text-primary); margin: 0 0 28px; }
.article strong { color: var(--text-primary); font-weight: 700; }
.article ul { color: var(--text-secondary); padding-left: 22px; margin: 0 0 18px; }
.article li { margin-bottom: 8px; }
/* v=442 — target PROSE links only (class-less anchors). Button-classed
   anchors (.home-cta*, .cta-secondary) keep their own styling and are no
   longer recolored or underlined by this broad rule. */
.article a:not([class]) { color: var(--accent); text-decoration: none; }
.article a:not([class]):hover { text-decoration: underline; }

/* ── CTA block ── */
/* v=445 — darker inset (page bg-primary) so the CTA box stands apart from the
   now bg-card .article panel it sits inside (card-on-card would blend). The
   orange button + white heading pop against the darker callout. */
.cta-card { background: var(--bg-primary); border: 1px solid var(--border); border-radius: 16px; padding: 28px; margin: 40px 0; text-align: center; }
.cta-card h2 { margin: 0 0 10px; font-size: 1.35rem; }
.cta-card p { margin: 0 0 20px; }
/* v=442 — the primary CTA now reuses the app's `.home-cta .home-cta-primary`
   button (orange gradient, white text, lift-on-hover) so it matches the
   homepage CTAs exactly. It's an <a> here (vs the app's <button>), so kill the
   default anchor underline. The .article a rule above no longer touches it
   (it's class-scoped now). */
.home-cta { text-decoration: none; }
.cta-card .cta-secondary { display: block; margin-top: 22px; font-size: 0.92rem; color: var(--accent); text-decoration: none; }
.cta-card .cta-secondary:hover { text-decoration: underline; }

/* ── Footer ── */
.content-footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 24px; text-align: center; font-size: 0.8rem; color: var(--text-muted); }
.content-footer a { color: var(--text-muted); text-decoration: none; }
.content-footer a:hover { text-decoration: underline; }
.content-footer .dot { margin: 0 8px; }

/* ── Free Picks page (v=458) ──
   Server-rendered pick blocks for /free-picks. Same darker-inset treatment
   as .cta-card so the cards stand apart from the .article panel. Ship 3
   replaces the .fp-card blocks with real React PickCards inside
   #free-picks-mount; these styles stay as the crawler/no-JS rendering.
   v=478 — the yesterday's-results (receipts) strip styles removed with the
   strip itself: free picks is a today-only surface; the public track
   record is the historical/validation surface. */

.fp-card {
    background: var(--bg-primary); border: 1px solid var(--border);
    border-radius: 14px; padding: 22px 24px; margin: 0 0 16px;
}
.fp-slot {
    font-size: 0.72rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.14em; color: var(--accent); margin-bottom: 10px;
}
.fp-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.fp-batter { font-size: 1.35rem; font-weight: 800; color: var(--text-primary); }
.fp-matchup { color: var(--text-secondary); font-size: 0.92rem; margin-top: 4px; }
.fp-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 10px; font-size: 0.88rem; }
.fp-odds { color: var(--green); font-weight: 700; }
.fp-statline { color: var(--text-secondary); }
.fp-analysis { margin: 14px 0 0; font-size: 0.95rem; }
.fp-drop { font-size: 1.05rem; }
/* v=482 — legend trigger under the free board (opens the shared
   BadgeLegendModal, the app's own legend). Muted on purpose: reference
   affordance, not a CTA competing with Subscribe. */
.fp-legend-row { text-align: center; margin: 10px 0 2px; }
.fp-legend-link {
    background: none; border: none; cursor: pointer;
    color: var(--text-muted); font-size: 0.85rem;
    text-decoration: underline; text-underline-offset: 3px;
}
.fp-legend-link:hover { color: var(--text-secondary); }
/* v=461 — Joe's final free-page structure (the v=459/460 custom card
   layouts are GONE — "tail wagging the dog"): the cards render EXACTLY as
   the Blast Score tool renders them, at app width, between two narrow
   CENTERED text panels. PickCard handles its own mobile stacking, so the
   free page gets responsive cards for free. */
.article.free-page { text-align: center; }
/* v=462 — the top section sheds its panel chrome (Joe: the CARDS are the
   containers now; bare header text above them = contrast). Bottom section
   keeps its panel so the darker .cta-card inset still reads as an inset. */
.article.free-page-bare {
    background: transparent;
    border: none;
    box-shadow: none;
    padding-top: 16px;
    padding-bottom: 8px;
}
.free-picks-board {
    max-width: 1400px;          /* the app's .container measure */
    margin: 0 auto;
    padding: 8px 24px 16px;
}
.free-picks-board .fp-board-card { margin: 0 0 24px; }
.free-picks-board .fp-card { max-width: 980px; margin: 0 auto 16px; text-align: left; } /* server-text fallback */
.free-picks-board.fp-countdown { text-align: center; }
/* v=469 — pre-publish placeholder wears the card surface (the same
   treatment as the pick cards that will replace it), so the page keeps
   its card rhythm between intro and CTA even before publish. */
.fp-countdown-panel {
    max-width: 980px;
    margin: 0 auto;
    padding: 48px 32px;
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
.fp-countdown-panel .fp-drop { margin: 0; }
/* The free-surface analysis block is informational, not a drawer toggle. */
.free-picks-board .pc-analysis-static { cursor: default; }

/* v=463 — date line under the H1 (small, muted, centered via the parent). */
.fp-date { font-size: 0.82rem; color: var(--text-muted); letter-spacing: 0.04em; margin: -8px 0 18px; }

/* v=463 — bare CTA block (no panel). Buttons mirror the header pair:
   green-gradient Subscribe + outlined secondary — page-scoped clones of
   .home-nav-subscribe / .home-nav-login (those go display:none on mobile
   for the hamburger collapse, so they can't be reused directly). */
.fp-cta h2 { margin-top: 8px; }
.fp-cta-actions { display: flex; gap: 14px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.fp-cta-subscribe {
    background: linear-gradient(135deg, var(--green), #059669);
    color: #ffffff;
    font-size: 0.95rem; font-weight: 700;
    padding: 12px 28px; border-radius: 10px;
    text-decoration: none;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.25);
    transition: transform 0.12s, box-shadow 0.15s;
}
.fp-cta-subscribe:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35); }
.fp-cta-outline {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-size: 0.95rem; font-weight: 600;
    padding: 12px 28px; border-radius: 10px;
    text-decoration: none;
    transition: all 0.15s;
}
.fp-cta-outline:hover { border-color: var(--accent); color: var(--accent); }

@media (max-width: 640px) {
    .article h1 { font-size: 1.9rem; }
    .article h2 { font-size: 1.3rem; }
    .article { padding: 28px 24px 24px; }
    .fp-card { padding: 18px; }
    .fp-batter { font-size: 1.15rem; }
}