/* ───────────────────────────────────────────────────────────────────────
   homepage.css — v=261

   Modular stylesheet for the public marketing HomePage. Kept separate
   from styles.css (per Joe's modularity preference) so the rapidly-
   iterating marketing surface doesn't accrete onto the 3,763-line
   app stylesheet.

   Naming convention: every class prefixed `home-*` so a future split-
   styles.css refactor can grep cleanly. Uses the existing design
   tokens (CSS variables on :root in styles.css) so colors, type,
   and breakpoints stay consistent with the rest of the app.

   Breakpoint discipline: 768px is the mobile/desktop split, matching
   the rest of the app. Inline-styles in HomePage.jsx are avoided so
   media queries can override layout per STATUS §9 #11 + #51 (inline
   styles win at all breakpoints — can't be responsively overridden).
   ─────────────────────────────────────────────────────────────────────── */


/* ─── Page root ────────────────────────────────────────────────────── */

.home-page {
    background: var(--bg-primary);
    color: var(--text-primary);
    min-height: 100vh;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    /* Smooth-scroll for anchor navigation. handleNavClick in HomePage.jsx
       also fires window.scrollTo({behavior: 'smooth'}) but this catches
       any fallback anchor click that bypasses the handler. */
    scroll-behavior: smooth;
}


/* ─── Preview Mode indicator ──────────────────────────────────────── */
/* v=279 — Replaced the full-width sticky preview banner with a small
   floating eye icon in the upper-left corner. Same job (signal to the
   operator that this is the gated preview, not the public surface) but
   takes zero vertical real estate so the hero band reads as the page's
   true top. Public visitors don't see this element at all — it only
   renders when `?preview=1` is in the URL (see HomePreviewBanner in
   HomePage.jsx). */
.home-preview-indicator {
    position: fixed;
    top: 12px;
    left: 12px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(245, 158, 11, 0.18);
    border: 1px solid rgba(245, 158, 11, 0.55);
    color: var(--accent);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 200;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
    pointer-events: none;
}


/* ─── Sticky Top Nav ──────────────────────────────────────────────── */

.home-nav {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(10, 14, 26, 0.85);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--border);
    /* v=484 — iOS PWA: pad the bar below the status bar (Joe's catch:
       installed app has no browser chrome, so the logo rode under the
       iPhone clock). Same --safe-top doctrine as .container (v=108).
       Browser tabs and Android resolve to 0px = no visual change. The
       raw env() fallback covers any future page that loads homepage.css
       without styles.css's :root tokens. Sticky bonus: the blurred
       backdrop now extends up behind the status bar, native-app style.
       NOTE: env() only reports nonzero when the page's viewport meta
       has viewport-fit=cover — index.html has it; the static shells
       (free_picks_page.py, content_pages.py) gained it in v=484. */
    padding-top: var(--safe-top, env(safe-area-inset-top, 0px));
}

/* v=276 — Nav grows vertically to fit the upsized brand logo. Replaced
   fixed height: 64px with padding-y so the bar auto-fits the 110px
   logo. The bar now reads as a brand bar with nav links rather than
   a thin utility nav. Matches the in-app Dashboard header's logo
   presence so the brand feels consistent end-to-end. */
.home-nav-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 12px 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}

.home-nav-logo {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    /* v=454 — optical centering. The bar's padding IS symmetric, but the
       glow PNG's visual mass is top-heavy (wordmark high, faint flame tail
       low — measured: art center of mass sits 36px above canvas center,
       ~6px at rendered size), so a geometrically centered logo READS
       top-aligned. Nudge the paint down to split the difference. transform
       doesn't affect layout, so the bar height is untouched. */
    transform: translateY(3px);
}

/* v=277 — `.home-nav-logo-img` sizing rules removed. Brand logo sizing
   now lives in `.brand-logo` (styles.css), applied via the BrandLogo
   component. The HomePage nav renders <BrandLogo /> (default 225px
   wide) — same effective size as the Dashboard header. */

.home-nav-links {
    display: flex;
    align-items: center;
    gap: 28px;
}

.home-nav-link {
    background: none;
    border: none;
    color: var(--text-secondary);
    text-decoration: none;
    font-family: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    cursor: pointer;
    transition: color 0.18s;
    padding: 4px 0;
}

