/* ==========================================================================
   Park One Auto : shared design system (Carvana-culture revision)
   --------------------------------------------------------------------------
   Single source of truth for every page on parkoneauto.com.
   Loaded by includes/header.php, so a token change here lands everywhere.

   2026-07-17 owner decision: Park One competes with Carvana head on, so the
   site adopts that consumer-app culture (see CARVANA_ANALYSIS.md in the
   build tree): deep navy text on a light canvas, ONE blue interactive
   family, pill geometry, 900-weight Montserrat display type, and
   shopping-first pages (/shop). Gold (#f59e0b) survives as the house
   accent, playing the rare-accent role. The ink-* names now hold a NAVY
   ramp (they are still the text/dark-band ramp; only the hue moved).

   Layout language is adapted from Capital One Auto Navigator: white canvas,
   generous vertical rhythm, a search card that anchors the hero, and
   card-based content grids. All hand-authored, namespaced CSS. No framework
   imports (this box serves plain PHP; see DECISIONS.md rationale on the
   marketing repo for why we do not pull in Tailwind/Bootstrap).
   ========================================================================== */

/* ── Tokens ─────────────────────────────────────────────────────────────── */
:root {
    /* Ink ramp = deep NAVY (Carvana-culture text and dark-band family).
       900 (#0a2237) is the heading/text anchor; 950 the deepest gradient
       stop; the light steps are the cool page tints. */
    --poa-ink-50:  #f6f7f9;
    --poa-ink-100: #eaf1f7;
    --poa-ink-200: #d7e3ee;
    --poa-ink-300: #b7ccde;
    --poa-ink-400: #7ca3c4;
    --poa-ink-500: #33608c;
    --poa-ink-600: #0d375e;
    --poa-ink-700: #0a2c4a;
    --poa-ink-800: #0a2237;
    --poa-ink-900: #0a1b2c;
    --poa-ink-950: #061525;

    /* Blue: THE interactive family (buttons, links, focus, sliders). */
    --poa-blue-500: #1d82e2;
    --poa-blue-600: #106bc7;
    --poa-blue-700: #0b559f;

    /* Sky: light-blue tints for chips, eyebrows, card icons, pale cards. */
    --poa-sky-50:  #eaf4fe;
    --poa-sky-100: #d6eafb;
    --poa-sky-200: #a5d8ff;
    --poa-sky-300: #7cbaef;

    /* Gold: the house accent, and ONLY an accent now (the hero highlight
       word, deal badges, the fair credit tier). Interactive things are
       blue. 600/700 are the text-safe darker steps. */
    --poa-gold-50:  #fffbeb;
    --poa-gold-100: #fef3c7;
    --poa-gold-200: #fde68a;
    --poa-gold-300: #fcd34d;
    --poa-gold-400: #fbbf24;
    --poa-gold-500: #f59e0b;
    --poa-gold-600: #d97706;
    --poa-gold-700: #b45309;
    --poa-gold-800: #92400e;

    /* Neutrals */
    --poa-white:    #ffffff;
    --poa-slate-50:  #f8fafc;
    --poa-slate-100: #f1f5f9;
    --poa-slate-200: #e2e8f0;
    --poa-slate-300: #cbd5e1;
    --poa-slate-400: #94a3b8;
    --poa-slate-500: #64748b;
    --poa-slate-600: #475569;
    --poa-slate-700: #334155;
    --poa-slate-800: #1e293b;
    --poa-slate-900: #0f172a;

    /* Accents. Amber signals ratings, green signals approval/positive states. */
    --poa-amber-500: #f59e0b;
    --poa-green-50:  #ecfdf5;
    --poa-green-500: #10b981;
    --poa-green-600: #059669;
    --poa-red-50:    #fef2f2;
    --poa-red-500:   #ef4444;
    --poa-red-700:   #991b1b;

    /* Type */
    --poa-font-heading: 'Montserrat', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --poa-font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Type scale. Fluid via clamp so tablet never falls between two designs. */
    --poa-text-display: clamp(2.25rem, 1.4rem + 3.4vw, 3.75rem);
    --poa-text-h1: clamp(2rem, 1.3rem + 2.6vw, 3rem);
    --poa-text-h2: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
    --poa-text-h3: clamp(1.2rem, 1.05rem + 0.6vw, 1.5rem);
    --poa-text-lead: clamp(1.05rem, 0.98rem + 0.35vw, 1.2rem);
    --poa-text-body: 1rem;
    --poa-text-sm: 0.9375rem;
    --poa-text-xs: 0.8125rem;

    /* Radii */
    --poa-radius-sm: 8px;
    --poa-radius-md: 12px;
    --poa-radius-lg: 16px;
    --poa-radius-xl: 24px;
    --poa-radius-full: 9999px;

    /* Shadows: low-spread, high-blur. Keeps cards lifted but not heavy. */
    --poa-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
    --poa-shadow-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
    --poa-shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);
    --poa-shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.08), 0 8px 10px -6px rgba(0,0,0,0.04);
    --poa-shadow-2xl: 0 25px 50px -12px rgba(0,0,0,0.15);
    --poa-shadow-cta: 0 10px 30px -8px rgba(16,107,199,0.40);

    /* Spacing rhythm. Section padding is the main vertical beat. */
    --poa-section-y: clamp(3.5rem, 2rem + 6vw, 6.5rem);
    --poa-container: 1200px;
    --poa-gutter: clamp(1rem, 0.5rem + 2vw, 2rem);

    --poa-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Reset ──────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
    -webkit-text-size-adjust: 100%;
    scroll-behavior: smooth;
    /* Offset anchor targets so the sticky header never covers a heading. */
    scroll-padding-top: 90px;
}

body {
    margin: 0;
    font-family: var(--poa-font-body);
    font-size: var(--poa-text-body);
    line-height: 1.65;
    color: var(--poa-slate-700);
    background: var(--poa-white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    /* Guards against any wide child (tables, carousels) scrolling the page. */
    overflow-x: hidden;
}

h1, h2, h3, h4 {
    font-family: var(--poa-font-heading);
    color: var(--poa-slate-900);
    line-height: 1.15;
    letter-spacing: -0.02em;
    margin: 0 0 0.5em;
    font-weight: 700;
}

p { margin: 0 0 1rem; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; height: auto; display: block; }

a { color: var(--poa-blue-600); text-decoration: none; }
a:hover { color: var(--poa-blue-700); }

/* Visible, on-brand focus ring for keyboard users on every interactive thing.
   :focus-visible (not :focus) so mouse clicks do not show the ring. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
    outline: 3px solid var(--poa-blue-500);
    outline-offset: 2px;
    border-radius: var(--poa-radius-sm);
}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ── Layout ─────────────────────────────────────────────────────────────── */
.poa-container {
    width: 100%;
    max-width: var(--poa-container);
    margin-inline: auto;
    padding-inline: var(--poa-gutter);
}

.poa-section { padding-block: var(--poa-section-y); }
.poa-section--gray { background: var(--poa-slate-50); }
.poa-section--tight { padding-block: clamp(2.5rem, 1.5rem + 4vw, 4rem); }

.poa-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 200;
    background: var(--poa-ink-700);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--poa-radius-md) 0;
    font-weight: 600;
}
.poa-skip-link:focus { left: 0; color: #fff; }

/* ── Section headers ────────────────────────────────────────────────────── */
.poa-section-header {
    max-width: 720px;
    margin: 0 auto clamp(2rem, 1rem + 3vw, 3.25rem);
    text-align: center;
}
.poa-section-header--left { margin-inline: 0; text-align: left; }

.poa-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--poa-sky-50);
    color: var(--poa-ink-600);
    border: 1px solid var(--poa-sky-100);
    padding: 7px 16px;
    border-radius: var(--poa-radius-full);
    font-size: var(--poa-text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.poa-section-title { font-size: var(--poa-text-h2); margin-bottom: 0.75rem; }

.poa-section-desc {
    font-size: var(--poa-text-lead);
    color: var(--poa-slate-500);
    margin: 0;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.poa-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-family: var(--poa-font-body);
    font-size: var(--poa-text-body);
    font-weight: 600;
    line-height: 1;
    padding: 16px 30px;
    border: 2px solid transparent;
    border-radius: var(--poa-radius-full);
    cursor: pointer;
    transition: transform 0.18s var(--poa-ease), box-shadow 0.18s var(--poa-ease),
                background-color 0.18s var(--poa-ease), color 0.18s var(--poa-ease),
                border-color 0.18s var(--poa-ease);
    text-align: center;
    /* Meets the 44px minimum touch target on mobile. */
    min-height: 52px;
}

.poa-btn--primary {
    background: var(--poa-blue-600);
    color: #fff;
    box-shadow: var(--poa-shadow-cta);
}
.poa-btn--primary:hover {
    background: var(--poa-blue-700);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 14px 34px -8px rgba(16,107,199,0.55);
}
.poa-btn--primary:active { transform: translateY(0); }

.poa-btn--secondary {
    background: var(--poa-white);
    color: var(--poa-ink-800);
    border-color: var(--poa-slate-200);
    box-shadow: var(--poa-shadow-sm);
}
.poa-btn--secondary:hover {
    border-color: var(--poa-ink-500);
    color: var(--poa-ink-700);
    transform: translateY(-2px);
    box-shadow: var(--poa-shadow-md);
}

.poa-btn--ghost-light {
    background: rgba(255,255,255,0.12);
    color: #fff;
    border-color: rgba(255,255,255,0.5);
}
.poa-btn--ghost-light:hover {
    background: #fff;
    color: var(--poa-ink-700);
    transform: translateY(-2px);
}

.poa-btn--white { background: #fff; color: var(--poa-ink-700); box-shadow: var(--poa-shadow-lg); }
.poa-btn--white:hover { color: var(--poa-ink-800); transform: translateY(-2px); box-shadow: var(--poa-shadow-xl); }

.poa-btn--block { width: 100%; }
.poa-btn--lg { padding: 18px 36px; font-size: 1.0625rem; min-height: 58px; }

.poa-btn[disabled], .poa-btn.is-loading { opacity: 0.7; pointer-events: none; }

/* Inline spinner, shown only while a button is in its loading state. */
.poa-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: poa-spin 0.7s linear infinite;
    display: none;
    flex: none;
}
.poa-btn.is-loading .poa-spinner { display: block; }
.poa-btn.is-loading .poa-btn-icon { display: none; }
@keyframes poa-spin { to { transform: rotate(360deg); } }

/* ── Header ─────────────────────────────────────────────────────────────── */
.poa-header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(255,255,255,0.92);
    backdrop-filter: saturate(180%) blur(14px);
    -webkit-backdrop-filter: saturate(180%) blur(14px);
    border-bottom: 1px solid var(--poa-slate-200);
    transition: box-shadow 0.25s var(--poa-ease);
}
.poa-header.is-stuck { box-shadow: var(--poa-shadow-md); }

