/* =====================================================================
   homepage.css — S57 homepage rebuild
   ---------------------------------------------------------------------
   Scoped to /Pages/Index.cshtml via _HomeLayout. All other marketing
   pages still use marketing.css. Brand tokens only (--sp-*); no
   gradients; no inline color values.
   ===================================================================== */

/* ── Body ──────────────────────────────────────────────────────────── */
.sp-home-body {
    margin: 0;
    font-family: var(--sp-font-sans);
    color: var(--sp-text-primary);
    background-color: var(--sp-bg-primary);
    -webkit-font-smoothing: antialiased;
    /* S59 — smooth-scroll for the "See how it works" CTA → #how-it-works
       anchor. CSS-only; no JS needed. Scoped to the homepage body so it
       doesn't affect _MarketingLayout pages. */
    scroll-behavior: smooth;
}

/* S63 — header, logo, nav, header-actions, and skip-link rules were
   moved to wwwroot/css/site-shell.css under neutral `sp-site-*`
   classes so the shared `_SiteHeader` partial renders identically on
   both the homepage and every marketing page. Body-content classes
   below (`sp-home-hero*`, `sp-home-section*`, `sp-home-btn*`, etc.)
   continue to be owned by this file. */

/* ── Buttons ───────────────────────────────────────────────────────── */
.sp-home-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--sp-space-2) var(--sp-space-4);
    font-size: var(--sp-text-sm);
    font-weight: var(--sp-font-semibold);
    text-decoration: none;
    border-radius: var(--sp-radius-md);
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    cursor: pointer;
    border: 1px solid transparent;
    line-height: 1.25;
    white-space: nowrap;
}

.sp-home-btn--lg {
    padding: var(--sp-space-3) var(--sp-space-6);
    font-size: var(--sp-text-base);
}

/* S63 — gold → marketing orange palette swap. Primary CTA now reads
   in the Fynn orange brand color, matching the header's "Get
   started" pill and unifying the page palette. Text color flipped
   to white because the orange/navy contrast wasn't WCAG-AA at the
   smaller text size; orange/white reads cleanly. */
.sp-home-btn--primary {
    background-color: var(--sp-fynn-orange);
    color: var(--sp-white);
    border-color: var(--sp-fynn-orange);
}

    .sp-home-btn--primary:hover {
        background-color: var(--sp-fynn-orange-dark);
        border-color: var(--sp-fynn-orange-dark);
        color: var(--sp-white);
    }

.sp-home-btn--ghost {
    background-color: transparent;
    color: var(--sp-navy);
    border-color: var(--sp-border-dark);
}

    .sp-home-btn--ghost:hover {
        background-color: var(--sp-navy-lighter);
        border-color: var(--sp-navy);
    }

.sp-home-btn--ghost-light {
    /* S61 — secondary CTA "See how it works" was reading as a
       fading link against navy. Bumped border to 1.5px at white
       0.55 alpha so it reads as a real button alongside the gold
       primary, not a ghost of one. Text stays at full white. */
    background-color: transparent;
    color: var(--sp-white);
    border-width: 1.5px;
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.55);
}

    .sp-home-btn--ghost-light:hover {
        background-color: rgba(255, 255, 255, 0.10);
        border-color: var(--sp-white);
        color: var(--sp-white);
    }

.sp-home-btn--ghost-dark {
    background-color: transparent;
    color: var(--sp-navy);
    border-color: var(--sp-border-dark);
}

    .sp-home-btn--ghost-dark:hover {
        background-color: var(--sp-navy-lighter);
        border-color: var(--sp-navy);
    }

/* ── Hero — contained card on a navy field ────────────────────────── */
.sp-home-hero {
    padding: var(--sp-space-8) var(--sp-space-6);
    background-color: var(--sp-bg-secondary);
}

.sp-home-hero-card {
    /* S59 — widened from 1280 to 1440 for the enterprise rebuild.
       S61 — position:relative + overflow:hidden anchors the
       blueprint-grid ::before backdrop. */
    max-width: 1440px;
    margin: 0 auto;
    background-color: var(--sp-navy);
    border-radius: 20px;
    padding: var(--sp-space-10) var(--sp-space-8);
    box-shadow: 0 20px 60px rgba(30, 58, 95, 0.25);
    position: relative;
    overflow: hidden;
}