.home-nav-link:hover {
    color: var(--accent);
}

.home-nav-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.home-nav-login {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
}

.home-nav-login:hover {
    border-color: var(--accent);
    color: var(--accent);
}

/* v=266 — Subscribe CTAs use green per the color semantic system
   (green = conversion / money / subscribe). Refined at v=272: white
   text instead of black for cleaner contrast on saturated gradient. */
.home-nav-subscribe {
    background: linear-gradient(135deg, var(--green), #059669);
    color: #ffffff;
    border: none;
    font-family: inherit;
    font-size: 0.82rem;
    font-weight: 700;
    padding: 9px 20px;
    border-radius: 8px;
    cursor: pointer;
    box-shadow: 0 2px 12px rgba(16, 185, 129, 0.25);
    transition: transform 0.12s, box-shadow 0.15s;
}

.home-nav-subscribe:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(16, 185, 129, 0.35);
}

.home-nav-subscribe:active {
    transform: translateY(0);
}

/* ─── Mobile nav menu (v=452) ─────────────────────────────────────────
   Hamburger + dropdown for phones. Desktop keeps the inline
   .home-nav-links; on <=768px those collapse (existing rule below) and
   the hamburger exposes them in a dropdown, with Login + a Subscribe CTA
   at the bottom. v=453: the mobile BAR is just logo + hamburger (the
   v=452 logo + Subscribe + hamburger read cramped on a real phone; Joe's
   call: the menu Subscribe is the mobile conversion path). Logged-in
   users get no hamburger (nothing to navigate; bar is logo + Dashboard). */
.home-nav-hamburger {
    display: none; /* mobile-only; shown in the media query below */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 10px 6px;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
}
.home-nav-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    border-radius: 2px;
    background: var(--text-primary);
    transition: transform 0.2s ease, opacity 0.2s ease;
}
.home-nav-hamburger.is-open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.home-nav-hamburger.is-open span:nth-child(2) { opacity: 0; }
.home-nav-hamburger.is-open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.home-nav-menu { display: none; } /* never shown on desktop */

