/* ═══════════════════════════════════════════════════════════
   MARKETING SITE — Block 11
   Post-pivot positioning ("the records platform for school choice").
   Mobile-first. No gradients. All colors via --sp-* tokens.
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Quicksand:wght@500;600;700&display=swap');

body.sp-marketing-body {
    margin: 0;
    background: var(--sp-bg-primary);
    color: var(--sp-text-primary);
    font-family: var(--sp-font-sans);
    font-size: var(--sp-text-base);
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* S63 — sp-marketing-skip-link / -header* / -logo* / -nav* /
   -header-actions rules moved to wwwroot/css/site-shell.css under
   neutral sp-site-* classes; both the homepage and marketing pages
   now render the same chrome via the shared _SiteHeader partial.
   The marketing body-content classes below (hero, trifecta,
   coverage, pricing, FAQ, statute monitor, beta hero, etc.) remain
   owned by this file. */

/* ─── Body-content CTAs ─── */
/* These are page-content buttons (hero CTAs on marketing pages,
   form submits, in-section calls-to-action) — distinct from the
   header's sp-site-cta-* which live in site-shell.css. Same visual
   shape so the page-level CTAs match the header CTA, just kept
   under their original sp-marketing-* name to avoid touching
   every marketing page's CTA markup. */
.sp-marketing-cta-primary,
.sp-marketing-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: var(--sp-touch-min);
    padding: 0 var(--sp-space-5);
    border-radius: var(--sp-radius-full);
    font-family: var(--sp-font-sans);
    font-size: var(--sp-text-base);
    font-weight: var(--sp-font-semibold);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid transparent;
    transition: background-color var(--sp-transition-fast), transform var(--sp-transition-fast);
}

.sp-marketing-cta-primary {
    background: var(--sp-fynn-orange);
    color: var(--sp-white);
}

    .sp-marketing-cta-primary:hover,
    .sp-marketing-cta-primary:focus-visible {
        /* S63 — hardcoded #d56a2f replaced by the new
           --sp-fynn-orange-dark token added to variables.css. */
        background: var(--sp-fynn-orange-dark);
        outline: none;
    }

.sp-marketing-cta-secondary {
    background: var(--sp-bg-primary);
    color: var(--sp-text-primary);
    border-color: var(--sp-border);
}

    .sp-marketing-cta-secondary:hover,
    .sp-marketing-cta-secondary:focus-visible {
        background: var(--sp-bg-secondary);
        outline: none;
    }

.sp-marketing-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-space-3);
}

/* ─── Section scaffolding ─── */
.sp-marketing-section {
    padding: var(--sp-space-12) var(--sp-space-4);
}

@media (min-width: 768px) {
    .sp-marketing-section {
        padding: var(--sp-space-16) var(--sp-space-6);
    }
}

.sp-marketing-section-shell {
    max-width: var(--sp-container-xl);
    margin: 0 auto;
}

.sp-marketing-section-shell--narrow {
    max-width: 720px;
}

.sp-marketing-eyebrow {
    margin: 0 0 var(--sp-space-2) 0;
    font-size: var(--sp-text-sm);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--sp-fynn-orange);
    font-weight: var(--sp-font-semibold);
}

/* Eyebrow variant for dark-backgrounded headers (e.g., statute monitor hero). */
.sp-marketing-eyebrow--on-dark {
    color: var(--sp-fynn-cream);
}

.sp-marketing-section-title {
    margin: 0 0 var(--sp-space-4) 0;
    font-family: var(--sp-font-display);
    font-weight: var(--sp-font-bold);
    font-size: 1.875rem;
    line-height: 1.2;
    color: var(--sp-text-primary);
}

@media (min-width: 768px) {
    .sp-marketing-section-title {
        font-size: 2.5rem;
    }
}

.sp-marketing-section-lead {
    margin: 0 0 var(--sp-space-6) 0;
    font-size: var(--sp-text-lg);
    line-height: 1.6;
    color: var(--sp-text-secondary);
    max-width: 720px;
}

