/* Get Me Some Wheels - green + near-black on white, Oswald headings over
   Poppins body. Green reads as "approved / go" and suits auto finance; both
   faces are Google Fonts.

   Every foreground/background pair below was checked against WCAG 2.1 AA by
   computing the ratio from the hex values, not by eye:
     green  #087200 on white .... 6.15:1   (text and button fill both ways)
     ink    #141414 on white .... 18.42:1
     muted  #575f6b on white .... 6.45:1
     border #848c9a on white ....  3.39:1  (1.4.11 needs 3:1 for field edges)
*/
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500;600;700&family=Poppins:wght@400;500;600;700&display=swap');

:root {
  --bg: #f6f7f8;
  --card: #ffffff;
  --ink: #141414;
  --slate: #222732;
  --muted: #575f6b;
  --line: #e3e6ea;          /* decorative only */
  --field-border: #848c9a;  /* functional - inputs/selects/textareas */
  --green: #087200;
  --green-press: #065a00;
  --green-wash: #eef5ec;
  --danger: #b3261e;
  --ok: #087200;
  --radius: 12px;
  --shadow: 0 1px 2px rgba(20,20,20,.06), 0 4px 16px rgba(20,20,20,.06);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--ink); }
body {
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  line-height: 1.55; -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, .num { font-family: 'Oswald', 'Poppins', system-ui, sans-serif; letter-spacing: .01em; }
a { color: var(--green); }

/* Every interactive thing gets a visible focus ring. */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--green); outline-offset: 2px; border-radius: 6px;
}

.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;
}

/* ---------- header ---------- */
.topbar {
  position: sticky; top: 0; z-index: 40;
  background: var(--card); border-bottom: 1px solid var(--line);
  padding-top: env(safe-area-inset-top, 0px);
}
.topbar-in {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 60px; padding: 10px 16px; max-width: 680px; margin: 0 auto;
}
.logo { height: 30px; width: auto; display: block; }

.lang-toggle { display: flex; border: 1px solid var(--field-border); border-radius: 999px; overflow: hidden; }
.lang-toggle button {
  background: none; border: 0; padding: 6px 14px; font-size: .84rem; font-weight: 600;
  color: var(--muted); cursor: pointer; min-height: 36px;
}
.lang-toggle button[aria-pressed="true"] { background: var(--green); color: #fff; }

/* ---------- layout ---------- */
main {
  max-width: 680px; margin: 0 auto;
  padding: 20px 16px calc(32px + env(safe-area-inset-bottom, 0px));
}

.hero { text-align: center; margin-bottom: 20px; }
.hero h1 { font-size: 1.72rem; line-height: 1.15; margin: 0 0 10px; text-transform: uppercase; }
.hero .lead { color: var(--muted); margin: 0 0 4px; font-size: .95rem; }

.trust-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 16px 0 0;
}
.trust-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--green-wash); color: #0a4d05; border: 1px solid #cfe3ca;
  border-radius: 999px; padding: 6px 12px; font-size: .8rem; font-weight: 600;
}
.trust-pill svg { width: 15px; height: 15px; flex: none; }

.call-cta {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin-top: 16px; padding: 14px 18px; min-height: 52px;
  background: var(--ink); color: #fff; border-radius: var(--radius);
  text-decoration: none; font-weight: 700;
}
.call-cta:hover { background: #000; }
.call-cta svg { width: 19px; height: 19px; flex: none; }
.call-cta .n { font-family: 'Oswald', sans-serif; font-size: 1.16rem; }

.resume-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 8px; margin-top: 16px; padding: 11px 14px;
  background: var(--green-wash); border: 1px solid #cfe3ca; border-radius: 10px;
  font-size: .86rem; color: #0a4d05;
}
.resume-bar .btn-text {
  background: none; border: 0; color: var(--green); font-weight: 700;
  cursor: pointer; padding: 6px 8px; min-height: 40px; font-size: .86rem;
  text-decoration: underline;
}

/* ---------- progress ---------- */
.progress-wrap { margin: 22px 0 14px; }
.progress-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 8px; font-size: .84rem;
}
.progress-step { font-weight: 700; color: var(--ink); }
.progress-name { color: var(--muted); }
.progress-track { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--green); border-radius: 999px; transition: width .28s ease; }

/* ---------- card / steps ---------- */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 20px 18px; box-shadow: var(--shadow);
}
.step[hidden] { display: none; }
.step h2 { font-size: 1.22rem; margin: 0 0 4px; text-transform: uppercase; }
.step .step-sub { color: var(--muted); font-size: .88rem; margin: 0 0 18px; }

fieldset { border: 0; padding: 0; margin: 0 0 20px; }
fieldset:last-of-type { margin-bottom: 0; }
legend { padding: 0; font-size: .92rem; font-weight: 600; margin-bottom: 10px; }
.req { color: var(--danger); }
.opt { color: var(--muted); font-weight: 400; font-size: .86rem; }