.poa-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 76px;
}

.poa-logo { flex: none; display: flex; align-items: center; }
.poa-logo img { height: 42px; width: auto; }

.poa-nav { display: flex; align-items: center; gap: 4px; margin-left: auto; }

.poa-nav a {
    position: relative;
    padding: 10px 14px;
    border-radius: var(--poa-radius-sm);
    font-size: var(--poa-text-sm);
    font-weight: 600;
    color: var(--poa-slate-700);
    transition: color 0.18s var(--poa-ease), background-color 0.18s var(--poa-ease);
}
.poa-nav a:hover { color: var(--poa-ink-700); background: var(--poa-ink-50); }

/* Current page marker. Set aria-current="page" in the partial. */
.poa-nav a[aria-current="page"] { color: var(--poa-ink-700); }
.poa-nav a[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 2px;
    height: 2px;
    border-radius: 2px;
    background: var(--poa-blue-600);
}

.poa-header-actions { display: flex; align-items: center; gap: 12px; flex: none; }

.poa-phone-pill {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--poa-sky-50);
    border: 1px solid var(--poa-sky-100);
    color: var(--poa-ink-600);
    font-weight: 700;
    font-size: var(--poa-text-sm);
    padding: 11px 18px;
    border-radius: var(--poa-radius-full);
    white-space: nowrap;
    transition: background-color 0.18s var(--poa-ease), transform 0.18s var(--poa-ease);
}
.poa-phone-pill:hover { background: var(--poa-sky-100); color: var(--poa-ink-800); transform: translateY(-1px); }

.poa-header-cta { padding: 12px 22px; min-height: 46px; font-size: var(--poa-text-sm); }

/* Hamburger. Hidden on desktop, shown at the nav breakpoint. */
.poa-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    background: var(--poa-white);
    border: 1px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-md);
    cursor: pointer;
}
.poa-burger span {
    display: block;
    width: 20px;
    height: 2px;
    margin-inline: auto;
    background: var(--poa-slate-800);
    border-radius: 2px;
    transition: transform 0.25s var(--poa-ease), opacity 0.2s var(--poa-ease);
}
.poa-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.poa-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.poa-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer. Uses grid-template-rows so it animates open without a
   hardcoded max-height guess that breaks when nav items change. */
.poa-mobile-nav {
    display: none;
    border-top: 1px solid var(--poa-slate-200);
    background: var(--poa-white);
}
.poa-mobile-nav-inner {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s var(--poa-ease);
}
.poa-mobile-nav.is-open .poa-mobile-nav-inner { grid-template-rows: 1fr; }
.poa-mobile-nav-list { overflow: hidden; }
.poa-mobile-nav-list > div { padding: 12px 0 22px; }

.poa-mobile-nav a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 4px;
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--poa-slate-800);
    border-bottom: 1px solid var(--poa-slate-100);
}
.poa-mobile-nav a:last-of-type { border-bottom: 0; }
.poa-mobile-nav a i { color: var(--poa-blue-600); width: 20px; text-align: center; }
.poa-mobile-nav .poa-btn { margin-top: 16px; }

/* ── Hero ───────────────────────────────────────────────────────────────── */
.poa-hero {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(1100px 520px at 78% -10%, var(--poa-ink-100) 0%, rgba(234,241,247,0) 62%),
        linear-gradient(180deg, var(--poa-ink-50) 0%, var(--poa-white) 72%);
    padding-block: clamp(2.75rem, 1.5rem + 5vw, 5rem) clamp(3rem, 2rem + 5vw, 5.5rem);
}

.poa-hero-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}

.poa-hero-badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--poa-white);
    border: 1px solid var(--poa-ink-100);
    color: var(--poa-ink-700);
    padding: 9px 18px;
    border-radius: var(--poa-radius-full);
    font-size: var(--poa-text-xs);
    font-weight: 700;
    box-shadow: var(--poa-shadow-sm);
    margin-bottom: 1.5rem;
}
.poa-hero-badge i { color: var(--poa-green-600); }

.poa-hero-title {
    font-size: var(--poa-text-display);
    font-weight: 900;
    margin-bottom: 1.25rem;
}
.poa-hero-title span { color: var(--poa-gold-600); }

.poa-hero-sub {
    font-size: var(--poa-text-lead);
    color: var(--poa-slate-600);
    max-width: 34rem;
    margin-bottom: 1.75rem;
}

.poa-hero-features { display: flex; flex-wrap: wrap; gap: 12px 22px; }
.poa-hero-feature {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: var(--poa-text-sm);
    font-weight: 600;
    color: var(--poa-slate-700);
}
.poa-hero-feature i { color: var(--poa-green-500); font-size: 1.05rem; }

/* ── Finder card (the hero's search widget) ─────────────────────────────── */
.poa-finder {
    position: relative;
    background: var(--poa-white);
    border: 1px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-xl);
    padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.5rem);
    box-shadow: var(--poa-shadow-2xl);
}

.poa-finder-icon {
    width: 56px;
    height: 56px;
    display: grid;
    place-items: center;
    background: linear-gradient(135deg, var(--poa-blue-500), var(--poa-blue-700));
    color: #fff;
    font-size: 1.35rem;
    border-radius: var(--poa-radius-lg);
    box-shadow: var(--poa-shadow-cta);
    margin-bottom: 1.25rem;
}

.poa-finder h2 { font-size: var(--poa-text-h3); margin-bottom: 0.5rem; }
.poa-finder-lead { color: var(--poa-slate-500); font-size: var(--poa-text-sm); margin-bottom: 1.5rem; }

.poa-field-label {
    display: block;
    font-size: var(--poa-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--poa-slate-500);
    margin-bottom: 8px;
}

.poa-zip-field {
    width: 100%;
    font-family: var(--poa-font-body);
    /* 16px minimum stops iOS Safari zooming the viewport on focus. */
    font-size: 1.125rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    padding: 17px 18px;
    color: var(--poa-slate-900);
    background: var(--poa-slate-50);
    border: 2px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-md);
    transition: border-color 0.18s var(--poa-ease), background-color 0.18s var(--poa-ease),
                box-shadow 0.18s var(--poa-ease);
    -moz-appearance: textfield;
    appearance: textfield;
}
.poa-zip-field::-webkit-outer-spin-button,
.poa-zip-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.poa-zip-field::placeholder { color: var(--poa-slate-400); font-weight: 500; letter-spacing: 0.02em; }
.poa-zip-field:focus {
    outline: none;
    background: var(--poa-white);
    border-color: var(--poa-blue-500);
    box-shadow: 0 0 0 4px rgba(16,107,199,0.15);
}

.poa-finder form .poa-btn { margin-top: 14px; }

.poa-error {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--poa-red-50);
    border: 1px solid #fecaca;
    color: var(--poa-red-700);
    font-size: var(--poa-text-sm);
    font-weight: 600;
    padding: 12px 15px;
    border-radius: var(--poa-radius-md);
    margin-bottom: 1rem;
}