/* ─── Hero ─── */
.sp-marketing-hero {
    background: var(--sp-bg-secondary);
    padding: var(--sp-space-12) var(--sp-space-4);
}

@media (min-width: 768px) {
    .sp-marketing-hero {
        padding: var(--sp-space-16) var(--sp-space-6);
    }
}

.sp-marketing-hero-shell {
    max-width: var(--sp-container-xl);
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-space-8);
    align-items: center;
}

@media (min-width: 1024px) {
    .sp-marketing-hero-shell {
        grid-template-columns: 1.1fr 1fr;
        gap: var(--sp-space-12);
    }
}

.sp-marketing-hero-headline {
    margin: 0 0 var(--sp-space-4) 0;
    font-family: var(--sp-font-display);
    font-weight: var(--sp-font-bold);
    font-size: 2.25rem;
    line-height: 1.1;
    color: var(--sp-text-primary);
}

@media (min-width: 768px) {
    .sp-marketing-hero-headline {
        font-size: 3.25rem;
    }
}

@media (min-width: 1280px) {
    .sp-marketing-hero-headline {
        font-size: 3.75rem;
    }
}

.sp-marketing-hero-headline-line {
    display: block;
}

.sp-marketing-hero-subhead {
    margin: 0 0 var(--sp-space-6) 0;
    font-size: var(--sp-text-lg);
    line-height: 1.55;
    color: var(--sp-text-secondary);
    max-width: 540px;
}

@media (min-width: 768px) {
    .sp-marketing-hero-subhead {
        font-size: var(--sp-text-xl);
    }
}

.sp-marketing-hero-visual {
    background: var(--sp-bg-primary);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-xl);
    padding: var(--sp-space-5);
    box-shadow: var(--sp-shadow-md);
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-4);
}

.sp-marketing-hero-visual-stack {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-space-4);
}

@media (min-width: 600px) {
    .sp-marketing-hero-visual-stack {
        grid-template-columns: 1fr 1fr;
    }
}

.sp-marketing-hero-visual-panel {
    background: var(--sp-bg-secondary);
    border-radius: var(--sp-radius-lg);
    padding: var(--sp-space-4);
}

.sp-marketing-hero-visual-panel--student {
    background: var(--sp-fynn-cream);
}

.sp-marketing-hero-visual-eyebrow {
    margin: 0 0 var(--sp-space-2) 0;
    font-size: var(--sp-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-text-tertiary);
}

.sp-marketing-hero-visual-headline {
    margin: 0 0 var(--sp-space-2) 0;
    font-weight: var(--sp-font-semibold);
    font-size: var(--sp-text-lg);
    color: var(--sp-text-primary);
}

.sp-marketing-hero-visual-meta {
    margin: 0;
    font-size: var(--sp-text-sm);
    color: var(--sp-text-secondary);
}

.sp-marketing-hero-visual-pulse {
    display: inline-block;
    margin-top: var(--sp-space-2);
    padding: 2px var(--sp-space-3);
    background: var(--sp-success-light);
    color: var(--sp-success-text);
    border-radius: var(--sp-radius-full);
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
}

/* S67 — additive rules introduced for the Families hero alignment.
   Both classes are additive (no existing rules modified) so they are
   available for the S68 Microschools and S69 Programs sessions to
   stamp the same pattern without further CSS work. */

/* Inline trust line that sits below the hero CTA row. Quieter
   typography than the trust-card strip pattern (.sp-marketing-trust-*)
   used in mid-page sections — this is a single calming line directly
   under the CTAs, not a multi-card component. */
.sp-marketing-hero-trust {
    margin: var(--sp-space-3) 0 0 0;
    font-size: var(--sp-text-sm);
    color: var(--sp-text-tertiary);
    letter-spacing: 0.02em;
}

