/* ==========================================================================
   The Transport Buddy — design system
   Tokens follow the landing-page-design skill:
   - Type: Tailwind default scale, no arbitrary sizes
   - Spacing: 13 approved values only
   - Radius: Tailwind radius values only
   - Backgrounds: flat, approved dark palette only
   - Motion: custom cubic bezier, never a default transition
   ========================================================================== */

:root {
  /* Spacing — the only permitted values */
  --sp-0: 0;
  --sp-25: 2px;
  --sp-50: 4px;
  --sp-75: 8px;
  --sp-100: 12px;
  --sp-200: 16px;
  --sp-300: 24px;
  --sp-400: 32px;
  --sp-500: 40px;
  --sp-600: 48px;
  --sp-700: 64px;
  --sp-800: 80px;
  --sp-900: 96px;

  /* Type scale — Tailwind defaults */
  --fs-xs: 12px;    --lh-xs: 16px;
  --fs-sm: 14px;    --lh-sm: 20px;
  --fs-base: 16px;  --lh-base: 24px;
  --fs-lg: 18px;    --lh-lg: 28px;
  --fs-xl: 20px;    --lh-xl: 28px;
  --fs-2xl: 24px;   --lh-2xl: 32px;
  --fs-3xl: 30px;   --lh-3xl: 36px;
  --fs-4xl: 36px;   --lh-4xl: 40px;
  --fs-5xl: 48px;   --lh-5xl: 1;
  --fs-6xl: 60px;   --lh-6xl: 1;

  /* Radius — Tailwind values */
  --r-md: 6px;
  --r-lg: 8px;
  --r-xl: 12px;
  --r-2xl: 16px;
  --r-3xl: 24px;
  --r-full: 9999px;

  /* Surfaces — approved dark backgrounds, flat only.
     Neutral greys throughout. The previous warm black was chosen to sit with
     an amber accent and reads muddy next to the logo red, so it is gone. */
  --bg: #000000;
  --bg-alt: #181818;
  --surface: #1F1F1F;
  --surface-raised: #272727;
  --line: #313131;
  --line-strong: #454545;

  /* Text */
  --text: #FFFFFF;
  --text-muted: #9B9B9B;

  /* Accent — taken from the logo.
     Two reds on purpose. The bright one is for text, icons, and hairlines on a
     dark background, where it hits 5.2:1. The deep one is for filled buttons,
     where it hits 5.6:1 against white label text. Using one red for both would
     fail contrast at one end or the other. */
  --accent: #F5233F;
  --accent-hover: #FF4D63;
  --accent-strong: #CF0F2D;
  --accent-press: #A80A22;
  --accent-ink: #FFFFFF;

  /* Errors are amber, not red. With a red brand, a red error message reads as
     decoration rather than a warning. */
  --danger: #FFB84D;

  /* Motion */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 700ms;

  /* Layout */
  --measure: 680px;
  --shell: 1200px;
}

/* ---------- Reset ---------- */

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background-color: var(--bg);
  color: var(--text);
  font-family: Geist, Manrope, system-ui, sans-serif;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 400;
  text-wrap: pretty;
  -webkit-font-smoothing: antialiased;
}

img, svg { display: block; max-width: 100%; }
h1, h2, h3, h4, p, ul, ol, figure, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; }

/* Focus is never optional */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: var(--r-md);
}

.skip-link {
  position: absolute;
  left: var(--sp-200);
  top: var(--sp-200);
  z-index: 100;
  padding: var(--sp-75) var(--sp-100);
  border-radius: var(--r-lg);
  background-color: var(--accent-strong);
  color: var(--accent-ink);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Layout primitives ---------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--sp-300);
}

.section { padding-block: var(--sp-900); }
.section--tight { padding-block: var(--sp-700); }
.section--warm { background-color: var(--bg-alt); }
.section--surface { background-color: var(--surface); }

.measure { max-width: var(--measure); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--accent);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.section-head { max-width: var(--measure); margin-bottom: var(--sp-600); }

.h2 {
  font-size: var(--fs-4xl);
  line-height: var(--lh-4xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.h3 {
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.lede {
  margin-top: var(--sp-200);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  color: var(--text-muted);
}

.body-muted { color: var(--text-muted); }

.small {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--text-muted);
}

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-75);
  padding: var(--sp-75) var(--sp-100);
  border: 1px solid transparent;
  border-radius: var(--r-lg);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease),
              transform 200ms var(--ease);
}