.field { margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.field > label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: 6px; }
.field input, .field textarea, .field select {
  width: 100%; background: #fff; border: 1px solid var(--field-border);
  border-radius: 10px; padding: 13px 14px; min-height: 50px; color: var(--ink);
}
.field textarea { min-height: 80px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: #6c7480; }
.hint { font-size: .8rem; color: var(--muted); margin-top: 5px; }

/* radios as tappable cards - 50px min target, no reliance on the dot alone */
.radio-group { display: grid; gap: 9px; }
.radio-row {
  display: flex; align-items: flex-start; gap: 11px;
  border: 1px solid var(--field-border); border-radius: 10px;
  padding: 13px 14px; min-height: 50px; cursor: pointer; background: #fff;
  font-size: .93rem;
}
.radio-row:hover { border-color: var(--green); }
.radio-row input { margin: 2px 0 0; width: 20px; height: 20px; flex: none; accent-color: var(--green); }
.radio-row:has(input:checked) { border-color: var(--green); background: var(--green-wash); box-shadow: inset 0 0 0 1px var(--green); }
.other-field { margin-top: 9px; }

/* vehicle picker - art on top, control row underneath.
   The radio used to be absolutely positioned over the top-left of the drawing,
   so it sat ON the vehicle and read as a rendering fault. Art and control now
   occupy separate rows and cannot collide at any width. */
.vehicle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vehicle-grid-3 { grid-template-columns: repeat(3, 1fr); }
.vehicle-tile {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1px solid var(--field-border); border-radius: 12px;
  padding: 14px 8px 12px; background: #fff; cursor: pointer;
  font-weight: 600; font-size: .92rem; text-align: center;
}
/* Inlined, not <img>: an SVG loaded through <img> is an isolated document, so
   currentColor never sees this page's colour and the selected-state change
   below could never have fired. */
.vehicle-tile svg {
  width: 100%; max-width: 104px; height: auto; display: block;
  color: var(--slate);
}
.vehicle-tile .vt-row { display: flex; align-items: center; gap: 8px; }
.vehicle-tile input {
  width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--green);
}
.vehicle-tile:hover { border-color: var(--green); }
.vehicle-tile:has(input:checked) {
  border-color: var(--green); background: var(--green-wash);
  box-shadow: inset 0 0 0 1px var(--green);
}
.vehicle-tile:has(input:checked) svg { color: var(--green); }
.vehicle-tile:has(input:focus-visible) { outline: 3px solid var(--green); outline-offset: 2px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 10px; padding: 15px 20px; min-height: 54px;
  font-weight: 700; cursor: pointer; border: 1px solid transparent; font-size: 1rem;
}
.btn-primary { background: var(--green); color: #fff; border-color: var(--green); }
.btn-primary:hover { background: var(--green-press); border-color: var(--green-press); }
.btn-ghost { background: #fff; color: var(--ink); border-color: var(--field-border); }
.btn-ghost:hover { background: var(--bg); }
.btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn svg { width: 17px; height: 17px; }
/* An author `display` beats the UA's `[hidden] { display: none }`, so without
   this every nav button renders at once and Back/Send show on step 1. Applies
   to any element here that sets its own display. */
[hidden] { display: none !important; }

.step-nav { display: flex; gap: 10px; margin-top: 22px; }
.step-nav .btn { flex: 1; }
.step-nav .btn-ghost { flex: 0 0 34%; }

/* ---------- consent + messages ---------- */
.consent {
  display: flex; gap: 11px; align-items: flex-start;
  border: 1px solid var(--line); border-radius: 10px; padding: 13px 14px;
  background: var(--bg); margin-top: 18px; font-size: .84rem; color: var(--slate);
}
.consent input { width: 20px; height: 20px; flex: none; margin: 1px 0 0; accent-color: var(--green); }

.msg { font-size: .9rem; color: var(--danger); margin-top: 14px; text-align: center; font-weight: 500; }
.msg:empty { margin: 0; }
.msg.ok { color: var(--ok); }
.field-error { color: var(--danger); font-size: .82rem; margin-top: 5px; font-weight: 500; }
.field.invalid input, .field.invalid select, .field.invalid textarea,
fieldset.invalid .radio-row { border-color: var(--danger); }

.disclosure { font-size: .77rem; color: var(--muted); margin-top: 16px; }

/* ---------- success ---------- */
.success-card { text-align: center; }
.success-mark {
  width: 58px; height: 58px; margin: 0 auto 14px; border-radius: 50%;
  background: var(--green-wash); display: grid; place-items: center;
}
.success-mark svg { width: 30px; height: 30px; color: var(--green); }
.success-card h2 { margin: 0 0 8px; text-transform: uppercase; }
.next-steps { text-align: left; margin: 18px 0 0; padding: 0; list-style: none; }
.next-steps li {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 11px 0; border-top: 1px solid var(--line); font-size: .9rem;
}
.next-steps .n {
  flex: none; width: 25px; height: 25px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center;
  font-size: .8rem; font-weight: 700;
}

/* ---------- footer ---------- */
.site-footer {
  text-align: center; margin-top: 26px; padding-top: 20px;
  border-top: 1px solid var(--line); color: var(--muted); font-size: .85rem;
}
.site-footer .dealer-name { font-family: 'Oswald', sans-serif; font-weight: 600; color: var(--ink); margin: 0 0 6px; font-size: 1.02rem; text-transform: uppercase; }
.site-footer address { font-style: normal; margin-bottom: 8px; }
.site-footer p { margin: 0 0 6px; }

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

/* =====================================================================
   DESKTOP (>=900px)
   Their real site runs copy on the left and the lead form on the right,
   so this mirrors that rather than stretching the phone column. The hero
   becomes a sticky rail that stays put while the six steps scroll beside
   it, which keeps the phone number on screen the whole way through.
   ===================================================================== */
@media (min-width: 900px) {
  .topbar-in { max-width: 1120px; min-height: 72px; }
  .logo { height: 38px; }

  main {
    max-width: 1120px;
    display: grid;
    grid-template-columns: minmax(320px, 400px) minmax(0, 1fr);
    grid-template-areas:
      "hero form"
      "hero success"
      "foot foot";
    align-items: start;
    gap: 0 48px;
    padding: 40px 24px 56px;
  }

  .hero {
    grid-area: hero;
    position: sticky; top: 104px;
    text-align: left; margin: 0;
  }
  .hero h1 { font-size: 2.55rem; }
  .hero .lead { font-size: 1.06rem; max-width: 34ch; }
  .trust-row { justify-content: flex-start; }
  .call-cta { margin-top: 22px; }

  /* The mobile progress bar sits above the card; on desktop it belongs
     with the form column, so pull it into the same grid cell. */
  .progress-wrap { grid-area: form; align-self: start; margin: 0 0 14px; }
  #leadForm { grid-area: form; margin-top: 62px; padding: 30px 32px; }
  .success-card { grid-area: success; padding: 34px 32px; }

  .step h2 { font-size: 1.5rem; }
  .step .step-sub { font-size: .95rem; }

  /* Two-up the short fields so the column is not one long ribbon. */
  .step[data-step="1"] { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .step[data-step="1"] > h2,
  .step[data-step="1"] > .step-sub { grid-column: 1 / -1; }
  .step[data-step="1"] .field:nth-of-type(5),
  .step[data-step="1"] .field:nth-of-type(6) { grid-column: auto; }

  .vehicle-grid { grid-template-columns: repeat(3, 1fr); }
  .vehicle-tile img { max-width: 100%; }

  .step-nav { justify-content: flex-end; }
  .step-nav .btn { flex: 0 0 auto; min-width: 168px; }
  .step-nav .btn-ghost { flex: 0 0 auto; min-width: 130px; }

  .site-footer { grid-area: foot; margin-top: 44px; }
}

/* Wide desktop - let the form breathe a little more. */
@media (min-width: 1180px) {
  main { gap: 0 72px; }
  .hero h1 { font-size: 2.9rem; }
}

.consent-note { font-size: .88rem; color: var(--ink); margin: 18px 0 8px; font-weight: 500; }

/* ---------- bring-list on the success card (display only) ---------- */
.doc-card {
  margin-top: 20px; padding: 16px 16px 14px; text-align: left;
  background: var(--green-wash); border: 1px solid #cfe3ca; border-radius: 12px;
}
.doc-card h3 { margin: 0 0 3px; font-size: 1.05rem; text-transform: uppercase; }
.doc-card .small { font-size: .84rem; }
.doc-list { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 9px; }
.doc-list li { display: flex; align-items: flex-start; gap: 10px; font-size: .93rem; font-weight: 500; }
.doc-tick {
  flex: none; width: 18px; height: 18px; margin-top: 2px; border-radius: 4px;
  border: 2px solid var(--green); background: #fff;
}
.doc-note { margin: 14px 0 0; }

/* ---------- wordmark ----------
   Built from live text in the Oswald face already loaded, not an image, so it
   stays crisp at any size and needs no raster asset. The mark is an original
   drawing: a dashed road curving into a wheel. */
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  text-decoration: none; color: var(--ink);
}
.wm-mark { width: 30px; height: 30px; flex: none; color: var(--green); }
.wm-txt {
  font-family: 'Oswald', sans-serif; font-weight: 700; text-transform: uppercase;
  letter-spacing: .015em; line-height: 1; font-size: 1.08rem; white-space: nowrap;
}
.wm-a { color: var(--ink); }
.wm-b { color: var(--green); }

@media (min-width: 900px) {
  .wm-mark { width: 36px; height: 36px; }
  .wm-txt { font-size: 1.3rem; }
}

.footer-tel { font-family: 'Oswald', sans-serif; font-size: 1.14rem; font-weight: 600; margin: 4px 0 0; }
.footer-tel a { text-decoration: none; }