/* S61 — faint blueprint grid behind the hero content for internal
   depth without changing the navy field color. Two repeating linear
   gradients form a 32px grid at 0.04 alpha. Decorative only; hidden
   on tablet + mobile to avoid render cost on small viewports. */
.sp-home-hero-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 32px),
        repeating-linear-gradient(90deg,
            rgba(255, 255, 255, 0.04) 0,
            rgba(255, 255, 255, 0.04) 1px,
            transparent 1px,
            transparent 32px);
    pointer-events: none;
    z-index: 0;
}

.sp-home-hero-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: var(--sp-space-10);
    align-items: center;
    position: relative;
    z-index: 1;
}

.sp-home-hero-copy {
    color: var(--sp-white);
}

.sp-home-hero-eyebrow {
    /* S63 — color flipped from --sp-gold-light to --sp-fynn-orange
       as part of the palette swap. The brighter orange reads as
       proof against the dark navy hero rather than a faded
       afterthought. */
    font-size: var(--sp-text-sm);
    font-weight: var(--sp-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-fynn-orange);
    margin: 0 0 var(--sp-space-4);
}

.sp-home-hero-title {
    /* S61 — visionary play headline. Bumped to 2.875rem with tighter
       leading + tracking so the two short lines ("Unleash their
       learning. / Automate your compliance.") read as a confident
       Stripe/Linear-style dark-card hero, not a stretched billboard.
       Weight stays bold (700) — display-black would feel heavy on
       navy. */
    font-family: var(--sp-font-display);
    font-size: 2.875rem;
    font-weight: var(--sp-font-bold);
    line-height: var(--sp-home-leading-hero);
    letter-spacing: var(--sp-home-tracking-hero);
    margin: 0 0 var(--sp-space-5);
    color: var(--sp-white);
}

.sp-home-hero-sub {
    /* S62 — bottom margin bumped space-7 (1.75rem) → space-10
       (2.5rem) so the CTA cluster reads as a distinct beat after
       the subhead, matching the Stripe / Linear hero rhythm. */
    font-size: var(--sp-text-lg);
    line-height: var(--sp-leading-relaxed);
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 var(--sp-space-10);
    max-width: 32rem;
}

.sp-home-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-space-3);
    margin-bottom: var(--sp-space-5);
}

.sp-home-hero-trust {
    font-size: var(--sp-text-xs);
    color: rgba(255, 255, 255, 0.65);
    margin: 0;
    letter-spacing: 0.02em;
}

/* S59 — integration strip sits between the CTA row and the trust
   line. Small grayscale typography, single horizontal line on
   tablet+, wraps to two lines on narrow tablet (per brief).
   S61 — raised from white 0.60 to 0.78 so the platform names read
   as readable proof, not legal-disclaimer print. Label drops the
   semibold weight so "Works with:" reads as equal to the platform
   names instead of emphasizing the prefix over the proof.
   S62 — size bumped xs (12px) → sm (14px). Was reading too small;
   the contrast bump from S61 helped but the type itself was
   under-scaled for proof-of-integrations content. */
.sp-home-hero-integrations {
    font-size: var(--sp-text-sm);
    color: rgba(255, 255, 255, 0.78);
    margin: 0 0 var(--sp-space-3);
    letter-spacing: 0.02em;
    line-height: var(--sp-leading-relaxed);
}

.sp-home-hero-integrations-label {
    font-weight: inherit;
    color: inherit;
    margin-right: var(--sp-space-1);
}

.sp-home-hero-integrations-sep {
    color: rgba(255, 255, 255, 0.40);
    margin: 0 var(--sp-space-1);
}

/* ── Hero visualization — product-like window mockup ───────────────── */
.sp-home-hero-viz {
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-3);
}

