/* ==========================================================================
   LegitRate — design system
   Every colour, radius and type step lives in :root. Nothing below :root
   introduces a raw hex. Edit tokens here, the whole site follows.
   ========================================================================== */

:root {
  /* ── brand palette ───────────────────────────────────────────────── */
  --green:      #04694B;   /* primary: headlines, wordmark, primary buttons */
  --mint:       #86BB99;   /* secondary: accents, highlight fills, focus     */
  --offwhite:   #F6F5EF;   /* page background                                */
  --sand:       #EDEBE3;   /* section panels, cards                          */
  --charcoal:   #1F2937;   /* body text                                      */
  --amber:      #F2B233;   /* optional high-contrast CTA — see .cta-amber    */
  --white:      #FFFFFF;

  /* ── derived (never hand-picked) ─────────────────────────────────── */
  --green-deep: color-mix(in srgb, var(--green) 82%, var(--charcoal));
  --green-wash: color-mix(in srgb, var(--green) 7%, var(--offwhite));
  --mint-wash:  color-mix(in srgb, var(--mint) 26%, var(--offwhite));
  --ink-60:     color-mix(in srgb, var(--charcoal) 68%, var(--offwhite)); /* 5.0:1 */
  --ink-40:     color-mix(in srgb, var(--charcoal) 46%, var(--offwhite)); /* captions */
  --line:       color-mix(in srgb, var(--charcoal) 14%, var(--offwhite));
  --line-soft:  color-mix(in srgb, var(--charcoal) 8%,  var(--offwhite));
  --slot:       color-mix(in srgb, var(--charcoal) 16%, var(--offwhite));
  --slot-ink:   color-mix(in srgb, var(--charcoal) 32%, var(--offwhite));
  --on-green:   var(--offwhite);
  --on-green-2: color-mix(in srgb, var(--offwhite) 74%, var(--green));

  /* ── type ────────────────────────────────────────────────────────── */
  --font: 'Inter', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --fs-h1:   clamp(34px, 7.2vw, 60px);
  --fs-h2:   clamp(27px, 4.4vw, 40px);
  --fs-h3:   clamp(19px, 2.2vw, 22px);
  --fs-lead: clamp(17px, 2.2vw, 20px);
  --fs-body: 17px;
  --fs-sm:   15px;
  --fs-xs:   13px;
  --fs-btn:  18px;

  /* ── space & shape ───────────────────────────────────────────────── */
  --gutter:   20px;
  --container: 1120px;
  --radius:   10px;
  --radius-sm: 8px;
  --radius-pill: 999px;
  --shadow:   0 1px 0 color-mix(in srgb, var(--charcoal) 9%, transparent);
  --shadow-lift: 0 1px 0 color-mix(in srgb, var(--charcoal) 16%, transparent);
  --tap: 48px;
}

@media (min-width: 640px)  { :root { --gutter: 32px; } }
@media (min-width: 1024px) { :root { --gutter: 40px; } }

/* ── reset & base ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--offwhite);
  color: var(--charcoal);
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
a { color: var(--green); text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; }
p { margin: 0; text-wrap: pretty; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--green);
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); line-height: 1.25; letter-spacing: -0.015em; }

:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--green); color: var(--on-green);
  padding: 10px 16px; border-radius: var(--radius);
  font-weight: 600; transition: top .15s ease;
}
.skip-link:focus { top: 12px; }

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

/* ── layout ────────────────────────────────────────────────────────── */
.wrap {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: clamp(52px, 9vw, 92px); }
.section--tight { padding-block: clamp(36px, 6vw, 60px); }

.panel { background: var(--sand); }
.panel-green { background: var(--green); color: var(--on-green); }
.panel-green h2, .panel-green h3 { color: var(--on-green); }

.eyebrow {
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-60);
  margin-bottom: 14px;
}

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--ink-60);
  max-width: 46ch;
}

.micro { font-size: var(--fs-xs); color: var(--ink-40); line-height: 1.5; }
.num { font-variant-numeric: tabular-nums; letter-spacing: -0.03em; }
.from {
  font-size: .34em;
  font-weight: 700;
  letter-spacing: -0.005em;
  vertical-align: .34em;
  margin-right: .16em;
}

