/* ==========================================================================
   Link Mobility — website styles
   Built to Link Brand Guideline v1.0 (Bantu Technologies Group), on the
   page mockups supplied for the site (Home, Riders, Drivers, FAQ). Palette,
   typography and voice rules are brand-locked: see BRAND-NOTES.md before
   changing any token in :root. legal.css builds on these tokens for
   /privacy and /terms.
   ========================================================================== */

/* --- Fonts ---------------------------------------------------------------
   Self-hosted variable fonts, latin subset. No external requests.
   Work Sans = display (headlines, wordmarks). Inter = every supporting word.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Work Sans';
  src: url('fonts/work-sans.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('fonts/inter.woff2') format('woff2-variations');
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* --- Tokens -------------------------------------------------------------- */
:root {
  /* Primary — brand guide, Colour section */
  --signal-blue: #0004FF;
  --deep-blue:   #0205A7;
  --ink:         #1F1F1F;
  --pale-yellow: #FBFDA4;

  /* Extended palette */
  --mid-blue:    #4649FF;
  --soft-blue:   #7A7CFA;
  --pale-lav:    #E8E8FF;
  --fog-grey:    #ECEFED;
  --white:       #FFFFFF;

  /* Semantic */
  --bg:            var(--white);
  --bg-alt:        var(--fog-grey);
  --bg-invert:     var(--ink);
  --text:          var(--ink);
  --text-muted:    #5A5A5A;
  --text-on-dark:  var(--white);
  --muted-on-dark: rgba(255, 255, 255, 0.72);
  --rule:          rgba(31, 31, 31, 0.12);
  --rule-on-dark:  rgba(255, 255, 255, 0.14);
  --field:         #F7F8F8;
  --field-rule:    #D9DDDB;
  --error:         #B42318;
  --success:       #17633C;

  /* Type — Work Sans display, Inter body @ 170% leading per guide */
  --font-display: 'Work Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-body: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --leading-body: 1.7;

  --step-h1:   clamp(2.75rem, 4.6vw, 4.5rem);
  --step-h2:   clamp(1.75rem, 2.4vw, 2.25rem);
  --step-h3:   clamp(1.375rem, 2vw, 1.75rem);
  --step-body: 1rem;
  --step-lead: clamp(1.0625rem, 1.4vw, 1.25rem);
  --step-small: 0.875rem;

  /* Space + shape */
  --gutter: clamp(1rem, 4.2vw, 3.75rem);
  --maxw: calc(1320px + 2 * var(--gutter));
  --header-h: 72px;
  --radius: 4px;
  --radius-lg: 10px;
  --radius-card: 20px;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur: 220ms;
}

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

html { scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1.5rem); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--step-body);
  line-height: var(--leading-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.08;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--step-h1); line-height: 1.04; }
h2 { font-size: 2rem; }
h3, h4 { font-weight: 700; letter-spacing: -0.025em; line-height: 1.1; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a, button { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

/* Emphasis in a headline: Signal Blue on white. Over a photograph it is the
   reward colour instead, because Signal Blue on a photo fails contrast and
   every headline that uses it there is about money coming back. */
h1 em, h2 em { font-style: normal; color: var(--signal-blue); }
.home-hero h1 em, .photo-hero h1 em { color: var(--pale-yellow); }

:focus-visible {
  outline: 3px solid var(--signal-blue);
  outline-offset: 3px;
  border-radius: 2px;
}
.on-ink :focus-visible, .header :focus-visible, .footer :focus-visible, .home-hero :focus-visible,
.photo-hero :focus-visible, .callout :focus-visible { outline-color: var(--pale-yellow); }

.skip-link {
  position: fixed; left: 1rem; top: -100px; z-index: 100;
  background: var(--white); color: var(--ink);
  padding: 0.75rem 1.25rem; border-radius: var(--radius);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: 0.5rem; }

.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 primitives --------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Home, Riders and Drivers open on a photograph and lay a white sheet with
   rounded top corners over its bottom edge. */
.on-ink { background: var(--ink); }

.white-sheet {
  position: relative;
  background: var(--white);
  border-radius: 56px 56px 0 0;
  padding: 78px 0 80px;
}
.home-hero + .white-sheet, .photo-hero + .white-sheet { margin-top: -60px; }

/* Sentence case, always: the brand guide rules out all caps. */
.eyebrow {
  display: flex; align-items: center; gap: 0.6rem;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-small); line-height: 1.4; letter-spacing: 0.01em;
  color: var(--signal-blue);
}
.eyebrow .pin { width: 0.5em; height: 1.6em; flex: none; }
.eyebrow--muted { color: var(--text-muted); }
.eyebrow--dot::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }

.fineprint { font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted); }

/* --- Buttons ------------------------------------------------------------- */
.button-row { display: flex; flex-wrap: wrap; gap: 12px; }

.pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 52px; padding: 14px 24px;
  border: 0; border-radius: 100px;
  background: var(--signal-blue); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 1rem; line-height: 1.35;
  text-align: center; white-space: nowrap;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.pill:hover { background: var(--deep-blue); transform: translateY(-2px); }
.pill:disabled { opacity: 0.6; cursor: default; transform: none; }
.pill--light { background: var(--white); color: var(--ink); }
.pill--light:hover { background: var(--pale-lav); }
.pill--light-blue { background: var(--white); color: var(--signal-blue); }
.pill--light-blue:hover { background: var(--pale-lav); }
.pill--quiet { background: var(--fog-grey); color: var(--ink); }
.pill--quiet:hover { background: #DDE2DF; }

/* "How it works for riders →": dark text and an arrow in a grey circle. */
.text-link {
  display: inline-flex; align-items: center; gap: 10px;
  min-height: 44px; margin-top: 32px;
  color: var(--ink); font-weight: 500; font-size: var(--step-small);
}
.text-link .arrow-circle { width: 32px; height: 32px; background: var(--fog-grey); color: var(--ink); transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease); }
.text-link .arrow-circle svg { width: 18px; height: 18px; }
.text-link:hover .arrow-circle { background: var(--signal-blue); color: var(--white); }