@media (max-width: 768px) {
    .home-nav-hamburger { display: inline-flex; }
    .home-nav-menu {
        display: block;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.25s ease;
        border-top: 1px solid transparent;
    }
    .home-nav-menu.open {
        /* v=459 — back to 460px: the v=458 Free Picks row was removed
           same-day (nav stays 6 rows + Subscribe; /free-picks gets a
           homepage callout instead). If a 7th row ever returns, 520px
           was the verified clearance. */
        max-height: 460px;
        border-top: 1px solid var(--border);
    }
    .home-nav-menu-link {
        display: block;
        padding: 14px 24px;
        color: var(--text-secondary);
        text-decoration: none;
        font-size: 0.9rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        border-bottom: 1px solid var(--border);
    }
    .home-nav-menu-link:hover,
    .home-nav-menu-link:active { color: var(--accent); }
    /* v=454 — user glyph on the Login row. vertical-align (not flex on the
       row) keeps the icon on the text baseline without disturbing the
       other .home-nav-menu-link rows' block layout. */
    .home-nav-menu-icon {
        vertical-align: -3px;
        margin-right: 9px;
    }
    .home-nav-menu-subscribe {
        display: block;
        width: calc(100% - 48px);
        margin: 16px 24px 20px;
        padding: 13px;
        text-align: center;
        background: linear-gradient(135deg, var(--green), #059669);
        color: #ffffff;
        border: none;
        border-radius: 10px;
        font-family: inherit;
        font-size: 0.95rem;
        font-weight: 700;
        cursor: pointer;
        box-shadow: 0 2px 12px rgba(16, 185, 129, 0.25);
        /* v=456 — the static nav twin renders this as an <a> (React renders
           a <button>); kill the anchor's default underline so both render
           identically. No-op on the button. */
        text-decoration: none;
    }
}

/* Mobile nav (v=453): collapse EVERYTHING into the hamburger — the center
   links, LOGIN, and (since v=453, Joe's call after seeing the v=452 bar
   cramped on a real phone) the Subscribe button too. The bar is just
   logo + hamburger; Subscribe lives at the bottom of the dropdown menu.
   Rationale: the strongest lead is the one who opens the menu looking
   for the CTA, not the one who has it jammed in their face. */
@media (max-width: 768px) {
    .home-nav-inner {
        /* v=276 — Added vertical padding so the 48px mobile logo has
           breathing room top/bottom instead of touching the nav edges. */
        padding: 8px 16px;
        gap: 12px;
    }

    .home-nav-links {
        display: none;
    }

    .home-nav-login {
        display: none;
    }

    /* v=277 — Mobile `.home-nav-logo-img` rule removed. The BrandLogo
       component's default size (`.brand-logo { width: 225px;
       max-width: 100% }`) handles responsive shrink naturally — on a
       narrow viewport the 225px logo shrinks to fit its flex container
       via max-width:100%, no per-breakpoint override needed. */

    .home-nav-subscribe {
        /* v=453 — hidden on mobile; the dropdown menu's Subscribe CTA is
           the mobile conversion path. Desktop keeps this button. */
        display: none;
    }
}


/* ─── Hero ────────────────────────────────────────────────────────── */

/* v=273 — Removed border-bottom (continuous flow into Top HR Picks).
   v=275 — Bottom padding 80px → 32px (tighter CTA → tool gap).
   v=278 — Base color swapped from --bg-primary to --bg-secondary. The
   subtle-lighter background creates an elevated-band effect identical
   to the Track Record section — gives the hero a soft visual edge
   against the Tools sections below (which sit on --bg-primary), so
   the page reads as "branded hero band → tools cluster → receipts
   band → pricing/contact" without needing explicit dividers. Orange
   glow at top stays as the brand accent. */
.home-hero {
    /* v=280 — Hero vertical padding 96 → 72 to match .home-section's
       new 72px rhythm. Pre-v=280 the hero was 96/96 while every other
       row was 48/48 — a 2x gap that made Receipts/Not Promises and the
       tool rows feel tight against the hero's openness. Unifying at
       72/72 across all rows gives the page one consistent vertical
       cadence. Symmetric top/bottom preserved from v=279. */
    padding: 72px 24px;
    background:
        radial-gradient(ellipse at center top, var(--accent-glow), transparent 60%),
        var(--bg-secondary);
}

/* v=275 hero logo block removed at v=276 — misinterpreted directive.
   Brand presence at top of page comes from the upsized nav logo
   (.home-nav-logo-img → 110px) instead. */

.home-hero-inner {
    max-width: 880px;
    margin: 0 auto;
    text-align: center;
}

.home-hero-headline {
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1.05;
    /* v=266 — Letter-spacing loosened from -0.03em → 0 to accommodate
       the title-case switch. The pre-v=266 all-caps treatment with
       tight tracking read aggressive at hero scale; title case at
       neutral tracking lands cleaner and gives the words breathing
       room. */
    letter-spacing: 0;
    margin-bottom: 24px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.home-hero-headline span {
    display: block;
}

/* v=266 — Accent gradient simplified to match the CTA orange exactly
   (was a three-stop amber gradient; now the same two-stop gradient
   that previously lived on .home-cta-primary). With Subscribe CTAs
   moving to green, the orange now anchors the value claim ("Edge")
   instead of the conversion action. Color semantic system:
     - Orange = brand / value claim / "edge"
     - Green = action / conversion / "subscribe"
   Visual rhyme between the headline payoff and the brand color while
   the Subscribe buttons take their own (green) lane. */
.home-hero-headline-accent {
    background: linear-gradient(135deg, var(--accent), #d97706);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    /* v=283 — Descender clip hotfix. `-webkit-background-clip: text`
       in Chromium + WebKit uses the text's line-box (not the ink box)
       as the gradient mask boundary. With our tight line-height 1.05
       on the headline, descenders on letters like "g" (Edge) and "y"
       (Your) extend below the line-box and get clipped by the mask —
       visible as a chopped-off bottom on the orange "Is Your Edge."
       line. Adding ~0.08em of padding-bottom expands the line-box
       just enough that the gradient mask covers the full glyph
       including descenders. line-height stays 1.05 so the visual
       composition of the headline (tight two-line stack) is preserved. */
    padding-bottom: 0.08em;
}

.home-hero-headline-accent em {
    font-style: normal;
    /* TODAY in italics felt off; the parallel structure of the two-line
       headline carries the emphasis on its own. Kept the `em` tag for
       semantic structure but normalize style. */
}

.home-hero-sub {
    font-size: 1.15rem;
    color: var(--text-secondary);
    line-height: 1.55;
    /* v=273 — max-width bumped 680px → 880px to match the headline
       container width (`.home-hero-inner`). The wider line measure
       lands the sub at 3 lines instead of 4, tightening the hero
       block and letting the CTAs sit closer to the headline. */
    max-width: 880px;
    margin: 0 auto 36px;
    /* v=310 — text-wrap: pretty for auto last-line widow avoidance.
       See .home-tool-section-body for the full doctrine note. */
    text-wrap: pretty;
}

.home-hero-ctas {
    display: flex;
    justify-content: center;
    gap: 16px;
    flex-wrap: wrap;
}

@media (max-width: 640px) {
    .home-hero {
        /* v=280 — Mobile hero 56 → 48 to match .home-section's mobile
           48px rhythm. Same unification goal as desktop: one consistent
           vertical cadence across all rows. */
        padding: 48px 20px;
    }

    .home-hero-headline {
        font-size: 2.2rem;
    }

    .home-hero-sub {
        font-size: 1rem;
    }

    .home-hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }
}


/* ─── Shared CTA buttons (used in hero, pricing, track record) ────── */

.home-cta {
    font-family: inherit;
    font-weight: 700;
    border-radius: 10px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s, background 0.2s;
    padding: 14px 28px;
    font-size: 1rem;
    /* v=488 — these three let an <a> render identically to a <button>
       (the hero CTA is now an anchor to /free-picks for crawlability).
       Harmless on the existing <button> CTAs: buttons already default to
       inline-block, no underline, centered text. */
    display: inline-block;
    text-decoration: none;
    text-align: center;
}

/* v=272 — Color semantic system refined.
   ─ ORANGE (`.home-cta-primary`) = primary actions that aren't
     conversion. Currently used by the "View the full Track Record"
     CTA. Future non-subscribe primaries land here.
   ─ GREEN (`.home-cta-subscribe`) = conversion / money / Subscribe
     actions exclusively. Hero Subscribe button + Pricing Subscribe
     Now both use this class.

   Both share the same shape/elevation/transition pattern, just
   different gradients + box-shadow colors + the white text rule. */
.home-cta-primary {
    background: linear-gradient(135deg, var(--accent), #d97706);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 18px rgba(245, 158, 11, 0.3);
}

.home-cta-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.4);
}

.home-cta-primary:active {
    transform: translateY(0);
}

.home-cta-subscribe {
    background: linear-gradient(135deg, var(--green), #059669);
    color: #ffffff;
    border: none;
    box-shadow: 0 4px 18px rgba(16, 185, 129, 0.3);
}

.home-cta-subscribe:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(16, 185, 129, 0.4);
}

.home-cta-subscribe:active {
    transform: translateY(0);
}

/* v=273 — Secondary CTA gets the accent-orange ghost treatment.
   Orange outline + orange text by default (was muted-border + light
   text). Hover fills with the solid CTA orange gradient and flips
   the text to white — the hover state IS the primary CTA visual,
   so the secondary "becomes" a primary on intent-to-click. Matches
   Joe's reference screenshot. */
.home-cta-secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

.home-cta-secondary:hover {
    background: linear-gradient(135deg, var(--accent), #d97706);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 6px 22px rgba(245, 158, 11, 0.4);
    transform: translateY(-1px);
}

.home-cta-secondary:active {
    transform: translateY(0);
}

/* v=497 — Ghost CTA matching the nav Login (.home-nav-login): neutral
   outline by default, accent border + text on hover. Used as the hero
   SECONDARY CTA so the hero pair mirrors the header Login | Free Trial
   styling (green-filled primary + neutral-outline secondary). */
.home-cta-ghost {
    background: transparent;
    border: 1px solid var(--border);
    color: var(--text-secondary);
}

.home-cta-ghost:hover {
    border-color: var(--accent);
    color: var(--accent);
    transform: translateY(-1px);
}

.home-cta-ghost:active {
    transform: translateY(0);
}

/* v=497 — Hero trust bar: three benefit pills under the CTAs that dissolve
   the card-gate friction at the decision point (Free for 7 days / Everything
   included / Cancel anytime). Green dots match the Start Free Trial pill. The
   bar shrink-wraps its content and centers under the CTAs. */
.home-hero-trustbar {
    list-style: none;
    width: fit-content;
    max-width: 100%;
    margin: 20px auto 0;
    padding: 10px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px 22px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border);
    border-radius: 999px;
}

.home-hero-trustbar li {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.home-hero-trust-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--green);
    flex: none;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.55);
}