/* ── wordmark (inline SVG — no image request, scales to any size) ──── */
.brand-mark { display: block; }
.lr-legit { fill: var(--green); }
.lr-rate  { fill: var(--mint); }
.panel-green .lr-legit,
.site-footer .lr-legit { fill: var(--offwhite); }

/* ── buttons ───────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: var(--tap);
  padding: 13px 26px;
  border: 2px solid transparent;
  border-radius: var(--radius);
  font-size: var(--fs-btn);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.2;
  text-align: center;
  transition: background-color .16s ease, border-color .16s ease,
              color .16s ease, box-shadow .16s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }

.btn--primary {
  background: var(--green);
  border-color: var(--green);
  color: var(--on-green);          /* 6.2:1 */
  box-shadow: var(--shadow);
}
.btn--primary:hover {
  background: var(--green-deep);   /* darker — contrast rises, never falls */
  border-color: var(--green-deep);
  color: var(--white);
}

.btn--outline {
  background: transparent;
  border-color: var(--green);
  color: var(--green);             /* 6.2:1 on off-white */
}
.btn--outline:hover {
  background: var(--green);
  color: var(--on-green);          /* fg + bg swap in the same rule */
}

/* reversed set — used only inside .panel-green */
.btn--reverse {
  background: var(--offwhite);
  border-color: var(--offwhite);
  color: var(--green);
}
.btn--reverse:hover {
  background: var(--mint);
  border-color: var(--mint);
  color: var(--charcoal);          /* 8.0:1 on mint */
}
.panel-green .btn:focus-visible { outline-color: var(--mint); }

.btn--sm {
  min-height: 40px;
  padding: 9px 16px;
  font-size: var(--fs-sm);
  border-width: 2px;
}
@media (max-width: 639px) { .btn--sm { min-height: 44px; } }

.btn--block { width: 100%; }
@media (max-width: 639px) {
  .btn { width: 100%; font-size: 17px; }
  .btn--sm { width: auto; }
}

/* optional A/B variant: add class="cta-amber" to <body>.
   Amber carries charcoal text (7.7:1); white on amber would fail. */
.cta-amber .btn--ab {
  background: var(--amber);
  border-color: var(--amber);
  color: var(--charcoal);
}
.cta-amber .btn--ab:hover {
  background: color-mix(in srgb, var(--amber) 86%, var(--charcoal));
  border-color: color-mix(in srgb, var(--amber) 86%, var(--charcoal));
  color: var(--charcoal);
}

/* the vertical picker flash when a "Get my rate" button routes here */
/* When a "See my rate" button routes the visitor back here, make the two
   choices unmissable: three expanding rings + a lift on each button.
   JS strips .flagged after ~2.2s. */
