/* GB Auto Finance — customer application styles.
   Mobile-first. Brand: navy #0c1d35, red #b1161a, bg #eeeeee, text #181818. */

:root {
    --navy: #0c1d35;
    --navy-soft: #16305a;
    --red: #b1161a;
    --red-dark: #8e1015;
    --bg: #eeeeee;
    --card: #ffffff;
    --text: #181818;
    --muted: #5b6270;
    --line: #d9dde3;
    --line-strong: #b9c0ca;
    --ok: #1f7a3a;
    /* Action colour per the owner: soft mint with navy text. Red is for the frame and errors. */
    --go: #e8f5ec;        /* the mint the promise box used to be: owner's pick for CONTINUE and the text-me box */
    --go-dark: #d3ebda;
    --logo-yellow: #f8b008; /* sampled from the GB sun logo */
    --ok-bg: #e8f5ec;
    --warn-bg: #fff6e5;
    --warn-line: #f0c36d;
    --err: #b1161a;
    --err-bg: #fdecec;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(12, 29, 53, .06), 0 4px 14px rgba(12, 29, 53, .06);
    --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* Bootstrap 4 stack, as gbautosales.com (no web font) */
    --tap: 48px;
    /* Responsive system: phone < 720, tablet 720–1023, desktop 1024–1439, wide 1440+.
       --page-max is the content width (gutters excluded); the header, main grid and footer share it. */
    --page-max: 688px;
    --gutter: 16px;
    --rail-w: clamp(340px, 22vw + 90px, 420px);
    --col-gap: clamp(32px, 4vw, 56px);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    font-family: var(--font);
    font-size: 16px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    /* gbautosales.com body texture: faint 16x20 chevron tile over #eee */
    background-image: url("data:image/svg+xml,%3Csvg fill-opacity='0.05' fill='%23888888' width='16' height='20' viewBox='0 0 16 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill-rule='evenodd'%3E%3Cpath d='M8 0v20L0 10M16 0v10L8 0M16 10v10H8'/%3E%3C/g%3E%3C/svg%3E");
}
body.apply-page.sticky-cta { padding-bottom: 96px; } /* room for sticky bar on mobile */
img { max-width: 100%; }
a { color: var(--navy); }
button { font-family: inherit; }
[hidden] { display: none !important; }