.sp-home-viz-window {
    background-color: var(--sp-white);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.sp-home-viz-chrome {
    background-color: var(--sp-bg-tertiary);
    padding: var(--sp-space-3) var(--sp-space-4);
    display: flex;
    align-items: center;
    gap: var(--sp-space-2);
    border-bottom: 1px solid var(--sp-border);
}

.sp-home-viz-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: var(--sp-border-dark);
}

.sp-home-viz-label {
    margin-left: var(--sp-space-3);
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    color: var(--sp-text-secondary);
    letter-spacing: 0.02em;
}

.sp-home-viz-body {
    padding: var(--sp-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-3);
}

.sp-home-viz-entry {
    padding: var(--sp-space-3);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    background-color: var(--sp-white);
}

.sp-home-viz-entry-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-space-2);
}

.sp-home-viz-chip {
    display: inline-block;
    padding: 2px var(--sp-space-2);
    border-radius: var(--sp-radius-full);
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    letter-spacing: 0.02em;
}

/* S61 — hero preview chips switched from the muted global lighter
   tokens to homepage-scoped vivid variants so the Reading / Science
   / Math tags read as positive accent against the white preview
   card. Global tag tokens elsewhere on the site are unchanged. */
.sp-home-viz-chip--reading {
    background-color: var(--sp-home-tag-reading-bg);
    color: var(--sp-home-tag-reading-fg);
}

.sp-home-viz-chip--science {
    background-color: var(--sp-home-tag-science-bg);
    color: var(--sp-home-tag-science-fg);
}

.sp-home-viz-chip--math {
    background-color: var(--sp-home-tag-math-bg);
    color: var(--sp-home-tag-math-fg);
}

.sp-home-viz-entry-time {
    font-size: var(--sp-text-xs);
    color: var(--sp-text-tertiary);
    font-weight: var(--sp-font-medium);
}

.sp-home-viz-entry-title {
    font-size: var(--sp-text-sm);
    font-weight: var(--sp-font-semibold);
    color: var(--sp-text-primary);
    margin: 0 0 4px;
}

.sp-home-viz-entry-meta {
    font-size: var(--sp-text-xs);
    color: var(--sp-text-tertiary);
    margin: 0;
}

.sp-home-viz-pulse {
    background-color: var(--sp-white);
    border-radius: 12px;
    padding: var(--sp-space-4);
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
}

.sp-home-viz-pulse-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sp-home-viz-pulse-label {
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    color: var(--sp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-home-viz-pulse-value {
    font-size: var(--sp-text-sm);
    color: var(--sp-text-primary);
    font-weight: var(--sp-font-medium);
}

.sp-home-viz-pulse-status {
    display: inline-flex;
    align-items: center;
    padding: 2px var(--sp-space-3);
    background-color: var(--sp-forest-lighter);
    color: var(--sp-forest-dark);
    border-radius: var(--sp-radius-full);
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-bold);
}

/* =====================================================================
   S64 — Homepage refresh: hero badge, journal viz rebuild, CTA Fynn mark
   New classes added; pre-existing classes above this block left intact
   (the rewritten Index.cshtml no longer references some of them, but
   the rules are preserved per the S64 prompt).
   ===================================================================== */

/* ── Hero badge (live states pill) ─────────────────────────────────── */
.sp-home-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-2);
    background: rgba(232, 122, 63, 0.18);
    color: var(--sp-fynn-orange);
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    letter-spacing: 0.06em;
    padding: var(--sp-space-1) var(--sp-space-3);
    border-radius: var(--sp-radius-full);
    margin-bottom: var(--sp-space-4);
    border: 1px solid rgba(232, 122, 63, 0.30);
}

.sp-home-hero-badge-dot {
    width: 6px;
    height: 6px;
    background: var(--sp-fynn-orange);
    border-radius: var(--sp-radius-full);
    flex-shrink: 0;
}

/* ── Viz day header ─────────────────────────────────────────────────── */
.sp-home-viz-dayheader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sp-navy-dark);
    border-radius: var(--sp-radius-lg) var(--sp-radius-lg) 0 0;
    padding: var(--sp-space-3) var(--sp-space-4);
}

.sp-home-viz-dayheader-left {
    display: flex;
    align-items: center;
    gap: var(--sp-space-2);
}