@media (max-width: 640px) {
    .home-hero-trustbar {
        border-radius: 18px;
        gap: 8px 16px;
        padding: 12px 18px;
    }
}


/* ─── Section base ────────────────────────────────────────────────── */

/* v=273 — Removed border-bottom. Padding alone carries section rhythm.
   v=275 — Reduced vertical padding 80px → 48px. With borders gone in
   v=273 and the hero logo added in v=275, the previous 80px-top-and-
   bottom-per-section felt excessive — sections were drifting apart
   instead of reading as a continuous guided tour. 48px keeps clear
   breathing room without the wide-open vacuum. Applies globally
   (every tool section, Track Record, Pricing, Contact). */
.home-section {
    /* v=280 — Section padding 48 → 72 to open up Receipts/Not Promises,
       the 4 tool rows, Pricing, and Contact. Pre-v=280 these rows felt
       tight against the hero's 96px openness. Now every row (hero
       included, dropped 96 → 72) shares the same 72px vertical rhythm
       for a single consistent page cadence. */
    padding: 72px 24px;
}

.home-section-inner {
    max-width: 1080px;
    margin: 0 auto;
}

.home-section-heading {
    font-size: 2.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin-bottom: 16px;
    color: var(--text-primary);
}

.home-section-sub {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-bottom: 48px;
    max-width: 680px;
}

