/* Consumer funnel design system: ZIP page + question steps.
   Tokens mirror the DriveSmart reference build so every vertical shares one look. */

:root {
  --ink: #263238;        /* buttons, borders, footer */
  --navy: #121d41;       /* card + heading text */
  --accent: #6864f7;     /* progress fill + % bubble (the only accent) */
  --line: #8f8f8f;       /* input borders */
  --track: #f9f9f9;      /* progress track */
  --cta: #78be43;        /* ZIP page call-to-action */
  --cta-dark: #6aa93a;
  --shadow: 4px 4px 6px 0 rgba(0, 0, 0, 0.1);
  --shadow-in: 2px 2px 27px 0 rgba(20, 18, 88, 0.5) inset;
}

* { box-sizing: border-box; }

/* Our cards/pills set `display: flex`, which outranks the UA's `[hidden] { display: none }`
   — so hiding one via the `hidden` attribute silently does nothing without this. */
[hidden] { display: none !important; }

body {
  margin: 0;
  padding: 0;
  font-family: "Montserrat", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  font-size: 18px;
  color: #666;
  background: #fff;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ---------- header ---------- */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 40px;
}
.site-header .brand {
  font-size: 26px;
  font-weight: 800;
  color: var(--navy);
  text-decoration: none;
  letter-spacing: -0.5px;
}
.site-header .brand span { color: var(--accent); }
/* Unbranded mode: no wordmark. The header still reserves the wordmark's height so the
   page doesn't jump upward and change the layout every other page was designed around. */
.site-header .brand-blank { display: block; height: 34px; }
/* Image wordmark. Height matches .brand-blank exactly so swapping between text brand, logo
   and blank leaves the header the same height and nothing below it moves. */
.site-header .brand-logo { display: block; line-height: 0; }
.site-header .brand-logo img { display: block; height: 34px; width: auto; }

/* Centred-wordmark header: the logo sits above the ZIP card rather than in the top-left corner.
   Applied only where SITE_LOGO_IMAGE is set (see funnel_base.html), so the boxes running the
   text brand or no brand at all keep the original left-aligned header untouched.

   GRID, not justify-content:center, because this header can hold a SECOND child: funnel.html
   fills {% block header_right %} with the "Previous Question" button. Centring a flex row would
   centre the pair together and drag the logo off-axis. Three columns keep the wordmark centred
   on the page — that is, aligned with the centred card below it — whether or not the button is
   there, and park the button on the right. The taller wordmark deliberately breaks the 34px
   .brand-blank parity: nothing else shares this header. */
.site-header--logo {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 16px 40px 41px;
}
.site-header--logo .brand { grid-column: 2; }
.site-header--logo > :not(.brand) { grid-column: 3; justify-self: end; }
/* Measured against the reference, not guessed: there the wordmark's INK is 0.2270 x the card
   width, and our card is at its 795px max, so the ink must be 180.5px wide.

   Why 52.5 and not 46: zip-coverage-logo.svg does not fill its own viewBox. The artwork sits
   inside about 12% of internal padding, so a box 46px tall paints only ~40.5px of visible logo
   and measured 0.1990 of the card — 12% short. 52.5px puts the INK at 0.2270. Sizing this by
   the box rather than the ink is the easy mistake; measure the rendered pixels.

   The 16px above and 41px below are the reference's 19.5/44.6 gaps minus the SVG's own internal
   padding at this size (~3.2px each side), so the visible spacing matches too. */
.site-header--logo .brand-logo img { height: 52.5px; }