.btn--primary { background-color: var(--accent-strong); color: var(--accent-ink); }
.btn--primary:hover { background-color: var(--accent); }
.btn--primary:active { background-color: var(--accent-press); transform: scale(0.98); }

.btn--ghost {
  background-color: transparent;
  border-color: var(--line);
  color: var(--text);
}
.btn--ghost:hover { background-color: var(--surface-raised); border-color: var(--line-strong); }
.btn--ghost:active { transform: scale(0.98); }

.btn--sm { font-size: var(--fs-sm); line-height: var(--lh-sm); }
.btn--block { width: 100%; }
.btn--lg { padding: var(--sp-100) var(--sp-300); }

.btn[disabled], .btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn .spinner { display: none; }
.btn.is-loading .btn-label { opacity: 0.6; }
.btn.is-loading .spinner { display: inline-flex; }

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-top-color: var(--accent-ink);
  border-radius: var(--r-full);
  animation: spin 800ms linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.link-quiet {
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--line-strong);
  padding-bottom: var(--sp-25);
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-quiet:hover { color: var(--text); border-color: var(--accent); }

.link-accent {
  color: var(--accent);
  text-decoration: none;
  font-weight: 500;
  transition: color var(--dur) var(--ease);
}
.link-accent:hover { color: var(--accent-hover); }

/* ---------- Fluid island nav ---------- */

.nav-wrap {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-inline: var(--sp-300);
  pointer-events: none;
}

.nav {
  margin-top: var(--sp-300);
  margin-inline: auto;
  width: max-content;
  max-width: 100%;
  display: flex;
  align-items: center;
  gap: var(--sp-300);
  padding: var(--sp-75) var(--sp-75) var(--sp-75) var(--sp-200);
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background-color: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  pointer-events: auto;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav:hover { border-color: var(--line-strong); }

.brand {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.brand .mark { width: 24px; height: 24px; flex: none; }

/* Real logo. Hidden until the files are present.
   The supplied lockup stacks car over TRANSPORT over BUDDY at roughly 2.7:1, so
   at any header size BUDDY collapses into an illegible smear. The header
   therefore gets the car silhouette alone plus live wordmark text, which also
   keeps the brand name selectable and in the DOM. The footer has the vertical
   room for the full lockup. */
.brand-logo { display: none; width: auto; }
html[data-logo="on"] .brand-logo { display: block; }
html[data-logo="on"] .brand .mark { display: none; }

.nav .brand-logo, .footer .brand-logo:not([data-full]) { height: 20px; }

.footer .brand-logo[data-full] { height: 52px; }
html[data-logo="on"] .footer .brand { align-items: flex-start; }
html[data-logo="on"] .footer .brand span { display: none; }

.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-200);
}
.nav-links a {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--text-muted);
  text-decoration: none;
  padding: var(--sp-50) var(--sp-75);
  border-radius: var(--r-full);
  white-space: nowrap;
  transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.nav-links a:hover { color: var(--text); background-color: var(--surface-raised); }
.nav-links a[aria-current="true"] { color: var(--text); background-color: var(--surface-raised); }

.nav-tail { display: flex; align-items: center; gap: var(--sp-75); }

/* Hamburger that morphs into an X */
.burger {
  position: relative;
  display: none;
  width: 40px; height: 40px;
  border: 1px solid var(--line);
  border-radius: var(--r-full);
  background-color: transparent;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.burger:hover { background-color: var(--surface-raised); border-color: var(--line-strong); }
.burger:active { transform: scale(0.98); }

.burger span {
  position: absolute;
  left: 50%;
  width: 16px;
  height: 2px;
  border-radius: var(--r-full);
  background-color: var(--text);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.burger span:nth-child(1) { top: 16px; transform: translateX(-50%); }
.burger span:nth-child(2) { top: 22px; transform: translateX(-50%); }

.burger[aria-expanded="true"] span:nth-child(1) {
  top: 19px;
  transform: translateX(-50%) rotate(45deg);
}
.burger[aria-expanded="true"] span:nth-child(2) {
  top: 19px;
  transform: translateX(-50%) rotate(-45deg);
}

/* Full screen menu */
.menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--sp-300);
  padding: var(--sp-900) var(--sp-300) var(--sp-600);
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(48px);
  -webkit-backdrop-filter: blur(48px);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.menu[data-open="true"] { opacity: 1; visibility: visible; }

.menu-list { display: flex; flex-direction: column; gap: var(--sp-200); }

.menu-list a {
  display: block;
  font-size: var(--fs-3xl);
  line-height: var(--lh-3xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-decoration: none;
  opacity: 0;
  transform: translateY(48px);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease), color var(--dur) var(--ease);
}
.menu-list a:hover { color: var(--accent); }
.menu[data-open="true"] .menu-list a { opacity: 1; transform: translateY(0); }
.menu[data-open="true"] .menu-list a:nth-child(1) { transition-delay: 100ms; }
.menu[data-open="true"] .menu-list a:nth-child(2) { transition-delay: 150ms; }
.menu[data-open="true"] .menu-list a:nth-child(3) { transition-delay: 200ms; }
.menu[data-open="true"] .menu-list a:nth-child(4) { transition-delay: 250ms; }
.menu[data-open="true"] .menu-list a:nth-child(5) { transition-delay: 300ms; }

.menu-foot {
  opacity: 0;
  transform: translateY(48px);
  transition: transform var(--dur) var(--ease), opacity var(--dur) var(--ease);
  transition-delay: 350ms;
}
.menu[data-open="true"] .menu-foot { opacity: 1; transform: translateY(0); }

body.is-locked { overflow: hidden; }

/* ---------- Hero ---------- */

.hero { padding-top: var(--sp-700); padding-bottom: var(--sp-900); }

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-700);
  align-items: start;
}

