/* Hero theme — fast-rates.com (FUNNEL_THEME=hero), 2026-10-08.
   Modelled on yourautosavings.net at Rolf's request; measurements taken from its computed styles
   at desktop width and from the iOS simulator at phone width. Loaded AFTER funnel.css, so it only
   has to state what differs. Every rule is scoped under body.theme-hero. */

.theme-hero {
  --hero-blue: rgb(38, 68, 136);   /* sampled from the reference band */
  --hero-ink: #4c4c4c;
  --hero-cta: #00c25f;
  --hero-cta-dark: #00a851;
  --hero-fill: #4097ff;
  --hero-track: #f0f0f0;
  --hero-muted: #747474;
  font-family: "Open Sans", -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;
  color: var(--hero-ink);
  background: #fff;
}

/* ---------- top bar: logo left, tagline right ---------- */
.theme-hero .hero-top { height: 72px; display: flex; align-items: center; }
.theme-hero .hero-top__inner {
  width: 100%; max-width: 975px; margin: 0 auto; padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.theme-hero .hero-top__logo { display: block; line-height: 0; text-decoration: none; }
.theme-hero .hero-top__logo img { display: block; height: 34px; width: auto; }
.theme-hero .hero-top__logo--text { line-height: 1; font-size: 24px; font-weight: 700; color: var(--hero-blue); }
.theme-hero .hero-top__tagline {
  margin: 0; font-size: 18px; line-height: 18px; font-weight: 600; font-style: italic; color: var(--hero-ink);
}

/* ---------- hero band ---------- */
.theme-hero .hero-band {
  height: 270px;
  padding: 55px 16px 0;
  text-align: center;
  /* The reference ships a pre-tinted photo; ours is tinted here so the source stays untouched. */
  background:
    linear-gradient(rgba(38, 68, 136, 0.86), rgba(38, 68, 136, 0.86)),
    url("img/hero-audi-rs6-1920.jpg") center / cover no-repeat,
    var(--hero-blue);
}
.theme-hero .hero-band__tagline { display: none; }
.theme-hero .hero-band__title {
  margin: 0; font-size: 40px; line-height: 48px; font-weight: 700; color: #fff;
}

/* ---------- card overlapping the band ---------- */
.theme-hero .hero-main { padding: 0 16px; }
.theme-hero .hero-card {
  position: relative;
  max-width: 776px;
  margin: -120px auto 0;
  padding: 40px 70px 75px;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 0 8px 2px rgba(0, 0, 0, 0.1);
  text-align: center;
}
/* The small band-coloured notch at the top centre of the card. */
.theme-hero .hero-card::before {
  content: ""; position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  border-left: 10px solid transparent; border-right: 10px solid transparent;
  border-top: 10px solid var(--hero-blue);
}

.theme-hero .hero-progress__label {
  margin: 0 0 6px; font-size: 16px; line-height: 22px; letter-spacing: 0.5px; color: var(--hero-ink);
}
.theme-hero .hero-progress {
  height: 16px; border-radius: 15px; background: var(--hero-track); overflow: hidden; text-align: left;
}
.theme-hero .hero-progress span {
  display: block; height: 100%; width: 4%; min-width: 25px;
  border-radius: 15px 0 0 15px;
  background:
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.28) 0 4px, transparent 4px 8px),
    var(--hero-fill);
}

