/* ===== Hero eyebrow: the differentiator badge above the title ===== */
    .hero-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        background: linear-gradient(135deg, var(--fhc-primary-soft), rgba(14,165,233,0.10));
        border: 1px solid var(--fhc-primary-border);
        color: var(--fhc-primary-700);
        font-size: 0.82rem;
        font-weight: 700;
        letter-spacing: 0.01em;
        padding: 0.4rem 0.85rem;
        border-radius: var(--fhc-radius-pill);
        margin-bottom: 1.1rem;
        backdrop-filter: blur(6px);
        -webkit-backdrop-filter: blur(6px);
    }
    .hero-eyebrow i { color: var(--fhc-primary-600); font-size: 0.88rem; }
    @media (prefers-reduced-motion: no-preference) {
        .hero-eyebrow {
            opacity: 0;
            transform: translateY(6px);
            animation: hero-subtle-in .45s ease-out .02s forwards;
        }
    }

    .landing-hero { padding-top: 44px; padding-bottom: 36px; }
    body.landing-page.is-guest .landing-hero {
        padding-top: clamp(44px, 5.5vw, 60px);
        padding-bottom: clamp(36px, 4.5vw, 48px);
    }
    .hero-title {
        font-size: clamp(2.8rem, 5vw, 4.2rem);
        line-height: 1.02;
        letter-spacing: -0.045em;
        max-width: 22ch;
        font-weight: 800;
        color: var(--fhc-ink-900);
    }
    body.landing-page.is-guest .hero-title.hero-title--guest-compact {
        /* ~15–18% smaller than prior guest hero — confident, not overwhelming. */
        font-size: clamp(2.45rem, 4.15vw, 3.72rem);
        letter-spacing: -0.04em;
        line-height: 1.05;
        max-width: min(46ch, 100%);
    }
    .hero-title-break {
        display: block;
        margin-top: 0.08em;
    }
    /* ========= Hero title reveal: sleek blur-to-sharp slide-up =========
       A single smooth motion — no bounce, no elastic. Blur + Y + opacity
       all resolve on the same curve so the headline feels *focused in*
       rather than "animated in". Feels like Linear / Vercel-grade intros.
       Triggers on page load since the hero is above the fold. */
    @media (prefers-reduced-motion: no-preference) {
        .hero-title {
            opacity: 0;
            transform: translateY(14px);
            filter: blur(10px);
            animation: hero-title-focus 780ms cubic-bezier(.22,.85,.24,1) 80ms forwards;
            will-change: opacity, transform, filter;
        }
    }
    @keyframes hero-title-focus {
        to {
            opacity: 1;
            transform: translateY(0);
            filter: blur(0);
        }
    }
    /* Returning users: shorter headline, gentler entrance (no heavy blur). */
    @media (prefers-reduced-motion: no-preference) {
        body.landing-page.is-authenticated .hero-title.hero-title--returning {
            filter: none;
            animation: hero-title-soft-in .55s cubic-bezier(.16, 1, .3, 1) 50ms forwards;
            will-change: opacity, transform;
        }
    }
    @keyframes hero-title-soft-in {
        from {
            opacity: 0;
            transform: translateY(8px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        body.landing-page.is-authenticated .hero-title.hero-title--returning {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            animation: none !important;
        }
    }
    body.landing-page.is-authenticated .hero-title.hero-title--returning {
        font-size: clamp(2.35rem, 4.8vw, 3.05rem);
        max-width: 28ch;
        letter-spacing: -0.036em;
        line-height: 1.08;
        font-weight: 800;
    }
    body.landing-page.is-authenticated .landing-hero {
        padding-top: clamp(48px, 8vw, 56px);
        padding-bottom: 28px;
    }

    /* --- Signed-in dashboard: momentum stats + cinematic upload focal --- */
    .hero-subtitle--dashboard {
        max-width: 38rem;
        margin-left: auto;
        margin-right: auto;
        text-align: center;
        opacity: .9;
    }
    .dashboard-momentum {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px 18px;
        max-width: 920px;
        margin: 0 auto 22px;
    }
    .dashboard-momentum-item {
        padding: 12px 14px 13px;
        border-radius: 16px;
        background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(240,253,250,.52) 100%);
        border: 1px solid rgba(6,182,212,.18);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.88),
            0 10px 28px rgba(15,23,42,.06);
        text-align: center;
    }
    .dashboard-momentum-value {
        display: block;
        font-size: clamp(1.35rem, 2.8vw, 1.72rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        line-height: 1;
        margin-bottom: 6px;
        background: linear-gradient(135deg, var(--fhc-success-700) 0%, var(--fhc-success-500) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-variant-numeric: tabular-nums;
    }
    .dashboard-momentum-label {
        font-size: .74rem;
        line-height: 1.42;
        color: var(--fhc-ink-600);
        font-weight: 600;
        display: block;
    }
    .hero-upload-zone {
        position: relative;
        max-width: 640px;
        margin-left: auto;
        margin-right: auto;
        padding: 1px;
        border-radius: 22px;
        background: linear-gradient(135deg, rgba(6,182,212,.42) 0%, rgba(37,99,235,.22) 50%, rgba(6,182,212,.38) 100%);
        box-shadow:
            0 24px 64px rgba(15,23,42,.14),
            0 10px 30px rgba(6,182,212,.22);
        overflow: hidden;
    }
    .hero-upload-zone::before {
        content: "";
        position: absolute;
        inset: -40%;
        background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.08) 0%, transparent 45%),
            radial-gradient(circle at 70% 80%, rgba(6,182,212,.09) 0%, transparent 50%);
        pointer-events: none;
        animation: hero-upload-zone-pulse 10s ease-in-out infinite alternate;
    }
    @keyframes hero-upload-zone-pulse {
        from { opacity: .75; transform: translate3d(-2%, 0, 0) scale(1); }
        to   { opacity: 1; transform: translate3d(2%, 2%, 0) scale(1.03); }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero-upload-zone::before { animation: none; opacity: .85; transform: none; }
    }
    .hero-upload-zone-inner {
        position: relative;
        border-radius: 21px;
        background:
            radial-gradient(120% 80% at 50% -20%, rgba(6,182,212,.14) 0%, transparent 55%),
            linear-gradient(185deg, rgba(255,255,255,.88) 0%, rgba(241,247,253,.92) 100%);
        border: 1px solid rgba(255,255,255,.65);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.92),
            inset 0 -1px 0 rgba(148,163,184,.12);
        -webkit-backdrop-filter: blur(16px) saturate(150%);
        backdrop-filter: blur(16px) saturate(150%);
    }
    .hero-upload-zone-eyebrow {
        font-size: .68rem;
        font-weight: 800;
        letter-spacing: .18em;
        text-transform: uppercase;
        color: var(--fhc-success-700);
        margin: 0;
    }
    .hero-upload-zone-title {
        font-size: clamp(1.08rem, 2.6vw, 1.42rem);
        font-weight: 700;
        letter-spacing: -0.026em;
        color: var(--fhc-ink-900);
        margin: 0;
    }
    .hero-upload-zone-hint {
        font-size: .9rem;
        color: var(--fhc-ink-500);
        margin: 0;
    }
    .hero-dashboard-secondary {
        text-align: center;
        font-size: .9rem;
        margin-top: 14px;
    }
    .hero-dashboard-secondary-link {
        color: var(--fhc-ink-500);
        font-weight: 600;
        text-decoration: none;
        border-bottom: 1px dashed rgba(100,116,139,.45);
        padding-bottom: 1px;
        transition: color .15s ease, border-color .15s ease;
    }
    .hero-dashboard-secondary-link:hover,
    .hero-dashboard-secondary-link:focus {
        color: var(--fhc-success-700);
        border-bottom-color: var(--fhc-success-border);
    }
    @media (max-width: 991.98px) {
        .dashboard-momentum {
            grid-template-columns: 1fr;
            margin-bottom: 18px;
        }
    }

    /* Logged-in home: tighter fold on phones (esp. Capacitor) — horizontal stat strip +
       quieter upload card so FAB / nav don’t visually fight the hero. */
    @media (max-width: 575.98px) {
        body.landing-page.is-authenticated .landing-hero {
            /* Clear fixed navbar + status bar; body padding-top alone is not enough on the hero. */
            padding-top: clamp(52px, 11vw, 68px);
            padding-bottom: max(100px, calc(72px + env(safe-area-inset-bottom, 0px)));
        }
        body.landing-page.is-authenticated .hero-title.hero-title--returning {
            font-size: clamp(1.52rem, 6.8vw, 1.92rem);
            line-height: 1.14;
            margin-bottom: .45rem !important;
        }
        body.landing-page.is-authenticated .hero-subtitle--dashboard {
            font-size: .9rem;
            line-height: 1.45;
            margin-bottom: .55rem !important;
            opacity: .88;
        }
        body.landing-page.is-authenticated .dashboard-momentum {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            gap: 8px;
            margin-bottom: 10px !important;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
            scroll-snap-type: x mandatory;
            overscroll-behavior-x: contain;
            padding: 2px 0 10px;
        }
        body.landing-page.is-authenticated .dashboard-momentum-item {
            flex: 0 0 auto;
            min-width: min(154px, 82vw);
            max-width: 168px;
            padding: 8px 10px 10px;
            scroll-snap-align: start;
            border-radius: 14px;
        }
        body.landing-page.is-authenticated .dashboard-momentum-value {
            font-size: 1.18rem;
            margin-bottom: 4px;
        }
        body.landing-page.is-authenticated .dashboard-momentum-label {
            font-size: .62rem;
            line-height: 1.34;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        body.landing-page.is-authenticated .hero-upload-zone {
            margin-bottom: .35rem !important;
            border-radius: 17px !important;
            box-shadow:
                0 14px 36px rgba(15,23,42,.09),
                0 8px 20px rgba(6,182,212,.14);
        }
        body.landing-page.is-authenticated .hero-upload-zone-inner {
            border-radius: 16px !important;
            padding: 14px 16px 14px !important;
        }
        body.landing-page.is-authenticated .hero-upload-zone-eyebrow {
            display: none;
        }
        body.landing-page.is-authenticated .hero-upload-zone-title {
            font-size: 1.02rem !important;
            margin-bottom: .3rem !important;
        }
        body.landing-page.is-authenticated .hero-upload-zone-hint {
            font-size: .78rem !important;
            margin-bottom: .7rem !important;
        }
        body.landing-page.is-authenticated .hero-cta-primary--dashboard.btn {
            padding-left: 1.35rem !important;
            padding-right: 1.35rem !important;
            padding-top: .62rem !important;
            padding-bottom: .62rem !important;
            font-size: 0.95rem !important;
        }
        body.landing-page.is-authenticated .hero-dashboard-secondary {
            margin-top: 6px;
            font-size: .81rem;
        }
        body.landing-page.is-authenticated .hero-cta-micro {
            font-size: .76rem !important;
            margin-top: .35rem !important;
            opacity: .72 !important;
        }
        body.landing-page.is-authenticated .landing-returning {
            padding-top: 0.5rem !important;
            padding-bottom: 1rem !important;
        }
    }

    /* The "30%" amount animates independently: a tiny delayed lift so the
       number "arrives" slightly after the sentence has settled, which
       makes the count-up feel intentional instead of part of the same
       blur reveal. */
    .hero-title-amount {
        display: inline-block;
        position: relative;
        font-variant-numeric: tabular-nums;
    }
    @media (prefers-reduced-motion: no-preference) {
        .hero-title-amount {
            opacity: 0;
            transform: translateY(10px) scale(.96);
            animation: hero-amount-arrive 620ms cubic-bezier(.2,.8,.2,1) 520ms forwards;
            will-change: opacity, transform;
        }
        /* Savings hook “30%”: visible with the hook line; no headline count-up. */
        .hero-title-amount.hero-title-amount--inline {
            opacity: 1;
            transform: none;
            animation: none;
            will-change: auto;
        }
    }
    @keyframes hero-amount-arrive {
        to {
            opacity: 1;
            transform: translateY(0) scale(1);
        }
    }
    /* Sheen sweep: a single, gentle highlight that slides across the
       gradient-filled number once, right after it counts up and lands.
       Implemented as a ::after overlay with an animated white-light
       gradient that rides over the text — it's clipped to the glyph
       silhouette so the rest of the headline is untouched.
       The sweep is only triggered by the `.is-landed` class added in JS
       after the counter hits its target, so it never fires on a still
       sentence or out-of-viewport user. */
    .hero-title-amount.is-landed::after {
        content: "30%";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(100deg,
            rgba(255,255,255,0) 35%,
            rgba(255,255,255,.85) 50%,
            rgba(255,255,255,0) 65%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        background-size: 250% 100%;
        background-position: 180% 0;
        animation: hero-amount-sheen 1200ms cubic-bezier(.22,.85,.24,1) 120ms 1;
    }
    @keyframes hero-amount-sheen {
        0%   { background-position: 180% 0; }
        100% { background-position: -80% 0; }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero-title,
        .hero-title-amount {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
        }
        .hero-title-amount.is-landed::after { animation: none !important; display: none; }
    }
    .hero-subtitle {
        font-size: clamp(1.08rem, 1.5vw, 1.2rem);
        color: var(--fhc-muted);
        max-width: 34rem;
        line-height: 1.6;
        opacity: 0;
        transform: translateY(8px);
        animation: hero-subtle-in .45s ease-out .12s forwards;
    }
    @media (prefers-reduced-motion: no-preference) {
        body.landing-page.is-guest .hero-subtitle.hero-guest-lead {
            max-width: 38rem;
            line-height: 1.48;
            animation: hero-subtle-in-guest-body .48s ease-out .1s forwards;
        }
        body.landing-page.is-guest .hero-subtitle:not(.hero-guest-lead) {
            max-width: 28rem;
            line-height: 1.52;
            animation: hero-subtle-in-guest-body .48s ease-out .12s forwards;
        }
    }
    body.landing-page.is-guest .hero-subtitle {
        max-width: 28rem;
        line-height: 1.52;
    }
    body.landing-page.is-guest .hero-subtitle.hero-guest-lead {
        max-width: 38rem;
        font-size: clamp(1.02rem, 1.38vw, 1.13rem);
        line-height: 1.48;
        color: var(--fhc-ink-700);
    }
    /* Guest hero: faster funnel — CTA lands right after the lead line. */
    @media (prefers-reduced-motion: no-preference) {
        body.landing-page.is-guest .landing-hero .hero-cta--guest {
            animation-delay: .18s;
        }
        body.landing-page.is-guest .landing-hero .hero-cta-micro {
            animation-delay: .24s;
        }
        body.landing-page.is-guest .landing-hero .hero-cta-proof {
            animation-delay: .3s;
        }
        body.landing-page.is-guest .landing-hero .hero-proof {
            animation-delay: .36s;
        }
    }
    .hero-savings-hook {
        font-size: 1rem;
        color: var(--fhc-ink-900);
        max-width: 34rem;
        line-height: 1.5;
        opacity: 0;
        transform: translateY(8px);
        animation: hero-subtle-in .45s ease-out .22s forwards;
    }
    .hero-savings-hook .hero-title-amount--inline {
        font-size: 1.12em;
        white-space: nowrap;
    }
    @keyframes hero-subtle-in {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: 1; transform: translateY(0); }
    }
    @keyframes hero-subtle-in-guest-body {
        from { opacity: 0; transform: translateY(8px); }
        to { opacity: .88; transform: translateY(0); }
    }
    @media (prefers-reduced-motion: reduce){
        .hero-subtitle,
        .hero-savings-hook,
        .hero-guest-lead {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }
        body.landing-page.is-guest .hero-subtitle {
            opacity: .9 !important;
        }
        .hero-cta,
        .hero-cta-micro,
        .hero-proof {
            animation: none !important;
            opacity: 1 !important;
            transform: none !important;
        }
    }
    .hero-cta,
    .hero-cta-micro {
        opacity: 0;
        transform: translateY(8px);
        animation: hero-subtle-in .45s ease-out .34s forwards;
    }
    .hero-cta-micro {
        font-size: .96rem;
        color: var(--fhc-ink-500);
        letter-spacing: 0.01em;
    }
    .hero-cta-micro-lead {
        font-weight: 700;
        color: var(--fhc-ink-800);
    }
    .hero-cta-micro-sep {
        color: var(--fhc-ink-400);
    }
    /* Micro-proof block right under the CTA. The first line is the
       "$800+ average" headline stat — the single strongest trust element,
       placed at the decision point instead of buried lower. The second
       line cites the data source to back it up. */
    .hero-cta-proof {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin-top: 12px;
        opacity: 0;
        transform: translateY(8px);
        animation: hero-subtle-in .45s ease-out .38s forwards;
    }
    .hero-cta-proof-stat {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 7px 12px;
        border-radius: var(--fhc-radius-pill);
        align-self: flex-start;
        font-size: .93rem;
        font-weight: 600;
        color: var(--fhc-success-700);
        background: linear-gradient(180deg, rgba(236,253,245,.92), rgba(209,250,229,.78));
        border: 1px solid rgba(6,182,212,.38);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(8,145,178,.08);
    }
    .hero-cta-proof-stat i { color: var(--fhc-success-500); }
    .hero-cta-proof-stat strong {
        font-weight: 800;
        color: var(--fhc-success-700);
    }
    .hero-proof-money {
        font-variant-numeric: tabular-nums;
    }
    .hero-cta-proof-source {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: .85rem;
        color: var(--fhc-muted);
        font-weight: 500;
    }
    .hero-cta-proof-source i { color: var(--fhc-primary-600); font-size: .8rem; }
    .hero-cta-proof--solo {
        margin-top: 10px;
        gap: 0;
    }
    /* Guest hero: $800+ pill stays visible but subordinate to the emerald CTA. */
    .hero-cta-proof--solo .hero-cta-proof-stat {
        font-size: .84rem;
        font-weight: 550;
        color: var(--fhc-ink-600);
        background: linear-gradient(180deg, rgba(236,253,245,.5), rgba(209,250,229,.28));
        border: 1px solid rgba(6,182,212,.16);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.52);
        padding: 6px 11px;
    }
    .hero-cta-proof--solo .hero-cta-proof-stat i {
        color: var(--fhc-success-600);
        opacity: 0.88;
    }
    .hero-cta-proof--solo .hero-cta-proof-stat strong {
        font-weight: 700;
        color: var(--fhc-success-700);
    }
    /* Inline "(takes ~30 seconds)" on Step 1 heading — softer weight so it
       reads as a promise, not a competing title. */
    .landing-how-inline-time {
        font-size: 0.82em;
        font-weight: 500;
        color: var(--fhc-success-600);
        letter-spacing: 0;
    }
    .hero-proof {
        opacity: 0;
        transform: translateY(8px);
        animation: hero-subtle-in .45s ease-out .42s forwards;
        margin-top: 1.5rem;
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
    .hero-proof span {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 9px 13px;
        border-radius: var(--fhc-radius-pill);
        background: rgba(255,255,255,.8);
        border: 1px solid rgba(15,23,42,.045);
        color: var(--fhc-ink-700);
        font-size: .92rem;
        font-weight: 500;
    }
    .hero-proof i { color: var(--fhc-primary-600); }
    .hero-proof--streamlined {
        flex-direction: column;
        align-items: flex-start;
        flex-wrap: nowrap;
        gap: 10px;
        margin-top: 1rem;
    }
    .hero-proof-trust {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: 6px 4px;
        margin: 0;
        padding: 0;
        font-size: .84rem;
        font-weight: 500;
        color: var(--fhc-ink-500);
        letter-spacing: 0.01em;
        line-height: 1.45;
    }
    .hero-proof-trust > i.fa-solid {
        margin-right: 4px;
        color: var(--fhc-success-600);
        font-size: .82rem;
    }
    .hero-proof-trust-sep {
        margin: 0 2px;
        color: var(--fhc-ink-300);
    }
    .hero-proof .hero-proof-pill--accent {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 13px;
        border-radius: var(--fhc-radius-pill);
        font-size: .86rem;
        font-weight: 600;
        color: var(--fhc-ink-700);
        background: rgba(255,255,255,.78);
        border: 1px solid rgba(37,99,235,.14);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 8px rgba(15,23,42,.04);
    }
    .hero-proof .hero-proof-pill--accent i { color: var(--fhc-primary-600); font-size: .85rem; }
    /* Scale the whole hero visual (~10–12.5%) so base + overlay grow together */
    .hero-art {
        background: transparent;
        border-radius: 24px;
        overflow: visible;
        padding: 0;
        box-shadow: none;
        transform: scale(1.08);
        transform-origin: center center;
    }
    @media (min-width: 576px) {
        .hero-art { transform: scale(1.1); }
    }
    @media (min-width: 992px) {
        .hero-art { transform: scale(1.125); }
    }
    .landing-hero .row > .col-lg-6:last-child {
        overflow: visible;
        padding-top: 0.35rem;
        padding-bottom: 0.35rem;
    }
    @media (min-width: 992px) {
        .landing-hero .row > .col-lg-6:last-child {
            padding-left: 0.5rem;
            padding-right: 0.5rem;
        }
        body.landing-page.is-guest .landing-hero-row > .col-lg-6:last-child {
            margin-top: -0.5rem;
        }
    }
    .hero-scene {
        position: relative;
        width: 105%;
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        aspect-ratio: 3 / 2;
        border-radius: 24px;
        overflow: hidden;
    }
    .hero-image {
        display: block;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .hero-image-base { position: relative; z-index: 1; }
    .hero-bill-overlay {
        position: absolute;
        z-index: 2;
        right: 2.5%;
        top: 10%;
        width: 47%;
        max-width: 460px;
        height: auto;
        display: block;
        border-radius: var(--fhc-radius-lg);
        /* Start hidden; the keyframe loop fades it in and fully back out.
           Kept as a fallback so there's no flash before animation engages. */
        opacity: 0;
        transform: translateY(16px) scale(0.96);
        transform-origin: right center;
        filter: drop-shadow(0 24px 50px rgba(15,23,42,.16)) drop-shadow(0 8px 18px rgba(15,23,42,.08));
        outline: 1px solid rgba(255,255,255,.5);
        will-change: opacity, transform;
        animation: hero-bill-fade 7.5s ease-in-out .4s infinite;
    }
    /* Clean loop: hidden → pop in → linger → fade fully out → hidden again.
       First and last frames are identical so the infinite loop has no seam. */
    @keyframes hero-bill-fade {
        0% {
            opacity: 0;
            transform: translateY(16px) scale(0.96);
        }
        20%, 70% {
            opacity: 0.96;
            transform: translateY(0) scale(1);
        }
        95%, 100% {
            opacity: 0;
            transform: translateY(16px) scale(0.96);
        }
    }
    @media (max-width: 991.98px) {
        .hero-bill-overlay {
            right: 3%;
            top: 12%;
            width: 52%;
        }
    }
    @media (max-width: 575.98px) {
        .hero-scene {
            width: 100%;
            max-width: none;
        }
        .hero-bill-overlay {
            right: 2%;
            top: 14%;
            width: 58%;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero-bill-overlay {
            opacity: 0.96;
            transform: none;
            animation: none;
        }
    }

    /* ========= Hero title + glassy bill-analysis mock (hero right column) =========
       The mock replaces the old stock photo so the "killer visual"
       (overcharges detected + savings amount) lives next to the CTA. It uses
       the same glassmorphic palette as the login modal and page background
       so the page reads as one cohesive surface. */
    .hero-title-amount {
        /* Emerald accent: headline outcome (savings potential) pops off the blue/system page. */
        background: linear-gradient(135deg, var(--fhc-success-700) 0%, var(--fhc-success-500) 45%, #22d3ee 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        white-space: nowrap;
        font-weight: 800;
    }
    /* The mock variant uses its own sizing — override the scale the stock
       photo had so the card isn't blown up past its natural size. */
    .hero-art--mock { transform: none !important; }

    .hero-mock {
        position: relative;
        max-width: 560px;
        margin-left: auto;
        margin-right: auto;
        padding: 22px 22px 20px;
        border-radius: var(--fhc-radius-lg);
        background: linear-gradient(180deg, rgba(255,255,255,.70) 0%, rgba(240,247,255,.55) 100%);
        border: 1px solid rgba(255,255,255,.72);
        box-shadow:
            0 30px 70px rgba(15,23,42,.18),
            0 10px 30px rgba(37,99,235,.14),
            inset 0 1px 0 rgba(255,255,255,.92);
        -webkit-backdrop-filter: blur(22px) saturate(150%);
        backdrop-filter: blur(22px) saturate(150%);
        color: var(--fhc-ink-900);
        display: flex;
        flex-direction: column;
        gap: 16px;
    }
    .hero-mock-header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }
    .hero-mock-chip {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        padding: 5px 10px;
        border-radius: var(--fhc-radius-pill);
        font-size: .78rem;
        font-weight: 600;
        letter-spacing: -0.005em;
        border: 1px solid rgba(255,255,255,.75);
        background: linear-gradient(180deg, rgba(236,253,245,.92), rgba(209,250,229,.82));
        color: var(--fhc-success-700);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(8,145,178,.10);
    }
    .hero-mock-chip--ok i {
        color: var(--fhc-success-500);
    }
    @media (prefers-reduced-motion: no-preference) {
        .hero-mock-chip--ok i {
            animation: hero-mock-check-pop .75s cubic-bezier(.34, 1.56, .64, 1) 1.15s both;
        }
    }
    @keyframes hero-mock-check-pop {
        from { transform: scale(0.82); opacity: 0.65; }
        to   { transform: scale(1); opacity: 1; }
    }
    .hero-mock-meta {
        font-size: .78rem;
        color: var(--fhc-ink-500);
        font-weight: 500;
        font-variant-numeric: tabular-nums;
    }
    .hero-mock-progress {
        list-style: none;
        margin: 0;
        padding: 4px 2px 0;
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
        position: relative;
        font-size: .68rem;
        font-weight: 600;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--fhc-ink-500);
    }
    /* Single rail behind the dots: done portion in green, remainder neutral. */
    .hero-mock-progress::before {
        content: "";
        position: absolute;
        left: 10%;
        right: 10%;
        top: 8px;
        height: 2px;
        border-radius: 2px;
        background: linear-gradient(
            90deg,
            var(--fhc-success-500) 0%,
            var(--fhc-success-500) 62%,
            rgba(148,163,184,.28) 62%,
            rgba(148,163,184,.18) 100%
        );
        z-index: 0;
        pointer-events: none;
    }
    .hero-mock-progress-step {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 6px;
        position: relative;
        z-index: 1;
    }
    .hero-mock-progress-label {
        line-height: 1.2;
    }
    .hero-mock-progress-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        flex-shrink: 0;
        background: rgba(148,163,184,.35);
        border: 2px solid rgba(255,255,255,.9);
        box-shadow: 0 0 0 1px rgba(148,163,184,.2);
    }
    .hero-mock-progress-step.is-done .hero-mock-progress-dot {
        background: var(--fhc-success-500);
        box-shadow: 0 0 0 1px rgba(6,182,212,.35);
    }
    .hero-mock-progress-step.is-current {
        color: var(--fhc-success-700);
    }
    .hero-mock-progress-step.is-current .hero-mock-progress-dot {
        background: var(--fhc-success-400);
        box-shadow: 0 0 0 3px rgba(6,182,212,.22);
        animation: hero-mock-dot-pulse 2.2s ease-in-out infinite;
    }
    @keyframes hero-mock-dot-pulse {
        0%, 100% { box-shadow: 0 0 0 3px rgba(6,182,212,.22); }
        50%     { box-shadow: 0 0 0 5px rgba(6,182,212,.12); }
    }
    .hero-mock-alert {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 11px 14px;
        border-radius: var(--fhc-radius-md);
        background: linear-gradient(180deg, rgba(254,243,199,.85), rgba(254,215,170,.78));
        border: 1px solid rgba(251,191,36,.45);
        color: var(--fhc-warning-700);
        font-size: .92rem;
        line-height: 1.35;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
    }
    .hero-mock-alert i {
        flex-shrink: 0;
        color: var(--fhc-warning);
        font-size: 1rem;
    }
    .hero-mock-rows {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .hero-mock-row {
        padding: 12px 14px;
        border-radius: var(--fhc-radius-md);
        background: rgba(255,255,255,.58);
        border: 1px solid rgba(255,255,255,.7);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 2px 6px rgba(15,23,42,.04);
    }
    .hero-mock-row-head {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 8px;
        margin-bottom: 8px;
    }
    .hero-mock-row-title {
        font-weight: 600;
        font-size: .92rem;
        color: var(--fhc-ink-900);
        line-height: 1.3;
    }
    .hero-mock-cpt {
        display: inline-block;
        margin-left: 6px;
        padding: 1px 6px;
        border-radius: 4px;
        font-size: .65rem;
        font-weight: 800;
        font-variant-numeric: tabular-nums;
        letter-spacing: 0.04em;
        text-transform: uppercase;
        color: var(--fhc-ink-500);
        background: rgba(241,245,249,.95);
        border: 1px solid rgba(226,232,240,.95);
        vertical-align: 1px;
    }
    .hero-mock-row-flag {
        display: inline-flex;
        align-items: center;
        padding: 2px 8px;
        border-radius: var(--fhc-radius-pill);
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: 0.02em;
        text-transform: uppercase;
        color: var(--fhc-danger-700);
        background: rgba(254,226,226,.85);
        border: 1px solid rgba(248,113,113,.35);
    }
    /* One composite bar per item: fair share vs “above benchmark” (billed − fair). */
    .hero-mock-compare {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    .hero-mock-compare-top {
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        justify-content: space-between;
        gap: 6px 12px;
    }
    .hero-mock-delta {
        font-size: .88rem;
        font-weight: 800;
        color: var(--fhc-danger-700);
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
    }
    .hero-mock-delta-hint {
        font-size: .72rem;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0;
        color: var(--fhc-ink-500);
    }
    .hero-mock-amt-pair {
        font-size: .78rem;
        font-weight: 600;
        color: var(--fhc-ink-600);
        font-variant-numeric: tabular-nums;
    }
    .hero-mock-amt-fair { color: var(--fhc-success-700); }
    .hero-mock-amt-billed { color: var(--fhc-ink-900); }
    .hero-mock-amt-sep {
        font-weight: 500;
        color: var(--fhc-ink-400);
        margin: 0 2px;
    }
    .hero-mock-amt-label {
        font-size: .68rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: var(--fhc-ink-400);
        margin-left: 4px;
    }
    .hero-mock-compare-track {
        height: 11px;
        border-radius: var(--fhc-radius-pill);
        background: rgba(148,163,184,.14);
        padding: 2px;
        box-shadow: inset 0 1px 3px rgba(15,23,42,.07);
    }
    .hero-mock-compare-stack {
        display: flex;
        height: 100%;
        width: 100%;
        border-radius: inherit;
        overflow: hidden;
    }
    .hero-mock-compare-fair,
    .hero-mock-compare-over {
        height: 100%;
        flex-shrink: 0;
        transform-origin: left center;
        animation: hero-mock-compare-grow 1s cubic-bezier(.22, 1, .36, 1) both;
    }
    .hero-mock-compare-fair {
        background: linear-gradient(90deg, var(--fhc-success-600) 0%, #06b6d4 45%, var(--fhc-success-400) 100%);
        box-shadow: 0 1px 2px rgba(6,182,212,.3);
    }
    .hero-mock-compare-over {
        background: linear-gradient(90deg, var(--fhc-danger-400) 0%, var(--fhc-danger-500) 100%);
        box-shadow: inset 1px 0 0 rgba(255,255,255,.2);
        animation-delay: .12s;
    }
    .hero-mock-row:nth-child(2) .hero-mock-compare-fair,
    .hero-mock-row:nth-child(2) .hero-mock-compare-over {
        animation-delay: .2s;
    }
    .hero-mock-row:nth-child(2) .hero-mock-compare-over {
        animation-delay: .32s;
    }
    @keyframes hero-mock-compare-grow {
        from { transform: scaleX(0); }
        to   { transform: scaleX(1); }
    }
    .hero-mock-compare-legend {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 14px;
        font-size: .68rem;
        font-weight: 600;
        color: var(--fhc-ink-500);
        text-transform: uppercase;
        letter-spacing: 0.03em;
    }
    .hero-mock-legend-item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
    }
    .hero-mock-legend-swatch {
        width: 8px;
        height: 8px;
        border-radius: 2px;
        display: inline-block;
    }
    .hero-mock-legend-swatch--fair {
        background: linear-gradient(135deg, var(--fhc-success-600), #06b6d4);
    }
    .hero-mock-legend-swatch--over {
        background: linear-gradient(135deg, var(--fhc-danger-400), var(--fhc-danger-500));
    }
    /* Savings strip: 3D flip — teaser face → reveals overcharge + count-up. */
    .hero-mock-savings-flip {
        perspective: 1200px;
        -webkit-perspective: 1200px;
    }
    .hero-mock-savings-flip-shell {
        position: relative;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(241,245,249,.88) 0%, rgba(226,232,240,.55) 100%);
        border: 1px solid rgba(148,163,184,.35);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.9),
            0 10px 26px rgba(15,23,42,.08);
        overflow: visible;
    }
    .hero-mock-savings-flip-inner {
        position: relative;
        width: 100%;
        min-height: 5.75rem;
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        transform: rotateY(0deg);
        transition: transform 0.88s cubic-bezier(0.4, 0.2, 0.2, 1);
        will-change: transform;
    }
    .hero-mock-card.hero-mock-flip-savings .hero-mock-savings-flip-inner {
        transform: rotateY(180deg);
    }
    .hero-mock-savings-face {
        position: absolute;
        inset: 0;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 18px;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    .hero-mock-savings-face--back {
        transform: rotateY(180deg);
    }
    .hero-mock-savings-face--front .hero-mock-savings-left {
        text-align: left;
    }
    .hero-mock-savings-sub--teaser {
        font-size: .82rem;
        color: var(--fhc-ink-500);
        font-weight: 500;
    }
    .hero-mock-savings-teaser-amount {
        display: flex;
        align-items: center;
        min-height: 2.5rem;
    }
    .hero-mock-savings-teaser-dots {
        display: inline-flex;
        align-items: center;
        gap: 5px;
    }
    .hero-mock-savings-teaser-dots span {
        width: 7px;
        height: 7px;
        border-radius: 999px;
        background: linear-gradient(180deg, var(--fhc-primary-400), var(--fhc-primary-600));
        opacity: 0.35;
        animation: hero-mock-teaser-dot 1.1s ease-in-out infinite;
    }
    .hero-mock-savings-teaser-dots span:nth-child(2) { animation-delay: 0.18s; }
    .hero-mock-savings-teaser-dots span:nth-child(3) { animation-delay: 0.36s; }
    @keyframes hero-mock-teaser-dot {
        0%, 100% { opacity: 0.3; transform: scale(0.92); }
        50% { opacity: 1; transform: scale(1.05); }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero-mock-savings-flip-inner {
            transition: none !important;
        }
        .hero-mock-savings-teaser-dots span {
            animation: none !important;
            opacity: 0.55;
        }
    }
    .hero-mock-savings-face--back .hero-mock-savings {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        width: 100%;
        padding: 0;
        margin: 0;
        border: none;
        background: none;
        box-shadow: none;
        border-radius: 0;
    }
    .hero-mock-savings {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;
        padding: 16px 18px;
        border-radius: 16px;
        background: linear-gradient(135deg, rgba(241,245,249,.88) 0%, rgba(226,232,240,.55) 100%);
        border: 1px solid rgba(148,163,184,.35);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.9),
            0 10px 26px rgba(15,23,42,.08);
    }
    .hero-mock-savings-left {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .hero-mock-savings-label {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: .92rem;
        font-weight: 600;
        color: var(--fhc-ink-900);
    }
    .hero-mock-savings-label i { color: var(--fhc-success-600); }
    .hero-mock-savings-label.hero-mock-savings-label--teaser i { color: var(--fhc-primary-600); }
    .hero-mock-savings-payoff {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 2px;
        text-align: right;
    }
    .hero-mock-savings-tail {
        font-size: .7rem;
        font-weight: 700;
        letter-spacing: 0.05em;
        text-transform: uppercase;
        color: var(--fhc-success-700);
    }
    /* Percentage context: humans respond to % — the % is an *overcharge* signal. */
    .hero-mock-savings-sub {
        font-size: .82rem;
        color: var(--fhc-ink-600);
        font-weight: 500;
    }
    .hero-mock-savings-sub strong {
        color: var(--fhc-danger-700);
        font-weight: 700;
    }
    .hero-mock-savings-amount {
        font-size: 2.05rem;
        font-weight: 800;
        letter-spacing: -0.03em;
        font-variant-numeric: tabular-nums;
        line-height: 1;
        /* Strongest money moment: gradient + soft glow (still readable). */
        background: linear-gradient(135deg, var(--fhc-success-700) 0%, var(--fhc-success-500) 55%, #06b6d4 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        filter: drop-shadow(0 2px 14px rgba(6,182,212,.28));
    }
    /* Action row — negotiation confirmation; stays in the money/recovery lane
       so it reads “ready → act”. The guest hero primary CTA beneath remains
       the blue-system button; headline “30%” uses emerald as payoff signal. */
    .hero-mock-action {
        display: flex;
        flex-direction: column;
        gap: 10px;
        margin-top: 2px;
    }
    /* CTA: slightly deeper green than the headline chip so “act” ≠ “status”. */
    .hero-mock-action-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        padding: 12px 16px;
        border-radius: 12px;
        font-weight: 700;
        font-size: .95rem;
        color: #ffffff;
        background: linear-gradient(180deg, var(--fhc-success-500) 0%, var(--fhc-success-700) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.32),
            inset 0 -1px 0 rgba(0,0,0,.12),
            0 10px 24px rgba(8,145,178,.34),
            0 2px 6px rgba(14,116,144,.22);
        letter-spacing: -0.005em;
    }
    .hero-mock-action-btn i { font-size: 1rem; }
    .hero-mock-action-meta {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: .82rem;
        font-weight: 600;
        color: var(--fhc-success-700);
    }
    .hero-mock-action-meta i { color: var(--fhc-success-500); font-size: .8rem; }
    @media (prefers-reduced-motion: no-preference) {
        .hero-mock-action-meta--pulse i {
            animation: hero-mock-action-check 2.4s ease-in-out 2s infinite;
        }
    }
    @keyframes hero-mock-action-check {
        0%, 100% { transform: scale(1); opacity: 1; }
        35% { transform: scale(1.12); opacity: 0.85; }
        50% { transform: scale(1); opacity: 1; }
    }
    @media (max-width: 575.98px) {
        .hero-mock { padding: 16px 16px 14px; gap: 12px; }
        .hero-mock-savings-flip-inner { min-height: 6.5rem; }
        .hero-mock-savings-face {
            flex-direction: column;
            align-items: flex-start;
        }
        .hero-mock-savings-teaser-amount {
            align-self: flex-end;
            min-height: auto;
        }
        .hero-mock-savings-amount { font-size: 1.65rem; }
        .hero-mock-savings {
            flex-direction: column;
            align-items: flex-start;
        }
        .hero-mock-savings-payoff {
            align-self: stretch;
            align-items: flex-start;
            text-align: left;
        }
        .hero-mock-progress { font-size: .62rem; gap: 4px; }
        .hero-mock-compare-top { flex-direction: column; align-items: flex-start; }
    }
    @media (prefers-reduced-motion: reduce) {
        .hero-mock-compare-fair,
        .hero-mock-compare-over {
            animation: none !important;
            transform: scaleX(1) !important;
        }
        .hero-mock-progress-step.is-current .hero-mock-progress-dot {
            animation: none !important;
        }
        .hero-mock-chip--ok i,
        .hero-mock-action-meta--pulse i {
            animation: none !important;
        }
    }

    /* ========= Emotional trigger section (between hero and how-it-works) =========
       Section background stays transparent so body.landing-page’s fixed blue
       wash reads continuously; the card uses the same surface language as
       landing-moat / hero mock (blue-tinted white, no competing radial band). */
    .landing-emo {
        padding: 28px 0 6px;
        background: transparent;
    }
    .landing-emo-panel {
        max-width: 900px;
        margin: 0 auto;
        padding: 32px 32px 30px;
        border-radius: var(--fhc-radius-lg);
        background: linear-gradient(165deg, #ffffff 0%, rgba(248, 250, 252, 0.92) 42%, rgba(239, 246, 255, 0.88) 100%);
        border: 1px solid rgba(15, 23, 42, 0.08);
        border-left: 5px solid var(--fhc-danger-600);
        box-shadow:
            0 18px 44px rgba(15, 23, 42, 0.11),
            0 6px 16px rgba(37, 99, 235, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 0.98),
            inset 6px 0 24px -8px rgba(244, 63, 95, 0.07);
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        text-align: center;
        position: relative;
        overflow: hidden;
    }
    .landing-emo-panel::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        background: linear-gradient(90deg, var(--fhc-danger-500), var(--fhc-primary-500), var(--fhc-success-500));
        opacity: 0.85;
        pointer-events: none;
    }
    .landing-emo-title {
        font-size: clamp(1.52rem, 2.85vw, 2.12rem);
        font-weight: 800;
        letter-spacing: -0.03em;
        color: var(--fhc-ink-900);
        margin: 10px 0 14px;
        line-height: 1.15;
    }
    .landing-emo-accent {
        /* Was a red→orange gradient. Per the color rules, orange is reserved
           for true alerts only and red stays tight to overcharge framing. The
           emotional-trigger question ("but was it correct?") IS problem
           framing, so a solid deep red carries the weight without mixing in
           decorative orange. */
        color: var(--fhc-danger-600);
        font-weight: 800;
    }
    .landing-emo-sub {
        color: var(--fhc-ink-700);
        font-size: 1.05rem;
        font-weight: 600;
        line-height: 1.52;
        max-width: 38rem;
        margin: 0 auto 20px;
    }
    .landing-emo-risks {
        margin: 0 auto 18px;
        max-width: 720px;
        padding: 16px 16px 18px;
        border-radius: var(--fhc-radius-md);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(254, 242, 242, 0.72));
        border: 1px solid var(--fhc-danger-border);
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    .landing-emo-bullets {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 10px 12px;
    }
    .landing-emo-bullets li {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        padding: 8px 14px 8px 10px;
        border-radius: var(--fhc-radius-pill);
        font-size: .9rem;
        font-weight: 700;
        color: var(--fhc-danger-700);
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(254, 226, 226, 0.45));
        border: 1px solid rgba(225, 29, 72, 0.28);
        box-shadow:
            0 2px 8px rgba(159, 18, 57, 0.07),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }
    .landing-emo-bullets li i {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.35rem;
        height: 1.35rem;
        border-radius: 999px;
        flex-shrink: 0;
        font-size: .55rem;
        color: #ffffff;
        background: linear-gradient(145deg, var(--fhc-danger-500), var(--fhc-danger-700));
        box-shadow: 0 1px 3px rgba(159, 18, 57, 0.35);
    }
    .landing-emo-relief {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        margin: 4px 0 0;
        padding: 12px 20px;
        border-radius: var(--fhc-radius-pill);
        font-weight: 700;
        font-size: 1.04rem;
        letter-spacing: -0.01em;
        color: var(--fhc-success-700);
        background: linear-gradient(180deg, #ffffff 0%, rgba(236, 254, 255, 0.94) 100%);
        border: 1px solid var(--fhc-success-border);
        box-shadow:
            0 10px 28px rgba(8, 145, 178, 0.14),
            inset 0 1px 0 rgba(255, 255, 255, 1);
    }
    .landing-emo-relief i {
        color: #ffffff;
        font-size: .85rem;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.65rem;
        height: 1.65rem;
        border-radius: 999px;
        background: linear-gradient(145deg, var(--fhc-success-500), var(--fhc-success-700));
        box-shadow: 0 2px 8px rgba(8, 145, 178, 0.35);
    }
    @media (max-width: 575.98px) {
        .landing-emo { padding: 22px 0 4px; }
        .landing-emo-panel {
            padding: 26px 18px 24px;
            border-radius: var(--fhc-radius-lg);
            border-left-width: 4px;
        }
        .landing-emo-risks {
            padding: 14px 12px 16px;
        }
    }

    /* ========= "We catch what others miss" moat section ========= */
    .landing-moat {
        padding: 56px 0 48px;
    }
    .landing-moat-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 5px 12px;
        border-radius: var(--fhc-radius-pill);
        font-size: .82rem;
        font-weight: 600;
        color: var(--fhc-primary-700);
        background: linear-gradient(180deg, rgba(219,234,254,.75), rgba(191,219,254,.65));
        border: 1px solid rgba(96,165,250,.35);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
        margin-bottom: 12px;
    }
    .landing-moat-eyebrow i { color: var(--fhc-primary-600); }
    .landing-moat-card {
        position: relative;
        padding: 22px 20px 20px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(240,247,255,.55) 100%);
        border: 1px solid rgba(255,255,255,.75);
        box-shadow:
            0 12px 28px rgba(15,23,42,.08),
            inset 0 1px 0 rgba(255,255,255,.92);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        backdrop-filter: blur(16px) saturate(140%);
        transition: transform .2s ease, box-shadow .2s ease;
    }
    .landing-moat-card:hover {
        transform: translateY(-2px);
        box-shadow:
            0 18px 36px rgba(15,23,42,.12),
            0 4px 12px rgba(37,99,235,.12),
            inset 0 1px 0 rgba(255,255,255,.95);
    }
    .landing-moat-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 42px;
        height: 42px;
        border-radius: 12px;
        font-size: 1.1rem;
        color: #ffffff;
        background: linear-gradient(135deg, var(--fhc-primary-400) 0%, var(--fhc-primary-600) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.4),
            0 6px 14px rgba(37,99,235,.28);
        margin-bottom: 14px;
    }
    .landing-moat-card h5 {
        font-size: 1.02rem;
        font-weight: 700;
        color: var(--fhc-ink-900);
        margin: 0 0 6px;
        letter-spacing: -0.01em;
    }
    .landing-moat-card p {
        margin: 0;
        color: var(--fhc-muted);
        font-size: .92rem;
        line-height: 1.5;
    }

    /* ========= Dedicated negotiation section ("we help you get the money back") =========
       Two-column panel: copy on the left, a letter-document mock on the right
       so the value (negotiation output) is seen, not just told. Kept to the
       blue+green palette on purpose — this is the "you get money back"
       moment of the page, not a warning. */
    .landing-negotiate {
        padding: 48px 0 56px;
    }
    .landing-negotiate-panel {
        display: grid;
        grid-template-columns: 1.1fr 0.9fr;
        gap: 40px;
        align-items: center;
        padding: 36px 36px;
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255,255,255,.72) 0%, rgba(240,247,255,.52) 100%);
        border: 1px solid rgba(255,255,255,.72);
        box-shadow:
            0 24px 56px rgba(15,23,42,.10),
            inset 0 1px 0 rgba(255,255,255,.92);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        backdrop-filter: blur(20px) saturate(150%);
    }
    .landing-negotiate-eyebrow {
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        padding: 5px 12px;
        border-radius: var(--fhc-radius-pill);
        font-size: .82rem;
        font-weight: 600;
        color: var(--fhc-success-700);
        background: linear-gradient(180deg, rgba(236,253,245,.92), rgba(209,250,229,.78));
        border: 1px solid rgba(6,182,212,.38);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
        margin-bottom: 14px;
    }
    .landing-negotiate-eyebrow i { color: var(--fhc-success-500); }
    .landing-negotiate-title {
        font-size: clamp(1.5rem, 2.6vw, 2rem);
        font-weight: 700;
        letter-spacing: -0.02em;
        color: var(--fhc-ink-900);
        line-height: 1.2;
        margin: 0 0 12px;
    }
    .landing-negotiate-title-accent {
        /* Full green gradient — this section is the money-back story, so the
           headline accent should read as payoff, not infrastructure. */
        background: linear-gradient(135deg, var(--fhc-success-700) 0%, var(--fhc-success-500) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
        font-weight: 800;
    }
    .landing-negotiate-sub {
        color: var(--fhc-muted);
        font-size: 1.02rem;
        line-height: 1.55;
        margin: 0 0 20px;
    }
    .landing-negotiate-list {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .landing-negotiate-list li {
        display: flex;
        align-items: flex-start;
        gap: 14px;
    }
    .landing-negotiate-list li > i {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        font-size: 1rem;
        color: #ffffff;
        /* Green chips — this section is about negotiation/savings. */
        background: linear-gradient(135deg, var(--fhc-success-400) 0%, var(--fhc-success-600) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.4),
            0 4px 10px rgba(6,182,212,.26);
        margin-top: 2px;
    }
    .landing-negotiate-list li > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 0;
    }
    .landing-negotiate-list strong {
        font-weight: 700;
        color: var(--fhc-ink-900);
        font-size: 1rem;
    }
    .landing-negotiate-list span {
        color: var(--fhc-muted);
        font-size: .92rem;
        line-height: 1.45;
    }

    /* Letter-document mock on the right: stylized glass card with faux lines
       of text and a prominent download CTA footer. Static — no image assets
       needed. */
    .landing-negotiate-visual {
        display: flex;
        justify-content: center;
    }
    .landing-negotiate-letter {
        width: 100%;
        max-width: 360px;
        padding: 22px 22px 18px;
        border-radius: 18px;
        background: linear-gradient(180deg, rgba(255,255,255,.88) 0%, rgba(248,250,252,.78) 100%);
        border: 1px solid rgba(255,255,255,.85);
        box-shadow:
            0 24px 48px rgba(15,23,42,.12),
            0 6px 18px rgba(37,99,235,.10),
            inset 0 1px 0 rgba(255,255,255,.95);
        -webkit-backdrop-filter: blur(12px) saturate(140%);
        backdrop-filter: blur(12px) saturate(140%);
    }
    .landing-negotiate-letter-head {
        display: flex;
        align-items: center;
        gap: 12px;
        padding-bottom: 14px;
        border-bottom: 1px dashed rgba(148,163,184,.38);
        margin-bottom: 14px;
    }
    .landing-negotiate-letter-avatar {
        width: 40px;
        height: 40px;
        border-radius: 12px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 1rem;
        color: #ffffff;
        background: linear-gradient(135deg, var(--fhc-success-400) 0%, var(--fhc-success-600) 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 4px 10px rgba(6,182,212,.26);
        flex-shrink: 0;
    }
    .landing-negotiate-letter-title {
        font-weight: 700;
        color: var(--fhc-ink-900);
        font-size: .98rem;
    }
    .landing-negotiate-letter-sub {
        color: var(--fhc-ink-500);
        font-size: .8rem;
    }
    .landing-negotiate-letter-lines {
        display: flex;
        flex-direction: column;
        gap: 8px;
        margin-bottom: 16px;
    }
    .landing-negotiate-letter-lines span {
        display: block;
        height: 8px;
        border-radius: 4px;
        background: linear-gradient(90deg, rgba(148,163,184,.28), rgba(148,163,184,.18));
    }
    .landing-negotiate-letter-lines span:nth-child(2) { width: 92%; }
    .landing-negotiate-letter-lines span:nth-child(3) { width: 86%; }
    .landing-negotiate-letter-lines span.short { width: 58%; }
    .landing-negotiate-letter-cta {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        padding: 11px 14px;
        border-radius: 12px;
        font-weight: 700;
        font-size: .92rem;
        color: #ffffff;
        /* Green "Download & send" — this is the money-back action in the
           mock, not the page's primary CTA, so it leans into the payoff
           color instead of the system blue. */
        background: linear-gradient(180deg, var(--fhc-success-400) 0%, var(--fhc-success-600) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.35),
            0 8px 18px rgba(6,182,212,.28);
    }
    @media (max-width: 767.98px) {
        .landing-negotiate-panel {
            grid-template-columns: 1fr;
            gap: 24px;
            padding: 26px 22px;
        }
        .landing-negotiate-letter { max-width: 320px; }
    }

    /* --- Mid-page section rhythm: eyebrow + title + muted lead (below hero weight) --- */
    .landing-section-head {
        text-align: center;
        max-width: 40rem;
        margin-left: auto;
        margin-right: auto;
        margin-bottom: 2.5rem;
    }
    @media (min-width: 992px) {
        .landing-section-head { margin-bottom: 3.25rem; }
    }
    .landing-section-eyebrow {
        display: block;
        font-size: .69rem;
        font-weight: 700;
        letter-spacing: 0.165em;
        text-transform: uppercase;
        color: var(--fhc-primary-600);
        margin-bottom: .5rem;
    }
    .landing-section-title {
        font-size: clamp(1.42rem, 2.2vw, 1.82rem);
        font-weight: 600;
        letter-spacing: -0.018em;
        color: var(--fhc-ink-900);
        line-height: 1.2;
        margin-bottom: .55rem;
    }
    .landing-section-lead {
        font-size: clamp(0.96rem, 1.12vw, 1.04rem);
        color: var(--fhc-ink-500);
        line-height: 1.55;
        font-weight: 500;
    }
    .hospital-strip-head {
        max-width: 44rem;
    }
    .hospital-strip-subtitle.landing-section-lead {
        margin-bottom: 1.15rem;
    }

    .landing-stats {
        position: relative;
        padding-top: 52px;
        padding-bottom: 88px;
        background: transparent;
    }
    .landing-stats::before {
        content: none;
    }
    /* Give the stats its own visual weight — this is proof, not decoration.
       A subtle glassy panel with a soft gradient separates it from adjacent
       sections. */
    .landing-stats-panel {
        background: linear-gradient(160deg, rgba(255,255,255,0.78) 0%, rgba(239,246,255,0.68) 50%, rgba(219,234,254,0.55) 100%);
        backdrop-filter: blur(20px) saturate(150%);
        -webkit-backdrop-filter: blur(20px) saturate(150%);
        border: 1px solid rgba(148,163,184,0.22);
        border-radius: 28px;
        padding: 2.75rem 2.25rem;
        box-shadow: 0 18px 48px -24px rgba(15,23,42,0.12), inset 0 1px 0 rgba(255,255,255,0.55);
    }
    .landing-stats-head {
        max-width: 900px;
        margin: 0 auto 2.35rem;
    }
    .landing-stats-head .landing-section-lead {
        max-width: 34rem;
        margin-left: auto;
        margin-right: auto;
        margin-top: 0.65rem;
    }
    .landing-stats-emotion {
        font-size: clamp(1.1rem, 1.95vw, 1.34rem);
        font-weight: 600;
        font-style: italic;
        color: var(--fhc-ink-700);
        line-height: 1.42;
        max-width: 30rem;
        margin: 0 auto 1.1rem;
    }
    .landing-stats-title {
        font-size: clamp(1.62rem, 2.75vw, 2.18rem);
        font-weight: 800;
        letter-spacing: -0.032em;
        color: var(--fhc-ink-900);
        line-height: 1.14;
        margin-bottom: .6rem;
    }
    .landing-stats-note {
        font-size: .8rem;
        color: var(--fhc-ink-500);
        line-height: 1.45;
        text-align: center;
        max-width: 36rem;
        margin: 1.5rem auto 0;
    }
    .landing-stats-grid {
        margin-top: .25rem;
    }
    .stat-feature-card {
        border-radius: 24px;
        background: linear-gradient(180deg, rgba(255,255,255,.94) 0%, rgba(247,250,255,.88) 100%);
        border: 1px solid rgba(148,163,184,.16);
        box-shadow:
            0 14px 34px rgba(15,23,42,.06),
            inset 0 1px 0 rgba(255,255,255,.75);
        padding: 1.85rem 1.65rem 1.5rem;
    }
    .stat-feature-card--primary {
        background: linear-gradient(180deg, rgba(255,255,255,.98) 0%, rgba(239,246,255,.92) 100%);
        border-color: rgba(37, 99, 235, 0.22);
        box-shadow:
            0 18px 40px rgba(37, 99, 235, 0.09),
            0 14px 34px rgba(15,23,42,.07),
            inset 0 1px 0 rgba(255,255,255,.8);
    }
    .stat-feature-card--primary .stat-feature-value {
        font-size: clamp(2.65rem, 4.6vw, 3.55rem);
    }
    .stat-feature-value {
        font-size: clamp(2.4rem, 4vw, 3.2rem);
        line-height: 1;
        letter-spacing: -0.035em;
        font-weight: 800;
        color: var(--fhc-ink-900);
        margin-bottom: .65rem;
    }
    /* Stat role colors — left (problem) = blue/system, right (payoff) = green/money.
       Splits prevent both stats from competing for the same emotional weight. */
    .stat-feature-value--problem { color: var(--fhc-primary-700); }
    .stat-feature-value--payoff  { color: var(--fhc-success-700); }
    .stat-feature-label {
        color: var(--fhc-ink-700);
        font-size: 1.02rem;
        line-height: 1.5;
        font-weight: 600;
        max-width: 24ch;
    }

    .hospital-strip {
        padding-top: 52px;
        padding-bottom: 104px;
    }
    .hospital-strip-subtitle {
        text-align: center;
        margin: 0;
    }
    .logo-marquee {
        position: relative;
        overflow: hidden;
        border-radius: 28px;
        padding: 16px 0;
    }
    .logo-marquee::before,
    .logo-marquee::after {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        width: 72px;
        z-index: 2;
        pointer-events: none;
    }
    .logo-marquee::before {
        left: 0;
        background: linear-gradient(to right, #eef5ff 0%, rgba(238,245,255,0) 100%);
    }
    .logo-marquee::after {
        right: 0;
        background: linear-gradient(to left, #eef5ff 0%, rgba(238,245,255,0) 100%);
    }
    .logo-marquee-track {
        display: flex;
        align-items: center;
        gap: 18px;
        width: max-content;
        animation: hospital-marquee 32s linear infinite;
    }
    .logo-marquee:hover .logo-marquee-track {
        animation-play-state: paused;
    }
    .logo-item {
        flex: 0 0 auto;
        width: 220px;
        height: 98px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.58);
        border: 1px solid rgba(15,23,42,.05);
        border-radius: var(--fhc-radius-lg);
        padding: 18px 28px;
        box-shadow: none;
    }
    .logo-item img {
        max-width: 150px;
        max-height: 42px;
        width: auto;
        height: auto;
        object-fit: contain;
        opacity: .85;
        filter: grayscale(88%) brightness(97%);
        transition: opacity .35s ease, filter .35s ease, transform .35s ease;
    }
    .logo-item {
        transition: box-shadow .2s ease, border-color .2s ease, transform .2s ease;
    }
    .logo-item:hover {
        border-color: rgba(37,99,235,0.28);
        box-shadow: 0 10px 26px -12px rgba(15,23,42,0.2);
        transform: translateY(-2px);
    }
    .logo-item:hover img {
        opacity: 1;
        filter: grayscale(0%);
        transform: scale(1.04);
    }
    .hospital-strip-metrics-lead {
        max-width: 620px;
        margin: -4px auto 22px;
        text-align: center;
        font-size: .93rem;
        line-height: 1.55;
        color: var(--fhc-ink-500);
        font-weight: 500;
    }
    .hospital-strip-metrics {
        list-style: none;
        margin: 0 auto;
        padding: 0;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 14px 18px;
        max-width: 960px;
    }
    .hospital-strip-metrics li {
        display: flex;
        flex-direction: column;
        gap: 6px;
        padding: 16px 16px 15px;
        border-radius: 18px;
        background: linear-gradient(165deg, rgba(255,255,255,.58) 0%, rgba(241,246,253,.44) 100%);
        border: 1px solid rgba(148,163,184,.22);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.78),
            0 12px 34px rgba(15,23,42,.05);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
        text-align: center;
        transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
    }
    @media (prefers-reduced-motion: no-preference) {
        .hospital-strip-metrics li:hover {
            transform: translateY(-2px);
            border-color: rgba(6,182,212,.32);
            box-shadow:
                inset 0 1px 0 rgba(255,255,255,.85),
                0 16px 40px rgba(15,23,42,.065),
                0 0 0 1px rgba(6,182,212,.1);
        }
    }
    .hospital-strip-metrics-k {
        font-size: clamp(1.2rem, 2.8vw, 1.56rem);
        font-weight: 800;
        letter-spacing: -.03em;
        line-height: 1;
        font-variant-numeric: tabular-nums;
        color: var(--fhc-success-700);
    }
    .hospital-strip-metrics-v {
        font-size: .78rem;
        line-height: 1.4;
        color: var(--fhc-ink-600);
        font-weight: 600;
        display: block;
    }
    @media (max-width: 767.98px) {
        .hospital-strip-metrics {
            grid-template-columns: 1fr;
            gap: 10px;
        }
        .hospital-strip-metrics-lead {
            margin-top: 4px;
        }
    }

    @keyframes hospital-marquee {
        from { transform: translateX(0); }
        to { transform: translateX(calc(-50% - 9px)); }
    }
    @media (prefers-reduced-motion: reduce) {
        .logo-marquee-track { animation: none; }
    }
    @media (max-width: 767.98px) {
        .logo-marquee::before,
        .logo-marquee::after {
            display: none;
        }
        .logo-marquee {
            overflow: visible;
            border-radius: 0;
            padding: 0;
        }
        .logo-marquee-track {
            width: 100%;
            animation: none;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 12px;
        }
        .logo-item.is-duplicate {
            display: none;
        }
        .logo-item {
            width: 100%;
            height: 82px;
            padding: 14px 20px;
        }
        .logo-item img {
            max-width: 120px;
            max-height: 34px;
        }
    }

    .landing-what-you-see {
        padding-top: 72px;
        padding-bottom: 88px;
        background: transparent;
    }
    .landing-what-you-see h2 {
        font-size: clamp(1.85rem, 2.8vw, 2.35rem);
        letter-spacing: -0.03em;
    }
    .landing-what-list li {
        display: flex;
        align-items: flex-start;
        gap: .65rem;
        padding: .55rem 0;
        font-size: 1.05rem;
        color: var(--fhc-ink-700);
        font-weight: 500;
        border-bottom: 1px solid rgba(148, 163, 184, .2);
    }
    .landing-what-list li:last-child { border-bottom: none; }
    .landing-what-list .fa-check { margin-top: .2rem; flex-shrink: 0; }
    .landing-sample-card {
        border-radius: 24px;
        border: 1px solid rgba(37, 99, 235, .2);
        background: linear-gradient(165deg, rgba(255,255,255,.95) 0%, rgba(239, 246, 255, .88) 100%);
        padding: 1.5rem 1.65rem;
        box-shadow: 0 16px 40px rgba(15, 23, 42, .07);
    }
    .landing-sample-card-label {
        font-size: .75rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        font-weight: 700;
        color: var(--fhc-ink-500);
        margin-bottom: 1rem;
    }
    .landing-sample-row {
        display: flex;
        justify-content: space-between;
        align-items: baseline;
        gap: 1rem;
        padding: .5rem 0;
        font-size: 1.02rem;
    }
    .landing-sample-highlight {
        margin-top: .35rem;
        padding-top: 1rem;
        border-top: 2px dashed rgba(37, 99, 235, .25);
        font-size: 1.15rem;
        color: var(--fhc-success-700);
    }
    .landing-sample-highlight strong { font-size: 1.25rem; }

    /* Pricing Comparison Card — make savings the focal point of the card.
       Bigger green number, friendly background, the emotional payoff. */
    .landing-sample-savings-hero {
        margin-top: 1rem;
        padding: 1.15rem 1.25rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        border-radius: 18px;
        background: linear-gradient(135deg, rgba(209,250,229,0.8) 0%, rgba(167,243,208,0.5) 100%);
        border: 1px solid rgba(22,163,74,0.3);
        box-shadow: 0 8px 22px -12px rgba(22,163,74,0.4);
    }
    .landing-sample-savings-hero-label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        font-size: 0.9rem;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--fhc-success-700);
    }
    .landing-sample-savings-hero-label i { color: var(--fhc-success-600); font-size: 1rem; }
    .landing-sample-savings-hero-amount {
        font-size: clamp(1.9rem, 3.2vw, 2.35rem);
        font-weight: 800;
        color: var(--fhc-success-700);
        letter-spacing: -0.02em;
        font-feature-settings: 'tnum';
        line-height: 1;
    }
    /* Percentage context below the sample-card savings. Gives the raw dollar
       amount an immediately-comparable benchmark. */
    .landing-sample-savings-context {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: .9rem;
        color: var(--fhc-success-700);
        font-weight: 500;
    }
    .landing-sample-savings-context i { color: var(--fhc-success-500); font-size: .85rem; }
    .landing-sample-savings-context strong {
        font-weight: 700;
        color: var(--fhc-success-700);
    }

    .landing-how {
        padding-top: 96px;
        padding-bottom: 108px;
        background: transparent;
    }
    .landing-how--below-hero {
        padding-top: 40px;
        padding-bottom: 88px;
        background:
            radial-gradient(900px 380px at 50% -8%, rgba(37, 99, 235, 0.09), transparent 52%),
            radial-gradient(700px 240px at 85% 20%, rgba(6, 182, 212, 0.06), transparent 45%);
    }
    section.landing-how--below-hero .landing-section-eyebrow {
        color: var(--fhc-primary-700);
        font-weight: 800;
        letter-spacing: 0.18em;
    }
    section.landing-how--below-hero .landing-section-title {
        font-weight: 700;
        font-size: clamp(1.48rem, 2.35vw, 1.92rem);
        letter-spacing: -0.024em;
    }
    section.landing-how--below-hero .landing-section-lead {
        color: var(--fhc-ink-600);
        font-weight: 500;
    }
    .landing-how .card {
        border: 1px solid rgba(15,23,42,.06);
        border-radius: 24px;
        box-shadow: 0 10px 30px -15px rgba(15,23,42,.10);
        background: rgba(255,255,255,.82);
        backdrop-filter: blur(10px);
        transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
    }
    section.landing-how--below-hero .card {
        background: #ffffff;
        border: 1px solid rgba(15, 23, 42, 0.11);
        box-shadow:
            0 16px 42px -18px rgba(15, 23, 42, 0.18),
            0 2px 0 rgba(37, 99, 235, 0.04);
        backdrop-filter: none;
    }
    .landing-how .card:hover {
        transform: translateY(-3px);
        box-shadow: 0 18px 40px -15px rgba(15,23,42,.15);
        border-color: rgba(37,99,235,.22);
    }
    section.landing-how--below-hero .card:hover {
        border-color: rgba(37, 99, 235, 0.35);
        box-shadow:
            0 22px 48px -16px rgba(37, 99, 235, 0.2),
            0 18px 40px -15px rgba(15, 23, 42, 0.14);
    }
    .landing-how .card-body { padding: 2rem; display: flex; flex-direction: column; }
    .landing-how h5 { font-size: 1.2rem; letter-spacing: -0.02em; }
    .landing-how .card .text-muted { font-size: 1rem; line-height: 1.65; color: var(--fhc-muted) !important; }
    .landing-how-step {
        display: inline-block;
        font-size: 0.72rem;
        font-weight: 800;
        letter-spacing: 0.1em;
        text-transform: uppercase;
        color: var(--fhc-primary-700);
        background: rgba(37,99,235,0.10);
        padding: 0.25rem 0.65rem;
        border-radius: var(--fhc-radius-pill);
        margin-bottom: 0.85rem;
        align-self: flex-start;
    }
    .landing-how-meta {
        margin-top: auto;
        display: inline-flex;
        align-items: center;
        gap: 0.45rem;
        font-size: 0.82rem;
        font-weight: 600;
        color: var(--fhc-success-700);
        background: rgba(220,252,231,0.55);
        border: 1px solid rgba(34,197,94,0.22);
        padding: 0.35rem 0.7rem;
        border-radius: var(--fhc-radius-pill);
        align-self: flex-start;
    }
    .landing-how-meta i { color: var(--fhc-success-600); font-size: 0.8rem; }

    /* How-it-works: mini motion graphics for each step’s action */
    .landing-how-act {
        margin: 0.35rem 0 1rem;
        min-height: 88px;
        display: flex;
        align-items: center;
        justify-content: center;
        user-select: none;
    }
    /* Step 1 — bold bill file drops into zone */
    .landing-how-act-upload {
        position: relative;
        width: 100%;
        max-width: 220px;
        height: 88px;
    }
    .landing-how-act-upload__drop {
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        width: 92%;
        height: 46px;
        border: 2px dashed rgba(37, 99, 235, 0.5);
        border-radius: 12px;
        background: rgba(37, 99, 235, 0.08);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .landing-how-act-upload__hint {
        font-size: 0.85rem;
        color: var(--fhc-primary-600);
        opacity: 0.85;
        animation: how-act-upload-hint 1.6s ease-in-out infinite;
    }
    .landing-how-act-upload__file {
        position: absolute;
        left: 50%;
        top: 0;
        width: 78px;
        margin-left: -39px;
        padding: 13px 10px 10px;
        border-radius: 10px;
        background: var(--card-background);
        border: 1px solid var(--fhc-ink-500);
        box-shadow:
            0 2px 0 rgba(255, 255, 255, 0.9) inset,
            0 12px 28px rgba(15, 23, 42, 0.18),
            0 4px 8px rgba(37, 99, 235, 0.12);
        display: flex;
        flex-direction: column;
        gap: 5px;
        transform-origin: center bottom;
        animation: how-act-upload-drop 2.5s ease-in-out infinite;
    }
    .landing-how-act-upload__file::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 3px;
        border-radius: 10px 10px 0 0;
        background: linear-gradient(90deg, var(--fhc-primary-500), var(--fhc-primary-400));
        opacity: 0.95;
    }
    .landing-how-act-upload__file-icon {
        font-size: 1.05rem;
        color: var(--fhc-primary-700);
        margin-bottom: 1px;
        line-height: 1;
        filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.08));
    }
    .landing-how-act-upload__file span {
        display: block;
        height: 4px;
        border-radius: 2px;
        background: linear-gradient(90deg, var(--fhc-ink-500), #94a3b8);
    }
    .landing-how-act-upload__file span:last-child { width: 64%; }
    @keyframes how-act-upload-drop {
        0%, 12% { transform: translateY(0) rotate(-1.5deg); }
        35% { transform: translateY(36px) scale(0.96) rotate(0deg); }
        45% { transform: translateY(40px) scale(1) rotate(0deg); }
        58% { transform: translateY(36px) scale(0.99); }
        72%, 100% { transform: translateY(0) rotate(1.5deg); }
    }
    @keyframes how-act-upload-hint {
        0%, 100% { opacity: 0.55; transform: translateY(0); }
        50% { opacity: 1; transform: translateY(3px); }
    }
    /* Step 2 — OCR read: scan + line clarity + CPT/charge resolving */
    .landing-how-act-analyze {
        position: relative;
        width: 100%;
        max-width: 220px;
        height: 86px;
        padding: 8px 9px;
        border-radius: 12px;
        background: rgba(15, 23, 42, 0.04);
        border: 1px solid rgba(37, 99, 235, 0.15);
        overflow: hidden;
        font-variant-numeric: tabular-nums;
    }
    .landing-how-act-analyze__row {
        position: relative;
        z-index: 1;
        height: auto;
        min-height: 22px;
        margin-bottom: 5px;
        border-radius: 6px;
        border: 1px solid rgba(148, 163, 184, 0.35);
        background: rgba(248, 250, 252, 0.95);
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 3px 8px;
        gap: 8px;
        animation: how-act-ocr-row 2.8s ease-in-out infinite;
    }
    .landing-how-act-analyze__row:nth-child(1) { animation-delay: 0s; }
    .landing-how-act-analyze__row:nth-child(2) { animation-delay: 0.32s; }
    .landing-how-act-analyze__row:nth-child(3) { animation-delay: 0.64s; margin-bottom: 0; }
    .landing-how-act-analyze__code,
    .landing-how-act-analyze__val {
        font-size: 0.62rem;
        font-weight: 700;
        letter-spacing: 0.04em;
        animation: how-act-ocr-text 2.8s ease-in-out infinite;
    }
    .landing-how-act-analyze__row:nth-child(1) .landing-how-act-analyze__code,
    .landing-how-act-analyze__row:nth-child(1) .landing-how-act-analyze__val { animation-delay: 0s; }
    .landing-how-act-analyze__row:nth-child(2) .landing-how-act-analyze__code,
    .landing-how-act-analyze__row:nth-child(2) .landing-how-act-analyze__val { animation-delay: 0.32s; }
    .landing-how-act-analyze__row:nth-child(3) .landing-how-act-analyze__code,
    .landing-how-act-analyze__row:nth-child(3) .landing-how-act-analyze__val { animation-delay: 0.64s; }
    .landing-how-act-analyze__code {
        color: var(--fhc-ink-500);
        font-family: ui-monospace, 'Cascadia Code', 'Segoe UI Mono', monospace;
    }
    .landing-how-act-analyze__val {
        color: var(--fhc-ink-500);
    }
    @keyframes how-act-ocr-row {
        0%, 8% {
            filter: blur(1.5px);
            opacity: 0.55;
            border-color: rgba(148, 163, 184, 0.35);
            background: rgba(248, 250, 252, 0.85);
        }
        18%, 38% {
            filter: blur(0);
            opacity: 1;
            border-color: rgba(37, 99, 235, 0.45);
            background: linear-gradient(180deg, rgba(239, 246, 255, 0.98), rgba(219, 234, 254, 0.75));
            box-shadow: 0 0 0 1px rgba(37, 99, 235, 0.12);
        }
        48%, 100% {
            filter: blur(0.8px);
            opacity: 0.65;
            border-color: rgba(148, 163, 184, 0.4);
            background: rgba(248, 250, 252, 0.92);
            box-shadow: none;
        }
    }
    @keyframes how-act-ocr-text {
        0%, 10% {
            opacity: 0.35;
            color: var(--fhc-ink-500);
            letter-spacing: 0.18em;
            transform: scale(0.96);
        }
        22%, 40% {
            opacity: 1;
            color: var(--fhc-ink-900);
            letter-spacing: 0.04em;
            transform: scale(1);
        }
        50%, 100% {
            opacity: 0.45;
            color: var(--fhc-muted);
            letter-spacing: 0.06em;
        }
    }
    .landing-how-act-analyze__scan {
        position: absolute;
        left: 5px;
        right: 5px;
        height: 24px;
        top: 7px;
        border-radius: 6px;
        z-index: 2;
        pointer-events: none;
        background: linear-gradient(
            180deg,
            transparent 0%,
            rgba(37, 99, 235, 0.07) 20%,
            rgba(37, 99, 235, 0.22) 50%,
            rgba(37, 99, 235, 0.07) 80%,
            transparent 100%
        );
        box-shadow:
            0 0 0 1px rgba(37, 99, 235, 0.2),
            0 6px 16px rgba(37, 99, 235, 0.15);
        animation: how-act-scan-sweep 2.8s ease-in-out infinite;
    }
    .landing-how-act-analyze__cursor {
        position: absolute;
        left: 10px;
        top: 50%;
        width: 2px;
        height: 14px;
        margin-top: -7px;
        background: var(--fhc-primary-600);
        border-radius: 1px;
        box-shadow: 0 0 6px rgba(37, 99, 235, 0.7);
        animation: how-act-ocr-cursor-blink 0.55s step-end infinite;
    }
    @keyframes how-act-scan-sweep {
        0%, 100% { transform: translateY(0); opacity: 0.92; }
        50% { transform: translateY(40px); opacity: 1; }
    }
    @keyframes how-act-ocr-cursor-blink {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.2; }
    }
    /* Step 3 — letter lines type on, then signature + send */
    .landing-how-act-letter {
        display: flex;
        align-items: center;
        gap: 12px;
        width: 100%;
        max-width: 230px;
        min-height: 88px;
    }
    .landing-how-act-letter__paper {
        flex: 1;
        min-width: 0;
        padding: 9px 10px 10px;
        border-radius: 10px;
        background: #fff;
        border: 1px solid rgba(148, 163, 184, 0.45);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.08);
    }
    .landing-how-act-letter__line {
        margin: 0 0 4px;
        padding: 0;
        font-size: 0.62rem;
        line-height: 1.35;
        font-weight: 500;
        color: var(--fhc-ink-700);
    }
    .landing-how-act-letter__line:last-of-type { margin-bottom: 6px; }
    .landing-how-act-letter__line span {
        display: inline;
        border-right: 2px solid transparent;
        padding-right: 1px;
        animation: how-act-letter-type 3.6s cubic-bezier(.4, 0, .2, 1) infinite;
    }
    .landing-how-act-letter__line:nth-child(1) span { animation-delay: 0s; }
    .landing-how-act-letter__line:nth-child(2) span { animation-delay: 0.5s; }
    .landing-how-act-letter__line:nth-child(3) span { animation-delay: 1s; }
    @keyframes how-act-letter-type {
        0%, 5% {
            clip-path: inset(0 100% 0 0);
            border-right-color: rgba(37, 99, 235, 0.95);
        }
        20% {
            clip-path: inset(0 0 0 0);
            border-right-color: rgba(37, 99, 235, 0.95);
        }
        24%, 58% {
            clip-path: inset(0 0 0 0);
            border-right-color: transparent;
        }
        66%, 100% {
            clip-path: inset(0 100% 0 0);
            border-right-color: transparent;
        }
    }
    .landing-how-act-letter__sig {
        height: 14px;
        border-radius: 0 0 50% 40% / 0 0 10px 10px;
        border-bottom: 2.5px solid var(--fhc-primary-600);
        transform-origin: left center;
        animation: how-act-sig-write 3.6s cubic-bezier(.4, 0, .2, 1) infinite 1.35s;
    }
    .landing-how-act-letter__send {
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(37, 99, 235, 0.12);
        color: var(--fhc-primary-600);
        font-size: 0.95rem;
        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
    }
    .landing-how-act-letter__send i {
        display: block;
        animation: how-act-plane-send 3.6s ease-in-out infinite 1.35s;
    }
    @keyframes how-act-sig-write {
        0%, 8% { transform: scaleX(0.06); opacity: 0.55; }
        28%, 52% { transform: scaleX(1); opacity: 1; }
        62%, 100% { transform: scaleX(0.06); opacity: 0.45; }
    }
    @keyframes how-act-plane-send {
        0%, 100% { transform: translate(0, 0) rotate(-12deg); }
        18% { transform: translate(2px, -3px) rotate(-22deg); }
        34% { transform: translate(8px, -10px) rotate(-38deg) scale(1.05); }
        44% { transform: translate(12px, -6px) rotate(-48deg); opacity: 1; }
        48% { transform: translate(16px, -2px) rotate(-52deg); opacity: 0; }
        49% { transform: translate(-10px, 8px) rotate(20deg); opacity: 0; }
        54% { transform: translate(0, 0) rotate(-12deg); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        .landing-how-act-upload__file,
        .landing-how-act-upload__hint,
        .landing-how-act-analyze__scan,
        .landing-how-act-analyze__row,
        .landing-how-act-analyze__code,
        .landing-how-act-analyze__val,
        .landing-how-act-analyze__cursor,
        .landing-how-act-letter__line span,
        .landing-how-act-letter__sig,
        .landing-how-act-letter__send i {
            animation: none !important;
        }
        .landing-how-act-upload__file { transform: translateY(36px); }
        .landing-how-act-analyze__scan { transform: translateY(22px); opacity: 0.95; }
        .landing-how-act-analyze__row {
            filter: none !important;
            opacity: 1 !important;
            border-color: rgba(148, 163, 184, 0.45) !important;
            background: rgba(248, 250, 252, 0.95) !important;
        }
        .landing-how-act-analyze__code,
        .landing-how-act-analyze__val {
            opacity: 1 !important;
        color: var(--fhc-ink-900) !important;
            letter-spacing: 0.04em !important;
            transform: none !important;
        }
        .landing-how-act-letter__line span {
            clip-path: none !important;
            border-right: none !important;
        }
        .landing-how-act-letter__sig { transform: scaleX(1); opacity: 1; }
    }

    .landing-tools {
        position: relative;
        padding-top: 88px;
        padding-bottom: 124px;
        margin-top: 0;
        background: transparent;
    }
    .landing-tools::before {
        display: none;
    }

    .landing-stats,
    .hospital-strip,
    .landing-how,
    .landing-what-you-see,
    .landing-tools {
        background: transparent;
    }
    .tool-card {
        position: relative;
        display: block;
        height: 100%;
        text-decoration: none;
        overflow: hidden;
        border: 1px solid rgba(15,23,42,.08);
        border-radius: var(--fhc-radius-lg);
        background: rgba(255,255,255,.92);
        padding: 1.5rem;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            0 8px 26px rgba(2,6,23,.045);
        transition: transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s ease, border-color .22s ease;
    }
    .tool-card-soft {
        isolation: isolate;
    }
    .tool-card-soft::after {
        content: "";
        position: absolute;
        inset: -1px;
        border-radius: inherit;
        background: radial-gradient(90% 80% at 20% -10%, rgba(6,182,212,.075) 0%, transparent 45%),
            radial-gradient(80% 60% at 100% 110%, rgba(37,99,235,.065) 0%, transparent 46%);
        opacity: .55;
        pointer-events: none;
        z-index: 0;
    }
    .tool-card-soft > * {
        position: relative;
        z-index: 1;
    }
    .tool-card-primary {
        border-color: rgba(6,182,212,.42);
        background: linear-gradient(175deg, rgba(255,255,255,.95) 0%, rgba(240,253,250,.92) 100%);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.92),
            0 2px 0 rgba(6,182,212,.06),
            0 12px 32px rgba(6,182,212,.09),
            0 8px 24px rgba(2,6,23,.035);
    }
    .tool-card-primary .tool-card-icon {
        color: var(--fhc-success-600);
    }
    .tool-card-icon{
        color: var(--fhc-primary-600);
        font-size:1.1rem;
        margin-bottom:.6rem;
        display:inline-flex;
    }
    .tool-card h5 {
        color: var(--fhc-ink-900);
        margin-bottom: .45rem;
        letter-spacing: -0.02em;
    }
    .tool-card p {
        color: var(--fhc-muted);
        margin: 0;
        font-size: .99rem;
        line-height: 1.6;
    }
    .tool-card:hover {
        transform: translateY(-4px);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.98),
            0 20px 48px rgba(2,6,23,.065),
            0 10px 24px rgba(37,99,235,.065);
        border-color: rgba(37,99,235,.34);
    }
    .tool-card-primary:hover {
        border-color: rgba(6,182,212,.5);
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.95),
            0 2px 0 rgba(6,182,212,.07),
            0 22px 48px rgba(6,182,212,.13),
            0 14px 32px rgba(2,6,23,.048);
    }

    /* ===== Hero: primary CTA (dominant action) =====
       Rounded pill with a punchy blue gradient and a clear shadow — this is
       the ONLY hero button that looks like a primary CTA. */
    .hero-cta-primary {
        border-radius: var(--fhc-radius-pill);
        padding: 0.85rem 1.6rem !important;
        font-weight: 700;
        letter-spacing: 0.01em;
        background: linear-gradient(135deg, var(--fhc-primary-600) 0%, var(--fhc-primary-700) 100%);
        border: none;
        box-shadow: 0 12px 28px -10px rgba(37,99,235,0.55), 0 4px 10px -4px rgba(29,78,216,0.35);
        transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
    }
    .hero-cta-primary:hover,
    .hero-cta-primary:focus {
        transform: translateY(-1px);
        background: linear-gradient(135deg, var(--fhc-primary-700) 0%, #1e40af 100%);
        box-shadow: 0 16px 34px -10px rgba(37,99,235,0.65), 0 6px 14px -4px rgba(29,78,216,0.4);
        color: #fff;
    }
    .hero-cta-primary i { transition: transform .15s ease; }
    .hero-cta-primary:hover i { transform: translateX(3px); }

    /* Guest hero: cyan CTA — rose overcharge bars read as alert, not Christmas. */
    .hero-cta-primary.hero-cta-primary--guest-teal {
        font-weight: 700;
        border-radius: 14px !important;
        padding: 0.9rem 1.75rem !important;
        letter-spacing: 0.015em;
        background: linear-gradient(168deg, #22d3ee 0%, #06b6d4 38%, #0891b2 72%, #0e7490 100%) !important;
        border: 1px solid rgba(255,255,255,.28) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.48),
            inset 0 -1px 0 rgba(0,0,0,.14),
            0 16px 38px -10px rgba(8,145,178,.52),
            0 8px 22px -12px rgba(14,116,144,.35) !important;
        color: #fff !important;
    }
    .hero-cta-primary.hero-cta-primary--guest-teal:hover,
    .hero-cta-primary.hero-cta-primary--guest-teal:focus {
        transform: translateY(-2px);
        background: linear-gradient(168deg, #67e8f9 0%, #22d3ee 40%, #06b6d4 72%, #155e75 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.5),
            inset 0 -1px 0 rgba(0,0,0,.12),
            0 20px 48px -10px rgba(8,145,178,.56),
            0 10px 28px -12px rgba(14,116,144,.4) !important;
        color: #fff !important;
    }
    .hero-cta-primary.hero-cta-primary--guest-teal:focus-visible {
        outline: 2px solid rgba(6,182,212,.55);
        outline-offset: 3px;
    }

    body.landing-page.is-authenticated .hero-cta-primary--dashboard.btn,
    body.landing-page.is-authenticated .hero-cta-primary--dashboard {
        background: linear-gradient(145deg, var(--fhc-success-500) 0%, var(--fhc-success-700) 100%) !important;
        border: none !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.38),
            0 16px 40px rgba(6,182,212,.32),
            0 8px 20px rgba(8,145,178,.26) !important;
        color: #fff !important;
    }
    body.landing-page.is-authenticated .hero-cta-primary--dashboard.btn:hover,
    body.landing-page.is-authenticated .hero-cta-primary--dashboard.btn:focus {
        background: linear-gradient(145deg, var(--fhc-success-600) 0%, #155e75 100%) !important;
        box-shadow:
            inset 0 1px 0 rgba(255,255,255,.32),
            0 20px 52px rgba(6,182,212,.38),
            0 10px 24px rgba(8,145,178,.32) !important;
        transform: translateY(-2px);
        color: #fff !important;
    }

    /* ===== Hero: ghost CTA (secondary, very quiet) =====
       No background, no border — just an underlined link-style button. This
       reinforces the CTA hierarchy: one primary, one whisper. */
    .hero-cta-ghost {
        display: inline-flex;
        align-items: center;
        gap: 0.1rem;
        padding: 0.85rem 0.4rem;
        font-size: 1rem;
        font-weight: 600;
        color: var(--fhc-muted);
        text-decoration: none;
        background: transparent;
        border: none;
        transition: color .15s ease, transform .15s ease;
    }
    .hero-cta-ghost i { color: var(--fhc-ink-500); transition: transform .15s ease, color .15s ease; }
    .hero-cta-ghost:hover,
    .hero-cta-ghost:focus {
        color: var(--fhc-primary-700);
        text-decoration: none;
    }
    .hero-cta-ghost:hover i {
        color: var(--fhc-primary-700);
        transform: translateX(3px);
    }
    /* Guest secondary stays visually subordinate — do not steal primary blue hue. */
    .hero-cta-ghost.hero-cta-ghost--guest-secondary {
        font-size: .88rem;
        font-weight: 550;
        color: var(--fhc-ink-500);
        padding-top: .35rem;
        padding-bottom: .35rem;
    }
    .hero-cta-ghost.hero-cta-ghost--guest-secondary i {
        color: var(--fhc-ink-400);
        font-size: .78rem !important;
    }
    .hero-cta--guest {
        margin-top: 0;
    }
    .hero-cta-ghost.hero-cta-ghost--guest-secondary:hover,
    .hero-cta-ghost.hero-cta-ghost--guest-secondary:focus {
        color: var(--fhc-ink-700);
        text-decoration: none;
    }
    .hero-cta-ghost.hero-cta-ghost--guest-secondary:hover i,
    .hero-cta-ghost.hero-cta-ghost--guest-secondary:focus i {
        color: var(--fhc-success-600);
        transform: translateX(2px);
    }
    @media (max-width: 575.98px) {
        .hero-cta--guest {
            flex-direction: column;
            align-items: stretch !important;
        }
        .hero-cta--guest .hero-cta-primary {
            width: 100%;
            text-align: center;
            justify-content: center;
            min-height: 52px;
        }
        .hero-cta-ghost.hero-cta-ghost--guest-secondary {
            justify-content: center;
            padding-left: .25rem;
        }
    }
    /* Retain the old class name so existing partials (email footers, etc.)
       that may reference it don't break. */
    .hero-cta-secondary {
        border-radius: var(--fhc-radius-pill);
        background: rgba(255,255,255,.72);
        border-color: rgba(37,99,235,.35);
        color: var(--fhc-primary-700);
        font-weight: 600;
    }

    /* ===== Sample result card: visual overcharge bars ===== */
    .landing-sample-savings-chip {
        display: inline-flex;
        align-items: center;
        padding: 4px 10px;
        border-radius: var(--fhc-radius-pill);
        background: linear-gradient(180deg, rgba(236,253,245,0.92), rgba(209,250,229,0.82));
        color: var(--fhc-success-700);
        font-weight: 700;
        font-size: .72rem;
        letter-spacing: .04em;
        text-transform: uppercase;
        border: 1px solid var(--fhc-success-border);
    }
    .landing-sample-bar {
        margin: 1rem 0 1.1rem;
        display: flex;
        flex-direction: column;
        gap: .55rem;
    }
    .landing-sample-bar-row {
        display: grid;
        grid-template-columns: 64px 1fr;
        align-items: center;
        gap: .75rem;
    }
    .landing-sample-bar-label {
        font-size: .78rem;
        text-transform: uppercase;
        letter-spacing: .08em;
        color: var(--fhc-ink-500);
        font-weight: 700;
    }
    .landing-sample-bar-track {
        position: relative;
        height: 28px;
        background: rgba(37,99,235,.06);
        border-radius: var(--fhc-radius-pill);
        border: 1px solid rgba(37,99,235,.10);
        overflow: hidden;
    }
    .landing-sample-bar-fill {
        position: relative;
        height: 100%;
        border-radius: var(--fhc-radius-pill);
        display: flex;
        align-items: center;
        justify-content: flex-end;
        padding: 0 12px;
        font-size: .92rem;
        font-weight: 700;
        color: #ffffff;
        /* Start collapsed so we can animate to `--target-width`
           (set via inline style per row) when the card enters the
           viewport and `.is-visible` is applied by the observer. */
        width: 0;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
        transition: width 1.1s cubic-bezier(.2,.9,.3,1);
    }
    .landing-sample-bar-fill--billed {
        background: linear-gradient(90deg, var(--fhc-danger-500) 0%, var(--fhc-danger-600) 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(220,38,38,.18);
    }
    .landing-sample-bar-fill--typical {
        background: linear-gradient(90deg, var(--fhc-success-400) 0%, var(--fhc-success-600) 100%);
        box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 4px 10px rgba(22,163,74,.18);
        /* Typical bar starts growing ~250ms after the billed bar so the
           eye reads the gap as "less is better." */
        transition-delay: .25s;
    }
    /* Once the card is in view, grow each bar to its target width. */
    .landing-sample-card.is-visible .landing-sample-bar-fill {
        width: var(--target-width, 100%);
    }
    .landing-sample-bar-value {
        font-variant-numeric: tabular-nums;
        opacity: 0;
        transition: opacity .3s ease .25s;
    }
    .landing-sample-card.is-visible .landing-sample-bar-value { opacity: 1; }
    .landing-sample-bar-fill--typical .landing-sample-bar-value {
        transition-delay: .5s;
    }
    .landing-sample-savings-hero-amount {
        font-variant-numeric: tabular-nums;
    }
    @media (prefers-reduced-motion: reduce) {
        .landing-sample-bar-fill { transition: none; width: var(--target-width, 100%); }
        .landing-sample-bar-value { opacity: 1; transition: none; }
    }

    /* ===== FAQ teaser ===== */
    .landing-faq {
        padding-top: 88px;
        padding-bottom: 72px;
        background: transparent;
    }
    .landing-faq-item {
        background: rgba(255,255,255,.85);
        border: 1px solid rgba(148,163,184,.20);
        border-radius: 18px;
        margin-bottom: 12px;
        padding: 0;
        box-shadow: 0 8px 22px rgba(15,23,42,.04);
        transition: box-shadow .2s ease, border-color .2s ease;
    }
    .landing-faq-item[open] {
        border-color: rgba(37,99,235,.25);
        box-shadow: 0 12px 30px rgba(37,99,235,.08);
    }
    .landing-faq-item summary {
        list-style: none;
        cursor: pointer;
        padding: 1.05rem 1.35rem;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        color: var(--fhc-ink-900);
        font-weight: 600;
        font-size: 1.05rem;
    }
    .landing-faq-item summary::-webkit-details-marker { display: none; }
    .landing-faq-q { flex: 1; }
    .landing-faq-chevron {
        color: var(--fhc-primary-600);
        font-size: .9rem;
        transition: transform .25s ease;
    }
    .landing-faq-item[open] .landing-faq-chevron { transform: rotate(180deg); }
    .landing-faq-a {
        padding: 0 1.35rem 1.15rem 1.35rem;
        color: var(--fhc-muted);
        font-size: 1rem;
        line-height: 1.65;
    }

    /* Vertical rhythm: generous desktop section padding + tighter mobile. */
    @media (min-width: 992px) {
        .landing-how { padding-top: 80px; padding-bottom: 80px; }
        .landing-stats { padding-top: 64px; padding-bottom: 104px; }
        .hospital-strip { padding-top: 56px; padding-bottom: 112px; }
        .landing-what-you-see { padding-top: 80px; padding-bottom: 96px; }
        .landing-faq { padding-top: 104px; padding-bottom: 88px; }
        .landing-tools { padding-top: 104px; padding-bottom: 128px; }
        .landing-how--below-hero { padding-top: 48px; padding-bottom: 96px; }
    }
    @media (max-width: 991.98px){
        /* Hero intros start at opacity:0 + blur; if animations stall (iOS/WebKit),
           the fold looks empty while the closing CTA below still shows. Force
           visible copy and CTAs on small viewports. */
        .landing-hero .hero-title,
        .landing-hero .hero-title-amount,
        .landing-hero .hero-subtitle,
        .landing-hero .hero-savings-hook,
        .landing-hero .hero-guest-lead,
        .landing-hero .hero-cta,
        .landing-hero .hero-cta-micro,
        .landing-hero .hero-cta-proof,
        .landing-hero .hero-proof,
        .landing-hero .hero-eyebrow {
            opacity: 1 !important;
            transform: none !important;
            filter: none !important;
            animation: none !important;
            will-change: auto !important;
        }
        .landing-hero .hero-title-amount.is-landed::after {
            animation: none !important;
            display: none !important;
        }
        /* Hero mock bars use scaleX(0)→1; if that animation never completes,
           the card can look empty. Show final state on small screens. */
        .landing-hero .hero-mock-compare-fair,
        .landing-hero .hero-mock-compare-over {
            animation: none !important;
            transform: scaleX(1) !important;
        }
        .landing-hero .hero-art--mock,
        .landing-hero .hero-mock {
            opacity: 1 !important;
            visibility: visible !important;
        }
        .landing-hero .hero-mock-chip--ok i,
        .landing-hero .hero-mock-action-meta--pulse i {
            animation: none !important;
        }
        /* Extra top inset so the headline clears the fixed nav on phones (notch + hamburger). */
        .landing-hero { padding-top: clamp(72px, 14vw, 88px); padding-bottom: 32px; }
        body.landing-page.is-guest .landing-hero {
            padding-top: clamp(80px, 16vw, 96px);
        }
        body.landing-page.is-authenticated .landing-hero {
            padding-top: clamp(56px, 12vw, 72px);
        }
        .landing-stats { padding-top: 28px; padding-bottom: 64px; }
        .landing-stats-panel { padding: 2rem 1.35rem; border-radius: var(--fhc-radius-lg); }
        .landing-how { padding-top: 48px; padding-bottom: 48px; }
        .landing-how--below-hero { padding-top: 28px; padding-bottom: 64px; }
        .landing-what-you-see { padding-top: 48px; padding-bottom: 56px; }
        .landing-faq { padding-top: 56px; padding-bottom: 48px; }
        .landing-tools { padding-top: 56px; padding-bottom: 72px; }
    }
    @media (max-width: 575.98px) {
        body.landing-page.is-guest .landing-hero {
            padding-top: clamp(88px, 18vw, 104px);
        }
        .landing-sample-bar-row {
            grid-template-columns: 56px 1fr;
            gap: .5rem;
        }
        .landing-sample-bar-track { height: 26px; }
        .landing-faq-item summary { padding: .95rem 1.1rem; font-size: 1rem; }
        .landing-faq-a { padding: 0 1.1rem 1rem 1.1rem; }
    }