.hero h1 {
  max-width: var(--measure);
  margin-top: var(--sp-300);
  font-size: var(--fs-5xl);
  line-height: 1.05;
  font-weight: 600;
  letter-spacing: -0.03em;
  text-wrap: balance;
  background-image: linear-gradient(to right, #FFFFFF, #9B9B9B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero-sub {
  max-width: var(--measure);
  margin-top: var(--sp-300);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  color: var(--text-muted);
}

.hero-proof {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-100) var(--sp-300);
  margin-top: var(--sp-400);
  padding-top: var(--sp-400);
  border-top: 1px solid var(--line);
  max-width: var(--measure);
}
.hero-proof li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--text-muted);
}
.hero-proof svg { color: var(--accent); flex: none; }

/* ---------- Quote card ---------- */

.quote-card {
  padding: var(--sp-400);
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background-color: var(--surface);
}

.quote-card h2 {
  font-size: var(--fs-xl);
  line-height: var(--lh-xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-200);
  margin-top: var(--sp-300);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-200); }

.field { display: flex; flex-direction: column; gap: var(--sp-50); }

/* Repeatable vehicle blocks. A fieldset rather than a div because that is what
   a group of controls with one label IS, and it is what makes a screen reader
   announce "Vehicle 2" before reading the ZIP field inside it. */
.vehicles { display: grid; gap: var(--sp-200); }

.vehicle-block {
  display: grid;
  gap: var(--sp-200);
  border: 0;
  padding: 0;
  margin: 0;
  min-width: 0;            /* a fieldset defaults to min-content and breaks the grid */
}

/* Only the second and subsequent blocks get a rule above them. The first needs
   no separating from itself, and a box around a single vehicle makes the common
   case look like the exception. */
.vehicles .vehicle-block + .vehicle-block {
  border-top: 1px solid var(--line);
  padding-top: var(--sp-300);
}

.vehicle-legend {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--sp-100);
  width: 100%;
  padding: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--text-muted);
}
/* Hidden while there is one vehicle, so the block reads as an ordinary form. */
.vehicles .vehicle-block:only-child .vehicle-legend { display: none; }

.vehicle-remove {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

.add-vehicle { justify-self: start; }
.add-vehicle[disabled] { opacity: 0.5; cursor: not-allowed; }

@media (max-width: 620px) {
  /* The two ZIPs stop fitting side by side well before the rest of the form
     does, and a batch makes that worse by repeating the row. */
  .vehicle-block .form-row { grid-template-columns: 1fr; }
}

.field label {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 500;
  color: var(--text-muted);
}

.field input,
.field select {
  width: 100%;
  padding: var(--sp-100);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background-color: var(--bg);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
  appearance: none;
}
.field input::placeholder { color: #5A5A5A; }
.field input:hover,
.field select:hover { border-color: var(--line-strong); }
.field input:focus-visible,
.field select:focus-visible { outline-offset: 0; border-color: var(--accent); }

.field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%239B9B9B'%3E%3Cpath d='M213.66 101.66l-80 80a8 8 0 01-11.32 0l-80-80A8 8 0 0148 88h160a8 8 0 015.66 13.66z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-100) center;
  background-size: 16px 16px;
  padding-right: var(--sp-500);
}