/* Fynn stroke-fox mark inline with the hero-viz "Fynn classified"
   headline. Renders the canonical S64/S65 SVG at 18px, in
   --sp-fynn-orange-dark via currentColor, with a small gap to the
   following text. align-items center keeps the mark on the cap-line
   of the headline text. */
.sp-marketing-hero-visual-fynn-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-space-2);
}

.sp-marketing-hero-visual-fynn-svg {
    display: inline-flex;
    align-items: center;
    line-height: 0;
    color: var(--sp-fynn-orange-dark);
}

/* ─── Trifecta ─── */
.sp-marketing-trifecta {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-space-4);
    margin: 0;
}

@media (min-width: 768px) {
    .sp-marketing-trifecta {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-space-6);
    }
}

.sp-marketing-trifecta-card {
    background: var(--sp-bg-primary);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-xl);
    padding: var(--sp-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-3);
}

.sp-marketing-trifecta-eyebrow {
    margin: 0;
    font-size: var(--sp-text-xs);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--sp-fynn-orange);
    font-weight: var(--sp-font-semibold);
}

.sp-marketing-trifecta-title {
    margin: 0;
    font-family: var(--sp-font-display);
    font-weight: var(--sp-font-bold);
    font-size: var(--sp-text-2xl);
    color: var(--sp-text-primary);
}

.sp-marketing-trifecta-body {
    margin: 0 0 var(--sp-space-2) 0;
    color: var(--sp-text-secondary);
    line-height: 1.6;
    flex: 1;
}

.sp-marketing-trifecta-link {
    color: var(--sp-navy);
    font-weight: var(--sp-font-semibold);
    text-decoration: none;
}

.sp-marketing-trifecta-link:hover,
.sp-marketing-trifecta-link:focus-visible {
    text-decoration: underline;
    outline: none;
}

/* ─── State coverage strip ─── */
.sp-marketing-coverage {
    background: var(--sp-bg-secondary);
}

.sp-marketing-coverage-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--sp-space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 480px) {
    .sp-marketing-coverage-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (min-width: 768px) {
    .sp-marketing-coverage-grid {
        grid-template-columns: repeat(6, 1fr);
    }
}

@media (min-width: 1024px) {
    .sp-marketing-coverage-grid {
        grid-template-columns: repeat(8, 1fr);
    }
}

.sp-marketing-coverage-state {
    background: var(--sp-bg-primary);
    border: 1px solid var(--sp-border-light);
    border-radius: var(--sp-radius);
    padding: var(--sp-space-2) var(--sp-space-3);
    text-align: center;
    font-size: var(--sp-text-sm);
    color: var(--sp-text-secondary);
}

.sp-marketing-coverage-state--featured {
    background: var(--sp-fynn-cream);
    color: var(--sp-text-primary);
    font-weight: var(--sp-font-semibold);
    border-color: var(--sp-fynn-orange);
}

/* ─── ESA strip ─── */
.sp-marketing-esa-strip {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-marketing-esa-chip {
    padding: var(--sp-space-2) var(--sp-space-4);
    background: var(--sp-navy-lighter);
    color: var(--sp-navy);
    border-radius: var(--sp-radius-full);
    font-size: var(--sp-text-sm);
    font-weight: var(--sp-font-medium);
}

/* ─── Trust strip ─── */
.sp-marketing-trust-strip {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-space-4);
}

@media (min-width: 768px) {
    .sp-marketing-trust-strip {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-space-6);
    }
}

.sp-marketing-trust-card {
    background: var(--sp-bg-secondary);
    border: 1px dashed var(--sp-border);
    border-radius: var(--sp-radius-lg);
    padding: var(--sp-space-5);
    text-align: center;
    color: var(--sp-text-tertiary);
    font-style: italic;
}

.sp-marketing-trust-card strong {
    display: block;
    color: var(--sp-text-secondary);
    font-style: normal;
    margin-bottom: var(--sp-space-2);
}

/* ─── Pricing ─── */
.sp-marketing-pricing-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-space-4);
}

