/* ============================================================
   Roadnomics — marketing site
   Light, Apple-clean. One accent, lots of air, big type.
   ============================================================ */

:root {
  --accent:        #0a8754;
  --accent-strong: #096f46;
  --accent-soft:   #e8f5ef;

  --ink:      #1d1d1f;
  --ink-2:    #52525b;
  --ink-3:    #86868b;

  --bg:       #ffffff;
  --bg-tint:  #f5f5f7;
  --line:     #e5e5ea;

  --dark:     #111113;

  --wrap:     1160px;
  --pad:      clamp(20px, 5vw, 40px);

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 28px;

  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
               Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
button, input { font: inherit; color: inherit; }

.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;
}
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--r-sm) 0;
}
.skip:focus { left: 0; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ---------- type ---------- */
h1, h2, h3 {
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.06;
  font-weight: 680;
}
h1 { font-size: clamp(35px, 6vw, 72px); letter-spacing: -0.035em; }
/* the promise: second line of the hero, in the brand green so the eye lands on it */
.h1__promise { color: var(--accent); }
.hero h1 { font-size: clamp(35px, 4.6vw, 58px); }
h2 { font-size: clamp(32px, 4.2vw, 52px); letter-spacing: -0.03em; }
h3 { font-size: 21px; line-height: 1.25; letter-spacing: -0.015em; }

.eyebrow {
  margin: 0 0 22px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker {
  margin: 0 0 16px;
  font-size: 13px;
  font-weight: 640;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent);
}
.kicker--onDark { color: #57d99b; }

.lede {
  margin: 26px 0 0;
  font-size: clamp(18px, 2vw, 21px);
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 34em;
}
.lede--onDark { color: rgba(255,255,255,.72); margin-inline: auto; }

.body {
  margin: 22px 0 0;
  font-size: 17.5px;
  line-height: 1.62;
  color: var(--ink-2);
  max-width: 36em;
}
.body strong { color: var(--ink); font-weight: 640; }
.body em { font-style: normal; color: var(--ink); font-weight: 560; }

/* short contrast line — one sharp claim, not another paragraph */
.pull {
  margin: 24px 0 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--accent);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 560;
  max-width: 34em;
}

.section-head { max-width: 40rem; margin-bottom: clamp(40px, 5vw, 64px); }

/* ---------- buttons ---------- */
.btn {
  --bg-btn: var(--accent);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--bg-btn);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 14px 26px;
  font-size: 16px;
  font-weight: 590;
  letter-spacing: -0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.btn:hover { --bg-btn: var(--accent-strong); }
.btn:active { transform: scale(.975); }
.btn--sm { padding: 9px 18px; font-size: 15px; }
.btn--lg { padding: 17px 40px; font-size: 17px; }

/* ---------- nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(255,255,255,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid transparent;
  transition: border-color .3s var(--ease), background .3s var(--ease);
}
.nav.is-stuck { border-bottom-color: var(--line); }
.nav__inner {
  display: flex;
  align-items: center;
  gap: 24px;
  height: 60px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 640;
  letter-spacing: -0.02em;
  font-size: 18px;
}
.brand__mark { width: 28px; height: 28px; flex: none; object-fit: contain; }

/* Two-tone wordmark — splits the name at the seam so it reads Road + nomics */
.wm-road   { color: var(--ink); }
.wm-nomics { color: var(--accent); }
.nav__links {
  display: flex;
  gap: 28px;
  margin-inline: auto;
  font-size: 15px;
  color: var(--ink-2);
}
.nav__links a { transition: color .18s var(--ease); }
.nav__links a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .nav__links { display: none; }
  .nav__inner { justify-content: space-between; }
}

/* ---------- hero: your number, live ----------
   The app's two inputs as dials, and three example offers whose verdicts the
   island re-draws as the dials move (assets/island/number.js, over
   offer-render.js's cost/target overrides). Setting your number is the first
   thing the page has you do because it's the first thing the app has you do.

   The hero is plain white so it reads as its own band against the tinted
   How it works section right under it; the signup lives in the nav and the
   closing call to action. */