@media (max-width: 640px) {
    .home-section {
        /* v=280 — Mobile section padding 36 → 48 to match the hero's
           48px mobile padding. One rhythm across all rows on mobile too. */
        padding: 48px 20px;
    }

    .home-section-heading,
    .home-faq-heading {
        font-size: 1.65rem;
    }

    .home-section-sub {
        font-size: 0.95rem;
        margin-bottom: 32px;
    }
}


/* ─── Tool sections (v=272 restructure) ─────────────────────────────
   Each tool now gets its own full-width section instead of competing
   for attention in a 2x4 card grid. Pattern per section: eyebrow
   (uppercase accent text, mirrors .home-track-record-overline) +
   heading + body + 3-column screenshot row. Sections alternate
   bg-primary so consecutive tool sections have visual separation
   without needing thick borders. */

/* v=274 — Tool sections use the standard .home-section-inner 1080px
   max-width (inherited) so the screenshot row can fill content width
   for nice big images. Text elements (eyebrow / heading / body) are
   individually constrained to 760px max-width + auto-centered so the
   reading column stays comfortable while the screenshots breathe.
   Visual outcome: centered text column above, edge-to-edge screenshot
   row below — matching the wide-image / narrow-text pattern most
   marketing sites use for tool feature sections.

   Per-element max-width (rather than wrapping text in a sub-container)
   avoids any JSX touch and keeps the structure flat. */
.home-tool-section-inner {
    /* v=282 — Tool sections widen to 1280px (overriding the inherited
       1080px from .home-section-inner) so the collage/screenshot row
       can extend wider for more visual presence. Matches the nav's
       1280px max-width, so it reads as an established container in
       the page's system rather than an ad-hoc value. Text elements
       (.home-tool-eyebrow, .home-tool-section-heading,
       .home-tool-section-body) keep their own 760px max-width +
       auto-centering, so the copy column stays comfortable while
       the imagery breathes. Other section types (Track Record,
       Pricing, Contact) inherit the 1080px default unchanged. */
    max-width: 1280px;
    text-align: center;
}