@media (min-width: 768px) {
    .sp-marketing-pricing-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--sp-space-6);
    }
}

.sp-marketing-pricing-card {
    background: var(--sp-bg-primary);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-xl);
    padding: var(--sp-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-3);
}

.sp-marketing-pricing-card--featured {
    border-color: var(--sp-fynn-orange);
    box-shadow: var(--sp-shadow-md);
}

.sp-marketing-pricing-name {
    margin: 0;
    font-family: var(--sp-font-display);
    font-weight: var(--sp-font-bold);
    font-size: var(--sp-text-xl);
    color: var(--sp-text-primary);
}

.sp-marketing-pricing-amount {
    margin: 0;
    font-size: 2rem;
    font-weight: var(--sp-font-bold);
    color: var(--sp-text-primary);
    line-height: 1;
}

.sp-marketing-pricing-amount-suffix {
    font-size: var(--sp-text-base);
    color: var(--sp-text-tertiary);
    font-weight: var(--sp-font-medium);
    margin-left: var(--sp-space-1);
}

.sp-marketing-pricing-desc {
    margin: 0;
    color: var(--sp-text-secondary);
    font-size: var(--sp-text-sm);
    flex: 1;
}

.sp-marketing-pricing-badge {
    display: inline-block;
    padding: 2px var(--sp-space-3);
    background: var(--sp-fynn-cream);
    color: var(--sp-fynn-orange);
    border-radius: var(--sp-radius-full);
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
}

/* ─── FAQ ─── */
.sp-marketing-faq {
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-3);
}

.sp-marketing-faq-item {
    background: var(--sp-bg-primary);
    border: 1px solid var(--sp-border-light);
    border-radius: var(--sp-radius-lg);
    padding: var(--sp-space-4) var(--sp-space-5);
}

.sp-marketing-faq-question {
    margin: 0 0 var(--sp-space-2) 0;
    font-weight: var(--sp-font-semibold);
    font-size: var(--sp-text-lg);
    color: var(--sp-text-primary);
}

.sp-marketing-faq-answer {
    margin: 0;
    color: var(--sp-text-secondary);
    line-height: 1.6;
}

/* ─── Generic feature grid (used by all audience tracks) ─── */
.sp-marketing-feature-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-space-4);
}

@media (min-width: 768px) {
    .sp-marketing-feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--sp-space-6);
    }
}

@media (min-width: 1100px) {
    .sp-marketing-feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sp-marketing-feature-card {
    background: var(--sp-bg-primary);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    padding: var(--sp-space-5);
}

.sp-marketing-feature-title {
    margin: 0 0 var(--sp-space-2) 0;
    font-weight: var(--sp-font-semibold);
    font-size: var(--sp-text-lg);
    color: var(--sp-text-primary);
}

.sp-marketing-feature-body {
    margin: 0;
    color: var(--sp-text-secondary);
    line-height: 1.6;
}

/* ─── Statute monitor ─── */
.sp-statute-monitor-header {
    background: var(--sp-navy);
    color: var(--sp-white);
    padding: var(--sp-space-12) var(--sp-space-4);
}

@media (min-width: 768px) {
    .sp-statute-monitor-header {
        padding: var(--sp-space-16) var(--sp-space-6);
    }
}

.sp-statute-monitor-shell {
    max-width: var(--sp-container-xl);
    margin: 0 auto;
}

.sp-statute-monitor-title {
    margin: 0 0 var(--sp-space-3) 0;
    font-family: var(--sp-font-display);
    font-weight: var(--sp-font-bold);
    font-size: 2.25rem;
    line-height: 1.15;
    color: var(--sp-white);
}

@media (min-width: 768px) {
    .sp-statute-monitor-title {
        font-size: 3rem;
    }
}

.sp-statute-monitor-lead {
    margin: 0 0 var(--sp-space-6) 0;
    font-size: var(--sp-text-lg);
    line-height: 1.55;
    color: var(--sp-navy-lighter);
    max-width: 720px;
}

.sp-statute-monitor-search {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-space-3);
    margin-bottom: var(--sp-space-3);
}