/* ---------- footer ---------- */
.site-footer { margin-top: auto; }
.footer-nav {
  background: var(--ink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 24px 40px;
}
.footer-nav ul { display: flex; flex-wrap: wrap; gap: 20px; list-style: none; margin: 0; padding: 0; }
.footer-nav a { color: #fff; text-decoration: none; font-size: 17px; }
.footer-nav a:hover { text-decoration: underline; }
.footer-nav .copyright { font-size: 17px; }
.disclaimer {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 40px 40px;
  font-size: 13px;
  line-height: 1.6;
  color: #444;
  text-align: center;
}

/* ================= ZIP PAGE ================= */
.zip-main { flex: 1; display: flex; justify-content: center; padding: 0 20px; }
.zip-card {
  width: 100%;
  max-width: 795px;
  border: 1px solid #e8e8e8;
  border-radius: 4px;
  padding: 56px 24px 72px;
  text-align: center;
}
.zip-card .title {
  font-size: 32px;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.3;
}
.zip-card .sub-title {
  font-size: 28px;
  font-weight: 700;
  color: var(--navy);
  margin-top: 4px;
}
/* Carrier/partner badge above the ZIP field — MOBILE PHONES ONLY.
   Hidden by default, so desktop and tablets never render it and every non-phone viewport
   fails closed. It is revealed by exactly one media query further down:
     (max-width: 767px)  excludes tablets — iPad portrait starts at 768px
     (pointer: coarse)   excludes a desktop browser resized narrow, which width alone lets in
   The <img> is loading="lazy", so while the box is display:none the file is never fetched —
   desktop does not download an image it will not show. */
.zip-badge { display: none; }
.zip-badge img {
  display: block;
  width: 100%;
  max-width: 240px;
  height: auto;
  margin: 0 auto;
}

.zip-card .label-input {
  display: block;
  margin: 56px 0 16px;
  font-size: 22px;
  font-weight: 500;
  color: var(--navy);
}
.zip-card input[name="zip"] {
  width: 326px;
  max-width: 100%;
  height: 60px;
  font-size: 26px;
  font-weight: 400;
  text-align: center;
  color: #000;
  border: 1px solid var(--line);
  border-radius: 6px;
  outline: none;
}
.zip-card input[name="zip"]:focus { border-color: var(--accent); }
/* Hint shown only under a ZIP we guessed from the visitor's IP. Deliberately quiet — it must
   not compete with the CTA — but present, because the guess is wrong often enough that a
   visitor needs to know it is editable. */
.zip-hint {
  margin: 10px auto 0;
  font-size: 14px;
  color: #6b7280;
}
.btn-cta {
  display: block;
  margin: 32px auto 0;
  padding: 16px 34px;
  font-family: inherit;
  font-size: 24px;
  font-weight: 700;
  color: #fff;
  background: var(--cta);
  border: none;
  border-radius: 6px;
  box-shadow: 0 4px 0 var(--cta-dark);
  cursor: pointer;
}
.btn-cta:hover { background: var(--cta-dark); }
.btn-cta:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--cta-dark); }
.zip-error { margin-top: 18px; color: #c62828; font-size: 15px; font-weight: 600; }

/* ================= QUESTION FLOW ================= */
.flow-header { padding: 0; }  /* the progress bar runs full-bleed */
.back-step { display: flex; justify-content: flex-end; }
.back-button {
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
  background: none;
  color: var(--navy);
  font-family: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}
.back-button:disabled { visibility: hidden; }

/* progress bar: track + fill + % bubble + the car riding the leading edge */
.skill-wrap { position: relative; margin: 28px 0 0; }
.skill-bar { height: 14px; background: var(--track); position: relative; }
.skill-per {
  height: 14px;
  width: 0;
  background: var(--accent);
  border-radius: 0 20px 20px 0;
  position: relative;
  transition: width 1s linear;
}
.skill-per::before {
  content: attr(data-per) "%";
  position: absolute;
  top: -14px;
  right: 15px;
  transform: translateX(50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-size: 12px;
  border-radius: 25px;
}
.skill-per::after {
  content: "";
  position: absolute;
  top: -38px;
  right: 34px;
  width: 56px;
  height: 40px;
  background-image: url("./img/car-progress.gif");
  background-position: left center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* steps: only the active one renders */
.step { display: none; }
.step.active { display: block; }

.section-heading {
  text-align: center;
  text-transform: uppercase;
  font-size: 29px;
  font-weight: 700;
  line-height: 43px;
  color: #000;
  padding-top: 40px;
  margin: 0;
}
.section-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 10px;
  font-size: 17px;
  color: #333;
}

.step-body { margin: 0 auto; padding: 20px; width: 100%; }
.step-body.w-narrow { max-width: 400px; }
.step-body.w-mid { max-width: 704px; }
.step-body.w-wide { max-width: 880px; }
.step-body.w-full { max-width: 1120px; }

/* icon cards */
.card-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.card-grid .choice-card {
  min-width: 168px;
  max-width: 178px;
  min-height: 120px;
  padding: 12px 24px;
  border: 0.5px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  color: var(--navy);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  text-transform: uppercase;
  font-weight: 500;
  font-size: 16px;
  text-decoration: none;
  cursor: pointer;
}
.card-grid .choice-card img { max-width: 100%; height: auto; }
.card-grid .choice-card:hover,
.card-grid .choice-card.selected { box-shadow: var(--shadow-in); }

/* text pills */
.pill-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px 14px; }
.pill-grid .choice-pill {
  min-width: 182px;
  max-width: 182px;
  min-height: 56px;
  padding: 12px 20px;
  border: 0.5px solid rgba(0, 0, 0, 0.8);
  border-radius: 6px;
  background: #fff;
  color: var(--navy);
  box-shadow: 4px 4px 5px 0 rgba(38, 50, 56, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-transform: uppercase;
  font-size: 17px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
}
.pill-grid .choice-pill:hover,
.pill-grid .choice-pill.selected { box-shadow: var(--shadow-in); }

/* yes/no rows (the "tell us about yourself" step) */
.yesno-rows { max-width: 400px; margin: 0 auto; }
.yesno-row { margin-bottom: 12px; }
.yesno-row .row-label {
  font-size: 17px;
  font-weight: 700;
  color: #000;
  margin-bottom: 6px;
}
.yesno-row .pill-grid { justify-content: flex-start; gap: 16px; }
.yesno-row .choice-pill { min-width: 180px; max-width: 180px; }

/* the vehicles added so far, shown on the "another vehicle?" step */
.vehicle-list { list-style: none; margin: 24px auto 8px; padding: 0; max-width: 420px; }
.vehicle-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  margin-bottom: 8px;
  background: #f2f3f3;
  border-radius: 6px;
  font-size: 15px;
  color: var(--navy);
}
.vehicle-list .vehicle-num {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}
.vehicle-max { text-align: center; margin-top: 18px; font-size: 15px; color: #666; }

/* inputs */
.field { position: relative; margin-top: 18px; flex: 1 1 200px; }
.field label {
  position: absolute;
  top: -8px;
  left: 11px;
  padding: 0 4px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  line-height: 18px;
  font-weight: 500;
  text-transform: uppercase;
}
.field input,
.field select {
  width: 100%;
  height: 55px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  color: #000;
  font-family: inherit;
  font-size: 17px;
  outline: none;
}
.field input:focus,
.field select:focus { border-color: var(--accent); }
.field.invalid input,
.field.invalid select { border-color: #c62828; }
.field-row { display: flex; flex-wrap: wrap; gap: 16px; }

/* phone: three boxes */
.phone-row { display: flex; justify-content: center; gap: 14px; }
.phone-row input {
  width: 142px;
  height: 55px;
  text-align: center;
  border: 1px solid var(--ink);
  border-radius: 6px;
  font-family: inherit;
  font-size: 20px;
  outline: none;
}
.phone-row input:focus { border-color: var(--accent); }

/* the dark Next / Submit button */
.btn-next {
  display: block;
  margin: 32px auto 0;
  min-width: 254px;
  padding: 16px 24px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
}
.btn-next:hover { opacity: 0.92; }

.consent-lead {
  margin: 22px auto 0;
  max-width: 900px;
  text-align: center;
  font-size: 14px;
  color: #000;
}
.consent-text {
  margin: 24px auto 0;
  max-width: 960px;
  font-size: 15px;
  line-height: 1.5;
  color: #333;
  text-align: justify;
}
.consent-text a { color: #1a5fb4; }

.err { color: #c62828; font-size: 14px; font-weight: 600; text-align: center; margin-top: 12px; }

/* ================= LEGAL PAGES ================= */
.legal-main { flex: 1; padding: 0 20px; }
.legal-doc {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px 0 64px;
  color: #333;
  font-size: 16px;
  line-height: 1.7;
}
.legal-doc h1 {
  font-size: 30px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 8px;
}
.legal-doc h2 {
  font-size: 19px;
  font-weight: 700;
  color: var(--navy);
  margin: 34px 0 10px;
}
.legal-doc h3 {
  font-size: 16px;
  font-weight: 600;
  color: var(--navy);
  margin: 20px 0 8px;
}
.legal-doc p, .legal-doc li { margin: 0 0 12px; }
.legal-doc ul, .legal-doc ol { padding-left: 22px; }
.legal-doc a { color: #1a5fb4; }
.legal-meta { font-size: 14px; color: #777; }
.legal-rule { border: 0; border-top: 1px solid #e8e8e8; margin: 36px 0 20px; }
.legal-contact { line-height: 2; }
.legal-partners { columns: 2; column-gap: 40px; margin: 12px 0; }
.legal-partners li { break-inside: avoid; margin-bottom: 6px; }
@media (max-width: 560px) { .legal-partners { columns: 1; } }

/* "Being finalised" notice — shown until LEGAL_REVIEWED=true. Informative, not alarming:
   these are the site's actual published policies, so the notice must not undermine them. */
.legal-draft {
  border: 1px solid #e0c46a;
  background: #fdf6e3;
  color: #6b5510;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 28px;
  font-size: 15px;
}

/* An unfilled fact in a legally operative document. Must never ship unnoticed. */
mark.todo {
  background: #ffe08a;
  color: #6b4b00;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  white-space: nowrap;
}

/* Internal notes. NOT used on published pages — the drafting commentary was moved out of the
   templates into the compliance checklist when these went live. Kept for local drafting only. */
.legal-note {
  border-left: 4px solid var(--accent);
  background: #f5f5ff;
  padding: 12px 16px;
  margin: 16px 0 22px;
  font-size: 14px;
  color: #444;
}
.legal-note ul { margin-top: 8px; }

/* privacy request form (/do-not-sell) */
.privacy-form { margin: 18px 0 8px; }
.privacy-form fieldset { border: 1px solid #e0e0e0; border-radius: 6px; padding: 14px 18px; margin: 0 0 18px; }
.privacy-form legend { font-weight: 700; color: var(--navy); padding: 0 6px; font-size: 15px; }
.radio-row { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 10px; font-size: 15px; cursor: pointer; }
.radio-row input { margin-top: 4px; flex: 0 0 auto; }
.privacy-hint { font-size: 14px; color: #666; }
.privacy-form .btn-next { margin: 24px 0 0; min-width: 220px; }
.privacy-error { color: #c62828; font-weight: 600; font-size: 15px; margin-bottom: 12px; }
.legal-ok {
  border: 1px solid #7cb342;
  background: #f1f8e9;
  color: #33691e;
  border-radius: 6px;
  padding: 14px 18px;
  margin-bottom: 24px;
  font-size: 15px;
}

/* ================= OFFER WALL (the click wall) ================= */
.wall-main { flex: 1; }
.offer-list { list-style: none; margin: 32px 0 0; padding: 0; }
.offer-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  margin-bottom: 14px;
  border: 0.5px solid var(--ink);
  border-radius: 6px;
  background: #fff;
  box-shadow: var(--shadow);
}
.offer-row:hover { box-shadow: var(--shadow-in); }
.offer-info { display: flex; flex-direction: column; gap: 4px; }
.offer-name { font-size: 18px; font-weight: 600; color: var(--navy); }
.offer-meta { font-size: 13px; color: #777; text-transform: uppercase; letter-spacing: 0.4px; }
.btn-offer {
  flex: 0 0 auto;
  padding: 12px 26px;
  background: var(--ink);
  color: #fff;
  border-radius: 6px;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
.btn-offer:hover { opacity: 0.92; }
.wall-empty { text-align: center; margin-top: 40px; color: #666; }

@media (max-width: 767px) {
  .site-header, .flow-header { padding-left: 20px; padding-right: 20px; }
  .site-header--logo { padding: 20px 20px 28px; }
  .site-header--logo .brand-logo img { height: 38px; }
  .section-heading { font-size: 22px; line-height: 32px; padding-top: 24px; }
  .zip-card { padding: 36px 16px 48px; }
  .zip-card .title { font-size: 24px; }
  .zip-card .sub-title { font-size: 21px; }
  .footer-nav { padding: 20px; }
  .phone-row input { width: 92px; }
  .card-grid .choice-card { min-width: 140px; }
}

/* ---- phones only: reveal the ZIP badge (see .zip-badge above) ---- */
@media (max-width: 767px) and (pointer: coarse) {
  .zip-badge {
    display: block;
    margin: 10px auto 0;
    max-width: 240px;
  }
  .zip-badge img { max-width: 200px; }
  /* Reclaim the vertical space the badge costs. iOS autofocuses the ZIP field, so the keypad
     is up before the lead does anything, leaving roughly 430pt of usable height. Verified in
     the iOS 26 simulator: at the stock 56px label margin the badge pushed "Get Quotes Now"
     underneath the keyboard. Only applies where a badge exists, so the other two brands keep
     the original spacing. */
  .zip-badge ~ form .label-input { margin-top: 20px; }
}