/* v=308 — Tool eyebrow/heading/body widths bumped 760px → 880px to
   match the hero sub (.home-hero-sub) max-width. Pre-v=308 the tool
   text columns sat noticeably narrower than the hero, creating a
   visual rhythm break as users scrolled from the hero into the tools
   row. v=308 unifies — every copy block on the homepage (hero +
   tools + track record) now reads at the same 880px measure for
   consistent line lengths. Container (.home-section-inner) stays at
   1080px so the collage/screenshot row still expands wider than the
   copy. */
.home-tool-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    margin: 0 auto 14px;
    max-width: 750px;
}

.home-tool-section-heading {
    /* Inherits .home-section-heading sizing; v=274 added the max-width
       constraint + auto centering so the title sits in the same column
       as the eyebrow and body. v=308 bumped that column from 760px to
       880px to match the hero sub. v=309 narrowed to 800px after Joe's
       eyeball revealed 880px landed the tool body copy at 2 lines
       (too wide); 800px lands the longest body at a clean 3-line wrap
       with ≥4 words on the third line. */
    margin: 0 auto 16px;
    max-width: 750px;
}

.home-tool-section-body {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0 auto 36px;
    /* Width history:
       v=274 = 760px (2-word orphans on last line)
       v=308 = 880px (too wide, only 2 lines)
       v=309 = 800px (still some orphans on shorter bodies)
       v=310 = 700px (denser column) + text-wrap: pretty (auto orphan fix)
       v=311 = 800px (700px pushed Top HR Picks to 4 lines — too tall;
               text-wrap: pretty alone handles the orphan problem at 800px)
       v=312 = 750px (800px still landed orphans on some bodies — text-wrap:
               pretty is a hint, not a guarantee. 750px is the goldilocks
               between v=310's too-tall 700 and v=311's orphan-prone 800.) */
    max-width: 750px;
    /* v=310 — text-wrap: pretty asks the browser to optimize line
       breaks for readability, specifically avoiding last-line widows
       (orphans of 1-2 words). Chrome 117+ / Safari 17.4+ / Firefox 121+.
       Older browsers gracefully degrade to default wrapping. Real fix
       for the variable-length-copy orphan problem — beats width-tuning
       every time we touch the copy. */
    text-wrap: pretty;
}

/* v=281 — Single full-container-width screenshot collage. Used for
   tool sections where the imagery is a pre-composed multi-screen
   collage (one PNG) instead of three discrete screen captures.
   The collage already carries its own internal composition, so we
   just let it fill the .home-section-inner 1080px container at
   100% width and scale its height by the asset's aspect ratio. */
.home-tool-screenshot-collage {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
}

/* Three-column screenshot row. Equal widths at desktop; stacks to
   single column on mobile. Placeholder boxes show diagonal stripes
   until real screenshots are slotted in via a later micro-ship. */