/* The `display: flex` above beats the UA's `[hidden] { display: none }`, so
   the empty inline-validation placeholder would render as a bare pink bar.
   This rule restores the hidden behavior. */
.poa-error[hidden] { display: none; }

.poa-finder-secure {
    margin-top: 1.25rem;
    padding-top: 1.25rem;
    border-top: 1px solid var(--poa-slate-100);
    text-align: center;
    font-size: var(--poa-text-xs);
    color: var(--poa-slate-500);
    line-height: 1.6;
}
.poa-secure-line {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-weight: 700;
    color: var(--poa-slate-700);
}
.poa-secure-line i { color: var(--poa-green-600); }

/* Location auto-detect hint above the ZIP field. */
.poa-detect-hint {
    display: none;
    align-items: center;
    gap: 8px;
    background: var(--poa-green-50);
    border: 1px solid #a7f3d0;
    color: #065f46;
    font-size: var(--poa-text-xs);
    font-weight: 600;
    padding: 9px 13px;
    border-radius: var(--poa-radius-sm);
    margin-bottom: 12px;
}
.poa-detect-hint.is-visible { display: flex; }

/* ── Trust bar ──────────────────────────────────────────────────────────── */
.poa-trust-bar { background: var(--poa-ink-900); color: #fff; padding-block: clamp(2rem, 1.5rem + 1.5vw, 2.75rem); }
.poa-trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    text-align: center;
}
.poa-trust-num {
    font-family: var(--poa-font-heading);
    font-size: clamp(1.6rem, 1.2rem + 1.6vw, 2.35rem);
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
}
.poa-trust-label {
    font-size: var(--poa-text-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--poa-ink-200);
    margin-top: 6px;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */
.poa-grid { display: grid; gap: clamp(1.25rem, 0.75rem + 1.5vw, 2rem); }
.poa-grid--2 { grid-template-columns: repeat(2, 1fr); }
.poa-grid--3 { grid-template-columns: repeat(3, 1fr); }
.poa-grid--4 { grid-template-columns: repeat(4, 1fr); }

.poa-card {
    background: var(--poa-white);
    border: 1px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-lg);
    padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    box-shadow: var(--poa-shadow-sm);
    transition: transform 0.22s var(--poa-ease), box-shadow 0.22s var(--poa-ease),
                border-color 0.22s var(--poa-ease);
}
.poa-card:hover { transform: translateY(-4px); box-shadow: var(--poa-shadow-lg); border-color: var(--poa-sky-200); }
.poa-card h3 { font-size: var(--poa-text-h3); margin-bottom: 0.6rem; }
.poa-card p { color: var(--poa-slate-500); font-size: var(--poa-text-sm); margin: 0; }

.poa-card-icon {
    width: 52px;
    height: 52px;
    display: grid;
    place-items: center;
    background: var(--poa-sky-50);
    color: var(--poa-blue-600);
    font-size: 1.25rem;
    border-radius: var(--poa-radius-md);
    margin-bottom: 1.15rem;
    transition: background-color 0.22s var(--poa-ease), color 0.22s var(--poa-ease);
}
.poa-card:hover .poa-card-icon { background: var(--poa-blue-600); color: #fff; }

/* Numbered step cards. */
.poa-step { position: relative; }
.poa-step-num {
    position: absolute;
    top: -14px;
    right: 20px;
    font-family: var(--poa-font-heading);
    font-size: 3.5rem;
    font-weight: 900;
    line-height: 1;
    color: var(--poa-slate-100);
    z-index: 0;
    pointer-events: none;
}
.poa-step > * { position: relative; z-index: 1; }

/* ── Split section (copy beside an image) ───────────────────────────────── */
.poa-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(2rem, 1rem + 3vw, 4rem);
    align-items: center;
}
.poa-split--reverse .poa-split-media { order: -1; }

.poa-split-media {
    border-radius: var(--poa-radius-xl);
    overflow: hidden;
    box-shadow: var(--poa-shadow-xl);
    background: var(--poa-slate-100);
}
.poa-split-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

.poa-split h2 { font-size: var(--poa-text-h2); margin-bottom: 1rem; }
.poa-split p { color: var(--poa-slate-500); font-size: var(--poa-text-lead); }

.poa-check-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 13px; }
.poa-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--poa-text-sm);
    font-weight: 500;
    color: var(--poa-slate-700);
}
.poa-check-list i { color: var(--poa-green-500); margin-top: 4px; flex: none; }

/* ══════════════════════════════════════════════════════════════════════════
   [BRAND-IMAGERY 2026-07-15] Photography treatments
   --------------------------------------------------------------------------
   Photos come from the Brand Assets S3 library (see includes/images.php). The
   library stores full uncropped frames on purpose, so each SECTION can choose
   its own crop.

   THE RULE, and it is not negotiable:
     ONE shape and ONE aspect ratio per section. Variety lives BETWEEN
     sections, never within one.

   Mixing shapes inside a single module (an arch beside a circle beside a
   squircle in the same rail) reads as an accident, not as design. The first
   pass of this build did exactly that and was rightly rejected.

   The assignments, site-wide:
     .poa-shape--squircle  every card, grid and rail image (steps, learn
                           headers, marquee, prequalify rail). The workhorse.
                           The ARCH is gone on purpose: it is the sister
                           brand's signature, and Park One's Carvana-culture
                           language is rounded product cards. Do not re-add it.
     .poa-shape--circle    a single small accent image, never a set.
     .poa-shape--blob      exactly one feature moment site-wide (homepage
                           financing). If it shows up twice it stops being a
                           moment.
     full-bleed            hero, proof band and CTA backgrounds.
   ══════════════════════════════════════════════════════════════════════════ */

/* Frame: owns the crop, the overflow and the hover. Put the shape class here. */
.poa-frame {
    position: relative;
    overflow: hidden;
    background: var(--poa-slate-100);
    /* Safari repaints the rounded corner while the child scales without this. */
    isolation: isolate;
    transform: translateZ(0);
}
.poa-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--poa-ease);
}
.poa-frame:hover img { transform: scale(1.06); }

/* Shapes. Four, deliberately: arch, squircle, circle, blob. The earlier set
   also had arch-down, pill, leaf and slant, which existed only so placements
   could be sprinkled with different silhouettes. That is the habit this rule
   exists to stop, so they are gone rather than sitting here inviting reuse. */
.poa-shape--squircle { border-radius: 24px; }
.poa-shape--circle   { border-radius: 50%; }
.poa-shape--blob     { border-radius: 58% 42% 52% 48% / 46% 44% 56% 54%; }

/* Aspect ratios, so a placement states its crop rather than inheriting one. */
.poa-ar--square   { aspect-ratio: 1 / 1; }
.poa-ar--portrait { aspect-ratio: 3 / 4; }
.poa-ar--tall     { aspect-ratio: 9 / 16; }
.poa-ar--photo    { aspect-ratio: 4 / 3; }
.poa-ar--wide     { aspect-ratio: 16 / 9; }
.poa-ar--cinema   { aspect-ratio: 21 / 9; }

/* ── Hero photo rail ────────────────────────────────────────────────────── */
/* Sits under the hero copy. Every tile is the SAME arch at the SAME 3:4 ratio.
   The rhythm comes from size and baseline alone, which is enough: the eye reads
   a family of arches stepping up and down, rather than four unrelated cutouts. */
.poa-hero-rail {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.4vw, 18px);
    margin-top: 2.25rem;
}
.poa-hero-rail .poa-frame {
    flex: none;
    box-shadow: var(--poa-shadow-lg);
    border: 3px solid #fff;
    /* Each tile gets its own drift from the mouse parallax below. */
    transition: transform 0.5s var(--poa-ease), box-shadow 0.3s var(--poa-ease);
    will-change: transform;
}
.poa-hero-rail .poa-frame:hover { box-shadow: var(--poa-shadow-2xl); }

.poa-rail-1 { width: clamp(122px, 14.5vw, 186px); }  /* every tile: same arch, only width and baseline vary */
.poa-rail-2 { width: clamp(92px, 10.5vw, 134px); transform: translateY(-14px); }
.poa-rail-3 { width: clamp(132px, 15.5vw, 202px); transform: translateY(8px); }
.poa-rail-4 { width: clamp(96px, 11vw, 142px); transform: translateY(-22px); }


/* ── Card photos ────────────────────────────────────────────────────────── */
/* One treatment for every card image in a set: same shape, same ratio, same
   size. They are peers in a grid, so anything else makes the grid look broken
   rather than lively. Rhythm in a card grid comes from the content, not from
   giving each card a different silhouette. */
.poa-card-photo {
    margin-bottom: 1.25rem;
    box-shadow: var(--poa-shadow-md);
    border-radius: 24px;
}

/* The numeral sits behind the photo on image cards. */
.poa-step--photo .poa-step-num { top: -6px; right: 14px; z-index: 0; }