.sp-statute-monitor-search input {
    flex: 1;
    min-width: 240px;
    min-height: var(--sp-touch-min);
    padding: 0 var(--sp-space-4);
    border-radius: var(--sp-radius-md);
    border: 1px solid var(--sp-navy-light);
    background: var(--sp-bg-primary);
    color: var(--sp-text-primary);
    font-size: var(--sp-text-base);
}

.sp-statute-monitor-search button {
    min-height: var(--sp-touch-min);
    padding: 0 var(--sp-space-5);
    border-radius: var(--sp-radius-md);
    background: var(--sp-fynn-orange);
    color: var(--sp-white);
    border: none;
    font-weight: var(--sp-font-semibold);
    cursor: pointer;
}

.sp-statute-monitor-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-space-2);
    list-style: none;
    padding: 0;
    margin: 0;
}

.sp-statute-monitor-chip {
    padding: var(--sp-space-2) var(--sp-space-3);
    border-radius: var(--sp-radius-full);
    background: var(--sp-navy-dark);
    color: var(--sp-navy-lighter);
    font-size: var(--sp-text-sm);
    border: 1px solid var(--sp-navy-light);
    cursor: pointer;
    text-decoration: none;
}

.sp-statute-monitor-chip--active {
    background: var(--sp-fynn-orange);
    color: var(--sp-white);
    border-color: var(--sp-fynn-orange);
}

.sp-statute-recent-changes {
    background: var(--sp-bg-secondary);
    padding: var(--sp-space-8) var(--sp-space-4);
}

@media (min-width: 768px) {
    .sp-statute-recent-changes {
        padding: var(--sp-space-12) var(--sp-space-6);
    }
}

.sp-statute-recent-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-3);
}

.sp-statute-recent-item {
    background: var(--sp-bg-primary);
    border-left: 4px solid var(--sp-fynn-orange);
    border-radius: var(--sp-radius-md);
    padding: var(--sp-space-4);
}

.sp-statute-recent-meta {
    margin: 0 0 var(--sp-space-1) 0;
    font-size: var(--sp-text-sm);
    color: var(--sp-text-tertiary);
}

.sp-statute-recent-title {
    margin: 0 0 var(--sp-space-1) 0;
    font-weight: var(--sp-font-semibold);
    color: var(--sp-text-primary);
}

.sp-statute-recent-summary {
    margin: 0;
    color: var(--sp-text-secondary);
    line-height: 1.55;
}

.sp-statute-monitor-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-space-3);
    list-style: none;
    padding: 0;
    margin: 0;
}

@media (min-width: 600px) {
    .sp-statute-monitor-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .sp-statute-monitor-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.sp-statute-state-card {
    background: var(--sp-bg-primary);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    padding: var(--sp-space-4);
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-2);
}

.sp-statute-state-card:hover,
.sp-statute-state-card:focus-visible {
    border-color: var(--sp-fynn-orange);
    outline: none;
}

.sp-statute-state-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-space-2);
}

.sp-statute-state-name {
    margin: 0;
    font-weight: var(--sp-font-semibold);
    font-size: var(--sp-text-lg);
    color: var(--sp-text-primary);
}

.sp-statute-state-code {
    font-size: var(--sp-text-sm);
    color: var(--sp-text-tertiary);
    font-family: var(--sp-font-mono);
}

.sp-statute-state-meta {
    margin: 0;
    color: var(--sp-text-secondary);
    font-size: var(--sp-text-sm);
}