.home-tool-screenshots {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

.home-tool-screenshot-box {
    aspect-ratio: 9 / 16;
    border: 1px solid var(--border);
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    background: repeating-linear-gradient(
        45deg,
        var(--bg-primary),
        var(--bg-primary) 8px,
        var(--bg-secondary) 8px,
        var(--bg-secondary) 16px
    );
    overflow: hidden;
}

.home-tool-screenshot-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 768px) {
    .home-tool-screenshots {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .home-tool-screenshot-box {
        aspect-ratio: 9 / 16;
        max-width: 320px;
        margin: 0 auto;
    }

    .home-tool-section-body {
        font-size: 0.95rem;
        margin-bottom: 28px;
    }
}


/* ─── Track Record section ────────────────────────────────────────── */

.home-track-record {
    background:
        radial-gradient(ellipse at center, rgba(16, 185, 129, 0.08), transparent 70%),
        var(--bg-secondary);
}

.home-track-record-inner {
    text-align: center;
    /* v=308 — widened 760px → 880px to match hero sub + tool copy
       columns. Caps the heading + body within the same measure for
       consistent line lengths across the entire page. */
    max-width: 880px;
}

/* v=309 — Track Record heading narrowed so the second clause ("Audit
   it yourself.") lands as a clean line 2 instead of orphaning "yourself"
   onto its own line. 720px is the sweet spot — line 1 fits the first
   two sentences ("Every pick we've ever made. Hit or miss."), line 2
   gets "Audit it yourself." as a coherent thought. */
.home-track-record .home-section-heading {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

.home-track-record-overline {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    /* v=309 — green → accent (amber) so this eyebrow matches every
       other section's eyebrow on the page. Pre-v=309 the green was an
       attempted differentiator for "this is the trust/proof beat"
       but in practice it read as a visual outlier (every other
       eyebrow is amber). Consistency wins. */
    color: var(--accent);
    margin-bottom: 18px;
}

.home-track-record-body {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 24px auto 36px;
    /* v=308 — widened 640px → 880px to match hero sub + tool body
       max-width. Pre-v=308 Track Record body was the narrowest copy
       column on the page; v=308 brings it inline with the unified
       880px measure. */
    max-width: 880px;
    /* v=310 — text-wrap: pretty for auto last-line widow avoidance.
       See .home-tool-section-body for the full doctrine note. */
    text-wrap: pretty;
}

.home-track-record-cta {
    margin: 0 auto;
}


/* ─── FAQ accordion (v=309) ──────────────────────────────────────────
   Lives inside the Track Record section, below the CTA. Single-expand
   accordion — one Q at a time keeps focus tight. Chevron swaps between
   "+" (closed) and "−" (open). Left-aligned text inside a centered
   container that's slightly narrower than the body copy column.
*/

.home-faq {
    /* v=438 — was 64px to separate the FAQ from the Track Record promo above
       it; that promo moved to /track-record (v=437), so the FAQ is now the
       section's only content. Zeroed so the section's symmetric 72px padding
       gives equal top/bottom space. */
    margin-top: 0;
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    /* The parent .home-track-record-inner is text-align: center; override
       here so question + answer text reads naturally left-to-right. */
    text-align: left;
}

/* v=438 — eyebrow above the FAQ heading, matching the tool-section eyebrow
   treatment (amber, uppercase, tracked) but centered to sit over the heading. */
.home-faq-eyebrow {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--accent);
    text-align: center;
    margin: 0 0 12px;
}
.home-faq-heading {
    /* v=438 — bumped 1.5rem/700 -> match the tool/section heading (2.25rem/800). */
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--text-primary);
    text-align: center;
    margin: 0 0 24px;
    letter-spacing: -0.02em;
    line-height: 1.15;
}
/* v=438 — inline link inside an FAQ answer (e.g. the track-record answer -> /track-record). */
.home-faq-link {
    color: var(--accent);
    text-decoration: none;
    font-weight: 600;
}
.home-faq-link:hover { text-decoration: underline; }

.home-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.home-faq-item:first-of-type {
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.home-faq-question {
    /* Button reset */
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: inherit;
    /* Layout */
    width: 100%;
    padding: 20px 4px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    cursor: pointer;
    /* Type */
    font-size: 1.05rem;
    font-weight: 600;
    text-align: left;
    line-height: 1.4;
    transition: color 0.15s ease;
}

.home-faq-question:hover {
    color: var(--accent);
}

.home-faq-question:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 4px;
    border-radius: 4px;
}

.home-faq-chevron {
    font-size: 1.6rem;
    font-weight: 300;
    color: var(--accent);
    line-height: 1;
    flex-shrink: 0;
    width: 24px;
    text-align: center;
}

/* v=316 — Smooth accordion transition. Answer is always rendered (per
   the JSX change in HomeTrackRecord) so CSS can drive the show/hide
   via max-height + opacity + padding. The classic max-height pattern
   is used because browsers can't transition to/from height: auto; a
   large max-height (500px) accommodates any plausible answer length
   while the transition itself snaps gracefully to the actual content
   height. overflow: hidden hides the spillover during the closed
   state. */
.home-faq-answer {
    color: var(--text-secondary);
    font-size: 1rem;
    line-height: 1.6;
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0 4px;
    transition: max-height 0.3s ease, opacity 0.2s ease, padding 0.3s ease;
}

.home-faq-item.open .home-faq-answer {
    max-height: 500px;
    opacity: 1;
    padding: 0 4px 20px;
}