/* ── Split media variants ───────────────────────────────────────────────── */
.poa-split-media--blob { border-radius: 58% 42% 52% 48% / 46% 44% 56% 54%; box-shadow: var(--poa-shadow-2xl); }
.poa-split-media--blob img { aspect-ratio: 1 / 1; }

/* A stat that floats over the corner of a photo, so the image carries a fact
   instead of being pure decoration. */
.poa-photo-badge {
    position: absolute;
    left: 8%;
    bottom: 8%;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-radius: var(--poa-radius-lg);
    padding: 14px 20px;
    box-shadow: var(--poa-shadow-xl);
    z-index: 2;
    text-align: left;
}
.poa-photo-badge-num {
    font-family: var(--poa-font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--poa-blue-600);
    line-height: 1;
}
.poa-photo-badge-label {
    font-size: var(--poa-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--poa-slate-500);
    margin-top: 3px;
}

/* Wrapper so a badge can be positioned against a shaped frame. */
.poa-photo-stack { position: relative; }

/* A small circular photo tucked against the leasing comparison card. */
.poa-float-circle {
    position: absolute;
    /* Top-LEFT corner on purpose: the comparison card's first header cell is
       empty, so the photo overlaps blank space. At top-right it sat on the
       "Financing" column label and hid it. Sized and offset so the part
       inside the card stays within the empty header cell rather than
       reaching the first row's label. */
    left: -36px;
    top: -42px;
    width: 104px;
    border: 5px solid #fff;
    box-shadow: var(--poa-shadow-xl);
    z-index: 3;
}

/* ── Network marquee ────────────────────────────────────────────────────── */
/* Two rails scrolling opposite ways. The track holds the image list twice and
   translates by exactly -50%, so the loop is seamless: at -50% the second copy
   sits precisely where the first started. Duplicated tiles are aria-hidden so
   a screen reader hears the list once. */
.poa-marquee { overflow: hidden; padding-block: 6px; }
.poa-marquee + .poa-marquee { margin-top: 14px; }

.poa-marquee-track {
    display: flex;
    gap: 14px;
    width: max-content;
    animation: poa-scroll-left 64s linear infinite;
}
.poa-marquee--reverse .poa-marquee-track { animation-name: poa-scroll-right; animation-duration: 76s; }

/* Pause on hover or keyboard focus so a visitor can actually look at one. */
.poa-marquee:hover .poa-marquee-track,
.poa-marquee:focus-within .poa-marquee-track { animation-play-state: paused; }

@keyframes poa-scroll-left  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes poa-scroll-right { from { transform: translateX(-50%); }   to { transform: translateX(0); } }

/* Every tile in the rail is identical: same width, same squircle, same 4:3.
   The nth-child rules that used to alternate arch/circle/squircle down the rail
   are gone. A flowing rail is ONE module, and a module where each item is cut
   differently looks like a mistake. The interest here comes from the motion and
   from the photographs, which is where it belongs. */
.poa-marquee-item {
    flex: none;
    width: clamp(180px, 21vw, 264px);
    border-radius: 24px;
    box-shadow: var(--poa-shadow-md);
    background: var(--poa-slate-200);
}
.poa-marquee-item img { aspect-ratio: 4 / 3; }

/* Fade the rail into the page at both ends rather than cutting it hard. */
.poa-marquee-mask {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}

@media (prefers-reduced-motion: reduce) {
    /* Never auto-scroll for someone who asked the OS to stop motion: the rail
       becomes a normal horizontally scrollable strip they drive themselves. */
    .poa-marquee-track { animation: none; }
    .poa-marquee { overflow-x: auto; }
    .poa-marquee-track { width: auto; }
}

/* ── CTA with a photographic background ─────────────────────────────────── */
.poa-final-cta--photo { background: var(--poa-ink-900); }
.poa-final-cta--photo .poa-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.poa-final-cta--photo .poa-cta-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Pulls the busy night shot back so white type stays readable on it. */
    opacity: 0.32;
    filter: saturate(0.75);
}
.poa-final-cta--photo::before {
    background: linear-gradient(180deg, rgba(6,21,37,0.85), rgba(10,27,44,0.92));
    z-index: 1;
}
.poa-final-cta--photo .poa-container { z-index: 2; }

/* ── Responsive image tweaks ────────────────────────────────────────────── */
@media (max-width: 960px) {
    /* The rail is a hero flourish; on touch the search card leads instead. */
    .poa-hero-rail { margin-top: 1.75rem; }
    .poa-float-circle { width: 84px; left: -16px; top: -30px; }
}

@media (max-width: 680px) {
    /* All four tiles need a phone size. The four widths plus three gaps have to
       clear the container's own padding, or the last tile runs past the right
       edge and gets silently clipped by the hero's overflow:hidden (which also
       hides it from a horizontal-scroll check). 84+62+88+66 + 3*7 = 321. */
    .poa-hero-rail { gap: 7px; }
    .poa-rail-1 { width: 84px; }
    .poa-rail-2 { width: 62px; }
    .poa-rail-3 { width: 88px; }
    .poa-rail-4 { width: 66px; transform: translateY(-16px); }
    .poa-float-circle { display: none; } /* would collide with the stacked card */
    .poa-photo-badge { left: 6%; bottom: 6%; padding: 10px 14px; }
    .poa-photo-badge-num { font-size: 1.2rem; }
}

/* ── Learn section headers ──────────────────────────────────────────────── */
/* One image per section, all identical: squircle, 21:9, full column width.
   Six sections, six identical frames. The photographs differ; the treatment
   does not. */
.poa-learn-figure {
    border-radius: 24px;
    box-shadow: var(--poa-shadow-lg);
    margin-bottom: 1.75rem;
}
.poa-learn-figure img { aspect-ratio: 21 / 9; }

/* ── Page-head feature (prequalify, calculator) ─────────────────────────── */
.poa-head-figure {
    border-radius: 24px;
    box-shadow: var(--poa-shadow-xl);
    max-width: 980px;
    margin: 0 auto;
}
/* 16:9, not 21:9. The library sources are 3:2, so a 21:9 crop cuts ~380px out
   of the frame and the subject (a car sitting low in shot) loses its wheels.
   16:9 keeps the vehicle whole, which is the entire point of the picture. */
.poa-head-figure img { aspect-ratio: 16 / 9; object-position: center 60%; }