/* The arrow in a circle: an icon, so it takes the colour of its text. */
.arrow-circle {
  display: flex; flex: none; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--white); color: var(--ink);
}
.arrow-circle svg { width: 24px; height: 24px; }

/* --- Announcement + header ----------------------------------------------- */
.announcement {
  background: var(--signal-blue); color: var(--white);
  font-size: 0.75rem; line-height: 1.5; letter-spacing: 0.01em;
  padding-block: 8px;
}

.header {
  position: sticky; top: 0; z-index: 30;
  min-height: var(--header-h);
  background: var(--ink); color: var(--white);
  border-bottom: 1px solid var(--rule-on-dark);
}
.header__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  min-height: var(--header-h);
}
.header__logo { --link-logo-dot: var(--signal-blue); display: block; color: var(--white); }
.header__logo svg { width: 96px; height: auto; }

.header__nav { display: flex; gap: 4px; }
.header__nav a {
  display: flex; align-items: center;
  min-height: 44px; padding: 10px 14px; border-radius: 8px;
  font-size: 0.9375rem;
}
.header__nav a:hover { background: rgba(255, 255, 255, 0.09); }
.header__nav a[aria-current="page"] { background: rgba(255, 255, 255, 0.09); color: var(--pale-lav); }

.header__actions { display: flex; align-items: center; gap: 12px; }
.header__actions .pill { min-height: 44px; padding: 9px 18px; font-size: 0.9375rem; }

.nav-toggle {
  display: none;
  min-height: 44px; padding: 8px 12px;
  background: none; border: 1px solid rgba(255, 255, 255, 0.35); border-radius: 8px;
  color: var(--white); font-size: var(--step-small);
}

/* --- Home hero ----------------------------------------------------------- */
.home-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-end;
  min-height: 866px; color: var(--white);
}
.home-hero > img, .home-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.home-hero > img { object-fit: cover; object-position: center 30%; }
/* The headline is white over a bright photo: a scrim under it keeps it legible. */
.home-hero__shade {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0) 22%, rgba(0, 0, 0, 0.74) 100%),
    linear-gradient(90deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 60%);
}
.home-hero__inner {
  position: relative; width: 100%; max-width: 1600px; margin-inline: auto;
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
  padding: 0 var(--gutter) 118px;
}
.home-hero h1 { max-width: 8.2em; font-size: clamp(3rem, 6.1vw, 5.5rem); line-height: 0.93; letter-spacing: -0.04em; }

.hero-side { flex: none; display: flex; flex-direction: column; align-items: flex-start; gap: 64px; }
.hero-stats { display: flex; gap: 9px; }
.hero-stat {
  display: flex; flex-direction: column; justify-content: space-between;
  width: 178px; min-height: 185px; padding: 16px 16px 14px;
  border-radius: 14px; background: rgba(255, 255, 255, 0.94); color: var(--ink);
  transition: transform var(--dur) var(--ease);
}
.hero-stat:hover { transform: translateY(-4px); }
.hero-stat strong {
  font-family: var(--font-display); font-weight: 700;
  font-size: 4rem; line-height: 1; letter-spacing: -0.05em;
}
.hero-stat--reward strong { color: var(--signal-blue); }
.hero-stat > span {
  display: flex; align-items: end; justify-content: space-between; gap: 10px;
  font-size: 1rem; line-height: 1.15; color: #4A4A4A;
}
.hero-stat .arrow-circle { width: 30px; height: 30px; background: var(--ink); color: var(--white); }
.hero-stat .arrow-circle svg { width: 18px; height: 18px; }
.hero-stat--reward .arrow-circle { background: var(--signal-blue); }

/* --- Home: the problem --------------------------------------------------- */
.split-intro { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; }
.split-intro > .eyebrow, .people-intro > .eyebrow, .section-heading > .eyebrow { font-size: 1.125rem; }
.split-intro > .eyebrow { align-self: start; padding-top: 10px; }
/* The large statements are set in the body face, as the mockups have them. */
.intro-copy {
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.5; letter-spacing: -0.015em;
}
.intro-copy h2 { font: inherit; letter-spacing: inherit; }
.intro-copy > * + * { margin-top: 1.5em; }

.problem-grid {
  display: grid; grid-template-columns: 1.11fr 1fr 1.11fr 1fr; gap: 29px;
  margin-top: 110px;
}
.problem-card, .problem-grid > img {
  min-height: 430px; height: 100%; border-radius: var(--radius-card); overflow: hidden;
}
.problem-grid > img { width: 100%; object-fit: cover; }
.problem-card {
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 24px 18px 22px; color: var(--white);
  transition: transform var(--dur) var(--ease);
}
.problem-card:hover { transform: translateY(-4px); }
.problem-card--ink { background: var(--ink); }
.problem-card--blue { background: var(--signal-blue); }
.problem-card > .arrow-circle { align-self: flex-end; width: 62px; height: 62px; }
.problem-card--blue > .arrow-circle { color: var(--signal-blue); }
.problem-card h3 { font-size: 2.5rem; }
.problem-card p { margin-top: 18px; font-size: 1.125rem; line-height: 1.35; }

