/* ==============================================================
   STRVue Public Pages — Shared Stylesheet
   Consolidates all public/marketing page styles.
   Uses design tokens from tokens.css — no raw hex values.

   Sections:
   1. Public base resets + typography aliases
   2. Navigation (lp-nav)
   3. Hero sections
   4. Section / layout primitives
   5. Buttons
   6. Cards + grids
   7. CTA sections
   8. Footer
   9. Disclaimer
   10. Landing page specifics
   11. Platform page specifics
   12. Pricing page specifics
   13. About page specifics
   14. FAQ page specifics
   15. Resources page specifics
   16. CPA sample page specifics
   17. Knowledge base page specifics
   18. Tax check pages
   19. Legal pages (terms, privacy)
   20. Auth / onboarding pages
   21. Cost seg truth page
   22. Pre-buy pages
   23. Demo page
   24. Responsive
   ============================================================== */


/* ──────────────────────────────────────────
   1. PUBLIC BASE
   ────────────────────────────────────────── */

/* Alias layer — maps short names to design tokens for public pages.
   This is the ONLY place aliases are defined. Templates reference
   the alias vars OR design tokens directly. */
:root {
    --navy:       var(--c-navy);
    --navy-mid:   var(--c-navy-light);
    --navy-light: var(--c-navy-light);
    --slate:      #334155;
    --steel:      var(--c-text-secondary);
    --silver:     var(--c-text-muted);
    --mist:       var(--c-border);
    --ice:        #F9F8F7;   /* Fundrise-style warm neutral */
    --white:      #FFFFFF;
    --gold:       var(--c-gold);
    --gold-light: var(--c-gold);
    --teal:       #0D9488;
}


/* ──────────────────────────────────────────
   2. NAVIGATION
   Styles from components/nav-public.html
   ────────────────────────────────────────── */

.lp-nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mist);
    box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.lp-nav-inner {
    max-width: 1140px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 2rem; height: 72px;
}
.lp-logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; }
.lp-nav-right { display: flex; align-items: center; gap: 0; }
.lp-nav-links { display: flex; gap: 0; list-style: none; margin-right: 1.5rem; }
.lp-nav-links a {
    display: block; color: var(--steel); text-decoration: none;
    font-size: 0.8125rem; font-weight: 500; padding: 0.5rem 0.625rem;
    border-radius: 4px; transition: color 0.15s; white-space: nowrap;
}
.lp-nav-links a:hover { color: var(--navy); }
.lp-nav-links a.active { color: var(--navy); font-weight: 600; }
.lp-nav-links a.demo-link { color: var(--gold); }
.lp-nav-ctas { display: flex; gap: 0.75rem; align-items: center; }

/* Hamburger */
.lp-hamburger {
    display: none; cursor: pointer; padding: 8px;
    background: none; border: none; flex-direction: column;
    gap: 5px; align-items: center; justify-content: center;
}
.lp-hamburger span {
    display: block; width: 22px; height: 2px;
    background: var(--navy); border-radius: 2px;
    transition: transform 0.2s, opacity 0.2s;
}
.lp-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.lp-hamburger.open span:nth-child(2) { opacity: 0; }
.lp-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.lp-mobile-menu {
    display: none; position: fixed; top: 72px; left: 0; right: 0;
    background: rgba(255,255,255,0.99); backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--mist);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    padding: 1rem 1.5rem 1.5rem; z-index: 999;
}
.lp-mobile-menu.open { display: block; }
.lp-mobile-menu a {
    display: block; padding: 0.75rem 0; color: var(--slate);
    text-decoration: none; font-size: 0.9375rem; font-weight: 500;
    border-bottom: 1px solid var(--mist);
}
.lp-mobile-menu a:last-child { border-bottom: none; }
.lp-mobile-menu a:hover { color: var(--gold); }
.lp-mobile-menu a.active { color: var(--navy); font-weight: 600; }
.lp-mobile-ctas {
    display: flex; gap: 0.75rem; margin-top: 1rem; padding-top: 0.75rem;
    border-top: 1px solid var(--mist);
}
.lp-mobile-ctas a {
    border-bottom: none; padding: 0.5rem 1rem; text-align: center;
    border-radius: 5px; font-size: 0.875rem; flex: 1;
}
.lp-mobile-ctas .lp-btn-login { background: var(--ice); color: var(--slate); }
.lp-mobile-ctas .lp-btn-primary { display: block; }


/* ──────────────────────────────────────────
   3. HERO SECTIONS
   ────────────────────────────────────────── */

.lp-hero {
    background: var(--white);
    padding: var(--sp-section-lg) 2rem var(--sp-section);
    position: relative; overflow: hidden;
    margin-top: 72px;
}
.lp-hero-inner {
    max-width: 800px; margin: 0 auto; position: relative; z-index: 1;
}
.lp-hero--centered .lp-hero-inner,
.lp-hero--centered .lp-hero-text { text-align: center; }
.lp-hero-text h1 {
    font-size: var(--fs-hero-sm); font-weight: 700; color: var(--navy);
    line-height: 1.15; letter-spacing: -0.025em; margin-bottom: 1.25rem;
}
.lp-hero-text h1 span { color: var(--gold); }
.lp-hero-text p {
    font-size: var(--fs-marketing-body); color: var(--steel); line-height: 1.7;
    margin-bottom: 2rem; max-width: 600px;
}
.lp-hero--centered .lp-hero-text p { margin-left: auto; margin-right: auto; }
.lp-hero-actions {
    display: flex; gap: 1rem; align-items: center;
}
.lp-hero--centered .lp-hero-actions { justify-content: center; }

/* Landing-specific hero (taller, centered) */
.lp-hero--landing {
    padding: 52px 2rem 40px;
}
.lp-hero--landing .lp-hero-inner {
    max-width: 800px; text-align: center;
}
.lp-hero-label {
    display: inline-block; color: var(--gold);
    font-size: 0.8125rem; font-weight: 600;
    letter-spacing: 0.12em; text-transform: uppercase;
    margin-bottom: 1.5rem;
    border: 1px solid rgba(184, 134, 11, 0.3);
    padding: 0.4rem 1rem; border-radius: 2px;
}
.lp-hero-headline {
    font-size: var(--fs-hero); font-weight: 700; color: var(--navy);
    margin-bottom: 1.5rem; line-height: 1.1; letter-spacing: -0.03em;
}
.lp-hero-subline {
    font-size: var(--fs-marketing-body); color: var(--steel);
    margin-bottom: 2.5rem; line-height: 1.7;
    max-width: 640px; margin-left: auto; margin-right: auto;
}
.lp-hero-ctas {
    display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap;
}

/* Compact hero (pricing, faq headers) */
.lp-hero--compact {
    padding: var(--sp-section) 2rem calc(var(--sp-section) * 0.6);
}
.lp-hero--compact h1 {
    font-size: var(--fs-marketing-h2); font-weight: 700; color: var(--navy);
    margin-bottom: 0.5rem; line-height: 1.2; letter-spacing: -0.02em;
}
.lp-hero--compact p {
    font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.6;
}


/* ──────────────────────────────────────────
   4. SECTIONS / LAYOUT
   ────────────────────────────────────────── */

.lp-section {
    padding: var(--sp-section) 2rem;
}
.lp-section-inner {
    max-width: 1140px; margin: 0 auto;
}
.lp-section--narrow .lp-section-inner,
.lp-section-inner--narrow { max-width: 1040px; margin: 0 auto; }
.lp-section h2 {
    font-size: var(--fs-marketing-h2); font-weight: 700; color: var(--navy);
    line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 1rem;
}
.lp-section-desc {
    font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.7;
    max-width: 640px;
}

.lp-overline {
    font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--gold); font-weight: 700; margin-bottom: 0.75rem;
}

/* Section header — centered variant (landing) */
.lp-section-header { text-align: center; margin-bottom: 2.5rem; }
.lp-section-label {
    color: var(--gold); font-size: 0.8125rem; font-weight: 700;
    letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 1rem;
}
.lp-section-title {
    font-size: var(--fs-marketing-h2); font-weight: 700; color: var(--navy);
    margin-bottom: 0.75rem; line-height: 1.2;
}

/* Background utilities */
.lp-bg-white { background: var(--white); }
.lp-bg-ice { background: var(--ice); }
.lp-bg-dark {
    background: var(--ice);
}

/* Border utilities */
.lp-border-bottom { border-bottom: 1px solid var(--mist); }
.lp-border-top { border-top: 1px solid var(--mist); }

/* Grid utilities */
.lp-grid { display: grid; gap: 1.25rem; }
.lp-grid--2 { grid-template-columns: 1fr 1fr; }
.lp-grid--3 { grid-template-columns: repeat(3, 1fr); }
.lp-grid--4 { grid-template-columns: repeat(3, 1fr); }
.lp-grid--5 { grid-template-columns: repeat(5, 1fr); }
.lp-grid--gap-lg { gap: 1.5rem; }
.lp-grid--spaced { margin: 2rem 0; }
.lp-grid--mb { margin-bottom: 1.5rem; }

/* Section padding variants */
.lp-section--compact { padding: 2.5rem 2rem; }
.lp-section--tight { padding: 1.75rem 2rem; }

/* Container widths */
.lp-container { max-width: 1040px; margin: 0 auto; padding: 0 2rem; }
.lp-container--sm { max-width: 740px; margin: 0 auto; }
.lp-container--xs { max-width: 640px; margin: 0 auto; }
.lp-container--article { max-width: 900px; }
.lp-text-center { text-align: center; }

/* Mockup frame (dashboard preview on landing) */
.lp-mockup-frame {
    margin-top: 2.5rem;
    border-radius: 8px; overflow: hidden;
    box-shadow: 0 8px 40px rgba(11, 29, 50, 0.12);
}
.lp-mockup-frame svg { width: 100%; height: auto; display: block; }

/* Section spacing modifiers */
.lp-section--pt-sm { padding-top: var(--sp-section); }
.lp-section-desc--mb { margin-bottom: 2rem; }
.lp-section-desc--sm-muted { margin-top: 0.75rem; font-size: 0.8125rem; }


/* ──────────────────────────────────────────
   5. BUTTONS
   ────────────────────────────────────────── */

.lp-btn-login {
    color: var(--steel); text-decoration: none; font-size: 0.9375rem;
    font-weight: 500; padding: 0.625rem 1rem;
}
.lp-btn-login:hover { color: var(--navy); }

.lp-btn-primary {
    background: var(--gold); color: white; text-decoration: none;
    font-size: 0.875rem; font-weight: 600; padding: 0.625rem 1.5rem;
    border-radius: 6px; transition: opacity 0.15s; display: inline-block;
}
.lp-btn-primary:hover { opacity: 0.9; }

.lp-btn-primary--lg {
    padding: 0.75rem 2rem; font-size: 0.9375rem; font-weight: 700;
    letter-spacing: 0.02em;
}

.lp-btn-lg { padding: 14px 32px; font-size: 0.9375rem; }

.lp-btn-secondary {
    background: transparent; border: 1px solid var(--mist);
    color: var(--navy); padding: 0.625rem 1.5rem;
    border-radius: 6px; text-decoration: none; font-weight: 600;
    font-size: 0.875rem; transition: all 0.2s; display: inline-block;
}
.lp-btn-secondary:hover {
    background: var(--ice); border-color: var(--c-border-strong);
}

.lp-btn-hero {
    padding: 0.75rem 2rem; font-size: 0.9375rem; font-weight: 600;
    border-radius: 6px; cursor: pointer; transition: all 0.2s ease;
    text-decoration: none; display: inline-block; letter-spacing: 0.01em;
}
.lp-btn-hero-gold {
    background: var(--gold); color: var(--white); border: none;
}
.lp-btn-hero-gold:hover { opacity: 0.9; }
.lp-btn-hero-outline {
    background: transparent; color: var(--navy);
    border: 1px solid var(--mist);
}
.lp-btn-hero-outline:hover {
    border-color: var(--c-border-strong);
    background: var(--ice);
}

.lp-btn-gold {
    display: inline-block;
    background: var(--gold); color: var(--white); text-decoration: none;
    font-size: 0.9375rem; font-weight: 600; padding: 0.75rem 1.75rem;
    border-radius: 6px; transition: opacity 0.15s;
}
.lp-btn-gold:hover { opacity: 0.9; }

/* Shared text helper — used in auth, tax-check, onboarding contexts */
.subtitle {
    font-size: var(--fs-marketing-sm); color: var(--steel); margin-bottom: 1.25rem;
}


/* ──────────────────────────────────────────
   6. CARDS + GRIDS
   ────────────────────────────────────────── */

/* Generic card */
.lp-card {
    background: var(--white); border-radius: 8px; padding: 1.25rem 1.5rem;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
    transition: box-shadow 0.2s;
}
.lp-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }

/* Gold-bordered card */
.lp-card--gold { border: 2px solid var(--gold); }

/* Card inner text */
.lp-card-title {
    font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.5rem;
}
.lp-card--gold .lp-card-title { color: var(--gold); }
.lp-card-desc {
    font-size: 0.9375rem; color: var(--steel); line-height: 1.6;
}

/* Gold left-accent card */
.lp-accent-card {
    border-left: 3px solid var(--gold); padding: 1.25rem 1.5rem;
    background: var(--ice); border-radius: 0 6px 6px 0;
}
.lp-accent-card h4,
.lp-accent-card-title {
    font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.375rem;
}
.lp-accent-card p,
.lp-accent-card-desc {
    font-size: 0.9375rem; color: var(--steel); line-height: 1.6;
}

/* Feature grid + card — used on platform capabilities */
.lp-feature-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem;
    margin-top: 2rem;
}
.lp-feature-card {
    background: var(--white); border-radius: 8px;
    padding: 1.25rem 1.5rem; transition: all 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.lp-feature-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
.lp-feature-icon {
    width: 36px; height: 36px; border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 0.75rem; font-size: 1.125rem;
}
.lp-feature-icon--gold { background: rgba(184,134,11,0.08); color: var(--gold); }
.lp-feature-icon--teal { background: rgba(13,148,136,0.08); color: var(--teal); }
.lp-feature-icon--navy { background: rgba(11,29,50,0.06); color: var(--navy-light); }
.lp-feature-card h3 {
    font-size: 1rem; font-weight: 700; color: var(--navy);
    margin-bottom: 0.5rem; line-height: 1.3;
}
.lp-feature-card p {
    font-size: 0.9375rem; color: var(--steel); line-height: 1.6;
}

/* Stat display */
.lp-stat {
    margin-bottom: 1.25rem; padding-bottom: 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.lp-stat:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.lp-stat-num {
    font-size: 1.5rem; font-weight: 700; color: var(--gold); margin-bottom: 0.375rem;
}
.lp-stat-label {
    font-size: var(--fs-marketing-sm); color: var(--silver); line-height: 1.6;
}

/* Callout card */
.lp-callout {
    background: var(--ice); border-radius: 8px;
    padding: 1.5rem;
}
.lp-callout h3 {
    font-size: 1rem; font-weight: 700; color: var(--navy);
    margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.06em;
}
.lp-callout p { font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.7; }

/* Pillar card (about page) */
.lp-pillar-card {
    background: var(--white); border-radius: 8px;
    padding: 1.25rem 1.5rem; transition: all 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.lp-pillar-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.06);
}
.lp-pillar-card h3 {
    font-size: 1.125rem; font-weight: 700; color: var(--navy);
    margin-bottom: 0.5rem; line-height: 1.3;
}
.lp-pillar-card p { font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.7; }

/* Row-based line item display */
.lp-line-item {
    font-size: 0.9375rem; color: var(--steel); margin-bottom: 0.75rem;
    display: flex; justify-content: space-between;
}
.lp-line-item--neg { color: var(--c-negative); }
.lp-line-item--gold { color: var(--gold); }

/* Comparison panel */
.lp-dark-panel {
    background: var(--white);
    border: 1px solid var(--mist);
    border-radius: 8px; padding: 2rem; position: relative;
}
.lp-dark-panel--gold {
    background: var(--white);
    border: 2px solid var(--gold);
}
.lp-dark-panel-label {
    font-size: 0.9375rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; margin-bottom: 1.25rem;
}
.lp-dark-panel-label--silver { color: var(--steel); }
.lp-dark-panel-label--gold { color: var(--gold); }

/* Big number display (in dark panels) */
.lp-big-number {
    text-align: center; margin-bottom: 1.5rem;
}
.lp-big-number-value {
    font-size: 2.5rem; font-weight: 800; letter-spacing: -0.5px;
}
.lp-big-number-value--neg { color: var(--c-negative); }
.lp-big-number-value--gold { color: var(--gold); }
.lp-big-number-caption {
    font-size: 0.9375rem; color: var(--silver); margin-top: 0.375rem;
}

/* Separator line */
.lp-dark-separator {
    border-top: 1px solid var(--mist);
    margin-top: 0.75rem; padding-top: 0.75rem;
    font-size: 0.875rem; color: var(--steel); line-height: 1.5; text-align: center;
}
.lp-dark-separator--gold {
    border-top-color: rgba(184,134,11,0.25);
    color: var(--gold); font-weight: 600;
}

/* Data badge strip */
.lp-data-strip {
    display: flex; align-items: center; justify-content: center;
    gap: 2.5rem; flex-wrap: wrap;
}
.lp-data-strip-label {
    font-size: 0.75rem; font-weight: 700; color: var(--navy);
    text-transform: uppercase; letter-spacing: 0.08em;
}
.lp-data-strip-item {
    font-size: 0.78rem; color: var(--steel);
}
.lp-data-strip-item span { color: var(--gold); font-weight: 600; }


/* ──────────────────────────────────────────
   7. CTA SECTIONS
   ────────────────────────────────────────── */

.lp-cta {
    background: var(--ice);
    padding: var(--sp-section-lg) 2rem; text-align: center; position: relative;
    border-top: 1px solid var(--mist);
}
.lp-cta::before { display: none; }
.lp-cta-inner { max-width: 640px; margin: 0 auto; }
.lp-cta h2 {
    font-size: var(--fs-marketing-h2); font-weight: 700; color: var(--navy);
    letter-spacing: -0.02em; margin-bottom: 1rem;
}
.lp-cta p {
    font-size: var(--fs-marketing-body); color: var(--steel); margin-bottom: 2rem; line-height: 1.7;
}
.lp-cta-actions {
    display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap;
}

/* Email capture form in dark sections */
.lp-email-form {
    display: flex; gap: 0.75rem; max-width: 480px; margin: 0 auto;
}
.lp-email-form input[type="email"] {
    flex: 1; padding: 0.875rem 1.25rem;
    border: 1px solid var(--mist); border-radius: 6px;
    background: var(--white); color: var(--c-text);
    font-size: 1rem; outline: none;
}
.lp-email-form input[type="email"]::placeholder { color: var(--silver); }
.lp-email-form input[type="email"]:focus { border-color: var(--gold); }
.lp-email-form button {
    background: var(--gold); color: var(--white);
    font-size: 1rem; font-weight: 600; padding: 0.875rem 1.75rem;
    border: none; border-radius: 6px; cursor: pointer; white-space: nowrap;
}
.lp-email-note {
    font-size: 0.8125rem; color: var(--steel); margin-top: 1rem;
}


/* ──────────────────────────────────────────
   8. FOOTER
   Styles from components/footer-public.html
   ────────────────────────────────────────── */

.lp-footer {
    background: var(--white);
    border-top: 1px solid var(--mist);
    padding: 3rem 2rem 2rem;
}
.lp-footer-newsletter {
    max-width: 1040px; margin: 0 auto 1.5rem;
    padding: 1.5rem 1.75rem;
    background: var(--ice);
    border-radius: 8px;
    display: flex; align-items: center; gap: 2rem; flex-wrap: wrap;
    margin-bottom: 1.75rem;
}
.lp-footer-newsletter-text { flex: 1; min-width: 280px; }
.lp-footer-newsletter-text h3 {
    font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.35rem;
    letter-spacing: -0.01em;
}
.lp-footer-newsletter-text h3 span { color: var(--gold); }
.lp-footer-newsletter-text p { font-size: 0.8rem; color: var(--steel); line-height: 1.5; }
.lp-footer-newsletter form { display: flex; gap: 0.5rem; }
.lp-footer-newsletter form input[type="email"] {
    padding: 0.5rem 0.875rem; border: 1px solid var(--mist);
    border-radius: 4px; background: var(--white); color: var(--c-text);
    font-size: 0.825rem; min-width: 230px; outline: none;
}
.lp-footer-newsletter form input[type="email"]::placeholder { color: var(--silver); }
.lp-footer-newsletter form input[type="email"]:focus { border-color: var(--gold); }
.lp-footer-newsletter form button {
    padding: 0.5rem 1.125rem; background: var(--gold); color: var(--white);
    font-size: 0.825rem; font-weight: 600; border: none; border-radius: 4px; cursor: pointer;
    white-space: nowrap; transition: opacity 0.15s;
}
.lp-footer-newsletter form button:hover { opacity: 0.88; }
.lp-footer-inner {
    max-width: 1040px; margin: 0 auto;
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 1rem;
}
.lp-footer-brand { display: flex; align-items: center; gap: 1.5rem; }
.lp-footer-brand a { display: inline-flex; }
.lp-footer-copy { font-size: 0.75rem; color: var(--steel); }
.lp-footer-links { display: flex; gap: 1.5rem; align-items: center; }
.lp-footer-links a {
    font-size: 0.75rem; color: var(--steel);
    text-decoration: none; transition: color 0.15s;
}
.lp-footer-links a:hover { color: var(--navy); }
.lp-footer-links a.subtle { color: var(--silver); }


/* ──────────────────────────────────────────
   9. DISCLAIMER
   ────────────────────────────────────────── */

.lp-disclaimer {
    background: var(--ice);
    border-top: 1px solid var(--mist);
    padding: 1.25rem 2rem; color: var(--steel);
    font-size: 0.75rem; line-height: 1.7;
}
.lp-disclaimer-inner { max-width: 1040px; margin: 0 auto; }
.lp-disclaimer strong { color: var(--navy); font-weight: 600; }


/* ──────────────────────────────────────────
   10. LANDING PAGE
   ────────────────────────────────────────── */

/* Gap comparison section */
.lp-gap { background: var(--ice); padding: var(--sp-section) 2rem; border-top: 1px solid var(--mist); }
.lp-gap-inner { max-width: 900px; margin: 0 auto; }
.lp-gap-headline {
    font-size: var(--fs-marketing-h2); font-weight: 700; color: var(--navy);
    text-align: center; margin-bottom: 2.5rem; line-height: 1.2;
}

/* Gap comparison table */
.lp-gap-table { width: 100%; border-collapse: collapse; }
.lp-gap-table thead th {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.08em; padding: 0 0 0.75rem;
}
.lp-gap-table thead th:first-child { text-align: left; color: var(--silver); width: 50%; }
.lp-gap-table thead th:nth-child(2) { text-align: center; color: var(--silver); width: 25%; }
.lp-gap-table thead th:nth-child(3) { text-align: center; color: var(--gold); width: 25%; }
.lp-gap-table tbody td {
    padding: 0.5rem 0; border-top: 1px solid rgba(255,255,255,0.06);
    font-size: 0.8125rem; color: var(--mist);
}
.lp-gap-table tbody td:first-child { text-align: left; font-weight: 500; }
.lp-gap-table tbody td:nth-child(2),
.lp-gap-table tbody td:nth-child(3) { text-align: center; }
.lp-gap-table .mark-no { color: rgba(255,255,255,0.2); }
.lp-gap-table .mark-yes { color: var(--gold); font-weight: 600; }
.lp-gap-footer {
    text-align: center; margin-top: 1.5rem;
    font-size: 0.875rem; color: var(--steel); line-height: 1.6;
}

/* Delivers (accordion) section */
.lp-delivers-list {
    max-width: 740px; margin: 1.75rem auto 0;
    border: 1px solid var(--mist); border-radius: 4px; overflow: hidden;
}
.lp-delivers-item { border-bottom: 1px solid var(--mist); }
.lp-delivers-item:last-child { border-bottom: none; }
.lp-delivers-toggle {
    width: 100%; display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.5rem; background: var(--white);
    border: none; cursor: pointer; text-align: left; transition: background 0.15s;
}
.lp-delivers-toggle:hover { background: var(--ice); }
.lp-delivers-title { font-size: 0.9375rem; font-weight: 600; color: var(--navy); }
.lp-delivers-arrow {
    font-size: 1.125rem; color: var(--gold); font-weight: 600;
    transition: transform 0.2s; flex-shrink: 0; margin-left: 1rem;
}
.lp-delivers-item.open .lp-delivers-arrow { transform: rotate(45deg); }
.lp-delivers-detail {
    display: none; padding: 0 1.5rem 1.25rem; background: var(--white);
}
.lp-delivers-item.open .lp-delivers-detail { display: block; }
.lp-delivers-detail p {
    font-size: 0.8125rem; color: var(--steel); line-height: 1.7; margin-bottom: 1rem;
}
.lp-delivers-sample {
    background: var(--ice); border: 1px solid var(--mist); border-radius: 3px; padding: 1rem;
}
.lp-sample-label {
    font-size: 0.6875rem; font-weight: 700; color: var(--steel);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem;
}
.lp-sample-table { width: 100%; border-collapse: collapse; font-size: 0.8125rem; }
.lp-sample-table td {
    padding: 0.35rem 0; border-bottom: 1px solid var(--mist); color: var(--slate);
}
.lp-sample-table td:last-child { text-align: right; font-weight: 600; color: var(--navy); }
.lp-sample-table tr:last-child td { border-bottom: none; }

/* Landing pricing section */
.lp-pricing { background: var(--white); padding: var(--sp-section) 2rem; border-bottom: 1px solid var(--mist); }
.lp-pricing-inner { max-width: 900px; margin: 0 auto; }
.lp-pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.75rem; }
.lp-pricing-card {
    background: var(--white); border: 1px solid var(--mist);
    border-radius: 4px; padding: 1.5rem; position: relative;
}
.lp-pricing-card.featured { border: 2px solid var(--gold); }
.lp-pricing-badge {
    position: absolute; top: -11px; left: 1.5rem;
    background: var(--gold); color: var(--navy);
    padding: 0.25rem 0.75rem; font-size: 0.6875rem; font-weight: 700;
    border-radius: 2px; letter-spacing: 0.05em; text-transform: uppercase;
}
.lp-pricing-name {
    font-size: 1.0625rem; font-weight: 700; color: var(--navy); margin-bottom: 0.25rem;
}
.lp-pricing-desc {
    font-size: 0.8125rem; color: var(--steel); margin-bottom: 1.25rem; line-height: 1.5;
}
.lp-pricing-price {
    font-size: 2rem; font-weight: 700; color: var(--navy); margin-bottom: 0.125rem;
}
.lp-pricing-price span { font-size: 0.875rem; font-weight: 500; color: var(--steel); }
.lp-pricing-period { font-size: 0.75rem; color: var(--silver); margin-bottom: 1rem; }
.lp-pricing-btn {
    display: block; width: 100%; padding: 0.75rem; border: none; border-radius: 3px;
    font-weight: 600; font-size: 0.8125rem; cursor: pointer;
    transition: all 0.2s ease; margin-bottom: 1rem; text-align: center; text-decoration: none;
}
.lp-pricing-card:not(.featured) .lp-pricing-btn {
    background: var(--ice); color: var(--navy); border: 1px solid var(--mist);
}
.lp-pricing-card:not(.featured) .lp-pricing-btn:hover {
    border-color: var(--silver); background: var(--mist);
}
.lp-pricing-card.featured .lp-pricing-btn { background: var(--gold); color: var(--navy); }
.lp-pricing-card.featured .lp-pricing-btn:hover { background: var(--gold-light); }
.lp-pricing-features { list-style: none; }
.lp-pricing-features li {
    padding: 0.5rem 0; font-size: 0.8125rem; color: var(--slate);
    border-bottom: 1px solid var(--ice);
    display: flex; align-items: flex-start; gap: 0.625rem; line-height: 1.5;
}
.lp-pricing-features li:last-child { border-bottom: none; }
.lp-pricing-features li::before { content: '\2014'; color: var(--gold); font-weight: 600; flex-shrink: 0; }
.lp-pricing-note {
    text-align: center; margin-top: 1rem; font-size: 0.8125rem; color: var(--steel);
}
.lp-pricing-note a { color: var(--gold); text-decoration: none; }

/* Trust section */
.lp-trust { background: var(--ice); padding: 3rem 2rem; border-bottom: 1px solid var(--mist); }
.lp-trust-inner { max-width: 1040px; margin: 0 auto; }
.lp-trust-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-top: 1.75rem; }
.lp-trust-left {
    display: flex; flex-direction: column; gap: 0;
    background: var(--mist); border: 1px solid var(--mist);
    border-radius: 4px; overflow: hidden;
}
.lp-trust-item {
    background: var(--white); padding: 1.25rem 1.5rem;
    border-bottom: 1px solid var(--mist);
    display: flex; gap: 1rem; align-items: flex-start;
}
.lp-trust-item:last-child { border-bottom: none; }
.lp-trust-item-marker {
    width: 3px; min-height: 100%; background: var(--gold);
    border-radius: 2px; flex-shrink: 0;
}
.lp-trust-item-content h4 {
    font-size: 0.875rem; color: var(--navy); font-weight: 600; margin-bottom: 0.25rem;
}
.lp-trust-item-content p { font-size: 0.8125rem; color: var(--steel); line-height: 1.6; }
.lp-trust-right {
    background: var(--ice);
    border-radius: 8px; padding: 1.5rem;
    display: flex; flex-direction: column; justify-content: center;
}
.lp-trust-right-label {
    font-size: 0.7rem; font-weight: 700; color: var(--gold);
    text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1.5rem;
}

/* CPA handoff card */
.lp-cpa-card {
    border: 1px solid var(--gold); border-radius: 8px; padding: 2.5rem;
    background: var(--white); display: grid;
    grid-template-columns: 1fr auto; gap: 3rem; align-items: center;
}
.lp-cpa-card h4 {
    font-size: 1.25rem; font-weight: 700; color: var(--navy); margin-bottom: 0.75rem;
}
.lp-cpa-card p {
    font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.7; margin-bottom: 0.75rem;
}
.lp-cpa-card-accent {
    font-size: 0.875rem; color: var(--gold); font-weight: 600;
}
.lp-cpa-card-cta { text-align: center; padding-left: 1.5rem; }


/* ──────────────────────────────────────────
   11. PLATFORM PAGE
   ────────────────────────────────────────── */

/* Steps (how it works) */
.lp-steps {
    display: flex; flex-direction: column; gap: 1.5rem;
    margin-top: 2.5rem; max-width: 640px;
}
.lp-step {
    border-left: 3px solid var(--gold);
    padding: 1.5rem 1.75rem; background: var(--ice); border-radius: 0 8px 8px 0;
}
.lp-step-header {
    display: flex; align-items: center; gap: 1rem; margin-bottom: 0.5rem;
}
.lp-step-num {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--navy); color: var(--gold-light);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9375rem; font-weight: 700; flex-shrink: 0;
}
.lp-step h3 { font-size: 1.125rem; font-weight: 700; color: var(--navy); margin: 0; }
.lp-step p { font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.7; margin: 0; }

/* Who it's for — persona grid */
.lp-who-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.25rem;
    margin-top: 2rem;
}
.lp-who-card {
    padding: 1.5rem 1.25rem; background: var(--white);
    border-radius: 8px; text-align: center;
    transition: all 0.25s;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.lp-who-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.06); }
.lp-who-badge {
    font-size: 1.25rem; font-weight: 700;
    width: 44px; height: 44px; border-radius: 8px;
    display: inline-flex; align-items: center; justify-content: center;
    margin-bottom: 0.75rem;
}
.lp-who-badge.p1, .lp-who-badge.p3, .lp-who-badge.p5 { background: rgba(13,148,136,0.08); color: var(--teal); }
.lp-who-badge.p2, .lp-who-badge.p4 { background: rgba(184,134,11,0.08); color: var(--gold); }
.lp-who-title {
    font-size: 0.9375rem; font-weight: 700; color: var(--navy);
    margin-bottom: 0.5rem; line-height: 1.3;
}
.lp-who-desc { font-size: 0.875rem; color: var(--steel); line-height: 1.6; margin-bottom: 0.625rem; }
.lp-who-metric { font-size: 0.8125rem; color: var(--gold); font-weight: 600; }

/* Security grid */
.lp-security-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; margin-top: 2rem; }
.lp-security-item { text-align: center; padding: 1rem 0.75rem; }
.lp-security-item h4 {
    font-size: 0.9375rem; font-weight: 700; color: var(--navy); margin-bottom: 0.375rem;
}
.lp-security-item p { font-size: 0.875rem; color: var(--steel); line-height: 1.6; }


/* ──────────────────────────────────────────
   12. PRICING PAGE
   ────────────────────────────────────────── */

/* Pricing header */
.pricing-header {
    background: var(--white);
    padding: var(--sp-section-lg) 2rem var(--sp-section); margin-top: 72px; text-align: center;
}
.pricing-header-inner { max-width: 640px; margin: 0 auto; }
.pricing-header h1 {
    font-size: var(--fs-hero-sm); font-weight: 700; color: var(--navy);
    margin-bottom: 0.75rem; letter-spacing: -0.02em;
}
.pricing-header p {
    font-size: var(--fs-marketing-body); color: var(--steel); line-height: 1.7;
}

.pricing-section {
    background: var(--white); padding: var(--sp-section) 2rem;
}
.pricing-inner { max-width: 820px; margin: 0 auto; }
.pricing-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; }
.pricing-card {
    padding: 0; position: relative;
}
.pricing-card.featured { border-left: 3px solid var(--gold); padding-left: 1.5rem; }
.pricing-badge {
    display: inline-block; margin-bottom: 0.75rem;
    background: rgba(184,134,11,0.08); color: var(--gold);
    padding: 0.25rem 0.75rem; font-size: 0.75rem; font-weight: 700;
    border-radius: 4px; letter-spacing: 0.05em; text-transform: uppercase;
}
.pricing-tier-name {
    font-size: 0.8125rem; font-weight: 700; color: var(--steel);
    text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem;
}
.pricing-price-line { margin-bottom: 1rem; }
.pricing-amount { font-size: 2.5rem; font-weight: 700; color: var(--navy); line-height: 1; }
.pricing-amount span { font-size: 1rem; font-weight: 500; color: var(--steel); }
.pricing-monthly { font-size: 0.875rem; color: var(--silver); margin-top: 0.25rem; }
.pricing-btn {
    display: inline-block; padding: 0.625rem 1.5rem; border: none; border-radius: 6px;
    font-weight: 600; font-size: 0.875rem; cursor: pointer; transition: all 0.2s ease;
    margin-bottom: 1rem; text-align: center; text-decoration: none;
}
.pricing-card:not(.featured) .pricing-btn {
    background: var(--ice); color: var(--navy); border: 1px solid var(--mist);
}
.pricing-card:not(.featured) .pricing-btn:hover { border-color: var(--silver); }
.pricing-card.featured .pricing-btn { background: var(--gold); color: var(--white); }
.pricing-card.featured .pricing-btn:hover { opacity: 0.9; }
.pricing-features {
    list-style: none; padding-top: 0.75rem; margin: 0;
}
.pricing-features li {
    padding: 0.375rem 0 0.375rem 1rem; font-size: 0.9375rem; color: var(--slate);
    line-height: 1.5; position: relative;
}
.pricing-features li::before {
    content: ''; position: absolute; left: 0; top: 0.7rem;
    width: 5px; height: 5px; border-radius: 50%; background: var(--gold);
}
.pricing-refund { font-size: 0.8125rem; color: var(--silver); margin-top: 0.75rem; }

/* "Why keep STRVue" section */
.pricing-retention { padding: var(--sp-section) 2rem; }
.pricing-retention h3 {
    font-size: 1.25rem; font-weight: 700; color: var(--navy);
    margin-bottom: 0.75rem; line-height: 1.3;
}
.pricing-retention p {
    font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.7; margin-bottom: 0;
}


/* ──────────────────────────────────────────
   13. ABOUT PAGE
   ────────────────────────────────────────── */

.lp-story-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
    align-items: center; margin-top: 1.5rem;
}
.lp-story-text p {
    font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.8; margin-bottom: 1rem;
}
.lp-story-text p:last-child { margin-bottom: 0; }

.lp-entity-inner { text-align: center; }
.lp-entity-inner p {
    font-size: var(--fs-marketing-body); color: var(--steel); line-height: 1.8;
    max-width: 640px; margin: 0 auto;
}
.lp-entity-inner p a { color: var(--gold); text-decoration: none; font-weight: 600; }
.lp-entity-inner p a:hover { text-decoration: underline; }


/* ──────────────────────────────────────────
   14. FAQ PAGE
   ────────────────────────────────────────── */

.faq-header {
    background: var(--white);
    padding: var(--sp-section-lg) 2rem var(--sp-section); margin-top: 72px; text-align: center;
}
.faq-header h1 {
    font-size: var(--fs-hero-sm); font-weight: 700; color: var(--navy);
    margin-bottom: 0.75rem; letter-spacing: -0.02em;
}
.faq-header p { font-size: var(--fs-marketing-body); color: var(--steel); max-width: 520px; margin: 0 auto; }

.faq-body { max-width: 740px; margin: 0 auto; padding: var(--sp-section) 2rem; }
.faq-category { margin-bottom: 3rem; }
.faq-category-title {
    font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gold); font-weight: 700; margin-bottom: 1.5rem;
    padding-bottom: 0.75rem; border-bottom: 1px solid var(--mist);
}
.faq-item { margin-bottom: 2rem; }
.faq-q { font-size: 1.125rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.faq-a { font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.8; }

.faq-cta {
    background: var(--ice); border: 1px solid var(--mist); border-radius: 6px;
    padding: 1.5rem; text-align: center; margin-top: 1.5rem;
}
.faq-cta p { font-size: 0.875rem; color: var(--steel); margin-bottom: 0.75rem; }
.faq-cta a { color: var(--gold); font-weight: 600; text-decoration: none; }
.faq-cta a:hover { text-decoration: underline; }


/* ──────────────────────────────────────────
   15. RESOURCES PAGE
   ────────────────────────────────────────── */

.res-nl-section {
    background: var(--white);
    padding: var(--sp-section-lg) 2rem var(--sp-section); margin-top: 72px;
}
.res-nl-inner { max-width: 1040px; margin: 0 auto; }
.res-nl-header {
    display: grid; grid-template-columns: 1fr 1fr; gap: 3rem;
    align-items: center; margin-bottom: 2.5rem;
}
.res-section-label {
    font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.12em;
    color: var(--gold); font-weight: 700; margin-bottom: 0.5rem;
}
.res-nl-header h1 {
    font-size: var(--fs-hero-sm); font-weight: 700; color: var(--navy);
    margin-bottom: 0.75rem; letter-spacing: -0.02em; line-height: 1.15;
}
.res-nl-header h1 span { color: var(--gold); }
.res-nl-header-text p { font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.7; }
.res-nl-header-form p { font-size: 0.875rem; color: var(--steel); margin-bottom: 0.75rem; }
.res-nl-subscribe {
    display: flex; gap: 0.5rem;
}
.res-nl-subscribe input[type="email"] {
    flex: 1; padding: 0.625rem 1rem; border: 1px solid var(--mist);
    border-radius: 6px; background: var(--white); font-size: 0.9375rem;
    outline: none; color: var(--c-text);
}
.res-nl-subscribe input[type="email"]:focus { border-color: var(--gold); }
.res-nl-subscribe button {
    padding: 0.625rem 1.25rem; background: var(--gold); color: var(--white);
    font-size: 0.875rem; font-weight: 600; border: none; border-radius: 6px;
    cursor: pointer; white-space: nowrap;
}
.res-nl-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem;
}
.res-nl-card {
    background: var(--ice); border-radius: 8px; padding: 1.25rem;
}
.res-nl-card-date { font-size: 0.75rem; color: var(--silver); margin-bottom: 0.25rem; }
.res-nl-card-title { font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 0.375rem; }
.res-nl-card-desc { font-size: 0.875rem; color: var(--steel); line-height: 1.6; margin-bottom: 0.5rem; }
.res-nl-card-link { font-size: 0.875rem; color: var(--gold); font-weight: 600; text-decoration: none; }
.res-nl-card-link:hover { text-decoration: underline; }
.res-nl-placeholder { opacity: 0.6; }

.res-ref-section { padding: var(--sp-section) 2rem; background: var(--ice); }
.res-ref-inner { max-width: 1040px; margin: 0 auto; }
.res-ref-inner > h2 {
    font-size: var(--fs-marketing-h2); font-weight: 700; color: var(--navy);
    margin-bottom: 0.5rem;
}
.res-ref-inner > p {
    font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.7;
    max-width: 640px; margin-bottom: 2rem;
}
.res-ref-grid {
    display: grid; grid-template-columns: 1fr 1fr; gap: 2rem;
}
.res-category { margin-bottom: 1.5rem; }
.res-category-label {
    font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gold); font-weight: 700; margin-bottom: 0.375rem;
}
.res-category h3 {
    font-size: 1.125rem; font-weight: 700; color: var(--navy);
    margin-bottom: 0.75rem;
}
.res-link-list { list-style: none; padding: 0; margin: 0; }
.res-link-item {
    padding: 0.625rem 0; border-bottom: 1px solid var(--mist);
}
.res-link-item:last-child { border-bottom: none; }
.res-link-item a {
    font-size: 0.9375rem; color: var(--navy); font-weight: 600;
    text-decoration: none; display: block; margin-bottom: 0.125rem;
}
.res-link-item a:hover { color: var(--gold); }
.res-link-desc { font-size: 0.8125rem; color: var(--steel); line-height: 1.5; }
.res-disclaimer {
    max-width: 1040px; margin: 2rem auto 0; padding: 1rem;
    background: var(--white); border-radius: 6px;
    font-size: 0.75rem; color: var(--steel); line-height: 1.6;
}
.res-category--spaced { margin-top: 2rem; }
.res-category--full { grid-column: 1 / -1; }
.res-link-title { font-size: 0.9375rem; font-weight: 600; color: var(--navy); }


/* ──────────────────────────────────────────
   16. CPA SAMPLE PAGE
   ────────────────────────────────────────── */

.cpa-hero {
    background: var(--white);
    padding: var(--sp-section-lg) 2rem var(--sp-section); margin-top: 72px; text-align: center;
}
.cpa-hero h1 {
    font-size: var(--fs-hero-sm); font-weight: 700; color: var(--navy);
    margin-bottom: 0.75rem; letter-spacing: -0.02em;
}
.cpa-hero p { font-size: var(--fs-marketing-body); color: var(--steel); max-width: 600px; margin: 0 auto; }

.cpa-gate {
    max-width: 520px; margin: -1.5rem auto 0; padding: 1.25rem 1.5rem;
    background: var(--white); border: 2px solid var(--gold);
    border-radius: 6px; position: relative; z-index: 2;
}
.cpa-sample {
    max-width: 800px; margin: 2rem auto; padding: 0 2rem;
}
.cpa-table {
    width: 100%; border-collapse: collapse; font-size: 0.8125rem;
}
.cpa-table th {
    text-align: left; padding: 0.5rem 0.75rem;
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.05em; color: var(--steel);
    background: var(--ice); border-bottom: 1px solid var(--mist);
}
.cpa-table td {
    padding: 0.4rem 0.75rem; border-bottom: 1px solid var(--ice); color: var(--slate);
}
.cpa-table td:last-child { text-align: right; font-weight: 600; color: var(--navy); }
.cpa-table th:first-child { width: 45%; }
.cpa-val--neg { color: var(--c-negative); }
.cpa-val--pos { color: var(--teal); }
.cpa-preview--spaced { margin-top: 2rem; }
.cpa-note {
    font-size: 0.75rem; color: var(--steel); line-height: 1.6;
    margin-top: 0.75rem; padding: 0.75rem;
    background: var(--ice); border-radius: 4px;
}
.cpa-cta {
    text-align: center; margin-top: 2rem; padding: 1.5rem;
    background: var(--ice); border: 1px solid var(--mist); border-radius: 6px;
}


/* ──────────────────────────────────────────
   17. KNOWLEDGE BASE
   ────────────────────────────────────────── */

.kb-header {
    background: var(--white);
    padding: var(--sp-section-lg) 2rem var(--sp-section); margin-top: 72px; text-align: center;
}
.kb-header h1 {
    font-size: var(--fs-hero-sm); font-weight: 700; color: var(--navy);
    margin-bottom: 0.75rem;
}
.kb-header p { font-size: var(--fs-marketing-body); color: var(--steel); }

.kb-stats { display: flex; gap: 1.5rem; justify-content: center; margin-top: 1rem; }
.kb-stat {
    background: var(--ice); border-radius: 6px;
    padding: 0.75rem 1.25rem; text-align: center;
}
.kb-stat-value { font-size: 1.25rem; font-weight: 700; color: var(--gold); }
.kb-stat-label { font-size: 0.7rem; color: var(--silver); text-transform: uppercase; letter-spacing: 0.06em; }

.kb-body { max-width: 900px; margin: 0 auto; padding: var(--sp-section) 2rem; }
.kb-category { margin-bottom: 2rem; }
.kb-category-title {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--gold); font-weight: 700; margin-bottom: 0.75rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--mist);
}
.kb-rule {
    padding: 0.75rem 0; border-bottom: 1px solid var(--ice);
}
.kb-rule:last-child { border-bottom: none; }
.kb-rule-name { font-size: 0.875rem; font-weight: 600; color: var(--navy); margin-bottom: 0.25rem; }
.kb-rule-desc { font-size: 0.8125rem; color: var(--steel); line-height: 1.6; }
.kb-rule-badge {
    display: inline-block; font-size: 0.625rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.04em;
    padding: 0.15rem 0.5rem; border-radius: 3px; margin-left: 0.5rem;
}
.kb-rule-badge--green { background: var(--c-positive-bg); color: var(--c-positive); }
.kb-rule-badge--amber { background: var(--c-warning-bg); color: var(--c-warning); }

.kb-changelog { margin-top: 2rem; }
.kb-changelog-title {
    font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em;
    color: var(--steel); font-weight: 700; margin-bottom: 0.75rem;
    padding-bottom: 0.5rem; border-bottom: 1px solid var(--mist);
}
.kb-changelog-item {
    padding: 0.5rem 0; font-size: 0.8125rem; color: var(--steel);
    border-bottom: 1px solid var(--ice);
}
.kb-changelog-item:last-child { border-bottom: none; }
.kb-change-type {
    display: inline-block; font-size: 0.625rem; font-weight: 700;
    text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 2px;
    margin-right: 0.5rem;
}
.kb-change-type--added { background: var(--c-positive-bg); color: var(--c-positive); }
.kb-change-type--changed { background: var(--c-warning-bg); color: var(--c-warning); }
.kb-change-type--fixed { background: var(--c-info-bg); color: var(--c-info); }


/* ──────────────────────────────────────────
   18. TAX CHECK PAGES
   ────────────────────────────────────────── */

.tax-check-form-section {
    background: var(--white); padding: var(--sp-section-lg) 2rem var(--sp-section); margin-top: 72px;
}
.tax-check-form-inner { max-width: 700px; margin: 0 auto; }
.tax-check-form-inner h1 {
    font-size: var(--fs-hero-sm); font-weight: 700; color: var(--navy);
    margin-bottom: 0.5rem; text-align: center;
}
.tax-check-form-inner .subtitle {
    font-size: var(--fs-marketing-body); color: var(--steel); text-align: center;
    margin-bottom: 2rem;
}

/* Form card */
.tax-check-dark-card {
    background: var(--ice); border-radius: 12px; padding: 2rem; text-align: left;
}
.tax-check-label {
    font-size: 0.75rem; font-weight: 600; color: var(--steel);
    display: block; margin-bottom: 4px;
}
.tax-check-input {
    background: var(--white); border: 1px solid var(--mist); color: var(--c-text);
    padding: 0.625rem 0.75rem;
}
.tax-check-submit {
    width: 100%; margin-top: 1.5rem; padding: 0.875rem;
    font-size: 1rem; font-weight: 600;
}
.tax-check-footnote {
    font-size: 0.6875rem; color: var(--steel); margin-top: 1rem; text-align: center;
}
.tax-check-result-subtitle { margin-bottom: 2rem; }
.tax-check-scenario-grid { margin-bottom: 1.25rem; }
.tax-check-footnote--spaced { margin-top: 1.5rem; }
.tax-check-how-text { max-width: none; }
.tax-check-how-text--spaced { margin-top: 1rem; }

/* Result panels */
/* Standalone definitions for banner inner elements */
.tax-check-overline {
    font-size: 0.8125rem; font-weight: 600;
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 0.5rem;
}
.tax-check-big-value { font-size: 2.5rem; font-weight: 800; }
.tax-check-caption { font-size: 0.875rem; margin-top: 0.25rem; }

.tax-check-positive-banner {
    background: var(--c-positive-bg); border-radius: 12px; padding: 2rem;
    text-align: center; margin-bottom: 1.5rem;
}
.tax-check-positive-banner .tax-check-overline,
.tax-check-positive-banner .tax-check-big-value,
.tax-check-positive-banner .tax-check-caption { color: var(--c-positive); }

.tax-check-missed-banner {
    background: var(--c-navy); border-radius: 12px; padding: 2rem; margin-bottom: 1.5rem;
}
.tax-check-missed-banner .tax-check-overline,
.tax-check-missed-banner .tax-check-big-value { color: var(--c-warning); }
.tax-check-missed-banner .tax-check-big-value { font-size: 2.75rem; }
.tax-check-missed-banner .tax-check-caption { color: var(--silver); }

.tax-check-breakdown {
    background: var(--c-navy); border-radius: 12px; padding: 1.5rem;
    text-align: left; margin-bottom: 1.5rem;
}
.tax-check-breakdown-title {
    font-size: 0.75rem; font-weight: 600; color: var(--silver);
    text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1rem;
}

.tax-check-scenario {
    background: var(--c-navy-light); border-radius: 8px; padding: 1rem;
}
.tax-check-scenario--highlighted {
    border: 1px solid var(--gold);
}
.tax-check-scenario-label {
    font-size: 0.6875rem; color: var(--steel); margin-bottom: 0.25rem;
}
.tax-check-scenario-value {
    font-size: 1.25rem; font-weight: 700;
}
.tax-check-scenario-value--muted { color: var(--silver); }
.tax-check-scenario-value--gold { color: var(--gold); }
.tax-check-scenario-note {
    font-size: 0.6875rem; color: var(--steel);
}

.tax-check-line-items {
    border-top: 1px solid rgba(45, 74, 106, 0.8); padding-top: 1rem;
}
.tax-check-line {
    display: flex; justify-content: space-between; align-items: center;
    margin-bottom: 0.5rem;
}
.tax-check-line:last-child { margin-bottom: 0; }
.tax-check-line-label {
    font-size: 0.8125rem; color: var(--silver);
}
.tax-check-line-value {
    font-size: 0.875rem; font-weight: 600; color: var(--white);
}
.tax-check-line-value--gold { color: var(--gold); }

.tax-check-actions-panel {
    background: var(--c-navy); border-radius: 12px; padding: 1.5rem;
    text-align: left; margin-bottom: 1.5rem;
}
.tax-check-actions-title {
    font-size: 0.875rem; font-weight: 600; color: var(--white); margin-bottom: 0.75rem;
}
.tax-check-actions-list {
    color: var(--silver); font-size: 0.8125rem; line-height: 1.8;
    padding-left: 1.25rem; margin: 0;
}

.tax-check-cta-card {
    background: var(--c-navy-light); border: 2px solid var(--gold); border-radius: 12px;
    padding: 1.5rem; text-align: center; margin-top: 2rem;
}
.tax-check-cta-card p {
    font-size: 0.9375rem; color: var(--white); margin: 0 0 0.75rem; line-height: 1.5;
}
.tax-check-cta-link {
    display: inline-block; margin-left: 1rem; color: var(--silver);
    font-size: 0.875rem; text-decoration: underline;
}

.tax-check-error {
    background: var(--c-warning-bg); border: 1px solid var(--c-warning);
    border-radius: 8px; padding: 1.5rem; text-align: center;
}
.tax-check-error p { color: var(--c-warning); font-size: 1rem; margin: 0; }
.tax-check-error a {
    display: inline-block; margin-top: 1rem; color: var(--silver); font-size: 0.875rem;
}

.tax-check-muted-text {
    color: var(--silver); font-size: 0.875rem; line-height: 1.6;
}

.tax-check-result { max-width: 800px; margin: 0 auto; padding: 2rem; }
.tax-check-result h1 {
    font-size: 1.25rem; font-weight: 700; color: var(--navy);
    margin-bottom: 1rem;
}

/* KPI row for results */
.tax-kpi-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.tax-kpi {
    background: var(--white); border: 1px solid var(--mist);
    border-radius: 6px; padding: 1rem; text-align: center;
}
.tax-kpi-label {
    font-size: 0.6875rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.06em; color: var(--steel); margin-bottom: 0.25rem;
}
.tax-kpi-value { font-size: 1.25rem; font-weight: 700; }
.tax-kpi-value--pos { color: var(--c-positive); }
.tax-kpi-value--neg { color: var(--c-negative); }
.tax-kpi-value--navy { color: var(--navy); }
.tax-kpi-value--gold { color: var(--gold); }
.tax-kpi-note { font-size: 0.6875rem; color: var(--silver); margin-top: 0.25rem; }


/* ──────────────────────────────────────────
   19. LEGAL PAGES (terms, privacy)
   ────────────────────────────────────────── */

.legal-header {
    background: var(--white);
    padding: var(--sp-section-lg) 2rem var(--sp-section); margin-top: 72px; text-align: center;
}
.legal-header h1 {
    font-size: var(--fs-hero-sm); font-weight: 700; color: var(--navy); margin-bottom: 0.5rem;
}
.legal-header p { font-size: var(--fs-marketing-body); color: var(--steel); }

.legal-body {
    max-width: 740px; margin: 0 auto; padding: var(--sp-section) 2rem;
    font-size: var(--fs-marketing-sm); color: var(--steel); line-height: 1.8;
}
.legal-body h2 {
    font-size: 1rem; font-weight: 700; color: var(--navy);
    margin: 1.5rem 0 0.5rem; padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--ice);
}
.legal-body p { margin-bottom: 0.75rem; }
.legal-body ul { padding-left: 1.5rem; margin-bottom: 0.75rem; }
.legal-body li { margin-bottom: 0.25rem; }
.legal-body a { color: var(--gold); text-decoration: none; }
.legal-body a:hover { text-decoration: underline; }
.legal-indent { margin-left: 1.5rem; }


/* ──────────────────────────────────────────
   19b. ERROR PAGE
   ────────────────────────────────────────── */

.error-wrapper {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding-top: 72px;
    background: var(--ice);
}
.error-card {
    background: var(--white); border-radius: var(--radius-lg, 6px);
    padding: 3rem; width: 100%; max-width: 450px;
    box-shadow: var(--shadow-md); text-align: center;
}
.error-code {
    font-size: 4rem; font-weight: 700; color: var(--c-navy-light);
    line-height: 1; margin-bottom: 1rem;
}
.error-title {
    font-size: 1.75rem; color: var(--c-navy);
    margin-bottom: 0.5rem; font-weight: 700;
}
.error-message {
    color: var(--c-text-secondary); font-size: 1rem;
    margin-bottom: 2rem; line-height: 1.6;
}


/* ──────────────────────────────────────────
   19c. HOW IT WORKS PAGE
   ────────────────────────────────────────── */

/* Steps — horizontal 3-col with arrows */
.hiw-steps {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 0;
    margin-top: 1.25rem;
}
.hiw-step { text-align: center; padding: 0 1.25rem; position: relative; }
.hiw-step::after {
    content: '\2192'; position: absolute; right: -1rem; top: 0.15rem;
    font-size: 3rem; color: var(--gold); font-weight: 700;
}
.hiw-step:last-child::after { display: none; }
.hiw-step-num {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--navy); color: var(--gold);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem;
}
.hiw-step h3 { font-size: 0.88rem; font-weight: 700; color: var(--navy); margin-bottom: 0.3rem; }
.hiw-step p { font-size: 0.8rem; color: var(--steel); line-height: 1.5; }

/* Architecture strip — 8-col engine sections */
.hiw-arch-strip {
    display: grid; grid-template-columns: repeat(8, 1fr); gap: 0;
    margin-top: 1rem;
    border: 1px solid var(--mist); border-radius: 6px; overflow: hidden;
}
.hiw-arch-item {
    background: var(--white); padding: 0.85rem 0.5rem;
    border-right: 1px solid var(--mist);
    text-align: center; transition: background 0.2s;
}
.hiw-arch-item:last-child { border-right: none; }
.hiw-arch-item:hover { background: rgba(184,134,11,0.03); }
.hiw-arch-num { font-size: 0.65rem; font-weight: 700; color: var(--gold); margin-bottom: 0.2rem; }
.hiw-arch-item h3 { font-size: 0.72rem; font-weight: 700; color: var(--navy); margin-bottom: 0.15rem; line-height: 1.3; }
.hiw-arch-item p { font-size: 0.65rem; color: var(--steel); line-height: 1.4; }

/* Centered overline/heading variant for how-it-works */
.lp-overline--center { text-align: center; }
.lp-section-h2--center { text-align: center; }
.lp-section-desc--center { text-align: center; margin-left: auto; margin-right: auto; }

@media (max-width: 960px) {
    .hiw-steps { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
    .hiw-step::after { display: none; }
    .hiw-arch-strip { grid-template-columns: repeat(4, 1fr); }
    .hiw-arch-item:nth-child(4) { border-right: none; }
}
@media (max-width: 640px) {
    .hiw-steps { grid-template-columns: 1fr; }
    .hiw-arch-strip { grid-template-columns: repeat(2, 1fr); }
    .hiw-arch-item:nth-child(4) { border-right: 1px solid var(--mist); }
    .hiw-arch-item:nth-child(2n) { border-right: none; }
}


/* ──────────────────────────────────────────
   20. AUTH / ONBOARDING PAGES
   ────────────────────────────────────────── */

.auth-wrapper {
    min-height: 100vh; display: flex; align-items: center; justify-content: center;
    background: var(--ice); padding: 2rem;
}
.auth-card {
    background: var(--white); border: 1px solid var(--mist);
    border-radius: 6px; padding: 2rem; max-width: 440px; width: 100%;
}
.auth-card h1 {
    font-size: 1.25rem; font-weight: 700; color: var(--navy);
    margin-bottom: 0.25rem; text-align: center;
}
.auth-card .subtitle {
    font-size: 0.8125rem; color: var(--steel); text-align: center;
    margin-bottom: 1.5rem;
}

/* Onboarding persona picker */
.persona-list { display: flex; flex-direction: column; gap: 0.75rem; }
.persona-item {
    border: 1px solid var(--mist); border-radius: 6px;
    padding: 1rem; cursor: pointer; transition: all 0.2s;
}
.persona-item:hover { border-color: var(--gold); }
.persona-item.selected { border-color: var(--gold); background: rgba(184,134,11,0.04); }
.persona-item input[type="radio"] { display: none; }
.persona-title { font-size: 0.875rem; font-weight: 700; color: var(--navy); }
.persona-desc { font-size: 0.78rem; color: var(--steel); line-height: 1.5; margin-top: 0.25rem; }
.persona-ref { font-size: 0.7rem; color: var(--silver); margin-top: 0.25rem; }
.persona-ref a { color: var(--gold); text-decoration: none; }

/* Onboarding plan cards */
.plan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.plan-card {
    background: var(--white); border: 1px solid var(--mist);
    border-radius: 6px; padding: 1.25rem; position: relative;
}
.plan-card.featured { border: 2px solid var(--gold); }
.plan-badge {
    position: absolute; top: -10px; left: 1rem;
    background: var(--gold); color: var(--navy);
    padding: 0.15rem 0.5rem; font-size: 0.625rem; font-weight: 700;
    border-radius: 2px; text-transform: uppercase; letter-spacing: 0.04em;
}
.plan-name { font-size: 0.875rem; font-weight: 700; color: var(--navy); margin-bottom: 0.15rem; }
.plan-price { font-size: 1.5rem; font-weight: 700; color: var(--navy); }
.plan-price span { font-size: 0.8125rem; font-weight: 500; color: var(--steel); }
.plan-features { list-style: none; margin: 0.75rem 0; padding: 0; }
.plan-features li {
    font-size: 0.75rem; color: var(--steel); padding: 0.15rem 0 0.15rem 1rem;
    position: relative; line-height: 1.4;
}
.plan-features li::before {
    content: '\2713'; position: absolute; left: 0; color: var(--gold); font-weight: 600;
}

/* MFA pages */
.mfa-card {
    max-width: 440px; margin: 5rem auto 0; padding: 2rem;
    background: var(--white); border: 1px solid var(--mist); border-radius: 6px;
}
.mfa-card h1 {
    font-size: 1.125rem; font-weight: 700; color: var(--navy);
    margin-bottom: 0.5rem;
}
.mfa-card p { font-size: 0.8125rem; color: var(--steel); line-height: 1.6; }

/* Success page */
.success-wrapper {
    min-height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--ice); padding: 2rem;
}
.success-checkmark {
    width: 64px; height: 64px; background: var(--c-positive-bg);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-bottom: 1rem;
}
.success-headline {
    font-size: 1.5rem; font-weight: 700; color: var(--navy);
    margin-bottom: 0.5rem;
}

/* Auth wrapper variants */
.auth-wrapper--nav { padding-top: 72px; }
.auth-card--wide { max-width: 480px; }
.auth-card--lg { max-width: 700px; }
.auth-card--xl { max-width: 1000px; }

/* Auth shared elements */
.auth-logo { text-align: center; margin-bottom: 1.5rem; }
.auth-header { text-align: center; margin-bottom: 1.5rem; }
.auth-header h1 { font-size: 1.5rem; font-weight: 700; color: var(--navy); margin-bottom: 0.5rem; }
.auth-header .subtitle { font-size: 0.8125rem; color: var(--steel); margin-bottom: 0; }
.auth-btn-full { width: 100%; margin-top: 0.5rem; }
.auth-footer-link {
    text-align: center; margin-top: 1rem;
    font-size: 0.875rem; color: var(--steel);
}
.auth-footer-link a { color: var(--gold); font-weight: 600; text-decoration: none; }
.auth-footer-link p { margin: 0; }
.auth-optional-note { font-size: 0.75rem; color: var(--steel); margin-top: 0.25rem; }
.auth-error-message {
    background: var(--c-warning-bg); border: 1px solid var(--c-warning);
    border-radius: 4px; padding: 0.75rem 1rem; font-size: 0.8125rem;
    color: var(--c-warning); margin-bottom: 1.5rem;
}
.auth-footer-notice {
    border-top: 1px solid var(--mist); padding-top: 1rem; margin-top: 1.5rem;
    text-align: center;
}
.auth-footer-notice p { font-size: 0.6875rem; color: var(--silver); line-height: 1.5; margin: 0; }
.auth-footer-notice a { color: var(--gold); text-decoration: none; }
.auth-disclaimer {
    background: var(--ice); border-left: 3px solid var(--gold);
    padding: 0.75rem 1rem; border-radius: 4px; margin-bottom: 1rem;
    font-size: 0.75rem; color: var(--steel); line-height: 1.5;
}
.auth-disclaimer strong { color: var(--navy); }
.auth-actions { display: flex; gap: 0.75rem; justify-content: center; margin-top: 1rem; }
.auth-note { font-size: 0.75rem; color: var(--steel); text-align: center; margin-top: 1rem; line-height: 1.5; }

/* Onboarding persona — layout helpers */
.persona-row { display: flex; align-items: flex-start; gap: 0.75rem; }
.persona-info { flex: 1; min-width: 0; }

/* Onboarding profile card */
.onboard-profile-card {
    background: var(--white); border: 1px solid var(--mist);
    border-radius: 6px; padding: 1.5rem; margin-bottom: 1.5rem;
}
.onboard-profile-card h1 { font-size: 1.25rem; font-weight: 700; color: var(--navy); margin-bottom: 0.25rem; }
.onboard-profile-card .subtitle { font-size: 0.8125rem; color: var(--steel); margin-bottom: 1.5rem; }
.profile-row {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0.75rem 0; border-bottom: 1px solid var(--ice);
}
.profile-row:last-child { border-bottom: none; }
.profile-label { font-size: 0.8125rem; color: var(--steel); font-weight: 500; }
.profile-value { font-size: 0.875rem; font-weight: 500; color: var(--navy); }
.checkmark-badge {
    display: inline-flex; align-items: center; gap: 0.375rem;
    font-size: 0.75rem; color: var(--c-positive); font-weight: 500;
}
.checkmark-badge svg { width: 14px; height: 14px; }

/* Onboarding plan helpers */
.plan-billing { font-size: 0.75rem; color: var(--silver); margin-bottom: 1rem; }
.plan-select-form { width: 100%; }

/* Success page */
.success-section { text-align: center; margin-bottom: 2rem; }
.success-subtitle { font-size: 0.9375rem; color: var(--steel); }
.success-cta { margin-bottom: 2rem; }
.success-steps {
    background: var(--white); border: 1px solid var(--mist);
    border-radius: 6px; padding: 1.5rem; max-width: 540px; width: 100%;
}
.success-steps-title {
    font-size: 0.75rem; font-weight: 700; color: var(--navy);
    text-transform: uppercase; letter-spacing: 0.04em;
    margin-bottom: 1rem; text-align: center;
}
.success-steps-list { display: flex; flex-direction: column; gap: 1rem; }
.success-step { display: flex; align-items: flex-start; gap: 0.75rem; }
.success-step-number {
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; min-width: 28px;
    background: var(--gold); color: var(--white); border-radius: 50%;
    font-size: 0.8125rem; font-weight: 700;
}
.success-step-content { flex: 1; text-align: left; }
.success-step-title { font-size: 0.8125rem; font-weight: 700; color: var(--navy); margin-bottom: 0.15rem; }
.success-step-desc { font-size: 0.75rem; color: var(--steel); line-height: 1.5; }

/* Login page */
.login-logo { margin-bottom: 0.5rem; }
.login-wrapper {
    display: flex; align-items: center; justify-content: center;
    min-height: 100vh; padding-top: 72px;
    background: var(--ice);
}
.login-card {
    background: var(--white); border-radius: var(--radius-lg, 6px);
    padding: 2rem; width: 100%; max-width: 380px;
    box-shadow: var(--shadow-md, 0 2px 8px rgba(0,0,0,0.06));
}

/* MFA pages */
.mfa-wrapper { padding-top: 72px; max-width: 520px; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.mfa-title { color: var(--navy); font-size: 1.25rem; margin-bottom: 0.5rem; }
.mfa-info-banner {
    background: var(--c-info-bg); border: 1px solid var(--c-info); border-radius: 4px;
    padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.875rem; color: var(--c-info);
}
.mfa-success-banner {
    background: var(--c-positive-bg); border: 1px solid var(--c-positive); border-radius: 4px;
    padding: 0.75rem 1rem; margin-bottom: 1rem; font-size: 0.875rem; color: var(--c-positive);
}
.mfa-error { margin-bottom: 1rem; }
.mfa-enabled-banner {
    background: var(--c-positive-bg); border: 1px solid var(--c-positive); border-radius: 4px;
    padding: 1rem; margin-bottom: 1.5rem;
}
.mfa-enabled-title { color: var(--c-positive); font-weight: 600; margin-bottom: 0.25rem; }
.mfa-enabled-desc { color: var(--steel); font-size: 0.875rem; }
.mfa-change-phone {
    background: var(--ice); border: 1px solid var(--mist); border-radius: 4px;
    padding: 1rem; margin-top: 1.5rem;
}
.mfa-change-phone-title { font-size: 0.875rem; font-weight: 600; color: var(--navy); margin-bottom: 0.5rem; }
.mfa-change-phone-desc { font-size: 0.8rem; color: var(--steel); margin-bottom: 0.75rem; }
.mfa-instructions {
    font-size: 0.875rem; color: var(--steel); line-height: 1.6; margin-bottom: 1.25rem;
}
.mfa-label { font-weight: 600; font-size: 0.875rem; }
.mfa-code-input {
    text-align: center; font-size: 1.5rem; letter-spacing: 0.25rem; font-family: monospace;
}
.mfa-phone-input { font-size: 1.1rem; }
.mfa-hint { font-size: 0.75rem; color: var(--silver); margin-top: 0.25rem; }
.mfa-warning-banner {
    background: var(--c-warning-bg); border: 1px solid var(--c-warning); border-radius: 4px;
    padding: 0.75rem 1rem; margin-bottom: 1.25rem;
    font-size: 0.8rem; color: var(--c-warning); line-height: 1.5;
}
.mfa-back-link { text-align: center; margin-top: 1rem; }
.mfa-back-link a { color: var(--steel); font-size: 0.875rem; text-decoration: none; }
.mfa-back-link--muted { margin-top: 1.25rem; font-size: 0.8rem; color: var(--silver); }
.mfa-back-link--muted a { color: var(--gold); }
.mfa-subtitle { margin-bottom: 1.5rem; }
.btn-gold {
    background: var(--gold); color: var(--white); border: none;
    padding: 0.625rem; border-radius: 4px; cursor: pointer;
    font-weight: 600; transition: opacity 0.15s;
}
.btn-gold:hover { opacity: 0.9; }

/* Back-to-dashboard banner */
.lp-back-banner {
    background: var(--c-navy); padding: 10px 20px; text-align: center;
}
.lp-back-banner a {
    color: var(--gold); font-weight: 600; font-size: 0.85rem; text-decoration: none;
}


/* ──────────────────────────────────────────
   21. COST SEG TRUTH PAGE
   ────────────────────────────────────────── */

.truth-article { max-width: 780px; margin: 0 auto; padding: 2rem; }
.truth-article h2 {
    font-size: 1.125rem; font-weight: 700; color: var(--navy);
    margin: 2rem 0 0.75rem;
}
.truth-article p { font-size: 0.875rem; color: var(--steel); line-height: 1.7; margin-bottom: 1rem; }

.truth-callout {
    padding: 1rem 1.25rem; border-radius: 6px; margin: 1.25rem 0;
    font-size: 0.8125rem; line-height: 1.6;
}
.truth-callout--gold { background: rgba(184,134,11,0.06); border-left: 3px solid var(--gold); }
.truth-callout--navy { background: rgba(31,47,107,0.04); border-left: 3px solid var(--navy); }
.truth-callout--amber { background: var(--c-warning-bg); border-left: 3px solid var(--c-warning); }
.truth-callout--red { background: var(--c-negative-bg); border-left: 3px solid var(--c-negative); }
.truth-callout strong { color: var(--navy); }

.truth-example {
    background: var(--ice); border: 1px solid var(--mist); border-radius: 6px;
    padding: 1rem 1.25rem; margin: 1rem 0;
}
.truth-example-row {
    display: flex; justify-content: space-between;
    font-size: 0.8125rem; padding: 0.3rem 0;
    border-bottom: 1px solid var(--ice);
}
.truth-example-row:last-child { border-bottom: none; }
.truth-example-row span:last-child { font-weight: 600; color: var(--navy); }

.truth-inline-cta {
    background: var(--ice); border: 2px solid var(--gold);
    border-radius: 6px; padding: 1.25rem; text-align: center;
    margin: 2rem 0;
}
.truth-inline-cta p {
    font-size: 0.875rem; color: var(--steel); margin-bottom: 1rem;
}

/* Cost seg truth — hero override */
.lp-hero--article { padding-top: 5.5rem; }

/* Cost seg truth — section part labels */
.truth-article .lp-overline--part { margin-top: 2rem; }
.truth-article .lp-overline--muted { margin: 0; color: var(--silver); }

/* Cost seg truth — example modifiers */
.truth-example--placeholder {
    min-height: 180px; display: flex; align-items: center;
    justify-content: center; text-align: center;
}
.truth-example--centered { text-align: center; }
.truth-example-row--total {
    border-top: 2px solid var(--mist); margin-top: 0.25rem; padding-top: 0.5rem;
}
.truth-val--neg { color: var(--c-negative); }
.truth-val--warn { color: var(--c-warning); }
.truth-val--neg-bold { color: var(--c-negative); font-weight: 800; }
.truth-callout--navy strong { color: var(--gold); }

/* Cost seg truth — disclaimer override */
.lp-disclaimer--inline {
    background: none; padding: 2rem 0 1rem; text-align: center;
}


/* ──────────────────────────────────────────
   22. PRE-BUY PAGES
   ────────────────────────────────────────── */

/* Shared pre-buy form styling */
.prebuy-form-section {
    background: var(--white); padding: var(--sp-section-lg) 2rem var(--sp-section); margin-top: 72px;
}
.prebuy-form-inner { max-width: 700px; margin: 0 auto; }

/* Pre-buy gate */
.prebuy-gate-card {
    max-width: 520px; margin: -1.5rem auto 0; padding: 1.5rem;
    background: var(--white); border: 2px solid var(--gold);
    border-radius: 6px; position: relative; z-index: 2; text-align: center;
}
.prebuy-preview-teaser {
    opacity: 0.5; filter: blur(3px); pointer-events: none;
    padding: 2rem; max-width: 600px; margin: 1rem auto;
}

/* Pre-buy results */
.prebuy-results { max-width: 900px; margin: 0 auto; padding: 2rem; }
.prebuy-assumptions-strip {
    background: var(--ice); border: 1px solid var(--mist); border-radius: 6px;
    padding: 0.75rem 1rem; margin-bottom: 1.5rem;
    font-size: 0.75rem; color: var(--steel);
}


/* ──────────────────────────────────────────
   23. DEMO PAGE
   ────────────────────────────────────────── */

.demo-hero {
    background: var(--white);
    padding: var(--sp-section-lg) 2rem var(--sp-section); margin-top: 72px; text-align: center;
}
.demo-hero h1 {
    font-size: var(--fs-hero-sm); font-weight: 700; color: var(--navy); margin-bottom: 0.75rem;
}
.demo-hero p { font-size: var(--fs-marketing-body); color: var(--steel); }

.demo-body { max-width: 800px; margin: 0 auto; padding: var(--sp-section) 2rem; }

/* Persona picker */
.demo-persona-grid {
    display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.5rem;
    margin-bottom: 1.5rem;
}
.demo-persona-btn {
    padding: 0.5rem; border: 1px solid var(--mist); border-radius: 4px;
    background: var(--white); cursor: pointer; text-align: center;
    transition: all 0.2s; font-size: 0.75rem; color: var(--steel);
}
.demo-persona-btn:hover { border-color: var(--gold); }
.demo-persona-btn.active { border-color: var(--gold); background: rgba(184,134,11,0.06); color: var(--navy); font-weight: 600; }

/* Demo KPI strip */
.demo-kpi-strip {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem;
    margin: 1.5rem 0;
}
.demo-kpi {
    background: var(--white); border: 1px solid var(--mist);
    border-radius: 4px; padding: 0.75rem; text-align: center;
}
.demo-kpi-label {
    font-size: 0.625rem; font-weight: 700; text-transform: uppercase;
    letter-spacing: 0.04em; color: var(--steel); margin-bottom: 0.25rem;
}
.demo-kpi-value { font-size: 1rem; font-weight: 700; }


/* ──────────────────────────────────────────
   24. RESPONSIVE
   ────────────────────────────────────────── */

@media (max-width: 960px) {
    .lp-grid--4, .lp-feature-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-grid--5 { grid-template-columns: repeat(3, 1fr); }
    .lp-steps { max-width: 100%; }
    .lp-story-grid { grid-template-columns: 1fr; gap: 2rem; }
    .lp-who-grid { grid-template-columns: repeat(3, 1fr); }
    .lp-trust-grid { grid-template-columns: 1fr; }
    .lp-security-grid { grid-template-columns: repeat(3, 1fr); }
    .res-nl-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .lp-nav-inner { padding: 0 1rem; height: 60px; }
    .lp-nav-links { display: none; }
    .lp-nav-ctas { display: none; }
    .lp-hamburger { display: flex; }
    .lp-mobile-menu { top: 60px; }

    .lp-grid--2, .pricing-grid { grid-template-columns: 1fr; }
    .lp-grid--3 { grid-template-columns: 1fr 1fr; }
    .plan-grid { grid-template-columns: 1fr; }
    .lp-pricing-grid { grid-template-columns: 1fr; }
    .lp-security-grid { grid-template-columns: repeat(2, 1fr); }
    .tax-kpi-row { grid-template-columns: 1fr; }
    .demo-persona-grid { grid-template-columns: repeat(3, 1fr); }
    .demo-kpi-strip { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
    .lp-hero { padding: 4rem 1.25rem 3rem; }
    .lp-hero-text h1 { font-size: 1.75rem; }
    .lp-hero-text p { font-size: 1rem; }
    .lp-hero-headline { font-size: 2.25rem; }
    .lp-hero--landing { padding: 4rem 1.25rem 3rem; }
    .lp-hero-ctas { flex-direction: column; align-items: center; }
    .lp-btn-hero { width: 100%; max-width: 320px; }
    .lp-section { padding: 3rem 1.25rem; }
    .lp-section h2 { font-size: 1.5rem; }
    .lp-section-title { font-size: 1.5rem; }

    .lp-grid--3, .lp-grid--4, .lp-feature-grid { grid-template-columns: 1fr; }
    .lp-who-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }

    .lp-hero-actions { flex-direction: column; }
    .lp-cta { padding: 3.5rem 1.25rem; }
    .lp-cta h2 { font-size: 1.5rem; }
    .lp-cta-actions { flex-direction: column; }

    .faq-header { padding: 4rem 1.25rem 3rem; }
    .faq-header h1 { font-size: 1.75rem; }
    .faq-body { padding: 2.5rem 1.25rem; }

    .res-nl-grid { grid-template-columns: 1fr; }

    .lp-cpa-card { grid-template-columns: 1fr; }
    .lp-cpa-card .lp-cpa-form-col { display: none; }

    .lp-footer-newsletter {
        flex-direction: column; text-align: center; gap: 1rem; padding: 1.5rem;
    }
    .lp-footer-newsletter-text { min-width: 0; }
    .lp-footer-newsletter form { flex-direction: column; width: 100%; }
    .lp-footer-newsletter form input[type="email"] { min-width: 0; width: 100%; }
    .lp-footer-newsletter form button { width: 100%; }
    .lp-footer-inner { flex-direction: column; text-align: center; }
    .lp-footer-links { flex-wrap: wrap; justify-content: center; }

    .kb-stats { flex-direction: column; gap: 0.75rem; }
    .demo-persona-grid { grid-template-columns: repeat(2, 1fr); }

    .lp-email-form { flex-direction: column; }

    .pricing-header { padding: 4rem 1.25rem 3rem; }
    .pricing-header h1 { font-size: 1.75rem; }
}


/* ============================================================================
   25. Phase 8: Public homepage (`p8-*`) + Conversion tool (`p8c-*`)
   Namespaced to avoid collision with legacy lp-* / pricing-* classes.
   Lifted from .superpowers/brainstorm/1798-1776549313/content/
     public-homepage.html + conversion-tool.html (2026-04-18 design approval).
   ============================================================================ */

/* Gold accent shared across both pages */
.p8-gold, .p8c-gold { color: var(--color-gold); }

/* --- Homepage (p8-*) --- */

.p8-nav {
  background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: 0 48px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  font-family: 'Inter', -apple-system, sans-serif;
}
.p8-nav-logo { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.p8-nav-logo-mark svg { width: 48px; height: 48px; }
.p8-nav-logo-divider { width: 1px; height: 26px; background: #e5e7eb; }
.p8-nav-logo-name { font-family: Georgia, 'Times New Roman', serif; font-size: 1.3rem; color: var(--color-navy); }
.p8-nav-logo-tagline { font-size: 0.48rem; color: #9ca3af; letter-spacing: 0.07em; text-transform: uppercase; margin-top: 1px; }
.p8-nav-links { display: flex; align-items: center; gap: 28px; }
.p8-nav-links a { font-size: 0.8rem; color: #4b5563; text-decoration: none; font-weight: 500; }
.p8-nav-links a:hover { color: #111827; }
.p8-nav-right { display: flex; align-items: center; gap: 12px; }
.p8-nav-signin { font-size: 0.78rem; color: var(--color-navy); font-weight: 600; text-decoration: none; }
.p8-nav-cta {
  background: var(--color-navy); color: #fff; font-size: 0.75rem; font-weight: 700;
  padding: 8px 18px; border-radius: 7px; text-decoration: none; transition: background 0.12s;
}
.p8-nav-cta:hover { background: #1e3494; }

.p8-hero {
  background: #f7f8fa; border-bottom: 1px solid #e5e7eb;
  padding: 80px 48px 72px; text-align: center;
  font-family: 'Inter', -apple-system, sans-serif;
}
.p8-hero-eyebrow {
  display: inline-flex; align-items: center; gap: 7px;
  background: #fff; border: 1px solid #e5e7eb; border-radius: 20px;
  padding: 5px 14px; font-size: 0.65rem; font-weight: 600; color: #4b5563;
  margin-bottom: 24px; box-shadow: 0 1px 4px rgba(0,0,0,0.05);
}
.p8-hero-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #059669; }
.p8-hero h1 {
  font-size: 3.2rem; font-weight: 800; color: #111827;
  letter-spacing: -0.04em; line-height: 1.08; margin-bottom: 20px;
  max-width: 720px; margin-left: auto; margin-right: auto;
}
.p8-hero h1 em { color: var(--color-gold); font-style: normal; }
.p8-hero p {
  font-size: 1.05rem; color: #6b7280; max-width: 500px;
  margin: 0 auto 32px; line-height: 1.65;
}
.p8-hero-ctas { display: flex; gap: 12px; justify-content: center; align-items: center; }
.p8-cta-primary {
  background: var(--color-navy); color: #fff; font-size: 0.88rem; font-weight: 700;
  padding: 13px 28px; border-radius: 9px; text-decoration: none; transition: background 0.12s;
}
.p8-cta-primary:hover { background: #1e3494; }
.p8-cta-secondary {
  color: var(--color-navy); font-size: 0.85rem; font-weight: 600; text-decoration: none;
  display: flex; align-items: center; gap: 5px;
}
.p8-cta-secondary svg { width: 14px; height: 14px; stroke: currentColor; fill: none; stroke-width: 2; }
.p8-hero-note { font-size: 0.62rem; color: #9ca3af; margin-top: 14px; }

.p8-stat-strip {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-bottom: 1px solid #e5e7eb; background: #fff;
}
.p8-stat-cell {
  padding: 24px 20px; text-align: center;
  border-right: 1px solid #e5e7eb;
  font-family: 'Inter', -apple-system, sans-serif;
}
.p8-stat-cell:last-child { border-right: none; }
.p8-stat-num { font-size: 1.8rem; font-weight: 800; color: var(--color-navy); letter-spacing: -0.03em; margin-bottom: 4px; }
.p8-stat-label { font-size: 0.68rem; color: #6b7280; font-weight: 500; }

.p8-product-section { background: #f7f8fa; border-bottom: 1px solid #e5e7eb; padding: 64px 48px; font-family: 'Inter', -apple-system, sans-serif; }
.p8-product-section-head { text-align: center; margin-bottom: 40px; }
.p8-section-eyebrow { font-size: 0.62rem; font-weight: 700; color: var(--color-gold); letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 10px; }
.p8-section-title { font-size: 2rem; font-weight: 800; color: #111827; letter-spacing: -0.03em; margin-bottom: 10px; }
.p8-section-sub { font-size: 0.88rem; color: #6b7280; line-height: 1.6; max-width: 480px; margin: 0 auto; }

.p8-app-preview {
  max-width: 900px; margin: 0 auto;
  background: #f0f2f5; border-radius: 16px; border: 1px solid #d1d5db;
  box-shadow: 0 20px 60px rgba(0,0,0,0.12); overflow: hidden;
}
.p8-preview-chrome { background: #e5e7eb; padding: 10px 16px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid #d1d5db; }
.p8-chrome-dot { width: 10px; height: 10px; border-radius: 50%; }
.p8-chrome-dot-red { background: #fc5f57; }
.p8-chrome-dot-yellow { background: #febc2e; }
.p8-chrome-dot-green { background: #28c840; }
.p8-chrome-bar { flex: 1; background: #fff; border-radius: 5px; height: 22px; display: flex; align-items: center; padding: 0 10px; font-size: 0.58rem; color: #9ca3af; margin: 0 12px; }
.p8-preview-body { display: grid; grid-template-columns: 52px 1fr; height: 360px; }
.p8-preview-rail { background: var(--color-navy); display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 6px; }
.p8-preview-rail-dot { width: 26px; height: 26px; border-radius: 6px; background: rgba(255,255,255,0.12); }
.p8-preview-rail-dot-active { background: rgba(255,255,255,0.25); }
.p8-preview-content { background: #f0f2f5; overflow: hidden; padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.p8-preview-topbar { background: #fff; border-radius: 8px; height: 38px; border: 1px solid #e5e7eb; display: flex; align-items: center; padding: 0 14px; gap: 10px; }
.p8-preview-logo-mark { width: 22px; height: 22px; }
.p8-preview-logo-mark svg { width: 100%; height: 100%; }
.p8-preview-logo-div { width: 1px; height: 16px; background: #e5e7eb; }
.p8-preview-logo-text { font-family: Georgia, serif; font-size: 0.75rem; color: var(--color-navy); }
.p8-preview-logo-text .p8-g { color: var(--color-gold); }
.p8-preview-hero-card { background: #fff; border-radius: 10px; border: 1px solid #e5e7eb; padding: 14px 16px; }
.p8-phc-eye { font-size: 0.5rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.p8-phc-val { font-size: 1.5rem; font-weight: 800; color: var(--color-navy); letter-spacing: -0.03em; margin-bottom: 2px; }
.p8-phc-sub { font-size: 0.5rem; color: #6b7280; margin-bottom: 10px; }
.p8-phc-rule { height: 1px; background: #f3f4f6; margin-bottom: 10px; }
.p8-phc-minis { display: grid; grid-template-columns: repeat(4,1fr); gap: 6px; }
.p8-phc-mini-l { font-size: 0.42rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 2px; }
.p8-phc-mini-v { font-size: 0.65rem; font-weight: 700; color: #111827; }
.p8-phc-mini-v-g { color: var(--positive); }
.p8-preview-prop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.p8-preview-prop { background: #fff; border-radius: 8px; border: 1px solid #e5e7eb; padding: 10px 12px; }
.p8-pp-name { font-size: 0.52rem; font-weight: 600; color: #111827; margin-bottom: 6px; }
.p8-pp-metrics { display: flex; gap: 10px; }
.p8-pp-ml { font-size: 0.38rem; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.05em; }
.p8-pp-mv { font-size: 0.52rem; font-weight: 700; color: var(--color-navy); }
.p8-pp-mv-g { color: #059669; }

.p8-features-section { padding: 72px 48px; background: #fff; border-bottom: 1px solid #e5e7eb; font-family: 'Inter', -apple-system, sans-serif; }
.p8-features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 960px; margin: 48px auto 0; }
.p8-feature-icon { width: 40px; height: 40px; border-radius: 10px; background: #f0f4ff; border: 1px solid #c7d2fe; display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.p8-feature-icon svg { width: 18px; height: 18px; stroke: var(--color-navy); fill: none; stroke-width: 1.8; }
.p8-feature-title { font-size: 0.95rem; font-weight: 700; color: #111827; margin-bottom: 8px; }
.p8-feature-desc { font-size: 0.78rem; color: #6b7280; line-height: 1.6; }

.p8-conversion-strip { background: #f7f8fa; border-bottom: 1px solid #e5e7eb; padding: 56px 48px; text-align: center; font-family: 'Inter', -apple-system, sans-serif; }
.p8-cs-title { font-size: 1.6rem; font-weight: 800; color: #111827; letter-spacing: -0.02em; margin-bottom: 8px; }
.p8-cs-sub { font-size: 0.85rem; color: #6b7280; margin-bottom: 28px; line-height: 1.5; }
.p8-cs-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 640px; margin: 0 auto 32px; }
.p8-cs-card { background: #fff; border: 1px solid #e5e7eb; border-radius: 12px; padding: 22px; text-align: left; cursor: pointer; transition: border-color 0.12s, box-shadow 0.12s; text-decoration: none; display: block; }
.p8-cs-card:hover { border-color: var(--color-navy); box-shadow: 0 4px 16px rgba(22,39,112,0.08); }
.p8-cs-card-eyebrow { font-size: 0.58rem; font-weight: 700; color: var(--color-gold); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 7px; }
.p8-cs-card-title { font-size: 0.9rem; font-weight: 700; color: #111827; margin-bottom: 6px; }
.p8-cs-card-desc { font-size: 0.72rem; color: #6b7280; line-height: 1.4; }
.p8-cs-card-link { font-size: 0.7rem; font-weight: 700; color: var(--color-navy); margin-top: 10px; display: block; }

.p8-trust-section { background: #fff; padding: 48px; text-align: center; border-bottom: 1px solid #e5e7eb; font-family: 'Inter', -apple-system, sans-serif; }
.p8-trust-label { font-size: 0.62rem; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: 0.12em; margin-bottom: 20px; }
.p8-trust-items { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.p8-trust-item { display: flex; align-items: center; gap: 8px; font-size: 0.75rem; color: #4b5563; font-weight: 500; }
.p8-trust-item svg { width: 14px; height: 14px; stroke: var(--color-navy); fill: none; stroke-width: 2; }

.p8-footer { background: #f9fafb; border-top: 1px solid #e5e7eb; padding: 32px 48px; display: flex; align-items: center; justify-content: space-between; font-family: 'Inter', -apple-system, sans-serif; flex-wrap: wrap; gap: 16px; }
.p8-footer-logo { display: flex; align-items: center; gap: 9px; }
.p8-footer-logo-mark svg { width: 28px; height: 28px; }
.p8-footer-logo-name { font-family: Georgia, serif; font-size: 1rem; color: var(--color-navy); }
.p8-footer-links { display: flex; gap: 20px; }
.p8-footer-links a { font-size: 0.72rem; color: #6b7280; text-decoration: none; }
.p8-footer-copy { font-size: 0.65rem; color: #9ca3af; }

/* --- Conversion tool (p8c-*) --- */

body:has(.p8c-hero) { background: #f7f8fa; }

.p8c-nav {
  background: #fff; border-bottom: 1px solid #e5e7eb;
  padding: 0 40px; height: 60px;
  display: flex; align-items: center; justify-content: space-between;
  position: sticky; top: 0; z-index: 100;
  font-family: 'Inter', -apple-system, sans-serif;
}
.p8c-brand-logo { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.p8c-brand-mark svg { width: 32px; height: 32px; }
.p8c-brand-divider { width: 1px; height: 26px; background: #e5e7eb; }
.p8c-brand-name { font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem; color: var(--color-navy); }
.p8c-brand-tagline { font-size: 0.5rem; color: #9ca3af; letter-spacing: 0.04em; text-transform: uppercase; margin-top: 1px; }
.p8c-nav-links { display: flex; align-items: center; gap: 24px; }
.p8c-nav-links a { font-size: 0.78rem; color: #4b5563; text-decoration: none; font-weight: 500; }
.p8c-nav-cta { background: var(--color-navy); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 7px 16px; border-radius: 6px; text-decoration: none; }

.p8c-hero { background: #fff; border-bottom: 1px solid #e5e7eb; padding: 52px 40px 72px; text-align: center; font-family: 'Inter', -apple-system, sans-serif; }
.p8c-hero-eyebrow {
  display: inline-block; background: #f0f4ff; color: var(--color-navy);
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  padding: 4px 12px; border-radius: 20px; margin-bottom: 18px; border: 1px solid #c7d2fe;
}
.p8c-hero h1 { font-size: 2.4rem; font-weight: 800; color: #111827; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 14px; }
.p8c-hero h1 em { color: var(--color-gold); font-style: normal; }
.p8c-hero p { font-size: 1rem; color: #6b7280; max-width: 460px; margin: 0 auto; line-height: 1.6; }

.p8c-tool-wrap { max-width: 820px; margin: 32px auto 60px; padding: 0 24px; font-family: 'Inter', -apple-system, sans-serif; }

.p8c-step-card {
  background: #fff; border-radius: 14px; border: 1px solid #e5e7eb;
  box-shadow: 0 4px 24px rgba(0,0,0,0.07); overflow: hidden; margin-bottom: 14px;
}
.p8c-step-header { display: flex; align-items: center; gap: 12px; padding: 18px 24px 16px; border-bottom: 1px solid #f3f4f6; }
.p8c-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--color-navy); color: #fff; font-size: 0.65rem; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.p8c-step-num-done { background: #059669; }
.p8c-step-header-text h3 { font-size: 0.9rem; font-weight: 700; color: #111827; margin: 0; }
.p8c-step-header-text p { font-size: 0.72rem; color: #6b7280; margin-top: 2px; margin-bottom: 0; }
.p8c-step-body { padding: 24px; }
.p8c-step-card-completed .p8c-step-body { display: none; }
.p8c-step-card-completed .p8c-step-header { background: #f0fdf4; border-bottom: none; }

.p8c-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.p8c-form-grid-three { grid-template-columns: 1fr 1fr 1fr; margin-top: 14px; }
.p8c-field { display: flex; flex-direction: column; gap: 5px; }
.p8c-field label { font-size: 0.69rem; font-weight: 600; color: #374151; }
.p8c-field input, .p8c-field select {
  border: 1px solid #d1d5db; border-radius: 8px; padding: 9px 12px;
  font-size: 0.82rem; font-family: inherit; color: #111827;
  outline: none; transition: border-color 0.12s; background: #fff;
}
.p8c-field input:focus, .p8c-field select:focus { border-color: var(--color-navy); box-shadow: 0 0 0 3px rgba(22,39,112,0.08); }
.p8c-field input::placeholder { color: #9ca3af; }
.p8c-field-hint { font-size: 0.62rem; color: #9ca3af; }

.p8c-run-btn {
  width: 100%; padding: 13px; margin-top: 18px; background: var(--color-navy); color: #fff;
  border: none; border-radius: 10px; font-size: 0.88rem; font-weight: 700;
  cursor: pointer; transition: background 0.12s; font-family: inherit;
}
.p8c-run-btn:hover { background: #1e3494; }

.p8c-free-result { display: none; }
.p8c-free-result.p8c-show { display: block; }

.p8c-estimate-banner {
  background: #fffbeb; border-bottom: 1px solid #fde68a;
  padding: 9px 24px; display: flex; align-items: center; gap: 8px;
  font-size: 0.7rem; color: #92400e;
}
.p8c-estimate-banner svg { width: 14px; height: 14px; flex-shrink: 0; }

.p8c-headline-result { text-align: center; padding: 32px 24px 20px; }
.p8c-hr-label { font-size: 0.65rem; font-weight: 700; color: #6b7280; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 10px; }
.p8c-hr-value { font-size: 3.6rem; font-weight: 800; color: var(--color-navy); letter-spacing: -0.04em; line-height: 1; }
.p8c-hr-estimate-tag {
  display: inline-block; background: #fef3c7; color: #92400e;
  font-size: 0.58rem; font-weight: 700; padding: 2px 8px; border-radius: 4px;
  margin-top: 8px; text-transform: uppercase; letter-spacing: 0.07em;
}
.p8c-hr-caption { font-size: 0.8rem; color: #4b5563; margin-top: 10px; line-height: 1.5; max-width: 440px; margin-left: auto; margin-right: auto; }

.p8c-credibility-strip {
  display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
  padding: 14px 24px; background: #f9fafb; border-top: 1px solid #f3f4f6; border-bottom: 1px solid #f3f4f6;
}
.p8c-cred-item { display: flex; align-items: center; gap: 6px; font-size: 0.65rem; color: #6b7280; }
.p8c-cred-item svg { width: 12px; height: 12px; color: var(--color-navy); }

.p8c-email-gate { padding: 24px; }
.p8c-gate-hed { font-size: 1rem; font-weight: 700; color: #111827; margin-bottom: 6px; }
.p8c-gate-sub { font-size: 0.78rem; color: #6b7280; line-height: 1.5; margin-bottom: 18px; }

.p8c-preview-peek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 22px; }
.p8c-pp-cell { border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 12px; text-align: center; position: relative; overflow: hidden; }
.p8c-pp-cell-blurred::after { content: ''; position: absolute; inset: 0; backdrop-filter: blur(6px); background: rgba(255,255,255,0.4); }
.p8c-pp-label { font-size: 0.58rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 6px; }
.p8c-pp-value { font-size: 1.4rem; font-weight: 700; color: #111827; }
.p8c-pp-sub { font-size: 0.6rem; color: #9ca3af; margin-top: 3px; }
.p8c-pp-lock {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 4px; z-index: 2;
}
.p8c-pp-lock svg { width: 16px; height: 16px; color: #9ca3af; }
.p8c-pp-lock span { font-size: 0.58rem; color: #9ca3af; font-weight: 600; }

.p8c-email-row { display: flex; gap: 10px; }
.p8c-email-row input {
  flex: 1; border: 1px solid #d1d5db; border-radius: 8px; padding: 10px 14px;
  font-size: 0.82rem; font-family: inherit; outline: none; transition: border-color 0.12s;
}
.p8c-email-row input:focus { border-color: var(--color-navy); box-shadow: 0 0 0 3px rgba(22,39,112,0.08); }
.p8c-email-btn {
  background: var(--color-gold); color: #fff; border: none; border-radius: 8px;
  padding: 10px 18px; font-size: 0.8rem; font-weight: 700;
  cursor: pointer; font-family: inherit; white-space: nowrap; transition: background 0.12s;
}
.p8c-email-btn:hover { background: #9a7338; }
.p8c-gate-note { font-size: 0.6rem; color: #9ca3af; margin-top: 8px; }

.p8c-preview-report { display: none; }
.p8c-preview-report.p8c-show { display: block; }

.p8c-preview-header { background: #f9fafb; border-bottom: 1px solid #e5e7eb; padding: 16px 24px; display: flex; align-items: center; justify-content: space-between; }
.p8c-ph-left h3 { font-size: 0.9rem; font-weight: 700; color: #111827; margin: 0 0 2px; }
.p8c-ph-left p { font-size: 0.65rem; color: #6b7280; margin: 0; }
.p8c-ph-badge {
  background: #fef3c7; color: #92400e; border: 1px solid #fde68a;
  font-size: 0.57rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.1em;
}

.p8c-metrics-preview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #f3f4f6; }
.p8c-mp-cell { background: #fff; padding: 18px 14px; }
.p8c-mp-label { font-size: 0.58rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 6px; }
.p8c-mp-value { font-size: 1.35rem; font-weight: 700; color: #111827; letter-spacing: -0.02em; }
.p8c-mp-sub { font-size: 0.6rem; color: #6b7280; margin-top: 3px; }
.p8c-mp-cell-positive .p8c-mp-value { color: #059669; }
.p8c-mp-estimate { display: inline-block; background: #fef3c7; color: #92400e; font-size: 0.52rem; font-weight: 700; padding: 1px 6px; border-radius: 3px; margin-top: 4px; text-transform: uppercase; letter-spacing: 0.06em; }

.p8c-locked-wall { border-top: 1px solid #f3f4f6; padding: 24px; background: linear-gradient(to bottom, #f9fafb, #fff); }
.p8c-lw-heading { font-size: 0.88rem; font-weight: 700; color: #111827; margin-bottom: 4px; }
.p8c-lw-sub { font-size: 0.75rem; color: #6b7280; line-height: 1.5; margin-bottom: 18px; }

.p8c-compare-table { width: 100%; border-collapse: collapse; margin-bottom: 22px; }
.p8c-compare-table th { font-size: 0.65rem; font-weight: 700; color: #6b7280; text-transform: uppercase; letter-spacing: 0.08em; padding: 0 12px 10px; text-align: left; }
.p8c-compare-table th:last-child, .p8c-compare-table th:nth-child(2) { text-align: center; }
.p8c-compare-table td { padding: 9px 12px; font-size: 0.75rem; color: #374151; border-top: 1px solid #f3f4f6; }
.p8c-compare-table td:last-child, .p8c-compare-table td:nth-child(2) { text-align: center; }
.p8c-check { color: #059669; font-size: 1rem; font-weight: 700; }
.p8c-cross { color: #9ca3af; font-size: 0.9rem; }
.p8c-highlight-row td { background: #f0fdf4; }
.p8c-col-header { font-size: 0.72rem; font-weight: 700; }
.p8c-col-header-free { color: #6b7280; }
.p8c-col-header-paid { color: var(--color-navy); }

.p8c-upgrade-btns { display: flex; gap: 10px; }
.p8c-btn-primary {
  flex: 1; background: var(--color-navy); color: #fff; border: none; border-radius: 8px;
  padding: 12px 20px; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit;
  transition: background 0.12s; text-decoration: none; text-align: center; display: inline-block;
}
.p8c-btn-primary:hover { background: #1e3494; }
.p8c-btn-secondary {
  background: #fff; color: var(--color-navy); border: 1px solid #d1d5db; border-radius: 8px;
  padding: 12px 20px; font-size: 0.82rem; font-weight: 700; cursor: pointer; font-family: inherit;
  text-decoration: none; text-align: center; display: inline-block;
}

.p8c-real-data-note {
  background: #eff6ff; border: 1px solid #bfdbfe; border-radius: 10px;
  padding: 14px 16px; margin-top: 14px; display: flex; gap: 10px; align-items: flex-start;
}
.p8c-real-data-note svg { width: 16px; height: 16px; color: #2563eb; flex-shrink: 0; margin-top: 1px; }
.p8c-real-data-note p { font-size: 0.72rem; color: #1e40af; line-height: 1.5; margin: 0; }
.p8c-real-data-note strong { font-weight: 700; }

.p8c-trust-bar { background: #fff; border-top: 1px solid #e5e7eb; padding: 28px 40px; text-align: center; margin-top: 40px; font-family: 'Inter', -apple-system, sans-serif; }
.p8c-trust-label { font-size: 0.62rem; color: #9ca3af; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 16px; }
.p8c-trust-items { display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.p8c-trust-item { display: flex; align-items: center; gap: 7px; font-size: 0.72rem; color: #4b5563; }
.p8c-trust-item svg { width: 13px; height: 13px; color: #059669; }

@media (max-width: 720px) {
  .p8-stat-strip, .p8-features-grid, .p8-cs-cards { grid-template-columns: 1fr; }
  .p8-stat-cell { border-right: none; border-bottom: 1px solid #e5e7eb; }
  .p8-stat-cell:last-child { border-bottom: none; }
  .p8-hero h1 { font-size: 2.2rem; }
  .p8-nav-links { display: none; }
  .p8c-form-grid, .p8c-form-grid-three { grid-template-columns: 1fr; }
  .p8c-preview-peek, .p8c-metrics-preview { grid-template-columns: 1fr; }
  .p8c-upgrade-btns { flex-direction: column; }
  .p8c-nav-links a:not(.p8c-nav-cta) { display: none; }
}

/* ──────────────────────────────────────────
   25. HOMEPAGE REDESIGN SECTIONS (site-redesign)
   Problem / Solution / Metrics / Workflow /
   Audience / Outputs / Final CTA
   ────────────────────────────────────────── */

/* Shared section shell */
.lp-section { padding: 48px 2rem; }
.lp-section--muted { background: var(--ice); }
.lp-section-inner { max-width: 1060px; margin: 0 auto; }
.lp-section-eyebrow {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.12em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 0.5rem;
}
.lp-section-title {
    font-size: 1.75rem; font-weight: 700; color: var(--navy);
    line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 0.75rem;
}
.lp-section-sub {
    font-size: 1rem; color: var(--steel); line-height: 1.65;
    max-width: 640px; margin-bottom: 1.5rem;
}
.lp-section-head { margin-bottom: 1.75rem; }
.lp-section-head--center { text-align: center; }
.lp-section-head--center .lp-section-sub { margin-left: auto; margin-right: auto; }

/* Trust strip (homepage hero band) */
.lp-trust-strip {
    background: var(--ice); padding: 18px 2rem;
    border-top: 1px solid var(--mist); border-bottom: 1px solid var(--mist);
    display: flex; justify-content: center; flex-wrap: wrap; gap: 32px;
}
.lp-trust-strip .lp-trust-item {
    background: transparent; border-bottom: none; padding: 0;
    display: flex; align-items: center; gap: 8px;
    font-size: 0.8125rem; font-weight: 500; color: var(--slate);
}
.lp-trust-strip .lp-trust-item:last-child { border-bottom: none; }
.lp-trust-strip .lp-trust-item svg { width: 14px; height: 14px; color: var(--gold); flex-shrink: 0; }

/* 3-card grid */
.lp-card-grid-3 {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}

/* 4-card grid */
.lp-card-grid-4 {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}

/* Content card */
.lp-content-card {
    background: var(--white); border: 1px solid var(--mist);
    border-radius: 10px; padding: 20px 18px;
}
.lp-content-card__label {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 10px;
}
.lp-content-card__title {
    font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 8px;
}
.lp-content-card__body {
    font-size: 0.875rem; color: var(--steel); line-height: 1.6;
}

/* Metric table — clean strip layout (Stripe/Apple style) */
.lp-metric-table { display: flex; flex-direction: column; }
.lp-metric-row {
    display: grid;
    grid-template-columns: 180px 1fr;
    gap: 40px;
    padding: 28px 0;
    border-top: 1px solid var(--mist);
    align-items: start;
}
.lp-metric-row:last-child { border-bottom: 1px solid var(--mist); }
.lp-metric-row__num {
    font-size: 2.25rem; font-weight: 800; color: var(--mist);
    line-height: 1; margin-bottom: 10px; letter-spacing: -0.02em;
}
.lp-metric-row__layer {
    font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.1em;
    text-transform: uppercase; color: var(--gold); margin-bottom: 4px;
}
.lp-metric-row__name {
    font-size: 1rem; font-weight: 700; color: var(--navy);
}
.lp-metric-row__items {
    display: flex; flex-direction: column; gap: 10px; padding-top: 6px;
}
.lp-metric-row__item {
    display: flex; align-items: center; gap: 10px;
    font-size: 0.9rem; color: var(--slate); font-weight: 500; line-height: 1.4;
}
.lp-metric-row__item::before {
    content: ''; width: 5px; height: 5px; border-radius: 50%;
    background: var(--gold); flex-shrink: 0;
}
.lp-metric-row--icon {
    grid-template-columns: 200px 1fr;
    gap: 28px;
    padding: 20px 0;
    align-items: start;
}
.lp-metric-row__left {
    display: flex; align-items: center; gap: 16px;
}
.lp-metric-row__icon {
    width: 40px; height: 40px; border-radius: 10px;
    background: rgba(176,125,46,0.1);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.lp-metric-row__desc {
    font-size: 0.875rem; color: var(--slate); line-height: 1.65;
}
@media (max-width: 640px) {
    .lp-metric-row { grid-template-columns: 1fr; gap: 16px; }
    .lp-metric-row__num { font-size: 1.75rem; margin-bottom: 4px; }
    .lp-metric-row--icon { grid-template-columns: 1fr; }
}

/* Workflow steps */
.lp-steps { display: flex; flex-direction: column; gap: 0; }
.lp-step {
    display: flex; gap: 24px; align-items: flex-start;
    padding: 18px 0; border-bottom: 1px solid var(--mist);
}
.lp-step:last-child { border-bottom: none; }
.lp-step__num {
    width: 36px; height: 36px; border-radius: 50%;
    background: var(--navy); color: #fff;
    font-size: 0.875rem; font-weight: 700;
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0; margin-top: 2px;
}
.lp-step__title {
    font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 6px;
}
.lp-step__body {
    font-size: 0.9rem; color: var(--steel); line-height: 1.6;
}

/* Final CTA band */
.lp-final-cta {
    background: var(--ice); padding: 48px 2rem; text-align: center;
    border-top: 1px solid var(--mist);
}
.lp-final-cta__title {
    font-size: 1.875rem; font-weight: 700; color: var(--navy);
    line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 1rem;
}
.lp-final-cta__sub {
    font-size: 1rem; color: var(--steel); margin-bottom: 2rem;
    max-width: 560px; margin-left: auto; margin-right: auto; line-height: 1.6;
}
.lp-final-cta .lp-btn-primary-inv {
    display: inline-block; padding: 14px 32px;
    background: var(--navy); color: #fff;
    font-weight: 700; font-size: 0.9375rem;
    border-radius: 6px; text-decoration: none;
    transition: opacity 0.15s;
}
.lp-final-cta .lp-btn-primary-inv:hover { opacity: 0.85; }

/* Audience card */
.lp-audience-card {
    background: var(--white); border: 1px solid var(--mist);
    border-radius: 10px; padding: 20px 18px;
}
.lp-audience-card__title {
    font-size: 1rem; font-weight: 700; color: var(--navy); margin-bottom: 8px;
}
.lp-audience-card__pain {
    font-size: 0.8125rem; color: var(--steel); line-height: 1.55;
    margin-bottom: 10px;
}
.lp-audience-card__outcome {
    font-size: 0.8125rem; color: var(--teal); font-weight: 600;
}

/* Responsive: collapse grids on mobile */
@media (max-width: 768px) {
    .lp-card-grid-3,
    .lp-card-grid-4 { grid-template-columns: 1fr; }
    .lp-section { padding: 32px 1.25rem; }
    .lp-section-title { font-size: 1.375rem; }
    .lp-trust-strip { gap: 12px; }
    .lp-final-cta { padding: 36px 1.25rem; }
}


/* ═══════════════════════════════════════════════════════════════════════
   PHASE 4 — EDITORIAL PUBLIC SITE
   Append this whole block to app/static/css/public.css.
   All styles namespaced under .hv (and .hv3 / .login-* / .pricing-page)
   so they don't leak into the rest of the public stylesheet.
   Source: home/home-shared.css + home/home-v3.jsx + Login.html mockup.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Tokens — scoped to .hv ────────────────────────────────────────── */
.hv {
  --ivory: #FBF8F1;
  --ivory-soft: #F7F2E7;
  --paper: #F4EFE6;
  --paper-deep: #EDE5D5;
  --paper-edge: #E6DFCE;

  --ink: #141413;
  --ink-soft: #3C3A36;
  --ink-mute: #74706A;
  --ink-whisper: #A09B92;

  --rule: #D9D1BF;
  --rule-soft: #E5DFCF;
  --rule-hair: #EDE6D5;

  --navy: #162770;
  --navy-soft: #223087;
  --bronze: #AC8444;
  --bronze-deep: #8A6A36;
  --bronze-wash: rgba(172, 132, 68, 0.08);
  --ember: #CC5500;

  --positive: #2E6F40;
  --positive-bg: #E6EEDE;
  --negative: #A8361B;
  --negative-bg: #F2DED6;

  --f-display: 'Fraunces', Georgia, serif;
  --f-body: 'Geist', ui-sans-serif, system-ui, sans-serif;
  --f-mono: 'Geist Mono', ui-monospace, monospace;

  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: lining-nums;
}

.hv *, .hv *::before, .hv *::after { box-sizing: border-box; }
.hv em { font-style: normal; color: var(--bronze); font-weight: inherit; }
.hv strong { font-weight: 500; color: var(--ink); }
.hv a { color: inherit; text-decoration: none; }

/* ── Layout container ──────────────────────────────────────────────── */
.hv .wrap { max-width: 1240px; margin: 0 auto; padding: 0 56px; }

/* ── Nav ───────────────────────────────────────────────────────────── */
.hv .nav {
  display: grid; grid-template-columns: 200px 1fr auto;
  align-items: center; padding: 28px 0;
  border-bottom: 1px solid var(--rule-hair);
}
.hv .nav-wm img { height: 38px; width: auto; display: block; }
.hv .nav-links { display: flex; gap: 36px; justify-self: center; font-size: 0.92rem; }
.hv .nav-links a {
  color: var(--ink-soft); padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: border-color 120ms ease, color 120ms ease;
}
.hv .nav-links a:hover { color: var(--ink); border-bottom-color: var(--bronze); }
.hv .nav-links a.on { color: var(--ink); font-weight: 500; }
.hv .nav-cta { display: flex; gap: 12px; align-items: center; }

/* ── Buttons ───────────────────────────────────────────────────────── */
.hv .btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-body); font-weight: 500; font-size: 0.92rem;
  padding: 10px 18px; border: 1px solid transparent; cursor: pointer;
  text-decoration: none; line-height: 1; letter-spacing: 0.005em;
  border-radius: 0; transition: all 140ms ease; background: transparent;
}
.hv .btn--primary { background: var(--ink); color: var(--ivory); }
.hv .btn--primary:hover { background: #000; }
.hv .btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.hv .btn--ghost:hover { background: var(--ink); color: var(--ivory); }
.hv .btn--sm { font-size: 0.82rem; padding: 7px 14px; }
.hv .btn--lg { font-size: 1rem; padding: 14px 26px; }
.hv .btn .arr { transition: transform 160ms ease; display: inline-block; }
.hv .btn:hover .arr { transform: translateX(3px); }

/* ── Type atoms ────────────────────────────────────────────────────── */
.hv .eyebrow {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hv .eyebrow--bronze { color: var(--bronze-deep); }
.hv .chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-soft);
  padding: 6px 12px; border: 1px solid var(--rule); background: var(--ivory);
}
.hv .chip--bronze {
  color: var(--bronze-deep); border-color: rgba(172, 132, 68, 0.35);
  background: var(--bronze-wash);
}
.hv .chip .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.hv .hero-stamp {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  color: var(--ink-whisper); text-transform: uppercase;
}

/* ── Footer (dark band, used by homepage) ──────────────────────────── */
.hv .foot { background: var(--ink); color: #F4EFE6; padding: 72px 0 36px; margin-top: 0; }
.hv .foot-top { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; padding-bottom: 52px; }
.hv .foot-brand img { height: 56px; width: auto; display: block; }
.hv .foot-brand img.logo-fallback { filter: invert(1) brightness(2); }
.hv .foot-brand p {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: rgba(244, 239, 230, 0.7); margin-top: 20px; max-width: 34ch;
  font-size: 1.02rem; line-height: 1.45;
}
.hv .foot-col h4 {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(244, 239, 230, 0.5);
  margin: 0 0 16px; font-weight: 500;
}
.hv .foot-col a {
  display: block; padding: 7px 0; font-size: 0.9rem;
  color: rgba(244, 239, 230, 0.85);
}
.hv .foot-col a:hover { color: var(--bronze); }
.hv .foot-btm {
  display: flex; justify-content: space-between;
  padding-top: 28px; border-top: 1px solid rgba(244, 239, 230, 0.12);
  font-family: var(--f-mono); font-size: 0.72rem;
  color: rgba(244, 239, 230, 0.45);
}

/* ═══════════════════════════════════════════════════════════════════════
   HOMEPAGE V3 — page-specific styles
   (Hero, education band, flagship metric card, audience cards,
   pricing preview, ledger letter, closing band.)
   See phase4a/reference/home-v3.jsx for the full source — these are
   the styles from its inline <style> block, lifted out and concatenated.
   ═══════════════════════════════════════════════════════════════════════ */

.hv.hv3 { overflow: visible; }

/* Hero */
.ha .hero-intro { padding: 32px 0 28px; display: block; border-bottom: 1px solid var(--rule); }
.ha .hero-intro .hero-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 28px; }
.ha .hero-intro h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.8rem, 5.2vw, 4.4rem);
  letter-spacing: -0.035em; line-height: 1; margin: 0;
}
.ha .hero-intro h1 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}

/* Education band */
.hv3 .edu { padding: 28px 0 36px; border-bottom: 1px solid var(--rule-hair); }
.hv3 .edu-top {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: 72px; align-items: start; margin-bottom: 36px;
}
.hv3 .edu-head { max-width: 30ch; }
.hv3 .edu-head h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  letter-spacing: -0.022em; line-height: 1.1; margin: 14px 0 0;
}
.hv3 .edu-head h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--bronze-deep); font-weight: 400; }

.hv3 .edu-figure { margin: 0; }
.hv3 .edu-figure-inner {
  position: relative; aspect-ratio: 5 / 4;
  background:
    repeating-linear-gradient(45deg, transparent 0 14px, rgba(143,108,56,0.04) 14px 15px),
    var(--ivory);
  overflow: hidden; border: 1px dashed var(--rule);
}
.hv3 .edu-slot { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
.hv3 .edu-slot-mark { position: relative; width: 28px; height: 28px; }
.hv3 .edu-slot-cross { position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: var(--bronze-deep); opacity: 0.5; }
.hv3 .edu-slot-cross--v { left: 50%; right: auto; top: 0; bottom: 0; width: 1px; height: auto; }
.hv3 .edu-slot-meta { text-align: center; }
.hv3 .edu-slot-k { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 4px; }
.hv3 .edu-slot-d { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 0.95rem; color: var(--ink-soft); }
.hv3 .edu-figure figcaption {
  margin-top: 10px; font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-whisper);
}
.hv3 .edu-figure figcaption .cap-k {
  color: var(--bronze-deep); padding: 2px 6px; margin-right: 8px;
  background: rgba(143, 108, 56, 0.08); border: 1px solid var(--rule);
}

.hv3 .edu-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule); background: var(--ivory);
}
.hv3 .edu-col { padding: 28px 30px 30px; border-right: 1px solid var(--rule-hair); }
.hv3 .edu-col:last-child { border-right: 0; }
.hv3 .edu-num { font-family: var(--f-display); font-weight: 300; font-size: 1.8rem; color: var(--bronze-deep); line-height: 1; }
.hv3 .edu-k { font-family: var(--f-display); font-weight: 400; font-size: 1.4rem; letter-spacing: -0.012em; margin-top: 16px; color: var(--ink); }
.hv3 .edu-col p { margin: 14px 0 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.hv3 .edu-col p em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--bronze-deep); }

@media (max-width: 880px) { .hv3 .edu-top { grid-template-columns: 1fr; gap: 36px; } }

/* Flagship metric */
.hv3 .flag { padding: 36px 0 40px; background: var(--paper); border-top: 1px solid var(--rule); }
.hv3 .flag-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.hv3 .flag-left h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2rem, 3vw, 2.5rem);
  letter-spacing: -0.022em; line-height: 1.08; margin: 16px 0 20px; max-width: 20ch;
}
.hv3 .flag-left h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--bronze-deep); }
.hv3 .flag-left p { margin: 0 0 14px; max-width: 50ch; font-size: 1rem; line-height: 1.65; color: var(--ink-soft); }
.hv3 .flag-left p strong { color: var(--ink); font-weight: 500; }
.hv3 .flag-foot { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule-hair); font-size: 0.95rem; color: var(--ink); }
.hv3 .flag-foot em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--bronze-deep); }

.hv3 .flag-card { background: var(--ivory); border: 1px solid var(--rule); padding: 28px 32px 32px; }
.hv3 .flag-card .ftag { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--bronze-deep); }
.hv3 .flag-card .fname { font-family: var(--f-display); font-weight: 400; font-size: 1.5rem; letter-spacing: -0.015em; margin-top: 10px; color: var(--ink); }
.hv3 .flag-card .fname em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--bronze-deep); }
.hv3 .flag-card .fval {
  font-family: var(--f-display); font-weight: 200;
  font-size: 6rem; line-height: 0.95; letter-spacing: -0.045em;
  color: var(--ink); margin-top: 20px; font-variant-numeric: tabular-nums;
}
.hv3 .flag-card .fval sup { font-size: 2rem; margin-left: 6px; color: var(--ink-mute); font-weight: 300; vertical-align: baseline; line-height: 1; }
.hv3 .flag-card .fsub { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--ink-soft); font-size: 1.02rem; margin-top: 10px; }
.hv3 .flag-card .wf {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule);
  display: grid; grid-template-columns: 1fr auto; gap: 10px 20px; font-size: 0.88rem;
}
.hv3 .flag-card .wf span { color: var(--ink-mute); }
.hv3 .flag-card .wf b {
  font-family: var(--f-mono); font-weight: 500; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right;
}

/* Audience */
.ha .aud { padding: 36px 0 40px; border-top: 1px solid var(--rule-hair); }
.ha .aud-head { max-width: 62ch; margin-bottom: 32px; }
.ha .aud-head h2 { font-family: var(--f-display); font-weight: 400; font-size: 3rem; letter-spacing: -0.025em; line-height: 1.02; margin: 16px 0 0; }
.ha .aud-head h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--bronze-deep); }
.hv3 .aud-head .aud-lede { margin-top: 22px; max-width: 60ch; font-size: 1.02rem; color: var(--ink-soft); line-height: 1.65; }

.ha .aud-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); }
.ha .aud-card { padding: 40px 40px 44px; background: var(--ivory); border-right: 1px solid var(--rule); }
.ha .aud-card:last-child { border-right: 0; background: var(--paper); }
.ha .aud-card .tag { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--bronze-deep); text-transform: uppercase; }
.ha .aud-card h3 { font-family: var(--f-display); font-weight: 400; font-size: 1.8rem; letter-spacing: -0.02em; line-height: 1.1; margin: 14px 0 0; max-width: 22ch; }
.ha .aud-card h3 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--bronze-deep); }
.ha .aud-card p { margin-top: 20px; font-size: 0.96rem; color: var(--ink-soft); line-height: 1.6; }
.ha .aud-card .legal {
  font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-mute);
  letter-spacing: 0.05em; margin-top: 22px; padding-top: 14px;
  border-top: 1px solid var(--rule-hair); line-height: 1.55;
}
.ha .aud-card .legal b { color: var(--ink); font-weight: 500; }

/* Pricing preview band (homepage) */
.hv3 .pricing { padding: 36px 0 40px; border-top: 1px solid var(--rule); background: var(--ivory); }
.hv3 .pricing-head {
  display: grid; grid-template-columns: 1.3fr 1fr; gap: 56px; align-items: end;
  padding-bottom: 32px; margin-bottom: 36px; border-bottom: 1px solid var(--rule);
}
.hv3 .pricing-head h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 2.8rem; letter-spacing: -0.025em; line-height: 1.05;
  margin: 16px 0 22px; max-width: 16ch;
}
.hv3 .pricing-head h2 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--bronze-deep); }
.hv3 .pricing-head p { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 52ch; margin: 0; }
.hv3 .pricing-note {
  font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-mute);
  line-height: 1.7; padding-left: 20px; border-left: 2px solid var(--bronze);
}
.hv3 .pricing-grid { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--rule); }
.hv3 .ptier {
  background: var(--ivory); padding: 42px 44px 44px;
  border-right: 1px solid var(--rule); position: relative;
  display: flex; flex-direction: column;
}
.hv3 .ptier:last-child { border-right: 0; }
.hv3 .ptier--flag { background: var(--paper); }
.hv3 .ptier-tag { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em; color: var(--bronze-deep); text-transform: uppercase; }
.hv3 .ptier-badge {
  position: absolute; top: 42px; right: 44px;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--ember); text-transform: uppercase;
  padding: 4px 9px; border: 1px solid var(--ember); background: var(--ivory);
}
.hv3 .ptier-price {
  font-family: var(--f-display); font-weight: 300;
  font-size: 4.8rem; line-height: 1; letter-spacing: -0.04em;
  margin-top: 22px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.hv3 .ptier-price .cur { font-size: 2rem; vertical-align: 0.85em; margin-right: 4px; color: var(--ink-mute); font-weight: 400; }
.hv3 .ptier-price .per { font-family: var(--f-body); font-size: 1rem; color: var(--ink-mute); margin-left: 6px; font-weight: 400; }
.hv3 .ptier-sub { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--ink-soft); font-size: 1.05rem; margin-top: 12px; }
.hv3 .ptier ul { list-style: none; margin: 28px 0 32px; padding: 0; border-top: 1px solid var(--rule-hair); }
.hv3 .ptier li { padding: 11px 0; border-bottom: 1px solid var(--rule-hair); font-size: 0.94rem; color: var(--ink-soft); line-height: 1.5; }
.hv3 .ptier-cta { align-self: flex-start; margin-top: auto; }
.hv3 .pricing-foot { margin-top: 28px; text-align: right; font-family: var(--f-mono); font-size: 0.82rem; }
.hv3 .pricing-foot a { color: var(--ink-soft); padding-bottom: 3px; border-bottom: 1px solid var(--bronze); }

/* Letter + close */
.hv3 .letter-close { background: var(--paper); color: var(--ink); padding: 36px 0 40px; border-top: 1px solid var(--rule); }
.hv3 .letter-close em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--bronze-deep); font-weight: 400; }
.hv3 .lc-top { display: grid; grid-template-columns: 1.1fr 1fr; gap: 72px; align-items: center; padding-bottom: 48px; border-bottom: 1px solid var(--rule); }
.hv3 .lc-eyebrow { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bronze-deep); }
.hv3 .lc-h2 { font-family: var(--f-display); font-weight: 400; font-size: clamp(2.2rem, 3.4vw, 2.9rem); letter-spacing: -0.03em; line-height: 1.04; margin: 14px 0 18px; color: var(--ink); max-width: 18ch; }
.hv3 .lc-p { font-size: 1rem; line-height: 1.6; color: var(--ink-soft); max-width: 48ch; margin: 0 0 20px; }
.hv3 .lc-meta { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em; color: var(--ink-mute); }
.hv3 .lc-meta .sep { margin: 0 10px; color: var(--rule); }
.hv3 .lc-form { background: var(--ivory); border: 1px solid var(--rule); padding: 28px 28px 26px; }
.hv3 .lcf-label { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px; display: block; }
.hv3 .lcf-row { display: grid; grid-template-columns: 1fr auto; }
.hv3 .lcf-input {
  font-family: var(--f-body); font-size: 1rem;
  padding: 14px 16px; background: var(--ivory); color: var(--ink);
  border: 1px solid var(--rule); border-right: 0; outline: none;
}
.hv3 .lcf-input:focus { border-color: var(--bronze-deep); }
.hv3 .lcf-btn {
  background: var(--ink); color: var(--ivory); border: 1px solid var(--ink);
  font-family: var(--f-body); font-size: 0.92rem; font-weight: 500;
  padding: 0 22px; cursor: pointer; white-space: nowrap;
}
.hv3 .lcf-btn:hover { background: #000; }
.hv3 .lcf-note { margin-top: 14px; font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-mute); line-height: 1.6; }
.hv3 .lcf-note i { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--bronze-deep); font-size: 1.05em; }
.hv3 .lc-close { padding-top: 48px; text-align: center; }
.hv3 .lc-close h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.6rem, 4.2vw, 3.4rem); letter-spacing: -0.035em; line-height: 1; margin: 0 auto; max-width: 18ch; color: var(--ink); }
.hv3 .lc-close p { font-size: 1rem; color: var(--ink-soft); margin: 16px auto 0; max-width: 52ch; line-height: 1.6; }
.hv3 .lc-close .ctas { margin-top: 28px; display: inline-flex; gap: 14px; }
.hv3 .lc-close .stamp { margin-top: 28px; font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-mute); letter-spacing: 0.14em; text-transform: uppercase; }

/* ═══════════════════════════════════════════════════════════════════════
   LOGIN PAGE
   ═══════════════════════════════════════════════════════════════════════ */

.hv.login-grid { display: flex; flex-direction: column; min-height: 100vh; }
.hv .login-nav { border-bottom: 1px solid var(--rule); padding: 18px 0; }
.hv .login-nav-inner { max-width: 1200px; margin: 0 auto; padding: 0 32px; display: flex; justify-content: space-between; align-items: center; }
.hv .login-nav-brand { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; color: var(--ink); }
.hv .login-nav-back { font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.1em; color: var(--ink-mute); text-transform: uppercase; border-bottom: 1px solid transparent; padding-bottom: 2px; }
.hv .login-nav-back:hover { color: var(--ink); border-bottom-color: var(--ink); }

.hv .login-main { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; }

.hv .login-left {
  background: var(--paper); padding: 80px 72px;
  display: flex; flex-direction: column; justify-content: space-between;
  border-right: 1px solid var(--rule);
}
.hv .login-eyebrow { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--bronze-deep); text-transform: uppercase; font-weight: 500; margin-bottom: 36px; }
.hv .login-h1 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.4rem, 4.4vw, 3.4rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 24px; }
.hv .login-h1 em { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; color: var(--bronze-deep); }
.hv .login-blurb { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 1.18rem; color: var(--ink-soft); line-height: 1.5; max-width: 38ch; margin: 0 0 36px; }
.hv .login-ledger-card {
  background: var(--ivory); border: 1px solid var(--rule);
  padding: 24px 26px; font-family: var(--f-mono); font-size: 0.78rem;
  line-height: 1.9; color: var(--ink-soft); max-width: 380px;
}
.hv .login-ledger-card .h { font-family: var(--f-display); font-weight: 500; font-size: 1rem; color: var(--ink); margin-bottom: 4px; }
.hv .login-ledger-card .s { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 0.92rem; color: var(--ink-mute); margin-bottom: 14px; }
.hv .login-ledger-card .row { display: flex; justify-content: space-between; border-top: 1px dashed var(--rule); padding: 4px 0; }
.hv .login-ledger-card .row:first-of-type { border-top: 1px solid var(--ink); }
.hv .login-ledger-card .row .v { color: var(--bronze-deep); }
.hv .login-foot { font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; }

.hv .login-right { padding: 80px 72px; display: flex; flex-direction: column; justify-content: center; background: var(--ivory); }
.hv .login-form-wrap { max-width: 420px; width: 100%; margin: 0 auto; }
.hv .login-form-eyebrow { font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 16px; }
.hv .login-form-h2 { font-family: var(--f-display); font-weight: 400; font-size: 1.85rem; letter-spacing: -0.015em; line-height: 1.15; margin: 0 0 12px; }
.hv .login-form-sub { font-family: 'Instrument Serif', Georgia, serif; font-style: italic; font-size: 1rem; color: var(--ink-mute); margin: 0 0 36px; }

.hv .login-flash { margin-bottom: 24px; }
.hv .login-flash-msg {
  padding: 12px 14px; border: 1px solid var(--rule);
  font-family: var(--f-body); font-size: 0.92rem; margin-bottom: 8px;
}
.hv .login-flash-msg--error,
.hv .login-flash-msg--danger { border-color: var(--negative); background: var(--negative-bg); color: var(--negative); }
.hv .login-flash-msg--success { border-color: var(--positive); background: var(--positive-bg); color: var(--positive); }
.hv .login-flash-msg--info { background: var(--paper); }

.hv .login-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule); margin-bottom: 28px; }
.hv .login-tab {
  background: none; border: none; cursor: pointer; padding: 14px 0;
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: all 160ms ease;
}
.hv .login-tab.active { color: var(--ink); border-bottom-color: var(--bronze-deep); }
.hv .login-tab:hover { color: var(--ink); }

.hv .login-panel { display: none; }
.hv .login-panel.active { display: block; }

.hv .login-field { margin-bottom: 20px; }
.hv .login-field label { display: block; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.12em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 8px; }
.hv .login-field input {
  width: 100%; padding: 12px 14px; background: var(--ivory);
  border: 1px solid var(--rule); font-family: var(--f-body);
  font-size: 1rem; color: var(--ink);
  transition: border-color 160ms ease;
}
.hv .login-field input:focus { outline: none; border-color: var(--ink); }
.hv .login-field-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.hv .login-field-row label { margin: 0; }
.hv .login-forgot { font-family: var(--f-body); font-size: 0.84rem; color: var(--bronze-deep); border-bottom: 1px solid transparent; }
.hv .login-forgot:hover { border-bottom-color: var(--bronze-deep); }

.hv .login-checkbox-row { display: flex; align-items: center; gap: 10px; margin: 18px 0 28px; font-family: var(--f-body); font-size: 0.9rem; color: var(--ink-soft); }
.hv .login-checkbox-row input { accent-color: var(--bronze-deep); }

.hv .login-btn-submit {
  width: 100%; font-family: var(--f-body); font-size: 1rem; font-weight: 500;
  padding: 14px 24px; background: var(--ink); color: var(--ivory);
  border: 1px solid var(--ink); cursor: pointer;
  transition: all 160ms ease;
}
.hv .login-btn-submit:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); }

.hv .login-magic-help {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 0.94rem; color: var(--ink-mute); line-height: 1.5;
  margin: 0 0 24px;
}

.hv .login-below-form {
  margin-top: 32px; padding-top: 24px;
  border-top: 1px solid var(--rule-hair); text-align: center;
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 0.96rem; color: var(--ink-mute);
}
.hv .login-below-form a { font-style: normal; color: var(--ink); border-bottom: 1px solid var(--bronze); }
.hv .login-below-form a:hover { border-bottom-color: var(--ink); }

.hv .login-footer {
  border-top: 1px solid var(--rule); padding: 22px 32px; background: var(--paper);
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  color: var(--ink-mute); text-transform: uppercase;
  display: flex; justify-content: space-between; align-items: center;
}

@media (max-width: 880px) {
  .hv .login-main { grid-template-columns: 1fr; }
  .hv .login-left { padding: 48px 32px; border-right: none; border-bottom: 1px solid var(--rule); }
  .hv .login-right { padding: 48px 32px; }
  .hv .login-ledger-card { max-width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════
   END PHASE 4 EDITORIAL CHUNK
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════════════
   PHASE 4b — /learn/* PAGES
   Append this whole block to app/static/css/public.css.
   All styles namespaced under .learn so they don't leak.
   Source: learn/Recapture.html, Ledger.html, Qualification Tracker.html
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared tokens (mirrors .hv chunk; .learn re-declares so this CSS
      block can be appended INDEPENDENTLY of the .hv block in any order) ─ */
.learn {
  --ivory: #FBF8F1;
  --paper: #F5F0E4;
  --bronze-wash: #F0E8D4;
  --ink: #141413;
  --ink-soft: #2A2925;
  --ink-mute: #74706A;
  --ink-whisper: #A09B92;
  --rule: #E6DEC9;
  --rule-hair: #EDE6D5;
  --bronze: #AC8444;
  --bronze-deep: #8A6A36;
  --positive: #2E6F40;
  --warn: #B85A2A;
  --danger: #A03A2A;

  --f-display: "Fraunces", "Iowan Old Style", Georgia, serif;
  --f-editorial: "EB Garamond", "Iowan Old Style", Georgia, serif;
  --f-body: "Source Serif 4", Georgia, serif;
  --f-mono: "Geist Mono", "JetBrains Mono", ui-monospace, monospace;

  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
.learn *, .learn *::before, .learn *::after { box-sizing: border-box; }

.learn .container { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.learn .container--narrow { max-width: 880px; margin: 0 auto; padding: 0 32px; }

.learn .eyebrow {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  color: var(--ink-mute); text-transform: uppercase; font-weight: 500;
}
.learn .eyebrow--bronze { color: var(--bronze-deep); }

/* ── Nav (same on all 3 learn pages) ─────────────────────── */
.learn .nav { border-bottom: 1px solid var(--rule); padding: 18px 0; }
.learn .nav-inner { display: flex; justify-content: space-between; align-items: center; }
.learn .nav-brand { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; letter-spacing: -0.01em; color: var(--ink); }
.learn .nav-links { display: flex; gap: 32px; align-items: center; }
.learn .nav-link { font-family: var(--f-body); font-size: 0.92rem; color: var(--ink-soft); border-bottom: 1px solid transparent; padding-bottom: 2px; transition: all 160ms ease; }
.learn .nav-link:hover { border-bottom-color: var(--ink); color: var(--ink); }
.learn .nav-link.current { border-bottom-color: var(--bronze-deep); color: var(--ink); }
.learn .nav-cta { font-family: var(--f-body); font-size: 0.9rem; padding: 8px 16px; background: var(--ink); color: var(--ivory); border: 1px solid var(--ink); }
.learn .nav-cta:hover { background: var(--ink-soft); }

/* ── Hero (shared across learn pages) ────────────────────── */
.learn .hero { padding: 52px 0 28px; }
.learn .hero-meta { display: flex; gap: 28px; align-items: center; margin-bottom: 22px; font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--ink-mute); text-transform: uppercase; }
.learn .hero-meta .crumb a { color: var(--bronze-deep); }
.learn .hero-meta .crumb a:hover { text-decoration: underline; }
.learn .hero-meta .dot { color: var(--ink-whisper); }
.learn .hero h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.8rem, 6vw, 4.8rem); line-height: 1.0;
  letter-spacing: -0.025em; margin: 0 0 24px; max-width: 18ch;
}
.learn .hero h1 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn .hero-deck { font-family: var(--f-editorial); font-style: italic; font-size: 1.32rem; color: var(--ink-soft); max-width: 60ch; line-height: 1.5; }

/* ═══════════════════════════════════════════════════════════════════════
   RECAPTURE — video player + chapters + transcript
   ═══════════════════════════════════════════════════════════════════════ */

.learn .player-band { padding: 24px 0 60px; }
.learn .player { background: var(--ink); border: 1px solid var(--ink); position: relative; overflow: hidden; }
.learn .player-stage { position: relative; width: 100%; aspect-ratio: 16/9; background: var(--ink); overflow: hidden; }
.learn .player-stage svg { display: block; width: 100%; height: 100%; }

.learn .preview-stamp {
  position: absolute; top: 18px; right: 18px;
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.18em;
  color: rgba(252, 248, 241, 0.5); text-transform: uppercase;
  border: 1px solid rgba(252, 248, 241, 0.25); padding: 5px 10px; z-index: 5;
}

.learn .ch-overlay { position: absolute; left: 36px; bottom: 92px; right: 36px; pointer-events: none; z-index: 4; }
.learn .ch-overlay .ch-num { font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em; color: rgba(172, 132, 68, 0.95); text-transform: uppercase; margin-bottom: 6px; }
.learn .ch-overlay .ch-title { font-family: var(--f-display); font-weight: 300; font-size: clamp(1.4rem, 2.6vw, 2.0rem); line-height: 1.1; color: var(--ivory); letter-spacing: -0.015em; max-width: 22ch; }
.learn .ch-overlay .ch-title em { font-family: var(--f-editorial); font-style: italic; color: #D9B26F; }

.learn .controls { background: #0a0a09; border-top: 1px solid #2a2925; padding: 14px 18px; display: grid; grid-template-columns: auto 1fr auto auto; gap: 16px; align-items: center; }
.learn .play-btn { width: 38px; height: 38px; background: var(--ivory); color: var(--ink); border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: background 160ms ease; }
.learn .play-btn:hover { background: #D9B26F; }
.learn .scrubber { position: relative; height: 22px; cursor: pointer; display: flex; align-items: center; }
.learn .scrubber-track { width: 100%; height: 2px; background: rgba(252, 248, 241, 0.18); position: relative; }
.learn .scrubber-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--bronze); width: 0%; transition: width 80ms linear; }
.learn .scrubber-chapters { position: absolute; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none; }
.learn .scrubber-chapter-mark { position: absolute; top: -3px; bottom: -3px; width: 1px; background: rgba(252, 248, 241, 0.35); }
.learn .time { font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.05em; color: rgba(252, 248, 241, 0.7); white-space: nowrap; }
.learn .time .sep { margin: 0 6px; color: rgba(252, 248, 241, 0.35); }
.learn .controls-right { display: flex; gap: 14px; align-items: center; }
.learn .ctrl-btn { background: none; border: none; cursor: pointer; color: rgba(252, 248, 241, 0.65); font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 4px 8px; transition: color 160ms ease; }
.learn .ctrl-btn:hover, .learn .ctrl-btn.active { color: var(--ivory); }

.learn .chapter-rail { margin-top: 24px; display: grid; grid-template-columns: repeat(4, 1fr); border: 1px solid var(--rule); background: var(--paper); }
.learn .ch-cell { padding: 22px 24px; border-right: 1px solid var(--rule); cursor: pointer; transition: background 160ms ease; background: transparent; border-top: 3px solid transparent; text-align: left; font-family: inherit; }
.learn .ch-cell:last-child { border-right: none; }
.learn .ch-cell:hover { background: var(--bronze-wash); }
.learn .ch-cell.current { background: var(--ivory); border-top-color: var(--bronze-deep); }
.learn .ch-cell .num { display: block; font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em; color: var(--bronze-deep); text-transform: uppercase; margin-bottom: 8px; }
.learn .ch-cell .ttl { display: block; font-family: var(--f-display); font-weight: 500; font-size: 1.04rem; color: var(--ink); letter-spacing: -0.005em; margin-bottom: 4px; }
.learn .ch-cell .dur { display: block; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.06em; color: var(--ink-mute); }

/* ── Lead / argument section ─────────────────────────────── */
.learn .lead { padding: 60px 0 48px; background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-top: 40px; }
.learn .lead-grid { display: grid; grid-template-columns: 0.7fr 1.3fr; gap: 60px; align-items: start; }
.learn .lead-grid h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.0rem, 3.6vw, 2.8rem); line-height: 1.08; letter-spacing: -0.02em; margin: 14px 0 0; }
.learn .lead-grid h2 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn .lead-grid .body p { font-family: var(--f-body); font-size: 1.06rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 18px; max-width: 60ch; }
.learn .lead-grid .body p.dropcap::first-letter { font-family: var(--f-display); font-weight: 400; float: left; font-size: 4.4rem; line-height: 0.9; padding: 6px 12px 0 0; color: var(--bronze-deep); }
.learn .lead-grid .body em { font-family: var(--f-editorial); font-style: italic; color: var(--ink); }

/* ── Transcript ──────────────────────────────────────────── */
.learn .transcript { padding: 60px 0 64px; background: var(--ivory); }
.learn .transcript-head { text-align: center; margin-bottom: 56px; }
.learn .transcript-head h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.0rem, 3.6vw, 2.8rem); line-height: 1.05; letter-spacing: -0.02em; margin: 14px 0 14px; }
.learn .transcript-head h2 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn .transcript-head p { font-family: var(--f-editorial); font-style: italic; font-size: 1.05rem; color: var(--ink-soft); margin: 0; }
.learn .ts-chapter { border-top: 1px solid var(--rule); padding: 36px 0; display: grid; grid-template-columns: 220px 1fr; gap: 60px; }
.learn .ts-chapter:last-child { border-bottom: 1px solid var(--rule); }
.learn .ts-meta .num { font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em; color: var(--bronze-deep); text-transform: uppercase; margin-bottom: 8px; }
.learn .ts-meta .ttl { font-family: var(--f-display); font-weight: 500; font-size: 1.2rem; color: var(--ink); margin-bottom: 6px; line-height: 1.25; }
.learn .ts-meta .dur { font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-mute); letter-spacing: 0.06em; }
.learn .ts-body p { font-family: var(--f-body); font-size: 1.04rem; line-height: 1.7; color: var(--ink-soft); margin: 0 0 16px; max-width: 64ch; }
.learn .ts-body p:last-child { margin-bottom: 0; }
.learn .ts-body em { font-family: var(--f-editorial); font-style: italic; color: var(--ink); }
.learn .ts-pull {
  font-family: var(--f-display); font-weight: 300; font-size: 1.5rem;
  line-height: 1.25; letter-spacing: -0.012em; color: var(--ink);
  border-left: 2px solid var(--bronze); padding: 4px 0 4px 22px;
  margin: 18px 0 24px; max-width: 32ch;
}
.learn .ts-pull em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }

/* ── CTA / closing band ──────────────────────────────────── */
.learn .closing { padding: 52px 0 64px; background: var(--paper); border-top: 1px solid var(--rule); }
.learn .closing-inner { max-width: 760px; margin: 0 auto; text-align: center; padding: 0 32px; }
.learn .closing h2 { font-family: var(--f-display); font-weight: 300; font-size: clamp(2.2rem, 4vw, 3rem); line-height: 1.05; letter-spacing: -0.025em; margin: 14px auto 18px; max-width: 22ch; }
.learn .closing h2 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn .closing p { font-family: var(--f-editorial); font-style: italic; font-size: 1.1rem; color: var(--ink-soft); max-width: 50ch; margin: 0 auto 28px; line-height: 1.55; }
.learn .closing-ctas { display: inline-flex; gap: 14px; }
.learn .closing-ctas .btn { font-family: var(--f-body); font-size: 0.96rem; padding: 12px 22px; cursor: pointer; border: 1px solid var(--ink); }
.learn .closing-ctas .btn--primary { background: var(--ink); color: var(--ivory); }
.learn .closing-ctas .btn--primary:hover { background: var(--ink-soft); }
.learn .closing-ctas .btn--ghost { background: transparent; color: var(--ink); }
.learn .closing-ctas .btn--ghost:hover { background: var(--ink); color: var(--ivory); }

/* ── Footer (shared) ─────────────────────────────────────── */
.learn .foot { background: var(--ink); color: var(--ivory); padding: 56px 0 28px; }
.learn .foot-inner { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid rgba(252, 248, 241, 0.12); }
.learn .foot-brand { font-family: var(--f-display); font-weight: 500; font-size: 1.1rem; }
.learn .foot-links { display: flex; gap: 28px; font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase; }
.learn .foot-links a { color: rgba(252, 248, 241, 0.7); }
.learn .foot-links a:hover { color: var(--ivory); }
.learn .foot-meta { padding-top: 22px; font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.1em; color: rgba(252, 248, 241, 0.45); text-transform: uppercase; display: flex; justify-content: space-between; }

/* ═══════════════════════════════════════════════════════════════════════
   LEDGER + TRACKER — page-specific overrides go here.
   These two pages reuse the editorial primitives above (hero, sections,
   pull-quotes, footer). For unique components — interactive ledger
   simulator, tracker timeline — copy the corresponding CSS rules from
   phase4b/reference/Ledger.html and Qualification-Tracker.html into
   blocks marked .learn-ledger {…} and .learn-tracker {…} respectively.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Shared buttons (used on learn pages) ─────────────────── */
.learn .btn-primary {
  font-family: var(--f-body); font-size: 0.96rem; padding: 12px 22px;
  background: var(--ink); color: var(--ivory); border: 1px solid var(--ink);
  cursor: pointer; transition: background 160ms ease;
}
.learn .btn-primary:hover { background: #000; }
.learn .btn-ghost {
  font-family: var(--f-body); font-size: 0.96rem; padding: 12px 22px;
  background: transparent; color: var(--ink); border: 1px solid var(--ink);
  cursor: pointer; transition: background 160ms ease, color 160ms ease;
}
.learn .btn-ghost:hover { background: var(--ink); color: var(--ivory); }

/* ── Shared hero two-column grid ──────────────────────────── */
.learn .hero-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.learn .hero-sub {
  font-family: var(--f-body); font-size: 1.06rem; color: var(--ink-soft);
  line-height: 1.65; max-width: 52ch; margin: 0 0 28px;
}
.learn .hero-sub .meta-inline {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.05em;
  color: var(--ink-mute); font-style: normal;
}
.learn .hero-cta-row { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin-top: 8px; }
.learn .hero-cta-row .hero-meta {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--ink-mute); text-transform: uppercase; margin-left: 6px;
}

/* ── Snapshot panel (shared by ledger + tracker hero) ──────── */
.learn .hero-snapshot {
  background: var(--ink); color: var(--ivory);
  border: 1px solid rgba(252,248,241,0.1);
}
.learn .snap-hd {
  padding: 18px 22px 16px; border-bottom: 1px solid rgba(252,248,241,0.12);
  display: flex; justify-content: space-between; align-items: baseline;
}
.learn .snap-hd .title {
  font-family: var(--f-display); font-weight: 400; font-size: 1.04rem;
  letter-spacing: -0.005em; color: var(--ivory);
}
.learn .snap-hd .eyebrow { color: rgba(172,132,68,0.85); }

/* Ledger snapshot */
.learn .snap-headline { padding: 18px 22px 14px; display: flex; justify-content: space-between; align-items: flex-start; gap: 24px; }
.learn .snap-headline .lead-num {
  font-family: var(--f-display); font-weight: 300; font-size: 2.4rem;
  letter-spacing: -0.03em; color: var(--ivory); line-height: 1;
}
.learn .snap-headline .lead-label {
  font-family: var(--f-body); font-size: 0.88rem; color: rgba(252,248,241,0.6);
  line-height: 1.4; text-align: right;
}
.learn .snap-tiles { display: grid; grid-template-columns: repeat(2, 1fr); border-top: 1px solid rgba(252,248,241,0.1); }
.learn .snap-tile {
  padding: 16px 20px; border-right: 1px solid rgba(252,248,241,0.1);
  border-bottom: 1px solid rgba(252,248,241,0.1);
}
.learn .snap-tile:nth-child(even) { border-right: none; }
.learn .snap-tile .code {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  color: rgba(172,132,68,0.7); text-transform: uppercase; margin-bottom: 4px;
}
.learn .snap-tile .name {
  font-family: var(--f-body); font-size: 0.82rem; color: rgba(252,248,241,0.65);
  margin-bottom: 6px; line-height: 1.35;
}
.learn .snap-tile .val {
  font-family: var(--f-display); font-weight: 300; font-size: 1.3rem;
  letter-spacing: -0.02em; color: var(--ivory); margin-bottom: 6px;
}
.learn .snap-tile .val.dim { color: rgba(252,248,241,0.3); }
.learn .snap-ft {
  padding: 12px 22px; border-top: 1px solid rgba(252,248,241,0.1);
  display: flex; gap: 28px;
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  color: rgba(172,132,68,0.7); text-transform: uppercase;
}

/* ── Posture chips (shared) ──────────────────────────────── */
.learn .posture {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase;
}
.learn .posture .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.learn .posture.strong { color: var(--positive); }
.learn .posture.ontrack { color: var(--bronze-deep); }
.learn .posture.cond { color: var(--ink-mute); }
.learn .posture.warn { color: var(--warn); }

/* ── Pull quote (short editorial emphasis) ───────────────── */
.learn .pull {
  font-family: var(--f-editorial); font-style: italic; font-size: 1.2rem;
  line-height: 1.5; color: var(--ink); border-left: 2px solid var(--bronze);
  padding: 4px 0 4px 20px; margin: 24px 0; max-width: 44ch;
}

/* ── Auth inline citation ─────────────────────────────────── */
.learn .auth {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.04em;
  color: var(--bronze-deep);
}

/* ── Disclosure box ──────────────────────────────────────── */
.learn .disclose {
  margin-top: 24px; padding: 16px 20px;
  background: var(--paper); border-left: 3px solid var(--rule);
}
.learn .disclose-label {
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px;
}
.learn .disclose-body {
  font-family: var(--f-body); font-size: 0.9rem; color: var(--ink-mute);
  line-height: 1.6;
}

/* ── Section kicker header ────────────────────────────────── */
.learn .section-kicker { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.learn .section-kicker .sect-num {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bronze-deep); display: block; margin-bottom: 14px;
}
.learn .section-kicker h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.0rem, 3.8vw, 3.0rem); letter-spacing: -0.022em; line-height: 1.05; margin: 0 0 16px;
}
.learn .section-kicker h2 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn .section-kicker p { font-family: var(--f-body); font-size: 1.04rem; color: var(--ink-soft); line-height: 1.6; margin: 0; }

/* ── Credibility section (shared by ledger + tracker) ──────── */
.learn .credibility { padding: 64px 0; background: var(--paper); border-top: 1px solid var(--rule); }
.learn .credibility-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: start; }
.learn .credibility h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.0rem, 3.6vw, 2.8rem); letter-spacing: -0.022em; line-height: 1.1; margin: 14px 0 32px;
}
.learn .credibility h2 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn .cred-list { display: flex; flex-direction: column; gap: 20px; }
.learn .cred-item { display: grid; grid-template-columns: 24px 1fr; gap: 14px; align-items: start; }
.learn .cred-check {
  font-family: var(--f-mono); font-size: 0.84rem; color: var(--positive);
  font-weight: 500; padding-top: 1px;
}
.learn .cred-text { font-family: var(--f-body); font-size: 0.98rem; color: var(--ink-soft); line-height: 1.6; }
.learn .cred-text b { color: var(--ink); font-weight: 500; }
.learn .cred-aside { position: sticky; top: 32px; }
.learn .cred-aside .quote-mark {
  font-family: var(--f-display); font-size: 5rem; font-weight: 300;
  color: var(--bronze); line-height: 0.7; display: block; margin-bottom: 12px;
}
.learn .cred-aside p {
  font-family: var(--f-editorial); font-style: italic; font-size: 1.15rem;
  color: var(--ink-soft); line-height: 1.65; margin: 0 0 18px;
}
.learn .cred-aside .attr {
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.16em;
  color: var(--ink-mute); text-transform: uppercase;
}

/* ── Final CTA section (shared) ──────────────────────────── */
.learn .final-cta { padding: 72px 0; background: var(--ink); text-align: center; }
.learn .final-cta h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.2rem, 4.5vw, 3.4rem); letter-spacing: -0.025em; line-height: 1.05;
  color: var(--ivory); margin: 0 0 18px;
}
.learn .final-cta h2 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze); }
.learn .final-cta p { font-family: var(--f-body); font-size: 1.04rem; color: rgba(252,248,241,0.65); max-width: 52ch; margin: 0 auto 36px; line-height: 1.6; }
.learn .final-cta .btn-primary { background: var(--bronze); border-color: var(--bronze); color: var(--ink); }
.learn .final-cta .btn-primary:hover { background: var(--bronze-deep); border-color: var(--bronze-deep); }
.learn .final-cta .btn-ghost { color: var(--ivory); border-color: rgba(252,248,241,0.35); }
.learn .final-cta .btn-ghost:hover { background: rgba(252,248,241,0.1); border-color: var(--ivory); }

/* ── Footer tag (recapture + tracker inline footer) ────────── */
.learn footer {
  background: var(--ink); color: var(--ivory); padding: 32px 0;
}
.learn footer .foot-inner {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  color: rgba(252,248,241,0.45); text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════════════════
   LEDGER PAGE — .learn-ledger
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero */
.learn-ledger .hero { padding: 52px 0 60px; border-bottom: 1px solid var(--rule); }

/* Argument section */
.learn-ledger .argument { padding: 64px 0; background: var(--paper); border-bottom: 1px solid var(--rule); }
.learn-ledger .argument-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.learn-ledger .argument-grid h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.0rem, 3.6vw, 2.8rem); letter-spacing: -0.022em; line-height: 1.1; margin: 14px 0 22px;
}
.learn-ledger .argument-grid h2 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn-ledger .argument-grid p { font-family: var(--f-body); font-size: 1.02rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 16px; }
.learn-ledger .arg-stack-hd {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--ink-mute); text-transform: uppercase;
  padding: 0 16px 10px; border-bottom: 1px solid var(--rule);
}
.learn-ledger .arg-stack { border: 1px solid var(--rule); margin-top: 0; }
.learn-ledger .arg-row { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--rule-hair); }
.learn-ledger .arg-row:last-child { border-bottom: none; }
.learn-ledger .arg-row .what {
  padding: 16px 18px; font-family: var(--f-body); font-size: 0.92rem;
  color: var(--ink); border-right: 1px solid var(--rule-hair); background: var(--ivory);
}
.learn-ledger .arg-row .what .cite {
  display: block; font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.1em; color: var(--ink-mute); text-transform: uppercase; margin-top: 4px;
}
.learn-ledger .arg-row .vs { padding: 16px 18px; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.55; }

/* Six-metric overview tiles */
.learn-ledger .overview { padding: 64px 0; background: var(--ivory); border-bottom: 1px solid var(--rule); }
.learn-ledger .mtile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); }
.learn-ledger .mtile {
  padding: 28px 26px; border-right: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair); text-decoration: none; color: inherit;
  transition: background 160ms ease; display: block; background: var(--ivory);
}
.learn-ledger .mtile:nth-child(3n) { border-right: none; }
.learn-ledger .mtile:nth-child(4), .learn-ledger .mtile:nth-child(5), .learn-ledger .mtile:nth-child(6) { border-bottom: none; }
.learn-ledger .mtile:hover { background: var(--bronze-wash); }
.learn-ledger .mtile-hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.learn-ledger .mtile-code {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.18em;
  color: var(--bronze-deep); text-transform: uppercase;
}
.learn-ledger .mtile-name {
  font-family: var(--f-display); font-weight: 400; font-size: 1.15rem;
  letter-spacing: -0.008em; color: var(--ink); margin-bottom: 10px;
}
.learn-ledger .mtile-q {
  font-family: var(--f-editorial); font-style: italic; font-size: 0.9rem;
  color: var(--ink-mute); line-height: 1.5; margin-bottom: 12px;
}
.learn-ledger .mtile-def { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; margin-bottom: 18px; }
.learn-ledger .mtile-ft { display: flex; justify-content: space-between; align-items: baseline; }
.learn-ledger .mtile-auth {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.06em; color: var(--ink-whisper);
}
.learn-ledger .mtile-jump {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  color: var(--bronze-deep); text-transform: uppercase;
}

/* Deep dive sections */
.learn-ledger .dive { padding: 64px 0; border-bottom: 1px solid var(--rule); background: var(--ivory); }
.learn-ledger .dive--paper { background: var(--paper); }
.learn-ledger .dive--ink { background: var(--ink); color: var(--ivory); }
.learn-ledger .dive-hd {
  display: grid; grid-template-columns: 1fr 280px; gap: 64px;
  align-items: start; margin-bottom: 40px;
  padding-bottom: 36px; border-bottom: 1px solid var(--rule);
}
.learn-ledger .dive--ink .dive-hd { border-bottom-color: rgba(252,248,241,0.12); }
.learn-ledger .dive-hd h3 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(1.8rem, 3.2vw, 2.4rem); letter-spacing: -0.022em; line-height: 1.1; margin: 12px 0 14px;
}
.learn-ledger .dive-hd h3 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn-ledger .dive--ink .dive-hd h3 em { color: var(--bronze); }
.learn-ledger .dive-hd .nick {
  font-family: var(--f-editorial); font-style: italic; font-size: 1.02rem;
  color: var(--ink-mute); line-height: 1.5; max-width: 52ch;
}
.learn-ledger .dive--ink .dive-hd .nick { color: rgba(252,248,241,0.5); }
.learn-ledger .dive-hd .right-q {
  font-family: var(--f-editorial); font-style: italic; font-size: 0.96rem;
  color: var(--ink-mute); line-height: 1.55; padding: 0 0 0 24px;
  border-left: 2px solid var(--rule); margin-top: 32px;
}
.learn-ledger .dive--ink .dive-hd .right-q { color: rgba(252,248,241,0.4); border-left-color: rgba(252,248,241,0.12); }
.learn-ledger .dive-body { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: start; }
.learn-ledger .dive-body p { font-family: var(--f-body); font-size: 1.02rem; color: var(--ink-soft); line-height: 1.68; margin: 0 0 16px; }
.learn-ledger .dive--ink .dive-body p { color: rgba(252,248,241,0.65); }
.learn-ledger .dive-body p b { color: var(--ink); font-weight: 500; }
.learn-ledger .dive--ink .dive-body p b { color: var(--ivory); }
.learn-ledger .dive-body p:last-child { margin-bottom: 0; }

/* Worked example table (ledger-specific) */
.learn-ledger .worked { background: var(--paper); border: 1px solid var(--rule); }
.learn-ledger .worked-hd {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 16px 22px; border-bottom: 1px solid var(--rule);
}
.learn-ledger .dive--ink .worked { background: rgba(255,255,255,0.05); border-color: rgba(252,248,241,0.12); }
.learn-ledger .dive--ink .worked-hd { border-bottom-color: rgba(252,248,241,0.12); }
.learn-ledger .worked-hd .h-title {
  font-family: var(--f-display); font-weight: 400; font-size: 1.0rem;
  letter-spacing: -0.005em; color: var(--ink);
}
.learn-ledger .dive--ink .worked-hd .h-title { color: var(--ivory); }
.learn-ledger .worked-row {
  display: grid; grid-template-columns: 1fr auto; gap: 16px;
  padding: 12px 22px; border-bottom: 1px solid var(--rule-hair);
  align-items: baseline;
}
.learn-ledger .dive--ink .worked-row { border-bottom-color: rgba(252,248,241,0.1); }
.learn-ledger .worked-row:last-child { border-bottom: none; }
.learn-ledger .worked-row .label {
  font-family: var(--f-body); font-size: 0.9rem; color: var(--ink-soft);
}
.learn-ledger .dive--ink .worked-row .label { color: rgba(252,248,241,0.6); }
.learn-ledger .worked-row .label small {
  display: block; font-family: var(--f-mono); font-size: 0.68rem;
  letter-spacing: 0.06em; color: var(--ink-mute); margin-top: 2px;
}
.learn-ledger .dive--ink .worked-row .label small { color: rgba(252,248,241,0.35); }
.learn-ledger .worked-row .num {
  font-family: var(--f-mono); font-size: 0.94rem; letter-spacing: 0.02em;
  color: var(--ink); white-space: nowrap;
}
.learn-ledger .dive--ink .worked-row .num { color: var(--ivory); }
.learn-ledger .worked-row.minus .num { color: var(--warn); }
.learn-ledger .worked-row.plus .num { color: var(--positive); }
.learn-ledger .worked-row.total {
  background: var(--bronze-wash); border-top: 1px solid var(--rule);
}
.learn-ledger .worked-row.total .num { font-size: 1.1rem; }

/* Recapture pools */
.learn-ledger .pools { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.learn-ledger .pool { background: var(--paper); border: 1px solid var(--rule); padding: 20px 22px; }
.learn-ledger .dive--paper .pool { background: var(--ivory); }
.learn-ledger .pool-hd { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; }
.learn-ledger .pool-hd .pn { font-family: var(--f-display); font-weight: 400; font-size: 1.0rem; color: var(--ink); }
.learn-ledger .pool-hd .pcite {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  color: var(--bronze-deep); text-transform: uppercase;
}
.learn-ledger .pool-amt {
  font-family: var(--f-display); font-weight: 300; font-size: 2.0rem;
  letter-spacing: -0.03em; color: var(--ink); margin-bottom: 10px;
}
.learn-ledger .pool-d { font-size: 0.86rem; color: var(--ink-mute); line-height: 1.55; }

/* Coverage bar */
.learn-ledger .coverage-bar { background: var(--paper); border: 1px solid var(--rule); padding: 28px 30px; }
.learn-ledger .cb-zones { display: flex; gap: 0; margin-bottom: 0; height: 24px; }
.learn-ledger .cb-zone {
  flex: 1; display: flex; align-items: center; justify-content: center;
  font-family: var(--f-mono); font-size: 0.56rem; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.learn-ledger .cb-zone.uncov { background: rgba(160,58,42,0.18); color: var(--warn); flex: 0.75; }
.learn-ledger .cb-zone.appr { background: rgba(172,132,68,0.14); color: var(--bronze-deep); flex: 0.25; }
.learn-ledger .cb-zone.cov { background: rgba(46,111,64,0.12); color: var(--positive); flex: 1; }
.learn-ledger .cb-marker { position: relative; height: 10px; }
.learn-ledger .needle {
  position: absolute; width: 2px; height: 16px; background: var(--bronze-deep);
  top: -4px; transform: translateX(-50%);
}
.learn-ledger .cb-scale {
  display: flex; justify-content: space-between; margin-top: 6px;
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.learn-ledger .cb-readout {
  display: flex; gap: 48px; margin-top: 20px; padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.learn-ledger .cb-readout .l {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.1em;
  color: var(--ink-mute); text-transform: uppercase; margin-bottom: 6px;
}
.learn-ledger .cb-readout .v {
  font-family: var(--f-display); font-weight: 300; font-size: 1.6rem;
  letter-spacing: -0.02em; color: var(--ink);
}

/* Path toggle (True Owner Return) */
.learn-ledger .path-toggle { display: flex; gap: 0; border: 1px solid var(--rule); width: fit-content; }
.learn-ledger .pt-btn {
  padding: 10px 20px; font-family: var(--f-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; text-transform: uppercase; background: transparent;
  color: rgba(252,248,241,0.5); border: none; border-right: 1px solid rgba(252,248,241,0.15);
  cursor: pointer; transition: background 160ms ease, color 160ms ease;
}
.learn-ledger .pt-btn:last-child { border-right: none; }
.learn-ledger .pt-btn.active { background: var(--bronze); color: var(--ink); }
.learn-ledger .pt-btn:not(.active):hover { color: rgba(252,248,241,0.8); }
.learn-ledger .path-card {
  margin-top: 16px; padding: 20px 24px;
  background: rgba(255,255,255,0.05); border: 1px solid rgba(252,248,241,0.12);
}
.learn-ledger .pc-hd {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--bronze); text-transform: uppercase; margin-bottom: 6px;
}
.learn-ledger .pc-name {
  font-family: var(--f-body); font-size: 0.84rem; color: rgba(252,248,241,0.6);
  margin-bottom: 12px;
}
.learn-ledger .pc-body { font-family: var(--f-body); font-size: 0.92rem; color: rgba(252,248,241,0.65); line-height: 1.6; }
.learn-ledger .pc-body em { font-style: italic; color: rgba(252,248,241,0.9); }

/* Inputs section (how data gets in) */
.learn-ledger .inputs { padding: 64px 0; background: var(--ivory); border-bottom: 1px solid var(--rule); }
.learn-ledger .inputs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); margin-top: 0; }
.learn-ledger .inputs-grid > div { padding: 32px 28px; border-right: 1px solid var(--rule-hair); }
.learn-ledger .inputs-grid > div:last-child { border-right: none; }
.learn-ledger .inp-num {
  font-family: var(--f-display); font-weight: 300; font-size: 2.6rem;
  letter-spacing: -0.04em; color: var(--bronze); line-height: 1; margin-bottom: 14px;
}
.learn-ledger .inp-title {
  font-family: var(--f-display); font-weight: 400; font-size: 1.12rem;
  letter-spacing: -0.005em; color: var(--ink); margin-bottom: 12px;
}
.learn-ledger .inp-body { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 16px; }
.learn-ledger .inp-list {
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.12em;
  color: var(--ink-mute); text-transform: uppercase; line-height: 1.7;
}
.learn-ledger .inp-list b { color: var(--bronze-deep); font-weight: 500; display: block; margin-bottom: 4px; }

/* ═══════════════════════════════════════════════════════════════════════
   TRACKER PAGE — .learn-tracker
   ═══════════════════════════════════════════════════════════════════════ */

/* Hero */
.learn-tracker .hero { padding: 52px 0 60px; border-bottom: 1px solid var(--rule); }

/* Tracker snapshot (qualification status) */
.learn-tracker .snap-body { padding: 20px 22px 0; }
.learn-tracker .snap-headline { display: flex; align-items: baseline; gap: 10px; margin-bottom: 18px; }
.learn-tracker .snap-headline .val {
  font-family: var(--f-display); font-weight: 300; font-size: 3.2rem;
  letter-spacing: -0.04em; color: var(--ivory); line-height: 1;
}
.learn-tracker .snap-headline .label {
  font-family: var(--f-body); font-size: 0.88rem; color: rgba(252,248,241,0.55); line-height: 1.4;
}
.learn-tracker .snap-gates { display: flex; flex-direction: column; gap: 0; }
.learn-tracker .snap-gate-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 13px 0; border-bottom: 1px solid rgba(252,248,241,0.08); gap: 16px;
}
.learn-tracker .snap-gate-row:last-child { border-bottom: none; padding-bottom: 4px; }
.learn-tracker .snap-gate-name {
  font-family: var(--f-body); font-size: 0.86rem; color: rgba(252,248,241,0.75);
  margin-bottom: 2px;
}
.learn-tracker .snap-gate-val {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: rgba(172,132,68,0.7); text-transform: uppercase;
}
.learn-tracker .snap-state {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.12em;
  text-transform: uppercase; white-space: nowrap;
}
.learn-tracker .snap-state .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.learn-tracker .snap-state.passed { color: var(--positive); }
.learn-tracker .snap-state.on-track { color: var(--bronze-deep); }
.learn-tracker .snap-state.warn { color: var(--warn); }

/* Problem section */
.learn-tracker .problem { padding: 64px 0; background: var(--paper); border-bottom: 1px solid var(--rule); }
.learn-tracker .problem-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.learn-tracker .problem h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.0rem, 3.6vw, 2.8rem); letter-spacing: -0.022em; line-height: 1.1; margin: 14px 0 20px;
}
.learn-tracker .problem h2 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn-tracker .problem p { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 16px; }
.learn-tracker .problem-stack { display: flex; flex-direction: column; gap: 0; }
.learn-tracker .ps-row { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 24px 0; border-bottom: 1px solid var(--rule-hair); }
.learn-tracker .ps-row:last-child { border-bottom: none; }
.learn-tracker .ps-num {
  font-family: var(--f-display); font-weight: 300; font-size: 1.8rem;
  letter-spacing: -0.04em; color: var(--bronze); line-height: 1.1;
}
.learn-tracker .ps-title {
  font-family: var(--f-display); font-weight: 400; font-size: 1.05rem;
  letter-spacing: -0.005em; color: var(--ink); margin-bottom: 6px;
}
.learn-tracker .ps-body { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.6; }

/* Four gate tiles */
.learn-tracker .tracks { padding: 64px 0; background: var(--ivory); border-bottom: 1px solid var(--rule); }
.learn-tracker .gate-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0; border: 1px solid var(--rule); }
.learn-tracker .gt {
  padding: 30px 28px; border-right: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
}
.learn-tracker .gt:nth-child(2n) { border-right: none; }
.learn-tracker .gt:nth-child(3), .learn-tracker .gt:nth-child(4) { border-bottom: none; }
.learn-tracker .gt-n {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.18em;
  color: var(--bronze-deep); text-transform: uppercase; margin-bottom: 10px;
}
.learn-tracker .gt-name {
  font-family: var(--f-display); font-weight: 400; font-size: 1.25rem;
  letter-spacing: -0.008em; color: var(--ink); margin-bottom: 14px; line-height: 1.35;
}
.learn-tracker .gt-summary { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 18px; }
.learn-tracker .gt-spec { margin-bottom: 10px; }
.learn-tracker .gt-spec-label {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  color: var(--ink-mute); text-transform: uppercase; margin-bottom: 3px;
}
.learn-tracker .gt-spec > div:last-child { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.5; }
.learn-tracker .gt-authority { font-family: var(--f-mono); font-size: 0.74rem; color: var(--bronze-deep); letter-spacing: 0.04em; }

/* Seven tests */
.learn-tracker .seven { padding: 64px 0; background: var(--paper); border-bottom: 1px solid var(--rule); }
.learn-tracker .seven-grid { display: grid; grid-template-columns: 1fr 1.6fr; gap: 72px; align-items: start; }
.learn-tracker .seven h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.0rem, 3.6vw, 2.8rem); letter-spacing: -0.022em; line-height: 1.1; margin: 14px 0 20px;
}
.learn-tracker .seven h2 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn-tracker .seven p { font-size: 0.98rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 16px; }
.learn-tracker .seven-auth {
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.14em;
  color: var(--bronze-deep); text-transform: uppercase; margin-top: 24px;
  padding-top: 18px; border-top: 1px solid var(--rule);
}
.learn-tracker .seven-list { display: flex; flex-direction: column; gap: 0; border: 1px solid var(--rule); }
.learn-tracker .sv {
  display: grid; grid-template-columns: 40px 1fr auto; gap: 16px;
  padding: 18px 22px; border-bottom: 1px solid var(--rule-hair); align-items: start;
}
.learn-tracker .sv:last-child { border-bottom: none; }
.learn-tracker .sv-n {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--bronze-deep); padding-top: 2px;
}
.learn-tracker .sv-label { font-family: var(--f-display); font-weight: 400; font-size: 0.96rem; color: var(--ink); margin-bottom: 4px; }
.learn-tracker .sv-desc { font-size: 0.86rem; color: var(--ink-mute); line-height: 1.5; }
.learn-tracker .sv-posture { text-align: right; }
.learn-tracker .sv-posture > div:last-child { font-size: 0.78rem; color: var(--ink-mute); margin-top: 4px; white-space: nowrap; }
.learn-tracker .lead {
  display: inline-block; font-family: var(--f-mono); font-size: 0.62rem;
  letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px;
  background: rgba(46,111,64,0.1); color: var(--positive); border: 1px solid rgba(46,111,64,0.2);
}
.learn-tracker .lead.lead--amber {
  background: rgba(172,132,68,0.1); color: var(--bronze-deep); border-color: rgba(172,132,68,0.2);
}

/* Inputs section */
.learn-tracker .inputs { padding: 64px 0; background: var(--ivory); border-bottom: 1px solid var(--rule); }
.learn-tracker .inputs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; border: 1px solid var(--rule); }
.learn-tracker .inp-card { padding: 32px 28px; border-right: 1px solid var(--rule-hair); }
.learn-tracker .inp-card:last-child { border-right: none; }
.learn-tracker .inp-num {
  font-family: var(--f-display); font-weight: 300; font-size: 2.6rem;
  letter-spacing: -0.04em; color: var(--bronze); line-height: 1; margin-bottom: 14px;
}
.learn-tracker .inp-title {
  font-family: var(--f-display); font-weight: 400; font-size: 1.12rem;
  letter-spacing: -0.005em; color: var(--ink); margin-bottom: 12px;
}
.learn-tracker .inp-body { font-size: 0.92rem; color: var(--ink-soft); line-height: 1.65; margin-bottom: 16px; }
.learn-tracker .inp-list {
  font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.12em;
  color: var(--ink-mute); text-transform: uppercase; line-height: 1.7;
}

/* Product callout + screenshot mockup */
.learn-tracker .product-callout { padding: 64px 0; background: var(--paper); border-bottom: 1px solid var(--rule); }
.learn-tracker .product-callout h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.0rem, 3.6vw, 2.8rem); letter-spacing: -0.022em; line-height: 1.1; margin: 14px 0 16px;
}
.learn-tracker .product-callout h2 em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn-tracker .product-callout p { font-size: 1.02rem; color: var(--ink-soft); line-height: 1.65; margin: 0 0 28px; max-width: 56ch; }
.learn-tracker .screenshot { margin-top: 44px; border: 1px solid var(--rule); background: var(--ivory); overflow: hidden; }
.learn-tracker .screenshot-inner { }
.learn-tracker .ss-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 22px; background: var(--ink); border-bottom: 1px solid rgba(252,248,241,0.1);
}
.learn-tracker .ss-brand {
  font-family: var(--f-display); font-weight: 400; font-size: 0.96rem;
  color: var(--ivory); letter-spacing: -0.005em;
}
.learn-tracker .ss-topbar .eyebrow { color: rgba(172,132,68,0.75); }
.learn-tracker .ss-grid { display: grid; grid-template-columns: 200px 1fr; }
.learn-tracker .ss-side {
  padding: 22px 20px; border-right: 1px solid var(--rule); background: var(--paper);
}
.learn-tracker .ss-navitem {
  font-size: 0.86rem; color: var(--ink-mute); padding: 8px 10px;
  cursor: default; border-radius: 2px;
}
.learn-tracker .ss-navitem.active { background: var(--bronze-wash); color: var(--ink); font-weight: 500; }
.learn-tracker .ss-main { padding: 24px 28px; }
.learn-tracker .ss-gate-mini { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 16px; }
.learn-tracker .ss-gate-mini > div .name { font-size: 0.78rem; color: var(--ink-mute); margin-bottom: 4px; }
.learn-tracker .ss-gate-mini > div .num {
  font-family: var(--f-display); font-weight: 300; font-size: 1.6rem;
  letter-spacing: -0.03em; color: var(--ink); line-height: 1; margin-bottom: 8px;
}
.learn-tracker .bar-mini {
  height: 3px; background: var(--rule); overflow: hidden;
}
.learn-tracker .bar-mini > div { height: 100%; }

/* AI assistant drawer */
.learn-tracker .assistant {
  position: fixed; right: -480px; top: 0; bottom: 0; width: 480px;
  background: var(--ivory); border-left: 1px solid var(--rule);
  display: flex; flex-direction: column; z-index: 100;
  transition: right 280ms cubic-bezier(0.22, 1, 0.36, 1);
}
.learn-tracker .assistant.open { right: 0; }
.learn-tracker .a-hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  padding: 20px 22px 16px; border-bottom: 1px solid var(--rule);
}
.learn-tracker .a-title {
  font-family: var(--f-display); font-weight: 300; font-size: 1.5rem;
  letter-spacing: -0.015em; color: var(--ink); margin-top: 4px;
}
.learn-tracker .a-title em { font-family: var(--f-editorial); font-style: italic; color: var(--bronze-deep); }
.learn-tracker .a-close {
  background: none; border: none; cursor: pointer; font-size: 1.4rem;
  color: var(--ink-mute); line-height: 1; padding: 4px;
}
.learn-tracker .a-close:hover { color: var(--ink); }
.learn-tracker .a-scope {
  padding: 14px 22px; background: var(--paper); border-bottom: 1px solid var(--rule);
}
.learn-tracker .a-scope-label {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  color: var(--bronze-deep); text-transform: uppercase; margin-bottom: 6px;
}
.learn-tracker .a-scope-body { font-size: 0.86rem; color: var(--ink-soft); line-height: 1.55; }
.learn-tracker .a-scope-body b { color: var(--ink); }
.learn-tracker .a-body {
  flex: 1; overflow-y: auto; padding: 20px 22px; display: flex;
  flex-direction: column; gap: 16px;
}
.learn-tracker .a-msg { display: flex; flex-direction: column; }
.learn-tracker .a-msg-user { align-items: flex-end; }
.learn-tracker .a-msg-bot { align-items: flex-start; }
.learn-tracker .a-bubble {
  max-width: 84%; padding: 12px 16px;
  font-size: 0.92rem; line-height: 1.6; color: var(--ink-soft);
}
.learn-tracker .a-msg-user .a-bubble { background: var(--ink); color: var(--ivory); }
.learn-tracker .a-msg-bot .a-bubble { background: var(--paper); border: 1px solid var(--rule); }
.learn-tracker .a-bubble p { margin: 0 0 10px; }
.learn-tracker .a-bubble p:last-child { margin-bottom: 0; }
.learn-tracker .a-foot { font-family: var(--f-mono); font-size: 0.64rem; letter-spacing: 0.1em; color: var(--ink-mute); text-transform: uppercase; margin-bottom: 10px; }
.learn-tracker .a-suggest { display: flex; flex-direction: column; gap: 6px; }
.learn-tracker .a-chip {
  display: block; text-align: left; background: var(--ivory); border: 1px solid var(--rule);
  padding: 8px 12px; font-size: 0.86rem; color: var(--ink-soft); cursor: pointer;
  transition: background 120ms ease, color 120ms ease;
}
.learn-tracker .a-chip:hover { background: var(--bronze-wash); color: var(--ink); }
.learn-tracker .a-cite { color: var(--bronze-deep); font-family: var(--f-mono); font-size: 0.82em; }
.learn-tracker .a-authority {
  margin: 8px 0; padding: 10px 14px; background: var(--ivory);
  border-left: 2px solid var(--bronze);
}
.learn-tracker .a-authority-label {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.14em;
  color: var(--bronze-deep); text-transform: uppercase; margin-bottom: 6px;
}
.learn-tracker .a-authority-quote { font-size: 0.88rem; color: var(--ink-soft); line-height: 1.55; }
.learn-tracker .a-thinking { display: flex; gap: 4px; align-items: center; padding: 6px 0; }
.learn-tracker .a-thinking span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--ink-mute);
  animation: think 1.2s infinite ease-in-out;
}
.learn-tracker .a-thinking span:nth-child(2) { animation-delay: 0.2s; }
.learn-tracker .a-thinking span:nth-child(3) { animation-delay: 0.4s; }
@keyframes think { 0%, 80%, 100% { transform: scale(0.7); opacity: 0.4; } 40% { transform: scale(1); opacity: 1; } }
.learn-tracker .a-compose { padding: 14px 22px; border-top: 1px solid var(--rule); background: var(--ivory); }
.learn-tracker .a-compose textarea {
  width: 100%; resize: none; border: 1px solid var(--rule); padding: 10px 14px;
  font-family: var(--f-body); font-size: 0.92rem; color: var(--ink);
  background: var(--paper); outline: none; line-height: 1.5;
}
.learn-tracker .a-compose textarea:focus { border-color: var(--bronze); }
.learn-tracker .a-compose-ft { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; }
.learn-tracker .a-hint { font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.1em; color: var(--ink-mute); text-transform: uppercase; }
.learn-tracker .a-send {
  background: var(--ink); color: var(--ivory); border: none; padding: 8px 16px;
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.1em; text-transform: uppercase;
  cursor: pointer; transition: background 160ms ease;
}
.learn-tracker .a-send:hover { background: #000; }
.learn-tracker .a-disclaimer {
  padding: 10px 22px; border-top: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.08em;
  color: var(--ink-mute); text-transform: uppercase;
}
.learn-tracker .a-scrim {
  display: none; position: fixed; inset: 0; background: rgba(20,20,19,0.4); z-index: 99;
}
.learn-tracker .assistant.open ~ .a-scrim { display: block; }

@media (max-width: 880px) {
  .learn .lead-grid,
  .learn .ts-chapter { grid-template-columns: 1fr; gap: 24px; }
  .learn .chapter-rail { grid-template-columns: 1fr 1fr; }
  .learn .nav-links { gap: 18px; }
  .learn .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .learn .hero-snapshot { order: -1; }
  .learn .credibility-grid { grid-template-columns: 1fr; gap: 40px; }
  .learn-ledger .argument-grid,
  .learn-ledger .dive-hd,
  .learn-ledger .dive-body,
  .learn-ledger .mtile-grid,
  .learn-ledger .inputs-grid,
  .learn-ledger .pools { grid-template-columns: 1fr 1fr; }
  .learn-ledger .argument-grid { grid-template-columns: 1fr; }
  .learn-ledger .mtile-grid { grid-template-columns: 1fr 1fr; }
  .learn-ledger .dive-hd { grid-template-columns: 1fr; gap: 16px; }
  .learn-ledger .dive-body { grid-template-columns: 1fr; gap: 36px; }
  .learn-ledger .inputs-grid { grid-template-columns: 1fr; }
  .learn-ledger .inputs-grid > div { border-right: none; border-bottom: 1px solid var(--rule-hair); }
  .learn-tracker .problem-grid,
  .learn-tracker .seven-grid { grid-template-columns: 1fr; gap: 36px; }
  .learn-tracker .gate-tiles { grid-template-columns: 1fr; }
  .learn-tracker .gt { border-right: none; }
  .learn-tracker .inputs-grid { grid-template-columns: 1fr; }
  .learn-tracker .inp-card { border-right: none; border-bottom: 1px solid var(--rule-hair); }
  .learn-tracker .ss-grid { grid-template-columns: 1fr; }
  .learn-tracker .ss-side { display: none; }
  .learn-tracker .ss-gate-mini { grid-template-columns: 1fr 1fr; }
  .learn-tracker .assistant { width: 100%; right: -100%; }
  .learn-tracker .seven-list { border: 1px solid var(--rule); }
  .learn-tracker .sv { grid-template-columns: 30px 1fr; }
  .learn-tracker .sv-posture { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   END PHASE 4b LEARN CHUNK
   ═══════════════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   STRVue · Phase 4c — public CSS append
   ───────────────────────────────────────────────────────────
   APPEND this entire file to app/static/css/public.css under a
   /* === Phase 4c === */ banner. Do not interleave with prior
   sections; nothing here overrides existing rules — every
   selector starts with .hv (the Phase 4c namespace) so it
   coexists with the legacy .lp- public chrome.
   ═══════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════
   STRVue — Phase 4c · Shared atoms for the public 9-page rethink
   Inherits from home-shared.css via .hv namespace.
   This chunk adds page-cluster namespaces and shared atoms only
   used in 4c pages. Append to public.css under 4c banner.
   ═══════════════════════════════════════════════════════════ */

/* ── Resources dropdown (nav addition for 4c) ───────────── */
.hv .nav-links .has-menu { position: relative; }
.hv .nav-links .has-menu > a { display: inline-flex; align-items: center; gap: 6px; cursor: default; }
.hv .nav-links .has-menu > a::after {
  content: ''; width: 0; height: 0;
  border-left: 3.5px solid transparent;
  border-right: 3.5px solid transparent;
  border-top: 4px solid currentColor;
  display: inline-block; opacity: 0.5;
  transform: translateY(1px);
}
.hv .nav-menu {
  position: absolute; top: calc(100% + 8px); left: 0;
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 18px 22px;
  width: 320px;
  display: grid; gap: 0;
  z-index: 50;
  box-shadow: 0 10px 32px rgba(20, 20, 19, 0.06);
}
.hv .nav-menu .nm-eyebrow {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-hair);
  margin-bottom: 6px;
}
.hv .nav-menu a {
  display: grid; grid-template-columns: auto 1fr;
  gap: 14px; padding: 12px 0; align-items: baseline;
  border-bottom: 1px solid var(--rule-hair);
}
.hv .nav-menu a:last-child { border-bottom: 0; }
.hv .nav-menu .nm-num {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  color: var(--bronze-deep); padding-top: 3px;
}
.hv .nav-menu .nm-title {
  font-family: var(--f-display); font-size: 1.02rem; font-weight: 400;
  letter-spacing: -0.005em; color: var(--ink); line-height: 1.25;
}
.hv .nav-menu .nm-sub {
  font-family: var(--f-body); font-size: 0.82rem; color: var(--ink-mute);
  margin-top: 2px; line-height: 1.4;
}
.hv .nav-menu a:hover .nm-title { color: var(--bronze-deep); }

/* ── Editorial masthead (shared by /about, /how-it-works,
   /cost-segregation-truth, /metrics, /demo) ─────────────── */
.hv .ed-masthead {
  padding: 40px 0 36px;
  border-bottom: 1px solid var(--rule);
}
.hv .ed-masthead > div {
  max-width: 68ch;
}
.hv .ed-masthead .em-issue {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hv .ed-masthead .em-issue .sep { margin: 0 10px; color: var(--rule); }
.hv .ed-masthead h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(3rem, 6vw, 5rem); letter-spacing: -0.038em;
  line-height: 0.96; margin: 22px 0 0; max-width: 22ch;
}
.hv .ed-masthead h1 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .ed-masthead .em-deck {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 1.4rem; line-height: 1.4; color: var(--ink-soft);
  margin: 22px 0 0; max-width: 56ch;
}
.hv .ed-masthead .em-meta {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--ink-mute); line-height: 1.7;
  border-left: 1px solid var(--rule); padding-left: 22px;
}
.hv .ed-masthead .em-meta .k { color: var(--ink-whisper); display: block; margin-bottom: 2px; }
.hv .ed-masthead .em-meta .v { color: var(--ink-soft); display: block; margin-bottom: 14px; }
.hv .ed-masthead .em-meta .v:last-child { margin-bottom: 0; }

/* ── Editorial body (long-form prose container) ────────── */
.hv .ed-body { padding: 44px 0 64px; }
.hv .ed-body .ed-col {
  max-width: 68ch; margin: 0 auto;
  font-family: var(--f-body); font-size: 1.04rem;
  line-height: 1.72; color: var(--ink-soft);
}
.hv .ed-body .ed-col p { margin: 0 0 1.4em; }
.hv .ed-body .ed-col p strong { color: var(--ink); font-weight: 500; }
.hv .ed-body .ed-col p em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .ed-body .ed-col h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 2rem; letter-spacing: -0.018em; line-height: 1.1;
  color: var(--ink); margin: 2.2em 0 0.7em;
}
.hv .ed-body .ed-col h2 .num {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--bronze-deep); display: block; margin-bottom: 10px;
  font-weight: 400; text-transform: uppercase;
}
.hv .ed-body .ed-col h3 {
  font-family: var(--f-display); font-weight: 500;
  font-size: 1.2rem; letter-spacing: -0.005em;
  color: var(--ink); margin: 2em 0 0.5em;
}
.hv .ed-body .ed-col .dropcap::first-letter {
  font-family: var(--f-display); font-weight: 400;
  font-size: 4.6rem; line-height: 0.9;
  float: left; padding: 6px 14px 0 0;
  color: var(--bronze-deep); letter-spacing: -0.04em;
}
.hv .ed-body .ed-col blockquote {
  margin: 1.6em 0; padding: 0 0 0 24px;
  border-left: 2px solid var(--bronze);
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 1.4rem; line-height: 1.45; color: var(--ink);
  font-weight: 400;
}
.hv .ed-body .ed-col blockquote cite {
  display: block; margin-top: 10px;
  font-family: var(--f-mono); font-style: normal;
  font-size: 0.72rem; letter-spacing: 0.1em; color: var(--ink-mute);
  text-transform: uppercase;
}
.hv .ed-body .ed-col ul, .hv .ed-body .ed-col ol {
  margin: 0 0 1.4em; padding: 0 0 0 1.2em;
}
.hv .ed-body .ed-col li { margin: 0 0 0.5em; }

.hv .ed-pull {
  margin: 56px auto; max-width: 38ch; text-align: center;
}
.hv .ed-pull p {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2.4rem; letter-spacing: -0.022em; line-height: 1.15;
  color: var(--ink); margin: 0;
}
.hv .ed-pull p em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .ed-pull .em-rule {
  width: 60px; height: 1px; background: var(--bronze);
  margin: 26px auto 0;
}

.hv .ed-foot {
  border-top: 1px solid var(--rule);
  padding-top: 28px; margin-top: 64px;
  font-family: var(--f-mono); font-size: 0.78rem;
  line-height: 1.7; color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.hv .ed-foot .ef-h {
  font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--bronze-deep); margin-bottom: 14px;
}
.hv .ed-foot ol { padding-left: 1.4em; margin: 0; }
.hv .ed-foot li { margin-bottom: 8px; }
.hv .ed-foot li::marker { color: var(--bronze-deep); }

/* ── FAQ (book-chapter accordion) ───────────────────────── */
.hv .faq { padding: 40px 0 64px; }
.hv .faq-item {
  border-top: 1px solid var(--rule-hair);
  padding: 28px 0;
  display: grid; grid-template-columns: 80px 1fr 40px;
  gap: 32px; align-items: start;
}
.hv .faq-item:last-of-type { border-bottom: 1px solid var(--rule-hair); }
.hv .faq-num {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--bronze-deep); padding-top: 8px;
}
.hv .faq-q {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.5rem; letter-spacing: -0.012em; line-height: 1.2;
  color: var(--ink); margin: 0; cursor: pointer;
}
.hv .faq-q em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep);
}
.hv .faq-a {
  margin-top: 16px; max-width: 62ch;
  font-size: 1rem; line-height: 1.65; color: var(--ink-soft);
}
.hv .faq-a p { margin: 0 0 1em; }
.hv .faq-a p:last-child { margin: 0; }
.hv .faq-mark {
  width: 22px; height: 22px;
  font-family: var(--f-mono); font-size: 1.2rem;
  color: var(--bronze-deep); line-height: 1;
  display: grid; place-items: center; padding-top: 6px;
}

.hv .faq-toc {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border: 1px solid var(--rule);
  background: var(--paper); margin-bottom: 56px;
}
.hv .faq-toc .toc-cat {
  padding: 22px 26px;
  border-right: 1px solid var(--rule-hair);
}
.hv .faq-toc .toc-cat:last-child { border-right: 0; }
.hv .faq-toc .toc-k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--bronze-deep); text-transform: uppercase;
  padding-bottom: 10px; border-bottom: 1px solid var(--rule-hair);
  margin-bottom: 12px;
}
.hv .faq-toc a {
  display: block; padding: 6px 0; font-size: 0.92rem;
  color: var(--ink-soft); line-height: 1.45;
  border-bottom: 1px solid transparent;
}
.hv .faq-toc a:hover { color: var(--ink); }
.hv .faq-toc .toc-num {
  font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-whisper);
  margin-right: 10px; letter-spacing: 0.06em;
}

/* ── Knowledge base (publication index) ──────────────────── */
.hv .kb { padding: 40px 0 64px; }
.hv .kb-issue {
  display: grid; grid-template-columns: 1fr auto;
  align-items: end; padding-bottom: 28px;
  border-bottom: 1px solid var(--rule); margin-bottom: 56px;
}
.hv .kb-issue h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: 4.4rem; letter-spacing: -0.038em; line-height: 0.95;
  margin: 14px 0 0;
}
.hv .kb-issue h1 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .kb-issue .kb-meta {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.08em;
  color: var(--ink-mute); text-align: right; line-height: 1.8;
}
.hv .kb-issue .kb-meta b { color: var(--bronze-deep); font-weight: 500; }
.hv .kb-issue .kb-meta .row { display: flex; gap: 14px; justify-content: flex-end; }

.hv .kb-stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule);
  background: var(--ivory);
  margin-bottom: 56px;
}
.hv .kb-stat {
  padding: 28px 32px;
  border-right: 1px solid var(--rule-hair);
}
.hv .kb-stat:last-child { border-right: 0; }
.hv .kb-stat .ks-k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px;
}
.hv .kb-stat .ks-v {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
}
.hv .kb-stat .ks-d {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.95rem; margin-top: 8px;
}

.hv .kb-search {
  display: grid; grid-template-columns: 1fr auto;
  border: 1px solid var(--rule); background: var(--ivory);
  margin-bottom: 40px;
}
.hv .kb-search input {
  font-family: var(--f-body); font-size: 1.02rem;
  padding: 16px 22px; border: 0; background: transparent; outline: none;
  color: var(--ink);
}
.hv .kb-search input::placeholder { color: var(--ink-whisper); }
.hv .kb-search .ks-side {
  padding: 16px 22px; border-left: 1px solid var(--rule);
  background: var(--paper);
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--ink-mute); display: flex; align-items: center;
}

.hv .kb-section { margin-bottom: 56px; }
.hv .kb-section-h {
  display: grid; grid-template-columns: auto 1fr auto; gap: 24px;
  align-items: baseline;
  padding-bottom: 14px; border-bottom: 1px solid var(--rule);
  margin-bottom: 0;
}
.hv .kb-section-h .num {
  font-family: var(--f-display); font-weight: 300;
  font-size: 1.6rem; color: var(--bronze-deep); letter-spacing: -0.02em;
}
.hv .kb-section-h .name {
  font-family: var(--f-display); font-weight: 400; font-size: 1.6rem;
  letter-spacing: -0.012em; color: var(--ink);
}
.hv .kb-section-h .count {
  font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-mute);
  letter-spacing: 0.06em;
}
.hv .kb-entry {
  display: grid; grid-template-columns: 100px 1fr 200px 80px;
  gap: 32px; padding: 22px 0; align-items: baseline;
  border-bottom: 1px solid var(--rule-hair);
}
.hv .kb-entry .ke-id {
  font-family: var(--f-mono); font-size: 0.78rem; color: var(--bronze-deep);
  letter-spacing: 0.06em;
}
.hv .kb-entry .ke-title {
  font-family: var(--f-display); font-weight: 400; font-size: 1.1rem;
  letter-spacing: -0.005em; color: var(--ink); line-height: 1.25;
}
.hv .kb-entry .ke-title em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep);
}
.hv .kb-entry .ke-sub {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.95rem; margin-top: 4px;
}
.hv .kb-entry .ke-cite {
  font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-mute);
  letter-spacing: 0.02em; line-height: 1.45;
}
.hv .kb-entry .ke-arr {
  font-family: var(--f-display); font-size: 1.4rem; color: var(--ink-mute);
  text-align: right; transition: color 140ms ease, transform 160ms ease;
}
.hv .kb-entry:hover .ke-arr { color: var(--bronze-deep); transform: translateX(4px); }

.hv .kb-changelog {
  background: var(--paper); border: 1px solid var(--rule);
  padding: 32px 36px;
}
.hv .kb-changelog h3 {
  font-family: var(--f-display); font-weight: 400; font-size: 1.5rem;
  letter-spacing: -0.012em; margin: 0 0 4px;
}
.hv .kb-changelog .cl-row {
  display: grid; grid-template-columns: 110px auto 1fr; gap: 20px;
  padding: 14px 0; border-bottom: 1px solid var(--rule-hair);
  font-size: 0.92rem; line-height: 1.5;
  align-items: baseline;
}
.hv .kb-changelog .cl-row:last-child { border-bottom: 0; }
.hv .kb-changelog .cl-date {
  font-family: var(--f-mono); font-size: 0.74rem; color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.hv .kb-changelog .cl-tag {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--bronze-deep);
  padding: 2px 8px; border: 1px solid var(--rule); background: var(--ivory);
  justify-self: start;
}
.hv .kb-changelog .cl-tag.fix { color: var(--positive); border-color: rgba(46,111,64,0.35); background: var(--positive-bg); }
.hv .kb-changelog .cl-tag.add { color: var(--bronze-deep); }
.hv .kb-changelog .cl-tag.note { color: var(--ink-mute); }
.hv .kb-changelog .cl-text { color: var(--ink-soft); }
.hv .kb-changelog .cl-text b { color: var(--ink); font-weight: 500; }

/* ═══════════════════════════════════════════════════════════
   /metrics — REWRITTEN as public methodology surface (.met2)
   4 layers · what-it-measures + what-decision-it-informs
   + WCR section · matches the repo template structure.
   ═══════════════════════════════════════════════════════════ */
.hv .met2 { padding: 40px 0 64px; }
.hv .met-layer { margin-bottom: 64px; }
.hv .met-layer .ml-head {
  display: grid; grid-template-columns: auto auto 1fr; gap: 22px;
  align-items: baseline;
  padding-bottom: 16px; border-bottom: 2px solid var(--rule);
  margin-bottom: 0;
}
.hv .met-layer .ml-num {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-deep);
}
.hv .met-layer .ml-name {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2.4rem; letter-spacing: -0.026em; color: var(--ink);
  line-height: 1;
}
.hv .met-layer .ml-sub {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 1.05rem; line-height: 1.4;
  text-align: right;
}
.hv .met-layer .ml-table {
  border: 1px solid var(--rule); border-top: 0;
  background: var(--ivory);
}
.hv .met-layer .ml-hd {
  display: grid; grid-template-columns: 220px 1fr 1fr;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hv .met-layer .ml-hd > div {
  padding: 14px 22px; border-right: 1px solid var(--rule-hair);
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hv .met-layer .ml-hd > div:last-child { border-right: 0; }
.hv .met-layer .ml-row {
  display: grid; grid-template-columns: 220px 1fr 1fr;
  border-bottom: 1px solid var(--rule-hair);
}
.hv .met-layer .ml-row:last-child { border-bottom: 0; }
.hv .met-layer .ml-row > div {
  padding: 22px; border-right: 1px solid var(--rule-hair);
}
.hv .met-layer .ml-row > div:last-child { border-right: 0; }
.hv .met-layer .mr-id {
  background: var(--paper);
}
.hv .met-layer .mr-id .id-tag {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--bronze-deep); margin-bottom: 6px;
}
.hv .met-layer .mr-id .id-name {
  font-family: var(--f-display); font-weight: 400; font-size: 1.05rem;
  letter-spacing: -0.005em; color: var(--ink); line-height: 1.25;
}
.hv .met-layer .mr-what,
.hv .met-layer .mr-dec {
  font-family: var(--f-body); font-size: 0.92rem; line-height: 1.55;
  color: var(--ink-soft);
}

/* WCR — synthesis section */
.hv .wcr {
  margin-top: 80px;
  background: var(--paper); border: 1px solid var(--rule);
  padding: 48px 52px 52px;
}
.hv .wcr-head .em-issue {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bronze-deep);
}
.hv .wcr-head h2 {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2.6rem; letter-spacing: -0.028em; line-height: 1.05;
  margin: 14px 0 0; color: var(--ink);
}
.hv .wcr-head h2 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .wcr-deck {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 1.08rem; line-height: 1.5; color: var(--ink-soft);
  margin: 18px 0 32px; max-width: 64ch;
}
.hv .wcr-grades {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border: 1px solid var(--rule); background: var(--ivory);
  margin-bottom: 32px;
}
.hv .wcr-grades .wg {
  padding: 22px 18px;
  border-right: 1px solid var(--rule-hair);
}
.hv .wcr-grades .wg:last-child { border-right: 0; }
.hv .wcr-grades .wg.on { background: var(--paper); }
.hv .wcr-grades .wg-l {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2.4rem; line-height: 1; letter-spacing: -0.04em;
  color: var(--bronze-deep); margin-bottom: 10px;
}
.hv .wcr-grades .wg.on .wg-l { color: var(--ink); }
.hv .wcr-grades .wg-h {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.9rem; line-height: 1.4;
}
.hv .wcr-drivers {
  display: grid; grid-template-columns: 120px repeat(4, 1fr);
  gap: 0; border: 1px solid var(--rule); background: var(--ivory);
}
.hv .wcr-drivers .wd-h {
  padding: 18px 22px; border-right: 1px solid var(--rule-hair);
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
  display: flex; align-items: center;
  background: var(--paper);
}
.hv .wcr-drivers .wd-row {
  padding: 18px 22px; border-right: 1px solid var(--rule-hair);
  display: flex; align-items: center; gap: 10px;
  font-size: 0.92rem; color: var(--ink-soft); line-height: 1.4;
}
.hv .wcr-drivers .wd-row:last-child { border-right: 0; }
.hv .wcr-drivers .check { color: var(--bronze-deep); font-weight: 600; }

.hv .met-final {
  margin-top: 80px;
  text-align: center;
}
.hv .met-final h3 {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2.4rem; letter-spacing: -0.028em; line-height: 1.05;
  margin: 0 0 14px;
}
.hv .met-final h3 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .met-final p {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 1.1rem; color: var(--ink-soft); max-width: 56ch;
  margin: 0 auto; line-height: 1.5;
}
.hv .met-final .ctas {
  margin-top: 28px; display: flex; gap: 14px; justify-content: center;
}

/* ═══════════════════════════════════════════════════════════
   /demo — REWRITTEN as sample report (not retired).
   Editorial sample with metric strip + depreciation schedule
   + "what's not in this preview" prose. Matches repo content.
   ═══════════════════════════════════════════════════════════ */
.hv .dem { padding: 40px 0 64px; }

.hv .dem-stamp {
  display: grid; grid-template-columns: auto 1fr; gap: 22px;
  align-items: center; padding: 16px 22px;
  background: var(--paper); border: 1px solid var(--rule);
  border-left: 3px solid var(--bronze);
  margin-bottom: 40px;
}
.hv .dem-stamp .sw {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bronze-deep);
  padding: 4px 12px; border: 1px solid var(--bronze);
  background: var(--ivory);
}
.hv .dem-stamp .sd {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.96rem; line-height: 1.4;
}

.hv .dem-metrics {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--rule); background: var(--ivory);
  margin-bottom: 40px;
}
.hv .dem-metrics .dm-cell {
  padding: 28px 26px;
  border-right: 1px solid var(--rule-hair);
}
.hv .dem-metrics .dm-cell:last-child { border-right: 0; }
.hv .dem-metrics .dm-k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px;
}
.hv .dem-metrics .dm-v {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2.6rem; line-height: 1; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hv .dem-metrics .dm-s {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.95rem; margin-top: 10px;
}

.hv .dem-table {
  border: 1px solid var(--rule); background: var(--ivory);
  margin-bottom: 40px;
}
.hv .dem-table .dt-head {
  display: grid; grid-template-columns: auto auto 1fr; gap: 18px;
  padding: 16px 22px; background: var(--paper);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.hv .dem-table .dt-tag {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-deep);
}
.hv .dem-table .dt-name {
  font-family: var(--f-display); font-weight: 400; font-size: 1.15rem;
  letter-spacing: -0.008em; color: var(--ink);
}
.hv .dem-table .dt-meta {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.92rem; text-align: right;
}
.hv .dem-table table {
  width: 100%; border-collapse: collapse;
}
.hv .dem-table th, .hv .dem-table td {
  padding: 14px 22px; text-align: left;
  border-bottom: 1px solid var(--rule-hair);
  font-family: var(--f-body); font-size: 0.95rem; color: var(--ink-soft);
}
.hv .dem-table th {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 400;
}
.hv .dem-table td.num, .hv .dem-table th.num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: var(--f-mono); font-size: 0.92rem;
}
.hv .dem-table td.strong { color: var(--ink); font-weight: 500; }
.hv .dem-table td.mute { color: var(--ink-mute); }
.hv .dem-table tr.total td {
  background: var(--paper); border-top: 2px solid var(--rule);
  font-weight: 500;
}

.hv .dem-note {
  background: var(--paper); border: 1px solid var(--rule);
  padding: 32px 36px; margin-bottom: 40px;
}
.hv .dem-note .dn-h {
  font-family: var(--f-display); font-weight: 400; font-size: 1.4rem;
  letter-spacing: -0.012em; color: var(--ink); margin-bottom: 16px;
}
.hv .dem-note .dn-h em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep);
}
.hv .dem-note ul {
  margin: 0; padding-left: 1.4em;
  font-size: 0.96rem; line-height: 1.65; color: var(--ink-soft);
}
.hv .dem-note li { margin-bottom: 0.6em; }
.hv .dem-note li::marker { color: var(--bronze-deep); }

.hv .dem-ctas {
  display: flex; gap: 14px; justify-content: center;
  padding-top: 8px;
}

/* ═══════════════════════════════════════════════════════════
   /cpa-sample — Sticky email gate + preview tiles.
   Form contract: action="/cpa-sample/reveal" first_name+email.
   ═══════════════════════════════════════════════════════════ */
.hv .cpa { padding: 40px 0 64px; }
.hv .cpa-grid {
  display: grid; grid-template-columns: 1.05fr 1fr;
  gap: 72px; align-items: start;
}
.hv .cpa-left h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: 3.6rem; letter-spacing: -0.035em; line-height: 0.98;
  margin: 18px 0 0; max-width: 16ch;
}
.hv .cpa-left h1 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .cpa-left .deck {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 1.2rem; color: var(--ink-soft); margin: 22px 0 0;
  max-width: 50ch; line-height: 1.45;
}
.hv .cpa-left .body {
  margin-top: 34px; padding-top: 28px;
  border-top: 1px solid var(--rule);
  font-size: 1rem; color: var(--ink-soft); line-height: 1.7;
  max-width: 52ch;
}
.hv .cpa-left .body p { margin: 0 0 1.1em; }
.hv .cpa-left .body p strong { color: var(--ink); font-weight: 500; }

/* Preview of metric tiles that appear after reveal */
.hv .cpa-preview {
  margin-top: 32px;
  border: 1px solid var(--rule); background: var(--ivory);
}
.hv .cpa-preview .cp-head {
  padding: 14px 22px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
  line-height: 1.4;
}
.hv .cpa-preview .cp-head em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); text-transform: none; letter-spacing: 0;
  font-size: 0.9rem;
}
.hv .cpa-preview .cp-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
}
.hv .cpa-preview .cp-cell {
  padding: 18px 22px;
  border-right: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
}
.hv .cpa-preview .cp-cell:nth-child(2n) { border-right: 0; }
.hv .cpa-preview .cp-cell:nth-last-child(-n+2) { border-bottom: 0; }
.hv .cpa-preview .cp-k {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px;
}
.hv .cpa-preview .cp-v {
  font-family: var(--f-display); font-weight: 400; font-size: 1.4rem;
  color: var(--ink); letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
}
.hv .cpa-preview .cp-v.blurred {
  filter: blur(6px) saturate(0.4);
  opacity: 0.55; user-select: none;
}
.hv .cpa-preview .cp-foot {
  padding: 12px 22px;
  border-top: 1px solid var(--rule);
  background: var(--paper);
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.88rem;
}

.hv .cpa-gate {
  background: var(--paper); border: 1px solid var(--rule);
  padding: 36px 40px 40px; position: sticky; top: 24px;
}
.hv .cpa-gate .gate-tag {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-deep);
}
.hv .cpa-gate h2 {
  font-family: var(--f-display); font-weight: 400; font-size: 1.7rem;
  letter-spacing: -0.015em; margin: 12px 0 6px; line-height: 1.15;
}
.hv .cpa-gate h2 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep);
}
.hv .cpa-gate .gate-sub {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 1rem;
}
.hv .cpa-gate form {
  margin-top: 22px; padding-top: 22px;
  border-top: 1px solid var(--rule-hair);
}
.hv .cpa-gate label {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
  display: block; margin-bottom: 8px;
}
.hv .cpa-gate input[type="text"],
.hv .cpa-gate input[type="email"] {
  width: 100%; box-sizing: border-box;
  font-family: var(--f-body); font-size: 1rem;
  padding: 14px 16px; background: var(--ivory);
  color: var(--ink); border: 1px solid var(--rule);
  outline: none; transition: border-color 140ms ease;
  margin-bottom: 18px;
}
.hv .cpa-gate input:focus { border-color: var(--bronze-deep); }
.hv .cpa-gate .gate-cta {
  width: 100%; justify-content: center;
}
.hv .cpa-gate .legal {
  margin-top: 16px;
  font-family: var(--f-mono); font-size: 0.7rem; color: var(--ink-mute);
  line-height: 1.65; letter-spacing: 0.02em;
}
.hv .cpa-gate .legal i {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-size: 1.05em;
}

/* ═══════════════════════════════════════════════════════════
   /analyze — REWRITTEN as 3-stage gated tool.
   Stage 1 form (7 fields) → Stage 2 free headline + email gate
   → Stage 3 (JS-injected) full preview + comparison + paywall.
   Backend contract: name= attrs match conversion_tool.html.
   ═══════════════════════════════════════════════════════════ */
.hv .ana { padding: 36px 0 64px; }

.hv .ana-head {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 56px; align-items: end;
  padding-bottom: 36px; border-bottom: 1px solid var(--rule);
  margin-bottom: 40px;
}
.hv .ana-head h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: 3.6rem; letter-spacing: -0.038em; line-height: 0.98;
  margin: 14px 0 0; max-width: 18ch;
}
.hv .ana-head h1 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .ana-head .deck {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 1.18rem; color: var(--ink-soft); margin: 18px 0 0;
  max-width: 52ch; line-height: 1.45;
}
.hv .ana-head .meta {
  border-left: 1px solid var(--rule); padding-left: 22px;
  font-family: var(--f-mono); font-size: 0.72rem; line-height: 1.85;
  color: var(--ink-mute);
}
.hv .ana-head .meta b { color: var(--ink); font-weight: 500; }

/* 3-stage strip */
.hv .ana-steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule); background: var(--ivory);
  margin-bottom: 36px;
}
.hv .ana-step {
  padding: 18px 22px;
  border-right: 1px solid var(--rule-hair);
  display: flex; gap: 14px; align-items: center;
}
.hv .ana-step:last-child { border-right: 0; }
.hv .ana-step.on { background: var(--paper); }
.hv .ana-step .num {
  font-family: var(--f-display); font-weight: 300;
  font-size: 1.6rem; color: var(--bronze-deep); line-height: 1;
  letter-spacing: -0.02em;
}
.hv .ana-step .lbl {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  color: var(--ink-soft); text-transform: uppercase;
  line-height: 1.4;
}
.hv .ana-step.on .lbl { color: var(--ink); }

/* Stage container — full-width sections, not sidebar layout */
.hv .ana-stage {
  border: 1px solid var(--rule); background: var(--ivory);
  margin-bottom: 28px;
}
.hv .ana-stage.stage-pending { opacity: 0.55; }
.hv .ana-stage .stage-head {
  display: grid; grid-template-columns: auto auto 1fr auto; gap: 18px;
  padding: 18px 28px; background: var(--paper);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}
.hv .ana-stage .stage-head .sn {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-deep);
}
.hv .ana-stage .stage-head .st {
  font-family: var(--f-display); font-weight: 400; font-size: 1.3rem;
  letter-spacing: -0.012em; color: var(--ink);
}
.hv .ana-stage .stage-head .sd {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.96rem;
}
.hv .ana-stage .stage-head .sd-tag {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bronze-deep);
  padding: 4px 10px; border: 1px solid var(--bronze);
  background: var(--ivory);
}

/* Stage 1 form — 2-col grid of labelled rows */
.hv .ana-form-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  padding: 0;
}
.hv .ana-form-grid .ana-row2 {
  padding: 22px 28px;
  border-right: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
}
.hv .ana-form-grid .ana-row2:nth-child(2n) { border-right: 0; }
.hv .ana-form-grid .ana-row2.span2 {
  grid-column: span 2; border-right: 0;
}
.hv .ana-form-grid .ana-row2 .label {
  font-family: var(--f-body); font-size: 0.95rem; color: var(--ink);
  font-weight: 500; line-height: 1.35; margin-bottom: 10px;
}
.hv .ana-form-grid .ana-row2 .label .req { color: var(--ember); margin-left: 3px; }
.hv .ana-form-grid .ana-row2 .label .hint {
  display: block;
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 0.92rem; color: var(--ink-mute); font-weight: 400;
  margin-top: 4px; line-height: 1.4;
}
.hv .ana-form-grid input[type="text"],
.hv .ana-form-grid input[type="number"],
.hv .ana-form-grid input[type="email"],
.hv .ana-form-grid select {
  width: 100%; box-sizing: border-box;
  font-family: var(--f-mono); font-size: 1rem;
  padding: 12px 14px; background: var(--ivory);
  color: var(--ink); border: 1px solid var(--rule);
  outline: none; transition: border-color 140ms ease;
  font-variant-numeric: tabular-nums;
}
.hv .ana-form-grid input:focus, .hv .ana-form-grid select:focus { border-color: var(--bronze-deep); }
.hv .ana-form-grid .input-prefix {
  display: grid; grid-template-columns: auto 1fr; align-items: stretch;
  border: 1px solid var(--rule); background: var(--ivory);
}
.hv .ana-form-grid .input-prefix .pre {
  padding: 12px 14px;
  font-family: var(--f-mono); font-size: 0.92rem; color: var(--ink-mute);
  background: var(--paper); border-right: 1px solid var(--rule);
}
.hv .ana-form-grid .input-prefix input {
  border: 0; padding-left: 14px; background: transparent;
}

.hv .ana-submit-row {
  padding: 22px 28px;
  display: grid; grid-template-columns: 1fr auto; gap: 28px;
  align-items: center;
  border-top: 1px solid var(--rule);
  background: var(--paper);
}
.hv .ana-submit-row .legal-mini {
  font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-mute);
  line-height: 1.55; max-width: 56ch;
}
.hv .ana-submit-row .legal-mini i {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-size: 1.05em;
}

/* Stage 2 — free headline + peek + email gate */
.hv .ana-stage .banner-est {
  display: grid; grid-template-columns: auto 1fr; gap: 12px;
  align-items: center;
  padding: 14px 28px;
  background: var(--paper); border-bottom: 1px solid var(--rule-hair);
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.96rem;
}
.hv .ana-stage .banner-est .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--bronze); display: inline-block;
}

.hv .ana-headline {
  padding: 48px 28px 32px; text-align: center;
}
.hv .ana-headline .hl-tag {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 18px;
}
.hv .ana-headline .hl-value {
  font-family: var(--f-display); font-weight: 300;
  font-size: 5rem; line-height: 1; letter-spacing: -0.04em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hv .ana-headline .hl-est {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-size: 1rem; margin-top: 10px;
}
.hv .ana-headline .hl-cap {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 1.05rem; line-height: 1.5;
  max-width: 56ch; margin: 18px auto 0;
}

.hv .cred-strip {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
  background: var(--paper);
}
.hv .cred-strip .cred {
  padding: 14px 22px;
  border-right: 1px solid var(--rule-hair);
  font-family: var(--f-mono); font-size: 0.8rem; color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.hv .cred-strip .cred:last-child { border-right: 0; }

.hv .ana-gate {
  padding: 36px 32px 32px;
}
.hv .ana-gate .gate-h {
  font-family: var(--f-display); font-weight: 400; font-size: 1.6rem;
  letter-spacing: -0.014em; color: var(--ink); text-align: center;
  margin-bottom: 6px;
}
.hv .ana-gate .gate-h em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep);
}
.hv .ana-gate .gate-s {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 1.04rem; line-height: 1.45;
  text-align: center; max-width: 60ch; margin: 0 auto 28px;
}

.hv .peek {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule); background: var(--ivory);
  margin-bottom: 28px;
}
.hv .peek .peek-cell {
  padding: 22px 24px;
  border-right: 1px solid var(--rule-hair);
  position: relative;
}
.hv .peek .peek-cell:last-child { border-right: 0; }
.hv .peek .peek-cell .pc-k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 12px;
}
.hv .peek .peek-cell .pc-v {
  font-family: var(--f-display); font-weight: 300;
  font-size: 1.8rem; line-height: 1; letter-spacing: -0.026em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hv .peek .peek-cell .pc-s {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.9rem; margin-top: 8px;
}
.hv .peek .peek-cell.blurred {
  background: var(--paper);
}
.hv .peek .peek-cell.blurred .pc-v {
  filter: blur(6px) saturate(0.4); user-select: none;
}
.hv .peek .peek-cell.blurred .pc-s {
  filter: blur(4px); user-select: none;
}
.hv .peek .peek-cell .pc-lock {
  position: absolute; top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  display: none;
}
.hv .peek .peek-cell.blurred .pc-lock {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid var(--bronze);
  background: var(--ivory);
  font-family: var(--f-mono); font-size: 0.7rem;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--bronze-deep);
}

.hv .email-row {
  display: grid; grid-template-columns: 1fr auto;
  border: 1px solid var(--rule); background: var(--ivory);
}
.hv .email-row input[type="email"] {
  font-family: var(--f-body); font-size: 1.04rem;
  padding: 16px 22px; border: 0; background: transparent;
  outline: none; color: var(--ink);
}
.hv .email-row .btn {
  border-radius: 0; border-left: 1px solid var(--rule);
}

.hv .gate-note {
  margin-top: 14px; text-align: center;
  font-family: var(--f-mono); font-size: 0.72rem; color: var(--ink-mute);
  letter-spacing: 0.04em;
}
.hv .gate-note i {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-size: 1.05em;
}

/* Stage 3 — full preview + comparison + paywall */
.hv .metric-preview {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--ivory);
}
.hv .metric-preview .mp-cell {
  padding: 28px 26px;
  border-right: 1px solid var(--rule-hair);
  position: relative;
}
.hv .metric-preview .mp-cell:last-child { border-right: 0; }
.hv .metric-preview .mp-cell.positive {
  background: var(--paper);
  border-top: 3px solid var(--bronze);
  margin-top: -1px;
}
.hv .metric-preview .mp-k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px;
}
.hv .metric-preview .mp-v {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hv .metric-preview .mp-s {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.95rem; margin: 8px 0 12px;
}
.hv .metric-preview .mp-est {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bronze-deep);
}

.hv .locked-wall {
  padding: 40px 32px 36px;
  border-top: 1px solid var(--rule);
}
.hv .locked-wall h3 {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2rem; letter-spacing: -0.022em; line-height: 1.1;
  color: var(--ink); margin: 0 0 12px;
}
.hv .locked-wall h3 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .locked-wall p {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-soft); font-size: 1.08rem; line-height: 1.5;
  max-width: 64ch; margin: 0 0 28px;
}

.hv .compare {
  width: 100%; border-collapse: collapse;
  margin-bottom: 28px;
  border: 1px solid var(--rule);
  background: var(--ivory);
}
.hv .compare th, .hv .compare td {
  padding: 14px 22px; text-align: left;
  border-bottom: 1px solid var(--rule-hair);
  font-size: 0.94rem; color: var(--ink-soft);
}
.hv .compare th {
  background: var(--paper);
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 400;
  text-align: center;
}
.hv .compare th:first-child { text-align: left; }
.hv .compare th .ch {
  display: inline-block; padding: 4px 10px;
  border: 1px solid var(--rule); background: var(--ivory);
  letter-spacing: 0.08em;
}
.hv .compare th .ch-paid {
  border-color: var(--bronze); color: var(--bronze-deep);
}
.hv .compare td:nth-child(2),
.hv .compare td:nth-child(3) {
  text-align: center;
  font-family: var(--f-mono); font-size: 1rem;
  color: var(--ink-mute);
}
.hv .compare tr.hl td { background: rgba(138, 106, 54, 0.04); }
.hv .compare tr.hl td:nth-child(3) {
  color: var(--bronze-deep); font-weight: 500;
}

.hv .upgrade {
  text-align: center; margin-bottom: 22px;
}

.hv .why-real {
  padding: 18px 22px;
  background: var(--paper); border-left: 3px solid var(--bronze);
  font-family: var(--f-body); font-size: 0.94rem; line-height: 1.6;
  color: var(--ink-soft);
}
.hv .why-real strong { color: var(--ink); font-weight: 500; }

/* Trust bar — bottom of /analyze */
.hv .ana-trust {
  margin-top: 40px;
  padding: 28px 32px;
  background: var(--paper); border: 1px solid var(--rule);
}
.hv .ana-trust .tb-k {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bronze-deep);
  margin-bottom: 14px;
}
.hv .ana-trust .tb-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 0;
}
.hv .ana-trust .tb-row span {
  font-family: var(--f-mono); font-size: 0.8rem; color: var(--ink-soft);
  letter-spacing: 0.04em; line-height: 1.4;
}


/* ═══════════════════════════════════════════════════════════
   Phase 4c · Nav (.nav.nav-4c) + Footer (.foot.foot-4c)
   These selectors back the partials components/nav-public-4c.html
   and components/footer-public-4c.html. Independent of the
   legacy .lp-nav / .lp-mobile-menu chrome.
   ═══════════════════════════════════════════════════════════ */

/* ── Nav bar ─────────────────────────────────────────────── */
.nav.nav-4c {
  display: grid; grid-template-columns: auto 1fr auto auto;
  align-items: center; gap: 32px;
  padding: 22px 32px;
  border-bottom: 1px solid var(--rule);
  background: var(--ivory);
  position: relative; z-index: 100;
}
.nav.nav-4c .nav-wm .nav-logo-link {
  text-decoration: none; color: inherit;
  display: inline-flex; align-items: center;
}
.nav.nav-4c .nav-logo {
  font-family: var(--f-display); font-size: 1.5rem; font-weight: 400;
  letter-spacing: -0.012em; color: var(--ink); line-height: 1;
}
.nav.nav-4c .nav-logo-accent { color: var(--bronze-deep); }
.nav.nav-4c .nav-logo-img { height: 48px; display: block; }

.nav.nav-4c .nav-links .has-menu { position: relative; }

.nav.nav-4c .nav-links {
  display: flex; align-items: center; gap: 32px;
  justify-self: center;
}
.nav.nav-4c .nav-links > a,
.nav.nav-4c .nav-links .has-menu > a {
  font-family: var(--f-mono); font-size: 0.78rem;
  letter-spacing: 0.06em; color: var(--ink-soft);
  text-decoration: none; padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.nav.nav-4c .nav-links > a:hover,
.nav.nav-4c .nav-links .has-menu > a:hover {
  color: var(--ink);
}
.nav.nav-4c .nav-links > a.on,
.nav.nav-4c .nav-links .has-menu > a.on {
  color: var(--ink); border-bottom-color: var(--bronze);
}
.nav.nav-4c .nav-links .has-menu > a .caret {
  font-size: 0.7rem; opacity: 0.55; margin-left: 2px;
}

/* Dropdown opens on hover (desktop) and on focus-within (keyboard/tap). */
.nav.nav-4c .nav-links .has-menu > .nav-menu { display: none; }
.nav.nav-4c .nav-links .has-menu:hover > .nav-menu,
.nav.nav-4c .nav-links .has-menu:focus-within > .nav-menu {
  display: grid;
}
.nav.nav-4c .nav-menu .nm-foot {
  display: flex; gap: 18px; padding-top: 14px;
  border-top: 1px solid var(--rule-hair);
  margin-top: 4px;
}
.nav.nav-4c .nav-menu .nm-foot-link {
  display: inline; padding: 0; border: 0;
  font-family: var(--f-mono); font-size: 0.72rem;
  letter-spacing: 0.1em; color: var(--bronze-deep);
}
.nav.nav-4c .nav-menu .nm-foot-link:hover { color: var(--ink); }

.nav.nav-4c .nav-cta {
  display: flex; gap: 10px; align-items: center;
}

/* Mobile burger */
.nav.nav-4c .nav-burger {
  display: none;
  background: transparent; border: 0; cursor: pointer;
  padding: 8px; margin-left: 8px;
}
.nav.nav-4c .nav-burger span {
  display: block; width: 24px; height: 1.5px;
  background: var(--ink); margin: 5px 0;
  transition: transform 180ms ease, opacity 180ms ease;
}
.nav.nav-4c .nav-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav.nav-4c .nav-burger.open span:nth-child(2) { opacity: 0; }
.nav.nav-4c .nav-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

.nav-mobile {
  display: none;
  background: var(--ivory);
  border-bottom: 1px solid var(--rule);
  padding: 14px 32px 24px;
}
.nav-mobile.open { display: block; }
.nav-mobile a {
  display: block; padding: 12px 0;
  font-family: var(--f-mono); font-size: 0.86rem;
  letter-spacing: 0.06em; color: var(--ink-soft);
  border-bottom: 1px solid var(--rule-hair);
  text-decoration: none;
}
.nav-mobile a.on { color: var(--ink); }
.nav-mobile a.nav-mobile-resource { padding-left: 14px; font-size: 0.82rem; }
.nav-mobile a.nav-mobile-resource .nm-num {
  font-family: var(--f-mono); font-size: 0.66rem;
  color: var(--bronze-deep); margin-right: 10px;
  letter-spacing: 0.1em;
}
.nav-mobile .nav-mobile-section {
  padding: 18px 0 6px;
  font-family: var(--f-mono); font-size: 0.66rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--bronze-deep);
}
.nav-mobile .nav-mobile-cta {
  display: flex; gap: 10px;
  padding-top: 18px; margin-top: 8px;
  border-top: 1px solid var(--rule);
}

@media (max-width: 880px) {
  .nav.nav-4c .nav-links,
  .nav.nav-4c .nav-cta { display: none; }
  .nav.nav-4c .nav-burger { display: block; }
  .nav.nav-4c { grid-template-columns: 1fr auto; }
}

/* ── Footer ──────────────────────────────────────────────── */
.hv.foot.foot-4c {
  background: var(--ink); color: var(--ivory);
  padding: 48px 0 28px; margin-top: 64px;
}
.hv.foot.foot-4c .foot-top {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr);
  gap: 40px; padding-bottom: 40px;
  border-bottom: 1px solid rgba(245, 240, 230, 0.12);
}
.hv.foot.foot-4c .foot-brand .foot-logo {
  font-family: var(--f-display); font-size: 2.2rem; font-weight: 400;
  letter-spacing: -0.018em; color: var(--ivory); line-height: 1;
}
.hv.foot.foot-4c .foot-brand .foot-logo-accent { color: #E8C98A; }
.hv.foot.foot-4c .foot-brand p {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 1.05rem; line-height: 1.5;
  color: rgba(245, 240, 230, 0.7);
  max-width: 38ch; margin: 18px 0 0;
}
.hv.foot.foot-4c .foot-col h4 {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: #E8C98A;
  margin: 0 0 18px;
}
.hv.foot.foot-4c .foot-col a {
  display: block; padding: 6px 0;
  font-family: var(--f-body); font-size: 0.94rem;
  color: rgba(245, 240, 230, 0.8);
  text-decoration: none; line-height: 1.5;
  transition: color 140ms ease;
}
.hv.foot.foot-4c .foot-col a:hover { color: var(--ivory); }

.hv.foot.foot-4c .foot-btm {
  display: flex; justify-content: space-between; gap: 32px;
  padding-top: 28px;
  font-family: var(--f-mono); font-size: 0.72rem;
  letter-spacing: 0.04em; color: rgba(245, 240, 230, 0.5);
  line-height: 1.5;
}
.hv.foot.foot-4c .foot-btm a {
  color: rgba(245, 240, 230, 0.5); text-decoration: none;
}
.hv.foot.foot-4c .foot-btm a:hover { color: var(--ivory); }

/* Footer newsletter row */
.hv.foot.foot-4c .foot-newsletter {
  display: flex; align-items: center; gap: 48px;
  padding-bottom: 40px; margin-bottom: 0;
  border-bottom: 1px solid rgba(245, 240, 230, 0.12);
}
.hv.foot.foot-4c .foot-nl-label {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: #E8C98A; margin-bottom: 10px;
}
.hv.foot.foot-4c .foot-nl-text { flex: 1; }
.hv.foot.foot-4c .foot-nl-text p {
  font-family: var(--f-body); font-size: 0.9rem; line-height: 1.55;
  color: rgba(245, 240, 230, 0.7); margin: 0;
}
.hv.foot.foot-4c .foot-nl-form {
  display: flex; gap: 0; flex-shrink: 0; width: 380px;
}
.hv.foot.foot-4c .foot-nl-form input[type="email"] {
  flex: 1; padding: 10px 14px;
  font-family: var(--f-body); font-size: 0.9rem;
  background: rgba(245, 240, 230, 0.08);
  border: 1px solid rgba(245, 240, 230, 0.2);
  border-right: none; border-radius: 4px 0 0 4px;
  color: var(--ivory); outline: none;
}
.hv.foot.foot-4c .foot-nl-form input[type="email"]::placeholder {
  color: rgba(245, 240, 230, 0.4);
}
.hv.foot.foot-4c .foot-nl-form input[type="email"]:focus {
  border-color: #E8C98A;
}
.hv.foot.foot-4c .foot-nl-form button {
  padding: 10px 18px;
  font-family: var(--f-mono); font-size: 0.75rem; letter-spacing: 0.08em;
  background: #E8C98A; color: var(--ink);
  border: none; border-radius: 0 4px 4px 0;
  cursor: pointer; white-space: nowrap; font-weight: 700;
  transition: background 140ms ease;
}
.hv.foot.foot-4c .foot-nl-form button:hover { background: var(--ivory); }

@media (max-width: 880px) {
  .hv.foot.foot-4c .foot-newsletter {
    flex-direction: column; align-items: flex-start; gap: 20px;
  }
  .hv.foot.foot-4c .foot-nl-form { width: 100%; }
}

@media (max-width: 880px) {
  .hv.foot.foot-4c .foot-top {
    grid-template-columns: 1fr 1fr;
    gap: 36px;
  }
  .hv.foot.foot-4c .foot-btm {
    flex-direction: column; gap: 8px;
  }
}

/* ═══════════════════════════════════════════════════════════
   /analyze — JS-hook classes (preserved from existing IIFE)
   The IIFE in app/static/js/conversion_tool.js writes these
   classes; Phase 4c just styles them.
   ═══════════════════════════════════════════════════════════ */

/* Stage hide / reveal (IIFE adds .p8c-show on submit success) */
.hv .ana-stage.p8c-show { opacity: 1 !important; }
.hv .ana-stage.p8c-show.stage-pending { opacity: 1 !important; }

/* Stage 1 completed treatment */
.hv .ana-stage.p8c-step-card-completed {
  opacity: 0.65;
  pointer-events: none;
}
.hv .ana-stage.p8c-step-card-completed .stage-head { background: var(--ivory); }
.hv .ana-stage.p8c-step-card-completed .stage-head::after {
  content: '\2713'; /* ✓ */
  font-family: var(--f-display); font-size: 1.1rem;
  color: var(--positive);
  margin-left: auto;
}

/* Stage strip — when step 1 is done */
.hv .ana-step .num.p8c-step-num-done {
  color: var(--positive);
  font-family: var(--f-display);
}

/* ═══════════════════════════════════════════════════════════
   /analyze stage 3 — Phase 4c native classes (Option B)
   renderStep3() in conversion_tool.js emits these directly.
   ═══════════════════════════════════════════════════════════ */

.hv .ana-result {
  border: 1px solid var(--rule); background: var(--ivory);
  margin-bottom: 28px;
}
.hv .ana-result-head {
  display: grid; grid-template-columns: auto 1fr auto; gap: 18px;
  padding: 18px 28px; background: var(--paper);
  border-bottom: 1px solid var(--rule); align-items: baseline;
}
.hv .ana-result-head h3 {
  font-family: var(--f-display); font-weight: 300;
  font-size: 1.35rem; letter-spacing: -0.02em; color: var(--ink); margin: 0;
}
.hv .ana-result-head p {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.95rem; margin: 0;
}
.hv .ana-result-badge {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bronze-deep);
  padding: 4px 10px; border: 1px solid var(--bronze);
  background: var(--ivory);
}

.hv .ana-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  background: var(--ivory);
}
.hv .ana-metric {
  padding: 28px 26px;
  border-right: 1px solid var(--rule-hair);
  position: relative;
}
.hv .ana-metric:last-child { border-right: 0; }
.hv .ana-metric--pos {
  background: var(--paper);
  border-top: 3px solid var(--bronze);
  margin-top: -1px;
}
.hv .ana-metric-label {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px;
}
.hv .ana-metric-value {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2.4rem; line-height: 1; letter-spacing: -0.03em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hv .ana-metric-sub {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.95rem; margin: 8px 0 12px;
}
.hv .ana-metric-est {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bronze-deep);
}

.hv .ana-wall {
  padding: 40px 32px 36px;
  border-top: 1px solid var(--rule);
}
.hv .ana-wall-heading {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2rem; letter-spacing: -0.022em; line-height: 1.1;
  color: var(--ink); margin: 0 0 12px;
}
.hv .ana-wall-sub {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-soft); font-size: 1.08rem; line-height: 1.5;
  max-width: 64ch; margin: 0 0 28px;
}

.hv .ana-compare {
  width: 100%; border-collapse: collapse;
  margin-bottom: 28px;
  border: 1px solid var(--rule); background: var(--ivory);
}
.hv .ana-compare th,
.hv .ana-compare td {
  padding: 14px 22px; text-align: left;
  border-bottom: 1px solid var(--rule-hair);
  font-size: 0.94rem; color: var(--ink-soft);
}
.hv .ana-compare th {
  background: var(--paper);
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 400;
  text-align: center;
}
.hv .ana-compare th:first-child { text-align: left; }
.hv .ana-col {
  display: inline-block; padding: 4px 10px;
  border: 1px solid var(--rule); background: var(--ivory);
  letter-spacing: 0.08em;
}
.hv .ana-col--paid {
  border-color: var(--bronze); color: var(--bronze-deep);
}
.hv .ana-compare td:nth-child(2),
.hv .ana-compare td:nth-child(3) {
  text-align: center;
  font-family: var(--f-mono); font-size: 1rem;
  color: var(--ink-mute);
}
.hv .ana-ck { color: var(--positive); font-weight: 500; }
.hv .ana-cx { color: var(--ink-whisper); }
.hv .ana-hi td { background: rgba(138, 106, 54, 0.04); }
.hv .ana-hi td:nth-child(3) { color: var(--bronze-deep); font-weight: 500; }

.hv .ana-wall-btns { text-align: center; margin-bottom: 22px; }

.hv .ana-data-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px 22px;
  background: var(--paper); border-left: 3px solid var(--bronze);
  font-family: var(--f-body); font-size: 0.94rem; line-height: 1.6;
  color: var(--ink-soft);
}
.hv .ana-data-note svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.hv .ana-data-note p { margin: 0; }
.hv .ana-data-note strong { color: var(--ink); font-weight: 500; }

/* /cpa-sample — error banner (rendered when server passes `error`) */
.hv .cpa-error {
  padding: 14px 22px; margin-bottom: 24px;
  background: var(--ember-bg, #fdf2eb);
  border: 1px solid var(--ember, #b34a1a); border-left-width: 3px;
  font-family: var(--f-body); font-size: 0.95rem;
  color: var(--ember, #8a3815); line-height: 1.5;
}

/* /cpa-sample — reveal-state (post-submit) */
.hv .cpa-reveal { padding: 40px 0 64px; }
.hv .cpa-rev-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--rule); background: var(--ivory);
  margin: 48px 0 24px;
}
.hv .cpa-rev-grid .crv-cell {
  padding: 28px 26px;
  border-right: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
}
.hv .cpa-rev-grid .crv-cell:nth-child(3n) { border-right: 0; }
.hv .cpa-rev-grid .crv-cell:nth-last-child(-n+3) { border-bottom: 0; }
.hv .cpa-rev-grid .crv-id {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  color: var(--bronze-deep); margin-bottom: 8px;
}
.hv .cpa-rev-grid .crv-k {
  font-family: var(--f-body); font-size: 0.92rem; color: var(--ink-mute);
  margin-bottom: 14px; line-height: 1.4;
}
.hv .cpa-rev-grid .crv-v {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2rem; line-height: 1; letter-spacing: -0.026em;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hv .cpa-rev-note {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.96rem; line-height: 1.5;
  text-align: center; max-width: 60ch; margin: 0 auto 36px;
  padding-top: 20px; border-top: 1px solid var(--rule-hair);
}
.hv .cpa-rev-ctas {
  display: flex; gap: 14px; justify-content: center;
}
/* ═══════════════════════════════════════════════════════════
   Phase 5a — Intake redesign + editorial error page
   Append to app/static/css/public.css.
   Inherits .hv tokens from the Phase 4a chunk (--ivory, --paper,
   --bronze-deep, --rule, --rule-hair, --ink, --ink-soft, --ink-mute,
   --ember, --negative, --negative-bg, --positive, --f-display,
   --f-body, --f-mono, plus the Instrument Serif import).
   All selectors are scoped under `.hv`.
   ═══════════════════════════════════════════════════════════ */

/* ── Intake form ────────────────────────────────────────── */
.hv .intk { padding: 36px 0 64px; max-width: 760px; margin: 0 auto; }
.hv .intk-hd { padding: 0 32px 36px; border-bottom: 1px solid var(--rule); }
.hv .intk-hd .back {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--bronze-deep); text-transform: uppercase;
  display: inline-block; margin-bottom: 18px; text-decoration: none;
}
.hv .intk-hd .back:hover { color: var(--ink); }
.hv .intk-hd .iss {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px;
}
.hv .intk-hd .iss .sep { margin: 0 8px; color: var(--rule); }
.hv .intk-hd h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 3rem; line-height: 1.05; letter-spacing: -0.018em;
  margin: 0 0 16px;
}
.hv .intk-hd h1 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .intk-hd .sub {
  font-size: 1.04rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 60ch; margin: 0;
}
.hv .intk-hd .sub strong { font-weight: 500; color: var(--ink); }
.hv .intk-hd .sub em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep);
}

/* drafts strip — subtle, above-fold */
.hv .intk-drafts {
  margin: 28px 32px 0;
  border: 1px solid var(--rule); background: var(--paper);
}
.hv .intk-drafts .dh {
  padding: 14px 22px; border-bottom: 1px solid var(--rule-hair);
  display: flex; justify-content: space-between; align-items: baseline;
}
.hv .intk-drafts .dh .k {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-deep);
}
.hv .intk-drafts .dh .ct {
  font-family: var(--f-mono); font-size: 0.78rem; color: var(--ink-mute);
}
.hv .intk-drafts a.dr {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: baseline; gap: 24px;
  padding: 14px 22px; border-bottom: 1px solid var(--rule-hair);
  text-decoration: none; color: inherit;
}
.hv .intk-drafts a.dr:last-child { border-bottom: 0; }
.hv .intk-drafts a.dr:hover { background: var(--ivory); }
.hv .intk-drafts a.dr .nm { font-size: 1rem; color: var(--ink); font-weight: 500; }
.hv .intk-drafts a.dr .when {
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.06em;
  color: var(--ink-mute);
}
.hv .intk-drafts a.dr .arr {
  font-family: var(--f-display); font-size: 1.2rem; color: var(--ink-mute);
}
.hv .intk-drafts a.dr:hover .arr { color: var(--bronze-deep); }

/* error / warning bars */
.hv .intk-bar {
  margin: 28px 32px 0;
  padding: 16px 22px;
  border: 1px solid var(--rule);
  background: var(--paper);
  font-size: 0.94rem;
  line-height: 1.55;
}
.hv .intk-bar.warn { border-left: 3px solid var(--ember); }
.hv .intk-bar.err  { border-left: 3px solid var(--negative); background: var(--negative-bg); }
.hv .intk-bar .k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 6px;
}
.hv .intk-bar.err .k { color: var(--negative); }
.hv .intk-bar ul { margin: 6px 0 0 22px; padding: 0; }
.hv .intk-bar li { margin: 2px 0; }

/* sections */
.hv .intk-sec {
  margin: 36px 32px 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--rule-hair);
}
.hv .intk-sec:first-of-type { border-top: 0; padding-top: 8px; }
.hv .intk-sec .sec-hd {
  display: grid; grid-template-columns: 60px 1fr; gap: 16px;
  align-items: baseline; margin-bottom: 24px;
}
.hv .intk-sec .sec-hd .num {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  color: var(--bronze-deep); text-transform: uppercase;
}
.hv .intk-sec .sec-hd h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.6rem; letter-spacing: -0.012em;
  margin: 0 0 6px;
}
.hv .intk-sec .sec-hd .sd {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 1.02rem; line-height: 1.5;
  max-width: 56ch;
}

/* fields */
.hv .intk-row { margin-bottom: 22px; }
.hv .intk-row.dual {
  display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-bottom: 22px;
}
/* dual-row children come pre-wrapped in their own .intk-row, so unset their bottom */
.hv .intk-row.dual > .intk-row { margin-bottom: 0; }
.hv .intk-row .lbl {
  display: block;
  font-family: var(--f-body); font-size: 0.92rem;
  color: var(--ink); font-weight: 500; line-height: 1.35;
  margin-bottom: 8px;
}
.hv .intk-row .lbl .req { color: var(--ember); margin-left: 3px; }
.hv .intk-row .hint {
  display: block; font-family: 'Instrument Serif', Georgia, serif;
  font-style: italic; color: var(--ink-mute); font-size: 0.92rem;
  line-height: 1.45; margin-top: 2px; margin-bottom: 6px;
}
.hv .intk-row input[type="text"],
.hv .intk-row input[type="number"],
.hv .intk-row input[type="email"],
.hv .intk-row input[type="date"],
.hv .intk-row select,
.hv .intk-row textarea {
  width: 100%; box-sizing: border-box;
  font-family: var(--f-mono); font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  background: var(--ivory); color: var(--ink);
  outline: none;
  font-variant-numeric: tabular-nums;
  border-radius: 0;
  transition: border-color 120ms ease, background 120ms ease;
}
.hv .intk-row select { font-family: var(--f-body); }
.hv .intk-row input:focus,
.hv .intk-row select:focus,
.hv .intk-row textarea:focus { border-color: var(--bronze-deep); background: #fff; }
.hv .intk-row input.err,
.hv .intk-row select.err { border-color: var(--negative); }

.hv .intk-row .input-prefix {
  display: grid; grid-template-columns: auto 1fr; align-items: stretch;
  border: 1px solid var(--rule); background: var(--ivory);
}
.hv .intk-row .input-prefix.err { border-color: var(--negative); }
.hv .intk-row .input-prefix .pre {
  padding: 12px 14px;
  font-family: var(--f-mono); font-size: 0.92rem; color: var(--ink-mute);
  background: var(--paper); border-right: 1px solid var(--rule);
  display: flex; align-items: center;
}
.hv .intk-row .input-prefix input {
  border: 0; padding-left: 14px; background: transparent;
}
.hv .intk-row .input-prefix:focus-within { border-color: var(--bronze-deep); }

/* radio / checkbox row */
.hv .intk-choice {
  display: flex; gap: 28px; padding: 12px 0; flex-wrap: wrap;
  font-family: var(--f-body); font-size: 0.95rem; color: var(--ink-soft);
}
.hv .intk-choice label {
  display: inline-flex; align-items: center; gap: 9px; cursor: pointer;
}
.hv .intk-choice input { accent-color: var(--bronze-deep); }

/* footer actions */
.hv .intk-foot {
  display: flex; justify-content: space-between; align-items: center;
  margin: 48px 32px 0;
  padding-top: 28px;
  border-top: 1px solid var(--rule);
  flex-wrap: wrap; gap: 16px;
}
.hv .intk-foot .meta {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hv .intk-foot .actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hv .intk-foot button,
.hv .intk-foot a.btn {
  font-family: var(--f-body); font-weight: 500; font-size: 0.92rem;
  padding: 12px 22px; border: 1px solid var(--ink);
  background: transparent; color: var(--ink); cursor: pointer;
  text-decoration: none; line-height: 1; letter-spacing: 0.005em;
  border-radius: 0;
}
.hv .intk-foot button.primary {
  background: var(--ink); color: var(--ivory);
}
.hv .intk-foot button.primary:hover { background: #000; }
.hv .intk-foot button:hover,
.hv .intk-foot a.btn:hover { background: var(--ink); color: var(--ivory); }
.hv .intk-foot a.cancel { border-color: var(--rule); color: var(--ink-soft); }
.hv .intk-foot a.cancel:hover {
  background: var(--paper); color: var(--ink); border-color: var(--ink-soft);
}

/* ── Mobile (≤ 760px) ─────────────────────────────────── */
@media (max-width: 760px) {
  .hv .intk-hd { padding: 0 20px 28px; }
  .hv .intk-hd h1 { font-size: 2rem; }
  .hv .intk-drafts,
  .hv .intk-bar,
  .hv .intk-sec,
  .hv .intk-foot { margin-left: 20px; margin-right: 20px; }
  .hv .intk-sec .sec-hd { grid-template-columns: 1fr; gap: 4px; }
  .hv .intk-row.dual { grid-template-columns: 1fr; gap: 0; }
  .hv .intk-row.dual > .intk-row { margin-bottom: 22px; }
  .hv .intk-foot { justify-content: flex-start; }
  .hv .intk-foot .actions { width: 100%; }
  .hv .intk-foot .actions button,
  .hv .intk-foot .actions a.btn { flex: 1; text-align: center; }
}

/* ═══════════════════════════════════════════════════════════
   Editorial error page (404 / 500)
   ═══════════════════════════════════════════════════════════ */
.hv .err { padding: 64px 0 80px; background: var(--ivory); }
.hv .err-wrap { max-width: 920px; margin: 0 auto; padding: 0 48px; }

.hv .err-mast {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 48px; align-items: end;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--rule);
}
.hv .err-code {
  font-family: var(--f-display); font-weight: 300;
  font-size: 9rem; line-height: 0.9; letter-spacing: -0.04em;
  color: var(--ink); margin: 0;
}
.hv .err-code em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .err-meta { padding-bottom: 18px; }
.hv .err-meta .iss {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 14px;
}
.hv .err-meta .iss .sep { margin: 0 10px; color: var(--rule); }
.hv .err-meta h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.8rem; line-height: 1.15; margin: 0 0 14px;
  letter-spacing: -0.012em;
}
.hv .err-meta h1 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep);
}

.hv .err-body {
  display: grid; grid-template-columns: 1.1fr 1fr;
  gap: 48px;
  padding-top: 40px;
}
.hv .err-body .lede {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.4rem; line-height: 1.4; color: var(--ink-soft);
  margin: 0 0 28px;
}
.hv .err-body .lede em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep);
}
.hv .err-body p {
  font-size: 1rem; line-height: 1.65; color: var(--ink-soft);
  margin: 0 0 16px;
}
.hv .err-actions { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }
.hv .err-actions a {
  font-family: var(--f-body); font-weight: 500; font-size: 0.94rem;
  padding: 13px 22px; border: 1px solid var(--ink);
  text-decoration: none; line-height: 1; color: var(--ink);
  letter-spacing: 0.005em; border-radius: 0;
}
.hv .err-actions a.primary { background: var(--ink); color: var(--ivory); border-color: var(--ink); }
.hv .err-actions a.primary:hover { background: #000; }
.hv .err-actions a:hover { background: var(--ink); color: var(--ivory); }

.hv .err-side { border-left: 1px solid var(--rule); padding-left: 32px; }
.hv .err-side .k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-deep);
  margin-bottom: 18px;
}
.hv .err-side ul { list-style: none; margin: 0; padding: 0; }
.hv .err-side li {
  padding: 12px 0; border-bottom: 1px solid var(--rule-hair);
  font-size: 0.96rem;
}
.hv .err-side li:last-child { border-bottom: 0; }
.hv .err-side a {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 12px;
  color: var(--ink); text-decoration: none;
}
.hv .err-side a:hover { color: var(--bronze-deep); }
.hv .err-side a .arr {
  font-family: var(--f-display); font-size: 1.1rem;
  color: var(--ink-mute);
  transition: transform 160ms ease, color 140ms ease;
}
.hv .err-side a:hover .arr { color: var(--bronze-deep); transform: translateX(3px); }
.hv .err-side .det {
  font-family: var(--f-mono); font-size: 0.72rem;
  color: var(--ink-mute); margin-top: 6px;
}

/* Mobile collapse */
@media (max-width: 760px) {
  .hv .err { padding: 56px 0 80px; }
  .hv .err-wrap { padding: 0 24px; }
  .hv .err-mast { grid-template-columns: 1fr; gap: 24px; align-items: start; }
  .hv .err-code { font-size: 5.4rem; }
  .hv .err-meta { padding-bottom: 0; }
  .hv .err-body { grid-template-columns: 1fr; gap: 32px; padding-top: 32px; }
  .hv .err-side { border-left: 0; border-top: 1px solid var(--rule); padding-left: 0; padding-top: 28px; }
}


/* =========================================================
   Phase 5c — Editorial backload (historical-statement upload)
   Append to app/static/css/public.css. All selectors are
   `.hv`-namespaced so they cannot bleed into legacy chrome.

   Tokens used (defined in Phase 4a public-overrides):
     --paper, --ivory, --rule, --rule-hair,
     --ink, --ink-soft, --ink-mute,
     --bronze-deep, --ember, --negative, --negative-bg,
     --f-display, --f-body, --f-mono
   ========================================================= */

/* ── Shell ───────────────────────────────────────────────── */
.hv .bk { padding: 36px 0 64px; max-width: 760px; margin: 0 auto; }

/* ── Masthead ────────────────────────────────────────────── */
.hv .bk-hd { padding: 0 32px 36px; border-bottom: 1px solid var(--rule); }
.hv .bk-hd .back {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--bronze-deep); text-transform: uppercase;
  display: inline-block; margin-bottom: 18px; text-decoration: none;
}
.hv .bk-hd .back:hover { color: var(--ink); }
.hv .bk-hd .iss {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 14px;
}
.hv .bk-hd .iss .sep { margin: 0 8px; color: var(--rule); }
.hv .bk-hd h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 3rem; line-height: 1.05; letter-spacing: -0.018em;
  margin: 0 0 16px;
}
.hv .bk-hd h1 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .bk-hd .sub {
  font-size: 1.04rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 60ch; margin: 0;
}
.hv .bk-hd .sub strong { font-weight: 500; color: var(--ink); }
.hv .bk-hd .sub em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep);
}

/* ── Sections (numbered) ─────────────────────────────────── */
.hv .bk-sec {
  margin: 36px 32px 0;
  padding: 28px 0 0;
  border-top: 1px solid var(--rule-hair);
}
.hv .bk-sec:first-of-type { border-top: 0; padding-top: 8px; }
.hv .bk-sec.is-hidden { display: none; }
.hv .bk-sec .sec-hd {
  display: grid; grid-template-columns: 60px 1fr; gap: 16px;
  align-items: baseline; margin-bottom: 24px;
}
.hv .bk-sec .sec-hd .num {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  color: var(--bronze-deep); text-transform: uppercase;
}
.hv .bk-sec .sec-hd h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.6rem; letter-spacing: -0.012em;
  margin: 0 0 6px;
}
.hv .bk-sec .sec-hd .sd {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 1.02rem; line-height: 1.5;
  margin: 0; max-width: 56ch;
}

/* ── Form (3-column slotting controls) ───────────────────── */
.hv .bk-form {
  display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 22px;
}
@media (max-width: 720px) {
  .hv .bk-form { grid-template-columns: 1fr; }
}
.hv .bk-row .lbl {
  display: block;
  font-family: var(--f-body); font-size: 0.92rem;
  color: var(--ink); font-weight: 500;
  margin-bottom: 8px;
}
.hv .bk-row select {
  width: 100%; box-sizing: border-box;
  font-family: var(--f-body); font-size: 1rem; color: var(--ink);
  padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: 0;
  background: var(--ivory);
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%),
    linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 50%,
    calc(100% - 13px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 36px;
  transition: border-color 120ms ease, background-color 120ms ease;
}
.hv .bk-row select:focus { border-color: var(--bronze-deep); outline: 0; background-color: #fff; }

/* ── Drop zone ───────────────────────────────────────────── */
.hv .bk-drop {
  position: relative;
  border: 1px solid var(--rule);
  background: var(--paper);
  padding: 64px 32px;
  cursor: pointer;
  transition: border-color 160ms ease, background 160ms ease;
}
.hv .bk-drop:hover,
.hv .bk-drop.is-active {
  border-color: var(--bronze-deep);
  background: var(--ivory);
}
.hv .bk-drop:focus-visible { outline: 2px solid var(--bronze-deep); outline-offset: 2px; }

.hv .bk-drop-inner { text-align: center; }
.hv .bk-drop .glyph {
  font-family: var(--f-display); font-size: 2.4rem; line-height: 1;
  color: var(--bronze-deep); margin-bottom: 14px;
}
.hv .bk-drop .primary {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.3rem; color: var(--ink); margin-bottom: 8px;
  letter-spacing: -0.008em;
}
.hv .bk-drop .primary .link {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 3px;
}
.hv .bk-drop .meta {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hv .bk-drop input[type="file"] {
  position: absolute; inset: 0; opacity: 0; pointer-events: none;
}

/* ── Upload-status rows ──────────────────────────────────── */
.hv .bk-results {
  border-top: 1px solid var(--rule-hair);
}
.hv .bk-result {
  display: grid; grid-template-columns: 1fr auto;
  align-items: baseline; gap: 24px;
  padding: 14px 0;
  border-bottom: 1px solid var(--rule-hair);
}
.hv .bk-result-name {
  font-family: var(--f-mono); font-size: 0.92rem;
  color: var(--ink); word-break: break-word;
}
.hv .bk-result-status {
  font-family: var(--f-mono); font-size: 0.74rem; letter-spacing: 0.08em;
  text-transform: uppercase; white-space: nowrap;
}
.hv .bk-result-status.is-pending { color: var(--ink-mute); }
.hv .bk-result-status.is-ok      { color: var(--bronze-deep); }
.hv .bk-result-status.is-err     { color: var(--negative); }


/* =========================================================
   Phase 6a — Editorial operator portal (base + dashboard)
   Append to app/static/css/public.css. All selectors live under
   `.hv .hv-op …` so they cannot bleed into legacy or client chrome.

   Tokens used (defined in Phase 4a public-overrides):
     --paper, --ivory, --rule, --rule-hair, --rule-soft,
     --ink, --ink-soft, --ink-mute,
     --bronze-deep, --bronze-wash,
     --positive, --positive-bg,
     --ember,
     --negative, --negative-bg,
     --f-display, --f-body, --f-mono.
   ========================================================= */

/* ── Shell -----------------------------------------------------
   .hv-op sits inside .main-content (which already handles the
   220px sidebar offset). Operators want density, not air — keep
   page padding tight, use rule-hair separators between blocks. */
.hv .hv-op {
  background: var(--ivory);
  color: var(--ink);
  font-family: var(--f-body);
  padding: 0;
}

/* ── Topbar (mono crumb + period stamp) ─────────────────── */
.hv .hv-op .op-topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 32px;
  background: var(--ivory);
  border-bottom: 1px solid var(--rule-hair);
}
.hv .hv-op .op-topbar .crumb {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hv .hv-op .op-topbar .crumb .sep { margin: 0 8px; color: var(--rule); }
.hv .hv-op .op-topbar .stamp {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bronze-deep);
  padding: 4px 10px; border: 1px solid var(--rule);
  background: var(--paper);
}

/* ── Editorial flash banner ─────────────────────────────── */
.hv .hv-op .op-flash {
  margin: 24px 32px 0;
  padding: 14px 22px;
  border: 1px solid var(--rule);
  border-left: 3px solid var(--bronze-deep);
  background: var(--paper);
  display: grid; grid-template-columns: auto 1fr; gap: 18px;
  align-items: baseline;
}
.hv .hv-op .op-flash .k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-deep);
}
.hv .hv-op .op-flash .m {
  font-size: 0.95rem; color: var(--ink-soft); line-height: 1.5;
}

/* ── Page frame -----------------------------------------------
   Operator pages get more horizontal density than client pages —
   max-width 1280px instead of the client portal's 760px. */
.hv .hv-op .op {
  padding: 36px 32px 64px;
  max-width: 1280px;
}

/* ── Masthead ───────────────────────────────────────────── */
.hv .hv-op .op-hd {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.hv .hv-op .op-hd .iss {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 14px;
}
.hv .hv-op .op-hd .iss .sep { margin: 0 8px; color: var(--rule); }
.hv .hv-op .op-hd h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 2.4rem; line-height: 1.05; letter-spacing: -0.018em;
  margin: 0 0 14px;
}
.hv .hv-op .op-hd h1 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep); font-weight: 400;
}
.hv .hv-op .op-hd .sub {
  font-size: 1rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 64ch; margin: 0;
}

/* ── Toolbar (year selector + hint) ─────────────────────── */
.hv .hv-op .op-toolbar {
  margin-top: 24px;
  display: flex; align-items: center; gap: 14px;
  padding: 14px 18px;
  border: 1px solid var(--rule);
  background: var(--paper);
}
.hv .hv-op .op-toolbar .op-toolbar-lbl {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hv .hv-op .op-toolbar select {
  font-family: var(--f-body); font-size: 0.95rem; color: var(--ink);
  padding: 8px 32px 8px 12px;
  border: 1px solid var(--rule); background: var(--ivory);
  border-radius: 0;
  appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-mute) 50%),
    linear-gradient(135deg, var(--ink-mute) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.hv .hv-op .op-toolbar select:focus {
  outline: 0; border-color: var(--bronze-deep); background-color: #fff;
}
.hv .hv-op .op-toolbar .op-toolbar-hint {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.95rem; margin-left: auto;
}

/* ── KPI strip (compact tiles) ──────────────────────────── */
.hv .hv-op .op-kpis {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 28px;
  border: 1px solid var(--rule);
  background: var(--ivory);
}
.hv .hv-op .op-kpi {
  padding: 18px 22px 20px;
  border-right: 1px solid var(--rule-hair);
}
.hv .hv-op .op-kpi:last-child { border-right: 0; }
.hv .hv-op .op-kpi .k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 8px;
}
.hv .hv-op .op-kpi .v {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.8rem; line-height: 1.05; letter-spacing: -0.015em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--ink);
}
.hv .hv-op .op-kpi .v.is-pos { color: var(--positive, #2E6F40); }
.hv .hv-op .op-kpi .v.is-neg { color: var(--negative, #B23A3A); }

/* ── Numbered section ───────────────────────────────────── */
.hv .hv-op .op-sec {
  margin-top: 40px;
  padding-top: 28px;
  border-top: 1px solid var(--rule-hair);
}
.hv .hv-op .op-sec .sec-hd {
  display: grid; grid-template-columns: 60px 1fr auto; gap: 16px;
  align-items: baseline;
  margin-bottom: 18px;
}
.hv .hv-op .op-sec .sec-hd .num {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bronze-deep);
}
.hv .hv-op .op-sec .sec-hd h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.5rem; letter-spacing: -0.012em; margin: 0 0 4px;
}
.hv .hv-op .op-sec .sec-hd .sd {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.98rem; line-height: 1.45;
  margin: 0; max-width: 60ch;
}
.hv .hv-op .op-sec .sec-hd .sec-act {
  font-family: var(--f-body); font-size: 0.86rem; font-weight: 500;
  color: var(--ink); padding: 8px 14px;
  border: 1px solid var(--ink); text-decoration: none; line-height: 1;
  align-self: end;
  white-space: nowrap;
}
.hv .hv-op .op-sec .sec-hd .sec-act:hover { background: var(--ink); color: var(--ivory); }

/* ── Ledger table ───────────────────────────────────────── */
.hv .hv-op .op-table-wrap {
  border: 1px solid var(--rule);
  background: var(--ivory);
  overflow-x: auto;
}
.hv .hv-op .op-table {
  width: 100%; border-collapse: collapse;
  font-family: var(--f-body); font-size: 0.92rem; color: var(--ink);
}
.hv .hv-op .op-table thead th {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); font-weight: 500;
  padding: 12px 18px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.hv .hv-op .op-table tbody td {
  padding: 12px 18px;
  border-bottom: 1px solid var(--rule-hair);
  vertical-align: top;
}
.hv .hv-op .op-table tbody tr:last-child td { border-bottom: 0; }
.hv .hv-op .op-table tbody tr:hover { background: var(--paper); }
.hv .hv-op .op-table .t-l { text-align: left; }
.hv .hv-op .op-table .t-r { text-align: right; }
.hv .hv-op .op-table .t-c { text-align: center; }
.hv .hv-op .op-table .num {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums lining-nums;
  letter-spacing: 0;
}
.hv .hv-op .op-table .num.is-pos { color: var(--positive, #2E6F40); }
.hv .hv-op .op-table .num.is-neg { color: var(--negative, #B23A3A); }

.hv .hv-op .op-table .op-name {
  color: var(--ink); font-weight: 500; text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 140ms ease, color 140ms ease;
}
.hv .hv-op .op-table .op-name:hover { color: var(--bronze-deep); border-bottom-color: var(--bronze-deep); }
.hv .hv-op .op-table .op-name-sub {
  font-family: var(--f-mono); font-size: 0.72rem;
  color: var(--ink-mute); margin-top: 2px; letter-spacing: 0.02em;
}

.hv .hv-op .op-table .op-link {
  font-family: var(--f-body); font-size: 0.85rem;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent;
}
.hv .hv-op .op-table .op-link:hover { color: var(--bronze-deep); border-bottom-color: var(--bronze-deep); }
.hv .hv-op .op-table .op-link--mute { color: var(--ink-mute); }
.hv .hv-op .op-table .op-link-sep { color: var(--rule); margin: 0 6px; }

/* ── Editorial status chips (active / pilot / suspended / unknown) ─── */
.hv .hv-op .op-status {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 4px 10px;
  border: 1px solid;
  background: var(--ivory);
  white-space: nowrap;
}
.hv .hv-op .op-status .dot {
  width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.hv .hv-op .op-status--active {
  color: var(--positive, #2E6F40);
  border-color: rgba(46, 111, 64, 0.35);
  background: var(--positive-bg, #ECF3EE);
}
.hv .hv-op .op-status--pilot {
  color: var(--bronze-deep);
  border-color: rgba(138, 106, 54, 0.35);
  background: var(--bronze-wash);
}
.hv .hv-op .op-status--suspended {
  color: var(--negative, #B23A3A);
  border-color: rgba(178, 58, 58, 0.35);
  background: var(--negative-bg, #F7ECEC);
}
.hv .hv-op .op-status--unknown {
  color: var(--ink-mute);
  border-color: var(--rule);
  background: var(--paper);
}

/* ── Empty state ────────────────────────────────────────── */
.hv .hv-op .op-empty {
  border: 1px solid var(--rule);
  background: var(--ivory);
  padding: 56px 32px 60px;
  text-align: left;
  max-width: 640px;
}
.hv .hv-op .op-empty .k {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-deep);
  margin-bottom: 14px;
}
.hv .hv-op .op-empty h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.8rem; line-height: 1.1; letter-spacing: -0.015em;
  margin: 0 0 12px;
}
.hv .hv-op .op-empty h3 em {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--bronze-deep);
}
.hv .hv-op .op-empty p {
  font-size: 0.98rem; line-height: 1.55; color: var(--ink-soft);
  margin: 0 0 20px; max-width: 56ch;
}
.hv .hv-op .op-empty-actions { margin-top: 8px; }
.hv .hv-op .btn-ink {
  display: inline-block;
  font-family: var(--f-body); font-weight: 500; font-size: 0.92rem;
  padding: 11px 20px; line-height: 1; letter-spacing: 0.005em;
  background: var(--ink); color: var(--ivory);
  border: 1px solid var(--ink); text-decoration: none;
}
.hv .hv-op .btn-ink:hover { background: #000; }

/* ── Responsive (operator portal is desktop-first) ─────── */
@media (max-width: 1024px) {
  .hv .hv-op .op-kpis { grid-template-columns: repeat(2, 1fr); }
  .hv .hv-op .op-kpi:nth-child(2) { border-right: 0; }
  .hv .hv-op .op-kpi:nth-child(1),
  .hv .hv-op .op-kpi:nth-child(2) { border-bottom: 1px solid var(--rule-hair); }
}
@media (max-width: 720px) {
  .hv .hv-op .op { padding: 24px 20px 48px; }
  .hv .hv-op .op-kpis { grid-template-columns: 1fr; }
  .hv .hv-op .op-kpi { border-right: 0; border-bottom: 1px solid var(--rule-hair); }
  .hv .hv-op .op-kpi:last-child { border-bottom: 0; }
  .hv .hv-op .op-toolbar { flex-wrap: wrap; }
  .hv .hv-op .op-toolbar .op-toolbar-hint { width: 100%; margin-left: 0; }
  .hv .hv-op .op-sec .sec-hd { grid-template-columns: 60px 1fr; }
  .hv .hv-op .op-sec .sec-hd .sec-act { grid-column: 2; justify-self: start; margin-top: 8px; }
}


/* =========================================================
   Phase 6b — Editorial operator client detail page
   Append to app/static/css/public.css. Selectors live under
   `.hv .hv-op .op-cli …` (page-scoped), `.hv .hv-op .op-led …`
   (info-strip ledger atoms — reusable on other operator pages),
   `.hv .hv-op .op-disclose …` (disclosure pattern), and
   `.hv .hv-op .op-prop …` (property row).

   Inherits all tokens from Phase 4a public-overrides + Phase 6a.
   Reuses .op-status, .op-link, .op-link-sep, .op-empty, .btn-ink,
   .op-toolbar from Phase 6a CSS.
   ========================================================= */

/* ── Topbar crumb link variant ──────────────────────────── */
.hv .hv-op .op-topbar .op-crumb-link {
  color: var(--ink-mute); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.hv .hv-op .op-topbar .op-crumb-link:hover {
  color: var(--bronze-deep); border-bottom-color: var(--bronze-deep);
}

/* ── Page wrapper (op-cli inside op) ───────────────────── */
.hv .hv-op .op-cli { /* inherits .op padding/max-width */ }

/* ── Masthead ─────────────────────────────────────────── */
.hv .hv-op .op-cli-hd {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--rule);
}
.hv .hv-op .op-cli-hd .back {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  color: var(--bronze-deep); text-transform: uppercase;
  text-decoration: none;
  display: inline-block; margin-bottom: 18px;
}
.hv .hv-op .op-cli-hd .back:hover { color: var(--ink); }
.hv .hv-op .op-cli-hd .iss {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--ink-mute);
  margin-bottom: 14px;
}
.hv .hv-op .op-cli-hd .iss .sep { margin: 0 8px; color: var(--rule); }

.hv .hv-op .op-cli-hd-row {
  display: grid; grid-template-columns: 1fr auto;
  gap: 24px; align-items: end;
}
.hv .hv-op .op-cli-hd h1 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 2.4rem; line-height: 1.05; letter-spacing: -0.018em;
  margin: 0 0 8px;
}
.hv .hv-op .op-cli-hd .entity {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 1.15rem; color: var(--ink-soft);
  margin-bottom: 14px;
}
.hv .hv-op .op-cli-hd-meta {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.hv .hv-op .op-cli-hd-id {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hv .hv-op .op-cli-hd-actions {
  display: flex; gap: 10px; flex-shrink: 0;
}
.hv .hv-op .btn-line {
  display: inline-block;
  font-family: var(--f-body); font-weight: 500; font-size: 0.92rem;
  padding: 10px 18px; line-height: 1; letter-spacing: 0.005em;
  background: transparent; color: var(--ink);
  border: 1px solid var(--ink); text-decoration: none;
  white-space: nowrap;
}
.hv .hv-op .btn-line:hover { background: var(--ink); color: var(--ivory); }
/* op-cli scope: btn-ink already defined in 6a; reaffirm nowrap */
.hv .hv-op .op-cli-hd-actions .btn-ink { white-space: nowrap; }

/* ── Info strip · 3 ledgers in a row ───────────────────── */
.hv .hv-op .op-cli-strip {
  margin-top: 28px;
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--ivory);
}
.hv .hv-op .op-cli-strip .op-led {
  padding: 22px 24px;
  border-right: 1px solid var(--rule-hair);
}
.hv .hv-op .op-cli-strip .op-led:last-child { border-right: 0; }

/* ── Ledger atom (reusable) ────────────────────────────── */
.hv .hv-op .op-led .op-led-hd {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-deep);
  padding-bottom: 12px; margin-bottom: 14px;
  border-bottom: 1px solid var(--rule-hair);
}
.hv .hv-op .op-led .op-led-list { margin: 0; padding: 0; display: grid; gap: 12px; }
.hv .hv-op .op-led .op-led-list > div {
  display: grid; grid-template-columns: 92px 1fr; gap: 12px;
  align-items: baseline;
}
.hv .hv-op .op-led .op-led-list dt {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hv .hv-op .op-led .op-led-list dd {
  margin: 0; font-size: 0.92rem; color: var(--ink); line-height: 1.4;
  word-break: break-word;
}
.hv .hv-op .op-led .op-led-empty {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.96rem;
}
.hv .hv-op .op-led .op-led-notes {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--rule-hair);
}
.hv .hv-op .op-led .op-led-notes .k {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 6px;
}
.hv .hv-op .op-led .op-led-notes p {
  margin: 0; font-size: 0.92rem; color: var(--ink-soft); line-height: 1.5;
}

.hv .hv-op .op-led .op-led-links {
  list-style: none; margin: 0; padding: 0;
}
.hv .hv-op .op-led .op-led-links li {
  border-bottom: 1px solid var(--rule-hair);
}
.hv .hv-op .op-led .op-led-links li:last-child { border-bottom: 0; }
.hv .hv-op .op-led .op-led-links a {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 9px 0;
  font-size: 0.95rem; color: var(--ink);
  text-decoration: none;
  transition: color 140ms ease;
}
.hv .hv-op .op-led .op-led-links a:hover { color: var(--bronze-deep); }
.hv .hv-op .op-led .op-led-links a .arr {
  font-family: var(--f-display); color: var(--ink-mute);
  font-size: 1.1rem;
  transition: color 140ms ease, transform 160ms ease;
}
.hv .hv-op .op-led .op-led-links a:hover .arr { color: var(--bronze-deep); transform: translateX(2px); }

/* ── Disclosure (Manage account) ───────────────────────── */
.hv .hv-op .op-disclose {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--rule-hair);
}
.hv .hv-op .op-disclose summary {
  list-style: none; cursor: pointer;
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 12px; margin: 0 -12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  transition: border-color 140ms ease, background 140ms ease;
}
.hv .hv-op .op-disclose summary::-webkit-details-marker { display: none; }
.hv .hv-op .op-disclose summary:hover { border-color: var(--ink-soft); background: var(--ivory); }
.hv .hv-op .op-disclose .op-disclose-lbl {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink);
}
.hv .hv-op .op-disclose .op-disclose-mark {
  font-family: var(--f-display); font-size: 1.1rem; line-height: 1;
  color: var(--bronze-deep);
  transition: transform 200ms ease;
}
.hv .hv-op .op-disclose[open] .op-disclose-mark {
  transform: rotate(45deg);
}
.hv .hv-op .op-disclose .op-disclose-body {
  padding: 14px 0 4px;
}
.hv .hv-op .op-disclose .op-disclose-warn {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.92rem; line-height: 1.5;
  margin: 0 0 12px;
}
.hv .hv-op .op-disclose .op-disclose-actions {
  display: grid; gap: 8px;
}
.hv .hv-op .op-disclose .op-disclose-actions form { margin: 0; }

/* Lifecycle action buttons (inside disclosure) */
.hv .hv-op .op-cli-act {
  width: 100%;
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.12em;
  text-transform: uppercase; font-weight: 500;
  padding: 9px 14px; line-height: 1;
  border: 1px solid var(--rule);
  background: var(--ivory); color: var(--ink-soft);
  cursor: pointer;
  text-align: center;
  transition: border-color 140ms ease, background 140ms ease, color 140ms ease;
}
.hv .hv-op .op-cli-act:hover {
  border-color: var(--ink); color: var(--ink); background: var(--paper);
}
.hv .hv-op .op-cli-act--grant {
  color: var(--bronze-deep);
  border-color: rgba(138, 106, 54, 0.35);
  background: var(--bronze-wash);
}
.hv .hv-op .op-cli-act--grant:hover {
  background: var(--bronze-deep); color: var(--ivory); border-color: var(--bronze-deep);
}
.hv .hv-op .op-cli-act--danger {
  color: var(--negative, #A8361B);
  border-color: rgba(168, 54, 27, 0.35);
  background: var(--negative-bg, #F2DED6);
}
.hv .hv-op .op-cli-act--danger:hover {
  background: var(--negative, #A8361B); color: var(--ivory); border-color: var(--negative);
}

/* ── §01 Properties — list ─────────────────────────────── */
.hv .hv-op .op-cli-props {
  border: 1px solid var(--rule);
  background: var(--ivory);
}

.hv .hv-op .op-prop {
  padding: 18px 24px;
  border-bottom: 1px solid var(--rule-hair);
}
.hv .hv-op .op-prop:last-child { border-bottom: 0; }
.hv .hv-op .op-prop:hover { background: var(--paper); }

.hv .hv-op .op-prop-hd {
  display: grid; grid-template-columns: 1fr auto;
  gap: 16px; align-items: baseline;
  margin-bottom: 12px;
}
.hv .hv-op .op-prop-name { min-width: 0; }
.hv .hv-op .op-prop-link {
  font-family: var(--f-display); font-weight: 500;
  font-size: 1.2rem; line-height: 1.2; letter-spacing: -0.01em;
  color: var(--ink); text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.hv .hv-op .op-prop-link:hover { color: var(--bronze-deep); border-bottom-color: var(--bronze-deep); }
.hv .hv-op .op-prop-addr {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  font-size: 0.95rem; color: var(--ink-mute);
  margin-top: 3px; line-height: 1.4;
}
.hv .hv-op .op-prop-actions {
  display: flex; gap: 4px; align-items: baseline; flex-shrink: 0;
  white-space: nowrap;
}

/* Two-line layout · inline issue line of metrics */
.hv .hv-op .op-prop-iss {
  display: flex; flex-wrap: wrap; gap: 0;
  align-items: baseline;
  border-top: 1px solid var(--rule-hair);
  padding-top: 12px;
}
.hv .hv-op .op-prop-iss-cell {
  display: inline-flex; align-items: baseline; gap: 8px;
  padding: 0 18px;
  border-right: 1px solid var(--rule-hair);
}
.hv .hv-op .op-prop-iss-cell:first-child { padding-left: 0; }
.hv .hv-op .op-prop-iss-cell:last-child { border-right: 0; }
.hv .hv-op .op-prop-iss-cell .k {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
}
.hv .hv-op .op-prop-iss-cell .v {
  font-family: var(--f-mono);
  font-variant-numeric: tabular-nums lining-nums;
  font-size: 0.95rem; color: var(--ink);
  letter-spacing: 0;
}
.hv .hv-op .op-prop-iss-cell .v.is-pos { color: var(--positive, #2E6F40); }
.hv .hv-op .op-prop-iss-cell .v.is-neg { color: var(--negative, #A8361B); }
.hv .hv-op .op-prop-iss-cell .v.v--lbl {
  font-family: var(--f-body); font-size: 0.92rem;
  text-transform: capitalize; letter-spacing: 0;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 1100px) {
  .hv .hv-op .op-cli-strip { grid-template-columns: 1fr 1fr; }
  .hv .hv-op .op-cli-strip .op-led:nth-child(2) { border-right: 0; }
  .hv .hv-op .op-cli-strip .op-led:nth-child(1),
  .hv .hv-op .op-cli-strip .op-led:nth-child(2) {
    border-bottom: 1px solid var(--rule-hair);
  }
}
@media (max-width: 720px) {
  .hv .hv-op .op-cli-hd-row { grid-template-columns: 1fr; }
  .hv .hv-op .op-cli-hd-actions { margin-top: 8px; }
  .hv .hv-op .op-cli-strip { grid-template-columns: 1fr; }
  .hv .hv-op .op-cli-strip .op-led {
    border-right: 0;
    border-bottom: 1px solid var(--rule-hair);
  }
  .hv .hv-op .op-cli-strip .op-led:last-child { border-bottom: 0; }
  .hv .hv-op .op-prop-hd { grid-template-columns: 1fr; }
  .hv .hv-op .op-prop-actions { margin-top: 4px; }
  .hv .hv-op .op-prop-iss-cell { padding: 0 12px 0 0; border-right: 0; }
}


/* =========================================================
   Phase 6c — Editorial operator client sub-pages
   (operator_client_documents.html, operator_client_users.html)

   Append to app/static/css/public.css. AFTER Phase 6a + 6b appends.
   All selectors namespaced under `.hv .hv-op …`.

   Reuses (must be present from 6a/6b):
     .op, .op-hd, .op-sec, .op-table*, .op-empty, .op-status*,
     .op-flash, .op-link, .btn-ink, .btn-line.

   New atoms shipped in 6c (reusable in 6d/6e):
     .op-back              ← back link above masthead
     .op-tag               ← neutral mono caps chip (e.g. doc category)
     .op-mute              ← muted dash for empty table cells
     .op-doc-name          ← filename styling in docs table
     .op-doc-desc          ← italic description below filename
     .op-foot              ← right-aligned page-footer action strip
     .op-flash--err        ← error variant of .op-flash (red accent)
     .op-split             ← 1fr / 340px two-column page layout
     .op-sec--snug         ← tighter section variant for use inside split
     .op-act-form          ← inline form (display:inline) for table actions
     .btn-line--pos        ← positive (enable) variant of .btn-line
     .btn-line--neg        ← negative (disable) variant of .btn-line
     .op-form-panel        ← sidebar form container (form-aside)
     .op-form-hd           ← panel header (§ 02 + h2)
     .op-form-sub          ← italic subtitle inside panel
     .op-form              ← editorial form layout
     .op-form-row          ← vertical label + input + help
     .op-form-lbl          ← mono caps label
     .op-form-lbl .req     ← inline "required" tag (mono caps, red)
     .op-form-input        ← text input matching .op-toolbar select
     .op-form-help         ← italic helper text
   ========================================================= */

/* ── Back link (above .op-hd masthead) ──────────────────── */
.hv .hv-op .op-back {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ink-mute);
  text-decoration: none;
  margin-bottom: 18px;
  padding: 4px 0;
  border-bottom: 1px solid transparent;
  transition: color 140ms ease, border-color 140ms ease;
}
.hv .hv-op .op-back:hover {
  color: var(--bronze-deep);
  border-bottom-color: var(--bronze-deep);
}

/* ── Neutral mono caps chip (category labels, etc.) ─────── */
.hv .hv-op .op-tag {
  display: inline-flex; align-items: center;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 3px 9px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-soft);
  white-space: nowrap;
}

/* ── Muted dash for empty cells ─────────────────────────── */
.hv .hv-op .op-mute { color: var(--ink-mute); }

/* ── Documents table ─ filename + italic description ─────── */
.hv .hv-op .op-doc-name {
  font-weight: 500;
  color: var(--ink);
  max-width: 320px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hv .hv-op .op-doc-desc {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.92rem;
  margin-top: 3px;
}

/* ── Page-footer action strip (right-aligned link row) ──── */
.hv .hv-op .op-foot {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--rule-hair);
  text-align: right;
}
.hv .hv-op .op-foot .op-link {
  font-family: var(--f-mono); font-size: 0.72rem;
  letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--bronze-deep); text-decoration: none;
  border-bottom: 1px solid transparent;
  padding-bottom: 2px;
}
.hv .hv-op .op-foot .op-link:hover { border-bottom-color: var(--bronze-deep); }

/* ── Flash banner ─ error variant (red accent) ──────────── */
.hv .hv-op .op-flash--err {
  border-left-color: var(--negative, #B23A3A);
  background: var(--negative-bg, #F7ECEC);
}
.hv .hv-op .op-flash--err .k { color: var(--negative, #B23A3A); }
.hv .hv-op .op-flash--err .m { color: var(--ink); }

/* ── Two-column page split (1fr / 340px) ─────────────────
   Used by operator_client_users.html: roster on left, invite
   form on right. Stack on tablet/phone. */
.hv .hv-op .op-split {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  margin-top: 32px;
  align-items: start;
}

/* ── Snugger section (drops the top border + reduces top margin)
       so a section inside .op-split doesn't fight with its peers. */
.hv .hv-op .op-sec--snug {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* ── Inline form wrapper for table actions ──────────────── */
.hv .hv-op .op-act-form { display: inline; margin: 0; padding: 0; }

/* ── .btn-line color variants (extends 6b's .btn-line) ─── */
.hv .hv-op .btn-line--pos {
  color: var(--positive, #2E6F40);
  border-color: rgba(46, 111, 64, 0.35);
  background: var(--positive-bg, #ECF3EE);
}
.hv .hv-op .btn-line--pos:hover {
  background: var(--positive, #2E6F40);
  color: var(--ivory);
  border-color: var(--positive, #2E6F40);
}
.hv .hv-op .btn-line--neg {
  color: var(--negative, #B23A3A);
  border-color: rgba(178, 58, 58, 0.35);
  background: var(--negative-bg, #F7ECEC);
}
.hv .hv-op .btn-line--neg:hover {
  background: var(--negative, #B23A3A);
  color: var(--ivory);
  border-color: var(--negative, #B23A3A);
}

/* ── Form-panel sidebar (the "Invite" aside) ────────────── */
.hv .hv-op .op-form-panel {
  background: var(--ivory);
  border: 1px solid var(--rule);
  padding: 28px 28px 30px;
}

/* Header row for the form panel — mirrors .sec-hd but with no
   description column, since the panel is narrow. */
.hv .hv-op .op-form-hd {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 12px;
  align-items: baseline;
  padding-bottom: 14px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--rule-hair);
}
.hv .hv-op .op-form-hd .num {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bronze-deep);
}
.hv .hv-op .op-form-hd h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.3rem; letter-spacing: -0.01em; margin: 0;
}

.hv .hv-op .op-form-sub {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-soft); font-size: 0.96rem; line-height: 1.5;
  margin: 0 0 22px;
}

/* ── Form layout ─ vertical stack, generous spacing ────── */
.hv .hv-op .op-form {
  display: flex; flex-direction: column; gap: 18px;
}

.hv .hv-op .op-form-row {
  display: flex; flex-direction: column; gap: 6px;
}

.hv .hv-op .op-form-lbl {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
  display: flex; align-items: baseline; gap: 8px;
}
.hv .hv-op .op-form-lbl .req {
  font-family: var(--f-mono); font-size: 0.6rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--negative, #B23A3A);
  font-weight: 500;
}

/* Text input — matches the toolbar select chrome from 6a so
   form fields and selects feel like one family. */
.hv .hv-op .op-form-input {
  font-family: var(--f-body); font-size: 0.95rem; color: var(--ink);
  padding: 9px 12px; line-height: 1.4;
  border: 1px solid var(--rule); border-radius: 0;
  background: #fff;
  appearance: none; -webkit-appearance: none;
  width: 100%;
  transition: border-color 140ms ease, background-color 140ms ease;
}
.hv .hv-op .op-form-input:focus {
  outline: 0;
  border-color: var(--bronze-deep);
  background: #fff;
}
.hv .hv-op .op-form-input::placeholder {
  color: var(--ink-mute);
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
}

.hv .hv-op .op-form-help {
  font-family: 'Instrument Serif', Georgia, serif; font-style: italic;
  color: var(--ink-mute); font-size: 0.9rem; line-height: 1.4;
  margin-top: 2px;
}

/* The submit button ─ reuse .btn-ink from 6a; just give it
   block width inside the form panel. */
.hv .hv-op .op-form-panel .btn-ink {
  display: block; width: 100%;
  text-align: center;
  margin-top: 6px;
  cursor: pointer;
  background: var(--ink); color: var(--ivory);
  border: 1px solid var(--ink);
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .hv .hv-op .op-split {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .hv .hv-op .op-form-panel { padding: 24px 22px 26px; }
}
@media (max-width: 720px) {
  .hv .hv-op .op-doc-name { max-width: 200px; }
  .hv .hv-op .op-foot { text-align: left; }
}
/* =========================================================
   Phase 6d — Editorial operator intake & ops workflows
   (operator_intake_queue, operator_intake_review,
    operator_parsed_data_list, operator_parsed_data_detail,
    operator_ops_manual)

   Append to app/static/css/public.css. AFTER Phase 6a + 6b + 6c.
   All selectors namespaced under `.hv .hv-op …`.

   Reuses (must be present from 6a/6b/6c):
     6a: .op, .op-hd, .op-sec, .op-table*, .op-empty, .op-status*,
         .op-flash, .op-link, .btn-ink
     6b: .btn-line
     6c: .op-back, .op-tag, .op-mute, .op-doc-name, .op-doc-desc,
         .op-foot, .op-flash--err, .op-split, .op-sec--snug,
         .op-act-form, .btn-line--pos, .btn-line--neg,
         .op-form-panel, .op-form-hd, .op-form-sub, .op-form,
         .op-form-row, .op-form-lbl, .op-form-input, .op-form-help

   New atoms shipped in 6d (reusable in 6e):
     .op-pillbar           ← horizontal flex of filter pills (right-aligned)
     .op-pill              ← neutral mono caps pill (filter)
     .op-pill--on          ← active filter (ink-filled)
     .op-pill .ct          ← count badge inside pill
     .op-conf              ← confidence meter (inline-flex bar + pct)
     .op-conf .bar         ← meter track
     .op-conf .bar > i     ← meter fill
     .op-conf .pct         ← mono caps percentage
     .op-conf--hi          ← ≥80% (positive green)
     .op-conf--mid         ← 50–79% (bronze)
     .op-conf--lo          ← <50% (negative red)
     .op-flash--warn       ← warning variant (limit warnings)
     .op-status--info      ← intake "pending review" pill (bronze, neutral-warm)
     .op-deflist           ← key/value rows (mono caps label, body value)
     .op-deflist .row
     .op-deflist .lbl      ← mono caps label column
     .op-deflist .val      ← body value column
     .op-subhd             ← sub-section header inside a card (mono caps + hairline)
     .op-revexp            ← revenue/expenses ledger inside parsed-data card
     .op-rawjson           ← raw JSON fallback (mono, indented, hairline)
     .btn-ink--neg         ← full-width negative variant (Reject)
     .btn-ink--warn        ← full-width warning variant (Revert)
     .op-art               ← long-form article body (Ops Manual)
     .op-art h3            ← subsection heading inside article
     .op-hd-tools          ← right-side tool slot inside .op-hd masthead
     .op-split--narrow     ← .op-split with 280px right column (parsed-data detail)
   ========================================================= */

/* ── Filter pillbar (status filters on parsed-data list) ── */
.hv .hv-op .op-pillbar {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
  margin-top: 4px;
}
.hv .hv-op .op-pill {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; line-height: 1;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  background: var(--paper);
  color: var(--ink-mute);
  text-decoration: none;
  white-space: nowrap;
  transition: color 140ms ease, background-color 140ms ease, border-color 140ms ease;
}
.hv .hv-op .op-pill:hover {
  color: var(--ink);
  border-color: var(--ink-soft);
}
.hv .hv-op .op-pill .ct {
  font-family: var(--f-mono); font-size: 0.62rem; letter-spacing: 0.1em;
  color: var(--ink-mute);
  font-feature-settings: "tnum";
}
.hv .hv-op .op-pill--on {
  color: var(--ivory);
  background: var(--ink);
  border-color: var(--ink);
}
.hv .hv-op .op-pill--on:hover { color: var(--ivory); border-color: var(--ink); }
.hv .hv-op .op-pill--on .ct { color: var(--ivory); opacity: 0.7; }

/* ── Confidence meter (parsed-data list cell) ──────────── */
.hv .hv-op .op-conf {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--f-mono);
}
.hv .hv-op .op-conf .bar {
  position: relative;
  width: 56px; height: 4px;
  background: var(--rule);
  border-radius: 0;
  overflow: hidden;
}
.hv .hv-op .op-conf .bar > i {
  display: block; height: 100%;
  background: currentColor;
}
.hv .hv-op .op-conf .pct {
  font-size: 0.72rem; letter-spacing: 0.08em;
  font-feature-settings: "tnum"; line-height: 1;
  color: currentColor;
  min-width: 32px; text-align: right;
}
.hv .hv-op .op-conf--hi  { color: var(--positive, #2E6F40); }
.hv .hv-op .op-conf--mid { color: var(--bronze-deep); }
.hv .hv-op .op-conf--lo  { color: var(--negative, #B23A3A); }

/* ── Flash banner ─ warn variant (limit warnings) ──────── */
.hv .hv-op .op-flash--warn {
  border-left-color: var(--bronze-deep);
  background: var(--bronze-wash);
}
.hv .hv-op .op-flash--warn .k { color: var(--bronze-deep); }
.hv .hv-op .op-flash--warn .m { color: var(--ink); }

/* ── Status chip ─ "info" variant (pending / under review)
   Bronze-warm, distinct from --pilot (which is brand-bronze
   for "pilot client"). Slightly cooler ink color. */
.hv .hv-op .op-status--info {
  color: #6B5630;
  border-color: rgba(107, 86, 48, 0.32);
  background: #F4EDDF;
}

/* ── Definition list (key/value rows) ─────────────────────
   Used in: intake review (left col), parsed-data detail
   right-side Details panel, parsed-data detail revenue/expenses.
   Two-column at default; collapses to one column on narrow. */
.hv .hv-op .op-deflist {
  margin: 0;
  display: flex; flex-direction: column;
}
.hv .hv-op .op-deflist .row {
  display: grid;
  grid-template-columns: 180px 1fr;
  gap: 18px;
  padding: 9px 0;
  border-bottom: 1px solid var(--rule-hair);
  align-items: baseline;
}
.hv .hv-op .op-deflist .row:last-child { border-bottom: 0; }
.hv .hv-op .op-deflist .lbl {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute);
  font-weight: 500;
}
.hv .hv-op .op-deflist .val {
  font-size: 0.96rem; color: var(--ink); line-height: 1.5;
  font-feature-settings: "tnum";
  word-break: break-word;
}
.hv .hv-op .op-deflist .val.is-empty { color: var(--ink-mute); }

/* Compact variant for narrow side panels (no second column,
   stacked label-on-top). Used by parsed-data detail Details panel. */
.hv .hv-op .op-deflist--stack .row {
  grid-template-columns: 1fr;
  gap: 3px;
  padding: 0 0 12px;
  border-bottom: 0;
}
.hv .hv-op .op-deflist--stack .row + .row { padding-top: 4px; }

/* ── Sub-section heading inside a card (Revenue / Expenses) ─ */
.hv .hv-op .op-subhd {
  display: flex; align-items: baseline; gap: 12px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-hair);
}
.hv .hv-op .op-subhd .num {
  font-family: var(--f-mono); font-size: 0.66rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-deep);
  flex: 0 0 auto;
}
.hv .hv-op .op-subhd .ttl {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.05rem; letter-spacing: -0.005em;
  color: var(--ink);
  margin: 0;
}
.hv .hv-op .op-subhd + .op-subhd { margin-top: 28px; }
.hv .hv-op .op-deflist + .op-subhd { margin-top: 28px; }

/* Raw JSON fallback (when parser returned no structure) */
.hv .hv-op .op-rawjson {
  font-family: var(--f-mono);
  font-size: 0.78rem; line-height: 1.55;
  color: var(--ink-soft);
  background: var(--paper);
  border: 1px solid var(--rule-hair);
  padding: 14px 16px;
  margin: 12px 0 0;
  white-space: pre-wrap; word-break: break-word;
  max-height: 320px; overflow: auto;
}

/* ── Full-width form-panel button variants ─────────────── */
.hv .hv-op .op-form-panel .btn-ink--neg {
  display: block; width: 100%;
  text-align: center;
  margin-top: 6px;
  padding: 11px 18px;
  font-family: var(--f-mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  background: var(--negative, #B23A3A);
  color: var(--ivory);
  border: 1px solid var(--negative, #B23A3A);
  transition: background-color 140ms ease, color 140ms ease;
}
.hv .hv-op .op-form-panel .btn-ink--neg:hover {
  background: #8E2D2D;
  border-color: #8E2D2D;
}
.hv .hv-op .op-form-panel .btn-ink--warn {
  display: block; width: 100%;
  text-align: center;
  margin-top: 6px;
  padding: 11px 18px;
  font-family: var(--f-mono); font-size: 0.72rem;
  letter-spacing: 0.18em; text-transform: uppercase;
  cursor: pointer;
  background: var(--bronze-wash);
  color: var(--bronze-deep);
  border: 1px solid rgba(138, 106, 54, 0.45);
  transition: background-color 140ms ease, color 140ms ease;
}
.hv .hv-op .op-form-panel .btn-ink--warn:hover {
  background: var(--bronze-deep);
  color: var(--ivory);
  border-color: var(--bronze-deep);
}

/* Reset .btn-ink--neg / --warn outside of form-panel context
   (in case used inline in tables — keep it slim). Default is
   the form-panel block style above. */

/* ── Long-form article body (Ops Manual) ───────────────── */
.hv .hv-op .op-art {
  font-family: 'Instrument Serif', Georgia, serif;
  font-size: 1.04rem; line-height: 1.7;
  color: var(--ink);
  white-space: pre-wrap;
  word-break: break-word;
  max-width: 64ch;
}
.hv .hv-op .op-art p { margin: 0 0 1em; }
.hv .hv-op .op-art p:last-child { margin-bottom: 0; }

/* Subsection (within an Ops Manual section) */
.hv .hv-op .op-art-sub {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid var(--rule-hair);
}
.hv .hv-op .op-art-sub h3 {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.15rem; letter-spacing: -0.005em;
  margin: 0 0 10px;
  color: var(--ink);
}
.hv .hv-op .op-art-sub .op-art {
  font-size: 1rem;
  color: var(--ink-soft);
}

/* ── Masthead right-side tool slot ──────────────────────
   Lets a single CTA (e.g. "Download .docx") sit to the right
   of the .op-hd masthead instead of stacking below it. */
.hv .hv-op .op-hd-tools {
  position: absolute;
  top: 0; right: 0;
  display: flex; gap: 10px; align-items: center;
}
.hv .hv-op .op-hd { position: relative; }

/* ── Narrow split (1fr / 280px) for parsed-data detail
   where right column is just metadata + small action buttons. */
.hv .hv-op .op-split--narrow {
  grid-template-columns: 1fr 280px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .hv .hv-op .op-split--narrow { grid-template-columns: 1fr; }
  .hv .hv-op .op-hd-tools { position: static; margin-top: 14px; }
  .hv .hv-op .op-deflist .row { grid-template-columns: 140px 1fr; gap: 12px; }
}
@media (max-width: 720px) {
  .hv .hv-op .op-deflist .row { grid-template-columns: 1fr; gap: 2px; }
  .hv .hv-op .op-conf .bar { width: 40px; }
  .hv .hv-op .op-pillbar { gap: 6px; }
  .hv .hv-op .op-pill { padding: 5px 9px; font-size: 0.6rem; }
}

/* =========================================================
   Phase 6e — Editorial operator property/form/data pages
   (operator_reports, operator_resources, operator_system,
    operator_new_client, operator_new_property,
    operator_property, operator_property_edit,
    operator_annual_data, operator_monthly_data)

   Append to app/static/css/public.css. AFTER Phase 6a–6d.

   New atoms shipped in 6e:
     .op-form-grid          ← 2-col form layout
     .op-form-grid--3       ← 3-col variant
     .op-form-input--err    ← error border on inputs/selects
     .op-form-check         ← checkbox/radio label row
     .op-form-radios        ← flex container for radio group
     .op-form-row--h        ← horizontal row (label left 220px, input right)
     .op-form-input--sm     ← compact input (monthly data cells)
     .op-month-ok/partial/empty ← completeness status colours
     .op-quicklinks         ← stacked link list in side panel
     .op-monthly-table      ← month-grid table overrides
   ========================================================= */

/* ── Multi-column form grid ─────────────────────────────── */
.hv .hv-op .op-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
.hv .hv-op .op-form-grid--3 {
  grid-template-columns: 1fr 1fr 1fr;
}

/* ── Error state (validation failure border) ────────────── */
.hv .hv-op .op-form-input--err {
  border-color: var(--negative, #B23A3A);
}

/* ── Checkbox / radio label ─────────────────────────────── */
.hv .hv-op .op-form-check {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  color: var(--ink);
  margin: 0;
}
.hv .hv-op .op-form-check input[type="checkbox"],
.hv .hv-op .op-form-check input[type="radio"] {
  width: 15px; height: 15px;
  flex: 0 0 auto;
  cursor: pointer;
  accent-color: var(--ink);
}
.hv .hv-op .op-form-radios {
  display: flex;
  gap: 20px;
  flex-wrap: wrap;
  align-items: center;
}

/* ── Horizontal form row (annual data — label 220px left) ─ */
.hv .hv-op .op-form-row--h {
  display: grid;
  grid-template-columns: 220px 1fr;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.hv .hv-op .op-form-row--h .op-form-lbl {
  text-align: right;
  padding-top: 2px;
}

/* ── Compact input (monthly data table cells) ───────────── */
.hv .hv-op .op-form-input--sm {
  width: 72px;
  padding: 4px 6px;
  font-size: 0.8rem;
  text-align: right;
}

/* ── Monthly completeness status colours ────────────────── */
.hv .hv-op .op-month-ok      { color: var(--positive, #2E6F40); font-size: 1rem; }
.hv .hv-op .op-month-partial { color: var(--bronze-deep); font-size: 1rem; }
.hv .hv-op .op-month-empty   { color: var(--ink-mute); font-size: 1rem; }

/* ── Quick-links side panel ─────────────────────────────── */
.hv .hv-op .op-quicklinks {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.hv .hv-op .op-quicklinks .op-link {
  padding: 8px 0;
  border-bottom: 1px solid var(--rule-hair);
  display: block;
}
.hv .hv-op .op-quicklinks .op-link:last-child { border-bottom: 0; }

/* ── Monthly data table (compact cell padding) ──────────── */
.hv .hv-op .op-monthly-table td,
.hv .hv-op .op-monthly-table th {
  padding: 6px 4px;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 960px) {
  .hv .hv-op .op-form-grid,
  .hv .hv-op .op-form-grid--3 {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 720px) {
  .hv .hv-op .op-form-row--h {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .hv .hv-op .op-form-row--h .op-form-lbl {
    text-align: left;
  }
  .hv .hv-op .op-form-input--sm { width: 58px; font-size: 0.75rem; }
}

/* ═══════════════════════════════════════════════════════════
   PHASE 7 — Nav-4c alignment fixes
   nav-public-4c.html uses position:relative (not fixed), so
   .lp-hero's margin-top:72px (legacy fixed-nav clearance) must
   be zeroed for all pages that use nav-4c.
   ═══════════════════════════════════════════════════════════ */

/* Zero the fixed-nav clearance — nav-4c is position:relative */
.nav.nav-4c ~ .lp-hero,
.nav.nav-4c ~ .nav-mobile ~ .lp-hero { margin-top: 0; }

/* Resources tab nav — align inner max-width with .lp-section-inner */
.res-tab-nav { max-width: 1060px; margin: 0 auto; padding: 0 2rem; display: flex; gap: 0; }
}

/* ═══════════════════════════════════════════════════════════
   HOMEPAGE — .hp-* components
   Scoped under .hv (the homepage outer wrapper class).
   Inherits .hv base: wrap, btn, eyebrow, chip from above.
   ═══════════════════════════════════════════════════════════ */

/* ── Value utilities (positive / negative) ──────────────── */
.hv .pos { color: var(--positive); }
.hv .neg { color: var(--negative); }

/* ── Hero ────────────────────────────────────────────────── */
.hv .hp-hero {
  padding: 80px 0 72px;
  border-bottom: 1px solid var(--rule);
}
.hv .hp-hero h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.8rem, 5vw, 4.2rem);
  letter-spacing: -0.035em; line-height: 1.05;
  margin: 28px 0 0; max-width: 20ch;
}
.hv .hp-hero-sub {
  font-size: 1.1rem; line-height: 1.65; color: var(--ink-soft);
  max-width: 54ch; margin: 20px 0 0;
}
.hv .hp-hero-ctas {
  display: flex; gap: 14px; align-items: center; margin-top: 36px;
}
.hv .hp-hero-note {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 18px;
}

/* ── Problem ─────────────────────────────────────────────── */
.hv .hp-problem {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.hv .hp-problem h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.2rem, 3.8vw, 3.2rem);
  letter-spacing: -0.03em; line-height: 1.05;
  margin: 18px 0 28px; max-width: 24ch;
}
.hv .hp-problem p {
  font-size: 1rem; line-height: 1.65; color: var(--ink-soft);
  max-width: 60ch; margin: 0 0 16px;
}

/* ── Worked Example ──────────────────────────────────────── */
.hv .hp-example {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
}
.hv .hp-example h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em; line-height: 1.08;
  margin: 18px 0 40px; max-width: 28ch;
}
.hv .hp-ex-grid {
  display: grid; grid-template-columns: 1fr 1.7fr;
  border: 1px solid var(--rule);
}
.hv .hp-ex-inputs {
  padding: 36px 32px 40px;
  background: var(--paper);
  border-right: 1px solid var(--rule);
}
.hv .hp-ex-inputs h3 {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--ink-mute); margin: 0 0 20px;
}
.hv .hp-ex-inputs dl {
  display: grid; grid-template-columns: 1fr auto;
  gap: 0; margin: 0;
}
.hv .hp-ex-inputs dt {
  font-size: 0.9rem; color: var(--ink-soft);
  padding: 8px 0; border-bottom: 1px solid var(--rule-hair);
}
.hv .hp-ex-inputs dd {
  font-family: var(--f-mono); font-size: 0.9rem; color: var(--ink);
  font-variant-numeric: tabular-nums; text-align: right;
  padding: 8px 0; border-bottom: 1px solid var(--rule-hair);
  margin: 0;
}
.hv .hp-ex-inputs dd.neg { color: var(--negative); }
.hv .hp-ex-compare {
  padding: 36px 32px 40px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 28px;
  align-items: start;
}
.hv .hp-ex-col {
  border: 1px solid var(--rule); padding: 24px 24px 28px;
}
.hv .hp-ex-col--before { background: var(--paper); }
.hv .hp-ex-col--after { background: var(--ivory); }
.hv .hp-ex-label {
  font-family: var(--f-mono); font-size: 0.68rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 10px;
}
.hv .hp-ex-headline {
  font-family: var(--f-display); font-weight: 300;
  font-size: 2.2rem; letter-spacing: -0.03em; line-height: 1;
  margin: 8px 0;
}
.hv .hp-ex-headline.neg { color: var(--negative); }
.hv .hp-ex-headline.pos { color: var(--positive); }
.hv .hp-ex-caption {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--ink-mute); margin-top: 8px;
}
.hv .hp-ex-breakdown {
  margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: 1fr auto;
  border-top: 1px solid var(--rule-hair);
}
.hv .hp-ex-breakdown dt {
  font-size: 0.88rem; color: var(--ink-soft);
  padding: 8px 0; border-bottom: 1px solid var(--rule-hair);
}
.hv .hp-ex-breakdown dd {
  font-family: var(--f-mono); font-size: 0.88rem;
  font-variant-numeric: tabular-nums; text-align: right;
  padding: 8px 0; border-bottom: 1px solid var(--rule-hair);
  margin: 0;
}
.hv .hp-ex-breakdown dd.neg { color: var(--negative); }
.hv .hp-ex-breakdown dd.pos { color: var(--positive); }
.hv .hp-ex-total { padding-top: 14px; border-top: 1px solid var(--rule); }
.hv .hp-ex-irr {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--ink-mute); margin-top: 6px;
}
.hv .hp-ex-disclaimer {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--ink-mute); line-height: 1.6;
  margin-top: 24px; padding-top: 16px;
  border-top: 1px solid var(--rule-hair);
}

/* ── Six Metrics ──────────────────────────────────────────── */
.hv .hp-metrics {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.hv .hp-metrics h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em; line-height: 1.08; margin: 18px 0 0;
}
.hv .hp-metrics-lede {
  font-size: 1rem; line-height: 1.65; color: var(--ink-soft);
  max-width: 64ch; margin: 18px 0 40px;
}
.hv .hp-metric-list {
  list-style: none; margin: 0 0 36px; padding: 0;
  border-top: 1px solid var(--rule);
  counter-reset: metric;
}
.hv .hp-metric-list li {
  display: grid; grid-template-columns: 36px 1fr 2fr;
  gap: 0 24px; align-items: baseline;
  padding: 18px 0; border-bottom: 1px solid var(--rule-hair);
  counter-increment: metric;
}
.hv .hp-metric-list li::before {
  content: counter(metric, decimal-leading-zero);
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.1em;
  color: var(--bronze-deep); font-variant-numeric: tabular-nums;
}
.hv .hm-name {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.1rem; letter-spacing: -0.01em; color: var(--ink);
}
.hv .hm-desc {
  font-size: 0.92rem; line-height: 1.55; color: var(--ink-soft);
}

/* ── Two Paths ────────────────────────────────────────────── */
.hv .hp-paths {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
}
.hv .hp-paths h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em; line-height: 1.08;
  margin: 18px 0 36px;
}
.hv .hp-paths-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
}
.hv .hp-path {
  padding: 40px 44px 44px;
  background: var(--paper);
  border-right: 1px solid var(--rule-hair);
}
.hv .hp-path:last-child { border-right: 0; background: var(--ivory); }
.hv .hp-path-label {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bronze-deep);
  padding-bottom: 12px; border-bottom: 1px solid var(--rule-hair);
  margin-bottom: 18px;
}
.hv .hp-path p {
  font-size: 0.96rem; line-height: 1.65; color: var(--ink-soft); margin: 0;
}
.hv .hp-paths-note {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.06em;
  color: var(--ink-mute); line-height: 1.6; margin-top: 24px;
}

/* ── Scope / Disclaimer ───────────────────────────────────── */
.hv .hp-scope {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.hv .hp-scope h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em; line-height: 1.08;
  margin: 18px 0 20px;
}
.hv .hp-scope-disc {
  font-family: var(--f-mono); font-size: 1rem; letter-spacing: 0.03em;
  color: var(--ink); line-height: 1.6;
  padding-left: 20px; border-left: 2px solid var(--bronze);
  margin: 0 0 18px;
}
.hv .hp-scope p {
  font-size: 0.96rem; line-height: 1.6; color: var(--ink-soft); margin: 0;
}

/* ── Journal / Early Access ───────────────────────────────── */
.hv .hp-journal {
  padding: 80px 0;
}
.hv .hp-journal h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em; line-height: 1.08; margin: 18px 0 0;
}
.hv .hp-journal p {
  font-size: 1rem; line-height: 1.65; color: var(--ink-soft);
  max-width: 54ch; margin: 18px 0 32px;
}
.hv .hp-journal-form {
  display: grid; grid-template-columns: 1fr auto;
  max-width: 480px;
}
.hv .hp-journal-form input[type="email"] {
  font-family: var(--f-body); font-size: 1rem;
  padding: 14px 16px; background: var(--ivory); color: var(--ink);
  border: 1px solid var(--rule); border-right: 0; outline: none;
}
.hv .hp-journal-form input[type="email"]:focus { border-color: var(--bronze-deep); }
.hv .hp-journal-form button {
  font-family: var(--f-body); font-weight: 500; font-size: 0.92rem;
  padding: 0 22px; cursor: pointer; white-space: nowrap;
  background: var(--ink); color: var(--ivory); border: 1px solid var(--ink);
}
.hv .hp-journal-form button:hover { background: #000; }

/* ── Homepage responsive ──────────────────────────────────── */
@media (max-width: 880px) {
  .hv .hp-ex-grid { grid-template-columns: 1fr; }
  .hv .hp-ex-inputs { border-right: 0; border-bottom: 1px solid var(--rule); }
  .hv .hp-ex-compare { grid-template-columns: 1fr; gap: 20px; }
  .hv .hp-paths-grid { grid-template-columns: 1fr; }
  .hv .hp-path { border-right: 0; border-bottom: 1px solid var(--rule-hair); }
  .hv .hp-path:last-child { border-bottom: 0; }
  .hv .hp-metric-list li { grid-template-columns: 28px 1fr; }
  .hv .hm-desc { grid-column: 2; }
}
@media (max-width: 600px) {
  .hv .hp-hero { padding: 56px 0 48px; }
  .hv .hp-problem,
  .hv .hp-example,
  .hv .hp-metrics,
  .hv .hp-paths,
  .hv .hp-scope,
  .hv .hp-journal { padding: 56px 0; }
  .hv .hp-hero-ctas { flex-direction: column; align-items: flex-start; }
  .hv .hp-journal-form { grid-template-columns: 1fr; }
  .hv .hp-journal-form input[type="email"] {
    border-right: 1px solid var(--rule); border-bottom: 0;
  }
  .hv .hp-journal-form button { padding: 14px 22px; }
}

/* ═══════════════════════════════════════════════════════════
   PRICING PAGE — .pr-* components
   ═══════════════════════════════════════════════════════════ */

.hv .pr-hero {
  padding: 72px 0 64px;
  border-bottom: 1px solid var(--rule);
}
.hv .pr-hero h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2.8rem, 5vw, 4rem);
  letter-spacing: -0.035em; line-height: 1.05;
  margin: 18px 0 0; max-width: 18ch;
}
.hv .pr-hero-sub {
  font-family: var(--f-mono); font-size: 0.82rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-mute); margin-top: 18px;
}

.hv .pr-cards {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
}
.hv .pr-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  border: 1px solid var(--rule);
}
.hv .pr-tier {
  padding: 48px 44px 52px;
  background: var(--paper);
  border-right: 1px solid var(--rule-hair);
  display: flex; flex-direction: column;
}
.hv .pr-tier:last-child { border-right: 0; background: var(--ivory); }
.hv .pr-tier--flag { background: var(--ivory); }
.hv .pr-tier-tag {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bronze-deep);
}
.hv .pr-tier-props {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.06em;
  color: var(--ink-mute); margin-top: 6px;
}
.hv .pr-tier-price {
  font-family: var(--f-display); font-weight: 200;
  font-size: 5rem; letter-spacing: -0.04em; line-height: 0.95;
  margin-top: 28px; color: var(--ink); font-variant-numeric: tabular-nums;
}
.hv .pr-cur {
  font-family: var(--f-display); font-size: 2rem;
  vertical-align: 0.85em; margin-right: 4px;
  color: var(--ink-mute); font-weight: 400;
}
.hv .pr-per {
  font-family: var(--f-body); font-size: 1rem;
  color: var(--ink-mute); margin-left: 6px; font-weight: 400;
}
.hv .pr-tier-list {
  list-style: none; margin: 28px 0 36px; padding: 0;
  border-top: 1px solid var(--rule-hair);
  flex: 1;
}
.hv .pr-tier-list li {
  padding: 11px 0; border-bottom: 1px solid var(--rule-hair);
  font-size: 0.94rem; color: var(--ink-soft); line-height: 1.5;
}
.hv .pr-tier-cta { margin-top: auto; }
.hv .pr-beta-note {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.08em;
  color: var(--ink-mute); margin-top: 12px;
}

.hv .pr-included {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
  background: var(--paper);
}
.hv .pr-included h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em; line-height: 1.08;
  margin: 18px 0 40px;
}
.hv .pr-inc-grid {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 0; border: 1px solid var(--rule);
}
.hv .pr-inc-item {
  padding: 32px 36px 36px;
  border-right: 1px solid var(--rule-hair);
  border-bottom: 1px solid var(--rule-hair);
}
.hv .pr-inc-item:nth-child(2n) { border-right: 0; }
.hv .pr-inc-item:nth-child(3),
.hv .pr-inc-item:nth-child(4) { border-bottom: 0; }
.hv .pr-inc-label {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--bronze-deep); margin-bottom: 12px;
}
.hv .pr-inc-item p {
  font-size: 0.94rem; line-height: 1.6; color: var(--ink-soft); margin: 0;
}

.hv .pr-scope {
  padding: 72px 0;
  border-bottom: 1px solid var(--rule);
}
.hv .pr-scope h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em; line-height: 1.08;
  margin: 18px 0 20px;
}
.hv .pr-scope-disc {
  font-family: var(--f-mono); font-size: 1rem; letter-spacing: 0.03em;
  color: var(--ink); line-height: 1.6;
  padding-left: 20px; border-left: 2px solid var(--bronze);
  margin: 0 0 18px;
}
.hv .pr-scope p {
  font-size: 0.96rem; line-height: 1.6; color: var(--ink-soft); margin: 0;
}

.hv .pr-faq {
  padding: 72px 0;
  background: var(--paper);
}
.hv .pr-faq h2 {
  font-family: var(--f-display); font-weight: 400;
  font-size: clamp(2.2rem, 3.4vw, 2.8rem);
  letter-spacing: -0.03em; line-height: 1.08;
  margin: 18px 0 40px;
}
.hv .pr-faq-list {
  max-width: 72ch; margin: 0;
}
.hv .pr-faq-list dt {
  font-family: var(--f-display); font-weight: 400;
  font-size: 1.15rem; letter-spacing: -0.01em; color: var(--ink);
  padding-top: 24px; border-top: 1px solid var(--rule-hair);
  margin-top: 24px;
}
.hv .pr-faq-list dt:first-child { padding-top: 0; border-top: 0; margin-top: 0; }
.hv .pr-faq-list dd {
  margin: 10px 0 0; font-size: 0.96rem; line-height: 1.65;
  color: var(--ink-soft);
}

@media (max-width: 880px) {
  .hv .pr-grid { grid-template-columns: 1fr; }
  .hv .pr-tier { border-right: 0; border-bottom: 1px solid var(--rule-hair); }
  .hv .pr-tier:last-child { border-bottom: 0; }
  .hv .pr-inc-grid { grid-template-columns: 1fr; }
  .hv .pr-inc-item { border-right: 0; }
  .hv .pr-inc-item:nth-child(3) { border-bottom: 1px solid var(--rule-hair); }
}

/* ═══════════════════════════════════════════════════════════
   PRE-BUY TOOL — .pb-* components
   ═══════════════════════════════════════════════════════════ */

.hv .pb-page {
  max-width: 620px; margin: 0 auto;
  padding: 64px 0 80px;
}
.hv .pb-hd { margin-bottom: 40px; }
.hv .pb-hd h1 {
  font-family: var(--f-display); font-weight: 300;
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  letter-spacing: -0.03em; line-height: 1.08; margin: 14px 0 0;
}
.hv .pb-deck {
  font-size: 1rem; line-height: 1.65; color: var(--ink-soft);
  margin: 16px 0 0;
}
.hv .pb-error {
  background: var(--negative-bg); border: 1px solid rgba(178,58,58,0.2);
  padding: 12px 16px; margin-bottom: 20px;
  color: var(--negative); font-size: 0.9rem;
}
.hv .pb-owner-note {
  background: var(--paper); border: 1px solid var(--rule);
  padding: 24px 28px; margin-bottom: 32px;
}
.hv .pb-owner-note p { font-size: 0.9rem; line-height: 1.6; color: var(--ink-soft); margin: 0 0 12px; }
.hv .pb-owner-note p:last-child { margin-bottom: 0; }
.hv .pb-owner-note-foot {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-mute); margin-top: 8px;
}
.hv .pb-form { display: flex; flex-direction: column; gap: 18px; }
.hv .pb-field { display: flex; flex-direction: column; gap: 6px; }
.hv .pb-label {
  font-family: var(--f-body); font-size: 0.88rem; font-weight: 500;
  color: var(--ink);
}
.hv .pb-label-note { font-weight: 400; color: var(--ink-mute); }
.hv .pb-input {
  font-family: var(--f-body); font-size: 1rem;
  padding: 10px 14px; background: var(--ivory); color: var(--ink);
  border: 1px solid var(--rule); outline: none;
}
.hv .pb-input:focus { border-color: var(--bronze-deep); }
.hv .pb-submit { margin-top: 8px; align-self: flex-start; }

.hv .pb-gate { margin-top: 8px; }
.hv .pb-gate-label {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--ink-mute); margin-bottom: 8px;
}
.hv .pb-gate-num {
  font-family: var(--f-display); font-weight: 200;
  font-size: 4rem; letter-spacing: -0.04em; line-height: 1;
  color: var(--bronze-deep); margin-bottom: 12px;
  font-variant-numeric: tabular-nums;
}
.hv .pb-gate-note {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--ink-mute); margin-bottom: 20px; line-height: 1.6;
}

.hv .pb-results { margin-top: 8px; }
.hv .pb-results-note {
  font-family: var(--f-mono); font-size: 0.7rem; letter-spacing: 0.06em;
  color: var(--ink-mute); margin-bottom: 20px; line-height: 1.6;
}
.hv .pb-table {
  width: 100%; border-collapse: collapse; border: 1px solid var(--rule);
  margin-bottom: 24px;
}
.hv .pb-table tr { border-bottom: 1px solid var(--rule-hair); }
.hv .pb-table tr:last-child { border-bottom: 0; }
.hv .pb-table td {
  padding: 12px 16px; font-size: 0.9rem; color: var(--ink-soft);
}
.hv .pb-val {
  text-align: right; font-family: var(--f-mono); font-weight: 500;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.hv .pb-disc {
  background: var(--paper); border-left: 2px solid var(--bronze);
  padding: 16px 20px; margin-bottom: 24px;
}
.hv .pb-disc p {
  font-family: var(--f-mono); font-size: 0.72rem; letter-spacing: 0.04em;
  color: var(--ink-mute); line-height: 1.6; margin: 0 0 8px;
}
.hv .pb-disc p:last-child { margin-bottom: 0; }