.wrap { width: 100%; max-width: calc(var(--page-max) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }

/* ==== Page frame: menu bar, hero, footer ===============================
   A measured copy of gbautosales.com (Dealer Car Search theme 52532, Bootstrap 4.1.3); every number comes from
   docs/design/gb-site/measure/*. Breakpoints here are Bootstrap's (576 / 768 / 992 / 1200); the application
   content keeps its own 720 / 1024 / 1440 system further down. GB loads no web font (the Bootstrap system
   stack renders Segoe UI on Windows); its two Font Awesome glyphs are inline SVGs (.fa-svg).
   Agreed deviations: FINANCING is our own route and is marked current (red cell, GB has no current style);
   the Español toggle and the "Call <phone>" link sit at the right end of the bar; the hero is a slim strip
   on phones (< 720px); no "Dealer Car Search Login", "Privacy | Terms" instead of "Sitemap". */

/* Bootstrap .container (1140 / 960 / 720 / 540 / 100%) */
.gb-container { width: 100%; padding: 0 15px; margin: 0 auto; }
@media (min-width: 576px) { .gb-container { max-width: 540px; } }
@media (min-width: 768px) { .gb-container { max-width: 720px; } }
@media (min-width: 992px) { .gb-container { max-width: 960px; } }
@media (min-width: 1200px) { .gb-container { max-width: 1140px; } }

/* Font Awesome glyph as inline SVG: a 1em box whose bottom sits .125em under the baseline, like the web font. */
.fa-svg { display: inline-block; height: 1em; width: auto; vertical-align: -.125em; overflow: visible; }

/* ---- Menu bar (GB .menuWrapper > .container > nav#s51r_menu) ---------- */
.site-header { background: transparent; color: #fff; }
.site-nav { position: relative; z-index: 1; background: var(--navy); color: #fff; box-shadow: 0 10px 10px rgba(0,0,0,.2), 0 5px 5px rgba(0,0,0,.1); }
.site-nav-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; }
.site-menu { list-style: none; margin: 0; padding: 0; display: flex; }
.site-menu-item { position: relative; }
.site-menu-link {
    display: flex; align-items: center; color: #fff; text-decoration: none; cursor: pointer;
    font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 24px; text-transform: uppercase; letter-spacing: 0;
}
.site-menu-link:hover, .site-menu-link:focus,
.site-menu-item.is-current > .site-menu-link, .has-sub.is-open > .site-menu-link { background: var(--red); color: #fff; }
.site-menu-caret { display: inline-block; width: 0; height: 0; margin-left: .255em; vertical-align: .255em; border-top: .3em solid; border-right: .3em solid transparent; border-left: .3em solid transparent; }
.site-sub { display: none; list-style: none; margin: 0; padding: 0; background: var(--red); color: #fff; text-align: left; box-shadow: 0 .5rem 1rem rgba(0,0,0,.176); }
.has-sub.is-open > .site-sub { display: block; }
.site-sub a {
    display: block; width: 100%; padding: 8px 24px; color: #fff; text-decoration: none; background: transparent; border: 0;
    font-size: 16px; font-weight: 400; line-height: 24px; text-transform: none; letter-spacing: 0; white-space: nowrap;
}
.site-sub a:hover, .site-sub a:focus { background: var(--red); color: #fff; }
/* Extras GB does not have: the language toggle and the call link (styled like a plain-weight menu cell). */
.header-lang, .header-phone { display: flex; align-items: center; color: #fff; text-decoration: none; font-size: 16px; font-weight: 400; line-height: 24px; white-space: nowrap; }
.header-lang:hover, .header-lang:focus, .header-phone:hover, .header-phone:focus { background: var(--red); color: #fff; }
.header-phone .fa-svg { margin-right: 6px; }
.header-phone-number { font-weight: 700; margin-left: .25em; }

@media (min-width: 992px) {
    .nav-toggle { display: none; }
    .site-nav-inner { flex-wrap: nowrap; justify-content: flex-start; height: 56px; }
    .site-menu { order: 1; flex: 1 1 auto; height: 100%; justify-content: space-evenly; }
    .site-menu-item { flex: 1 0 auto; }
    .site-menu-link { height: 100%; justify-content: center; padding: 16px; text-align: center; }
    .site-sub { position: absolute; top: 100%; right: 0; left: auto; z-index: 1000; min-width: 10rem; }
    .site-menu-item:first-child > .site-sub { left: 0; right: auto; }
    .header-lang { order: 2; height: 100%; padding: 0 16px; }
    .header-phone { order: 3; height: 100%; padding: 0 16px; }
}
/* Collapsed (< 992): 74px bar with the centred 50vw "SITE MENU" button; the open panel pushes the hero down. */
@media (max-width: 991.98px) {
    .site-nav .gb-container { max-width: 100%; padding: 0; }
    /* Grid: the 50vw button is exactly centred (as GB's margin auto); language toggle left, call link right. */
    .site-nav-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; min-height: 74px; }
    .nav-toggle {
        display: block; grid-column: 2; grid-row: 1; width: 50vw; margin: 8px 0; padding: 16px 0; overflow: hidden;
        font-family: var(--font); font-size: 24px; line-height: 1; font-weight: 400; text-transform: uppercase; letter-spacing: 0; text-align: center; white-space: nowrap;
        color: #181818; background: #eee; border: 1px solid #dcdcdc; border-radius: 3px; transition: .25s; cursor: pointer;
    }
    .nav-toggle:hover, .nav-toggle:focus { background: #fbfbfb; color: #181818; }
    .header-lang, .header-lang-spacer { grid-column: 1; grid-row: 1; justify-self: start; min-height: 48px; margin-left: 8px; padding: 0 10px; }
    .header-phone { grid-column: 3; grid-row: 1; justify-self: end; min-height: 48px; margin-right: 8px; padding: 0 10px; }
    .header-lang-spacer { display: block; }
    .header-phone-label { display: none; }
    .site-menu { display: none; grid-column: 1 / -1; grid-row: 2; width: 100%; flex-direction: column; background: #e6e6e6; color: var(--navy); text-align: left; }
    .site-nav.is-open .site-menu { display: flex; }
    .site-menu-item + .site-menu-item { border-top: 1px solid #dcdcdc; }
    .site-menu-link { padding: 24px 0 24px 24px; color: var(--navy); }
    .site-sub { position: static; width: 100%; }
    .site-sub a { padding: 12px 24px 12px 48px; border-bottom: 1px solid #dcdcdc; }
    .site-sub li:last-child a { border-bottom: 0; }
    .site-sub a span { white-space: normal; }
}
/* Below 640px the number no longer fits beside the 50vw button: icon-only call link (the number stays in the aria-label and the hero). */
@media (max-width: 639.98px) {
    .header-phone-number { display: none; }
    .header-phone .fa-svg { margin-right: 0; }
    .header-lang, .header-lang-spacer, .header-phone { padding: 0 8px; }
}

/* ---- Hero (GB .s51r_wrapper > header > .s51r_header.container) -------- */
/* The banner photo is fixed to the viewport, centred, never scaled (1900x966); the strip casts a shadow on the page. */
.site-hero {
    position: relative; color: var(--text);
    background-color: #eee; background-position: center top; background-repeat: no-repeat; background-attachment: fixed; background-size: auto;
    box-shadow: 0 10px 10px rgba(0,0,0,.2), 0 5px 5px rgba(0,0,0,.1);
}
.site-hero:not([style]) { background-color: var(--navy); }
.hero-inner { text-align: center; }
.hero-logo { padding: 32px 0 16px; text-align: center; }
.brand { display: inline; }
.brand-logo { max-width: 100%; height: auto; vertical-align: middle; }
.hero-address-wrap { padding-bottom: 32px; text-align: center; }
.hero-address { width: -moz-fit-content; width: fit-content; margin: auto; padding: 8px 32px; background: var(--red); color: #fff; font-size: 16px; line-height: 1.5; text-align: center; }
.hero-address span { display: block; white-space: nowrap; }
.hero-address a { color: #fff; text-decoration: none; }
.hero-phone { font-weight: 700; font-size: 1.75rem; }
.hero-address .fa-svg, .footer-contact .fa-svg { font-size: .75em; margin: 0 2px 0 8px; color: var(--navy); }
@media (min-width: 768px) {
    .hero-address span { display: inline-block; }
    .hero-phone { font-size: 1.25rem; }
}
@media (min-width: 992px) { .hero-address { font-size: 1.125rem; } }
/* Phones: a slim strip (small logo + phone) so the first name and phone fields stay on the first screen. */
@media (max-width: 719.98px) {
    .hero-logo { padding: 10px 0 8px; }
    .brand-logo { width: auto; height: 60px; }
    .hero-address-wrap { padding-bottom: 10px; }
    .hero-address { padding: 4px 16px; }
    .hero-address .hero-city { display: none; }
    .hero-phone { font-size: 1.25rem; }
}
@media (max-width: 419.98px) { .hero-address .hero-addr { display: none; } }
/* Content starts 32px under the hero from 576px (GB card margin), flush on phones. */
@media (min-width: 576px) { .main { padding-top: 16px; } }

/* ---- Footer (GB footer.s51r_footer + #CopyrightPane) ------------------- */
.site-footer { margin-top: 32px; font-size: 16px; line-height: 1.5; background: var(--navy); color: #fff; }
@media (max-width: 575.98px) { .site-footer { margin-top: 0; } }
.footer-band { background: var(--red); color: #fff; }
.footer-row { padding-top: 16px; padding-bottom: 16px; color: #fff; text-align: left; }
.footer-cols { display: flex; flex-wrap: wrap; margin: 0 -15px; }
.footer-col { position: relative; min-height: 1px; flex: 0 0 100%; max-width: 100%; padding: 16px 15px; }
.footer-left, .footer-right { display: none; }
.footer-center { text-align: center; }
.footer-contact { font-style: normal; margin-bottom: 8px; font-size: 16px; line-height: 1.5; color: #fff; }
.footer-contact span { display: block; white-space: nowrap; }
.footer-contact a { color: #fff; text-decoration: none; font-weight: inherit; }
.footer-phone { font-weight: 700; font-size: 1.75rem; }
/* Site links: two columns of 57px rows, navy hover, right-pointing caret, dropdown opens upward to the right. */
.footer-menu-list { list-style: none; margin: 0; padding: 0 8px; display: flex; flex-wrap: wrap; width: 100%; }
.footer-menu-item { position: relative; flex: 0 0 50%; max-width: 50%; }
.footer-menu-link {
    display: block; margin: 0 4px; padding: 16px 12px; border-bottom: 1px solid #dcdcdc; background: transparent;
    color: #fff; text-decoration: none; font-size: 16px; font-weight: 400; line-height: 24px; text-transform: none; letter-spacing: 0; text-align: left; cursor: pointer; transition: all .3s ease;
}
.footer-menu-link:hover, .footer-menu-link:focus, .footer-menu-item.is-open > .footer-menu-link { background: var(--navy); color: #fff; text-decoration: none; }
.footer-caret { display: inline-block; width: 0; height: 0; margin-left: .255em; vertical-align: middle; border-top: .3em solid transparent; border-bottom: .3em solid transparent; border-left: .3em solid; border-right: 0; }
.footer-sub {
    display: none; list-style: none; margin: 0; padding: 0; position: absolute; bottom: 0; left: 98%; z-index: 1000; min-width: 10rem;
    background: var(--red); box-shadow: 0 10px 10px rgba(0,0,0,.2), 0 5px 5px rgba(0,0,0,.1); text-align: left;
}
.footer-menu-item.is-open > .footer-sub { display: block; }
.footer-sub a { display: block; padding: 4px 24px; background: var(--navy); color: #fff; text-decoration: none; font-size: 16px; font-weight: 400; line-height: 24px; white-space: nowrap; transition: all .3s ease; }
.footer-sub a:hover, .footer-sub a:focus { background: var(--red); color: #fff; }
.footer-right::after { content: ""; display: block; clear: both; }
.footer-reviews {
    float: right; display: block; margin-top: 8px; padding: 8px 16px; border: 1px solid transparent; border-radius: 3px;
    background: var(--navy); color: #fff; text-decoration: none; font-size: 16px; font-weight: 400; line-height: 24px; letter-spacing: 0; text-transform: none; text-align: center; white-space: normal; cursor: pointer; transition: .25s ease;
}
.footer-reviews:hover, .footer-reviews:focus { background: var(--red); color: #fff; text-decoration: none; box-shadow: none; }
@media (min-width: 768px) {
    .footer-center { flex: 0 0 50%; max-width: 50%; border-right: 1px solid #dcdcdc; }
    .footer-right { display: block; flex: 0 0 50%; max-width: 50%; }
    .footer-phone { font-size: 1.25rem; }
}
@media (min-width: 992px) {
    .footer-left { display: block; flex: 0 0 33.3333%; max-width: 33.3333%; }
    .footer-center { flex: 0 0 33.3333%; max-width: 33.3333%; border-left: 1px solid #dcdcdc; }
    .footer-right { flex: 0 0 33.3333%; max-width: 33.3333%; }
    .footer-contact { font-size: 1.125rem; }
}
/* Navy bottom bar: two centred 10px/16px lines, 10px apart, 16px padding. */
.footer-bottom { padding: 16px 0; background: var(--navy); color: #fff; text-align: center; }
.footer-legal, .footer-seo { text-align: center; clear: both; }
.footer-seo { margin-top: 10px; }
.footer-legal, .footer-copyright, .footer-fine { margin: 0; font-size: .625rem; line-height: 1.6em; color: #fff; }
.footer-copyright { display: inline-block; }
.footer-bottom a { color: #fff; text-decoration: none; font-weight: 400; }
.footer-bottom a:hover, .footer-bottom a:focus { color: #fff; text-decoration: none; }
.footer-choices { cursor: pointer; }
.choices-icon { display: inline-block; width: 28.06px; height: 13.92px; margin-left: 5px; position: relative; top: -1px; vertical-align: middle; cursor: pointer; }
.footer-fine-name { font-weight: 400; }
.footer-fine-address { font-style: italic; }
/* Back to top (GB a.top): fixed bottom-right, shown once scrolled; off on phones where the sticky bar lives. */
.top {
    position: fixed; right: 1rem; bottom: 4rem; z-index: 2147483640; width: 2.5rem; height: 2.5rem; padding: 0; border: 0; border-radius: .125rem; overflow: hidden;
    display: flex; align-items: center; justify-content: center; font-size: 1.5rem; line-height: 2.5rem; text-decoration: none;
    background: rgba(12,29,53,.9); color: #fff; box-shadow: 0 1px 2px 1px rgba(0,0,0,.1), 0 1px 1px 0 rgba(0,0,0,.2); transition: box-shadow .5s ease;
}
.top .fa-svg { vertical-align: 0; }
.top:hover, .top:focus { color: #fff; background: rgba(177,22,26,.95); box-shadow: 0 10px 20px 0 rgba(0,0,0,.25), 0 5px 10px 0 rgba(0,0,0,.15); }
@media (max-width: 719.98px) { .top { display: none !important; } }

/* ---- Stepper -------------------------------------------------------- */
.stepper { margin: 16px 0 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.stepper::-webkit-scrollbar { display: none; }
.stepper-list { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 4px; min-width: max-content; }
.step { display: flex; align-items: center; gap: 6px; padding: 6px 10px 6px 6px; border-radius: 999px; color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.step-dot {
    width: 24px; height: 24px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
    background: #fff; border: 2px solid var(--line-strong); font-size: 12px; color: var(--muted);
}
.step.is-done { color: var(--navy); }
.step.is-done .step-dot { background: var(--navy); border-color: var(--navy); color: #fff; }
.step.is-current { background: #fff; color: var(--navy); box-shadow: var(--shadow); }
.step.is-current .step-dot { border-color: var(--red); background: var(--red); color: #fff; }
/* The pill's button is a transparent wrapper: the <li> keeps every visual (padding, colours, theme rules); the button inherits its layout. */
.step-btn {
    display: flex; flex: 1; min-width: 0; width: 100%; flex-direction: inherit; align-items: inherit; justify-content: inherit; gap: inherit;
    margin: 0; padding: 0; background: none; border: 0; border-radius: inherit; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; text-align: inherit;
    cursor: default;
}
.step.is-reachable .step-btn { cursor: pointer; }
.step-btn[aria-disabled="true"] { pointer-events: none; }
.step.is-reachable:not(.is-current):hover { color: var(--navy); background: rgba(255,255,255,.6); }
.step-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 999px; }
@media (min-width: 720px) {
    .stepper-list { min-width: 0; justify-content: space-between; }
    .step { flex: 1; justify-content: center; }
}

/* ---- Notices -------------------------------------------------------- */
.notice { padding: 12px 14px; border-radius: var(--radius); margin: 0 0 12px; font-size: 15px; }
.notice-welcome { background: var(--ok-bg); border: 1px solid #bfe3c8; color: #16512a; }
.notice-draft { background: var(--warn-bg); border: 1px solid var(--warn-line); color: #6b4a00; margin-top: 16px; }

/* ---- Goal box ------------------------------------------------------- */
.goal-box { background: #fff; border-left: 4px solid var(--red); border-radius: var(--radius); box-shadow: var(--shadow); padding: 10px 14px; margin: 0 0 12px; }
.goal-head { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 700; }
.goal-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; }
.goal-list li { display: inline-flex; align-items: center; gap: 4px; }
.goal-list li strong { color: var(--navy); font-weight: 600; }
.goal-list li span { color: var(--muted); }

/* ---- Card / stage --------------------------------------------------- */
.card { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px 16px; }
@media (min-width: 600px) { .card { padding: clamp(24px, 1.2rem + 1.4vw, 36px); } }
.stage-card { margin-top: 0; }
.stage-title { font-size: clamp(24px, 1.1rem + 1.1vw, 32px); line-height: 1.2; margin: 0 0 6px; color: var(--navy); }
/* Language link repeated beside the screen-one title (same target as the header's Español). */
.stage-head { position: relative; }
.stage-head.has-lang .stage-title { padding-right: 96px; }
.stage-lang { position: absolute; top: 2px; right: 0; display: inline-flex; align-items: center; min-height: 36px; padding: 0 10px; border-radius: 8px; font-size: 15px; font-weight: 700; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.stage-lang:hover, .stage-lang:focus-visible { background: #f2f5fa; outline: none; }
.stage-lang:focus-visible { box-shadow: 0 0 0 2px var(--navy); }
.stage-subtitle { margin: 0 0 18px; color: var(--muted); font-size: 16px; }
.stage-subtitle:empty { display: none; }
.stage-card.is-busy { opacity: .75; pointer-events: none; }

.field { margin: 0 0 22px; }
.field-label { display: block; font-weight: 700; margin: 0 0 8px; font-size: 17px; color: var(--navy); }
.field-label .req { color: var(--red); margin-left: 2px; }
.field-hint { margin: -4px 0 8px; color: var(--muted); font-size: 14px; }
.field-hint-below { margin: 6px 0 0; font-size: 13px; }
.field-error { margin: 6px 0 0; color: var(--err); font-size: 14px; font-weight: 600; }
.field.has-error .input, .field.has-error select { border-color: var(--err); box-shadow: 0 0 0 3px rgba(177,22,26,.12); }
.field.has-error .choice { border-color: rgba(177,22,26,.5); }

.input, select.input, textarea.input {
    width: 100%; min-height: var(--tap); padding: 10px 14px; font: inherit; font-size: 17px;
    border: 1.5px solid var(--line-strong); border-radius: 10px; background: #fff; color: var(--text);
    -webkit-appearance: none; appearance: none;
}
select.input {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%235b6270' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
.input:focus, select.input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(12,29,53,.15); }
.input::placeholder { color: #9aa2ae; }
/* Masked secret field (SSN): bullets for every digit except the one just typed, eye toggle to reveal. */
.secret { position: relative; }
.secret .input { padding-right: 52px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.secret .eye { position: absolute; right: 6px; top: 6px; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--muted); cursor: pointer; }
.secret .eye:hover, .secret .eye[aria-pressed="true"] { color: var(--navy); background: rgba(12,29,53,.06); }
.secret .eye:focus-visible { outline: 2px solid var(--navy); outline-offset: 1px; }
.secret-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.field.has-error .secret .input { border-color: var(--err); }

.row { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .row { gap: 16px; } .row-2 { grid-template-columns: 1fr 1fr; } .row-3 { grid-template-columns: 1fr 1fr 1fr; } .row-2-1 { grid-template-columns: 2fr 1fr; } }
/* .row-keep: short paired fields share a row on phones too (licence number + state, years + months; city full width, then state + ZIP) */
@media (max-width: 719.98px) {
    .row-2.row-keep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .row-2-1.row-keep { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
    .row-3.row-keep { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    .row-3.row-keep > :first-child { grid-column: 1 / -1; }
}
.row .field { margin-bottom: 12px; }
.row .field-label { font-size: 15px; }

/* Choice cards */
/* Single column on phones. From 720px: 2 columns with 4+ options, 3 columns with 6+ (counted in CSS; .cols-3 is the fallback hint). */
.choices { display: grid; gap: 10px; grid-template-columns: 1fr; }
@media (min-width: 720px) {
    .choices { gap: 12px; }
    .choices:has(> .choice:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .choices:has(> .choice:nth-child(6)) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    @supports not selector(:has(a)) {
        .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
        .choices.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    }
}
@media (min-width: 1024px) { .choices { gap: 16px; } }
.choice {
    display: block; width: 100%; text-align: left; cursor: pointer;
    min-height: 56px; padding: 14px 16px; padding-right: 44px; position: relative;
    background: #fff; border: 2px solid var(--line-strong); border-radius: 12px; color: var(--text);
    font-size: 17px; font-weight: 600; line-height: 1.3;
    transition: border-color .12s, background .12s, box-shadow .12s;
}
.choice:hover { border-color: var(--navy-soft); }
.choice:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12,29,53,.25); }
.choice .choice-desc { display: block; font-weight: 400; color: var(--muted); font-size: 14px; margin-top: 3px; }
.choice::after {
    content: ""; position: absolute; right: 14px; top: 50%; width: 22px; height: 22px; margin-top: -11px;
    border-radius: 50%; border: 2px solid var(--line-strong); background: #fff;
}
.choice[aria-pressed="true"] { border-color: var(--navy); background: #f2f5fa; box-shadow: inset 0 0 0 1px var(--navy); }
.choice[aria-pressed="true"]::after {
    border-color: var(--navy); background: var(--navy);
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round' d='M5 12l5 5L19 7'/%3E%3C/svg%3E");
    background-size: 14px; background-repeat: no-repeat; background-position: center;
}

/* Why do we ask? */
.why { margin: 8px 0 0; }
.why-toggle {
    background: none; border: 0; padding: 6px 0; color: var(--navy); font-size: 14px; text-decoration: underline; cursor: pointer; min-height: 36px;
}
.why-toggle:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
.why-text { margin: 4px 0 0; padding: 10px 12px; background: #f4f6f9; border-radius: 8px; color: #333; font-size: 14px; }
.why-text p { margin: 0 0 8px; }
.why-text p:last-child { margin: 0; }
.fs > .why { margin: 0 0 14px; } /* the one "Why we ask for these" that leads the sensitive fields */

/* Vehicle picker */
.vpick-search { position: relative; margin-bottom: 12px; }
.vpick-grid { display: grid; gap: 12px; grid-template-columns: 1fr; max-height: 60vh; overflow-y: auto; padding: 4px; margin: 0 -4px; }
@media (min-width: 720px) { .vpick-grid { grid-template-columns: 1fr 1fr; } }
@media (min-width: 900px) and (max-width: 1023.98px) { .vpick-grid { grid-template-columns: repeat(3, 1fr); } }
/* The whole card is the primary control (role=button): tap anywhere to choose and move on. */
.vcard { position: relative; display: flex; flex-direction: column; background: #fff; border: 2px solid var(--line); border-radius: 12px; overflow: hidden; cursor: pointer; transition: border-color .12s, box-shadow .12s; }
.vcard:hover { border-color: var(--navy-soft); }
.vcard:focus-visible { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(12,29,53,.25); }
.vcard.is-selected { border-color: var(--navy); box-shadow: 0 0 0 2px rgba(12,29,53,.2); }
.vcard-badge {
    position: absolute; top: 8px; left: 8px; z-index: 1; padding: 3px 9px 3px 7px; border-radius: 999px;
    background: var(--navy); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .02em; line-height: 1.3;
}
.vcard-badge::before { content: "\2713\00a0"; }
.vcard-photo { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; background: #e3e6ea; display: block; }
.vcard-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.vcard-title { font-weight: 700; color: var(--navy); font-size: 16px; line-height: 1.25; }
.vcard-trim { color: var(--muted); font-size: 13px; }
.vcard-meta { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; margin-top: 2px; }
.vcard-price { font-weight: 700; font-size: 17px; }
.vcard-miles { color: var(--muted); }
/* Actions: [Choose this vehicle →] full width, then the two secondary actions on one wrapping row. */
.vcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; padding-top: 10px; }
.vcard .btn { flex: 1; min-height: 44px; padding: 8px 10px; font-size: 15px; }
.vcard .vcard-choose { flex: 1 1 100%; }
.vcard-secondary { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 32px; }
.vcard-compare {
    display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 12px; border-radius: 999px; cursor: pointer;
    background: #fff; border: 1.5px solid var(--line-strong); color: var(--navy); font: inherit; font-size: 13px; font-weight: 700; line-height: 1.2;
    transition: background .12s, border-color .12s, color .12s;
}
.vcard-compare::before { content: "+"; font-weight: 700; }
.vcard-compare:hover:not([disabled]) { border-color: var(--navy); }
.vcard-compare:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12,29,53,.25); }
.vcard-compare[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; }
.vcard-compare[aria-pressed="true"]::before { content: "\2713"; }
.vcard-compare[disabled] { opacity: .5; cursor: not-allowed; }
.vcard-link { font-size: 14px; color: var(--navy); text-decoration: underline; text-underline-offset: 3px; align-self: center; white-space: nowrap; }
.vcard-link::after { content: "\00a0\2197"; font-size: 12px; }
.vcard-link:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
.vpick-empty, .vpick-loading { color: var(--muted); padding: 12px 4px; }
.vpick-alt { margin-top: 12px; font-size: 15px; }
.vpick-selected-note { margin: 0 0 10px; padding: 10px 12px; background: var(--ok-bg); border-radius: 8px; font-size: 14px; color: #16512a; }

/* Compare tray: under the grid once 1+ cards are marked. Chips are removable; the button opens the comparison at 2+. */
.vtray { margin-top: 12px; padding: 10px 12px 12px; background: #f4f6f9; border: 1px solid var(--line); border-radius: 10px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.vtray-head { flex: 1 1 100%; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.vtray-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.vtray-hint { font-size: 13px; color: var(--muted); }
.vtray-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1 1 auto; min-width: 0; }
.vtray-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; padding: 3px 4px 3px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line-strong); font-size: 13px; font-weight: 600; color: var(--navy); }
.vtray-chip-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vtray-x { width: 24px; height: 24px; border-radius: 50%; border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0; flex: none; }
.vtray-x:hover, .vtray-x:focus-visible { background: var(--line); color: var(--navy); outline: none; }
.vtray-btn { flex: none; white-space: nowrap; }
@media (max-width: 479px) { .vtray-btn { flex: 1 1 100%; } }

/* Comparison: replaces the grid until closed. Row-header column sticks while the vehicle columns scroll sideways. */
.vcompare { margin-top: 4px; }
.vcompare:focus { outline: none; }
.vcompare-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px 16px; flex-wrap: wrap; margin-bottom: 8px; }
.vcompare-heading { margin: 0; font-size: 18px; color: var(--navy); }
.vcompare-back { font-size: 14px; font-weight: 600; padding: 6px 0; }
.vcompare-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid var(--line); border-radius: 10px; background: #fff; }
/* Fixed column widths: the row-header column (sticky) plus one 168px column per vehicle; wider than the card = sideways scroll. */
.vcompare-table { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 14px; }
.vcompare-table th, .vcompare-table td { padding: 8px 10px; border-bottom: 1px solid var(--line); vertical-align: top; text-align: left; background: #fff; overflow-wrap: anywhere; }
.vcompare-table tbody th, .vcompare-table tfoot td:first-child, .vcompare-corner { position: sticky; left: 0; z-index: 1; width: 108px; min-width: 108px; border-right: 1px solid var(--line); }
.vcompare-table tbody th { color: var(--muted); font-weight: 600; font-size: 13px; overflow-wrap: normal; }
.vcompare-table tfoot td, .vcompare-table tfoot th { border-bottom: 0; }
.vcompare-table td, .vcompare-veh { width: 168px; min-width: 168px; }
.vcompare-veh { vertical-align: bottom; }
/* Fixed pixel width: a percentage-width image would set the column's min-content to its intrinsic size. */
.vcompare-photo { width: 148px; aspect-ratio: 4 / 3; object-fit: cover; background: #e3e6ea; display: block; border-radius: 8px; margin-bottom: 6px; }
.vcompare-title { font-weight: 700; color: var(--navy); font-size: 15px; line-height: 1.25; }
.vcompare-table tbody tr:nth-child(2) td { font-weight: 700; font-size: 15px; }
.vcompare-actions td { padding-top: 10px; padding-bottom: 12px; }
.vcompare-actions .btn { width: 100%; min-height: 44px; font-size: 14px; padding: 8px 10px; margin-bottom: 8px; }
.vcompare-actions .vcard-link { display: inline-block; }
.vcompare-foot { margin: 10px 0 0; }
@media (min-width: 720px) {
    .vcompare-table tbody th, .vcompare-table tfoot td:first-child, .vcompare-corner { width: 120px; min-width: 120px; }
    .vcompare-table td, .vcompare-veh { width: auto; min-width: 180px; }
    .vcompare-photo { width: 160px; }
}

/* Screen one: promise block + consent fine print + footnote under CONTINUE */
.promise { margin: 0 0 20px; padding: 14px 16px; background: var(--ok-bg); border-radius: var(--radius); border: 1px solid var(--line); }
.promise-title { margin: 0 0 8px; font-size: 19px; line-height: 1.3; font-weight: 700; color: var(--navy); }
.promise-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: var(--text); }
.promise-list li { position: relative; padding-left: 22px; }
.promise-list li::before {
    content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 5px;
    border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg);
}
.consent-block { margin: -6px 0 22px; }
.consent-box { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; background: var(--card); margin: 0 0 10px; }
.consent-check-label { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--navy); cursor: pointer; }
input.consent-check {
    appearance: none; -webkit-appearance: none; width: 22px; height: 22px; min-height: 22px; padding: 0; margin: 0; flex: 0 0 auto; cursor: pointer; display: inline-block;
    background: #fff; border: 1.5px solid var(--line-strong); border-radius: 5px;
    background-repeat: no-repeat; background-position: center; background-size: 16px 16px;
}
/* A soft green check on a white box: a quiet "yes", not an alarm. */
input.consent-check:checked { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M3 8.5l3.2 3.2L13 5' fill='none' stroke='rgba(31,122,58,0.72)' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/></svg>"); border-color: rgba(31,122,58,.45); }
input.consent-check:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12,29,53,.18); }
.consent-disclosure { margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: var(--muted); }
.consent-disclosure a { color: var(--navy); text-decoration: underline; }
.consent-line { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.stage-footnote { margin: 12px 0 0; font-size: 14px; color: var(--muted); }

/* "Rather talk?" bar (under the stage card) and the inline copy on the secure intro */
.talk-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; margin-top: 12px; padding: 10px 14px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.talk-lead { margin: 0; font-size: 15px; font-weight: 600; color: var(--navy); }
.talk-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.talk-btn { min-height: 44px; white-space: nowrap; padding-left: 12px; padding-right: 12px; }
.talk-btn .icon { width: 18px; height: 18px; flex: none; }
.talk-inline { margin-top: 14px; }
.talk-inline .talk-lead { margin-bottom: 8px; }
/* "Text us" on a device that cannot send texts (desktop): an inline panel with the number / list to copy. */
.text-panel { margin-top: 10px; padding: 12px 14px; background: #f4f6f9; border: 1px solid var(--line); border-radius: 10px; font-size: 14px; color: var(--text); text-align: left; }
.text-panel:focus { outline: none; box-shadow: 0 0 0 3px rgba(12,29,53,.15); }
.text-panel-lead { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--navy); }
.text-panel-number { font-variant-numeric: tabular-nums; white-space: nowrap; user-select: all; -webkit-user-select: all; }
.text-panel-body { margin: 0 0 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--line); border-radius: 8px; font-size: 13px; line-height: 1.45; white-space: pre-wrap; overflow-wrap: anywhere; }
.text-panel-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.text-panel-actions .btn-small { min-height: 36px; padding: 4px 14px; font-size: 14px; }
.text-panel-note { margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.talk-bar .text-panel { flex: 1 1 100%; margin-top: 2px; }
.matches-actions .text-panel { margin-top: 10px; }
@media (max-width: 419px) {
    .talk-actions { width: 100%; }
    .talk-btn { flex: 1; padding-left: 8px; padding-right: 8px; font-size: 14px; }
    .talk-btn .icon { display: none; }
}

/* Secure sub-screens: the card title carries "Step 1 of 3" (eyebrow) + the step name; below it the progress bar and one encryption line */
.stage-title .stage-eyebrow { display: block; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); margin: 0 0 2px; }
.substep { margin: 0 0 14px; }
.substep-bar { height: 6px; border-radius: 999px; background: var(--line); overflow: hidden; }
.substep-bar span { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--red); transition: width .25s; }
.substep-secure { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; font-size: 13px; color: var(--muted); }
.substep-secure .icon { width: 16px; height: 16px; flex: none; color: var(--navy); }
.cobuyer-switch { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 2px solid var(--line-strong); border-radius: 12px; cursor: pointer; background: var(--card); }
.cobuyer-switch strong { display: block; font-size: 16px; color: var(--navy); }
.cobuyer-switch-compact { padding: 10px 12px; border-width: 1px; align-items: center; }
.cobuyer-switch-compact strong { font-size: 15px; }
.cobuyer-switch-compact .choice-desc { margin-top: 1px; }
.cobuyer-check { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--navy); }
.same-addr { margin: 0 0 16px; }
/* Confirm, don't re-ask: one line of what we already know; Edit reveals the inputs (same ids) in a dashed panel */
.known { margin: 0 0 18px; }
.known-line { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; background: var(--ok-bg); border: 1px solid #bfe3c8; border-radius: 10px; }
.known-icon { width: 20px; height: 20px; flex: none; color: var(--ok); margin-top: 2px; }
.known-text { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 16px; line-height: 1.4; color: var(--navy); overflow-wrap: anywhere; }
.known-edit { flex: none; padding: 0; min-height: 0; font-size: 15px; font-weight: 700; line-height: 1.4; }
.known-hint { margin: 6px 0 0; font-size: 13px; color: var(--muted); }
.known-fields { margin-top: 12px; padding: 14px 14px 2px; border: 1px dashed var(--line-strong); border-radius: 10px; }
.known-fields .fs-sub { margin-bottom: 10px; }
.known-fields .row .field, .known-fields > div > .field { margin-bottom: 12px; }
/* "More (optional)" disclosure for the peripheral employer details */
.more { margin: -6px 0 18px; }
.back-to-review { margin: 0; }

/* Secure intro */
.secure-intro { text-align: left; }
.secure-lock { width: 56px; height: 56px; color: var(--navy); margin: 0 0 8px; }
.secure-intro ul { padding-left: 20px; margin: 12px 0; }
.secure-intro li { margin: 6px 0; }
.secure-note { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; background: #f4f6f9; border-radius: 10px; font-size: 14px; color: #333; }
.secure-note .icon { width: 20px; height: 20px; flex: none; color: var(--navy); margin-top: 2px; }

/* Secure form */
.fs { border: 0; padding: 0; margin: 0 0 24px; min-width: 0; }
.fs-prior { padding-top: 14px; border-top: 1px solid var(--line); }
.fs-legend { font-size: 18px; font-weight: 700; color: var(--navy); padding: 0; margin: 0 0 4px; }
.fs-sub { color: var(--muted); font-size: 14px; margin: 0 0 14px; }
.applicant-block { padding-top: 4px; }
.applicant-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.applicant-head h2 { font-size: 20px; margin: 0; color: var(--navy); }
.cobuyer-toggle { margin: 8px 0 24px; }
.link-btn { background: none; border: 0; padding: 8px 0; color: var(--navy); text-decoration: underline; font-size: 15px; cursor: pointer; min-height: 40px; }
.link-btn:focus-visible { outline: 2px solid var(--navy); outline-offset: 2px; border-radius: 4px; }

/* Review */
.review-section { border-top: 1px solid var(--line); padding: 14px 0; }
.review-section:first-child { border-top: 0; padding-top: 0; }
.review-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 6px; }
.review-head h2 { font-size: 17px; margin: 0; color: var(--navy); }
.review-edit { font-size: 14px; font-weight: 600; min-height: 36px; display: inline-flex; align-items: center; }
.review-edit-row { min-height: 0; margin-left: 10px; padding: 0 2px; font-size: 13px; vertical-align: baseline; }
.review-dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 2px 12px; font-size: 15px; }
@media (min-width: 520px) { .review-dl { grid-template-columns: max-content 1fr; } }
.review-dl dt { color: var(--muted); }
.review-dl dd { margin: 0 0 6px; }
@media (min-width: 520px) { .review-dl dd { margin-bottom: 2px; } }
.review-empty { color: var(--muted); font-size: 14px; margin: 0; }

/* Consents */
.consent { border: 1.5px solid var(--line-strong); border-radius: 12px; padding: 14px; margin-bottom: 14px; }
.consent-title { font-weight: 700; color: var(--navy); margin: 0 0 8px; font-size: 16px; }
.consent-text { max-height: 130px; overflow-y: auto; padding: 10px 12px; background: #f7f8fa; border-radius: 8px; font-size: 14px; line-height: 1.5; color: #333; margin: 0 0 10px; }
@media (max-width: 719.98px) { .consent-text { max-height: none; } }
.consent-official-note { margin: 0 0 6px; font-size: 13px; }
.consent-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; min-height: var(--tap); font-weight: 600; }
.consent-check input { width: 24px; height: 24px; margin: 2px 0 0; flex: none; accent-color: var(--navy); }

/* Thank you */
.thanks { text-align: center; padding: 12px 0; }
.thanks-check { width: 64px; height: 64px; color: var(--ok); margin-bottom: 8px; }
.thanks h1 { color: var(--navy); font-size: 26px; margin: 0 0 8px; }
.thanks p { margin: 8px 0; }
.thanks .next { text-align: left; background: #f4f6f9; border-radius: 10px; padding: 14px 16px; margin: 18px 0; }
.thanks .next h2 { font-size: 16px; margin: 0 0 6px; color: var(--navy); }
.thanks .next ol { margin: 0; padding-left: 20px; }

/* Matches */
.matches { margin-top: 16px; }
.matches-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.matches-title { font-size: 17px; margin: 0; color: var(--navy); }
.badge-estimate { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #6b4a00; background: var(--warn-bg); border: 1px solid var(--warn-line); padding: 2px 8px; border-radius: 999px; }
.matches-grid { display: grid; gap: 12px; grid-template-columns: 1fr; }
@media (min-width: 720px) { .matches-grid { grid-template-columns: repeat(3, 1fr); } }
.mcard { background: #fff; border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.mcard-body { padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.mcard-pay { font-weight: 700; color: var(--navy); }
.mcard-reasons { color: var(--muted); font-size: 13px; margin: 0; padding-left: 16px; }
.mcard-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; }
.mcard-actions .btn { flex: 1 1 auto; }
.matches-actions { margin-top: 12px; }
.matches-actions .btn { width: 100%; }
@media (min-width: 720px) { .matches-actions .btn { width: auto; } }
.fine-print { font-size: 12px; color: var(--muted); margin: 10px 0 0; }
.matches-toggle { font-size: 14px; font-weight: 600; min-height: 36px; padding: 0; margin-left: auto; }
.matches.is-collapsed .matches-grid, .matches.is-collapsed .matches-actions, .matches.is-collapsed .fine-print { display: none; }

/* ---- Buttons -------------------------------------------------------- */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    min-height: 52px; padding: 12px 22px; border-radius: 10px; border: 2px solid transparent;
    font-size: 17px; font-weight: 700; letter-spacing: .02em; cursor: pointer; text-decoration: none; line-height: 1.2;
    transition: background .12s, border-color .12s, opacity .12s;
}
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12,29,53,.3); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
/* Soft brand red: the GB red at ~85% so it reads warm, not alarming; solid on hover. */
.btn-primary { background: rgba(177, 22, 26, .86); color: #fff; border-color: rgba(177, 22, 26, .18); border-radius: 12px; letter-spacing: .01em; box-shadow: 0 6px 16px rgba(177, 22, 26, .22); }
.btn-primary:hover:not([disabled]) { background: var(--red); border-color: var(--red); box-shadow: 0 8px 20px rgba(177, 22, 26, .3); }
.btn-secondary { background: #fff; color: var(--navy); border-color: var(--line-strong); }
.btn-secondary:hover:not([disabled]) { border-color: var(--navy); }
.btn-outline { background: #fff; color: var(--navy); border-color: var(--navy); }
.btn-outline:hover { background: var(--navy); color: #fff; }
.btn-small { min-height: 40px; padding: 6px 14px; font-size: 14px; }

.actions { display: flex; gap: 10px; margin-top: 8px; }
.actions .btn-primary { flex: 1; }
/* The Continue / Back pair always sits right under the questions, on every width. */
.actions-inline { display: flex; margin-top: 16px; }

/* Sticky bottom bar (phones): a convenience copy of Continue, shown only while the inline pair is
   still below the viewport (the customer is inside the questions). apply.js toggles body.sticky-cta;
   once the inline buttons scroll into view, or the customer is past them (support card, footer), it goes. */
.sticky-bar { display: none; }
body.sticky-cta .sticky-bar { display: block; }
.sticky-bar { position: fixed; left: 0; right: 0; bottom: 0; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); box-shadow: 0 -4px 16px rgba(12,29,53,.08); padding-bottom: env(safe-area-inset-bottom); z-index: 20; }
.sticky-inner { display: flex; gap: 10px; padding-top: 10px; padding-bottom: 10px; }
.sticky-inner .btn-primary { flex: 1; }
.sticky-inner .btn-secondary { flex: 0 0 auto; }

@media (min-width: 720px) {
    body.apply-page { padding-bottom: 0; }
    .sticky-bar, body.sticky-cta .sticky-bar { display: none; } /* never on tablet/desktop: the inline pair is always in reach */
    .actions-inline { display: flex; margin-top: 16px; justify-content: flex-end; }
    .actions-inline .btn-primary { flex: 0 0 auto; min-width: 260px; }
}

/* ---- Support block -------------------------------------------------- */
.support { text-align: center; margin: 28px 0 0; padding: 20px 16px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.support-title { margin: 0 0 4px; font-size: 18px; color: var(--navy); }
.support p { margin: 4px 0 12px; color: var(--muted); }
.support-address { font-size: 13px; margin-top: 12px !important; }

/* ---- Error summary -------------------------------------------------- */
.error-summary { background: var(--err-bg); border: 1px solid #f0b8b8; color: #7a1014; border-radius: 10px; padding: 12px 14px; margin: 0 0 16px; font-size: 15px; }
.error-summary ul { margin: 6px 0 0; padding-left: 18px; }
.error-summary li { margin: 2px 0; }

/* ---- Honeypot ------------------------------------------------------- */
.hp { position: absolute !important; left: -10000px !important; top: auto !important; width: 1px !important; height: 1px !important; overflow: hidden !important; opacity: 0; }

/* ---- Privacy prose -------------------------------------------------- */
.prose { margin-top: 12px; }
.prose h1 { color: var(--navy); font-size: 26px; margin: 0 0 8px; }
.prose h2 { color: var(--navy); font-size: 19px; margin: 26px 0 8px; }
.prose .lead { font-size: 17px; color: var(--muted); }
.prose ul { padding-left: 20px; }
.prose li { margin: 6px 0; }
.stage-dl dt { font-weight: 700; color: var(--navy); margin-top: 12px; }
.stage-dl dd { margin: 4px 0 0; }

/* ---- Utilities ------------------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.muted { color: var(--muted); }
.mt-8 { margin-top: 8px; }
.mt-16 { margin-top: 16px; }

/* ==== Responsive layout system ========================================
   Phone (< 720): the single column above, untouched.
   Tablet (720–1023): one wider column (760px), paired short fields, goal box + matches side by side under the card.
   Desktop (1024–1439) / wide (1440+): two-column grid — stage card left, sticky context rail right.
   The rail (#rail) holds the goal box, matches and talk bar (moved there by apply.js) plus the trust block. */

/* Rail + trust block: hidden until the desktop grid kicks in */
.rail { display: none; }
.trust { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px 16px; }
.trust-title { margin: 0 0 8px; font-size: 15px; line-height: 1.3; color: var(--navy); }
.trust-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 14px; color: var(--text); }
.trust-list li { position: relative; padding-left: 22px; }
.trust-list li::before {
    content: ""; position: absolute; left: 2px; top: 6px; width: 9px; height: 5px;
    border-left: 2px solid var(--ok); border-bottom: 2px solid var(--ok); transform: rotate(-45deg);
}

/* Compact matches: stacked cards with the photo on the left (in the rail, and beside the goal box on tablet) */
@media (min-width: 720px) {
    .rail .matches-grid, .goal-box:not([hidden]) ~ .matches .matches-grid { grid-template-columns: 1fr; gap: 10px; }
    .rail .mcard, .goal-box:not([hidden]) ~ .matches .mcard { flex-direction: row; align-items: flex-start; padding: 10px; gap: 12px; }
    .rail .mcard .vcard-photo, .goal-box:not([hidden]) ~ .matches .mcard .vcard-photo { width: 108px; aspect-ratio: 4 / 3; flex: none; border-radius: 8px; }
    .rail .mcard-body, .goal-box:not([hidden]) ~ .matches .mcard-body { padding: 0; min-width: 0; gap: 2px; }
    .rail .mcard .vcard-title, .goal-box:not([hidden]) ~ .matches .mcard .vcard-title { font-size: 15px; }
    .rail .mcard .vcard-price, .goal-box:not([hidden]) ~ .matches .mcard .vcard-price { font-size: 16px; }
    .rail .mcard .btn, .goal-box:not([hidden]) ~ .matches .mcard .btn { align-self: flex-start; min-height: 36px; padding: 4px 12px; font-size: 13px; }
    .rail .matches-actions .btn, .goal-box:not([hidden]) ~ .matches .matches-actions .btn { width: 100%; }
}

/* ---- Tablet and up: wider column, paired short fields --------------- */
@media (min-width: 720px) {
    :root { --page-max: 760px; --gutter: 24px; }

    /* Answer/contact stages: short fields share a row (6-track grid; everything else spans the full width). */
    #fields { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); column-gap: 16px; }
    #fields > * { grid-column: 1 / -1; min-width: 0; }
    #fields > [data-field="first_name"], #fields > [data-field="phone"],
    #fields > [data-field="last_name"], #fields > [data-field="email"],
    #fields > [data-field="trade_mileage"] { grid-column: span 3; }
    #fields > [data-field="address_line1"] { grid-column: span 4; }
    #fields > [data-field="address_line2"] { grid-column: span 2; }
    #fields > [data-field="address_city"], #fields > [data-field="address_state"], #fields > [data-field="zip"],
    #fields > [data-field="trade_year"], #fields > [data-field="trade_make"], #fields > [data-field="trade_model"] { grid-column: span 2; }

    .goal-box { padding: 12px 16px; }
    .talk-bar { padding: 12px 16px; }
}

/* ---- Tablet only: goal box + matches side by side under the card ---- */
@media (min-width: 720px) and (max-width: 1023.98px) {
    .main { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; row-gap: 0; align-items: start; }
    .main > * { grid-column: 1 / -1; min-width: 0; }
    .stage-card { order: 1; }
    .goal-box:has(~ .matches:not([hidden])) { order: 2; grid-column: auto; margin: 16px 0 0; }
    .goal-box:not([hidden]) ~ .matches { order: 2; grid-column: auto; margin-top: 16px; }
    .talk-bar { order: 3; }
    .support { order: 4; }
}

/* ---- Desktop: two-column grid with a sticky context rail ------------ */
@media (min-width: 1024px) {
    :root { --page-max: 1100px; --gutter: 24px; }

    .main { display: grid; grid-template-columns: minmax(0, 1fr) var(--rail-w); column-gap: var(--col-gap); row-gap: 0; align-items: start; }
    .main > * { min-width: 0; }
    .stepper { grid-column: 1 / -1; grid-row: 1; }
    .notice-welcome { grid-column: 1 / -1; grid-row: 2; }
    .stage-card { grid-column: 1; grid-row: 3; }
    .support { grid-column: 1; grid-row: 4; }

    .rail {
        display: flex; flex-direction: column; gap: 14px;
        grid-column: 2; grid-row: 3 / span 2;
        position: sticky; top: 16px; align-self: start;
    }
    .rail > * { margin: 0; }
    .rail .goal-box { padding: 12px 16px; }
    .rail .goal-list { flex-direction: column; gap: 4px; }
    .rail .matches { margin: 0; }
    .rail .matches-head { flex-wrap: wrap; gap: 6px 10px; }
    .rail .talk-bar { flex-direction: column; align-items: stretch; margin: 0; }
    .rail .talk-actions { width: 100%; }
    .rail .talk-btn { flex: 1; }

    /* Desktop hierarchy: bigger stage title (wins over the themes' phone sizes), roomier card */
    .main .stage-card .stage-title { font-size: clamp(30px, 1.4rem + .8vw, 32px); }
    .stage-subtitle { font-size: 17px; }
    .support { margin-top: 24px; }
}

/* ---- Wide: cap the grid at 1180px and centre it --------------------- */
@media (min-width: 1440px) {
    :root { --page-max: 1180px; --gutter: 32px; --col-gap: 56px; }
}

@media print {
    .sticky-bar, .support, .rail .talk-bar { display: none !important; }
    .rail { position: static; max-height: none; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

/* Secure intro: the person-to-person line under the Start button */
.talk-after { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }

/* Narrow phones: the inline Continue / Start secure steps label stays on one line */
@media (max-width: 419.98px) {
    .actions-inline .btn { white-space: nowrap; font-size: 16px; padding-left: 14px; padding-right: 14px; }
}

/* Text-message consent under the Continue button (owner 2026-10-06): one line, the essentials, Details opens the full text. */
.consent-after { margin: 14px 0 0; }
.consent-brief { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: var(--muted); }
.consent-brief a { color: var(--navy); text-decoration: underline; }
.consent-details { font-size: 12px; }
.consent-after .consent-disclosure { margin: 8px 0 0; }
/* Review: the primary action at the top as well as the bottom. */
.review-top-actions { display: flex; margin: 0 0 16px; }
.review-top-actions .btn { flex: 1; }
@media (min-width: 720px) { .review-top-actions .btn { flex: 0 0 auto; margin-left: auto; } }

/* Typed date with a calendar button: year and month are dropdowns, the day is one tap (owner 2026-10-06). */
.date-wrap { position: relative; }
.date-wrap .input { padding-right: 46px; }
.date-btn { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border: 0; border-radius: 8px; background: transparent; color: var(--navy); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.date-btn:hover { background: #f2f5fa; }
.date-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(12,29,53,.25); }
.datepick { position: absolute; left: 0; top: calc(100% + 6px); z-index: 2147483641; /* above the phone's sticky Continue bar */ width: 296px; max-width: calc(100vw - 32px); padding: 10px; background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 10px 28px rgba(12,29,53,.18); }
.datepick-head { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 8px; }
.datepick-sel { min-height: 40px; padding: 6px 8px; font-size: 15px; }
.datepick-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.datepick-wd { text-align: center; font-size: 12px; font-weight: 700; color: var(--muted); padding: 4px 0; }
.datepick-day { min-height: 36px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--text); font-size: 15px; cursor: pointer; }
.datepick-day:hover { background: #f2f5fa; border-color: var(--line); }
.datepick-day[aria-pressed="true"] { background: var(--navy); color: #fff; }
.datepick-day:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(12,29,53,.35); }