/* A wide photo band that breaks up a long page. Same squircle language. */
.poa-band {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--poa-shadow-2xl);
    isolation: isolate;
}
.poa-band img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 55%; display: block; }
.poa-band-scrim {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--poa-gutter);
    background: linear-gradient(90deg, rgba(6,21,37,0.9), rgba(10,34,55,0.68));
}
.poa-band-scrim h2 { color: #fff; font-size: var(--poa-text-h2); margin-bottom: 0.6rem; }
.poa-band-scrim p { color: var(--poa-ink-100); font-size: var(--poa-text-lead); max-width: 46ch; margin: 0 auto; }

@media (max-width: 680px) {
    /* 21:9 becomes a letterbox slit on a phone; give the band real height. */
    .poa-band img, .poa-head-figure img, .poa-learn-figure img { aspect-ratio: 4 / 3; }
}

/* ── Scroll-driven motion ───────────────────────────────────────────────── */
/* Cards in a grid reveal in sequence rather than all at once, so scrolling
   through a section feels like it is unfolding. The delay is set per card by
   poa.js from its index, capped so a long grid never feels sluggish. */
.poa-js .poa-reveal { transition-delay: var(--poa-reveal-delay, 0ms); }

/* Feature photos drift slightly against the scroll. Purely presentational, and
   driven by a CSS variable poa.js updates on rAF, so no layout is touched. */
.poa-js [data-poa-drift] img {
    transform: translate3d(0, var(--poa-drift, 0px), 0) scale(1.08);
    /* No transition: the value is already updated every frame, and easing it
       would lag the scroll. */
}

@media (prefers-reduced-motion: reduce) {
    .poa-js .poa-reveal { transition-delay: 0ms !important; }
    .poa-js [data-poa-drift] img { transform: none; }
}

/* ── Social proof band ──────────────────────────────────────────────────── */
/* The brand's customer-delivery collage is a 2000x1000 mosaic. Cropped into a
   4:3 card it reads as noise; used full-bleed behind a dark scrim at close to
   its native ratio it reads as exactly what it is, a wall of real deliveries.
   The scrim is what makes the text legible over a busy image. */
.poa-proof {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    /* The brand's own showroom photo (Hero-Background.jpg recompressed
       to 1600w q68). Brand-folder assets are
       exempt from the shared library's use-once rule. Keep this a compressed
       JPEG: a CSS background is not lazy, so a heavy file here would ride
       along on every phone load (the sister site once shipped a 4MB PNG
       this way and it was the entire page weight). */
    background-image: url('/assets/images/proof-band.jpg');
    background-size: cover;
    background-position: center;
    text-align: center;
}
.poa-proof::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(6,21,37,0.92) 0%, rgba(10,34,55,0.88) 100%);
}
.poa-proof h2 { color: #fff; font-size: var(--poa-text-h2); margin-bottom: 0.75rem; }
.poa-proof p {
    color: var(--poa-ink-100);
    font-size: var(--poa-text-lead);
    max-width: 620px;
    margin: 0 auto;
}

/* ── Comparison card ────────────────────────────────────────────────────── */
/* Stands in for a photo where the brand has no good image to use. Carries
   real information instead of decoration. */
.poa-compare {
    background: var(--poa-white);
    border: 1px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-xl);
    box-shadow: var(--poa-shadow-xl);
    overflow: hidden;
}
.poa-compare-head {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    background: var(--poa-ink-900);
}
.poa-compare-head > div {
    padding: 16px 14px;
    font-family: var(--poa-font-heading);
    font-size: var(--poa-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--poa-ink-200);
    text-align: center;
}
.poa-compare-head > div:first-child { text-align: left; }
.poa-compare-head > div.is-highlight { background: var(--poa-blue-600); color: #fff; }

.poa-compare-row {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    align-items: center;
    border-bottom: 1px solid var(--poa-slate-100);
}
.poa-compare-row:last-child { border-bottom: 0; }
.poa-compare-row > div { padding: 15px 14px; font-size: var(--poa-text-sm); text-align: center; }
.poa-compare-row > div:first-child {
    text-align: left;
    font-weight: 700;
    color: var(--poa-slate-800);
}
.poa-compare-row > div.is-highlight { background: var(--poa-sky-50); color: var(--poa-ink-800); font-weight: 600; }
.poa-compare-row > div:not(:first-child):not(.is-highlight) { color: var(--poa-slate-500); }

@media (max-width: 420px) {
    /* Keeps three columns readable on the narrowest phones. */
    .poa-compare-head > div, .poa-compare-row > div { padding-inline: 9px; font-size: var(--poa-text-xs); }
}

/* ── Credit tiers ───────────────────────────────────────────────────────── */
.poa-tier {
    text-align: center;
    border-top: 4px solid var(--poa-slate-200);
}
.poa-tier--excellent { border-top-color: var(--poa-green-500); }
.poa-tier--good { border-top-color: var(--poa-blue-500); }
.poa-tier--fair { border-top-color: var(--poa-gold-500); }
.poa-tier--rebuilding { border-top-color: #f97316; }

.poa-tier-range {
    font-family: var(--poa-font-heading);
    font-size: 1.6rem;
    font-weight: 900;
    color: var(--poa-slate-900);
}
.poa-tier-name {
    font-size: var(--poa-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--poa-slate-500);
    margin-bottom: 0.85rem;
}

/* ── Prequal band ───────────────────────────────────────────────────────── */
.poa-prequal-card {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    align-items: center;
    background: linear-gradient(135deg, var(--poa-ink-700), var(--poa-ink-950));
    border-radius: var(--poa-radius-xl);
    padding: clamp(2rem, 1.25rem + 3vw, 3.5rem);
    box-shadow: var(--poa-shadow-2xl);
    color: #fff;
    /* Contains the decorative glow below. */
    position: relative;
    overflow: hidden;
}
.poa-prequal-card::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -12%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(124,186,239,0.2) 0%, rgba(124,186,239,0) 68%);
    pointer-events: none;
}
.poa-prequal-card > * { position: relative; }
.poa-prequal-card h2 { color: #fff; font-size: var(--poa-text-h2); }

/* :not(.poa-prequal-form) matters. The form is also a direct div child of this
   card, so a bare `> div > p` painted its lead text blue-100 on a white card:
   1.15:1 contrast, effectively invisible. This pale blue is only ever for copy
   sitting on the card's dark gradient. */
.poa-prequal-card > div:not(.poa-prequal-form) > p {
    color: var(--poa-ink-100);
    font-size: var(--poa-text-lead);
}

.poa-prequal-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 1.75rem; }
.poa-prequal-feature { display: flex; align-items: center; gap: 12px; font-size: var(--poa-text-sm); font-weight: 600; }
.poa-prequal-feature-icon {
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: var(--poa-radius-sm);
    color: var(--poa-sky-300);
    flex: none;
}

.poa-prequal-form {
    background: var(--poa-white);
    border-radius: var(--poa-radius-lg);
    padding: clamp(1.5rem, 1.25rem + 1vw, 2rem);
    box-shadow: var(--poa-shadow-xl);
}
.poa-prequal-form h3 { font-size: var(--poa-text-h3); margin-bottom: 0.4rem; }
.poa-prequal-form > p { color: var(--poa-slate-500); font-size: var(--poa-text-sm); margin-bottom: 1.25rem; }

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.poa-faq-list { max-width: 860px; margin-inline: auto; display: grid; gap: 12px; }

.poa-faq-item {
    background: var(--poa-white);
    border: 1px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-md);
    overflow: hidden;
    transition: border-color 0.2s var(--poa-ease), box-shadow 0.2s var(--poa-ease);
}
.poa-faq-item:hover { border-color: var(--poa-ink-200); }
.poa-faq-item.is-open { border-color: var(--poa-ink-300); box-shadow: var(--poa-shadow-md); }

.poa-faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 20px 22px;
    background: none;
    border: 0;
    cursor: pointer;
    font-family: var(--poa-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--poa-slate-900);
    text-align: left;
    line-height: 1.4;
}
.poa-faq-q i { color: var(--poa-blue-600); flex: none; transition: transform 0.3s var(--poa-ease); }
.poa-faq-item.is-open .poa-faq-q i { transform: rotate(180deg); }

/* Same grid-rows trick as the mobile drawer: animates to content height
   without hardcoding a max-height that would clip longer answers. */
.poa-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--poa-ease); }
.poa-faq-item.is-open .poa-faq-a { grid-template-rows: 1fr; }
.poa-faq-a-inner { overflow: hidden; }
.poa-faq-a p {
    padding: 0 22px 22px;
    margin: 0;
    color: var(--poa-slate-500);
    font-size: var(--poa-text-sm);
}

/* ── Final CTA ──────────────────────────────────────────────────────────── */
.poa-final-cta {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, var(--poa-ink-700), var(--poa-ink-950));
    color: #fff;
    text-align: center;
    padding-block: var(--poa-section-y);
}
.poa-final-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(760px 320px at 50% 0%, rgba(124,186,239,0.18), rgba(124,186,239,0));
    pointer-events: none;
}
.poa-final-cta .poa-container { position: relative; }
.poa-final-cta h2 { color: #fff; font-size: var(--poa-text-h2); margin-bottom: 1rem; }
.poa-final-cta p { color: var(--poa-ink-100); font-size: var(--poa-text-lead); max-width: 620px; margin: 0 auto 2rem; }
.poa-cta-actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.poa-footer { background: var(--poa-ink-900); color: var(--poa-slate-400); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 0; }

.poa-footer-grid {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, 1fr);
    gap: clamp(2rem, 1rem + 3vw, 3.5rem);
    padding-bottom: 3rem;
}
.poa-footer-logo img { height: 40px; width: auto; margin-bottom: 1.25rem; }
.poa-footer-about { font-size: var(--poa-text-sm); line-height: 1.75; margin-bottom: 1.5rem; max-width: 34ch; }

.poa-footer-contact { display: grid; gap: 11px; }
.poa-footer-contact a, .poa-footer-contact span {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: var(--poa-text-sm);
    color: var(--poa-slate-300);
}
.poa-footer-contact a:hover { color: #fff; }
.poa-footer-contact i { color: var(--poa-sky-300); width: 16px; text-align: center; flex: none; }

.poa-footer-col h4 {
    color: #fff;
    font-size: var(--poa-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 1.15rem;
}
.poa-footer-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 11px; }
.poa-footer-links a { font-size: var(--poa-text-sm); color: var(--poa-slate-400); transition: color 0.18s var(--poa-ease); }
.poa-footer-links a:hover { color: #fff; }

.poa-footer-legal { border-top: 1px solid var(--poa-ink-700); padding-block: 2rem; }
/* slate-400, not slate-500. On the slate-900 footer, slate-500 measures 3.75:1,
   under the 4.5:1 AA floor for small text. This is the legal disclaimer: it has
   to be genuinely readable, not merely present. slate-400 gives 6.4:1 while
   still sitting back from the links above it. */
.poa-disclaimer {
    font-size: var(--poa-text-xs);
    line-height: 1.75;
    color: var(--poa-slate-400);
    margin-bottom: 1.5rem;
}
.poa-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--poa-text-xs);
    color: var(--poa-slate-400);
}
.poa-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.poa-footer-bottom a { color: var(--poa-slate-400); }
.poa-footer-bottom a:hover { color: #fff; }

/* ── Payment calculator (/calculator) ───────────────────────────────────── */
.poa-calc {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: clamp(1.5rem, 1rem + 2vw, 2.5rem);
    align-items: start;
}

.poa-calc-panel {
    background: var(--poa-white);
    border: 1px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-xl);
    padding: clamp(1.5rem, 1.25rem + 1vw, 2.25rem);
    box-shadow: var(--poa-shadow-lg);
}