.flagged .btn {
  animation: flagPulse 2.1s cubic-bezier(.34, .8, .3, 1) 1;
  position: relative;
  z-index: 1;
}
@keyframes flagPulse {
  0%,  34%, 68%  { box-shadow: 0 0 0 0 color-mix(in srgb, var(--mint) 92%, transparent);
                   transform: translateY(0); }
  17%, 51%, 85%  { box-shadow: 0 0 0 14px color-mix(in srgb, var(--mint) 0%, transparent);
                   transform: translateY(-4px); }
  100%           { box-shadow: var(--shadow); transform: translateY(0); }
}
/* holding ring behind the pair, so the group reads as one choice */
.flagged { border-radius: var(--radius); animation: flagHold 2.1s ease-out 1; }
@keyframes flagHold {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
  12%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 22%, transparent); }
  82%  { box-shadow: 0 0 0 6px color-mix(in srgb, var(--green) 22%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
  .flagged, .flagged .btn { animation: none; }
  .flagged .btn { box-shadow: 0 0 0 4px var(--mint); }
}

/* ── header ────────────────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: color-mix(in srgb, var(--offwhite) 92%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line-soft);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 64px;
  padding-block: 10px;
}
.brand { display: inline-flex; align-items: center; }
.brand .brand-mark { height: 32px; width: auto; }

/* ── header click-to-call (social landing pages only) ───────────────── */
.callbar { display: grid; justify-items: end; gap: 1px; text-align: right; }
.callbar__num {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;              /* tap target; the glyph alone is 16px */
  color: var(--green);           /* 6.2:1 on off-white */
  font-weight: 700;
  font-size: clamp(15px, 3.9vw, 19px);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.callbar__num:hover { color: var(--green-deep); }   /* darker: contrast rises */
.callbar__num svg { width: 16px; height: 16px; flex: none; }
.callbar__hours {
  font-size: 12px;
  line-height: 1.3;
  color: var(--ink-60);          /* 5.0:1 -- readable, not decorative */
  white-space: nowrap;
}
@media (min-width: 640px) {
  .callbar__num svg { width: 18px; height: 18px; }
  .callbar__hours { font-size: 13px; }
}


@media (min-width: 1024px) {
  .site-header__inner { min-height: 76px; }
  .brand .brand-mark { height: 40px; }
}

/* ── hero ──────────────────────────────────────────────────────────── */
.hero { padding-block: clamp(44px, 7vw, 84px) clamp(52px, 8vw, 92px); }
.hero__grid { display: grid; gap: 44px; align-items: center; }
@media (max-width: 1023px) { .hero__grid { gap: 22px; } }

/* Tablet, 640-1023px. The hero is a single column here, and the container
   runs to 1120px - far wider than any element in it. The copy, buttons and
   micro line sat flush left while .ratecard-wrap centred itself with
   margin-inline:auto, so the card floated out of line with everything above
   it. Rather than pick one edge and strand the other, the whole hero block is
   capped and centred, and every child then fills that column: one left edge,
   one right edge, nothing floating. */
@media (min-width: 640px) and (max-width: 1023px) {
  .hero__grid    { max-width: 560px; margin-inline: auto; }
  .hero h1       { max-width: none; }
  .hero .lead    { max-width: none; }
  .picker        { max-width: none; }
  .ratecard-wrap { max-width: none; margin-inline: 0; }
}
@media (min-width: 1024px) {
  .hero__grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 64px; }
}
.hero h1 { max-width: 15ch; }
.hero .lead { margin-top: 20px; }

.picker {
  display: grid;
  border-radius: var(--radius);
  gap: 12px;
  margin-top: 32px;
  max-width: 520px;
}
@media (min-width: 480px) { .picker { grid-template-columns: 1fr 1fr; } }
.picker .btn { padding-block: 17px; font-size: clamp(17px, 2vw, 19px); }
/* width matches .picker above (520px) so the line centres against the two
   buttons, not against the hero column — holds at every breakpoint because
   both boxes collapse to the same width when the column is narrower. */
.hero__micro { margin-top: 14px; max-width: 520px; text-align: center; }

/* ── mobile: pull the fold up onto the rate card ──────────────────────
   On a phone the hero used ~120px more than it needed, which pushed the
   card's payoff row ("Your legit rate") below the fold — you saw the
   header and one grey placeholder row and nothing that sells. Every value
   below is a gap, not content; the H1, the copy and the tap targets are
   untouched (.btn keeps min-height: var(--tap) = 48px). */
@media (max-width: 639px) {
  .hero { padding-block: 16px 32px; }
  .hero__grid { gap: 16px; }
  .hero h1 { font-size: 31px; }          /* still 3 lines, ~10px shorter */
  .hero .lead { margin-top: 12px; }
  .picker { margin-top: 18px; gap: 10px; }
  .picker .btn { padding-block: 14px; }  /* min-height:48px still governs */
  .hero__micro { margin-top: 10px; }

  .ratecard { padding: 14px; }
  .ratecard__head { padding-bottom: 9px; }
  .ratecard__rows { margin-top: 4px; }
  .raterow { padding-block: 10px; }
  .raterow--best { padding-block: 11px; margin-top: 5px; }
  .ratecard__note { margin-top: 8px; font-size: 10px; }
}

/* ── abstract rate card (hero visual) ──────────────────────────────── */
/* the wrap owns the width; the card is now just the panel, and the
   disclaimer sits beneath it instead of eating space inside it */
.ratecard-wrap { max-width: 480px; width: 100%; margin-inline: auto; }
.ratecard {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lift);
  padding: 20px;
}
.ratecard__note {
  margin-top: 10px;
  padding-inline: 2px;
  font-size: 11px;
  line-height: 1.5;
  color: var(--ink-60);          /* 5.0:1 — readable outside the card */
}
@media (min-width: 640px) { .ratecard { padding: 24px; } }