.field[data-invalid="true"] input,
.field[data-invalid="true"] select { border-color: var(--danger); }

.field-error {
  display: none;
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--danger);
}
.field[data-invalid="true"] .field-error { display: block; }

/* Honeypot. Moved off screen rather than display:none or visibility:hidden,
   because the form-fillers worth catching skip anything the CSS says is hidden
   and complete anything it does not. Not a size-zero box either: some of them
   read the computed height. Paired with aria-hidden and tabindex="-1" in the
   markup, so it is invisible to a screen reader and unreachable by keyboard —
   a sighted mouse user and a blind keyboard user must not get different
   outcomes from the same form. */
.hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form-note {
  margin-top: var(--sp-100);
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--text-muted);
}

.form-status {
  display: none;
  margin-top: var(--sp-200);
  padding: var(--sp-200);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background-color: var(--surface-raised);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
}
.form-status[data-state="error"] { display: block; border-color: var(--danger); color: var(--danger); }
.form-status[data-state="sent"] { display: block; }

.quote-success {
  display: none;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--sp-200);
}
.quote-card[data-sent="true"] .quote-success { display: flex; }
.quote-card[data-sent="true"] .quote-body { display: none; }

.success-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--r-full);
  background-color: var(--surface-raised);
  color: var(--accent);
}

/* ---------- Scroll scrub ----------
   Scroll position drives video.currentTime. The tall section supplies the scroll
   distance; the stage sticks to the viewport inside it.
   ------------------------------------------------------------------------- */

.scrub {
  position: relative;
  /* 300vh was three full screens of pure scroll before the page resumed, and it
     measured at roughly 7 seconds of deliberate scrolling to traverse. */
  min-height: 250vh;
  background-color: var(--bg);
}

.scrub-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

.scrub-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
  /* The footage is not a clean black void, a lit garage wall enters on the right.
     Feathering the vertical edges lets it dissolve into the page instead of
     ending on a hard rectangle. This is a mask, not a background gradient. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%);
}

/* Flat scrim, not a gradient. Video is busy and the copy has to stay legible. */
.scrub-scrim {
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.45);
}

.scrub-copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-inline: var(--sp-300);
  pointer-events: none;
}

.scrub-beat {
  position: absolute;
  max-width: var(--measure);
  text-align: center;
  font-size: var(--fs-4xl);
  line-height: var(--lh-4xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
  opacity: 0;
  transform: translateY(16px);
  /* Out fast, in slow. Equal durations leave two centred lines legible on top of
     each other through the whole cross fade, which reads as a rendering bug. */
  transition: opacity 300ms var(--ease), transform 300ms var(--ease);
}
.scrub-beat.is-on {
  opacity: 1;
  transform: translateY(0);
  transition-duration: var(--dur);
}

.scrub-progress {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background-color: var(--line);
}
.scrub-progress span {
  display: block;
  height: 100%;
  background-color: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@media (min-width: 900px) {
  .scrub-beat { font-size: var(--fs-5xl); line-height: 1.1; }
}

/* A 16:9 clip covered into a portrait viewport crops down to a single wheel and
   the whole point of the shot is lost. Below the landscape breakpoint the frame
   is shown whole and the copy moves into the black space beneath it. */
@media (max-width: 899px) {
  .scrub-video {
    object-fit: contain;
    object-position: 50% 38%;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .scrub-copy { align-items: flex-end; padding-bottom: 16vh; }
  .scrub-scrim { background-color: rgba(0, 0, 0, 0.25); }
}

@media (max-width: 620px) {
  .scrub { min-height: 220vh; }
  .scrub-beat { font-size: var(--fs-2xl); line-height: var(--lh-2xl); }
}

/* No scrubbing without motion. Collapse to one screen, hold the poster frame,
   and stack the three lines as ordinary copy. */
@media (prefers-reduced-motion: reduce) {
  .scrub { min-height: 0; }
  .scrub-stage { position: static; height: auto; min-height: 60vh; }
  .scrub-copy {
    position: static;
    flex-direction: column;
    gap: var(--sp-300);
    padding-block: var(--sp-800);
  }
  .scrub-beat { position: static; opacity: 1; transform: none; }
  .scrub-progress { display: none; }
}

/* ---------- Credential strip ---------- */

.credstrip {
  border-block: 1px solid var(--line);
  background-color: var(--bg-alt);
  padding-block: var(--sp-300);
}
.credstrip ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-200) var(--sp-500);
}
.credstrip li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-75);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--text-muted);
}
.credstrip strong { color: var(--text); font-weight: 600; }
.credstrip svg { color: var(--accent); flex: none; }