.poa-calc-field { margin-bottom: 1.5rem; }
.poa-calc-field:last-child { margin-bottom: 0; }

.poa-calc-field-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 9px;
}
.poa-calc-field-head label {
    font-size: var(--poa-text-sm);
    font-weight: 700;
    color: var(--poa-slate-800);
}

/* The number input doubles as the readout for its slider. */
.poa-calc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--poa-slate-50);
    border: 2px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-md);
    transition: border-color 0.18s var(--poa-ease), box-shadow 0.18s var(--poa-ease),
                background-color 0.18s var(--poa-ease);
}
.poa-calc-input-wrap:focus-within {
    background: var(--poa-white);
    border-color: var(--poa-blue-500);
    box-shadow: 0 0 0 4px rgba(16,107,199,0.15);
}
.poa-calc-prefix, .poa-calc-suffix {
    padding-inline: 14px;
    font-weight: 700;
    /* slate-600, not slate-400: these carry meaning ($, %, months) and
       slate-400 on the slate-50 field is 2.45:1, under the AA floor. */
    color: var(--poa-slate-600);
    flex: none;
    pointer-events: none;
}
.poa-calc-prefix { padding-right: 0; }
.poa-calc-suffix { padding-left: 0; }

.poa-calc-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    font-family: var(--poa-font-body);
    /* 16px floor: stops iOS Safari zooming on focus. */
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--poa-slate-900);
    padding: 14px;
    -moz-appearance: textfield;
    appearance: textfield;
}
.poa-calc-input::-webkit-outer-spin-button,
.poa-calc-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

/* Range slider. Track and thumb need vendor-specific rules; keep both in
   sync when changing sizes. */
.poa-calc-range {
    width: 100%;
    margin-top: 12px;
    height: 6px;
    border-radius: var(--poa-radius-full);
    background: var(--poa-slate-200);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.poa-calc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--poa-blue-600);
    border: 3px solid #fff;
    box-shadow: var(--poa-shadow-md);
    cursor: grab;
    transition: transform 0.15s var(--poa-ease);
}
.poa-calc-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.poa-calc-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--poa-blue-600);
    border: 3px solid #fff;
    box-shadow: var(--poa-shadow-md);
    cursor: grab;
}
.poa-calc-range:focus-visible { outline: 3px solid var(--poa-blue-500); outline-offset: 4px; }

.poa-calc-hint { font-size: var(--poa-text-xs); color: var(--poa-slate-500); margin-top: 8px; }

/* Credit level chips: picking one suggests a representative APR. */
.poa-chip-row { display: flex; flex-wrap: wrap; gap: 9px; }
.poa-chip {
    flex: 1 1 auto;
    padding: 11px 14px;
    background: var(--poa-white);
    border: 2px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-md);
    font-family: var(--poa-font-body);
    font-size: var(--poa-text-xs);
    font-weight: 700;
    color: var(--poa-slate-600);
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
    transition: border-color 0.18s var(--poa-ease), color 0.18s var(--poa-ease),
                background-color 0.18s var(--poa-ease);
}
.poa-chip:hover { border-color: var(--poa-sky-300); color: var(--poa-ink-800); }
.poa-chip[aria-pressed="true"] {
    background: var(--poa-sky-50);
    border-color: var(--poa-blue-600);
    color: var(--poa-ink-800);
}

/* Results panel. Sticks alongside the inputs on desktop only. */
.poa-calc-result {
    position: sticky;
    top: 100px;
    background: linear-gradient(135deg, var(--poa-ink-700), var(--poa-ink-950));
    border-radius: var(--poa-radius-xl);
    padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem);
    color: #fff;
    box-shadow: var(--poa-shadow-2xl);
    overflow: hidden;
}
.poa-calc-result-label {
    font-size: var(--poa-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--poa-ink-200);
}
.poa-calc-payment {
    font-family: var(--poa-font-heading);
    font-size: clamp(2.75rem, 2rem + 3vw, 4rem);
    font-weight: 900;
    line-height: 1;
    color: #fff;
    margin: 10px 0 4px;
    /* Tabular figures stop the number jittering as the slider moves. */
    font-variant-numeric: tabular-nums;
}
.poa-calc-payment-per { font-size: var(--poa-text-sm); color: var(--poa-ink-200); }

.poa-calc-breakdown {
    margin-top: 1.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255,255,255,0.15);
    display: grid;
    gap: 13px;
}
.poa-calc-row {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--poa-text-sm);
}
.poa-calc-row dt { color: var(--poa-ink-100); margin: 0; }
.poa-calc-row dd {
    margin: 0;
    font-weight: 700;
    color: #fff;
    font-variant-numeric: tabular-nums;
}
.poa-calc-row--total {
    padding-top: 13px;
    border-top: 1px solid rgba(255,255,255,0.15);
    font-size: var(--poa-text-body);
}

.poa-calc-note {
    margin-top: 1.5rem;
    font-size: var(--poa-text-xs);
    line-height: 1.7;
    color: var(--poa-ink-200);
}

.poa-calc-result .poa-btn { margin-top: 1.5rem; }

@media (max-width: 960px) {
    .poa-calc { grid-template-columns: 1fr; }
    /* Sticky would pin the result off-screen once it stacks below the inputs. */
    .poa-calc-result { position: static; }
}

/* ── Learn / article layout (/learn) ────────────────────────────────────── */
.poa-learn { display: grid; grid-template-columns: 260px 1fr; gap: clamp(2rem, 1rem + 3vw, 4rem); align-items: start; }

/* Grid items default to min-width:auto, so the widest thing inside (the
   comparison tables, min-width 480px) would size the track and push the whole
   page sideways on a phone. min-width:0 lets the track shrink and lets
   .poa-table-wrap's overflow-x:auto actually do its job. */
.poa-learn > * { min-width: 0; }

.poa-learn-toc {
    position: sticky;
    top: 100px;
    background: var(--poa-slate-50);
    border: 1px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-lg);
    padding: 1.5rem;
}
.poa-learn-toc h4 {
    font-size: var(--poa-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--poa-slate-500);
    margin-bottom: 1rem;
}
.poa-learn-toc ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; }
.poa-learn-toc a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--poa-radius-sm);
    font-size: var(--poa-text-sm);
    font-weight: 600;
    color: var(--poa-slate-600);
    border-left: 3px solid transparent;
    transition: background-color 0.18s var(--poa-ease), color 0.18s var(--poa-ease),
                border-color 0.18s var(--poa-ease);
}
.poa-learn-toc a:hover { background: var(--poa-white); color: var(--poa-ink-700); }
.poa-learn-toc a.is-active {
    background: var(--poa-white);
    color: var(--poa-ink-800);
    border-left-color: var(--poa-blue-600);
}

.poa-article > section { margin-bottom: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.poa-article > section:last-child { margin-bottom: 0; }
.poa-article h2 { font-size: var(--poa-text-h2); margin-bottom: 1rem; }
.poa-article h3 { font-size: var(--poa-text-h3); margin: 2rem 0 0.75rem; }
.poa-article p { font-size: var(--poa-text-lead); color: var(--poa-slate-600); }

/* Callout for the one thing worth remembering in a section. */
.poa-callout {
    display: flex;
    gap: 15px;
    background: var(--poa-sky-50);
    border: 1px solid var(--poa-sky-100);
    border-left: 4px solid var(--poa-blue-600);
    border-radius: var(--poa-radius-md);
    padding: 1.25rem 1.5rem;
    margin: 1.75rem 0;
}
.poa-callout i { color: var(--poa-blue-600); font-size: 1.15rem; margin-top: 3px; flex: none; }
.poa-callout p { font-size: var(--poa-text-sm); color: var(--poa-slate-700); margin: 0; }
.poa-callout strong { color: var(--poa-slate-900); }

/* Comparison table. Wrapper owns the horizontal scroll so the page body
   never scrolls sideways on a phone. */
.poa-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-lg);
    margin: 1.75rem 0;
    -webkit-overflow-scrolling: touch;
}
.poa-table { width: 100%; border-collapse: collapse; min-width: 480px; }
.poa-table th, .poa-table td {
    padding: 15px 18px;
    text-align: left;
    font-size: var(--poa-text-sm);
    border-bottom: 1px solid var(--poa-slate-200);
}
.poa-table thead th {
    background: var(--poa-slate-50);
    font-family: var(--poa-font-heading);
    font-weight: 700;
    color: var(--poa-slate-900);
    white-space: nowrap;
}
.poa-table tbody tr:last-child td { border-bottom: 0; }
.poa-table td:first-child { font-weight: 600; color: var(--poa-slate-800); }

@media (max-width: 960px) {
    .poa-learn { grid-template-columns: 1fr; }
    /* The TOC becomes a plain card above the article once it stacks. */
    .poa-learn-toc { position: static; }
}

/* ── Scroll reveal ──────────────────────────────────────────────────────── */
/* Elements start hidden only when JS is available to reveal them, so a
   no-JS visitor still sees all content. The .poa-js class is set by poa.js. */