/* --- Home: who it's for -------------------------------------------------- */
.people {
  display: grid; grid-template-columns: 0.84fr 1fr 0.87fr; gap: 40px; align-items: start;
  padding: 110px 0 64px;
}
.people-intro > p:not(.eyebrow) {
  margin-top: 24px;
  font-family: var(--font-body); font-weight: 400;
  font-size: clamp(1.25rem, 2vw, 1.75rem); line-height: 1.5; letter-spacing: -0.015em;
}
.audience img {
  width: 100%; height: 564px; object-fit: cover;
  border-radius: var(--radius-card); margin-bottom: 100px;
}
.audience--second img { height: 447px; margin-top: 117px; }
.audience h3 { margin: 10px 0 12px; font-size: 1.625rem; line-height: 1.05; }
.audience > p:not(.eyebrow) { color: var(--text-muted); }

/* --- Section heading ----------------------------------------------------- */
.section-heading {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; align-items: start;
  margin-bottom: 36px;
}
.section-heading > .eyebrow { padding-top: 8px; }
.section-heading h2 { font-family: var(--font-body); font-weight: 400; font-size: clamp(1.75rem, 3vw, 2.75rem); line-height: 1.2; letter-spacing: -0.025em; }

/* --- Calculator ----------------------------------------------------------
   The mockups' look on the one-page site's calculator: white controls and
   result cards on a Fog Grey panel, and the weekly difference on Signal Blue. */
.calculator-section { padding: 48px 0; }
.calculator {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 56px;
  padding: 28px; border-radius: 30px; background: var(--fog-grey);
}
.calc-controls {
  display: flex; flex-direction: column; justify-content: space-around; gap: 28px;
  padding: 28px 24px; border-radius: 16px; background: var(--white);
}
.calc-control__head {
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  margin-bottom: 6px; color: var(--text-muted); line-height: 1.4;
}
.calc-control output { color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 1.125rem; font-variant-numeric: tabular-nums; white-space: nowrap; }
.calc-control__hint { margin-top: -2px; font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }

.calc-control input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 44px; margin: 0; background: transparent; cursor: pointer;
  --fill: 50%;
}
.calc-control input[type="range"]::-webkit-slider-runnable-track {
  height: 8px; border-radius: 8px;
  background: linear-gradient(to right, var(--signal-blue) var(--fill), var(--fog-grey) var(--fill));
}
.calc-control input[type="range"]::-moz-range-track { height: 8px; border-radius: 8px; background: var(--fog-grey); }
.calc-control input[type="range"]::-moz-range-progress { height: 8px; border-radius: 8px; background: var(--signal-blue); }
.calc-control input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 24px; height: 24px; margin-top: -8px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--signal-blue);
  box-shadow: 0 1px 4px rgba(31, 31, 31, 0.2);
}
.calc-control input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--signal-blue);
}
.calc-control input[type="range"]:focus-visible { outline-offset: 0; }

.calc-results { display: flex; flex-direction: column; gap: 16px; }
.calc-compare { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.calc-compare > div { padding: 20px; border-radius: 16px; background: var(--white); }
.calc-compare > .calc-link { background: var(--ink); color: var(--white); }
.calc-compare .eyebrow { color: inherit; opacity: 0.8; font-size: 0.8125rem; }
.calc-compare strong {
  display: block; margin: 6px 0 4px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1.65rem; line-height: 1.2; font-variant-numeric: tabular-nums;
}
.calc-compare small { display: block; font-size: 0.8125rem; line-height: 1.4; color: var(--text-muted); }
.calc-compare .calc-link small { color: var(--muted-on-dark); }

/* The money that stays with the driver: Pale Yellow on blue, the brand's reward moment. */
.calc-saving { padding: 22px 24px; border-radius: 16px; background: var(--signal-blue); color: var(--white); }
.calc-saving .eyebrow { color: var(--white); font-size: 0.8125rem; }
.calc-saving > strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 3.5rem; line-height: 1.15; letter-spacing: -0.04em;
  color: var(--pale-yellow); font-variant-numeric: tabular-nums;
}
.calc-saving p:last-child { margin-top: 4px; font-size: var(--step-small); line-height: 1.5; }
.calc-saving p strong { font-weight: 700; white-space: nowrap; }
/* Below the break-even the figure is a shortfall, not a reward: no yellow. */
.calc-saving.is-behind > strong { color: var(--white); }
.calc-results .fineprint { padding: 0 4px; }

/* --- Where credits redeem: a ticker -------------------------------------- */
.ticker {
  position: relative; overflow: hidden;
  margin: 80px 0 110px; padding: 12px 0 18px;
  border-radius: 22px; background: var(--fog-grey);
}
.ticker > .eyebrow { padding: 0 28px; }
.ticker__viewport {
  overflow: hidden; margin-top: 6px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
}
.ticker__track { display: flex; width: max-content; animation: ticker 36s linear infinite; }
.ticker__track ul { display: flex; flex: none; }
.ticker__track li {
  display: flex; align-items: center; gap: 36px; padding-right: 36px;
  font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; color: #3D3D3D; white-space: nowrap;
}
.ticker__track li::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--soft-blue); }
.ticker.is-paused .ticker__track,
.ticker:hover .ticker__track, .ticker:focus-within .ticker__track { animation-play-state: paused; }
html:not(.js) .ticker__pause { display: none; }
.ticker__pause {
  position: absolute; top: 6px; right: 10px;
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 0; border-radius: 50%; background: transparent; color: var(--text-muted);
}
.ticker__pause:hover { background: rgba(31, 31, 31, 0.06); color: var(--ink); }
.ticker__pause svg { width: 16px; height: 16px; }
.ticker__pause .icon-play, .ticker.is-paused .ticker__pause .icon-pause { display: none; }
.ticker.is-paused .ticker__pause .icon-play { display: block; }
/* Without a label the names share the button's row: stop them short of it. */
.ticker--plain { padding: 15px 0; }
.ticker--plain .ticker__viewport { margin: 0 52px 0 0; }
.ticker--plain .ticker__pause { top: 50%; transform: translateY(-50%); }
@keyframes ticker { to { transform: translateX(-50%); } }