/* ---------- Icons (Phosphor) ---------- */

i.ph, i[class^="ph-"], i[class*=" ph-"] {
  display: inline-flex;
  line-height: 1;
  font-style: normal;
}
.icon-chip i { font-size: 24px; }
.hero-proof i, .credstrip i, .finale-reassure i { font-size: 16px; color: var(--accent); }
.compare-col li i { font-size: 20px; margin-top: var(--sp-25); flex: none; }
.compare-col--muted li i { color: var(--text-muted); }
.compare-col--accent li i { color: var(--accent); }
.btn i { font-size: 16px; }
.faq summary i { font-size: 20px; }

/* ---------- Generic cards ---------- */

.grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-300);
}
.grid--2 { grid-template-columns: 1fr; }
.grid--3 { grid-template-columns: 1fr; }

.card {
  padding: var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background-color: var(--surface);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}
.card:hover {
  background-color: var(--surface-raised);
  border-color: var(--line-strong);
  transform: translateY(-2px);
}
.card p { margin-top: var(--sp-75); color: var(--text-muted); }

.icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  margin-bottom: var(--sp-200);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-xl);
  background-color: var(--bg);
  color: var(--accent);
}

/* Benefit list */
.benefits { display: grid; gap: var(--sp-300); grid-template-columns: 1fr; }
.benefit {
  display: flex;
  gap: var(--sp-200);
  padding: var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background-color: var(--surface);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.benefit:hover { background-color: var(--surface-raised); border-color: var(--line-strong); }
.benefit .icon-chip { margin-bottom: 0; flex: none; }
.benefit b { display: block; font-weight: 600; }
.benefit p { margin-top: var(--sp-50); color: var(--text-muted); }

/* Cost comparison */
.compare { display: grid; grid-template-columns: 1fr; gap: var(--sp-300); }
.compare-col {
  padding: var(--sp-400);
  border: 1px solid var(--line);
  border-radius: var(--r-3xl);
  background-color: var(--surface);
}
.compare-col--accent { border-color: var(--accent); }
.compare-col ul { display: flex; flex-direction: column; gap: var(--sp-200); margin-top: var(--sp-300); }
.compare-col li {
  display: flex;
  gap: var(--sp-100);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--text-muted);
}
.compare-col li svg { flex: none; margin-top: var(--sp-50); }
.compare-col--accent li svg { color: var(--accent); }

/* Steps */
.steps { counter-reset: step; display: grid; grid-template-columns: 1fr; gap: var(--sp-300); }
.step {
  padding: var(--sp-300);
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background-color: var(--surface);
}
.step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px; height: 40px;
  margin-bottom: var(--sp-200);
  border-radius: var(--r-full);
  background-color: var(--accent-strong);
  color: var(--accent-ink);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  font-weight: 600;
}
.step p { margin-top: var(--sp-75); color: var(--text-muted); }

/* ---------- Tagline reveal ---------- */

.tagline { padding-block: var(--sp-900); }
.tagline p {
  max-width: var(--measure);
  font-size: var(--fs-4xl);
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.tagline .word {
  color: rgba(255, 255, 255, 0.3);
  transition: color 700ms var(--ease);
}
.tagline .word.is-lit { color: var(--text); }

/* ---------- FAQ ---------- */

.faq { display: flex; flex-direction: column; gap: var(--sp-100); max-width: 880px; }

.faq details {
  border: 1px solid var(--line);
  border-radius: var(--r-2xl);
  background-color: var(--surface);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.faq details:hover { border-color: var(--line-strong); }
.faq details[open] { background-color: var(--surface-raised); }

.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-200);
  padding: var(--sp-300);
  font-size: var(--fs-lg);
  line-height: var(--lh-lg);
  font-weight: 500;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { flex: none; color: var(--text-muted); transition: transform var(--dur) var(--ease); }
.faq details[open] summary svg { transform: rotate(45deg); color: var(--accent); }

.faq .answer {
  padding: 0 var(--sp-300) var(--sp-300);
  color: var(--text-muted);
  max-width: 680px;
}

/* ---------- Final CTA ---------- */

.finale {
  padding: var(--sp-700) var(--sp-400);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-3xl);
  background-color: var(--surface);
  text-align: center;
}
.finale h2 {
  max-width: var(--measure);
  margin-inline: auto;
  font-size: var(--fs-4xl);
  line-height: var(--lh-4xl);
  font-weight: 600;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.finale .lede { margin-inline: auto; max-width: var(--measure); }
.finale-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-200);
  margin-top: var(--sp-400);
}
.finale-reassure {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--sp-100) var(--sp-300);
  margin-top: var(--sp-300);
}
.finale-reassure li {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-50);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--text-muted);
}
.finale-reassure svg { color: var(--accent); flex: none; }