.sp-statute-state-level {
    display: inline-block;
    padding: 2px var(--sp-space-2);
    border-radius: var(--sp-radius-sm);
    font-size: var(--sp-text-xs);
    font-weight: var(--sp-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.sp-statute-state-level--low {
    background: var(--sp-success-light);
    color: var(--sp-success-text);
}

.sp-statute-state-level--moderate {
    background: var(--sp-warning-light);
    color: var(--sp-warning-text);
}

.sp-statute-state-level--high {
    background: var(--sp-danger-light);
    color: var(--sp-danger-text);
}

.sp-statute-state-level--unknown {
    background: var(--sp-gray-100);
    color: var(--sp-text-tertiary);
}

.sp-statute-state-availability {
    margin: 0;
    font-size: var(--sp-text-xs);
    color: var(--sp-fynn-orange);
    font-weight: var(--sp-font-semibold);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Detail page */
.sp-statute-detail-meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--sp-space-3) var(--sp-space-6);
    margin: 0 0 var(--sp-space-6) 0;
    padding: var(--sp-space-4);
    background: var(--sp-bg-secondary);
    border-radius: var(--sp-radius-lg);
}

.sp-statute-detail-meta-item {
    display: flex;
    flex-direction: column;
}

.sp-statute-detail-meta-label {
    font-size: var(--sp-text-xs);
    color: var(--sp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sp-statute-detail-meta-value {
    font-weight: var(--sp-font-semibold);
    color: var(--sp-text-primary);
}

.sp-statute-detail-section {
    background: var(--sp-bg-primary);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-lg);
    padding: var(--sp-space-5);
    margin-bottom: var(--sp-space-4);
}

.sp-statute-detail-section h2 {
    margin: 0 0 var(--sp-space-2) 0;
    font-size: var(--sp-text-xl);
    color: var(--sp-text-primary);
}

.sp-statute-detail-section p,
.sp-statute-detail-section ul {
    margin: 0 0 var(--sp-space-2) 0;
    color: var(--sp-text-secondary);
    line-height: 1.6;
}

.sp-statute-detail-source {
    margin-top: var(--sp-space-3);
    font-size: var(--sp-text-sm);
    color: var(--sp-text-tertiary);
}

.sp-statute-detail-source a {
    color: var(--sp-navy);
    text-decoration: underline;
}

.sp-statute-detail-empty {
    background: var(--sp-bg-secondary);
    border: 1px dashed var(--sp-border);
    border-radius: var(--sp-radius-lg);
    padding: var(--sp-space-6);
    text-align: center;
    color: var(--sp-text-tertiary);
}

/* S63 — sp-marketing-footer* rules moved to wwwroot/css/site-shell.css
   under sp-site-footer-* class names. Marketing pages now render the
   same homepage S62 footer treatment (light, navy text, top border)
   via the shared _SiteFooter partial. The pre-S63 dark-navy marketing
   footer (heavier, with white text) is gone; the new treatment is
   lighter and visually secondary to whatever section sits above it. */

/* ─── Pending-legal banner ─── */
.sp-marketing-legal-banner {
    background: var(--sp-warning-light);
    border: 1px solid var(--sp-warning);
    color: var(--sp-warning-text);
    padding: var(--sp-space-3) var(--sp-space-4);
    border-radius: var(--sp-radius-md);
    margin-bottom: var(--sp-space-6);
    font-size: var(--sp-text-sm);
}

.sp-marketing-legal-banner strong {
    display: block;
    margin-bottom: 2px;
    font-size: var(--sp-text-base);
}

/* ─── Contact form ─── */
.sp-marketing-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-4);
    max-width: 560px;
}

.sp-marketing-form-field {
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-2);
}

.sp-marketing-form-field label {
    font-weight: var(--sp-font-medium);
    color: var(--sp-text-primary);
    font-size: var(--sp-text-sm);
}

.sp-marketing-form-field input,
.sp-marketing-form-field textarea,
.sp-marketing-form-field select {
    min-height: var(--sp-touch-min);
    padding: var(--sp-space-3) var(--sp-space-4);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    background: var(--sp-bg-primary);
    font-size: var(--sp-text-base);
    color: var(--sp-text-primary);
    font-family: inherit;
}