.sp-home-viz-fynn-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    background: rgba(232, 122, 63, 0.20);
    border-radius: var(--sp-radius-full);
    color: var(--sp-fynn-orange);
    flex-shrink: 0;
}

.sp-home-viz-dayheader-name {
    font-size: var(--sp-text-sm);
    font-weight: var(--sp-font-semibold);
    color: var(--sp-white);
    line-height: 1.2;
}

.sp-home-viz-dayheader-date {
    font-size: var(--sp-text-xs);
    color: rgba(255, 255, 255, 0.55);
    margin-top: 1px;
}

.sp-home-viz-pulse-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-1);
    background: rgba(5, 150, 105, 0.20);
    color: #6ee7b7;
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    padding: 3px var(--sp-space-2);
    border-radius: var(--sp-radius-full);
    border: 1px solid rgba(5, 150, 105, 0.30);
}

.sp-home-viz-pulse-dot {
    width: 6px;
    height: 6px;
    background: #34d399;
    border-radius: var(--sp-radius-full);
    flex-shrink: 0;
}

/* ── Viz entries ────────────────────────────────────────────────────── */
.sp-home-viz-entry {
    background: var(--sp-white);
    padding: var(--sp-space-4);
    border-left: 1px solid var(--sp-border);
    border-right: 1px solid var(--sp-border);
    border-bottom: 1px solid var(--sp-border);
}

.sp-home-viz-entry--active {
    background: var(--sp-fynn-cream);
    border-left: 3px solid var(--sp-fynn-orange);
}

.sp-home-viz-entry-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--sp-space-2);
}

.sp-home-viz-entry-time {
    font-size: var(--sp-text-xs);
    color: var(--sp-text-tertiary);
    font-weight: var(--sp-font-medium);
}

.sp-home-viz-entry-title {
    font-size: var(--sp-text-sm);
    font-weight: var(--sp-font-semibold);
    color: var(--sp-navy);
    margin: 0 0 var(--sp-space-2);
}

.sp-home-viz-entry-kid {
    font-size: var(--sp-text-sm);
    color: var(--sp-text-secondary);
    font-style: italic;
    line-height: var(--sp-leading-relaxed);
    margin: 0 0 var(--sp-space-3);
    padding: var(--sp-space-2) var(--sp-space-3);
    background: rgba(255, 255, 255, 0.65);
    border-radius: var(--sp-radius);
    border-left: 2px solid var(--sp-fynn-orange);
}

/* ── Fynn tag (AI classification row) ──────────────────────────────── */
.sp-home-viz-fynn-tag {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-space-2);
    margin-top: var(--sp-space-2);
    padding: var(--sp-space-2) var(--sp-space-3);
    background: rgba(232, 122, 63, 0.08);
    border-radius: var(--sp-radius);
    border: 1px solid rgba(232, 122, 63, 0.20);
}

.sp-home-viz-fynn-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--sp-fynn-orange-dark);
    margin-top: 1px;
}

.sp-home-viz-fynn-text {
    font-size: var(--sp-text-xs);
    color: var(--sp-fynn-orange-dark);
    font-weight: var(--sp-font-medium);
    line-height: var(--sp-leading-relaxed);
}

/* ── Viz subject chips ──────────────────────────────────────────────── */
.sp-home-viz-chip {
    display: inline-flex;
    align-items: center;
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    padding: 2px var(--sp-space-2);
    border-radius: var(--sp-radius-full);
}

.sp-home-viz-chip--reading {
    background: var(--sp-home-tag-reading-bg);
    color: var(--sp-home-tag-reading-fg);
}

.sp-home-viz-chip--science {
    background: var(--sp-home-tag-science-bg);
    color: var(--sp-home-tag-science-fg);
}

.sp-home-viz-chip--math {
    background: var(--sp-home-tag-math-bg);
    color: var(--sp-home-tag-math-fg);
}

/* ── Viz week summary strip ─────────────────────────────────────────── */
.sp-home-viz-week {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--sp-navy);
    border-radius: 0 0 var(--sp-radius-lg) var(--sp-radius-lg);
    padding: var(--sp-space-3) var(--sp-space-4);
    gap: var(--sp-space-2);
}