/* ---------- Footer ---------- */

.footer {
  border-top: 1px solid var(--line);
  background-color: var(--bg-alt);
  padding-block: var(--sp-700) var(--sp-400);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-500);
}
.footer h3 {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  font-weight: 600;
  color: var(--text);
  margin-bottom: var(--sp-200);
}
.footer ul { display: flex; flex-direction: column; gap: var(--sp-100); }
.footer a { text-decoration: none; }
.footer li, .footer address {
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  color: var(--text-muted);
  font-style: normal;
}
.footer li a {
  color: var(--text-muted);
  transition: color var(--dur) var(--ease);
}
.footer li a:hover { color: var(--text); }

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-200);
  margin-top: var(--sp-600);
  padding-top: var(--sp-300);
  border-top: 1px solid var(--line);
}
.footer-bottom p, .footer-bottom li {
  font-size: var(--fs-xs);
  line-height: var(--lh-xs);
  color: var(--text-muted);
}
.footer-bottom ul { flex-direction: row; gap: var(--sp-300); }

/* ---------- Scroll reveal ---------- */

/* Scoped to .js so that a script failure never hides the page content. */
.js .reveal {
  opacity: 0;
  transform: translateY(64px);
  filter: blur(12px);
  transition: opacity 800ms var(--ease), transform 800ms var(--ease), filter 800ms var(--ease);
  will-change: opacity, transform;
}
.js .reveal.is-in { opacity: 1; transform: translateY(0); filter: blur(0); }

/* ---------- Simple content pages ---------- */

.prose { max-width: 680px; }
.prose h2 {
  margin-top: var(--sp-600);
  font-size: var(--fs-2xl);
  line-height: var(--lh-2xl);
  font-weight: 600;
  letter-spacing: -0.01em;
}
.prose p, .prose li { margin-top: var(--sp-200); color: var(--text-muted); }
.prose ul { list-style: disc; padding-left: var(--sp-300); }

/* ---------- 404 ---------- */

.notfound {
  min-height: 72vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}
.notfound .code {
  font-family: "Geist Mono", ui-monospace, monospace;
  font-size: var(--fs-6xl);
  line-height: var(--lh-6xl);
  font-weight: 600;
  color: var(--accent);
  letter-spacing: -0.04em;
}

/* ---------- Responsive ---------- */

@media (min-width: 640px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .compare { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (min-width: 900px) {
  .hero h1 { font-size: var(--fs-6xl); }
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: var(--sp-800); align-items: center; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .steps { grid-template-columns: repeat(3, 1fr); }
  .benefits { grid-template-columns: 1fr 1fr; }
  .footer-grid { grid-template-columns: 2fr 1fr 1fr 1.4fr; }
  .tagline p { font-size: var(--fs-5xl); line-height: 1.15; }
  .h2 { font-size: var(--fs-4xl); }
  .menu { display: none; }
  .burger { display: none; }
}

@media (max-width: 899px) {
  .nav-links { display: none; }
  /* Only offer the burger when the script that drives it is running. */
  .js .burger { display: block; }
  html:not(.js) .nav-links { display: flex; flex-wrap: wrap; justify-content: center; }
  /* The pill has no room for both. The menu and the hero form both carry the CTA. */
  .js .nav-tail .btn { display: none; }
  .nav { width: 100%; justify-content: space-between; }
  .section { padding-block: var(--sp-700); }
  .quote-card { padding: var(--sp-300); }
  .finale { padding: var(--sp-600) var(--sp-300); }
}

@media (max-width: 420px) {
  .form-row { grid-template-columns: 1fr; }
  .hero h1 { font-size: var(--fs-4xl); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .js .reveal { opacity: 1; transform: none; filter: none; }
  .tagline .word { color: var(--text); }
  /* Kill the loading animation outright rather than letting the global rule
     above fast forward it to its last frame, which is an empty road. With no
     animation the SVG shows its authored state: truck parked, ramp down,
     car waiting at the bottom of it. */
  .loadstrip * { animation: none !important; }
  .tb-speed { opacity: 0; }
}