@media (max-width: 640px) {
    .home-faq {
        margin-top: 48px;
    }

    .home-faq-heading {
        font-size: 1.25rem;
    }

    .home-faq-question {
        font-size: 1rem;
        padding: 16px 4px;
    }

    .home-faq-answer {
        font-size: 0.95rem;
        /* v=316 — closed-state mobile padding: just the side padding,
           no bottom padding (matches the desktop pattern). */
        padding: 0 4px;
    }

    .home-faq-item.open .home-faq-answer {
        /* v=316 — open-state mobile padding moved here to avoid
           overriding the closed-state transition target. */
        padding: 0 4px 16px;
    }
}


/* ─── Pricing section ─────────────────────────────────────────────── */

.home-pricing {
    background: var(--bg-primary);
}

.home-pricing-inner {
    text-align: center;
}

.home-pricing-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 48px 40px;
    max-width: 480px;
    margin: 32px auto 16px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.3);
    text-align: left;
}

.home-pricing-price {
    text-align: center;
    margin-bottom: 4px;
}

.home-pricing-amount {
    font-size: 3.25rem;
    font-weight: 900;
    background: linear-gradient(135deg, var(--accent), #fbbf24, #f59e0b);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.03em;
}

.home-pricing-period {
    font-size: 1.1rem;
    color: var(--text-secondary);
    font-weight: 500;
    margin-left: 4px;
}

.home-pricing-tagline {
    text-align: center;
    font-size: 0.92rem;
    color: var(--text-muted);
    margin-bottom: 28px;
}

.home-pricing-features {
    list-style: none;
    padding: 0;
    margin: 0 0 32px;
}

.home-pricing-features li {
    padding: 10px 0;
    padding-left: 28px;
    position: relative;
    font-size: 0.95rem;
    color: var(--text-primary);
    line-height: 1.4;
    border-bottom: 1px solid var(--border);
}

.home-pricing-features li:last-child {
    border-bottom: none;
}

.home-pricing-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--accent);
    font-weight: 800;
    font-size: 1rem;
}

.home-pricing-cta {
    width: 100%;
    padding: 16px;
    font-size: 1.05rem;
}

.home-pricing-fineprint {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
    max-width: 480px;
    margin: 0 auto;
}

.home-pricing-fineprint-link {
    color: var(--text-secondary);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.home-pricing-fineprint-link:hover {
    color: var(--accent);
}

@media (max-width: 640px) {
    .home-pricing-card {
        padding: 32px 24px;
    }

    .home-pricing-amount {
        font-size: 2.6rem;
    }
}


/* ─── Contact section ─────────────────────────────────────────────── */

.home-contact {
    background: var(--bg-primary);
}

.home-contact-inner {
    text-align: center;
    max-width: 600px;
}

.home-contact-body {
    font-size: 1.05rem;
    color: var(--text-secondary);
    line-height: 1.55;
    margin-top: 16px;
    /* v=310 — text-wrap: pretty for auto last-line widow avoidance.
       The v=309 nowrap span fix on "reply within 24 hours." is now
       belt-and-suspenders with pretty's auto-fix. See
       .home-tool-section-body for the full doctrine note. */
    text-wrap: pretty;
}

.home-contact-link {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px solid rgba(245, 158, 11, 0.4);
    padding-bottom: 1px;
}

.home-contact-link:hover {
    border-bottom-color: var(--accent);
}
/* v=420 — keeps "reply within 24 hours." from wrapping mid-phrase. */
.home-nowrap { white-space: nowrap; }


/* ─── Footer ──────────────────────────────────────────────────────── */

/* v=287 — .home-footer + descendant rules retired. HomePage now uses
   the shared <AppFooter /> inside the .footer wrapper class (defined
   in styles.css), same pattern as Dashboard + LoginScreen. Single
   source of truth for footer content + chrome across all three
   surfaces. See HomePage.jsx HomeFooter retirement note for what
   carried over and what was intentionally dropped (Refund Policy
   per v=253, Illinois/18+ moved into Terms + Responsible Gaming
   pages, brand tagline collapsed into AppFooter's "Fourbags v1.0"). */