.sp-home-viz-week-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.sp-home-viz-week-num {
    font-size: var(--sp-text-base);
    font-weight: var(--sp-font-bold);
    color: var(--sp-white);
    line-height: 1;
}

.sp-home-viz-week-label {
    font-size: var(--sp-text-xs);
    color: rgba(255, 255, 255, 0.50);
}

.sp-home-viz-week-divider {
    width: 1px;
    height: 28px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
}

.sp-home-viz-week-compliance {
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    color: #6ee7b7;
    white-space: nowrap;
}

/* ── CTA Fynn mark ──────────────────────────────────────────────────── */
.sp-home-cta-fynn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    background: var(--sp-navy-lighter);
    border-radius: var(--sp-radius-full);
    color: var(--sp-navy);
    margin: 0 auto var(--sp-space-5);
}

/* ── Sections ──────────────────────────────────────────────────────── */
.sp-home-section {
    padding: var(--sp-space-10) var(--sp-space-6);
    background-color: var(--sp-white);
}

/* S62 — switched from cool gray-50 (--sp-bg-secondary) to a warm
   cream (--sp-home-bg-section-warm) so the alternating sections
   read as warmth, not noise. Two consumers on the homepage (How
   It Works + One Journal); both should warm together. Token is
   homepage-scoped — no global background change. */
.sp-home-section--tinted {
    background-color: var(--sp-home-bg-section-warm);
}

.sp-home-section-shell {
    /* S59 — widened from 1200 to 1440. Shared by all section types
       on the homepage (audiences / pillars / How It Works / state
       coverage / final CTA), all scoped to "/" only via _HomeLayout. */
    max-width: 1440px;
    margin: 0 auto;
}

.sp-home-eyebrow {
    /* S63 — color flipped from --sp-gold-dark to --sp-fynn-orange. */
    font-size: var(--sp-text-sm);
    font-weight: var(--sp-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-fynn-orange);
    margin: 0 0 var(--sp-space-3);
}

.sp-home-section-title {
    font-family: var(--sp-font-display);
    font-size: 2rem;
    font-weight: var(--sp-font-bold);
    color: var(--sp-navy);
    margin: 0 0 var(--sp-space-4);
    line-height: var(--sp-leading-tight);
    letter-spacing: -0.01em;
    max-width: 40rem;
}

.sp-home-section-lead {
    font-size: var(--sp-text-lg);
    color: var(--sp-text-secondary);
    line-height: var(--sp-leading-relaxed);
    margin: 0 0 var(--sp-space-8);
    max-width: 42rem;
}

/* ── Card grids (audiences + pillars) ─────────────────────────────── */
.sp-home-cards-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-space-5);
}

.sp-home-card {
    background-color: var(--sp-white);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    padding: var(--sp-space-6);
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

    .sp-home-card:hover {
        border-color: var(--sp-navy);
        box-shadow: 0 10px 30px rgba(30, 58, 95, 0.1);
        transform: translateY(-2px);
    }

.sp-home-card-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--sp-radius-md);
    background-color: var(--sp-navy-lighter);
    color: var(--sp-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: var(--sp-space-4);
}

.sp-home-card-title {
    font-family: var(--sp-font-display);
    font-size: var(--sp-text-xl);
    font-weight: var(--sp-font-bold);
    color: var(--sp-navy);
    margin: 0 0 var(--sp-space-2);
}

.sp-home-card-body {
    color: var(--sp-text-secondary);
    line-height: var(--sp-leading-relaxed);
    margin: 0 0 var(--sp-space-5);
    flex: 1;
}

.sp-home-card-link {
    color: var(--sp-navy);
    font-weight: var(--sp-font-semibold);
    text-decoration: none;
    font-size: var(--sp-text-sm);
    transition: color 0.15s ease;
}

    .sp-home-card-link:hover {
        /* S63 — gold → orange palette swap. */
        color: var(--sp-fynn-orange-dark);
    }

/* Pillars — slightly different visual weight than audience cards */
.sp-home-pillar {
    text-align: left;
    padding: var(--sp-space-2);
}