/* --- Call-out band ------------------------------------------------------- */
.callout {
  isolation: isolate; position: relative;
  display: flex; align-items: center;
  min-height: 316px; margin-top: 110px; padding: 48px 75px;
  border-radius: 32px; background: var(--signal-blue); color: var(--white);
}
.callout__copy { position: relative; z-index: 2; width: 46%; }
.callout h2 { max-width: 8.6em; font-size: clamp(2.25rem, 3.9vw, 3.5rem); line-height: 0.95; letter-spacing: -0.035em; }
.callout p { max-width: 560px; margin-top: 16px; font-size: clamp(1.125rem, 2vw, 1.75rem); line-height: 1.15; }
/* The art stands on the band's bottom edge and rises out of its top. */
.callout__art { position: absolute; z-index: 1; bottom: 0; left: 49.8%; width: 46%; max-width: 610px; pointer-events: none; }
.callout__art img { width: 100%; height: auto; }
/* The ride art was cut from a mockup that had a button over the right hand.
   The button stays there, placed in the art's own coordinates so it always
   covers that spot whatever size the art is drawn at. */
/* Right edge on the cut-out's right edge (1207 of 1220), centred on its
   middle (624 of 744): it can only grow leftwards, over the cut-out, and
   never past the band's edge. */
.callout__art .pill {
  position: absolute; right: 0.9%; top: 83.87%; transform: translateY(-50%);
  min-height: 56px; pointer-events: auto;
}
.callout__art .pill:hover { transform: translateY(calc(-50% - 2px)); }
/* The same button again, after the words: shown only when the band stacks. */
.callout__cta { display: none; }
.callout--wallet .callout__art { left: 48.9%; width: 26.5%; max-width: 350px; }
.callout > .pill { position: absolute; z-index: 3; right: 44px; bottom: 34px; }

/* --- Photo hero (Riders, Drivers) ---------------------------------------- */
.photo-hero {
  position: relative; overflow: hidden;
  display: flex; align-items: center;
  min-height: 826px; color: var(--white);
}
.photo-hero > img, .photo-hero__shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.photo-hero > img { object-fit: cover; object-position: center 35%; }
.photo-hero--riders > img { object-position: center 27%; }
.photo-hero--drivers > img { object-position: center 30%; }
.photo-hero__shade { background: linear-gradient(90deg, rgba(0, 0, 0, 0.74) 0%, rgba(0, 0, 0, 0.62) 40%, rgba(0, 0, 0, 0.2) 64%, transparent 80%); }
.photo-hero .wrap { position: relative; padding-top: 30px; padding-bottom: 90px; }
.photo-hero .eyebrow { color: var(--white); }
.photo-hero h1 { max-width: 620px; margin: 20px 0 24px; font-size: clamp(2.75rem, 4.5vw, 4rem); line-height: 1; letter-spacing: -0.04em; }
.photo-hero .wrap > p:not(.eyebrow) { max-width: 560px; margin-bottom: 30px; font-size: 1.25rem; line-height: 1.45; }

/* --- Riders -------------------------------------------------------------- */
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
.step {
  display: flex; flex-direction: column; align-items: start;
  min-height: 363px; padding: 30px 20px;
  border-radius: var(--radius-card); background: var(--fog-grey);
}
.step-number {
  align-self: flex-end; margin-bottom: 110px; padding: 2px 14px;
  border-radius: 30px; background: var(--signal-blue); color: var(--white);
  font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.5;
}
.step h3 { margin-top: auto; font-size: 2.125rem; line-height: 0.95; }
.step p { margin-top: 18px; color: var(--text-muted); font-size: 0.9375rem; line-height: 1.6; }

.credits-section { padding: 90px 0 100px; }
.small-heading { font-family: var(--font-body); font-weight: 400; font-size: 1.75rem; line-height: 1.5; letter-spacing: -0.015em; }
.credits-section .ticker { margin: 20px 0 70px; }
.credits-grid { display: grid; grid-template-columns: 1.22fr 1fr; gap: 20px; }
.credits-grid > img { width: 100%; height: 616px; object-fit: cover; border-radius: var(--radius-card); }
.credits-copy {
  display: flex; flex-direction: column; justify-content: space-between; gap: 60px;
  padding: 46px 28px 60px; border-radius: var(--radius-card); background: var(--fog-grey);
}
.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chips li {
  padding: 13px 24px; border-radius: 30px; background: var(--white);
  font-family: var(--font-display); font-size: 0.9375rem; font-weight: 600; line-height: 1.3;
}
.chips li:first-child { background: var(--pale-yellow); }
.credits-copy h2 { margin: 18px 0 14px; font-size: 2.25rem; line-height: 0.95; }
.credits-copy p:not(.eyebrow) { color: var(--text-muted); font-size: 1.25rem; line-height: 1.35; }
.credits-copy p + p { margin-top: 10px; }

.safety-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-top: 28px; }
.safety-grid > div { padding: 28px; border-radius: 16px; background: var(--fog-grey); }
.safety-grid h3 { font-size: 1.25rem; letter-spacing: -0.015em; }
.safety-grid p { margin-top: 12px; color: var(--text-muted); line-height: 1.6; }
.safety-grid a, .requirements .fineprint a, .safety-contact a:not(.pill) { color: var(--signal-blue); text-decoration: underline; text-underline-offset: 2px; }
.count-on > .eyebrow { font-size: 1.125rem; }