.hero {
  padding: clamp(44px, 7vw, 88px) 0 clamp(44px, 6vw, 76px);
  background: var(--bg);
  overflow: hidden;
}
.hero__inner { display: flex; flex-direction: column; }
.hero h1 { max-width: 20ch; }
.hero .lede { max-width: 40em; }
.hero__panel {
  margin-top: clamp(32px, 4vw, 48px);
  display: grid;
  grid-template-columns: minmax(250px, 320px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}
.dials {
  position: sticky; top: 76px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 26px 20px;
  box-shadow: 0 30px 70px -44px rgba(0,0,0,.3);
}
.dial { display: block; }
.dial + .dial { margin-top: 24px; padding-top: 22px; border-top: 1px solid var(--line); }
.dial__label { display: block; font-size: 12.5px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.dial__value {
  display: block; margin-top: 6px;
  font-size: clamp(40px, 4.6vw, 54px); font-weight: 680; letter-spacing: -.04em; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.dial__value small { font-size: .4em; font-weight: 560; color: var(--ink-3); letter-spacing: -.01em; margin-left: 4px; }
.dial input[type="range"] { display: block; width: 100%; margin: 18px 0 8px; accent-color: var(--accent); }
.dial__hint { display: block; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.dials__count { margin: 20px 0 0; font-size: 14.5px; font-weight: 600; color: var(--ink); min-height: 1.4em; }

.offers { display: grid; gap: 14px; }
.offer {
  margin: 0;
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 18px 20px;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 22px; align-items: center;
  transition: border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.offer.is-take { border-color: rgba(10,135,84,.35); box-shadow: 0 0 0 3px var(--accent-soft); }
.offer.is-pass { border-color: rgba(255,69,58,.3); box-shadow: 0 0 0 3px #fdeceb; }
.offer__card { font-size: 14px; line-height: 1.4; color: var(--ink-2); }
.offer__card b { display: block; font-size: 22px; font-weight: 680; letter-spacing: -.02em; color: var(--ink); }
.offer__card i { font-style: normal; color: var(--ink-3); }
.offer__island { grid-row: 1 / 3; grid-column: 2; }
.offer__island .rr-island { box-shadow: 0 10px 30px rgba(0,0,0,.22); }
.offer__math { grid-column: 1; margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.offer__math b { color: var(--ink); font-weight: 640; }

/* The islands are drawn by script. With JS off, show real screens instead:
   the demand clip and the two verdict cards from one real shift. */
.hero__fallback { display: none; }
.no-js .hero__panel { display: none; }
.no-js .hero__fallback {
  display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr);
  gap: 24px; margin-top: 32px; align-items: start;
}
.hero__fallback .shot--phone { max-width: 220px; margin: 0; }
.hero__fallback-cards { display: grid; gap: 14px; max-width: 420px; }

/* `.shot.shot--card`, not `.shot--card` — same trap `.shot--mini` documents
   above: the base `.shot` rule lives further down this file at equal
   specificity, so it would win and stamp a 44px radius and the dark 9px phone
   bezel onto what is a notification card, not a phone. */
.shot.shot--card {
  width: 100%;
  border-radius: clamp(13px, 1.6vw, 19px);
  padding: 0;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(0,0,0,.07);
  box-shadow:
    0 2px 6px rgba(0,0,0,.07),
    0 22px 48px -20px rgba(0,0,0,.28);
}
.shot--card .shot__img,
.shot--card .shot__ph { border-radius: 0; }
.shot--card .shot__ph { padding: 22px 14px; }

/* Spoken verdict. Sized and worded to be read as speech, not as a caption —
   hence the quote marks in the markup and the tail below. */
.bubble {
  position: relative;
  margin: 0;
  align-self: flex-start;
  max-width: 92%;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--accent-soft);
  color: var(--ink);
  border-radius: 16px;
  padding: 11px 15px;
  font-size: clamp(12.5px, 1.15vw, 14.5px);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: -0.005em;
}
.bubble__text { text-wrap: balance; }

/* Tail. Drawn with a rotated square rather than a border triangle so it
   inherits the bubble's own background — the two bubbles are tinted
   differently and a hard-coded triangle color would drift. */
.bubble::after {
  content: "";
  position: absolute;
  width: 13px; height: 13px;
  background: inherit;
  border-radius: 3px;
  transform: rotate(45deg);
}
/* TAKE bubble sits above its card, so the tail points down. */
.bubble--take::after { bottom: -5px; left: 26px; }
/* PASS bubble sits below its card, so the tail points up. */
.bubble--pass::after { top: -5px; right: 26px; }
.bubble--pass {
  align-self: flex-end;
  background: #fdf0e7;
}

/* Five bars suggesting speech without animating anything that would fight the
   reveal transition or burn battery on a phone. */
.bubble__wave {
  flex: none;
  display: flex;
  align-items: center;
  gap: 2px;
  height: 15px;
}
.bubble__wave i {
  width: 2.5px;
  border-radius: 2px;
  background: var(--accent);
  opacity: .75;
}
.bubble__wave i:nth-child(1) { height: 5px; }
.bubble__wave i:nth-child(2) { height: 11px; }
.bubble__wave i:nth-child(3) { height: 15px; }
.bubble__wave i:nth-child(4) { height: 9px; }
.bubble__wave i:nth-child(5) { height: 4px; }
.bubble--pass .bubble__wave i { background: #d2691e; }

@media (max-width: 980px) {
  .hero__panel { grid-template-columns: 1fr; }
  .dials { position: static; }
}
@media (max-width: 860px) {
  .hero { padding-top: clamp(24px, 4vw, 40px); }
}
@media (max-width: 640px) {
  .offer { grid-template-columns: 1fr; }
  .offer__island { grid-row: auto; grid-column: 1; justify-self: center; }
  .offer__island .surface { zoom: .88; }
  .no-js .hero__fallback { grid-template-columns: 1fr; }
}
@media (max-width: 400px) {
  .offer__island .surface { zoom: .8; }
}

/* ---------- signup form ---------- */
.signup { margin-top: 34px; }
.signup input {
  flex: 1 1 220px;
  min-width: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 13px 20px;
  font-size: 16px;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.signup input::placeholder { color: var(--ink-3); }
.signup input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
.signup--inline {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  max-width: 520px;
}
.signup--inline .btn { flex: 0 0 auto; }
.signup__note {
  flex: 1 0 100%;
  margin: 4px 0 0;
  font-size: 13.5px;
  color: var(--ink-3);
}
.signup__note.is-error { color: #b3261e; }
.signup__note.is-ok { color: var(--accent); font-weight: 560; }

.signup--stack {
  max-width: 560px;
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: center;
}
.signup--stack .signup__row { display: flex; gap: 10px; width: 100%; flex-wrap: wrap; }
.signup--stack input {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.18);
  color: #fff;
}
.signup--stack input::placeholder { color: rgba(255,255,255,.45); }
.signup--stack input:focus {
  border-color: #57d99b;
  box-shadow: 0 0 0 4px rgba(87,217,155,.16);
}
.signup--stack .btn { --bg-btn: #fff; color: var(--ink); }
.signup--stack .btn:hover { --bg-btn: #eaeaec; }
.signup--stack .signup__note { color: rgba(255,255,255,.5); text-align: center; }
.signup--stack .signup__note.is-ok { color: #57d99b; }
.signup--stack .signup__note.is-error { color: #ff9d94; }

/* ---------- feature sections ---------- */
.feature {
  padding: clamp(72px, 10vw, 132px) 0;
  scroll-margin-top: 72px;
}
.feature--tint { background: var(--bg-tint); }
.feature__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 88px);
  align-items: center;
}
.feature--alt .feature__copy { order: 2; }
.feature--alt .feature__art  { order: 1; }
.feature__art { justify-self: center; width: 100%; }

@media (max-width: 900px) {
  .feature__inner { grid-template-columns: 1fr; }
  .feature--alt .feature__copy,
  .feature--alt .feature__art { order: initial; }
  .feature__art { max-width: 520px; }
}

/* checklists */
.checks {
  margin-top: 30px;
  display: grid;
  gap: 13px;
  max-width: 34em;
}
.checks li {
  position: relative;
  padding-left: 30px;
  font-size: 16.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
.checks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .34em;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: var(--accent-soft) center / 11px no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6.3 4.7 9 10 3.2' fill='none' stroke='%230a8754' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------- screenshot placeholders ---------- */
.shot {
  position: relative;
  width: 100%;
  border-radius: 44px;
  background: var(--dark);
  padding: 9px;
  box-shadow:
    0 2px 4px rgba(0,0,0,.1),
    0 30px 70px -26px rgba(0,0,0,.42);
}
.shot--phone { max-width: 320px; margin-inline: auto; }
.shot--hero  { max-width: 330px; }
.shot--wide-phone { max-width: 340px; }

.shot__img,
.shot__video,
.shot__ph {
  width: 100%;
  border-radius: 36px;
  overflow: hidden;
}
/* height:auto so the image itself sets the frame height. Giving the frame an
   aspect-ratio instead cropped the sides, because the img sits inside the
   frame's padding and therefore has a slightly different aspect. */
.shot__img { display: none; height: auto; }
/* Clips are recorded at 620x1344, the same aspect as a 1290x2796 screenshot,
   so a video swaps into a .shot frame with no reflow. display:block from the
   start (not gated on .is-loaded like the imgs) because the poster attribute
   already paints a frame before a byte of video arrives. */
.shot__video { display: block; height: auto; }
.shot__ph  { aspect-ratio: 1290 / 2796; }
.shot.is-loaded .shot__img { display: block; }
.shot.is-loaded .shot__ph  { display: none; }
.shot:has(.shot__video) .shot__ph { display: none; }

.shot__ph {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 20px;
  color: var(--ink-3);
  background:
    repeating-linear-gradient(
      -45deg,
      #f7f7f9 0 12px,
      #f1f1f4 12px 24px
    );
  border: 1px dashed #c9c9d0;
}
.shot__ph-icon { font-size: 22px; color: #b9b9c2; line-height: 1; margin-bottom: 2px; }
.shot__ph-name {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--ink-2);
  word-break: break-all;
}
.shot__ph-dim {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px;
  color: #a1a1aa;
}
.shot__ph-hint {
  margin-top: 6px;
  font-size: 12.5px;
  line-height: 1.35;
  color: #9a9aa3;
  max-width: 20ch;
}

/* two overlapping phones */
.shot-pair {
  position: relative;
  display: flex;
  justify-content: center;
  padding-bottom: 42px;
}
.shot-pair .shot { max-width: 256px; }
.shot-pair .shot--offset {
  margin-left: -46px;
  margin-top: 62px;
  z-index: 2;
  box-shadow:
    0 0 0 7px var(--pair-gap, #fff),
    0 2px 4px rgba(0,0,0,.1),
    0 30px 70px -26px rgba(0,0,0,.42);
}
.feature--tint .shot-pair .shot--offset { --pair-gap: var(--bg-tint); }
/* keep the back phone's placeholder label clear of the overlap */
.shot-pair .shot:first-child .shot__ph { padding-right: 54px; }
@media (max-width: 520px) {
  .shot-pair { padding-bottom: 30px; }
  .shot-pair .shot { max-width: 200px; border-radius: 34px; padding: 7px; }
  .shot-pair .shot__img, .shot-pair .shot__ph { border-radius: 28px; }
  .shot-pair .shot--offset { margin-left: -36px; margin-top: 44px; box-shadow: 0 0 0 5px var(--pair-gap, #fff), 0 24px 50px -22px rgba(0,0,0,.42); }
  .shot-pair .shot:first-child .shot__ph { padding-right: 24px; }
  .shot__ph-hint { display: none; }
}

/* ---------- gallery sections (Demand / My Data) ----------
   Copy block on top, then a strip of phones. Breaks the zigzag rhythm and
   lets a section carry 3–4 screens without the two-phone overlap. */
.feature--gallery .feature__copy { max-width: 40rem; }
.shot-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2.5vw, 30px);
  margin-top: clamp(40px, 5vw, 60px);
  align-items: start;
}
.shot-row figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.shot-row .shot {
  border-radius: clamp(20px, 2.4vw, 32px);
  padding: clamp(5px, .6vw, 7px);
}
.shot-row .shot__img,
.shot-row .shot__ph { border-radius: clamp(16px, 1.9vw, 26px); }
.shot-row .shot__ph { padding: 12px; }
.shot-row .shot__ph-hint { font-size: 11.5px; }
.shot-row figcaption {
  font-size: 13.5px;
  line-height: 1.35;
  color: var(--ink-3);
  text-align: center;
}
@media (max-width: 760px) {
  /* one row that scrolls, bleeding to both screen edges */
  .shot-row {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    margin-inline: calc(var(--pad) * -1);
    padding-inline: var(--pad);
    padding-bottom: 8px;
    scrollbar-width: none;
  }
  .shot-row::-webkit-scrollbar { display: none; }
  .shot-row figure { flex: 0 0 56vw; max-width: 230px; scroll-snap-align: center; }
}

/* ---------- how it works ---------- */
.how { padding: clamp(72px, 9vw, 118px) 0; scroll-margin-top: 72px; }
.how .section-head .body { margin-top: 16px; }
.step h3 a { color: inherit; text-decoration: none; }
.step h3 a::after { content: " \2193"; color: var(--accent); font-weight: 600; }
.step h3 a:hover { color: var(--accent); }
.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 44px);
  counter-reset: step;
}
.step {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 32px 28px 30px;
}
.step__n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--accent-soft);
  color: var(--accent);
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 18px;
}
.step h3 { margin-bottom: 8px; }
.step p { margin: 0; color: var(--ink-2); font-size: 16px; }

@media (max-width: 800px) { .steps { grid-template-columns: 1fr; } }

/* ---------- FAQ ---------- */
.faq { padding: clamp(72px, 9vw, 118px) 0; scroll-margin-top: 72px; }
.faq__inner {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) 1.4fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: start;
}
.faq .section-head { margin-bottom: 0; }
.faq__list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 40px 22px 0;
  font-size: 18px;
  font-weight: 590;
  letter-spacing: -0.015em;
  position: relative;
  transition: color .18s var(--ease);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 11px; height: 11px;
  margin-top: -6px;
  border-right: 2px solid var(--ink-3);
  border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg);
  transition: transform .25s var(--ease);
}
.faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.faq summary:hover { color: var(--accent); }
.faq details p {
  margin: -4px 0 24px;
  color: var(--ink-2);
  font-size: 16.5px;
  max-width: 44em;
}
.faq details em { font-style: normal; font-weight: 600; color: var(--ink); }

@media (max-width: 820px) {
  .faq__inner { grid-template-columns: 1fr; }
}

/* ---------- CTA ---------- */
.cta {
  background: var(--dark);
  color: #fff;
  padding: clamp(80px, 11vw, 140px) 0;
  scroll-margin-top: 72px;
  position: relative;
  overflow: hidden;
}
.cta::before {
  content: "";
  position: absolute;
  inset: auto -10% -34% -10%;
  height: 78%;
  background: radial-gradient(46% 100% at 50% 100%, rgba(12,168,103,.30), transparent 72%);
  pointer-events: none;
}
.cta__inner { position: relative; text-align: center; max-width: 700px; }
.cta h2 { color: #fff; }
.cta__trust { margin: 26px 0 0; font-size: 14px; color: rgba(255,255,255,.55); }

/* ---------- footer ---------- */
.footer {
  padding: 56px 0 64px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink-3);
}
.footer__inner { display: grid; gap: 16px; }
.footer__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 16px;
  font-weight: 640;
  color: var(--ink);
  letter-spacing: -0.02em;
}
.footer__brand .brand__mark { width: 22px; height: 22px; }
.footer__note { margin: 0; }
.footer__links { display: flex; flex-wrap: wrap; gap: 22px; }
.footer__links a { transition: color .18s var(--ease); }
.footer__links a:hover { color: var(--ink); }
.footer__legal { margin: 10px 0 0; font-size: 12.5px; color: #a1a1aa; max-width: 52em; }

/* ---------- reveal on scroll ---------- */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  will-change: opacity, transform;
}
.reveal.in { opacity: 1; transform: none; }

/* No JS means nothing ever adds .in, which would leave the whole page blank.
   Show everything instead and skip the animation entirely. */
.no-js .reveal { opacity: 1; transform: none; transition: none; }

.reveal--delay { transition-delay: .1s; }


/* ---------- tag (limited access / coming) ---------- */
.tag {
  display: inline-block;
  vertical-align: middle;
  margin-left: 8px;
  padding: 4px 9px;
  border-radius: 7px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.tag--soon { background: var(--bg-tint); color: var(--ink-3); }

.note-limited {
  margin: 20px 0 0;
  padding: 16px 18px;
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
}

/* ---------- story (section 6) ---------- */
.story__inner { max-width: 720px; margin: 0 auto; }
.story h2 { margin-bottom: 28px; }
.story p {
  margin: 0 0 20px;
  font-size: 17.5px;
  line-height: 1.72;
  color: var(--ink-2);
}
.story .pull { margin-top: 34px; }
.story .checks { margin: 22px 0 26px; }
.story .checks strong { color: var(--ink); font-weight: 640; }

@media (max-width: 760px) {
  .story p { font-size: 16.5px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ---------- the offer in the island (Earn section's lead figure) ----------
   An annotated figure: the top of a phone with the expanded Dynamic Island
   open over an offer, and a hairline from each part to a few words. Drawn and
   laid out by assets/island/offer-callouts.js; the island itself is the app's
   card, rendered by assets/island/offer-render.js. With JS off the figure is
   empty and the section still reads. */
.offer-fig { margin: clamp(40px, 6vw, 72px) 0 clamp(32px, 5vw, 56px); }
.shot-row--2 { grid-template-columns: repeat(2, 1fr); max-width: 560px; margin-inline: auto; }

.fig { position: relative; width: 100%; }
.fig__lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; z-index: 3; }
.fig__phone { position: relative; z-index: 2; }
.pc-box { position: relative; }
.pc { transform-origin: 0 0; width: 411px; height: 262px; border-radius: 56px 56px 0 0; background: var(--dark); padding: 9px 9px 0; position: relative;
      -webkit-mask-image: linear-gradient(#000 64%, transparent 100%); mask-image: linear-gradient(#000 64%, transparent 100%); }
.pc__screen { width: 393px; height: 253px; border-radius: 47px 47px 0 0; overflow: hidden; position: relative; }
.pc__screen > svg { position: absolute; inset: 0; }
.pc__island { position: absolute; left: 11px; top: 11px; }
.pc__island .rr-island { box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.co { position: absolute; z-index: 4; }
.co b { display: block; font-weight: 640; letter-spacing: -.012em; color: var(--ink); }
.co span { display: block; color: var(--ink-2); }
.co--v1 { width: 236px; }
.co--v1 b { font-size: 15.5px; line-height: 1.25; }
.co--v1 span { font-size: 14px; line-height: 1.4; margin-top: 2px; }
.co--v1.is-l { text-align: right; }
/* On a phone: labels in rows above and below, every leader straight. */
.m-row { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; position: relative; z-index: 4; }
.m-row--top { margin-bottom: 26px; align-items: end; }
.m-row--bot { margin-top: -34px; align-items: start; column-gap: 56px; } /* up into the phone's fade */
.m-row--bot2 { margin-top: 22px; align-items: start; }
.m-row .co { position: relative; width: auto; left: auto; top: auto; }
.m-row .is-l { text-align: left; }
.m-row .is-r { text-align: right; }
.m-row .co--v1 b { font-size: 15px; }
.m-row .co--v1 span { font-size: 13.5px; }
.m-phone { display: flex; justify-content: center; overflow: hidden; position: relative; z-index: 2; }
/* The ride figure's demand label: one centred row under the two columns. */
.m-row--one { grid-template-columns: 1fr; margin-top: 22px; }
.m-row .is-c { text-align: center; max-width: 250px; margin-inline: auto; }

/* ---------- learn: the ride in the island ----------
   The Learn section's lead: a full-width annotated figure between the
   section's copy and its screenshot row. */
.ride-fig { margin: clamp(48px, 7vw, 88px) 0 clamp(56px, 8vw, 104px); }
.ride-fig__head { max-width: 40rem; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.ride-fig__head h3 { font-size: clamp(26px, 3.2vw, 38px); line-height: 1.1; letter-spacing: -.025em; }
.ride-fig__head p { margin: 14px auto 0; font-size: 17px; line-height: 1.58; color: var(--ink-2); max-width: 36em; }

/* ---------- print ---------- */
@media print {
  .nav, .cta, .hero__art, .feature__art { display: none; }
  body { color: #000; }
}

/* ---------- one shift: the walkthrough ----------
   Four moments of a Tuesday, one stage. A strip of stops along the top
   (each fills like a story's progress bar), copy on the left, and on the
   right a scene per moment: the demand clip, the
   island opening over an offer, the ride bar actually running, and the day
   graded. Auto-plays while in view, pauses out of view, any stop can be
   tapped. Drawn by assets/island/shift.js; hidden with JS off. */
.shift { padding: clamp(64px, 9vw, 112px) 0; scroll-margin-top: 72px; }
.shift .section-head { margin-bottom: clamp(24px, 3vw, 36px); }
.shift__strip { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.shift__stop {
  position: relative; min-width: 0; text-align: left;
  background: none; border: 0;
  padding: 16px 4px 0; cursor: pointer; color: var(--ink-3);
}
.shift__stop b { display: block; font-size: 15px; font-weight: 640; color: var(--ink-3); letter-spacing: -.01em; font-variant-numeric: tabular-nums; transition: color .3s var(--ease); }
.shift__stop span { display: block; margin-top: 2px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.shift__stop.is-done b, .shift__stop:hover b { color: var(--ink-2); }
.shift__stop.is-on b { color: var(--ink); }
.shift__stop.is-on span { color: var(--accent); font-weight: 600; }
/* the track, and the fill shift.js sizes every frame */
.shift__stop::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 5px; border-radius: 3px; background: var(--line); transition: background .2s; }
.shift__stop:hover::before { background: #d7d7dc; }
.shift__stop i { position: absolute; left: 0; top: 0; height: 5px; width: 0; border-radius: 3px; background: var(--accent); }
/* the playhead: a dot riding the end of the fill, pulsing while it plays */
.shift__stop.is-on i::after {
  content: ""; position: absolute; right: -6px; top: 50%; width: 13px; height: 13px; margin-top: -6.5px;
  border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px var(--bg);
}
.shift.is-playing .shift__stop.is-on i::after { animation: shift-head 1.4s ease-out infinite; }
@keyframes shift-head {
  0%   { box-shadow: 0 0 0 3px var(--bg), 0 0 0 3px rgba(10, 135, 84, .45); }
  100% { box-shadow: 0 0 0 3px var(--bg), 0 0 0 11px rgba(10, 135, 84, 0); }
}
.shift:not(.is-playing) .shift__stop.is-on i { opacity: .55; }
.shift__stop:focus-visible { outline-offset: 6px; }

.shift__stage {
  margin-top: clamp(28px, 4vw, 44px);
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
  min-height: 440px;
}
.shift__copy .kicker { margin-bottom: 10px; }
.shift__copy h3 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; letter-spacing: -.025em; }
.shift__copy p { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--ink-2); max-width: 32em; }
.shift__copy > * { opacity: 0; transform: translateY(10px); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.shift__copy.is-in > * { opacity: 1; transform: none; }
.shift__copy.is-in > :nth-child(2) { transition-delay: .06s; }
.shift__copy.is-in > :nth-child(3) { transition-delay: .12s; }
.shift__controls { display: flex; align-items: center; gap: 12px; margin-top: 22px; font-size: 13.5px; color: var(--ink-3); }
.shift__play { background: var(--bg); border: 1px solid var(--line); border-radius: 999px; padding: 6px 14px; font-size: 13.5px; cursor: pointer; color: var(--ink-2); }
.shift__play:hover { color: var(--ink); border-color: #d7d7dc; }
.shift__play { display: inline-flex; align-items: center; gap: 7px; }
.shift__play::before { content: ""; width: 9px; height: 10px; background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.shift.is-playing .shift__play::before { clip-path: none; background: linear-gradient(90deg, currentColor 0 3px, transparent 3px 6px, currentColor 6px); }

.shift__art { position: relative; min-height: 440px; display: grid; place-items: center; }
.shift__scene {
  grid-area: 1 / 1; width: 100%; display: grid; place-items: center; gap: 14px;
  opacity: 0; transform: scale(.98); pointer-events: none;
  transition: opacity .5s var(--ease), transform .5s var(--ease);
}
.shift__scene.is-in { opacity: 1; transform: none; pointer-events: auto; }

/* 2:05 — the clip */
.sh-clip .shot { max-width: 210px; }

/* 2:28 and 2:40 — the top of the phone, the island over it */
.sh-phone { width: 100%; display: grid; justify-items: center; gap: 14px; }
.sh-phone .pc-box { position: relative; }
.sh-island { position: absolute; left: 11px; top: 11px; transform-origin: 50% 18px; transition: opacity .35s var(--ease), transform .45s var(--ease); }
.sh-island.is-hidden { opacity: 0; transform: scale(.55); }
.sh-island .rr-island, .sh-island .rr-compact { box-shadow: 0 10px 30px rgba(0,0,0,.28); }
.sh-pill { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); transition: opacity .3s var(--ease); }
.sh-pill.is-hidden { opacity: 0; }
.sh-phone .bubble { max-width: 34em; opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease); }
.sh-phone .bubble.is-in { opacity: 1; transform: none; }

/* 11:40 — the day, graded */
.sh-day { width: min(100%, 360px); background: var(--dark); color: #fff; border-radius: 22px; padding: 18px 20px 16px; font-variant-numeric: tabular-nums; box-shadow: 0 30px 70px -40px rgba(0,0,0,.5); }
.sh-day__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.sh-day__head b { font-size: 13px; font-weight: 600; letter-spacing: .8px; color: rgba(255,255,255,.75); }
.sh-day__head span { font-size: 15px; color: rgba(255,255,255,.75); }
.sh-day__big { margin-top: 6px; font-size: 40px; font-weight: 700; letter-spacing: -.03em; line-height: 1; }
.sh-day__big small { font-size: 15px; font-weight: 600; color: rgba(255,255,255,.75); letter-spacing: 0; margin-left: 8px; }
.sh-day__hours { margin-top: 16px; display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; align-items: end; height: 72px; }
.sh-day__hours i { display: block; border-radius: 3px 3px 1px 1px; height: var(--h, 10%); transform: scaleY(0); transform-origin: bottom; transition: transform .7s var(--ease); }
.is-summary .sh-day__hours i { transform: none; }
.sh-day__hours i:nth-child(n) { transition-delay: calc(var(--i, 0) * 60ms); }
.sh-day__labels { display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; margin-top: 6px; font-size: 10.5px; color: rgba(255,255,255,.55); text-align: center; }
.sh-day__foot { margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.18); font-size: 13.5px; color: rgba(255,255,255,.75); line-height: 1.45; }
.sh-day__foot b { color: #fff; font-weight: 600; }

/* 11:40 — home: the drive in, the Lock Screen, then the summary pops */
.sh-home { width: 100%; display: grid; place-items: center; }
.sh-home > * { grid-area: 1 / 1; }
.sh-home__phone { display: grid; justify-items: center; gap: 14px; transition: opacity .4s var(--ease), transform .45s var(--ease); }
.sh-home .pc { -webkit-mask-image: linear-gradient(#000 80%, transparent 100%); mask-image: linear-gradient(#000 80%, transparent 100%); }
.sh-di { position: absolute; left: 50%; top: 11px; width: 124px; height: 36px; margin-left: -62px; border-radius: 20px; background: #000; z-index: 3; }
.sh-homepin__ring { opacity: 0; transform-origin: center; transform-box: fill-box; }
.sh-puck { transition: opacity .4s var(--ease); }
.is-home .sh-puck { opacity: 0; }
.is-home .sh-homepin__ring { animation: sh-ring 1.2s ease-out 2; }
@keyframes sh-ring { from { opacity: .8; transform: scale(1); } to { opacity: 0; transform: scale(2.4); } }
.sh-home__chip {
  display: inline-flex; align-items: center; gap: 8px; margin: 0; padding: 8px 14px; border-radius: 999px;
  background: var(--dark); color: #fff; font-size: 14px; font-weight: 560;
  opacity: 0; transform: translateY(6px); transition: opacity .4s var(--ease), transform .4s var(--ease);
}
.is-home .sh-home__chip { opacity: 1; transform: none; }
.sh-lock {
  position: absolute; inset: 0; z-index: 2; padding-top: 54px; text-align: center; color: #fff;
  background: radial-gradient(120% 90% at 30% 0%, #3a3f7a 0%, #1a1d3a 55%, #0c0e1c 100%);
  opacity: 0; transition: opacity .6s var(--ease);
}
.is-locked .sh-lock { opacity: 1; }
.sh-lock__date { font-size: 14px; font-weight: 600; opacity: .85; }
.sh-lock__time { font-size: 58px; font-weight: 700; letter-spacing: -.02em; line-height: 1; margin-top: 2px; font-variant-numeric: tabular-nums; }
.sh-note {
  position: absolute; left: 12px; right: 12px; top: 134px; display: grid; grid-template-columns: 34px 1fr; gap: 10px; align-items: start;
  padding: 11px 14px 12px 12px; border-radius: 22px; background: rgba(242, 242, 247, .93); color: #1d1d1f; text-align: left;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  opacity: 0; transform: translateY(26px) scale(.96);
  transition: opacity .35s var(--ease), transform .5s cubic-bezier(.2, 1.25, .4, 1);
}
.is-noted .sh-note { opacity: 1; transform: none; }
.is-tapped .sh-note { transform: scale(.97); transition-duration: .15s; }
.sh-note img { border-radius: 8px; display: block; }
.sh-note p { margin: 0; font-size: 13.5px; line-height: 1.3; }
.sh-note p:first-child { display: flex; justify-content: space-between; gap: 8px; }
.sh-note p:first-child span { color: #6e6e73; font-size: 12.5px; }
.sh-note b { font-weight: 640; }
.sh-tap { position: absolute; left: 62%; top: 50%; width: 34px; height: 34px; margin: -17px; border-radius: 50%; background: rgba(0,0,0,.18); opacity: 0; pointer-events: none; }
.is-tapped .sh-tap { animation: sh-tap .5s ease-out forwards; }
@keyframes sh-tap { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }
.sh-home .sh-day { opacity: 0; transform: translateY(26px) scale(.9); pointer-events: none; transition: opacity .35s var(--ease), transform .55s cubic-bezier(.2, 1.3, .4, 1); }
.is-summary .sh-home__phone { opacity: 0; transform: scale(.94) translateY(-12px); }
.is-summary .sh-day { opacity: 1; transform: none; pointer-events: auto; }

@media (max-width: 860px) {
  .shift__stage { grid-template-columns: 1fr; min-height: 0; gap: 22px; }
  .shift__art { min-height: 330px; }
  .shift__stop span { display: none; }
  .shift__stop b { font-size: 13.5px; }
  .shift__copy p { font-size: 16px; }
}
.no-js .shift { display: none; }

/* ---------- car cost per mile: the calculator ----------
   assets/cost/cost.js, on /cost-per-mile/, every car's own page, and the
   homepage's cost-dial sheet. Form on the left, the answer on the right;
   stacked on a phone, form first, because picking the car is the first act. */
.cost-hero { padding: clamp(40px, 6vw, 80px) 0 clamp(56px, 7vw, 96px); }
.cost-hero h1 { font-size: clamp(34px, 5vw, 60px); max-width: 18ch; }
.cost-hero .lede { max-width: 38em; }
.cost-hero .calc { margin-top: clamp(28px, 4vw, 44px); }

.calc {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(16px, 2.4vw, 28px);
  align-items: start;
}
.calc__static { grid-column: 1 / -1; margin: 0; font-size: 19px; color: var(--ink-2); }
.calc__form, .calc__result {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 2.4vw, 28px);
}
.calc__result { box-shadow: 0 30px 70px -44px rgba(0,0,0,.3); min-height: 100%; }
.calc__row { display: grid; gap: 14px; }
.calc__row--car { grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; }
.calc__row--fuel { grid-template-columns: 1fr 1fr; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--line); }
.calc__field { display: grid; gap: 6px; min-width: 0; }
.calc__field > span { font-size: 12.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.calc select, .calc input[type="number"] {
  width: 100%; min-width: 0; height: 46px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  font: inherit; font-size: 16px; color: var(--ink);
}
.calc select:focus-visible, .calc input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc select:disabled { color: var(--ink-3); background: var(--bg-tint); }
.calc__note { grid-column: 1 / -1; margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.calc__drive { margin: 20px 0 0; padding: 20px 0 0; border: 0; border-top: 1px solid var(--line); min-width: 0; }
.calc__drive legend { float: left; width: 100%; padding: 0; margin-bottom: 10px; font-size: 12.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.calc__choices { clear: both; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.calc__choice {
  position: relative; display: grid; gap: 3px; align-content: start; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff; cursor: pointer;
  transition: border-color .15s var(--ease), background .15s var(--ease);
}
.calc__choice input { position: absolute; opacity: 0; pointer-events: none; }
.calc__choice b { font-size: 15px; font-weight: 650; color: var(--ink); }
.calc__choice span { font-size: 12.5px; line-height: 1.35; color: var(--ink-3); }
.calc__choice:hover { border-color: var(--ink-3); }
.calc__choice:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.calc__choice:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.calc__drive .calc__note { margin-top: 10px; }
.calc [data-needs-car] { transition: opacity .25s var(--ease); }
.calc:not(.has-car) [data-needs-car] { opacity: .45; pointer-events: none; }
.calc__adjust { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
.calc__adjust summary { cursor: pointer; font-size: 15px; font-weight: 600; color: var(--accent); }
.calc__adjust .calc__note { margin-top: 10px; }
.calc__parts { margin-top: 14px; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; }
.calc__reset { margin-top: 14px; background: none; border: 0; padding: 0; font-size: 14px; color: var(--ink-2); text-decoration: underline; cursor: pointer; }

.calc__empty { margin: 0; font-size: 17px; color: var(--ink-3); }
.calc__car { margin: 0; font-size: 12.5px; font-weight: 640; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.calc__big { margin: 6px 0 0; line-height: 1; font-variant-numeric: tabular-nums; }
.calc__big b { font-size: clamp(56px, 7vw, 84px); font-weight: 700; letter-spacing: -.05em; }
.calc__big small { font-size: 20px; font-weight: 560; color: var(--ink-3); margin-left: 8px; }
.calc__sub { margin: 10px 0 0; font-size: 14.5px; color: var(--ink-2); }
.calc__stack { margin-top: 18px; display: flex; gap: 2px; height: 12px; border-radius: 6px; overflow: hidden; }
.calc__stack i { display: block; min-width: 2px; transition: flex .5s var(--ease); }
.calc__rows { margin-top: 16px; display: grid; gap: 9px; }
.calc__rows li { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14.5px; color: var(--ink-2); }
.calc__rows li span { display: flex; align-items: center; gap: 8px; }
.calc__rows li span i { width: 9px; height: 9px; border-radius: 3px; flex: none; }
.calc__rows li em { font-style: normal; font-size: 11.5px; font-weight: 640; color: var(--accent); background: var(--accent-soft); padding: 1px 6px; border-radius: 999px; }
.calc__rows li b { color: var(--ink); font-weight: 620; font-variant-numeric: tabular-nums; }
.calc__rows li s { grid-column: 1 / -1; display: block; height: 4px; border-radius: 2px; background: var(--bg-tint); position: relative; text-decoration: none; }
.calc__rows li s::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: 2px; background: var(--c, #d6d6dc); opacity: .55; transition: width .5s var(--ease); }
.calc__irs { margin: 18px 0 0; padding: 14px 16px; border-radius: var(--r-md); background: var(--accent-soft); font-size: 14.5px; line-height: 1.5; color: var(--ink-2); }
.calc__irs b { color: var(--ink); }
.calc__app { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-3); }
.calc__actions { margin-top: 18px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.btn--ghost { --bg-btn: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px var(--line); }
.btn--ghost:hover { --bg-btn: var(--bg-tint); }
.calc__copied { font-size: 14px; font-weight: 600; color: var(--accent); }
.no-js .calc__form, .no-js .calc__result { display: none; }

@media (max-width: 900px) {
  .calc { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .calc__row--car { grid-template-columns: 1fr 1fr; }
  .calc__row--car .calc__field--grow { grid-column: 1 / -1; order: 2; }
  .calc__row--car .calc__field:last-child { order: 1; }
  .calc__row--fuel { grid-template-columns: 1fr 1fr; }
}

.cost-method__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 22px 32px; margin: 0; }
.cost-method__list dt { font-weight: 650; }
.cost-method__list dd { margin: 4px 0 0; color: var(--ink-2); font-size: 15.5px; }
.cost-method__why { margin: clamp(28px, 4vw, 40px) 0 0; max-width: 44em; color: var(--ink-2); }
.cost-dir__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 26px 28px; }
.cost-dir__make h3 { font-size: 16px; letter-spacing: -.01em; margin: 0 0 8px; }
.cost-dir__make li { font-size: 14.5px; line-height: 1.7; }
.cost-dir__make a { color: var(--ink-2); }
.cost-dir__make a:hover { color: var(--accent); text-decoration: underline; }
.cost-dir__make a[aria-current] { color: var(--ink); font-weight: 650; }
.cost-dir { padding-bottom: 24px; }
.cost-dir__all { margin: 0 auto; padding-bottom: clamp(56px, 7vw, 96px); }
.cost-dir__all a { color: var(--accent); font-weight: 600; }

/* The homepage's sheet: the same calculator over the hero, opened from the
   cost dial. A native <dialog>, so Esc and focus come for free. */
.dial__link { display: inline-block; margin-top: 8px; font-size: 14px; font-weight: 600; color: var(--accent); }
.dial__link:hover { text-decoration: underline; }
.dial__car { display: block; margin-top: 4px; font-size: 13px; font-weight: 600; color: var(--ink-2); }
.cost-sheet {
  width: min(980px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); padding: 0;
  border: 0; border-radius: var(--r-lg); background: var(--bg-tint); color: var(--ink);
  box-shadow: 0 40px 120px -30px rgba(0,0,0,.45);
}
.cost-sheet::backdrop { background: rgba(17,17,19,.45); backdrop-filter: blur(4px); }
.cost-sheet__head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 22px; background: var(--bg-tint); border-bottom: 1px solid var(--line); }
.cost-sheet__head h2 { font-size: 20px; letter-spacing: -.02em; margin: 0; }
.cost-sheet__head a { font-size: 14px; color: var(--accent); font-weight: 600; margin-left: auto; }
.cost-sheet__close { width: 34px; height: 34px; border-radius: 50%; border: 0; background: #e3e3e8; font-size: 20px; line-height: 1; cursor: pointer; }
.cost-sheet .calc { padding: 20px 22px 24px; }
@media (max-width: 640px) { .cost-sheet__head a { display: none; } }

/* ---------- the offer card: /offer/ (unlisted) ----------
   assets/offer/page.js. Screenshot in, numbers checked, card out. Stacked on
   a phone, the card under the form; side by side from 900 px, the card
   sticky so it stays in view while the form changes it. */
.oc-hero { padding: clamp(36px, 6vw, 80px) 0 clamp(48px, 7vw, 96px); }
.oc-hero h1 { font-size: clamp(32px, 5vw, 56px); max-width: 18ch; }
.oc-hero .lede { max-width: 36em; }
.oc { margin-top: clamp(26px, 4vw, 44px); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 40px); align-items: start; }
.oc [hidden] { display: none !important; }   /* the panels below set display */
.oc__side { display: grid; gap: 16px; min-width: 0; }
.oc__pick, .oc__reading, .oc__form, .oc__car {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(18px, 2.4vw, 26px);
}
.oc__pick { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; transition: border-color .15s var(--ease), background .15s var(--ease); }
.oc__pick.is-over { border-color: var(--accent); background: var(--accent-soft); }
.oc__choose { position: relative; overflow: hidden; }
.oc__choose input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.oc__choose:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 3px; }
.oc__type { background: none; border: 0; padding: 6px 0; font-size: 15px; font-weight: 600; color: var(--accent); cursor: pointer; }
.oc__type:hover { text-decoration: underline; }
.oc__hint { flex-basis: 100%; margin: 0; font-size: 13.5px; color: var(--ink-3); }
.oc__reading { display: flex; align-items: center; gap: 16px; }
.oc__reading > div { flex: 1; min-width: 0; }
.oc__thumb { width: 56px; height: 112px; object-fit: cover; object-position: bottom; border-radius: 10px; border: 1px solid var(--line); flex: none; }
.oc__status { margin: 0; font-size: 15px; color: var(--ink-2); }
.oc__bar { margin-top: 10px; height: 4px; border-radius: 2px; background: var(--bg-tint); overflow: hidden; }
.oc__bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .3s var(--ease); }
.oc__h { font-size: 20px; letter-spacing: -.02em; margin: 0 0 14px; }
.oc__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.oc__field { display: grid; gap: 6px; min-width: 0; }
.oc__field--wide { grid-column: 1 / -1; }
.oc__field > span { font-size: 12.5px; font-weight: 640; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-3); }
.oc input[type="number"], .oc input[type="text"], .oc input[type="date"], .oc select {
  width: 100%; min-width: 0; height: 46px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: var(--r-sm); background: #fff;
  font: inherit; font-size: 16px; color: var(--ink); font-variant-numeric: tabular-nums;
  -webkit-appearance: none; appearance: none;
}
.oc select { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%2386868b' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 14px center; padding-right: 34px; }
.oc input:focus-visible, .oc select:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.oc__form.is-read input:placeholder-shown { background: #fffbeb; border-color: #f2d58a; }
.oc__note { margin: 12px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3); }
.oc__note a { color: var(--accent); font-weight: 600; }
.oc__toggle { display: flex; gap: 12px; align-items: flex-start; margin: 18px 0 0; padding-top: 18px; border-top: 1px solid var(--line); cursor: pointer; }
.oc__toggle input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }
.oc__toggle span { font-size: 14px; line-height: 1.45; color: var(--ink-3); }
.oc__toggle b { display: block; font-size: 16px; color: var(--ink); font-weight: 620; }
.oc__toggle + .oc__grid { margin-top: 14px; }
.oc__car summary { cursor: pointer; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; font-weight: 620; }
.oc__car summary small { font-size: 14px; font-weight: 500; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.oc__car[open] summary { margin-bottom: 14px; }
.oc__carname { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); }
.oc__carname button { background: none; border: 0; padding: 0 0 0 6px; font-size: 13.5px; color: var(--ink-3); text-decoration: underline; cursor: pointer; }
.oc__out { position: sticky; top: 84px; min-width: 0; }
.oc__frame { position: relative; border-radius: 22px; overflow: hidden; background: var(--bg-tint); box-shadow: 0 30px 70px -40px rgba(0,0,0,.35), 0 0 0 1px var(--line); }
.oc__frame canvas { display: block; width: 100%; height: auto; aspect-ratio: 1080 / 1350; }
.oc__frame canvas.is-blank { visibility: hidden; }
.oc__empty { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; padding: 24px; text-align: center; font-size: 15px; color: var(--ink-3); }
.oc__actions { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 10px; }
.oc__actions .btn { flex: 1 1 140px; }
.oc__after { margin-top: 10px; }
.oc-privacy { margin: clamp(28px, 4vw, 44px) 0 0; font-size: 15px; color: var(--ink-2); }
.oc-note { margin-top: 24px; color: var(--ink-2); }
.no-js .oc { display: none; }
body.oc-solo { margin: 0; background: #fff; }
body.oc-solo img { max-width: none; }
@media (max-width: 900px) {
  .oc { grid-template-columns: 1fr; }
  .oc__out { position: static; }
  .oc__out.is-empty { display: none; }   /* no blank card under the form on a phone */
}