.theme-hero #zip-form { display: flex; flex-direction: column; align-items: center; }
.theme-hero .hero-q {
  display: block; margin: 55px 0 20px; font-size: 24px; line-height: 30px; font-weight: 600; color: var(--hero-ink);
}
.theme-hero .hero-input {
  width: 386px; max-width: 100%; height: 65px;
  padding: 0 40px 0 20px;
  font: 400 18px/1 "Open Sans", -apple-system, Helvetica, Arial, sans-serif;
  color: #000; text-align: left;
  background: #fff;
  border: 1px solid #dbdbdb; border-radius: 5px;
  box-shadow: inset 0 0 5px 2px rgba(0, 0, 0, 0.1);
  outline: none;
}
.theme-hero .hero-input::placeholder { color: #757575; }
.theme-hero .hero-input:focus { border-color: var(--hero-fill); }
.theme-hero .hero-cta {
  width: 386px; max-width: 100%; height: 65px; margin-top: 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 18px;
  font: 700 26px/1 "Open Sans", -apple-system, Helvetica, Arial, sans-serif;
  color: #fff; background: var(--hero-cta);
  border: 0; border-radius: 5px; cursor: pointer;
}
.theme-hero .hero-cta:hover { background: var(--hero-cta-dark); }
.theme-hero .hero-cta__chev { width: 10px; height: 16px; }
.theme-hero .zip-error { margin-top: 12px; }
.theme-hero .zip-hint { margin-top: 8px; font-size: 14px; color: var(--hero-muted); }

/* ---------- provider row ---------- */
.theme-hero .providers { max-width: 1040px; margin: 55px auto 0; text-align: center; }
.theme-hero .providers__title {
  display: flex; align-items: center; gap: 12px; margin: 0;
  font-size: 18px; line-height: 20px; font-weight: 600; letter-spacing: 0.5px; color: #202020;
}
.theme-hero .providers__title::before,
.theme-hero .providers__title::after {
  content: ""; flex: 1; height: 1px;
}
.theme-hero .providers__title::before { background: linear-gradient(to right, transparent, #d0d0d0); }
.theme-hero .providers__title::after { background: linear-gradient(to left, transparent, #d0d0d0); }
.theme-hero .providers__row {
  list-style: none; max-width: 1040px; margin: 10px auto 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
}
/* The SVGs carry their own white padding (a 100px-tall canvas), so the row needs no vertical gap. */
.theme-hero .providers__row li { padding: 0 12px; }
.theme-hero .providers__row img { display: block; width: 135px; max-width: 100%; height: auto; }

/* ---------- footer: centred legal row with | separators ---------- */
.theme-hero .site-footer--hero {
  margin-top: 45px; padding-top: 30px; border-top: 1px solid #c6c6c6; text-align: center; background: #fff;
}
.theme-hero .legal-row {
  list-style: none; margin: 0 auto; padding: 0 16px;
  display: flex; flex-wrap: wrap; justify-content: center; row-gap: 6px;
}
.theme-hero .legal-row li { font-size: 16px; line-height: 22px; letter-spacing: 0.5px; color: var(--hero-muted); }
.theme-hero .legal-row li + li::before { content: "|"; margin: 0 10px; color: var(--hero-muted); }
.theme-hero .legal-row a { color: var(--hero-muted); text-decoration: none; }
.theme-hero .legal-row a:hover { text-decoration: underline; }
.theme-hero .legal-copyright {
  margin: 10px 0 0; font-size: 15px; letter-spacing: 0.5px; color: var(--hero-muted);
}
.theme-hero .site-footer--hero .disclaimer { color: var(--hero-muted); font-size: 12px; padding-top: 18px; }

/* ---------- phones ---------- */
@media (max-width: 640px) {
  .theme-hero .hero-top { height: 64px; }
  .theme-hero .hero-top__inner { justify-content: center; }
  .theme-hero .hero-top__tagline { display: none; }
  .theme-hero .hero-top__logo img { height: 30px; }

  .theme-hero .hero-band {
    height: auto; padding: 26px 16px 70px;
    background:
      linear-gradient(rgba(38, 68, 136, 0.86), rgba(38, 68, 136, 0.86)),
      url("img/hero-audi-rs6-960.jpg") center / cover no-repeat,
      var(--hero-blue);
  }
  .theme-hero .hero-band__tagline {
    display: block; margin: 0 0 4px; font-size: 14px; font-weight: 600; font-style: italic; color: #fff;
  }
  .theme-hero .hero-band__title { font-size: 24px; line-height: 30px; }

  .theme-hero .hero-main { padding: 0 10px; }
  .theme-hero .hero-card { margin-top: -44px; padding: 26px 24px 30px; border-radius: 20px; }
  .theme-hero .hero-progress__label { font-size: 17px; margin-bottom: 10px; }
  .theme-hero .hero-q { margin: 34px 0 20px; font-size: 22px; }
  .theme-hero .hero-input, .theme-hero .hero-cta { width: 100%; }

  .theme-hero .providers { margin-top: 36px; }
  .theme-hero .providers__title { font-size: 14px; gap: 8px; }
  /* Measured off the reference on the iOS simulator: ~90pt logos, three to a row, with air
     between them (its 120px rule is capped by a narrower padded column). */
  .theme-hero .providers__row { row-gap: 6px; }
  .theme-hero .providers__row li { flex: 0 0 30%; padding: 0 4px; display: flex; justify-content: center; }
  .theme-hero .providers__row img { width: 90px; }

  .theme-hero .legal-row li { font-size: 14px; line-height: 22px; }
  .theme-hero .legal-row li + li::before { margin: 0 7px; }
}