/* --- Drivers ------------------------------------------------------------- */
.day-passes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; margin-bottom: 110px; }
.day-pass {
  display: flex; flex-direction: column; justify-content: space-between; gap: 48px;
  min-height: 283px; padding: 26px 24px 28px;
  border-radius: var(--radius-card); background: var(--fog-grey);
}
.day-pass--blue { background: var(--signal-blue); color: var(--white); }
.day-pass .eyebrow { color: inherit; opacity: 0.8; }
.day-pass strong {
  display: block; margin-top: 14px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 4.5rem; line-height: 1; letter-spacing: -0.06em;
}
.day-pass small { display: block; margin-top: 6px; font-size: var(--step-small); opacity: 0.8; }
.day-pass--struck strong { color: #6E6E6E; text-decoration: line-through; text-decoration-thickness: 3px; }
.day-pass > p { line-height: 1.55; }

.requirements { display: grid; grid-template-columns: 1fr 0.96fr; gap: 41px; align-items: start; margin: 110px 0 120px; }
.requirements > img { width: 100%; height: 404px; object-fit: cover; border-radius: var(--radius-card); }
.requirements > div { padding-top: 40px; }
.requirements h2 { margin-top: 16px; font-size: 2.25rem; line-height: 0.95; }
.requirements ol { display: grid; gap: 12px; margin-top: 44px; counter-reset: needs; }
.requirements li { display: flex; align-items: center; gap: 12px; color: var(--text-muted); line-height: 1.55; counter-increment: needs; }
.requirements li::before {
  content: counter(needs);
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--signal-blue); color: var(--white);
  font-size: 0.8125rem; font-weight: 600;
}
.requirements .fineprint { margin-top: 20px; }

/* --- Plain pages: FAQ, Contact, Safety ----------------------------------- */
.page-main { padding-top: 85px; padding-bottom: 85px; min-height: 700px; }
.page-intro { margin-bottom: 64px; }
.page-intro h1 { margin-top: 18px; font-size: clamp(2.7rem, 4.5vw, 4rem); letter-spacing: -0.04em; }
.page-intro > p:last-child { max-width: 760px; margin-top: 20px; font-size: 1.25rem; line-height: 1.6; color: var(--text-muted); }
.page-intro a { color: var(--signal-blue); text-decoration: underline; text-underline-offset: 3px; }

/* --- FAQ ----------------------------------------------------------------- */
.faq-layout { display: grid; grid-template-columns: minmax(180px, 0.85fr) 1fr; gap: 64px; }
.faq-layout aside { position: sticky; top: calc(var(--header-h) + 24px); align-self: start; }
.faq-layout aside .eyebrow { margin-bottom: 18px; }
.faq-layout aside a {
  display: flex; align-items: center; width: fit-content;
  min-height: 43px; color: #4A4A4A; font-weight: 500;
}
.faq-layout aside a:hover { color: var(--signal-blue); }
.faq-group { margin-bottom: 40px; }
.faq-group h2 { margin-bottom: 16px; font-size: 1.625rem; }
.faq-item { margin-bottom: 12px; padding: 0 24px; border-radius: 12px; background: #F6F7F7; }
.faq-item summary {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding: 16px 0; cursor: pointer; list-style: none;
  font-weight: 600; line-height: 1.5;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+';
  display: grid; place-items: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--white); font-size: 1.2rem; font-weight: 400; line-height: 1;
}
.faq-item[open] summary::after { content: '\00D7'; background: var(--signal-blue); color: var(--white); }
.faq-item div { padding-bottom: 24px; color: var(--text-muted); }
.faq-item div p + p { margin-top: 10px; }
.faq-item a { color: var(--signal-blue); text-decoration: underline; text-underline-offset: 3px; }

/* --- Forms (Contact) ----------------------------------------------------- */
.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; }
.desks { display: grid; gap: 12px; margin: 22px 0 16px; }
.desk {
  display: flex; align-items: start; justify-content: space-between; gap: 14px;
  padding: 20px; border-radius: 12px; background: var(--fog-grey);
}
.desk h3 { font-size: 1.2rem; line-height: 1.3; }
.desk p { margin-top: 4px; color: var(--text-muted); line-height: 1.5; }
.desk-link {
  flex-shrink: 0; max-width: 170px; min-height: 44px; padding: 4px;
  background: none; border: 0; color: var(--signal-blue);
  font-size: var(--step-small); font-weight: 600; text-align: left;
}
.desk-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.mailboxes { margin-top: 28px; }
.mailboxes h3 { font-size: 1.2rem; margin-bottom: 8px; }
.mailboxes li { line-height: 1.9; color: var(--text-muted); }
.mailboxes a { color: var(--signal-blue); font-weight: 600; }