.ratecard__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding-bottom: 14px; border-bottom: 1px solid var(--line-soft);
}
.ratecard__title { font-size: var(--fs-sm); font-weight: 600; color: var(--charcoal); }
/* live mark — replaces the static "Illustration" stamp */
.live {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--green);                         /* 6.2:1 on white */
}
.live__dot {
  width: 7px; height: 7px; flex: none;
  border-radius: var(--radius-pill);
  background: var(--green);
  animation: livePulse 2.4s ease-out infinite;
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 55%, transparent); }
  70%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--green) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--green) 0%, transparent); }
}

/* rolling quote queue — new row enters at the top, stack slides down,
   oldest is clipped off the bottom. Height is locked by JS to 2 rows. */
.ratequeue { overflow: hidden; }
.ratequeue__track { will-change: transform; }
.ratequeue__track.is-sliding {
  transition: transform .42s cubic-bezier(.22, .61, .36, 1);
}
.ratequeue .raterow:first-child { box-shadow: none; }

/* which vertical this quote is for */
.raterow__vert {
  justify-self: start;
  padding: 3px 9px;
  border-radius: var(--radius-pill);
  background: color-mix(in srgb, var(--charcoal) 7%, var(--white));
  color: var(--ink-60);                  /* 4.7:1 on the chip */
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .09em;
  line-height: 1.4;
  text-transform: uppercase;
}

@media (prefers-reduced-motion: reduce) {
  .live__dot { animation: none; }
  .ratequeue__track.is-sliding { transition: none; }
}

.ratecard__stamp {
  font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ink-40);
}

.ratecard__rows { margin-top: 6px; }
.raterow {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  margin-inline: -12px;
  border-radius: var(--radius-sm);
}
.raterow + .raterow { box-shadow: inset 0 1px 0 var(--line-soft); }
.raterow__mark { width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--slot); }
.raterow__bars { display: grid; gap: 7px; }
.raterow__bar { height: 8px; border-radius: var(--radius-pill); background: var(--slot); }
.raterow__bar--short { width: 52%; background: var(--slot-ink); opacity: .55; }
.raterow__price { font-size: 19px; font-weight: 700; color: var(--ink-60); white-space: nowrap; }
.raterow__price span { font-size: 13px; font-weight: 600; color: var(--ink-40); }

.raterow--best {
  background: var(--mint);
  box-shadow: none;
  margin-top: 8px;
  padding-block: 16px;
}
.raterow--best .raterow__mark {
  background: var(--green);
  display: grid; place-items: center;
}
.raterow--best .lr-chip { width: 19px; height: auto; }
.raterow--best .lr-legit { fill: var(--offwhite); }
.raterow--best .lr-rate  { fill: var(--mint); }
.raterow--best .raterow__label {
  font-size: var(--fs-sm); font-weight: 700; color: var(--charcoal); letter-spacing: -0.01em;
}
.raterow--best .raterow__price { color: var(--charcoal); font-size: 22px; }
.raterow--best .from { font-size: 13px; vertical-align: 2px; color: color-mix(in srgb, var(--charcoal) 80%, var(--mint)); }
.raterow--best .raterow__price span { color: color-mix(in srgb, var(--charcoal) 74%, var(--mint)); }

/* 30% down from --fs-xs (13px) at the user's request, to de-emphasise it. */

/* ── proof strip ───────────────────────────────────────────────────── */
.proof { display: grid; gap: 32px; }
.proof__item + .proof__item { border-top: 1px solid var(--line); padding-top: 28px; }

/* 4 stats: 2x2 on tablet, one row on desktop. The divider is a left border,
   suppressed on whichever item starts a row. */