.sp-marketing-form-field textarea {
    min-height: 120px;
    resize: vertical;
}

/* ═══════════════════════════════════════════════════════════
   BLOCK 17 — Beta cohort polish
   Marketing-surface additions for /beta, contact updates,
   footer Quick-Contact CTA, and form helper classes.
   Mobile-first. All --sp-* tokens.
   ═══════════════════════════════════════════════════════════ */

/* S63 — sp-marketing-footer-cta ("Reach out — no account needed"
   strip above the old marketing footer) was dropped during the
   S62-footer-propagation. It was a marketing-only addition that
   didn't survive the unification; the strip is flagged for
   operator review in the session summary as a potentially
   reintroducible component if it tested well as a conversion
   anchor before the dark footer. */

/* ─── Form helper classes shared by /beta and Contact ─── */
.sp-marketing-form-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--sp-space-4);
}

@media (min-width: 640px) {
    .sp-marketing-form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.sp-marketing-form-errors {
    color: var(--sp-danger-dark);
    background: var(--sp-danger-light);
    border: 1px solid var(--sp-danger);
    border-radius: var(--sp-radius-md);
    padding: var(--sp-space-3) var(--sp-space-4);
    font-size: var(--sp-text-sm);
}

.sp-marketing-form-checkbox {
    flex-direction: row;
    align-items: flex-start;
}

.sp-marketing-form-checkbox label {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-space-2);
    cursor: pointer;
    font-size: var(--sp-text-sm);
    color: var(--sp-text-primary);
}

.sp-marketing-form-checkbox input[type="checkbox"] {
    margin-top: 4px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.sp-marketing-form-fineprint {
    margin: 0;
    font-size: var(--sp-text-xs);
    color: var(--sp-text-tertiary);
}

.sp-marketing-form-fineprint a {
    color: var(--sp-navy);
    text-decoration: underline;
}

/* ─── /beta hero + code card ─── */
.sp-beta-hero {
    padding: var(--sp-space-8) 0 var(--sp-space-6) 0;
}

.sp-beta-code-card {
    margin: var(--sp-space-6) 0 0 0;
    padding: var(--sp-space-5);
    border: 2px solid var(--sp-navy);
    border-radius: var(--sp-radius-lg);
    background: var(--sp-bg-primary);
    max-width: 460px;
}

.sp-beta-code-eyebrow {
    margin: 0;
    font-size: var(--sp-text-xs);
    color: var(--sp-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.sp-beta-code-value {
    margin: var(--sp-space-1) 0 0 0;
    font-family: var(--sp-font-display);
    font-size: var(--sp-text-2xl);
    font-weight: var(--sp-font-bold);
    color: var(--sp-navy);
    letter-spacing: 0.02em;
}

.sp-beta-code-label {
    margin: var(--sp-space-1) 0 0 0;
    font-size: var(--sp-text-sm);
    color: var(--sp-text-secondary);
}

.sp-beta-code-meta {
    margin: var(--sp-space-3) 0 0 0;
    font-size: var(--sp-text-sm);
    color: var(--sp-text-secondary);
}

.sp-beta-code-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-3);
    max-width: 440px;
    margin-top: var(--sp-space-4);
}

.sp-beta-code-form-label {
    font-size: var(--sp-text-sm);
    color: var(--sp-text-secondary);
    font-weight: var(--sp-font-medium);
}

.sp-beta-code-form input {
    min-height: var(--sp-touch-min);
    padding: var(--sp-space-3) var(--sp-space-4);
    border: 1px solid var(--sp-border);
    border-radius: var(--sp-radius-md);
    background: var(--sp-bg-primary);
    font-size: var(--sp-text-lg);
    font-family: var(--sp-font-display);
    letter-spacing: 0.02em;
}

.sp-beta-code-form button {
    align-self: flex-start;
}

.sp-beta-form {
    display: flex;
    flex-direction: column;
    gap: var(--sp-space-4);
    max-width: 560px;
}