.form-card { padding: 28px; border: 1px solid var(--field-rule); border-radius: 24px; background: var(--white); }
.field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; font-size: 0.9375rem; font-weight: 500; color: #333; }
.field input, .field textarea, .field select {
  width: 100%; min-width: 0; min-height: 54px; padding: 15px 18px;
  border: 1px solid var(--field-rule); border-radius: 12px;
  background: var(--field); color: var(--ink); font-size: 1rem; font-weight: 400;
}
.field select {
  -webkit-appearance: none; appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%231F1F1F' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
.field textarea { min-height: 155px; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: 3px solid rgba(0, 4, 255, 0.16); outline-offset: 1px;
  border-color: var(--signal-blue); background-color: var(--white);
}
.field input::placeholder, .field textarea::placeholder { color: #767676; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form-actions small { font-size: 0.8125rem; line-height: 1.5; color: var(--text-muted); }
.form-status { margin-top: 18px; font-size: 0.95rem; line-height: 1.5; color: var(--error); }
.form-status.is-ok { color: var(--success); }
.form-status:empty { display: none; }
.form-legal { margin-top: 18px; }
.form-legal a { color: var(--signal-blue); text-decoration: underline; text-underline-offset: 2px; }

/* --- Safety -------------------------------------------------------------- */
.protection-grid { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: 32px; align-items: stretch; }
.safety-photo { width: 100%; height: 100%; min-height: 600px; object-fit: cover; border-radius: 28px; }
.protection-features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.protection-features article { padding: 26px; border-radius: 28px; background: var(--fog-grey); }
.safety-check {
  display: grid; place-items: center;
  width: 40px; height: 40px; border-radius: 16px;
  background: var(--signal-blue); color: var(--white);
}
.safety-check svg { width: 18px; height: 18px; }
.protection-features h2 { margin: 18px 0 10px; font-size: 1.25rem; line-height: 1.3; }
.protection-features p { color: var(--text-muted); line-height: 1.65; }

.safety-promise {
  display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 30px; align-items: center;
  margin: 72px 0 60px; padding: 42px;
  border-radius: 32px; background: var(--ink); color: var(--white);
}
.safety-promise .eyebrow { color: var(--pale-lav); }
.safety-promise h2 { margin-top: 14px; font-size: 1.5rem; line-height: 1.25; }
.safety-promise strong {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.5rem; line-height: 1.15; letter-spacing: -0.04em;
}
.safety-promise div > p:not(.eyebrow) { margin-top: 8px; font-size: var(--step-small); line-height: 1.5; color: var(--muted-on-dark); }

.safety-contact {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  margin-bottom: 20px; padding-top: 45px; border-top: 1px solid var(--rule);
}
.safety-contact p { max-width: 620px; color: var(--text-muted); line-height: 1.6; }
.safety-contact p + p { margin-top: 8px; }
.safety-contact p strong { color: var(--ink); }
.safety-contact .button-row { flex-shrink: 0; }

/* --- Footer -------------------------------------------------------------- */
.footer { padding: 64px 0 40px; background: var(--ink); color: #BDBDBD; }
.footer__grid { display: grid; grid-template-columns: 2.55fr 1fr 1fr 0.8fr; gap: 45px; }
.footer__logo { --link-logo-dot: var(--signal-blue); display: inline-block; color: var(--white); }
.footer__logo svg { width: 96px; height: auto; }
.footer__brand p { max-width: 260px; margin-top: 16px; font-size: var(--step-small); line-height: 1.7; }
.footer h2 { margin: 8px 0 14px; font-family: var(--font-body); font-weight: 500; font-size: var(--step-small); letter-spacing: 0.02em; color: #9E9E9E; }
.footer li a { display: flex; align-items: center; min-height: 31px; font-size: 0.9375rem; }
.footer a:hover { color: var(--white); }
.footer__bottom {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 24px;
  margin-top: 64px; padding-top: 24px;
  border-top: 1px solid var(--rule-on-dark);
  font-size: 0.8125rem; line-height: 1.6; color: #A3A3A3;
}

/* --- Responsive ---------------------------------------------------------- */
@media (min-width: 1600px) {
  .photo-hero { min-height: 880px; }
}

@media (max-width: 1240px) {
  .home-hero__inner { flex-direction: column; align-items: flex-start; gap: 40px; }
  /* Stacked, the headline sits higher, over brighter photo: the scrim rises with it. */
  .home-hero__shade { background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.8) 100%); }
  .hero-side { gap: 28px; }
  .callout { padding: 44px 48px; }
  .callout__copy { width: 48%; }
  .callout > .pill { right: 32px; bottom: 28px; }
}

@media (max-width: 1100px) {
  .header__nav a { padding: 10px 9px; }
  .home-hero { min-height: 760px; }
  .problem-grid { gap: 16px; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .problem-card { padding: 20px 16px; }
  .problem-card h3 { font-size: 2rem; }
  .problem-card p { font-size: 1rem; }
  .problem-card, .problem-grid > img { min-height: 360px; }
  .problem-card > .arrow-circle { width: 50px; height: 50px; }
  .people { gap: 26px; }
  .audience img { height: 440px; margin-bottom: 60px; }
  .audience--second img { height: 350px; margin-top: 90px; }
  .credits-grid > img { height: 540px; }
  .step { min-height: 320px; padding: 24px 16px; }
  .step-number { margin-bottom: 80px; font-size: 1.25rem; }
  .step h3 { font-size: 1.6rem; }
  .photo-hero { min-height: 680px; }
  .photo-hero .wrap > p:not(.eyebrow) { max-width: 480px; font-size: 1.1rem; }
  .day-passes { gap: 15px; }
  .day-pass { padding: 20px; }
  .day-pass strong { font-size: 3.25rem; }
  .requirements { gap: 30px; }
  .requirements > img { height: 370px; }
  .requirements > div { padding-top: 0; }
  .calculator { gap: 24px; }
  .form-card { padding: 24px; }
  .desk { flex-direction: column; gap: 8px; }
  .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 25px; }
  .protection-grid { grid-template-columns: 0.8fr 1.2fr; gap: 24px; }
  .protection-features { gap: 14px; }
  .protection-features article { padding: 22px; }
  .safety-promise { grid-template-columns: 1.4fr repeat(3, 1fr); gap: 24px; padding: 32px; }
  .safety-promise h2 { font-size: 1.25rem; }
  .safety-promise strong { font-size: 2rem; }
  .safety-contact { gap: 30px; }
  .safety-contact .button-row { flex-shrink: 1; }
}

/* The nav collapses into a menu here. It is hidden only when the script that
   opens it is running (html.js), so without JavaScript the links stay visible. */
@media (max-width: 960px) {
  .js .nav-toggle { display: block; }
  .js .header__nav {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    padding: 12px var(--gutter) 20px;
    background: var(--ink); border-top: 1px solid var(--rule-on-dark);
  }
  .js .header__nav[data-open="true"] { display: flex; flex-direction: column; gap: 3px; }
  .header__nav a { min-height: 48px; padding: 12px; font-size: 1rem; }
  html:not(.js) .header__inner { flex-wrap: wrap; padding-block: 10px; }
  html:not(.js) .header__nav { order: 3; width: 100%; flex-wrap: wrap; }

  /* The call-outs stack: words on top, the art standing on the bottom edge. */
  .callout { display: block; min-height: 0; margin-top: 64px; padding: 36px 32px 0; overflow: hidden; }
  .callout__copy { width: 100%; }
  .callout__art { position: relative; left: auto; bottom: auto; width: 78%; max-width: 480px; margin: 24px 0 0 auto; }
  .callout--wallet .callout__art { left: auto; width: 46%; max-width: 300px; margin-right: 8%; }
  .callout > .pill { position: relative; right: auto; bottom: auto; margin-top: 20px; }
  /* Stacked, the ride art's button would dwarf the spot cut out for it and
     land on the band's bottom edge. It follows the words instead, and the art
     is drawn wide enough that the hand runs off the band's right edge, taking
     the cut-out (from 74% across) with it. */
  .callout__cta { display: inline-flex; margin-top: 24px; }
  .callout__art .pill { display: none; }
  .callout--ride .callout__art { width: 520px; max-width: none; margin: 28px -172px 0 auto; }

  /* Tablets: four-up and three-up rows get too narrow to read, so they pair up. */
  .problem-grid { grid-template-columns: 1fr 1fr; }
  .people { grid-template-columns: 1fr 1fr; }
  .people-intro { grid-column: 1 / -1; }
  .calculator { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  :root { --header-h: 64px; }
  .announcement span { display: none; }
  .header__logo svg { width: 80px; }
  .header__actions .pill { padding: 9px 14px; }

  .home-hero { min-height: 680px; }
  .home-hero > img { object-position: 40% 30%; }
  .home-hero__inner { padding-bottom: 96px; gap: 28px; }
  .home-hero h1 { font-size: clamp(2.75rem, 12vw, 4rem); }
  .hero-stat { width: 140px; min-height: 140px; }
  .hero-stat strong { font-size: 3rem; }

  .white-sheet { border-radius: 32px 32px 0 0; padding: 44px 0 48px; }
  .home-hero + .white-sheet, .photo-hero + .white-sheet { margin-top: -38px; }
  .split-intro { grid-template-columns: 1fr; gap: 22px; }
  .split-intro > .eyebrow { font-size: var(--step-small); padding-top: 0; }
  .problem-grid { grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 40px; }
  .problem-card, .problem-grid > img { height: 300px; min-height: 0; }
  .problem-card > .arrow-circle { width: 40px; height: 40px; }

  .people { grid-template-columns: 1fr 1fr; gap: 30px 18px; padding: 56px 0 36px; }
  .people-intro { grid-column: 1 / -1; }
  .audience img { height: 300px; margin-bottom: 24px; }
  .audience--second img { height: 240px; margin-top: 60px; }
  .audience h3 { font-size: 1.3rem; }

  .section-heading { grid-template-columns: 1fr; gap: 14px; margin-bottom: 24px; }
  .section-heading > .eyebrow { padding-top: 0; font-size: var(--step-small); }
  .section-heading h2 { font-size: 1.6rem; }
  .calculator-section { padding: 30px 0; }
  .calculator { grid-template-columns: 1fr; gap: 15px; padding: 14px; border-radius: 22px; }
  .calc-controls { gap: 20px; padding: 20px; }
  .calc-compare { gap: 12px; }
  .calc-compare > div { padding: 18px; }
  .calc-compare strong { font-size: 1.5rem; }
  .calc-saving > strong { font-size: 2.75rem; }
  .ticker { margin: 40px 0 56px; }
  .ticker__track li { font-size: 1.0625rem; gap: 24px; padding-right: 24px; }

  .callout { padding: 28px 24px 0; border-radius: 24px; }
  .callout h2 { font-size: 2.25rem; line-height: 1.05; }
  .callout p { font-size: 1.125rem; line-height: 1.35; }
  .callout__art { width: 100%; }
  /* 1.38 x (content + right padding): 72.5% of the art fits, the rest runs off. */
  .callout--ride .callout__art { width: calc((100% + 24px) * 1.38); margin: 24px 0 0; }
  .callout--wallet .callout__art { width: 62%; }

  .photo-hero { min-height: 680px; align-items: end; }
  .photo-hero > img { object-position: 62% center; }
  .photo-hero__shade { background: linear-gradient(0deg, rgba(0, 0, 0, 0.86) 0%, rgba(0, 0, 0, 0.66) 55%, rgba(0, 0, 0, 0.1) 100%); }
  .photo-hero .wrap { padding-top: 230px; padding-bottom: 80px; }
  .photo-hero h1 { max-width: 100%; margin: 16px 0; font-size: 3rem; }
  .photo-hero .wrap > p:not(.eyebrow) { margin-bottom: 24px; font-size: 1rem; }
  .photo-hero--riders > img { object-position: 60% 15%; }
  .photo-hero--drivers > img { object-position: 52% 30%; }

  .steps { grid-template-columns: 1fr 1fr; gap: 14px; }
  .step { min-height: 280px; padding: 20px 16px; }
  .step-number { margin-bottom: 45px; font-size: 1.125rem; }
  .step h3 { font-size: 1.45rem; }
  .credits-section { padding: 50px 0 60px; }
  .credits-section .ticker { margin-bottom: 30px; }
  .credits-grid { grid-template-columns: 1fr; gap: 16px; }
  .credits-grid > img { height: 360px; }
  .credits-copy { gap: 40px; padding: 25px; }
  .credits-copy h2 { font-size: 1.9rem; }
  .credits-copy p:not(.eyebrow) { font-size: 1.0625rem; }
  .safety-grid { grid-template-columns: 1fr; gap: 12px; margin-top: 20px; }
  .safety-grid > div { padding: 24px; }

  .day-passes { grid-template-columns: 1fr; gap: 14px; margin-bottom: 45px; }
  .day-pass { min-height: 0; gap: 28px; padding: 24px; }
  .day-pass strong { font-size: 3.25rem; }
  .requirements { grid-template-columns: 1fr; gap: 28px; margin: 50px 0 60px; }
  .requirements > img { height: 260px; }
  .requirements h2 { font-size: 2rem; }
  .requirements ol { margin-top: 24px; }

  .page-main { padding-top: 48px; padding-bottom: 55px; min-height: 600px; }
  .page-intro { margin-bottom: 40px; }
  .page-intro h1 { margin-top: 16px; font-size: 2.8rem; line-height: 1.05; }
  .page-intro > p:last-child { margin-top: 18px; font-size: 1.05rem; }

  .faq-layout { grid-template-columns: 1fr; gap: 24px; }
  .faq-layout aside { position: static; display: flex; flex-wrap: wrap; gap: 0 20px; }
  .faq-layout aside .eyebrow { width: 100%; margin-bottom: 4px; }
  .faq-group h2 { font-size: 1.5rem; }
  .faq-item { padding: 0 18px; }

  .contact-grid { grid-template-columns: 1fr; gap: 28px; }
  .desk-link { max-width: none; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .form-card { padding: 22px; }

  .protection-grid { grid-template-columns: 1fr; gap: 24px; }
  .safety-photo { min-height: 0; height: 450px; object-position: center 60%; border-radius: 22px; }
  .protection-features article { padding: 22px 18px; border-radius: 20px; }
  .protection-features h2 { font-size: 1.15rem; }
  .safety-promise { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px 15px; margin: 40px 0; padding: 28px 24px; border-radius: 24px; }
  .safety-promise > div:first-child { grid-column: 1 / -1; }
  .safety-promise h2 { font-size: 1.5rem; }
  .safety-promise strong { font-size: 1.75rem; }
  .safety-promise div > p:not(.eyebrow) { font-size: 0.75rem; }
  .safety-contact { flex-direction: column; align-items: start; gap: 24px; padding-top: 30px; }

  .footer { padding-top: 45px; }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 36px 16px; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__brand p { max-width: 400px; }
  .footer li a { min-height: 44px; }
  .footer__bottom { flex-direction: column; margin-top: 40px; }
}

@media (max-width: 540px) {
  .people, .steps, .protection-features { grid-template-columns: 1fr; }
  .people-intro { grid-column: auto; }
  .audience img, .audience--second img { height: 320px; margin-top: 0; margin-bottom: 24px; }
  .audience--second { margin-top: 16px; }
  .step { min-height: 0; padding: 24px; }
  .step-number { margin-bottom: 28px; }
  .problem-card, .problem-grid > img { height: auto; min-height: 260px; }
  .problem-card h3 { font-size: 1.8rem; }
  .hero-stats { gap: 8px; }
  .hero-stat { width: 128px; min-height: 124px; padding: 14px 12px 12px; }
  .hero-stat strong { font-size: 2.5rem; }
  .hero-stat > span { font-size: 0.875rem; }
  .page-intro h1 { font-size: 2.5rem; }
  .photo-hero h1 { font-size: 2.75rem; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .calc-controls { padding: 20px 16px; }
  .calc-compare > div { padding: 16px 12px; }
}

@media (max-width: 390px) {
  .header__logo svg { width: 68px; }
  .header__actions { gap: 8px; }
  .header__actions .pill { padding: 9px 12px; font-size: 0.8125rem; }
  .nav-toggle { padding: 8px 10px; }
  .home-hero h1 { font-size: 2.6rem; }
  .hero-stat { width: 116px; min-height: 116px; }
  .hero-stat strong { font-size: 2.25rem; }
  .problem-card h3 { font-size: 1.6rem; }
  .problem-card p { font-size: 0.95rem; }
  .photo-hero h1 { font-size: 2.5rem; }
  .callout h2 { font-size: 2rem; }
  .callout p { font-size: 1.05rem; }
  .safety-photo { height: 380px; }
  .safety-promise { grid-template-columns: 1fr; gap: 0; padding: 25px 20px 10px; }
  .safety-promise > div:first-child { margin-bottom: 14px; }
  .safety-promise > div:not(:first-child) { padding: 14px 0; border-top: 1px solid var(--rule-on-dark); }
  .safety-promise strong { font-size: 1.5rem; }
  .safety-promise div > p:not(.eyebrow) { margin-top: 2px; font-size: var(--step-small); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .ticker__pause { display: none; }
}

@media print {
  .announcement, .header, .footer, .nav-toggle { display: none; }
}