/* ==========================================================================
   American Credit One : shared design system
   --------------------------------------------------------------------------
   Single source of truth for every page on americancreditone.com.
   Loaded by includes/header.php, so a token change here lands everywhere.

   Brand anchor is --aco-blue-700 (#005c90), the theme_color recorded for the
   americancredit brand in the Brand Manager registry (brand_manager_brands).
   The blue and slate ramps below were carried over from the previous landing
   page so the rebuild stays on brand rather than inventing a new palette.

   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 {
    /* Brand blues. 700 is the registry brand color; 600/500 are interactive
       states, 800/900 carry dark sections and the footer. */
    --aco-blue-50:  #f0f9ff;
    --aco-blue-100: #e0f2fe;
    --aco-blue-200: #bae6fd;
    --aco-blue-300: #60c5f7;
    --aco-blue-400: #2196c9;
    --aco-blue-500: #007bb5;
    --aco-blue-600: #0070ad;
    --aco-blue-700: #005c90;
    --aco-blue-800: #003d5c;
    --aco-blue-900: #002a42;

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

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

    /* Type */
    --aco-font-heading: 'Maven Pro', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    --aco-font-body: 'Inter', 'Maven Pro', -apple-system, BlinkMacSystemFont, sans-serif;

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

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

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

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

    --aco-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(--aco-font-body);
    font-size: var(--aco-text-body);
    line-height: 1.65;
    color: var(--aco-slate-700);
    background: var(--aco-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(--aco-font-heading);
    color: var(--aco-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(--aco-blue-600); text-decoration: none; }
a:hover { color: var(--aco-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(--aco-blue-400);
    outline-offset: 2px;
    border-radius: var(--aco-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 ─────────────────────────────────────────────────────────────── */
.aco-container {
    width: 100%;
    max-width: var(--aco-container);
    margin-inline: auto;
    padding-inline: var(--aco-gutter);
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

/* ── Header ─────────────────────────────────────────────────────────────── */
.aco-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(--aco-slate-200);
    transition: box-shadow 0.25s var(--aco-ease);
}
.aco-header.is-stuck { box-shadow: var(--aco-shadow-md); }

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

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

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

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

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

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

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

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

/* Hamburger. Hidden on desktop, shown at the nav breakpoint. */
.aco-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    width: 46px;
    height: 46px;
    padding: 0;
    background: var(--aco-white);
    border: 1px solid var(--aco-slate-200);
    border-radius: var(--aco-radius-md);
    cursor: pointer;
}
.aco-burger span {
    display: block;
    width: 20px;
    height: 2px;
    margin-inline: auto;
    background: var(--aco-slate-800);
    border-radius: 2px;
    transition: transform 0.25s var(--aco-ease), opacity 0.2s var(--aco-ease);
}
.aco-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.aco-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.aco-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. */
.aco-mobile-nav {
    display: none;
    border-top: 1px solid var(--aco-slate-200);
    background: var(--aco-white);
}
.aco-mobile-nav-inner {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.3s var(--aco-ease);
}
.aco-mobile-nav.is-open .aco-mobile-nav-inner { grid-template-rows: 1fr; }
.aco-mobile-nav-list { overflow: hidden; }
.aco-mobile-nav-list > div { padding: 12px 0 22px; }

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

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

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

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

.aco-hero-title {
    font-size: var(--aco-text-display);
    font-weight: 900;
    margin-bottom: 1.25rem;
}
.aco-hero-title span { color: var(--aco-blue-700); }

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

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

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

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

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

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

.aco-zip-field {
    width: 100%;
    font-family: var(--aco-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(--aco-slate-900);
    background: var(--aco-slate-50);
    border: 2px solid var(--aco-slate-200);
    border-radius: var(--aco-radius-md);
    transition: border-color 0.18s var(--aco-ease), background-color 0.18s var(--aco-ease),
                box-shadow 0.18s var(--aco-ease);
    -moz-appearance: textfield;
    appearance: textfield;
}
.aco-zip-field::-webkit-outer-spin-button,
.aco-zip-field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.aco-zip-field::placeholder { color: var(--aco-slate-400); font-weight: 500; letter-spacing: 0.02em; }
.aco-zip-field:focus {
    outline: none;
    background: var(--aco-white);
    border-color: var(--aco-blue-500);
    box-shadow: 0 0 0 4px rgba(0,123,181,0.14);
}

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

.aco-error {
    display: flex;
    align-items: center;
    gap: 10px;
    background: var(--aco-red-50);
    border: 1px solid #fecaca;
    color: var(--aco-red-700);
    font-size: var(--aco-text-sm);
    font-weight: 600;
    padding: 12px 15px;
    border-radius: var(--aco-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. */
.aco-error[hidden] { display: none; }

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

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

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

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

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

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

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

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

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

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

.aco-check-list { list-style: none; margin: 1.5rem 0 0; padding: 0; display: grid; gap: 13px; }
.aco-check-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: var(--aco-text-sm);
    font-weight: 500;
    color: var(--aco-slate-700);
}
.aco-check-list i { color: var(--aco-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:
     .aco-shape--arch      hero photo rails ONLY. The signature shape. Every
                           tile in a rail is an arch; only size and baseline
                           vary, which is what gives the rail its rhythm.
     .aco-shape--squircle  every card, grid and rail image (steps, learn
                           headers, marquee, prequalify cards). The workhorse.
     .aco-shape--circle    a single small accent image, never a set.
     .aco-shape--blob      exactly one feature moment site-wide (homepage
                           financing). If it shows up twice it stops being a
                           moment.
     full-bleed            proof band and CTA backgrounds.
   ══════════════════════════════════════════════════════════════════════════ */

/* Frame: owns the crop, the overflow and the hover. Put the shape class here. */
.aco-frame {
    position: relative;
    overflow: hidden;
    background: var(--aco-slate-100);
    /* Safari repaints the rounded corner while the child scales without this. */
    isolation: isolate;
    transform: translateZ(0);
}
.aco-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.7s var(--aco-ease);
}
.aco-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. */
.aco-shape--arch     { border-radius: 999px 999px var(--aco-radius-md) var(--aco-radius-md); }
.aco-shape--squircle { border-radius: 24px; }
.aco-shape--circle   { border-radius: 50%; }
.aco-shape--blob     { border-radius: 58% 42% 52% 48% / 46% 44% 56% 54%; }

/* Aspect ratios, so a placement states its crop rather than inheriting one. */
.aco-ar--square   { aspect-ratio: 1 / 1; }
.aco-ar--portrait { aspect-ratio: 3 / 4; }
.aco-ar--tall     { aspect-ratio: 9 / 16; }
.aco-ar--photo    { aspect-ratio: 4 / 3; }
.aco-ar--wide     { aspect-ratio: 16 / 9; }
.aco-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. */
.aco-hero-rail {
    display: flex;
    align-items: flex-end;
    gap: clamp(10px, 1.4vw, 18px);
    margin-top: 2.25rem;
}
.aco-hero-rail .aco-frame {
    flex: none;
    box-shadow: var(--aco-shadow-lg);
    border: 3px solid #fff;
    /* Each tile gets its own drift from the mouse parallax below. */
    transition: transform 0.5s var(--aco-ease), box-shadow 0.3s var(--aco-ease);
    will-change: transform;
}
.aco-hero-rail .aco-frame:hover { box-shadow: var(--aco-shadow-2xl); }

.aco-rail-1 { width: clamp(122px, 14.5vw, 186px); }  /* arch, tallest */
.aco-rail-2 { width: clamp(92px, 10.5vw, 134px); transform: translateY(-14px); } /* circle */
.aco-rail-3 { width: clamp(132px, 15.5vw, 202px); transform: translateY(8px); }  /* squircle */
.aco-rail-4 { width: clamp(96px, 11vw, 142px); transform: translateY(-22px); }   /* leaf */


/* ── 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. */
.aco-card-photo {
    margin-bottom: 1.25rem;
    box-shadow: var(--aco-shadow-md);
    border-radius: 24px;
}

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

/* ── Split media variants ───────────────────────────────────────────────── */
.aco-split-media--blob { border-radius: 58% 42% 52% 48% / 46% 44% 56% 54%; box-shadow: var(--aco-shadow-2xl); }
.aco-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. */
.aco-photo-badge {
    position: absolute;
    left: 8%;
    bottom: 8%;
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(8px);
    border-radius: var(--aco-radius-lg);
    padding: 14px 20px;
    box-shadow: var(--aco-shadow-xl);
    z-index: 2;
    text-align: left;
}
.aco-photo-badge-num {
    font-family: var(--aco-font-heading);
    font-size: 1.5rem;
    font-weight: 900;
    color: var(--aco-blue-700);
    line-height: 1;
}
.aco-photo-badge-label {
    font-size: var(--aco-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--aco-slate-500);
    margin-top: 3px;
}

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

/* A small circular photo tucked against the leasing comparison card. */
.aco-float-circle {
    position: absolute;
    right: -28px;
    top: -34px;
    width: 118px;
    border: 5px solid #fff;
    box-shadow: var(--aco-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. */
.aco-marquee { overflow: hidden; padding-block: 6px; }
.aco-marquee + .aco-marquee { margin-top: 14px; }

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

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

@keyframes aco-scroll-left  { from { transform: translateX(0); }      to { transform: translateX(-50%); } }
@keyframes aco-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. */
.aco-marquee-item {
    flex: none;
    width: clamp(180px, 21vw, 264px);
    border-radius: 24px;
    box-shadow: var(--aco-shadow-md);
    background: var(--aco-slate-200);
}
.aco-marquee-item img { aspect-ratio: 4 / 3; }

/* Fade the rail into the page at both ends rather than cutting it hard. */
.aco-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. */
    .aco-marquee-track { animation: none; }
    .aco-marquee { overflow-x: auto; }
    .aco-marquee-track { width: auto; }
}

/* ── CTA with a photographic background ─────────────────────────────────── */
.aco-final-cta--photo { background: var(--aco-blue-900); }
.aco-final-cta--photo .aco-cta-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}
.aco-final-cta--photo .aco-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);
}
.aco-final-cta--photo::before {
    background: linear-gradient(180deg, rgba(0,42,66,0.86), rgba(0,61,92,0.92));
    z-index: 1;
}
.aco-final-cta--photo .aco-container { z-index: 2; }

/* ── Responsive image tweaks ────────────────────────────────────────────── */
@media (max-width: 960px) {
    /* The rail is a hero flourish; on touch the search card leads instead. */
    .aco-hero-rail { margin-top: 1.75rem; }
    .aco-float-circle { width: 92px; right: -12px; top: -26px; }
}

@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. */
    .aco-hero-rail { gap: 7px; }
    .aco-rail-1 { width: 84px; }
    .aco-rail-2 { width: 62px; }
    .aco-rail-3 { width: 88px; }
    .aco-rail-4 { width: 66px; transform: translateY(-16px); }
    .aco-float-circle { display: none; } /* would collide with the stacked card */
    .aco-photo-badge { left: 6%; bottom: 6%; padding: 10px 14px; }
    .aco-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. */
.aco-learn-figure {
    border-radius: 24px;
    box-shadow: var(--aco-shadow-lg);
    margin-bottom: 1.75rem;
}
.aco-learn-figure img { aspect-ratio: 21 / 9; }

/* ── Page-head feature (prequalify, calculator) ─────────────────────────── */
.aco-head-figure {
    border-radius: 24px;
    box-shadow: var(--aco-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. */
.aco-head-figure img { aspect-ratio: 16 / 9; object-position: center 60%; }

/* A wide photo band that breaks up a long page. Same squircle language. */
.aco-band {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--aco-shadow-2xl);
    isolation: isolate;
}
.aco-band img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; object-position: center 55%; display: block; }
.aco-band-scrim {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    text-align: center;
    padding: var(--aco-gutter);
    background: linear-gradient(90deg, rgba(0,42,66,0.9), rgba(0,61,92,0.72));
}
.aco-band-scrim h2 { color: #fff; font-size: var(--aco-text-h2); margin-bottom: 0.6rem; }
.aco-band-scrim p { color: var(--aco-blue-100); font-size: var(--aco-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. */
    .aco-band img, .aco-head-figure img, .aco-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
   aco.js from its index, capped so a long grid never feels sluggish. */
.aco-js .aco-reveal { transition-delay: var(--aco-reveal-delay, 0ms); }

/* Feature photos drift slightly against the scroll. Purely presentational, and
   driven by a CSS variable aco.js updates on rAF, so no layout is touched. */
.aco-js [data-aco-drift] img {
    transform: translate3d(0, var(--aco-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) {
    .aco-js .aco-reveal { transition-delay: 0ms !important; }
    .aco-js [data-aco-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. */
.aco-proof {
    position: relative;
    isolation: isolate;
    padding-block: clamp(3rem, 2rem + 4vw, 5rem);
    /* proof-band.jpg, not the original leasing-customers.png. That source is a
       4MB PNG, and a CSS background is not lazy: it was the entire page weight
       on a phone (4.5MB of a 4.6MB load). It is photography behind a ~90%
       opaque scrim, so JPEG at q72 is visually identical at 246KB. */
    background-image: url('/assets/images/proof-band.jpg');
    background-size: cover;
    background-position: center;
    text-align: center;
}
.aco-proof::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(0,42,66,0.92) 0%, rgba(0,61,92,0.88) 100%);
}
.aco-proof h2 { color: #fff; font-size: var(--aco-text-h2); margin-bottom: 0.75rem; }
.aco-proof p {
    color: var(--aco-blue-100);
    font-size: var(--aco-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. */
.aco-compare {
    background: var(--aco-white);
    border: 1px solid var(--aco-slate-200);
    border-radius: var(--aco-radius-xl);
    box-shadow: var(--aco-shadow-xl);
    overflow: hidden;
}
.aco-compare-head {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    background: var(--aco-blue-900);
}
.aco-compare-head > div {
    padding: 16px 14px;
    font-family: var(--aco-font-heading);
    font-size: var(--aco-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--aco-blue-200);
    text-align: center;
}
.aco-compare-head > div:first-child { text-align: left; }
.aco-compare-head > div.is-highlight { background: var(--aco-blue-700); color: #fff; }

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

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

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

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

/* ── Prequal band ───────────────────────────────────────────────────────── */
.aco-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(--aco-blue-800), var(--aco-blue-900));
    border-radius: var(--aco-radius-xl);
    padding: clamp(2rem, 1.25rem + 3vw, 3.5rem);
    box-shadow: var(--aco-shadow-2xl);
    color: #fff;
    /* Contains the decorative glow below. */
    position: relative;
    overflow: hidden;
}
.aco-prequal-card::before {
    content: "";
    position: absolute;
    top: -40%;
    right: -12%;
    width: 480px;
    height: 480px;
    background: radial-gradient(circle, rgba(96,197,247,0.22) 0%, rgba(96,197,247,0) 68%);
    pointer-events: none;
}
.aco-prequal-card > * { position: relative; }
.aco-prequal-card h2 { color: #fff; font-size: var(--aco-text-h2); }

/* :not(.aco-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. */
.aco-prequal-card > div:not(.aco-prequal-form) > p {
    color: var(--aco-blue-100);
    font-size: var(--aco-text-lead);
}

.aco-prequal-features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px; margin-top: 1.75rem; }
.aco-prequal-feature { display: flex; align-items: center; gap: 12px; font-size: var(--aco-text-sm); font-weight: 600; }
.aco-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(--aco-radius-sm);
    color: var(--aco-blue-200);
    flex: none;
}

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

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

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

.aco-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(--aco-font-heading);
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--aco-slate-900);
    text-align: left;
    line-height: 1.4;
}
.aco-faq-q i { color: var(--aco-blue-600); flex: none; transition: transform 0.3s var(--aco-ease); }
.aco-faq-item.is-open .aco-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. */
.aco-faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.3s var(--aco-ease); }
.aco-faq-item.is-open .aco-faq-a { grid-template-rows: 1fr; }
.aco-faq-a-inner { overflow: hidden; }
.aco-faq-a p {
    padding: 0 22px 22px;
    margin: 0;
    color: var(--aco-slate-500);
    font-size: var(--aco-text-sm);
}

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

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

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

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

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

.aco-footer-legal { border-top: 1px solid var(--aco-slate-800); 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. */
.aco-disclaimer {
    font-size: var(--aco-text-xs);
    line-height: 1.75;
    color: var(--aco-slate-400);
    margin-bottom: 1.5rem;
}
.aco-footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    font-size: var(--aco-text-xs);
    color: var(--aco-slate-400);
}
.aco-footer-bottom nav { display: flex; flex-wrap: wrap; gap: 1.25rem; }
.aco-footer-bottom a { color: var(--aco-slate-400); }
.aco-footer-bottom a:hover { color: #fff; }

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

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

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

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

/* The number input doubles as the readout for its slider. */
.aco-calc-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--aco-slate-50);
    border: 2px solid var(--aco-slate-200);
    border-radius: var(--aco-radius-md);
    transition: border-color 0.18s var(--aco-ease), box-shadow 0.18s var(--aco-ease),
                background-color 0.18s var(--aco-ease);
}
.aco-calc-input-wrap:focus-within {
    background: var(--aco-white);
    border-color: var(--aco-blue-500);
    box-shadow: 0 0 0 4px rgba(0,123,181,0.14);
}
.aco-calc-prefix, .aco-calc-suffix {
    padding-inline: 14px;
    font-weight: 700;
    color: var(--aco-slate-400);
    flex: none;
    pointer-events: none;
}
.aco-calc-prefix { padding-right: 0; }
.aco-calc-suffix { padding-left: 0; }

.aco-calc-input {
    flex: 1;
    width: 100%;
    min-width: 0;
    background: none;
    border: 0;
    outline: none;
    font-family: var(--aco-font-body);
    /* 16px floor: stops iOS Safari zooming on focus. */
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--aco-slate-900);
    padding: 14px;
    -moz-appearance: textfield;
    appearance: textfield;
}
.aco-calc-input::-webkit-outer-spin-button,
.aco-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. */
.aco-calc-range {
    width: 100%;
    margin-top: 12px;
    height: 6px;
    border-radius: var(--aco-radius-full);
    background: var(--aco-slate-200);
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}
.aco-calc-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--aco-blue-700);
    border: 3px solid #fff;
    box-shadow: var(--aco-shadow-md);
    cursor: grab;
    transition: transform 0.15s var(--aco-ease);
}
.aco-calc-range::-webkit-slider-thumb:active { cursor: grabbing; transform: scale(1.12); }
.aco-calc-range::-moz-range-thumb {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--aco-blue-700);
    border: 3px solid #fff;
    box-shadow: var(--aco-shadow-md);
    cursor: grab;
}
.aco-calc-range:focus-visible { outline: 3px solid var(--aco-blue-400); outline-offset: 4px; }

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

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

/* Results panel. Sticks alongside the inputs on desktop only. */
.aco-calc-result {
    position: sticky;
    top: 100px;
    background: linear-gradient(135deg, var(--aco-blue-800), var(--aco-blue-900));
    border-radius: var(--aco-radius-xl);
    padding: clamp(1.75rem, 1.25rem + 1.5vw, 2.25rem);
    color: #fff;
    box-shadow: var(--aco-shadow-2xl);
    overflow: hidden;
}
.aco-calc-result-label {
    font-size: var(--aco-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--aco-blue-200);
}
.aco-calc-payment {
    font-family: var(--aco-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;
}
.aco-calc-payment-per { font-size: var(--aco-text-sm); color: var(--aco-blue-200); }

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

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

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

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

/* ── Learn / article layout (/learn) ────────────────────────────────────── */
.aco-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
   .aco-table-wrap's overflow-x:auto actually do its job. */
.aco-learn > * { min-width: 0; }

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

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

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

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

@media (max-width: 960px) {
    .aco-learn { grid-template-columns: 1fr; }
    /* The TOC becomes a plain card above the article once it stacks. */
    .aco-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 .aco-js class is set by aco.js. */
.aco-js .aco-reveal {
    opacity: 0;
    transform: translateY(22px);
    transition: opacity 0.55s var(--aco-ease), transform 0.55s var(--aco-ease);
}
.aco-js .aco-reveal.is-in { opacity: 1; transform: none; }

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

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

/* Laptop: pull the 4-up grids in before they get cramped. */
@media (max-width: 1080px) {
    .aco-grid--4 { grid-template-columns: repeat(2, 1fr); }
    .aco-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) {
    .aco-nav { display: none; }
    .aco-burger { display: flex; }
    .aco-mobile-nav { display: block; }
    .aco-header-cta { display: none; }

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

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

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

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