.sp-home-pillar-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--sp-radius-md);
    background-color: var(--sp-white);
    color: var(--sp-navy);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: var(--sp-space-3);
    border: 1px solid var(--sp-border);
}

.sp-home-pillar-title {
    font-family: var(--sp-font-display);
    font-size: var(--sp-text-lg);
    font-weight: var(--sp-font-bold);
    color: var(--sp-navy);
    margin: 0 0 var(--sp-space-2);
}

.sp-home-pillar-body {
    color: var(--sp-text-secondary);
    line-height: var(--sp-leading-relaxed);
    margin: 0;
    font-size: var(--sp-text-base);
}

/* ── State coverage grid ─────────────────────────────────────────── */
.sp-home-state-grid {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(56px, 1fr));
    gap: var(--sp-space-2);
}

.sp-home-state {
    text-align: center;
    padding: var(--sp-space-3) var(--sp-space-2);
    background-color: var(--sp-bg-tertiary);
    border-radius: var(--sp-radius-md);
    color: var(--sp-text-tertiary);
    font-weight: var(--sp-font-semibold);
    font-size: var(--sp-text-sm);
    letter-spacing: 0.04em;
}

.sp-home-state--featured {
    background-color: var(--sp-navy);
    color: var(--sp-white);
}

/* ── Final CTA card ──────────────────────────────────────────────── */
/* S62 — flipped from navy-on-white to warm-cream-on-white (Option A
   from the brief). Previous treatment had the navy card stacking
   against the navy footer so the bottom of the page read as one
   solid navy slab. Cream card + lightened footer (below) now read
   as two distinct zones. Box-shadow softened to a warm navy tint
   so the cream card lifts off the white section. */
.sp-home-cta-card {
    background-color: var(--sp-home-bg-section-warm);
    border-radius: 20px;
    padding: var(--sp-space-10) var(--sp-space-8);
    text-align: center;
    color: var(--sp-navy);
    box-shadow: 0 16px 40px rgba(30, 58, 95, 0.10);
}

.sp-home-cta-title {
    font-family: var(--sp-font-display);
    font-size: 2rem;
    font-weight: var(--sp-font-bold);
    color: var(--sp-navy);
    margin: 0 0 var(--sp-space-3);
    letter-spacing: -0.01em;
}

.sp-home-cta-sub {
    font-size: var(--sp-text-lg);
    color: var(--sp-text-secondary);
    margin: 0 0 var(--sp-space-6);
}

.sp-home-cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-space-3);
    justify-content: center;
}

/* S62 — removed the cream-card ghost-dark white-text override that
   was needed when the card was navy. On cream, the default
   ghost-dark navy text + navy-tinted border read cleanly without
   any override. */

/* S63 — sp-home-footer-* rules moved to wwwroot/css/site-shell.css
   under sp-site-footer-* class names; both layouts now render the
   same footer via the shared _SiteFooter partial. */

/* ── Responsive ──────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .sp-home-cards-3 {
        grid-template-columns: repeat(2, 1fr);
    }

    .sp-home-hero-title {
        font-size: 2.25rem;
    }

    /* S61 — hide the blueprint grid backdrop below desktop so the
       repeating-gradient render cost doesn't hit small viewports.
       The depth treatment is desktop-only by design. */
    .sp-home-hero-card::before {
        display: none;
    }

    /* S63 — sp-home-footer-shell + sp-home-footer-brand overrides
       removed; the shared site-shell.css responsive block now
       handles all footer wrapping. */
}