.poa-js .poa-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s var(--poa-ease), transform 0.55s var(--poa-ease);
}
.poa-js .poa-reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
    .poa-js .poa-reveal { opacity: 1; transform: none; }
}

/* ── Responsive ─────────────────────────────────────────────────────────── */

/* Laptop: pull the 4-up grids in before they get cramped. */
@media (max-width: 1080px) {
    .poa-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .poa-nav a { padding: 10px 10px; }
}

/* Tablet + small laptop: the hero stacks and the drawer takes over.
   960px is chosen because the hero's two columns stop holding their line
   length below it, and the nav starts colliding with the phone pill. */
@media (max-width: 960px) {
    .poa-nav { display: none; }
    .poa-burger { display: flex; }
    .poa-mobile-nav { display: block; }
    .poa-header-cta { display: none; }

    .poa-hero-grid { grid-template-columns: 1fr; }
    /* Search card leads on touch, where it is the primary action. */
    .poa-finder { order: -1; }
    .poa-hero-sub { max-width: none; }

    .poa-split, .poa-prequal-card { grid-template-columns: 1fr; }
    .poa-split--reverse .poa-split-media { order: 0; }
    .poa-grid--3 { grid-template-columns: repeat(2, 1fr); }
    .poa-footer-grid { grid-template-columns: 1fr 1fr; }
}

/* Phone. */
@media (max-width: 680px) {
    .poa-trust-grid { grid-template-columns: repeat(2, 1fr); gap: 1.75rem 1rem; }
    .poa-grid--2, .poa-grid--3, .poa-grid--4 { grid-template-columns: 1fr; }
    .poa-prequal-features { grid-template-columns: 1fr; }
    .poa-footer-grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .poa-phone-pill span { display: none; }
    .poa-phone-pill { padding: 12px 14px; }
    .poa-cta-actions .poa-btn { width: 100%; }
    .poa-footer-bottom { flex-direction: column; align-items: flex-start; }
    .poa-hero-features { gap: 10px 16px; }
}

/* Print: drop chrome and ink-heavy backgrounds. */
@media print {
    .poa-header, .poa-mobile-nav, .poa-final-cta, .poa-burger { display: none !important; }
    .poa-footer { background: none; color: #000; }
    body { color: #000; }
}

/* ══════════════════════════════════════════════════════════════════════════
   [CARVANA-CULTURE 2026-07-17] Shopping-first components
   --------------------------------------------------------------------------
   New surfaces added when the site pivoted to compete with Carvana head on:
   the photo hero with a search pill, the promo strips under it, the style
   chip rail, the mixed-color explore cards, the navy payment band, the
   makes link grid, and the entire /shop results surface. Measured culture
   notes live in CARVANA_ANALYSIS.md in the build tree.
   ══════════════════════════════════════════════════════════════════════════ */


/* Screen-reader-only labels (search pill, ZIP strip). */
.poa-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* ── Photo hero ─────────────────────────────────────────────────────────── */
.poa-hero--photo {
    position: relative;
    isolation: isolate;
    background: var(--poa-ink-900);
    padding-block: clamp(3.5rem, 2rem + 6vw, 7rem);
}
.poa-hero--photo .poa-hero-bg {
    position: absolute;
    inset: 0;
    z-index: -2;
}
.poa-hero--photo .poa-hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 62%;
}
.poa-hero--photo::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Left-weighted navy scrim: the headline and search live left, the
       photo breathes on the right. */
    background: linear-gradient(90deg, rgba(6,21,37,0.9) 0%, rgba(6,21,37,0.72) 46%, rgba(6,21,37,0.35) 100%);
}
.poa-hero--photo .poa-hero-title {
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.01em;
    line-height: 1.02;
}
.poa-hero--photo .poa-hero-title span { color: var(--poa-gold-400); }
.poa-hero--photo .poa-hero-sub { color: var(--poa-ink-200); max-width: 36rem; }

/* The search pill: the hero's primary action, Carvana-style. */
.poa-search-pill {
    display: flex;
    align-items: center;
    gap: 8px;
    width: min(620px, 100%);
    background: #fff;
    border-radius: var(--poa-radius-full);
    padding: 7px 7px 7px 22px;
    box-shadow: var(--poa-shadow-xl);
    margin-top: 1.75rem;
}
.poa-search-pill i { color: var(--poa-slate-500); flex: none; }
.poa-search-pill input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: none;
    background: none;
    font-family: var(--poa-font-body);
    /* 16px floor: stops iOS Safari zooming on focus. */
    font-size: 1.0625rem;
    font-weight: 500;
    color: var(--poa-ink-800);
    padding: 10px 4px;
}
.poa-search-pill input::placeholder { color: var(--poa-slate-500); }
.poa-search-pill .poa-btn { min-height: 48px; padding: 13px 26px; flex: none; }

/* Promo strips under the hero (translucent on the photo). */
.poa-promo-strips {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin-top: clamp(1.75rem, 1rem + 2vw, 2.75rem);
}
.poa-promo-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: var(--poa-radius-lg);
    padding: 16px 20px;
}
.poa-promo-strip h3 { color: #fff; font-size: 1.0625rem; margin: 0 0 2px; }
.poa-promo-strip p { color: var(--poa-ink-200); font-size: var(--poa-text-xs); margin: 0; }
.poa-promo-strip .poa-btn {
    flex: none;
    background: #fff;
    color: var(--poa-blue-600);
    min-height: 44px;
    padding: 11px 20px;
    font-size: var(--poa-text-sm);
}
.poa-promo-strip .poa-btn:hover { transform: translateY(-2px); box-shadow: var(--poa-shadow-lg); }

/* Inline ZIP mini-form inside a promo strip. */
.poa-strip-zip {
    display: flex;
    flex: none;
    gap: 8px;
}
.poa-strip-zip input {
    width: 108px;
    border: 0;
    outline: none;
    border-radius: var(--poa-radius-full);
    padding: 11px 16px;
    font-family: var(--poa-font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--poa-ink-800);
    background: #fff;
}
.poa-strip-zip .poa-btn {
    background: var(--poa-blue-600);
    color: #fff;
    min-height: 44px;
    padding: 11px 18px;
    font-size: var(--poa-text-sm);
}

/* ── Style chip rail ────────────────────────────────────────────────────── */
.poa-style-rail {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    padding-block: 4px 10px;
    scrollbar-width: none;
}
.poa-style-rail::-webkit-scrollbar { display: none; }
.poa-style-chip {
    flex: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: var(--poa-white);
    border: 1px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-full);
    padding: 12px 22px;
    font-size: var(--poa-text-sm);
    font-weight: 600;
    color: var(--poa-ink-800);
    transition: border-color 0.18s var(--poa-ease), box-shadow 0.18s var(--poa-ease),
                transform 0.18s var(--poa-ease);
}
.poa-style-chip i { color: var(--poa-blue-600); font-size: 1.05rem; }
.poa-style-chip:hover { border-color: var(--poa-sky-300); color: var(--poa-ink-800); transform: translateY(-2px); box-shadow: var(--poa-shadow-md); }

/* ── Explore cards (mixed colors on purpose, one CTA each) ─────────────── */
.poa-explore-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 0.5rem + 1.5vw, 1.5rem); }
.poa-explore-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-radius: var(--poa-radius-lg);
    padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
    border: 1px solid var(--poa-slate-200);
    transition: transform 0.22s var(--poa-ease), box-shadow 0.22s var(--poa-ease);
}
.poa-explore-card:hover { transform: translateY(-4px); box-shadow: var(--poa-shadow-lg); }
.poa-explore-card h3 { font-size: 1.25rem; margin: 0; }
.poa-explore-card p { font-size: var(--poa-text-sm); margin: 0 0 4px; color: var(--poa-slate-600); }
.poa-explore-card .poa-frame { border-radius: var(--poa-radius-md); }
.poa-explore-card .poa-frame img { aspect-ratio: 16 / 10; }
.poa-explore-card .poa-btn { margin-top: auto; align-self: flex-start; min-height: 44px; padding: 11px 20px; font-size: var(--poa-text-sm); }

