.material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24; }
    /* ---- Global polish: crisper type, smooth scroll, branded selection ---- */
    html { scroll-behavior: smooth; }
    body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
    ::selection { background: var(--sos-primary); color: #fff; }
    img { max-width: 100%; }
    /* ---- Mobile tuning: tighter side gutters + right-sized section headings ---- */
    @media (max-width: 639px) {
        .px-grid-gutter { padding-left: 1.25rem !important; padding-right: 1.25rem !important; }
        .text-headline-lg { font-size: 30px !important; line-height: 1.22 !important; }
    }
    .hero-gradient { background: rgba(0,52,28,0.80); }
    /* Mobile: fade the photo's own edges into the green so mainly the couple shows */
    .hero-photo {
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0) 100%);
                mask-image: linear-gradient(180deg, #000 0%, #000 70%, rgba(0,0,0,0) 100%);
    }
    @media (min-width:1024px){ .hero-photo { -webkit-mask-image:none; mask-image:none; } }
    /* ---- Hero: hold a generous height, but never let it stretch into a void ---- */
    @media (min-width:1024px){
        .hero-grid, .hero-media { min-height: clamp(520px, calc(100vh - 200px), 640px); }
    }
    /* ---- Track record band (its own plate under the hero) ---- */
    .trust-band { background:#fff; border-bottom:1px solid rgba(0,52,28,0.07); }
    .trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
    .trust-cell {
        position:relative; display:flex; flex-direction:column; align-items:center;
        text-align:center; padding:52px 8px;
    }
    @media (min-width:640px){ .trust-cell { padding:76px 24px; } }
    @media (min-width:1024px){ .trust-cell { padding:92px 32px; } }
    /* Hairlines that fade out at both ends — cleaner than a hard rule */
    .trust-cell + .trust-cell::before {
        content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
        width:1px; height:58%;
        background:linear-gradient(180deg, rgba(0,52,28,0) 0%, rgba(0,52,28,0.14) 50%, rgba(0,52,28,0) 100%);
    }
    .trust-num {
        font-weight:900; line-height:1; color:#00341c; letter-spacing:-0.022em;
        font-variant-numeric:tabular-nums;
        font-size:clamp(1.9rem,4.6vw,3.4rem);
    }
    .trust-label { margin-top:18px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:0.16em; color:#5a655d; }
    @media (min-width:640px){ .trust-label { margin-top:22px; font-size:12px; } }
    @keyframes spin { to { transform: rotate(360deg); } }
    @keyframes sos-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
    .sos-pill { animation: sos-float 5.5s ease-in-out infinite; }
    .sos-pill--delay { animation-delay: -2.75s; }
    @media (prefers-reduced-motion: reduce) { .sos-pill { animation: none; } }
    /* Reviews carousel: neighbours recede, active card comes forward */
    .review-slide .review-card {
        transform: scale(0.93);
        opacity: 0.5;
        transition: transform 520ms cubic-bezier(.22,.61,.36,1), opacity 520ms ease;
    }
    .review-slide.is-active .review-card { transform: scale(1); opacity: 1; }
    #reviews-carousel { touch-action: pan-y; }
    .review-text { position: relative; max-height: 6.5em; overflow: hidden; }
    .review-text.is-clamped::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2em;
        background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 85%);
    }
    .review-card.is-expanded .review-text { max-height: none; }
    .review-card.is-expanded .review-text::after { content: none; }
    #reviews-dots button {
        width: 9px; height: 9px; flex: 0 0 auto;
        padding: 0; border: 0; border-radius: 9999px;
        background: #c8d0cb; cursor: pointer;
        transition: background-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
    }
    #reviews-dots button:hover { background: #9aa8a0; }
    #reviews-dots button[aria-current="true"] {
        background: var(--sos-primary);
        transform: scale(1.15);
        box-shadow: 0 0 0 4px rgba(0, 52, 28, 0.12);
    }
    #reviews-dots button:focus-visible { outline: 2px solid var(--sos-primary); outline-offset: 3px; }
    @media (prefers-reduced-motion: reduce) {
        #reviews-track { transition: none !important; }
        .review-slide .review-card { transition: none; }
    }
    /* ============================================================
       PRODUCT PARTNERS — each product panel shows only the lender(s)
       it actually works with. Logos are grayscale, colour on hover.
       ============================================================ */
    .pp-slot { margin: 0 0 1.75rem; }
    .pp-label {
        font-size: 11px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.16em; color: var(--sos-ink-subtle); margin-bottom: 0.85rem;
    }
    .pp-row { display: flex; align-items: center; gap: 1.75rem; flex-wrap: wrap; }
    .pp-logo { height: 30px; display: flex; align-items: center; }
    .pp-logo img {
        max-height: 30px; max-width: 128px; width: auto; object-fit: contain;
        filter: grayscale(1); opacity: 0.72;
        transition: filter 200ms var(--sos-ease), opacity 200ms var(--sos-ease);
    }
    .pp-logo:hover img { filter: none; opacity: 1; }

    /* Personal loans — no partners; a plain trust line instead */
    .pp-trust {
        display: inline-flex; align-items: center; gap: 0.55rem;
        font-size: 12px; font-weight: 700; text-transform: uppercase;
        letter-spacing: 0.12em; color: var(--sos-ink-subtle);
    }
    .pp-trust .material-symbols-outlined { font-size: 18px; color: var(--sos-primary); }

    /* Credit builder — "Powered by [logo]" */
    .pp-poweredby { display: inline-flex; align-items: center; gap: 0.6rem; }
    .pp-poweredby > span {
        font-size: 12px; font-weight: 600; color: var(--sos-ink-subtle);
        text-transform: none; letter-spacing: 0;
    }
    .pp-poweredby img { height: 26px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.82; }

    /* Auto equity — logo sits beside the eyebrow */
    .pp-inline { display: inline-flex; align-items: center; }
    .pp-inline img { height: 24px; width: auto; object-fit: contain; filter: grayscale(1); opacity: 0.82; }

    /* Home equity — product → funding-partner mapping */
    .pp-map { display: flex; flex-direction: column; margin: 0 0 1.75rem; }
    .pp-map-row {
        display: flex; align-items: center; justify-content: space-between; gap: 1rem;
        padding: 0.7rem 0; border-bottom: 1px solid var(--sos-hairline);
    }
    .pp-map-row:first-child { border-top: 1px solid var(--sos-hairline); }
    .pp-map-prod { font-size: 14px; font-weight: 700; color: var(--sos-ink); }
    .pp-map-logo img {
        max-height: 26px; max-width: 130px; width: auto; object-fit: contain;
        filter: grayscale(1); opacity: 0.78;
        transition: filter 200ms var(--sos-ease), opacity 200ms var(--sos-ease);
    }
    .pp-map-row:hover .pp-map-logo img { filter: none; opacity: 1; }
    /* ============================================================
       PRODUCTS — pill segmented control, panel cross-fade, spec card
       Restraint over layers: content sits directly on the page, and the
       one dark card carries the brand. All color from sos-tokens.css.
       ============================================================ */
    #products-tablist {
        position: relative;
        display: inline-flex;
        gap: 4px;
        padding: 6px;
        border-radius: var(--sos-radius-pill);
        background: var(--sos-surface-slate);
        border: 1px solid rgba(191,201,191,0.45);
        max-width: 100%;
        overflow-x: auto;
        scrollbar-width: none; -ms-overflow-style: none;
    }
    #products-tablist::-webkit-scrollbar { display: none; }

    .product-tab {
        position: relative; z-index: 1;
        flex: 0 0 auto;
        border-radius: var(--sos-radius-pill);
        padding: 10px 20px;
        font-size: 14px; font-weight: 600; white-space: nowrap;
        color: var(--sos-ink-subtle);
        background: transparent;
        transition: color 200ms var(--sos-ease);
    }
    .product-tab:hover { color: var(--sos-primary); }

    /* ---- Product pager -----------------------------------------------
       Reads as the foot of the card, not a carousel widget parked under it:
       a counted index on the left, a hairline that advances across the
       card's width, the two controls on the right. No dots — the tabs
       directly above already do direct selection, and a row of dots under
       them is the thing that made this feel cheap.
       ------------------------------------------------------------------ */
    .products-pager {
        display: flex; align-items: center; gap: 24px;
        margin-top: 26px; padding: 0 2px;
    }
    .pager-meta {
        display: flex; align-items: center; gap: 12px;
        flex: 0 0 auto; min-width: 0;
    }
    .pager-index {
        font-size: 13px; font-weight: 700; letter-spacing: 0.02em;
        color: var(--sos-primary); font-variant-numeric: tabular-nums;
    }
    .pager-rule { width: 18px; height: 1px; background: rgba(0,52,28,0.22); flex: 0 0 auto; }
    .pager-name {
        font-size: 13px; font-weight: 500; letter-spacing: 0.01em;
        color: var(--sos-ink-subtle); opacity: 0.8;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    }

    /* The hairline: one segment per product, sliding to the active one. */
    .pager-track {
        position: relative; flex: 1 1 auto; height: 2px; border-radius: 2px;
        background: rgba(0,52,28,0.09); overflow: hidden;
    }
    .pager-fill {
        position: absolute; inset: 0 auto 0 0; height: 100%;
        border-radius: 2px; background: var(--sos-primary);
        transition: transform 520ms cubic-bezier(0.16, 1, 0.3, 1);
        will-change: transform;
    }

    .pager-arrows { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
    .pager-btn {
        width: 44px; height: 44px; border-radius: 9999px;
        display: inline-flex; align-items: center; justify-content: center;
        background: #fff; border: 1px solid rgba(191,201,191,0.6);
        color: var(--sos-primary); cursor: pointer;
        transition: background-color 240ms cubic-bezier(0.16,1,0.3,1),
                    border-color 240ms cubic-bezier(0.16,1,0.3,1),
                    color 240ms cubic-bezier(0.16,1,0.3,1),
                    box-shadow 240ms cubic-bezier(0.16,1,0.3,1),
                    transform 240ms cubic-bezier(0.16,1,0.3,1);
    }
    .pager-btn .material-symbols-outlined { font-size: 19px; font-variation-settings: 'wght' 300; }
    .pager-btn:hover {
        background: var(--sos-primary); border-color: var(--sos-primary); color: #fff;
        box-shadow: 0 12px 24px -12px rgba(0,52,28,0.45);
    }
    .pager-btn:active { transform: scale(0.94); }
    .pager-btn:focus-visible { outline: 2px solid var(--sos-primary); outline-offset: 3px; }

    .pager-hint {
        margin-top: 14px; text-align: center;
        font-size: 12.5px; color: var(--sos-ink-subtle); opacity: 0.55;
    }
    /* The hint is only true where you can actually swipe. */
    @media (hover: hover) and (pointer: fine) { .pager-hint { display: none; } }

    /* Tight screens: the product name is already in the card, so drop it
       rather than let it squeeze the track down to nothing. */
    @media (max-width: 560px) {
        .products-pager { gap: 16px; }
        .pager-name { display: none; }
        .pager-btn { width: 40px; height: 40px; }
    }

    /* Let a horizontal drag be read as a swipe, while vertical scroll stays native.
       position:relative so panels can be measured off-flow (see equalise()). */
    #products-deck { touch-action: pan-y; position: relative; }

    @media (prefers-reduced-motion: reduce) {
        .pager-btn, .pager-fill { transition: none; }
    }
    .product-tab[aria-selected="true"] { background: var(--sos-primary); color: #fff; box-shadow: var(--sos-shadow-sm); }
    .product-tab:focus-visible {
        outline: 2px solid var(--sos-primary); outline-offset: 2px;
        border-radius: var(--sos-radius-pill);
    }
    /* Desktop: keep the options as a centered horizontal segmented control
       (a touch larger) sitting above a full-width showcase card. */
    @media (min-width: 1024px) {
        .product-tab { padding: 11px 22px; font-size: 15px; }
        .product-tab[aria-selected="true"] { box-shadow: var(--sos-shadow-md); }
    }

    /* The single pill that slides behind the active tab. */
    #products-indicator {
        position: absolute; top: 6px; left: 0; z-index: 0;
        height: calc(100% - 12px); width: 0;
        border-radius: var(--sos-radius-pill);
        background: var(--sos-primary);
        box-shadow: var(--sos-shadow-sm);
        opacity: 0;
        transition: transform 280ms cubic-bezier(0.4, 0, 0.2, 1),
                    width     280ms cubic-bezier(0.4, 0, 0.2, 1),
                    opacity   160ms var(--sos-ease);
    }
    #products-indicator.is-ready { opacity: 1; }
    #products:not(.has-anim) .product-tab[aria-selected="true"] { background: var(--sos-primary); }

    /* Panel cross-fade + slide, driven by data-active (not inline styles). */
    .product-panel[data-active="false"] {
        opacity: 0; transform: translateX(-8px);
        transition: opacity 150ms var(--sos-ease), transform 150ms var(--sos-ease);
    }
    .product-panel[data-active="true"] {
        opacity: 1; transform: none;
        transition: opacity 200ms var(--sos-ease) 50ms,
                    transform 200ms var(--sos-ease) 50ms;
    }
    .product-panel[data-enter="true"] { opacity: 0; transform: translateX(8px); transition: none; }
    .product-panel:focus { outline: none; }

    /* ------------------------------------------------------------
       Media slot. The photography already shares one warm film palette,
       so it is left in its own color -- a green duotone flattens exactly
       what makes it read as a real campaign. Treatment is only a whisper
       of contrast plus a 1px inset ring so the frame reads as an object.
       ------------------------------------------------------------ */
    .product-media {
        position: relative;
        margin: 0 0 16px;
        border-radius: 12px;
        overflow: hidden;
        aspect-ratio: 16 / 6;
        background: var(--sos-surface-slate);
    }
    .product-media img {
        display: block; width: 100%; height: 100%;
        object-fit: cover; object-position: center;
        filter: saturate(0.96) contrast(1.03);
        transform: none;
        transition: transform 400ms cubic-bezier(0, 0, 0.2, 1);
    }
    .product-media::after {
        content: ""; position: absolute; inset: 0; border-radius: 12px;
        box-shadow: inset 0 0 0 1px rgba(0,52,28,0.10);
        pointer-events: none;
    }
    /* Incoming image settles in: 1.02 -> 1 alongside the panel cross-fade. */
    .product-panel[data-enter="true"] .product-media img { transform: scale(1.02); transition: none; }

    /* Facts: a bare contextual icon, no chip. Two columns once there's room. */
    .fact-list { display: grid; gap: 11px 32px; }
    @media (min-width: 640px) { .fact-list { grid-template-columns: 1fr 1fr; } }
    .fact-row { display: flex; align-items: flex-start; gap: 12px; }
    .fact-row .material-symbols-outlined {
        font-size: 20px; line-height: 1.4; flex: 0 0 auto;
        color: var(--sos-primary);
        font-variation-settings: 'wght' 300;
    }

    /* ============================================================
       Unified product showcase — one framed card holds the photo,
       the copy, and a dark spec ribbon, so each product reads as a
       single object instead of three loose stacked blocks.
       ============================================================ */
    .product-showcase {
        display: grid;
        grid-template-columns: 1fr;
        /* Stacked: the body is the elastic row, so when the card is held to a
           common height the slack lands in the white copy block — never in the
           photo or the dark ribbon. */
        grid-template-rows: auto 1fr auto;
        border-radius: 20px;
        overflow: hidden;
        background: var(--sos-card);
        border: 1px solid var(--sos-hairline);
        box-shadow: var(--sos-shadow-lg);
    }
    .product-showcase .product-media {
        margin: 0; border-radius: 0; aspect-ratio: 16 / 10; min-height: 200px;
    }
    .product-showcase .product-media::after { box-shadow: inset 0 0 0 1px rgba(0,52,28,0.06); }
    /* Centred, so when a shorter product's copy is held to the common card
       height the slack sits evenly above and below it — a balanced block,
       not a paragraph stranded above an empty white gap. */
    .showcase-body { padding: 26px 24px 28px; display: flex; flex-direction: column; justify-content: center; }
    .showcase-body .fact-list { grid-template-columns: 1fr; gap: 13px; }
    .showcase-body .product-cta { margin-top: 24px; align-self: flex-start; }

    /* Dark spec ribbon across the foot of the card. */
    .glance-strip {
        background: var(--sos-primary);
        padding: 20px 24px;
        display: grid; gap: 15px;
    }
    .glance-eyebrow {
        color: var(--sos-cta);
        font-size: 11px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.16em;
    }
    .glance-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 22px; }
    .glance-row { display: flex; flex-direction: column; gap: 3px; }
    .glance-row dt {
        color: rgba(255,255,255,0.55);
        font-size: 11px; font-weight: 700;
        text-transform: uppercase; letter-spacing: 0.07em;
    }
    .glance-row dd { color: #fff; font-weight: 600; font-size: 15px; text-align: left; }

    @media (min-width: 640px) {
        .glance-grid { grid-template-columns: repeat(4, 1fr); }
    }
    @media (min-width: 1024px) {
        .product-showcase {
            grid-template-columns: 1.02fr 1fr;
            grid-template-rows: 480px auto;   /* fixed top row -> every card's image is the same size */
        }
        .product-showcase .product-media {
            grid-column: 1; grid-row: 1;
            aspect-ratio: auto; height: 100%;
        }
        .showcase-body { grid-column: 2; grid-row: 1; padding: 36px 38px; justify-content: center; }
        .glance-strip {
            grid-column: 1 / -1; grid-row: 2;
            grid-template-columns: auto 1fr; align-items: center; gap: 32px;
            padding: 20px 38px;
        }
        .glance-eyebrow { white-space: nowrap; }
    }

    /* Rows stagger up on tab change (delay set inline via --row). */
    #products.has-anim .product-panel[data-active="false"] .glance-row,
    #products.has-anim .product-panel[data-enter="true"] .glance-row {
        opacity: 0; transform: translateY(6px);
    }
    #products.has-anim .glance-row {
        transition: opacity 220ms var(--sos-ease) calc(var(--row, 0) * 40ms),
                    transform 220ms var(--sos-ease) calc(var(--row, 0) * 40ms);
    }

    /* CTA */
    .product-cta { transition: background 160ms ease, transform 160ms ease, box-shadow 160ms ease; }
    .product-cta:hover { transform: translateY(-1px); box-shadow: var(--sos-shadow-md); }
    .product-cta .material-symbols-outlined { transition: transform 160ms ease; }
    .product-cta:hover .material-symbols-outlined { transform: translateX(3px); }

    /* ============================================================
       HOW IT WORKS — phone stage + numbered step cards
       ============================================================ */
    .phone-glow {
        position: absolute; top: 50%; left: 50%;
        transform: translate(-50%, -50%);
        width: 320px; height: 320px; border-radius: 50%;
        background: radial-gradient(circle, rgba(0,52,28,0.15) 0%, rgba(0,52,28,0) 70%);
        pointer-events: none; z-index: 0;
    }
    @media (min-width: 640px) { .phone-glow { width: 440px; height: 440px; } }

    /* ============================================================
       HOW IT WORKS — the progress rail.
       Deliberately NOT another bordered card: the rest of the page is
       cards, so three more made this section read as filler. Instead the
       three steps hang off a single hairline that fills forest-to-gold as
       you scroll through them, and each numeral lights as you reach it —
       the process drawing itself. Boxes removed entirely.
       ============================================================ */
    .how-steps {
        position: relative;
        display: flex; flex-direction: column; gap: 38px;
        padding-left: 62px;
    }
    /* The rail runs between the first and last numeral, not past them. */
    .how-rail {
        position: absolute; left: 21px; top: 22px; bottom: 22px; width: 2px;
        background: rgba(0,52,28,0.10); border-radius: 2px; overflow: hidden;
    }
    .how-rail-fill {
        display: block; width: 100%; height: 0%;
        border-radius: 2px;
        background: linear-gradient(180deg, var(--sos-primary) 0%, var(--sos-primary) 55%, var(--sos-gold) 100%);
        transition: height 260ms linear;
    }

    .how-step { position: relative; }
    .how-step-node {
        position: absolute; left: -62px; top: -3px;
        width: 44px; height: 44px; border-radius: 50%;
        display: flex; align-items: center; justify-content: center;
        background: #fff; border: 1px solid rgba(0,52,28,0.14);
        color: var(--sos-ink-subtle);
        transition: background-color 420ms cubic-bezier(0.16,1,0.3,1),
                    border-color 420ms cubic-bezier(0.16,1,0.3,1),
                    color 420ms cubic-bezier(0.16,1,0.3,1),
                    box-shadow 420ms cubic-bezier(0.16,1,0.3,1),
                    transform 420ms cubic-bezier(0.16,1,0.3,1);
    }
    .how-step-num {
        font-size: 13px; font-weight: 800; letter-spacing: 0.03em;
        font-variant-numeric: tabular-nums;
    }
    /* Lit: the numeral fills forest and sits in a soft halo. */
    .how-step.is-on .how-step-node {
        background: var(--sos-primary); border-color: var(--sos-primary); color: #fff;
        transform: scale(1.04);
        box-shadow: 0 0 0 5px rgba(0,52,28,0.05), 0 12px 24px -12px rgba(0,52,28,0.55);
    }
    /* The last step is the payoff — its halo turns gold. */
    .how-step:last-child.is-on .how-step-node {
        box-shadow: 0 0 0 5px rgba(193,155,46,0.14), 0 12px 24px -12px rgba(0,52,28,0.55);
    }

    .how-step h3 {
        font-size: 1.15rem; font-weight: 700; letter-spacing: -0.012em;
        color: var(--sos-ink); line-height: 1.25; margin-bottom: 6px;
    }
    .how-step p { font-size: 14.5px; color: var(--sos-ink-subtle); line-height: 1.65; }

    @media (max-width: 400px) {
        .how-steps { padding-left: 54px; gap: 32px; }
        .how-step-node { left: -54px; width: 40px; height: 40px; }
        .how-rail { left: 19px; }
    }
    /* No scroll choreography if it isn't wanted — show it complete. */
    @media (prefers-reduced-motion: reduce) {
        .how-rail-fill { transition: none; }
        .how-step-node { transition: none; }
    }

    /* ============================================================
       STATEWIDE — the closing "don't see your city" note.
       Was a line of text hanging off a marigold bar, which read as an
       alert, not an invitation. Now a calm panel on the faintest forest
       tint, hairline-bordered, with the ask and the answer sitting on one
       line. Brand green only — the marigold belongs to the CTA alone.
       ============================================================ */
    .statewide-note {
        display: flex; align-items: center; justify-content: space-between;
        gap: 20px 32px; flex-wrap: wrap;
        padding: 22px 28px;
        border-radius: 16px;
        border: 1px solid rgba(191,201,191,0.55);
        background:
            linear-gradient(180deg, rgba(225,245,238,0.42) 0%, rgba(225,245,238,0.14) 100%),
            #fff;
        box-shadow: 0 1px 2px rgba(0,52,28,0.03), 0 18px 40px -30px rgba(0,52,28,0.20);
    }
    .statewide-note-body { min-width: 0; }
    .statewide-note-title {
        font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
        color: var(--sos-ink); margin-bottom: 3px;
    }
    .statewide-note-copy {
        font-size: 14px; line-height: 1.6; color: var(--sos-ink-subtle);
        max-width: 62ch;
    }
    /* A quiet forest link — it earns its emphasis from an underline that
       draws in, not from an icon bolted to the end of it. */
    .statewide-note-link {
        position: relative; flex: 0 0 auto;
        font-size: 14.5px; font-weight: 600; letter-spacing: 0.01em;
        color: var(--sos-primary); white-space: nowrap; padding-bottom: 3px;
    }
    .statewide-note-link::after {
        content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
        background: var(--sos-primary); transform: scaleX(0); transform-origin: left;
        transition: transform 300ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    .statewide-note-link:hover::after,
    .statewide-note-link:focus-visible::after { transform: scaleX(1); }
    .statewide-note-link:focus-visible { outline: 2px solid var(--sos-primary); outline-offset: 4px; border-radius: 2px; }

    @media (prefers-reduced-motion: reduce) {
        .statewide-note-link::after { transition: none; }
    }

    /* ============================================================
       PREMIUM ACCORDION CARDS — shared by Statewide regions & FAQ.
       Soft brand-tinted hairline, layered emerald shadow (a tight
       contact shadow + a wide soft one), and a circular chevron chip
       that fills forest-green when the panel opens.
       ============================================================ */
    .reg-item, .faq-item {
        background: #ffffff;
        border: 1px solid rgba(0,52,28,0.07);
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 1px 2px rgba(0,52,28,0.04), 0 14px 30px -22px rgba(0,52,28,0.26);
        transition: box-shadow 260ms var(--sos-ease), border-color 260ms var(--sos-ease), transform 260ms var(--sos-ease);
    }
    .reg-item:hover, .faq-item:hover {
        border-color: rgba(0,52,28,0.12);
        box-shadow: 0 2px 4px rgba(0,52,28,0.05), 0 22px 44px -24px rgba(0,52,28,0.34);
    }
    .reg-item[open], .faq-item[open] {
        border-color: rgba(0,52,28,0.14);
        box-shadow: 0 2px 6px rgba(0,52,28,0.06), 0 26px 52px -26px rgba(0,52,28,0.36);
    }
    .reg-item > summary, .faq-item > summary {
        list-style: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
    }
    .reg-item > summary::-webkit-details-marker,
    .faq-item > summary::-webkit-details-marker { display: none; }
    .reg-item > summary:focus-visible,
    .faq-item > summary:focus-visible { outline: 2px solid var(--sos-primary); outline-offset: -2px; border-radius: 16px; }
    .faq-item > summary:hover h3 { color: var(--sos-primary); }

    /* Circular chevron chip — soft green ghost, fills solid on open. */
    .reg-chevron, .faq-chevron {
        display: inline-flex; align-items: center; justify-content: center;
        width: 30px; height: 30px; border-radius: 50%; flex-shrink: 0;
        font-size: 20px;
        background: rgba(0,52,28,0.06);
        color: var(--sos-primary);
        transition: transform 300ms var(--sos-ease), background-color 220ms var(--sos-ease), color 220ms var(--sos-ease);
    }
    .reg-item[open] .reg-chevron, .faq-item[open] .faq-chevron {
        transform: rotate(180deg);
        background: var(--sos-primary);
        color: #ffffff;
    }
    @media (prefers-reduced-motion: reduce) {
        .reg-chevron, .faq-chevron { transition: background-color 220ms, color 220ms; }
    }

    /* City lists inside the region dropdowns — small gold dot markers so the
       names read as a considered directory rather than a bare bullet list. */
    .city-list { list-style: none; }
    .city-list li { position: relative; padding-left: 15px; }
    .city-list li::before {
        content: ""; position: absolute; left: 2px; top: 0.62em;
        width: 4px; height: 4px; border-radius: 50%;
        background: var(--sos-gold); opacity: 0.8;
    }
    .reg-sublabel { color: rgba(0,52,28,0.55); }

    /* Staggered reveal of the left column, armed only once JS adds .has-anim. */
    #products.has-anim .reveal-item {
        opacity: 0;
        transform: translateY(8px);
        transition: opacity 130ms var(--sos-ease) var(--d, 0ms),
                    transform 130ms var(--sos-ease) var(--d, 0ms);
    }
    #products.has-anim .product-panel.is-shown .reveal-item { opacity: 1; transform: none; }

    #products.has-anim #products-shell {
        opacity: 0;
        transform: translateY(14px);
        transition: opacity 260ms var(--sos-ease), transform 260ms var(--sos-ease);
    }
    #products.has-anim #products-shell.in-view { opacity: 1; transform: none; }

    @media (prefers-reduced-motion: reduce) {
        /* Cross-fade only: every transform is dropped, nothing slides. */
        #products-indicator { transition: opacity 160ms linear; }
        .product-panel[data-active="false"] { transform: none; transition: opacity 120ms linear; }
        .product-panel[data-active="true"]  { transform: none; transition: opacity 120ms linear; }
        .product-panel[data-enter="true"]   { transform: none; }
        .product-cta:hover { transform: none; }
        .product-media img,
        .product-panel[data-enter="true"] .product-media img { transform: none; transition: none; }
        .product-cta:hover .material-symbols-outlined { transform: none; }
        #products.has-anim .glance-row { opacity: 1 !important; transform: none !important; transition: none; }
        #products.has-anim .reveal-item,
        #products.has-anim #products-shell { opacity: 1; transform: none; transition: none; }
    }

    /* ============================================================
       CALIFORNIA SERVICE MAP
       49 cities plotted from a lat/lon transform fitted to this
       artwork. Dense coastal clusters are labelled via regional
       callouts joined by leader lines rather than 49 loose labels.
       ============================================================ */
    .ca-map, .ca-map-sm { width: 100%; height: auto; display: block; }
    .cm-head { font: 700 14.5px var(--sos-font); fill: var(--sos-primary); letter-spacing: 0.13em; }
    .cm-city { font: 400 18px var(--sos-font); fill: var(--sos-ink-subtle); }
    .cm-dot        { fill: var(--sos-gold); stroke: #fff; stroke-width: 1.2; }
    .cm-anchor-dot { fill: var(--sos-primary); stroke: #fff; stroke-width: 1.6; }
    .cm-leader { fill: none; stroke: var(--sos-primary); stroke-opacity: 0.30; stroke-width: 1.5; }
    .cm-tail   { fill: var(--sos-primary); fill-opacity: 0.45; }
    /* Interactive city pins — grow & warm on hover; <title> shows the name */
    .cm-dot, .cm-anchor-dot { cursor: pointer; transition: fill 140ms var(--sos-ease), r 140ms var(--sos-ease); }
    .cm-dot:hover { fill: var(--sos-cta); r: 7; }
    .cm-anchor-dot:hover { fill: var(--sos-cta); r: 9; }

    input[type="text"], input[type="email"], input[type="tel"], select, textarea {
        font-size: max(16px, 1em) !important;
        touch-action: manipulation;
    }



/* Car-and-owner cutout: same brand plate as the "who it fits" portraits */
.car-plate{
  display: flex; align-items: center; justify-content: center;
  height: 380px;
  /* Spotlight behind the subject: the car is near-black, so it needs a lighter
     pool of green to sit against or it merges into the plate. */
  background:
    radial-gradient(ellipse 70% 58% at 50% 58%, rgba(120,215,170,0.20) 0%, rgba(120,215,170,0.07) 45%, transparent 72%),
    linear-gradient(168deg, #004d2c 0%, #00341c 62%, #002814 100%);
}
.car-figure{
  position: relative; z-index: 10;
  width: 90%; height: auto; object-fit: contain;
  filter: drop-shadow(0 24px 32px rgba(0,0,0,0.38));
}
@media (max-width: 767px){
  .car-plate{ height: 260px; }
}

/* Three-step timeline (folded into the "why us" section) */
.step-list{ position: relative; }
.step-row{
  position: relative;
  display: grid; grid-template-columns: 46px 1fr; gap: 20px;
  padding-bottom: 30px;
}
.step-row:last-child{ padding-bottom: 0; }
/* the connecting rail runs between the numbers, not past the last one */
.step-row:not(:last-child)::before{
  content: ""; position: absolute; left: 23px; top: 52px; bottom: 6px;
  width: 2px; background: linear-gradient(180deg, rgba(0,52,28,0.18), rgba(0,52,28,0.04));
}
.step-num{
  display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 999px;
  background: #e1f5ee; color: #00341c;
  font-weight: 800; font-size: 15px; letter-spacing: 0.02em;
  border: 1px solid rgba(0,52,28,0.10);
}

/* California coverage map */
.ca-panel{ background: linear-gradient(158deg, #004d2c 0%, #00341c 58%, #002814 100%); }
.ca-state{
  fill: rgba(255,255,255,0.09);
  stroke: rgba(255,255,255,0.34);
  stroke-width: 1.5;
  stroke-linejoin: round;
}
.ca-dot{ fill: #f5b820; }
.ca-halo{
  fill: #f5b820; opacity: 0.22;
  transform-box: fill-box; transform-origin: center;
  animation: ca-pulse 2.8s ease-out infinite;
}
.ca-label{
  fill: #ffffff; font-size: 17px; font-weight: 600;
  font-family: Inter, sans-serif;
  paint-order: stroke;
  stroke: rgba(0,40,20,0.55); stroke-width: 3px; stroke-linejoin: round;
}
@keyframes ca-pulse{
  0%   { transform: scale(0.55); opacity: 0.42; }
  70%  { transform: scale(1.5);  opacity: 0; }
  100% { transform: scale(1.5);  opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
  .ca-halo{ animation: none; opacity: 0.25; }
}

/* Partnership lockup: the two marks sit on matching plates */
.partner-plate{
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: clamp(140px, 38vw, 236px); height: 96px;
  padding: 0 16px;
  background: #fff;
  border: 1px solid rgba(191,201,191,0.4);
  border-radius: 12px;
  box-shadow: 0 2px 10px -4px rgba(0,52,28,0.10);
}

/* "Who it fits" portrait plates */
.who-plate{
  height: 340px;
  background: linear-gradient(168deg, #004d2c 0%, #00341c 62%, #002814 100%);
}
.who-rings{
  position: absolute; right: -70px; bottom: -110px; width: 320px; height: 320px;
  border-radius: 999px; z-index: 0;
  background:
    radial-gradient(circle, transparent 58%, rgba(255,255,255,0.05) 58.5%, rgba(255,255,255,0.05) 63%, transparent 63.5%),
    radial-gradient(circle, transparent 76%, rgba(255,255,255,0.04) 76.5%, rgba(255,255,255,0.04) 81%, transparent 81.5%);
}
.who-figure{
  position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  height: 92%; width: auto; max-width: none; z-index: 10;
  object-fit: contain; object-position: bottom;
  filter: drop-shadow(0 22px 30px rgba(0,0,0,0.32));
  transition: transform 260ms cubic-bezier(.22,.61,.36,1);
}
.who-card:hover .who-figure{ transform: translateX(-50%) translateY(-6px); }
@media (max-width: 767px){
  .who-plate{ height: 300px; }
}

/* ---- Hero eligibility form + estimates card ---- */
    .rvm-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
    .rvm-span2{grid-column:1/-1;}
    .rvm-addr{grid-column:1/-1;display:grid;grid-template-columns:1.7fr 1fr;gap:10px;}
    /* Clean "label above the input" fields — matches the HEI calculator + HELOC card */
    .rvm-field label{display:block;font-size:11px;font-weight:700;letter-spacing:0.05em;text-transform:uppercase;color:#00341c;margin:0 0 5px;}
    .rvm-field input,.rvm-field select{width:100%;height:40px;border:1px solid #cdd6cf;border-radius:10px;padding:0 12px;font-size:15px;color:#1a1a1a;background:#fff;outline:none;-webkit-appearance:none;appearance:none;transition:border-color 130ms,box-shadow 130ms;}
    .rvm-field input:focus,.rvm-field select:focus{border-color:#00341c;box-shadow:0 0 0 3px rgba(0,52,28,0.12);}
    .rvm-field.rvm-err input,.rvm-field.rvm-err select{border-color:#ba1a1a;box-shadow:0 0 0 3px rgba(186,26,26,0.10);}
    .rvm-field select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' stroke='%2300341c' stroke-width='2' fill='none' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 12px center;padding-right:30px;}
    .rvm-field input::placeholder{color:#a3ada5;}
    .rvm-field .wrap{position:relative;}
    .rvm-field .wrap span{position:absolute;left:12px;top:50%;transform:translateY(-50%);color:#8a8f8b;font-size:15px;}
    .rvm-field .wrap input{padding-left:24px;}
    .rvm-seg{display:flex;gap:8px;}
    .rvm-seg-btn{flex:1;height:40px;border:1px solid #cdd6cf;border-radius:10px;background:#fff;font-size:14px;font-weight:700;color:#404942;cursor:pointer;line-height:1;transition:background 130ms,border-color 130ms,color 130ms;}
    .rvm-seg-btn:hover{border-color:#00341c;color:#00341c;}
    .rvm-seg-btn.is-on{background:#00341c;border-color:#00341c;color:#fff;}
    .rvm-btn{width:100%;margin-top:14px;background:#f5b820;color:#3d2b0f;font-weight:800;font-size:15px;letter-spacing:0.03em;text-transform:uppercase;border:none;border-radius:10px;padding:14px;cursor:pointer;transition:background 130ms,transform 130ms;box-shadow:0 12px 26px -12px rgba(0,0,0,0.35);}
    .rvm-btn:hover{background:#f8c84d;} .rvm-btn:active{transform:scale(0.98);}
    .rvm-btn[disabled]{opacity:0.7;cursor:wait;}
    .rvm-consent{margin-top:10px;font-size:10px;line-height:1.55;color:#8a8f8b;text-align:center;}
    .rvm-consent a{color:#00341c;text-decoration:underline;}
    .rvq{background:#f0faf4;border:1px solid #cfe8d8;border-radius:16px;padding:16px;}
    .rvq h3{text-align:left;font-size:12px;font-weight:800;letter-spacing:0.08em;color:#00341c;margin:0 0 10px;text-transform:uppercase;}
    .rvq-primary{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;background:#00341c;color:#fff;font-weight:800;font-size:14.5px;letter-spacing:0.01em;border:none;border-radius:10px;padding:14px;cursor:pointer;transition:background 130ms,transform 130ms;box-shadow:0 10px 22px -12px rgba(0,52,28,0.55);}
    .rvq-primary:active{transform:scale(0.99);}
    .rvq-primary:hover{background:#004d2c;}
    .rvq-primary[disabled]{background:#0f5132;cursor:default;}
    .rvq-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-top:8px;}
    .rvq-row.rvq-four{grid-template-columns:repeat(4,1fr);margin-top:0;}
    @media (max-width:480px){.rvq-row.rvq-four{grid-template-columns:1fr 1fr;}}
    @media (max-width:400px){.rvq-row{grid-template-columns:1fr;}.rvq-row.rvq-four{grid-template-columns:1fr 1fr;}}
    .rvq-sec{display:flex;align-items:center;justify-content:center;gap:6px;border:1.5px solid #00341c;color:#00341c;background:#fff;font-weight:700;font-size:13.5px;border-radius:10px;padding:10px 6px;text-decoration:none;transition:background 130ms;}
    .rvq-sec:hover{background:#f2f9f5;}
    .rvq-book{background:#f5b820;border-color:#f5b820;color:#3d2b0f;}
    .rvq-book:hover{background:#f8c84d;}
    .rvs-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;}
    .rvs-head .rve-h{margin:0;}
    .rvs-badge{flex-shrink:0;background:#e1f5ee;color:#00341c;font-size:10px;font-weight:800;letter-spacing:0.07em;text-transform:uppercase;border-radius:9999px;padding:5px 11px;}
    .rvs-sent{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 4px 2px;}
    .rvs-sent .ic{display:inline-flex;width:30px;height:30px;border-radius:9999px;background:#e1f5ee;align-items:center;justify-content:center;color:#00341c;flex-shrink:0;}
    .rvs-sent .ic .material-symbols-outlined{font-size:17px;}
    .rvs-sent p{font-size:13px;color:#5a655d;margin:0;line-height:1.5;}
    .rvs-sent p b{color:#1a1a1a;}
    .rvm-sent{text-align:center;padding:18px 6px 4px;}
    .rvm-sent .ic{display:inline-flex;width:52px;height:52px;border-radius:9999px;background:#e1f5ee;align-items:center;justify-content:center;margin-bottom:8px;color:#00341c;}
    .rvm-sent h4{font-size:18px;font-weight:800;color:#1a1a1a;margin:0 0 4px;}
    .rvm-sent p{font-size:13.5px;color:#5a655d;margin:0;line-height:1.6;}
    .rvm-sent p b{color:#00341c;}
    .rvm-below{margin-top:2px;}
    .rvm-back{display:block;text-align:center;margin:12px auto 0;font-size:12.5px;font-weight:700;color:#00341c;text-decoration:underline;cursor:pointer;background:none;border:none;}
    .rve-h{font-size:16.5px;font-weight:800;color:#1a1a1a;margin:0 0 10px;}
    .rve-panel{background:#f5f7f5;border-radius:14px;padding:4px 16px;}
    .rve-row{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;padding:13px 0;border-bottom:1px solid #e4e9e4;}
    .rve-row:last-child{border-bottom:none;}
    .rve-row.dim{opacity:0.6;}
    .rve-name{font-size:15px;font-weight:800;color:#1a1a1a;line-height:1.3;}
    .rve-desc{font-size:12px;color:#6b756d;margin-top:1px;}
    .rve-ten{font-size:10.5px;font-weight:700;letter-spacing:0.04em;color:#404942;text-transform:uppercase;margin-top:4px;}
    .rve-ten b{color:#00341c;}
    .rve-amt{font-size:20px;font-weight:900;color:#00341c;white-space:nowrap;letter-spacing:-0.01em;line-height:1.1;text-align:right;}
    .rve-amt-l{display:block;font-size:9px;font-weight:700;letter-spacing:0.08em;color:#8a8f8b;text-transform:uppercase;margin-top:2px;text-align:right;}
    .rve-note{font-size:10.5px;color:#8a8f8b;text-align:left;margin-top:10px;line-height:1.55;}
    /* Soft entrance when the card swaps between form, results, and declined states */
    #rvmCard > div{animation:rvmIn 220ms cubic-bezier(0.4,0,0.2,1);}
    @keyframes rvmIn{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
    @media (prefers-reduced-motion:reduce){#rvmCard > div{animation:none;}}
    /* ---- Click-to-play video facade ---- */
    .rvv-play{transition:transform 130ms cubic-bezier(0.4,0,0.2,1);}
    .rvv:hover .rvv-play{transform:scale(1.06);}

.trust-band { background:#fff; border-bottom:1px solid rgba(0,52,28,0.07); }
    .trust-grid { display:grid; grid-template-columns:repeat(3,1fr); }
    .trust-cell {
        position:relative; min-width:0; display:flex; flex-direction:column; align-items:center;
        text-align:center; padding:34px 8px;
    }
    @media (min-width:640px){ .trust-cell { padding:44px 24px; } }
    @media (min-width:1024px){ .trust-cell { padding:52px 32px; } }
    /* Hairlines that fade out at both ends — cleaner than a hard rule */
    .trust-cell + .trust-cell::before {
        content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
        width:1px; height:58%;
        background:linear-gradient(180deg, rgba(0,52,28,0) 0%, rgba(0,52,28,0.14) 50%, rgba(0,52,28,0) 100%);
    }
    .trust-num {
        font-weight:800; line-height:1; color:#1a1a1a; letter-spacing:-0.018em;
        font-variant-numeric:tabular-nums;
        font-size:clamp(1.55rem,3.1vw,2.35rem);
    }
    .trust-label { margin-top:13px; font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.15em; color:#1a1a1a; }
    @media (min-width:640px){ .trust-label { margin-top:15px; font-size:11px; } }
    .trust-label .g-logo { height:15px; width:auto; margin-right:1px; vertical-align:-2px; }

.relres{background:#fff;border-top:1px solid rgba(0,52,28,0.08);}
.relres-grid{display:grid;gap:22px;}
@media(max-width:1023px){
.relres-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:16px;padding:4px 4px 16px;margin:0 -4px;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
.relres-grid::-webkit-scrollbar{display:none;}
.relres-grid .relres-card{flex:0 0 82%;max-width:340px;scroll-snap-align:center;}
}
@media(min-width:1024px){.relres-grid{grid-template-columns:repeat(3,1fr);}}
.relres-card{display:flex;flex-direction:column;background:#fff;border:1px solid rgba(191,201,191,0.45);border-radius:16px;overflow:hidden;box-shadow:0 2px 8px -2px rgba(0,52,28,0.08);transition:box-shadow 160ms ease,transform 160ms ease;}
.relres-card:hover{box-shadow:0 22px 44px -18px rgba(0,52,28,0.28);transform:translateY(-3px);}
.relres-img{aspect-ratio:16/10;overflow:hidden;background:#fff;display:block;border-bottom:1px solid rgba(191,201,191,0.35);}
.relres-img img{width:100%;height:100%;object-fit:contain;display:block;padding:6px;box-sizing:border-box;}
.relres-body{display:flex;flex-direction:column;flex:1;padding:20px 22px 22px;}
.relres-eyebrow{font-size:10.5px;font-weight:800;letter-spacing:0.14em;text-transform:uppercase;color:#00341c;margin-bottom:8px;}
.relres-title{font-size:18px;line-height:1.35;font-weight:800;color:#1a1a1a;letter-spacing:-0.01em;margin:0 0 8px;}
.relres-title a{color:inherit;text-decoration:none;}
.relres-title a:hover{color:#00341c;}
.relres-desc{font-size:13.5px;line-height:1.6;color:#404942;margin:0 0 18px;}
.relres-author{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:14px;border-top:1px solid rgba(191,201,191,0.35);}
.relres-author img{width:34px;height:34px;border-radius:9999px;object-fit:cover;background:#e1f5ee;padding:3px;}
.relres-author span{font-size:13px;font-weight:700;color:#1a1a1a;}