@media (min-width: 640px) {
  .proof { grid-template-columns: repeat(2, 1fr); gap: 30px 26px; }
  .proof__item + .proof__item { border-top: 0; padding-top: 0; }
  .proof__item { border-left: 1px solid var(--line); padding-left: 26px; }
  .proof__item:nth-child(odd) { border-left: 0; padding-left: 0; }
}
@media (min-width: 1024px) {
  .proof { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .proof__item:nth-child(odd) { border-left: 1px solid var(--line); padding-left: 26px; }
  .proof__item:first-child { border-left: 0; padding-left: 0; }
}
.proof__num {
  font-size: clamp(40px, 5.6vw, 54px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
  color: var(--green);
}
.proof__num sup {
  font-size: .38em; font-weight: 700; letter-spacing: -0.01em;
  vertical-align: .58em; margin-left: 3px;
}
/* "Up to" qualifier ahead of the figure */
.proof__pre {
  font-size: .34em; font-weight: 700;
  letter-spacing: -0.005em; vertical-align: .34em; margin-right: .18em;
  color: var(--ink-60);
}
.proof__label { margin-top: 10px; color: var(--ink-60); font-size: var(--fs-sm); max-width: 26ch; }

/* ── how it works ──────────────────────────────────────────────────── */
.steps { display: grid; gap: 36px; margin-top: 44px; counter-reset: step; }
@media (min-width: 768px) { .steps { grid-template-columns: repeat(3, 1fr); gap: 32px; } }
.step { display: grid; gap: 16px; align-content: start; }
.step__top { display: flex; align-items: center; gap: 14px; }
.step__badge {
  flex: none;
  width: 44px; height: 44px;
  border-radius: var(--radius);
  background: var(--green);
  color: var(--on-green);
  display: grid; place-items: center;
  font-size: 17px; font-weight: 800; letter-spacing: -0.02em;
}
.step__icon { color: var(--green); }
.step__icon svg { width: 28px; height: 28px; }
.step p { color: var(--ink-60); max-width: 34ch; }

/* ── savings contrast ──────────────────────────────────────────────── */
.contrast { display: grid; gap: 16px; margin-top: 40px; }
@media (min-width: 768px) { .contrast { grid-template-columns: 1fr 1fr; gap: 20px; } }
.contrast__col {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
}
.contrast__col--now {
  background: color-mix(in srgb, var(--charcoal) 7%, var(--sand));
  border-color: color-mix(in srgb, var(--charcoal) 12%, var(--sand));
  box-shadow: none;
}
.contrast__label {
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-60);
}
.contrast__fig {
  margin-top: 14px;
  font-size: clamp(46px, 8vw, 68px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.045em;
}
.contrast__fig--blur { color: var(--slot-ink); filter: blur(7px); user-select: none; }
.contrast__fig--open { color: var(--green); }
.contrast__fig--open .from { color: var(--ink-60); }
.contrast__cap {
  margin-top: 14px;
  font-size: var(--fs-sm); font-weight: 600;
  color: var(--ink-60); max-width: 30ch;
}
.contrast__note { margin-top: 18px; }
.contrast__kicker {
  margin-top: 26px;
  text-align: center;
  font-size: var(--fs-lead);
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--green);
  max-width: 46ch;
  margin-inline: auto;
}
.contrast__cta { margin-top: 24px; text-align: center; }

/* section-level disclaimer: smaller and centred, but NOT --ink-40.
   --ink-40 on sand is 2.5:1 — illegible, and a rate disclaimer has to stay
   clear and conspicuous. --ink-60 holds 4.6:1 even at 11px. */
.contrast__legal {
  margin: 24px auto 0;
  max-width: 62ch;
  font-size: 11px;
  line-height: 1.6;
  text-align: center;
  color: var(--ink-60);
}

/* ── vertical tiles ────────────────────────────────────────────────── */
.tiles { display: grid; gap: 20px; margin-top: 40px; }
@media (min-width: 768px) { .tiles { grid-template-columns: 1fr 1fr; gap: 24px; } }
.tile {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 24px;
  display: grid;
  gap: 16px;
  align-content: start;
}
@media (min-width: 640px) { .tile { padding: 34px 30px; } }
.tile__icon { color: var(--green); }
.tile__icon svg { width: 32px; height: 32px; }
.tile__icon .accent { color: var(--mint); }
.tile p { color: var(--ink-60); }
.tile .btn { margin-top: 8px; justify-self: start; }
@media (max-width: 639px) { .tile .btn { justify-self: stretch; } }

/* ── carriers ──────────────────────────────────────────────────────── */
.carriers { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; margin-top: 32px; }
@media (min-width: 640px)  { .carriers { grid-template-columns: repeat(3, 1fr); gap: 16px; } }
@media (min-width: 1024px) { .carriers { grid-template-columns: repeat(6, 1fr); } }
.carrier {
  height: 80px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  display: grid;
  place-items: center;
  padding: 12px;
}
/* dark treatment: reversed one-colour marks float on charcoal, no card.
   Swap .panel-dark off the section to get the white-card colour version back. */
.panel-dark { background: var(--charcoal); }
.panel-dark .eyebrow { color: color-mix(in srgb, var(--offwhite) 62%, var(--charcoal)); }
.panel-dark .carrier { background: transparent; border: 0; height: 66px; padding: 8px; }

/* marks are shown as supplied — no filter, no opacity, no recolour.
   --w is set per logo so a wide wordmark and a stacked mark read at
   the same optical weight. */
.carrier img {
  width: var(--w, 100px);
  max-width: 100%;
  height: auto;
  max-height: 42px;
  object-fit: contain;
}

/* ── FAQ ───────────────────────────────────────────────────────────── */
.faq { margin-top: 36px; border-top: 1px solid var(--line); max-width: 780px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q {
  width: 100%;
  min-height: var(--tap);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 20px 0;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
  color: var(--green);
}
.faq__q:hover { color: var(--green-deep); }
.faq__q:focus-visible { outline-offset: -3px; }
.faq__sign {
  flex: none;
  position: relative;
  width: 26px; height: 26px;
  border-radius: var(--radius-sm);
  background: var(--mint-wash);
}
.faq__sign::before, .faq__sign::after {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 11px; height: 2px; border-radius: 2px;
  background: var(--green);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}
.faq__sign::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq__q[aria-expanded="true"] .faq__sign { background: var(--mint); }
.faq__q[aria-expanded="true"] .faq__sign::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }

.faq__a { overflow: hidden; max-height: 0; transition: max-height .26s ease; }
@media (prefers-reduced-motion: reduce) { .faq__a { transition: none; } }
.faq__a p { padding: 0 0 22px; color: var(--ink-60); max-width: 62ch; }

/* ── final CTA band ────────────────────────────────────────────────── */
.band { text-align: center; }
.band .brand-mark { height: 34px; width: auto; margin: 0 auto 26px; }
@media (min-width: 640px) { .band .brand-mark { height: 40px; } }
.band h2 { max-width: 18ch; margin-inline: auto; }
.band__sub { margin-top: 16px; color: var(--on-green-2); font-size: var(--fs-lead); }
.band__cta {
  display: grid; gap: 12px; margin: 32px auto 0; max-width: 480px;
}
.band__micro {
  margin-top: 18px;
  font-size: var(--fs-xs);
  color: color-mix(in srgb, var(--offwhite) 88%, var(--green));   /* 5.1:1 */
}
@media (min-width: 480px) { .band__cta { grid-template-columns: 1fr 1fr; } }

/* ── footer ────────────────────────────────────────────────────────── */
.site-footer { background: var(--charcoal); color: color-mix(in srgb, var(--offwhite) 72%, var(--charcoal)); }
.site-footer__inner { padding-block: 52px; }
.site-footer .brand-mark { height: 30px; width: auto; }
.footer-nav {
  display: flex; flex-wrap: wrap; gap: 10px 26px;
  margin-top: 26px; padding-bottom: 26px;
  border-bottom: 1px solid color-mix(in srgb, var(--offwhite) 18%, var(--charcoal));
}
.footer-nav a {
  color: var(--offwhite);           /* 13.3:1 on charcoal */
  font-size: var(--fs-sm);
  font-weight: 600;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  border-bottom: 2px solid transparent;
}
.footer-nav a:hover { color: var(--mint); border-bottom-color: var(--mint); }
.site-footer :focus-visible { outline-color: var(--mint); }

/* ── footer social row ─────────────────────────────────────────────── */
.social { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 22px; }
.social a {
  /* 44px box so the tap target clears the minimum even though the glyph is 20 */
  display: grid; place-items: center;
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  color: var(--offwhite);          /* 13.3:1 on charcoal */
  transition: color .16s ease, background-color .16s ease;
}
.social a:hover {
  color: var(--mint);
  background: color-mix(in srgb, var(--offwhite) 10%, var(--charcoal));
}
.social svg { width: 20px; height: 20px; display: block; }

.legal { margin-top: 26px; font-size: var(--fs-xs); line-height: 1.65; max-width: 92ch; }
.legal + .legal { margin-top: 16px; }

/* ── inner (legal) pages ───────────────────────────────────────────── */
.doc { padding-block: clamp(48px, 8vw, 88px); }
.doc__inner { max-width: 72ch; }
.doc h1 { margin-bottom: 20px; }
.doc p { color: var(--ink-60); font-size: var(--fs-lead); line-height: 1.6; }
.doc__back { display: inline-flex; align-items: center; gap: 8px; margin-top: 32px; font-weight: 600; }
.doc__back:hover { color: var(--green-deep); text-decoration: underline; }

/* ── long-form legal documents ─────────────────────────────────────── */
.doc__updated { font-size: var(--fs-sm); color: var(--ink-40); margin-top: -8px; margin-bottom: 28px; }
.doc__intro { font-size: var(--fs-lead); }
.doc h2 {
  font-size: 22px;
  margin-top: 40px;
  margin-bottom: 10px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft);
  letter-spacing: -0.015em;
}
.doc h2:first-of-type { border-top: 0; padding-top: 0; }
.doc h3 { font-size: 17px; margin-top: 22px; margin-bottom: 6px; color: var(--charcoal); }
.doc p + p { margin-top: 14px; }
.doc ul + p, .doc ol + p, .doc ul + .doc__note, .doc p + .doc__note { margin-top: 16px; }
.doc ul, .doc ol { margin: 12px 0 0; padding-left: 22px; color: var(--ink-60); font-size: var(--fs-lead); line-height: 1.6; }
.doc ul { list-style: disc; }
.doc ol { list-style: decimal; }
.doc li + li { margin-top: 8px; }
.doc li::marker { color: var(--green); }
.doc a { text-decoration: underline; text-underline-offset: 2px; }
.doc a.btn, .doc .btn { text-decoration: none; }
.doc strong { color: var(--charcoal); font-weight: 600; }