.poa-explore-card--pale { background: var(--poa-sky-100); border-color: var(--poa-sky-200); }
.poa-explore-card--pale p { color: var(--poa-ink-600); }
.poa-explore-card--navy { background: linear-gradient(160deg, var(--poa-ink-600), var(--poa-ink-800)); border-color: var(--poa-ink-700); }
.poa-explore-card--navy h3 { color: #fff; }
.poa-explore-card--navy p { color: var(--poa-ink-200); }
.poa-explore-card--dark { background: linear-gradient(160deg, #10161d, var(--poa-ink-950)); border-color: var(--poa-ink-900); }
.poa-explore-card--dark h3 { color: #fff; }
.poa-explore-card--dark p { color: var(--poa-slate-300); }
.poa-explore-card--navy .poa-btn, .poa-explore-card--dark .poa-btn { background: #fff; color: var(--poa-blue-600); }
.poa-explore-card--navy .poa-btn:hover, .poa-explore-card--dark .poa-btn:hover { background: var(--poa-sky-50); }

/* ── Navy payment band ──────────────────────────────────────────────────── */
.poa-band--navy {
    background: linear-gradient(120deg, var(--poa-ink-600), var(--poa-ink-800));
    border-radius: var(--poa-radius-xl);
    padding: clamp(2rem, 1.25rem + 3vw, 3.25rem);
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: clamp(1.5rem, 1rem + 2vw, 3rem);
    align-items: center;
    color: #fff;
    box-shadow: var(--poa-shadow-2xl);
}
.poa-band--navy h2 { color: #fff; font-size: var(--poa-text-h2); margin-bottom: 0.5rem; }
.poa-band--navy p { color: var(--poa-ink-200); margin: 0; font-size: var(--poa-text-lead); }
.poa-band--navy .poa-band-cta { display: flex; justify-content: flex-end; gap: 12px; flex-wrap: wrap; }
.poa-band--navy .poa-btn--white:hover { color: var(--poa-blue-600); }

/* ── Makes link grid ────────────────────────────────────────────────────── */
.poa-makes-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px 20px;
}
.poa-makes-grid a {
    display: block;
    padding: 9px 12px;
    border-radius: var(--poa-radius-sm);
    font-size: var(--poa-text-sm);
    font-weight: 600;
    color: var(--poa-blue-600);
}
.poa-makes-grid a:hover { background: var(--poa-sky-50); color: var(--poa-blue-700); }

/* ── /shop ──────────────────────────────────────────────────────────────── */
.poa-shop { display: grid; grid-template-columns: 270px 1fr; gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); align-items: start; }
.poa-shop > * { min-width: 0; }

.poa-shop-filters {
    position: sticky;
    top: 92px;
    background: var(--poa-white);
    border: 1px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-lg);
    padding: 1.25rem;
    display: grid;
    gap: 1.1rem;
    max-height: calc(100vh - 110px);
    overflow-y: auto;
}
.poa-shop-filters h4 {
    font-size: var(--poa-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--poa-slate-500);
    margin: 0;
}
.poa-filter-group { display: grid; gap: 7px; }
.poa-filter-group label { font-size: var(--poa-text-xs); font-weight: 700; color: var(--poa-ink-800); }
.poa-filter-group select,
.poa-filter-group input {
    width: 100%;
    font-family: var(--poa-font-body);
    font-size: 1rem;
    font-weight: 500;
    color: var(--poa-ink-800);
    background: var(--poa-slate-50);
    border: 2px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-md);
    padding: 10px 12px;
    transition: border-color 0.18s var(--poa-ease);
}
.poa-filter-group select:focus,
.poa-filter-group input:focus { outline: none; border-color: var(--poa-blue-500); background: #fff; }
.poa-filter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.poa-shop-head { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.poa-shop-head h1 { font-size: var(--poa-text-h2); margin: 0; }
.poa-shop-count { font-size: var(--poa-text-sm); color: var(--poa-slate-500); font-weight: 600; }

.poa-shop-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); }

.poa-car-card {
    background: var(--poa-white);
    border: 1px solid var(--poa-slate-200);
    border-radius: var(--poa-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.22s var(--poa-ease), box-shadow 0.22s var(--poa-ease),
                border-color 0.22s var(--poa-ease);
}
.poa-car-card:hover { transform: translateY(-4px); box-shadow: var(--poa-shadow-lg); border-color: var(--poa-sky-300); }
.poa-car-photo {
    aspect-ratio: 4 / 3;
    background: var(--poa-slate-100);
    position: relative;
    overflow: hidden;
}
.poa-car-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.poa-car-photo .poa-car-flag {
    position: absolute;
    top: 10px;
    left: 10px;
    background: var(--poa-gold-400);
    color: var(--poa-ink-900);
    font-size: 0.72rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-radius: var(--poa-radius-full);
    padding: 5px 11px;
}
.poa-car-nophoto {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    /* Visible placeholder: photo-less cards must read as "no photo yet",
       not as a broken empty block. */
    background: var(--poa-sky-50);
    color: var(--poa-sky-300);
    font-size: 2.6rem;
}
.poa-car-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.poa-car-title { font-family: var(--poa-font-heading); font-weight: 800; font-size: 1.02rem; color: var(--poa-ink-800); line-height: 1.25; }
.poa-car-trim {
    font-size: var(--poa-text-xs);
    color: var(--poa-slate-500);
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.poa-car-meta { font-size: var(--poa-text-xs); color: var(--poa-slate-500); font-weight: 600; }
.poa-car-pricing {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--poa-slate-100);
}
.poa-car-price { font-family: var(--poa-font-heading); font-weight: 800; font-size: 1.25rem; color: var(--poa-ink-800); font-variant-numeric: tabular-nums; }
.poa-car-mo { font-size: var(--poa-text-xs); font-weight: 700; color: var(--poa-blue-600); font-variant-numeric: tabular-nums; }
/* slate-500, not 400: this is real information at a tiny size and 400
   on white is 2.56:1, under the AA floor. */
.poa-car-dealer { font-size: 0.72rem; color: var(--poa-slate-500); font-weight: 600; margin-top: 4px; }

/* Loading skeletons: same footprint as a card so the grid never jumps. */
.poa-car-skel { border-radius: var(--poa-radius-lg); border: 1px solid var(--poa-slate-200); overflow: hidden; }
.poa-car-skel .s-img { aspect-ratio: 4 / 3; }
.poa-car-skel .s-line { height: 13px; border-radius: 7px; margin: 12px 16px; }
.poa-car-skel .s-line:last-child { width: 55%; margin-bottom: 18px; }
.poa-car-skel .s-img, .poa-car-skel .s-line {
    background: linear-gradient(90deg, var(--poa-slate-100) 25%, var(--poa-slate-200) 50%, var(--poa-slate-100) 75%);
    background-size: 200% 100%;
    animation: poa-shimmer 1.3s linear infinite;
}
@keyframes poa-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .poa-car-skel .s-img, .poa-car-skel .s-line { animation: none; } }

/* Status panel used for empty and error states. Never a native dialog. */
.poa-shop-status {
    grid-column: 1 / -1;
    text-align: center;
    background: var(--poa-white);
    border: 1px dashed var(--poa-slate-300);
    border-radius: var(--poa-radius-lg);
    padding: clamp(2rem, 1.5rem + 2vw, 3.5rem);
    color: var(--poa-slate-500);
}
.poa-shop-status i { font-size: 1.8rem; color: var(--poa-sky-300); margin-bottom: 0.75rem; display: block; }
.poa-shop-status h3 { color: var(--poa-ink-800); margin-bottom: 0.35rem; }
.poa-shop-status p { margin: 0; font-size: var(--poa-text-sm); }

.poa-shop-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 2rem; }
.poa-shop-pager button {
    min-height: 46px;
    padding: 12px 22px;
    border-radius: var(--poa-radius-full);
    border: 1px solid var(--poa-slate-200);
    background: var(--poa-white);
    font-family: var(--poa-font-body);
    font-size: var(--poa-text-sm);
    font-weight: 700;
    color: var(--poa-ink-800);
    cursor: pointer;
    transition: border-color 0.18s var(--poa-ease), background-color 0.18s var(--poa-ease);
}
.poa-shop-pager button:hover:not([disabled]) { border-color: var(--poa-sky-300); background: var(--poa-sky-50); }
.poa-shop-pager button[disabled] { opacity: 0.45; cursor: default; }
.poa-shop-pager .poa-page-now { font-size: var(--poa-text-sm); font-weight: 700; color: var(--poa-slate-500); }

.poa-shop-note { margin-top: 1.5rem; font-size: var(--poa-text-xs); color: var(--poa-slate-400); line-height: 1.7; }

/* ── Responsive for the new surfaces ────────────────────────────────────── */
@media (max-width: 1080px) {
    .poa-shop-grid { grid-template-columns: repeat(2, 1fr); }
    .poa-explore-grid { grid-template-columns: repeat(2, 1fr); }
    .poa-makes-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 960px) {
    .poa-promo-strips { grid-template-columns: 1fr; }
    .poa-band--navy { grid-template-columns: 1fr; }
    .poa-band--navy .poa-band-cta { justify-content: flex-start; }
    .poa-shop { grid-template-columns: 1fr; }
    .poa-shop-filters { position: static; max-height: none; }
}
@media (max-width: 680px) {
    .poa-explore-grid { grid-template-columns: 1fr; }
    .poa-shop-grid { grid-template-columns: 1fr; }
    .poa-makes-grid { grid-template-columns: repeat(2, 1fr); }
    .poa-search-pill { padding-left: 16px; }
    .poa-search-pill .poa-btn { padding: 13px 18px; }
    .poa-promo-strip { flex-direction: column; align-items: flex-start; }
}