@media (max-width: 768px) {
    /* S63 — sp-home-header-shell / sp-home-nav / sp-home-header-actions
       overrides removed; shared site-shell.css owns the header
       responsive behavior. */

    .sp-home-hero {
        padding: var(--sp-space-5) var(--sp-space-3);
    }

    .sp-home-hero-card {
        padding: var(--sp-space-6) var(--sp-space-5);
        border-radius: 16px;
    }

    .sp-home-hero-grid {
        grid-template-columns: 1fr;
        gap: var(--sp-space-6);
    }

    .sp-home-hero-title {
        font-size: 1.875rem;
    }

    .sp-home-hero-sub {
        font-size: var(--sp-text-base);
    }

    .sp-home-section {
        padding: var(--sp-space-8) var(--sp-space-4);
    }

    .sp-home-section-title {
        font-size: 1.625rem;
    }

    .sp-home-cards-3 {
        grid-template-columns: 1fr;
    }

    .sp-home-cta-card {
        padding: var(--sp-space-7) var(--sp-space-5);
        border-radius: 16px;
    }

    .sp-home-cta-title {
        font-size: 1.625rem;
    }
}

@media (max-width: 480px) {
    .sp-home-hero-actions,
    .sp-home-cta-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .sp-home-btn--lg {
        text-align: center;
    }
}

/* =================================================================
   S59 — How It Works section
   Inserted between hero and the three-audience trifecta.
   Three numbered steps, monochrome inline SVG icons (24x24, stroke-
   only, no fills). Background uses --sp-bg-secondary for subtle
   differentiation from the white sections above and below.
   ================================================================= */

.sp-home-howitworks-grid {
    /* S62 — top margin space-6 → space-12 so the section rhythm
       matches "For families..." which has a section-title + lead
       between eyebrow and cards. How It Works has neither (the
       S61 subhead deletion left only the eyebrow), so we bump the
       grid margin to restore the breathing room the missing
       elements would have provided. */
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--sp-space-6);
    margin-top: var(--sp-space-12);
}

.sp-home-howitworks-card {
    /* S62 — vertical padding bumped space-7 (1.75rem) → space-8
       (2rem) for premium-feel internal breathing room matching
       the For-families card rhythm. Horizontal padding kept at
       space-6 to align with .sp-home-card. */
    background-color: var(--sp-white);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    padding: var(--sp-space-8) var(--sp-space-6);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}

    .sp-home-howitworks-card:hover {
        box-shadow: 0 10px 30px rgba(30, 58, 95, 0.08);
        transform: translateY(-2px);
    }

.sp-home-howitworks-step {
    /* S62 — numerals enlarged from text-sm (14px) to display
       2.75rem (44px) so they read as visual anchors. Line-height
       1 to keep them compact within the card.
       S63 — color flipped --sp-gold-dark → --sp-fynn-orange-dark
       as part of the gold → marketing-orange palette swap. */
    font-family: var(--sp-font-display);
    font-size: 2.75rem;
    font-weight: var(--sp-font-bold);
    color: var(--sp-fynn-orange-dark);
    line-height: 1;
    letter-spacing: -0.02em;
    margin-bottom: var(--sp-space-2);
}

/* S62 — section-level CTA below the three cards. Centered;
   sits in its own vertical rhythm slot via top margin so it
   reads as a distinct beat after the explainer trio. */
.sp-home-howitworks-cta {
    margin-top: var(--sp-space-10);
    display: flex;
    justify-content: center;
}

.sp-home-howitworks-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: var(--sp-radius-md);
    background-color: var(--sp-navy-lighter);
    color: var(--sp-navy);
    margin-bottom: var(--sp-space-4);
}

    .sp-home-howitworks-icon svg {
        display: block;
    }

.sp-home-howitworks-title {
    font-family: var(--sp-font-display);
    font-size: var(--sp-text-xl);
    font-weight: var(--sp-font-bold);
    color: var(--sp-navy);
    margin: 0 0 var(--sp-space-2);
}

.sp-home-howitworks-body {
    color: var(--sp-text-secondary);
    line-height: var(--sp-leading-relaxed);
    margin: 0;
}

@media (max-width: 1024px) {
    .sp-home-howitworks-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Center-anchor the third card on tablet when the first two are paired. */
    .sp-home-howitworks-card:nth-child(3) {
        grid-column: 1 / -1;
        max-width: 32rem;
        justify-self: center;
    }
}

@media (max-width: 768px) {
    .sp-home-howitworks-grid {
        grid-template-columns: 1fr;
    }

    .sp-home-howitworks-card:nth-child(3) {
        grid-column: auto;
        max-width: none;
        justify-self: stretch;
    }
}