/* Callout for the things a visitor must not miss — reused for the
   "we are not a carrier" and "consent happens off-site" statements. */
.doc__note {
  margin-top: 20px;
  padding: 16px 18px;
  background: var(--sand);
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
}
.doc__note p { font-size: var(--fs-body); }

/* Unresolved facts. Deliberately loud: amber is otherwise unused on these
   pages, so anything still highlighted has not been supplied yet and must
   not go live. Search the repo for "todo" to find every one. */
.todo {
  background: color-mix(in srgb, var(--amber) 38%, var(--white));
  color: var(--charcoal);
  padding: 1px 6px;
  border-radius: 4px;
  font-weight: 600;
  font-size: .92em;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}


/* the legal pages have no forms -- a mailto button is the whole mechanism */
.reqmail { margin-top: 22px; }
.reqmail .btn { display: inline-flex; }
@media (max-width: 639px) { .reqmail .btn { width: 100%; } }

.doc__stamp {
  display: inline-block; margin-bottom: 20px;
  padding: 5px 12px; border-radius: var(--radius-pill);
  background: var(--mint-wash); color: var(--green);
  font-size: var(--fs-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
}


/* ── sticky mobile CTA ─────────────────────────────────────────────────
   Mobile only. Hidden until the hero picker leaves the viewport; JS adds
   .is-visible. Body gets bottom padding so it never covers the footer. */
.stickybar {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 60;
  padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px));
  background: color-mix(in srgb, var(--offwhite) 94%, transparent);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%);
  visibility: hidden;
  transition: transform .26s ease, visibility 0s linear .26s;
}
.stickybar.is-visible {
  transform: translateY(0);
  visibility: visible;
  transition: transform .26s ease, visibility 0s linear 0s;
}
@media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } }

@media (min-width: 768px) { .stickybar { display: none; } }
@media (max-width: 767px) { body { padding-bottom: 84px; } }