/* GoBYE website. A black, photographic hero (kept exactly as approved), then calm white and off white
   sections in DM Sans. Aubergine and tangerine carry the brand gradient; greys carry the interface. */
:root {
  --black: #000000;
  --white: #ffffff;
  --ink: #0a0a0a;
  --muted: #6b6b6b;
  --grey-700: #4a4a4a;
  --grey-500: #707070;
  --grey-300: #c9c9c9;
  --off: #f4f4f4;
  --line: #ededed;
  --on-dark-2: rgba(255, 255, 255, 0.78);
  --on-dark-3: rgba(255, 255, 255, 0.6);
  --aubergine: #351a40;
  --plum: #6b2f7e;
  --tangerine: #ff751f;
  --tangerine-hover: #ff8a40;
  --apricot: #ff9a3d;
  --amber: #b45309;
  --danger: #c62828;
  --grad-cta: linear-gradient(120deg, #ff751f 0%, #ff9a3d 100%);
  --grad-deep: linear-gradient(135deg, #351a40 0%, #6b2f7e 100%);
  --grad-text: linear-gradient(90deg, #6b2f7e 0%, #ff751f 100%);
  --font: 'DM Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --gutter-r: max(16px, env(safe-area-inset-right, 0px));
  --nav-h: calc(max(20px, env(safe-area-inset-top, 0px)) + 56px);
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 88px; }
body { margin: 0; background: var(--white); color: var(--ink); font: 400 16px/1.55 var(--font); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, select { font: inherit; }
:focus-visible { outline: 3px solid var(--tangerine); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 1em; height: 1em; display: inline-block; flex-shrink: 0; }
.icon svg { width: 100%; height: 100%; display: block; }
.icon.flip { transform: scaleX(-1); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 26px; border-radius: 999px; border: 0; font-weight: 700; font-size: 16px; letter-spacing: -0.005em; cursor: pointer; text-decoration: none; transition: background-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease; }
.btn { transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.25s ease, filter 0.25s ease, background-color 0.18s ease; }
/* Premium, soft CTA: a gentle tangerine gradient, an inner highlight on top and a wide, low shadow. */
.btn-primary, .btn-grad {
  background: linear-gradient(180deg, #ffb27e 0%, #ff9652 52%, #ff8438 100%);
  color: #1c0e05;
  font-weight: 600;
  letter-spacing: -0.015em;
  border: 1px solid rgba(214, 92, 18, 0.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), inset 0 -1px 0 rgba(170, 66, 0, 0.1), 0 1px 2px rgba(120, 45, 0, 0.1), 0 10px 24px -14px rgba(255, 117, 31, 0.5);
}
.btn-primary:hover, .btn-grad:hover { transform: translateY(-1px); filter: saturate(1.05) brightness(1.02); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -1px 0 rgba(170, 66, 0, 0.12), 0 2px 4px rgba(120, 45, 0, 0.1), 0 14px 30px -14px rgba(255, 117, 31, 0.55); }
.btn-primary:active, .btn-grad:active { transform: translateY(0) scale(0.99); }
.btn-primary, .btn-grad { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-grad::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, 0.45) 50%, transparent 65%); transform: translateX(-130%); transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); pointer-events: none; }
.btn-primary:hover::after, .btn-grad:hover::after { transform: translateX(130%); }
.btn:has(.btn-arrow) { padding: 0 8px 0 28px; gap: 14px; }
.btn-arrow { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.92); color: #1c0e05; font-size: 17px; box-shadow: 0 1px 2px rgba(120, 45, 0, 0.18); transition: transform 0.25s cubic-bezier(0.2, 0.7, 0.2, 1); }
.btn:hover .btn-arrow { transform: translateX(2px); }
.btn-sm { min-height: 42px; padding: 0 18px; font-size: 14.5px; }
.btn-grad.btn-sm { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 2px rgba(120, 45, 0, 0.1), 0 6px 14px -8px rgba(255, 117, 31, 0.45); }
.btn-pill { min-height: 44px; padding: 0 18px; font-size: 15px; background: var(--white); color: var(--black); }
.btn-pill:hover { background: #ececec; }
.btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--grey-300); }
.btn-ghost:hover { background: var(--off); }
.btn[disabled] { opacity: 0.6; cursor: progress; }
.btn .spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin 0.8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Sticky navbar ---------- */
/* Transparent with white text over the black hero; white with black text once the hero has gone. */
.topbar { position: fixed; z-index: 50; top: 0; left: 0; right: 0; color: var(--ink); transition: background-color 0.25s ease, box-shadow 0.25s ease, color 0.25s ease; }
/* On scroll the bar condenses into a floating pill: logo, toggle and CTA move close together. */
.topbar .nav { width: min(700px, calc(100% - 48px)); margin: 0 auto; border-radius: 0; transition: width 0.5s cubic-bezier(0.3, 0.8, 0.2, 1), padding 0.5s cubic-bezier(0.3, 0.8, 0.2, 1), margin 0.5s cubic-bezier(0.3, 0.8, 0.2, 1), border-radius 0.5s ease, background-color 0.3s ease, box-shadow 0.3s ease; }
.topbar.solid .nav { width: min(660px, calc(100% - 24px)); margin-top: max(10px, env(safe-area-inset-top, 0px)); padding: 7px 7px 7px 16px; border-radius: 999px; background: rgba(255, 255, 255, 0.86); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 14px 36px -18px rgba(20, 10, 30, 0.35); backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px); }
.topbar.solid .brand img { width: 30px; height: 30px; }
.topbar.solid .brand span { font-size: 19px; }
.topbar.solid .seg-btn { min-height: 34px; }
.topbar.solid .btn-sm { min-height: 40px; }
.topbar .brand img, .topbar .brand span, .topbar .seg-btn, .topbar .btn-sm { transition: width 0.4s ease, height 0.4s ease, font-size 0.4s ease, min-height 0.4s ease; }
.topbar .brand { color: inherit; }
.topbar .brand span { font-family: var(--font); font-weight: 700; letter-spacing: -0.04em; }
.topbar .logo-light { display: none; }
.brand picture { display: block; line-height: 0; }
.brand picture img { width: 34px; height: 34px; object-fit: contain; }
.nav-right { display: flex; align-items: center; gap: 12px; }
.seg { position: relative; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 4px; gap: 0; border-radius: 999px; border: 1px solid var(--line); background: var(--off); }
.seg::before { content: ''; position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 999px; background: var(--black); box-shadow: 0 2px 6px -2px rgba(0, 0, 0, 0.35); transition: transform 0.38s cubic-bezier(0.3, 0.8, 0.2, 1); }
.seg[data-on='driver']::before { transform: translateX(100%); }
.seg-btn { position: relative; z-index: 1; min-height: 36px; padding: 0 16px; border: 0; border-radius: 999px; background: transparent; color: inherit; font-weight: 600; font-size: 14.5px; letter-spacing: -0.01em; cursor: pointer; opacity: 0.78; transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease; }
.seg-btn:hover { opacity: 1; }
.seg-btn[aria-pressed='true'] { color: var(--white); opacity: 1; }
.seg-btn:active { transform: scale(0.97); }
.seg-inline { display: none !important; color: var(--ink); margin-bottom: 28px; }

/* ---------- Hero ---------- */
/* Black stage: nav and copy on top, the video in its own rounded box, the CTA under it. The box is
   sized so all four fit in one viewport on desktop; on phones the hero simply grows. */
.hero { position: relative; isolation: isolate; min-height: 100svh; display: flex; flex-direction: column; align-items: stretch; background: var(--white); overflow: hidden; }
.hero::before { content: ''; position: absolute; z-index: -1; left: 50%; top: 58%; width: min(1400px, 140vw); height: 70%; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(255, 154, 61, 0.2), rgba(107, 47, 126, 0.07) 60%, transparent 100%); pointer-events: none; }
.nav { position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: max(20px, env(safe-area-inset-top, 0px)); padding-bottom: 12px; padding-left: max(24px, var(--gutter)); padding-right: max(24px, var(--gutter-r)); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.brand img { width: 34px; height: 34px; object-fit: contain; }
.brand span { font-weight: 800; font-size: 21px; letter-spacing: -0.02em; }
.hero-copy { position: relative; z-index: 1; text-align: center; padding-top: clamp(8px, 2.5vh, 32px); padding-left: var(--gutter); padding-right: var(--gutter-r); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero h1 { margin: 0; font-weight: 700; font-size: 72px; line-height: 1.04; letter-spacing: -0.05em; text-wrap: balance; }
.hero .lede { margin: 0; max-width: 540px; font-size: 20px; line-height: 1.5; color: var(--muted); text-wrap: pretty; }
.hero .cities { margin: 2px 0 0; display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--ink); padding: 6px 12px; border-radius: 999px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04); }
.hero .cities .icon { color: var(--tangerine); font-size: 15px; }

.hero-video {
  position: relative;
  margin: clamp(20px, 3.5vh, 40px) auto 0;
  /* Fit the box: never wider than 1120px or the page, never so tall that the CTA leaves the screen. */
  width: min(1120px, calc(100% - 2 * max(24px, var(--gutter))), calc((100svh - 448px) * 16 / 9));
  min-width: min(560px, calc(100% - 32px));
  aspect-ratio: 16 / 9;
  border-radius: 28px;
  overflow: hidden;
  background: #111;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 2px 6px rgba(0, 0, 0, 0.05), 0 40px 80px -36px rgba(53, 26, 64, 0.45);
}
.hero-video video { width: 100%; height: 100%; object-fit: cover; object-position: 46% 100%; display: block; }
.hero-photo[hidden], .hero-video video[hidden] { display: none; }
.hero-photo, .hero-photo img { display: block; width: 100%; height: 100%; }
.hero-photo img { object-fit: cover; object-position: 50% 45%; }
.hero-photo.rider img { object-position: 60% 40%; }
.hero-video.is-photo::after { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.12), transparent 30%); }
/* Gentle vignette so the box edges sit back and the phone stays the brightest thing. */
.hero-video::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(ellipse 70% 80% at 50% 62%, transparent 55%, rgba(0, 0, 0, 0.35) 100%), linear-gradient(to bottom, rgba(0, 0, 0, 0.18), transparent 30%); }
.video-toggle { position: absolute; z-index: 1; right: 14px; bottom: 14px; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.2); background: rgba(0, 0, 0, 0.45); color: var(--white); display: grid; place-items: center; font-size: 18px; cursor: pointer; backdrop-filter: blur(6px); }
.video-toggle { transition: transform 0.2s ease, background-color 0.2s ease; }
.video-toggle:hover { background: rgba(0, 0, 0, 0.65); transform: scale(1.06); }
.video-toggle:active { transform: scale(0.94); }

.hero-cta { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; padding-block: 24px max(28px, env(safe-area-inset-bottom, 0px)); padding-left: var(--gutter); padding-right: var(--gutter-r); }
.hero-cta p { margin: 0; color: var(--muted); font-size: 15px; }
.stores { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; }
.stores img { height: 52px; width: auto; }
.qr-card { position: absolute; right: max(32px, var(--gutter-r)); bottom: 28px; width: 176px; padding: 14px; border-radius: 20px; background: rgba(255, 255, 255, 0.96); color: var(--ink); text-align: center; box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.6); }
.qr-card .qr { width: 132px; height: 132px; margin: 0 auto 10px; }
.qr-card .qr img, .qr-card .qr canvas { width: 100%; height: 100%; }
.qr-card p { margin: 0; font-size: 12.5px; line-height: 1.4; color: var(--grey-700); }

/* Entry motion: copy fades up 20px over 600ms, then the video box settles in over 800ms. */
.reveal { animation: rise 600ms cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.reveal.d1 { animation-delay: 100ms; }
.reveal.d2 { animation-delay: 180ms; }
.reveal.d3 { animation-delay: 420ms; }
.reveal-media { animation: settle 800ms cubic-bezier(0.2, 0.7, 0.2, 1) 160ms both; }
@keyframes rise { from { opacity: 0; transform: translateY(20px); } }
@keyframes settle { from { opacity: 0; transform: translateY(16px) scale(0.985); } }

/* The hero keeps its original typeface and layout; it only makes room for the fixed navbar. */
.hero { padding-top: var(--nav-h); color: var(--ink); }

/* ---------- Shared section pattern ---------- */
.sec { position: relative; padding-block: 96px; padding-left: var(--gutter); padding-right: var(--gutter-r); }
.wrap { max-width: 1100px; margin: 0 auto; }
.head { display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; z-index: 1; }
.eyebrow { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.3em; color: var(--plum); text-transform: uppercase; }
.title { margin: 18px 0 0; font-size: 56px; line-height: 1.05; letter-spacing: -0.045em; font-weight: 700; text-wrap: balance; }
.display { margin: 20px 0 0; font-size: 88px; line-height: 1.02; letter-spacing: -0.055em; font-weight: 700; }
.sub { margin: 16px 0 0; font-size: 18px; color: var(--muted); }
.grad-text { background: var(--grad-text); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---------- Step by step: pinned deck of cards ---------- */
.steps { overflow: clip; padding-block: 0 24px; }
.steps .glow { position: absolute; inset: 0 0 auto; height: 900px; pointer-events: none; background: radial-gradient(40% 50% at 42% 18%, rgba(255, 154, 61, 0.2), transparent 70%), radial-gradient(38% 46% at 72% 30%, rgba(107, 47, 126, 0.16), transparent 72%); filter: blur(10px); }
.stack { position: relative; height: calc((var(--n, 4) - 1) * 55vh + 100vh); }
.stack-pin { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(24px, 4.5vh, 48px); padding-top: var(--nav-h); perspective: 1400px; }
.stack-pin .display { font-size: clamp(44px, 8vh, 88px); }
.deck { list-style: none; margin: 0; padding: 0; position: relative; flex-shrink: 0; width: min(620px, 100%); height: 360px; }
.step { position: absolute; inset: 0; border-radius: 32px; overflow: hidden; display: grid; grid-template-columns: 1fr 236px; gap: 8px; padding: 36px 0 0 40px; background: var(--white); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 30px 70px -40px rgba(20, 10, 30, 0.45), 0 2px 8px rgba(0, 0, 0, 0.03); transform-origin: 50% 100%; will-change: transform; }
.step.deep { background: var(--grad-deep); color: var(--white); border-color: transparent; }
.step .pill { align-self: start; justify-self: start; padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; background: rgba(10, 10, 10, 0.05); color: var(--muted); }
.step.deep .pill { background: rgba(255, 255, 255, 0.14); color: rgba(255, 255, 255, 0.9); }
.step .txt { display: flex; flex-direction: column; gap: 14px; padding-bottom: 36px; }
.step h3 { margin: auto 0 0; font-size: 28px; line-height: 1.12; letter-spacing: -0.035em; font-weight: 700; }
.step p { margin: 0; font-size: 16.5px; line-height: 1.5; color: var(--muted); max-width: 300px; }
.step.deep p { color: rgba(255, 255, 255, 0.78); }
.step .ui { align-self: end; margin-right: -2px; height: 300px; border-radius: 22px 0 0 0; overflow: hidden; background: var(--white); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.06), 0 24px 50px -20px rgba(0, 0, 0, 0.35); }
.step .ui img { width: 100%; height: auto; }
.step .num { align-self: center; justify-self: center; font-size: 150px; font-weight: 700; letter-spacing: -0.06em; line-height: 1; opacity: 0.12; }
.step.deep .num { opacity: 0.2; }

/* ---------- Additional features: bento grid ---------- */
.features { background: var(--off); }
.bento { list-style: none; margin: 56px auto 0; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.feat { position: relative; grid-column: span 5; height: 420px; border-radius: 32px; overflow: hidden; background: var(--white); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 24px 48px -36px rgba(53, 26, 64, 0.35); }
.feat.wide { grid-column: span 7; }
.feat-copy { padding: 28px 28px 0; }
.feat h3 { margin: 0; font-size: 24px; line-height: 1.12; letter-spacing: -0.04em; font-weight: 700; text-wrap: balance; }
.feat p { margin: 8px 0 0; font-size: 15.5px; line-height: 1.45; color: var(--muted); max-width: 340px; text-wrap: pretty; }
.stage { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 252px; border-radius: 24px; overflow: hidden; display: flex; justify-content: center; padding-top: 26px; }
.stage.warm { background: radial-gradient(120% 90% at 50% 0%, #fffaf6 0%, #ffeedf 60%, #ffe3cc 100%); }
.stage.lilac { background: radial-gradient(120% 90% at 50% 0%, #fcf8fd 0%, #f2e8f6 60%, #e9dbf0 100%); }
.stage .frag { width: min(320px, calc(100% - 32px)); height: auto; align-self: flex-start; filter: drop-shadow(0 2px 3px rgba(53, 26, 64, 0.06)) drop-shadow(0 18px 28px rgba(53, 26, 64, 0.16)); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.stage .accent { position: absolute; right: -6px; bottom: -8px; width: 112px; height: auto; filter: drop-shadow(0 14px 18px rgba(53, 26, 64, 0.25)); transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); }
.feat.wide .stage .accent { width: 128px; right: 4px; }
.feat { transition: translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.35s ease; }
.feat:hover { translate: 0 -4px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03), 0 30px 56px -34px rgba(53, 26, 64, 0.45); }
.feat:hover .stage .frag { transform: translateY(-6px); }
.feat:hover .stage .accent { transform: translateY(-4px) rotate(-4deg); }
.round { width: 48px; height: 48px; border-radius: 50%; border: 1px solid #dedede; background: var(--white); color: var(--ink); display: grid; place-items: center; font-size: 20px; cursor: pointer; }
.round { transition: transform 0.2s cubic-bezier(0.2, 0.7, 0.2, 1), background-color 0.2s ease, opacity 0.2s ease; }
.round:hover:not([disabled]) { background: #fafafa; transform: scale(1.06); }
.round:active:not([disabled]) { transform: scale(0.94); }
.round[disabled] { opacity: 0.35; cursor: default; }


/* ---------- Safety: feature style cards with real app snippets ---------- */
.safety { background: var(--off); }
.safe-grid { margin-top: 56px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.feat.safe { grid-column: auto; height: 440px; }
.feat.safe .stage { height: 268px; }

/* ---------- Sideways sliders (owner 2026-10-22: the page was too long to scroll) ----------
   Feature and safety tiles sit in one row you swipe or drag across, with arrows and a progress line.
   On phones the photo mosaic and the comparison become sliders too. The row bleeds to the screen edge
   so the next tile peeks in, which tells people there is more to the side. */
.slider { --edge: max(var(--gutter), calc((100% - 1100px) / 2)); margin-top: 56px; margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter-r)); }
.slider > .slider-track { list-style: none; margin: 0; display: flex; grid-template-columns: none; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 8px var(--edge) 28px; scrollbar-width: none; overscroll-behavior-x: contain; max-width: none; outline: none; cursor: grab; }
.slider-track::-webkit-scrollbar { display: none; }
.slider-track:focus-visible { box-shadow: inset 0 0 0 2px var(--plum); border-radius: 12px; }
.slider-track.dragging { cursor: grabbing; scroll-snap-type: none; user-select: none; }
.slider-track > * { flex: 0 0 auto; scroll-snap-align: start; }
.slider-track .feat, .slider-track .feat.wide { width: min(400px, 84vw); grid-column: auto; }
/* Three safety cards fit across on a laptop (no slider needed there); on smaller screens they slide. */
.slider-track .feat.safe { width: min(353px, 84vw); grid-column: auto; }
.slider-track .feat:hover { translate: 0 -4px; }
.slider-bar { display: flex; align-items: center; gap: 20px; margin-top: 4px; padding-inline: var(--edge); max-width: none; }
.slider-bar[hidden] { display: none; }
.slider-progress { flex: 1; height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; }
.slider-progress span { display: block; height: 100%; width: 30%; border-radius: 3px; background: var(--ink); transform-origin: 0 50%; transition: transform 0.15s linear; }
.slider-btns { display: flex; gap: 10px; }
.icon.flip { transform: rotate(180deg); }
.slider-phone { margin: 0; }
.slider-phone > .mosaic, .slider-phone > .vs { margin-top: 56px; }

/* ---------- People: bento of photographs, a GoBYE notification inside each ---------- */
.people { background: var(--white); }
.mosaic { margin-top: 56px; display: grid; grid-template-columns: 1.15fr 1fr; grid-template-rows: 300px 300px; gap: 20px; }
.tile { position: relative; margin: 0; border-radius: 32px; overflow: hidden; isolation: isolate; background: #1a1016; }
.tile.big { grid-row: 1 / span 2; }
.tile > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.tile:hover > img { transform: scale(1.04); }
.note { animation: drift 6s ease-in-out infinite; }
.tile:nth-child(2) .note { animation-delay: -2s; }
.tile:nth-child(3) .note { animation-delay: -4s; }
@keyframes drift { 50% { translate: 0 -4px; } }
.tile::after { content: ''; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(10, 4, 14, 0.18) 0%, rgba(10, 4, 14, 0) 28%, rgba(10, 4, 14, 0) 52%, rgba(10, 4, 14, 0.78) 100%); }
.tile figcaption { position: absolute; left: 28px; right: 28px; bottom: 26px; color: var(--white); font-size: 26px; line-height: 1.1; font-weight: 700; letter-spacing: -0.04em; text-wrap: balance; }
.tile.big figcaption { font-size: 34px; left: 32px; bottom: 30px; }
.note { position: absolute; top: 20px; left: 20px; display: inline-flex; align-items: center; gap: 10px; max-width: calc(100% - 40px); padding: 8px 14px 8px 8px; border-radius: 16px; background: rgba(255, 255, 255, 0.9); color: var(--ink); box-shadow: 0 12px 30px -14px rgba(0, 0, 0, 0.5); backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
.tile.big .note { top: 24px; left: 24px; }
.note.right { left: auto; right: 20px; }
.note img { width: 30px; height: 30px; flex-shrink: 0; border-radius: 9px; background: var(--white); padding: 3px; box-shadow: 0 0 0 1px var(--line); }
.note span { display: flex; flex-direction: column; min-width: 0; font-size: 14px; line-height: 1.25; font-weight: 600; }
.note b { font-size: 10.5px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

/* ---------- Social proof (white) ---------- */
.trust { background: var(--white); color: var(--ink); }
.trust-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }
.trust h2 { margin: 18px 0 0; font-size: 56px; line-height: 1.05; letter-spacing: -0.045em; font-weight: 700; text-wrap: balance; max-width: 760px; }
.cards { margin-top: 56px; width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; text-align: left; }
.card { border: 1px solid var(--line); border-radius: 28px; padding: 32px 28px; display: flex; flex-direction: column; gap: 10px; background: var(--white); }
.card .icon { font-size: 22px; color: var(--plum); margin-bottom: 14px; width: 48px; height: 48px; padding: 13px; border-radius: 16px; background: #f5eef8; }
.card h3 { margin: 0; font-size: 21px; letter-spacing: -0.03em; font-weight: 700; }
.card p { margin: 0; color: var(--muted); font-size: 16px; line-height: 1.55; }
.count { margin-top: 28px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.count .value { font-size: 110px; line-height: 1; font-weight: 700; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.count .label { font-size: 18px; color: var(--grey-700); }
.count .def { font-size: 13px; color: var(--grey-500); max-width: 520px; }
.ratings { margin-top: 32px; display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 12px; }
.rating { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 28px; border-radius: 24px; border: 1px solid var(--line); text-decoration: none; color: var(--ink); }
.rating .stars { display: inline-flex; gap: 2px; color: var(--amber); font-size: 16px; }
.rating .score { font-weight: 700; font-size: 24px; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rating .meta { font-size: 13px; color: var(--grey-500); }
.rating:hover .platform { text-decoration: underline; }
.reviews { margin-top: 56px; width: 100vw; display: flex; flex-direction: column; gap: 20px; position: relative; }
.marquee-controls { display: flex; justify-content: center; }
.row { overflow: hidden; mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent); }
.row.reverse { opacity: 0.6; }
.track { display: flex; gap: 20px; width: max-content; padding-block: 4px; animation: slide var(--dur, 60s) linear infinite; }
.row.reverse .track { animation-direction: reverse; }
.reviews.paused .track, .row:hover .track, .row:focus-within .track { animation-play-state: paused; }
@keyframes slide { to { transform: translateX(-50%); } }
.quote { margin: 0; width: 350px; min-height: 210px; flex-shrink: 0; background: var(--white); border: 1px solid var(--line); border-radius: 24px; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; text-align: left; }
.quote blockquote { margin: 0; font-size: 16px; line-height: 1.6; color: var(--ink); }
.quote .who { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.quote .who img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.quote .who .name { font-weight: 700; }
.quote .who .when { color: var(--grey-500); font-size: 13px; }

/* ---------- Scroll reveal statement ---------- */
.statement { background: var(--off); padding-block: 160px; }
.fill { margin: 0 auto; max-width: 980px; text-align: center; font-size: 48px; line-height: 1.18; letter-spacing: -0.04em; font-weight: 600; color: #d0d0d0; text-wrap: balance; }
.fill .w { transition: color 0.25s ease; }
.fill .w.on { color: var(--ink); }

/* ---------- Comparison ---------- */
.compare { background: var(--white); }
.vs { margin: 56px auto 0; max-width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: stretch; }
.plan { position: relative; border-radius: 32px; overflow: hidden; display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--line); }
.plan.old { background: #fafafa; }
.plan.ours { border: 1.5px solid transparent; background-image: linear-gradient(var(--white), var(--white)), linear-gradient(135deg, #b78acb, #ff9a52); background-origin: border-box; background-clip: padding-box, border-box; box-shadow: 0 40px 80px -48px rgba(255, 117, 31, 0.55), 0 30px 60px -40px rgba(107, 47, 126, 0.35); }
.pstage { position: relative; margin: 12px 12px 0; height: 236px; border-radius: 24px; overflow: hidden; display: flex; justify-content: center; padding-top: 28px; }
.pstage.muted { background: radial-gradient(120% 90% at 50% 0%, #f7f7f7 0%, #ececec 70%, #e4e4e4 100%); }
.pstage.brand { background: radial-gradient(120% 90% at 50% 0%, #fcf7fd 0%, #f2e6f6 55%, #ffe6d3 100%); }
.pstage img { width: min(320px, calc(100% - 40px)); height: auto; align-self: flex-start; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.05)) drop-shadow(0 18px 28px rgba(53, 26, 64, 0.16)); }
.pstage.muted img { opacity: 0.85; filter: drop-shadow(0 14px 22px rgba(0, 0, 0, 0.1)); }
.pbody { padding: 30px 34px 36px; display: flex; flex-direction: column; }
.ptag { align-self: flex-start; display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8a8a; background: #efefef; }
.ptag.brand { color: var(--plum); background: #f5eef8; letter-spacing: 0.12em; }
.ptag img { width: 16px; height: 16px; }
.plan h3 { margin: 18px 0 0; font-size: 30px; line-height: 1.08; letter-spacing: -0.045em; font-weight: 700; text-wrap: balance; }
.plan.old h3 { color: #5b5b5b; }
.psub { margin: 8px 0 0; font-size: 15.5px; color: var(--muted); }
.plan ul { list-style: none; margin: 26px 0 0; padding: 26px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; }
.plan li { display: flex; align-items: flex-start; gap: 12px; font-size: 16px; line-height: 1.4; font-weight: 500; }
.plan.old li { color: #7a7a7a; }
.mark { width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; }
.mark svg { width: 12px; height: 12px; }
.mark.yes { background: linear-gradient(135deg, #fff0e5, #f6e9fa); color: #e2610e; box-shadow: inset 0 0 0 1px rgba(226, 97, 14, 0.12); }
.mark.no { background: #ececec; color: #9a9a9a; }
.plan li.hl { font-weight: 700; }

/* ---------- Footer: CTA, oversized wordmark with a live 3D road, then navigation ---------- */
.foot { position: relative; background: var(--white); color: var(--ink); padding: 120px 0 max(28px, env(safe-area-inset-bottom, 0px)); font-size: 15px; overflow: hidden; }
.foot-top { position: relative; z-index: 2; max-width: 760px; margin: 0 auto; padding-inline: var(--gutter); display: flex; flex-direction: column; align-items: center; text-align: center; }
.foot-title { margin: 0; font-size: 60px; line-height: 1.03; letter-spacing: -0.05em; font-weight: 700; text-wrap: balance; }
.foot-sub { margin: 18px 0 0; max-width: 560px; font-size: 18px; line-height: 1.55; color: var(--muted); text-wrap: pretty; }
.foot-cta { margin-top: 30px; }
.founder { position: relative; margin-top: 40px; width: min(360px, 100%); padding: 22px; border-radius: 24px; background: var(--white); color: var(--ink); text-align: left; box-shadow: 0 0 0 1px var(--line), 0 24px 50px -28px rgba(0, 0, 0, 0.3); }
.founder .row1 { display: flex; gap: 14px; align-items: center; }
.founder img { width: 56px; height: 56px; border-radius: 16px; object-fit: cover; }
.founder h3 { margin: 0; font-size: 17px; letter-spacing: -0.02em; }
.founder p { margin: 12px 0; color: var(--muted); font-size: 15px; }

/* The stage is full bleed so cars arrive from the screen edges. The canvas sits over the wordmark;
   the road crosses its lower half and the shadow floor darkens the letters just under it. */
.foot-stage { position: relative; margin-top: 40px; height: clamp(280px, 29vw, 430px); }
.wordmark { position: absolute; left: 50%; top: 4%; transform: translate(-50%, var(--par, 0px)); font-size: clamp(120px, 23.5vw, 340px); line-height: 0.8; font-weight: 700; letter-spacing: -0.065em; white-space: nowrap; user-select: none; background: linear-gradient(180deg, #ddcde6 0%, #efdbe8 45%, #ffd2b1 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.road { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 3%, rgba(0,0,0,0.38) 7%, rgba(0,0,0,0.7) 11%, rgba(0,0,0,0.92) 15%, #000 19%, #000 81%, rgba(0,0,0,0.92) 85%, rgba(0,0,0,0.7) 89%, rgba(0,0,0,0.38) 93%, rgba(0,0,0,0.12) 97%, rgba(0,0,0,0) 100%); mask-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.12) 3%, rgba(0,0,0,0.38) 7%, rgba(0,0,0,0.7) 11%, rgba(0,0,0,0.92) 15%, #000 19%, #000 81%, rgba(0,0,0,0.92) 85%, rgba(0,0,0,0.7) 89%, rgba(0,0,0,0.38) 93%, rgba(0,0,0,0.12) 97%, rgba(0,0,0,0) 100%); }
.js-motion .road { opacity: 0; transform: translateY(28px); transition: opacity 1.1s ease, transform 1.3s cubic-bezier(0.2, 0.7, 0.2, 1); }
.js-motion .foot-stage.in .road { opacity: 1; transform: none; }

.foot-nav { position: relative; z-index: 2; max-width: 1100px; margin: 8px auto 0; padding: 48px var(--gutter-r) 0 var(--gutter); border-top: 1px solid var(--line); display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.foot-nav:has(#foot-company:not([hidden])) { grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; }
.foot .brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--ink); }
.foot .brand img { width: 30px; height: 30px; }
.foot .brand span { font-weight: 700; font-size: 20px; letter-spacing: -0.04em; }
.foot-brand p { margin: 12px 0 0; max-width: 280px; color: var(--muted); line-height: 1.5; }
.social { display: flex; gap: 10px; margin-top: 16px; }
.social a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; font-size: 13px; font-weight: 700; text-decoration: none; }
.foot-col h3 { margin: 0 0 14px; font-size: 14px; font-weight: 700; }
.foot-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; color: var(--muted); }
.foot-col a, .linkish { color: var(--muted); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-size: 15px; text-align: left; }
.foot-col a, .foot-col .linkish { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.3s ease, color 0.2s ease; }
.foot-col a:hover, .linkish:hover { color: var(--ink); background-size: 100% 1px; }
.foot-col li { white-space: nowrap; }
.foot-col .soon { margin-left: 6px; font-size: 12px; font-weight: 600; color: var(--plum); background: #f5eef8; padding: 2px 8px; border-radius: 999px; }
.foot-base { max-width: 1100px; margin: 44px auto 0; padding: 20px var(--gutter-r) 0 var(--gutter); border-top: 1px solid var(--line); display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; color: var(--muted); font-size: 14px; }
.foot-cities { display: inline-flex; gap: 12px; align-items: center; }
.foot-cities .lbl { font-size: 11px; font-weight: 700; letter-spacing: 0.3em; color: #9a9a9a; }

/* ---------- Waitlist dialog ---------- */
dialog.sheet { border: 0; padding: 0; width: min(460px, calc(100vw - 32px)); max-height: calc(100svh - 32px); border-radius: 30px; background: var(--white); color: var(--ink); box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 40px 100px -30px rgba(20, 8, 26, 0.55); color-scheme: light; overflow: hidden; }
dialog.sheet::backdrop { background: rgba(18, 10, 21, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
dialog.sheet[open] { animation: pop 320ms cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes pop { from { opacity: 0; transform: translateY(18px) scale(0.97); } }
.sheet-body { display: flex; flex-direction: column; max-height: calc(100svh - 32px); overflow-y: auto; }
/* Branded header: deep aubergine with a warm glow, the mark in a glass tile. */
.sheet-hero { position: relative; isolation: isolate; padding: 30px 30px 28px; color: var(--white); background: radial-gradient(90% 120% at 100% 0%, rgba(255, 117, 31, 0.45), transparent 60%), radial-gradient(70% 90% at 0% 100%, rgba(155, 80, 180, 0.45), transparent 70%), linear-gradient(150deg, #2a1233 0%, #4b2159 100%); }
.sheet-mark { width: 48px; height: 48px; border-radius: 16px; display: grid; place-items: center; background: rgba(255, 255, 255, 0.12); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.18); backdrop-filter: blur(6px); }
.sheet-mark img { width: 28px; height: 28px; }
.sheet-eyebrow { margin: 20px 0 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.28em; color: #ffc59e; }
.sheet-hero h2 { margin: 8px 0 0; font-size: 30px; line-height: 1.05; letter-spacing: -0.045em; font-weight: 700; }
.sheet-sub { margin: 8px 0 0; font-size: 15.5px; line-height: 1.5; color: rgba(255, 255, 255, 0.76); max-width: 320px; }
.x { position: absolute; top: 18px; right: 18px; width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, 0.12); color: var(--white); display: grid; place-items: center; cursor: pointer; font-size: 17px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16); transition: background-color 0.2s ease, transform 0.2s ease; }
.x:hover { background: rgba(255, 255, 255, 0.22); transform: rotate(90deg); }
#waitlist-form { padding: 24px 30px 26px; display: flex; flex-direction: column; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 8px; }
.field label, .field legend { font-size: 13.5px; font-weight: 600; padding: 0; color: var(--grey-700); }
fieldset.field { border: 0; margin: 0; padding: 0; min-width: 0; }
.field legend { margin-bottom: 8px; }
.input-ico { position: relative; }
.input-ico .icon { position: absolute; left: 16px; top: 50%; margin-top: -9px; font-size: 18px; color: #9a9a9a; pointer-events: none; transition: color 0.2s ease; }
.field input:is([type='email'], [type='text'], [type='tel']) { width: 100%; height: 54px; border-radius: 16px; border: 1px solid transparent; padding: 0 16px 0 46px; background: #f5f4f6; color: var(--ink); font-size: 16px; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.field .input-ico input::placeholder { color: #a7a3aa; }
.field input:is([type='email'], [type='text'], [type='tel']):focus { outline: none; background: var(--white); border-color: var(--plum); box-shadow: 0 0 0 4px rgba(107, 47, 126, 0.12); }
.input-ico:focus-within .icon { color: var(--plum); }
.input-ico.phone .cc { position: absolute; left: 44px; top: 50%; transform: translateY(-50%); font-size: 16px; font-weight: 600; color: var(--ink); pointer-events: none; }
.input-ico.phone input { padding-left: 92px !important; }
.field .err { color: var(--danger); font-size: 13px; }
.field input[aria-invalid='true'] { border-color: var(--danger); background: #fff7f7; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.field .chip { position: relative; display: inline-flex; align-items: center; min-height: 42px; padding: 0 16px; border-radius: 999px; border: 1px solid #e4e1e6; background: var(--white); font-size: 14.5px; font-weight: 600; color: var(--ink); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; }
.chip:hover { border-color: #cfc8d4; }
.chip:active { transform: scale(0.97); }
.chip input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.chip:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--white); }
.chip:has(input:focus-visible) { outline: 3px solid var(--tangerine); outline-offset: 2px; }
fieldset[aria-invalid='true'] .chip, fieldset[aria-invalid='true'] .choice label { border-color: #f1b7b7; }
.choice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field .choice label { position: relative; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 58px; border-radius: 18px; border: 1px solid #e4e1e6; font-weight: 600; font-size: 15.5px; cursor: pointer; color: var(--ink); background: var(--white); transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease; }
.choice label .icon { font-size: 20px; color: #9a9a9a; transition: color 0.2s ease; }
.choice label:active { transform: scale(0.98); }
.choice input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.choice label:has(input:checked) { border-color: var(--plum); background: #faf6fb; box-shadow: inset 0 0 0 1px var(--plum), 0 8px 20px -14px rgba(107, 47, 126, 0.6); }
.choice label:has(input:checked) .icon { color: var(--plum); }
.choice label:has(input:focus-visible) { outline: 3px solid var(--tangerine); outline-offset: 2px; }
.wl-submit { width: 100%; min-height: 56px; position: relative; justify-content: center; padding: 0 56px; margin-top: 4px; }
.wl-submit .btn-arrow { position: absolute; right: 8px; top: 50%; margin-top: -19px; }
.form-note { margin: -4px 0 0; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 12.5px; color: var(--grey-500); }
.form-note .icon { font-size: 14px; color: #9a9a9a; }
.result { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 34px 30px 30px; }
.result .badge { position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 34px; }
.result .badge.ok { color: var(--white); background: linear-gradient(135deg, #ff9a52, #6b2f7e); box-shadow: 0 14px 30px -12px rgba(107, 47, 126, 0.6); animation: badge 520ms cubic-bezier(0.3, 1.5, 0.5, 1) both; }
.result .badge.ok::after { content: ''; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid rgba(255, 154, 82, 0.35); animation: ring 1.2s ease-out 0.2s both; }
.result .badge.soon { background: #f5eef8; color: var(--plum); }
@keyframes badge { from { transform: scale(0.4); opacity: 0; } }
@keyframes ring { from { transform: scale(0.7); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.result h3 { margin: 10px 0 0; font-size: 26px; letter-spacing: -0.04em; }
.result p { margin: 0; color: var(--grey-700); font-size: 15.5px; line-height: 1.5; max-width: 330px; }
.result .btn { margin-top: 14px; width: 100%; min-height: 54px; }
.form-error { margin: 0; color: var(--danger); font-size: 14px; background: #fdecec; border-radius: 14px; padding: 12px 14px; }

/* ---------- Micro interactions (enabled by app.js unless reduced motion is set) ---------- */
.js-motion .rv { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: var(--d, 0ms); }
.js-motion .rv.in { opacity: 1; transform: none; }
.js-motion .swap-target { transition: opacity 0.18s ease, translate 0.18s ease; }
.js-motion.swapping .swap-target { opacity: 0; translate: 0 6px; }
.js-motion #vs .plan li { opacity: 0; translate: -8px 0; transition: opacity 0.45s ease, translate 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); transition-delay: calc(var(--i, 0) * 70ms + 250ms); }
.js-motion #vs.in .plan li { opacity: 1; translate: 0 0; }
.js-motion #vs .mark { scale: 0.4; transition: scale 0.45s cubic-bezier(0.3, 1.6, 0.5, 1); transition-delay: calc(var(--i, 0) * 70ms + 300ms); }
.js-motion #vs.in .mark { scale: 1; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .hero h1 { font-size: 56px; }
  .qr-card { display: none; }
  .display { font-size: 72px; }
  .title { font-size: 46px; }
  .foot-nav, .foot-nav:has(#foot-company:not([hidden])) { grid-template-columns: 1fr 1fr 1fr; }
  .foot-brand { grid-column: 1 / -1; }
  .foot-title { font-size: 50px; }
}
@media (max-width: 860px) {
  .safe-grid { grid-template-columns: 1fr; max-width: 440px; margin-inline: auto; }
  .bento { grid-template-columns: 1fr 1fr; }
  .feat, .feat.wide { grid-column: auto; }
  .cards { grid-template-columns: 1fr; max-width: 520px; }
  .seg-nav { display: none; }
  .seg-inline { display: inline-grid !important; }
}
@media (max-width: 760px) {
  .hero { min-height: auto; }
  .topbar .nav { width: 100%; }
  .nav { padding-left: var(--gutter); padding-right: var(--gutter-r); }
  .brand span { font-size: 19px; }
  .btn-pill, .btn-sm { min-height: 40px; padding: 0 14px; font-size: 14px; }
  .hero-copy { padding-top: 24px; }
  .hero h1 { font-size: 42px; }
  .hero .lede { font-size: 17px; }
  /* Phone: a taller box, zoomed towards the phone so it reads at this size. */
  .hero-video { width: calc(100% - 2 * var(--gutter)); min-width: 0; aspect-ratio: 4 / 5; border-radius: 24px; margin-top: 24px; }
  .hero-video video { transform: scale(1.32); transform-origin: 46% 96%; }
  /* Phone (portrait box): keep the driver and his phone in frame. */
  .hero-photo img { object-position: 34% 50%; }
  .hero-photo.rider img { object-position: 82% 35%; }
  .hero-cta .btn-primary { width: 100%; max-width: 360px; position: relative; justify-content: center; padding: 0 56px; }
  .hero-cta .btn-primary .btn-arrow { position: absolute; right: 7px; top: 50%; margin-top: -19px; }
  .topbar.solid .nav { background: rgba(255, 255, 255, 0.97); backdrop-filter: none; -webkit-backdrop-filter: none; }

  .sec { padding-block: 88px; }
  .display { font-size: 52px; }
  .title { font-size: 36px; }
  /* Phone: the step cards simply stack, with no pinning or tilt. */
  .stack { height: auto; }
  .stack-pin { position: static; height: auto; display: block; padding-top: 0; perspective: none; }
  .stack-pin .display { font-size: 52px; }
  .steps { padding-block: 88px 24px; }
  .deck { margin-top: 40px; }
  .deck { height: auto; width: 100%; display: flex; flex-direction: column; gap: 16px; }
  /* Phone: each step sticks under the navbar and the next one slides over it, so one card is always in focus. */
  .step { position: sticky; inset: auto; top: calc(var(--nav-h) + 8px + var(--i, 0) * 10px); grid-template-columns: 1fr; padding: 28px 24px 0; min-height: 0; transform-origin: 50% 0; will-change: transform, filter; }
  .deck { padding-bottom: 24px; }
  .step .txt { padding-bottom: 24px; }
  .step h3 { margin-top: 18px; font-size: 26px; }
  .step .ui { height: 220px; margin: 0 -2px 0 24px; }
  .step .num { display: none; }
  .mosaic { grid-template-columns: 1fr; grid-template-rows: 440px 260px 260px; margin-top: 40px; gap: 14px; }
  /* Phone: the photo mosaic and the comparison become sideways sliders (one tile in view, the next peeking). */
  .slider-phone { --edge: var(--gutter); margin-left: calc(-1 * var(--gutter)); margin-right: calc(-1 * var(--gutter-r)); }
  .slider-phone > .mosaic, .slider-phone > .vs { display: flex; gap: 14px; margin: 40px 0 0; max-width: none; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--edge); padding: 4px var(--edge) 24px; scrollbar-width: none; overscroll-behavior-x: contain; }
  .slider-phone > .mosaic::-webkit-scrollbar, .slider-phone > .vs::-webkit-scrollbar { display: none; }
  .slider-phone > .mosaic > .tile { flex: 0 0 84vw; height: 440px; scroll-snap-align: start; }
  .slider-phone > .vs > .plan { flex: 0 0 86vw; scroll-snap-align: start; }
  .slider { margin-top: 40px; }
  .slider > .slider-track { gap: 14px; padding-bottom: 24px; margin: 0; max-width: none; }
  .slider-btns { display: none; }

  .tile.big { grid-row: auto; }
  .tile, .tile.big { border-radius: 28px; }
  .tile figcaption, .tile.big figcaption { font-size: 24px; left: 22px; right: 22px; bottom: 20px; }
  .note, .tile.big .note { top: 16px; left: 16px; max-width: calc(100% - 32px); }
  .note.right { left: auto; right: 16px; }
  .bento { margin-top: 40px; grid-template-columns: 1fr; gap: 14px; }
  .safe-grid { margin-top: 40px; gap: 14px; }
  .feat.safe { height: 400px; }
  .feat.safe .stage { height: 240px; }
  .feat, .feat.wide { grid-column: auto; height: 380px; }
  .stage { height: 236px; }
  .statement { padding-block: 104px; }
  .fill { font-size: 32px; }
  .vs { margin-top: 40px; grid-template-columns: 1fr; max-width: 460px; gap: 16px; }
  .pstage { height: 210px; }
  .pbody { padding: 26px 24px 30px; }
  .plan h3 { font-size: 26px; }
  .count .value { font-size: 72px; }
  .quote { width: 300px; }
  .foot { padding-top: 88px; }
  .foot-title { font-size: 38px; }
  .foot-sub { font-size: 16.5px; }
  .foot-stage { margin-top: 28px; height: 230px; }
  .wordmark { top: 12%; font-size: 30vw; }
  .foot-nav, .foot-nav:has(#foot-company:not([hidden])) { grid-template-columns: 1fr 1fr; padding-top: 36px; }
  .foot-nav > nav[aria-label='Get the app'], #foot-company { grid-column: 1 / -1; }
  .foot-col li { white-space: normal; }
}
@media (max-width: 420px) {
  .nav-right .btn-sm { padding: 0 12px; font-size: 13.5px; }
}
/* Short laptop screens: tighter copy so the video box keeps a useful size. */
@media (min-width: 761px) and (max-height: 820px) {
  .hero-copy { padding-top: 4px; gap: 8px; }
  .hero h1 { font-size: 56px; }
  .hero .lede { font-size: 18px; }
  .hero-video { width: min(1120px, calc(100% - 48px), calc((100svh - 330px) * 16 / 9)); }
  .hero-cta { padding-block: 16px 20px; }
}
/* Reduced motion: no pinning, tilt or scroll fill; everything shows in its final state. */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-media, dialog.sheet[open], .result .badge.ok, .result .badge.ok::after { animation: none; }
  .road, .btn, .topbar, .topbar .nav, .seg-btn, .fill .w, .seg::before, .feat, .tile > img, .round, .video-toggle { transition: none; }
  .note { animation: none; }
  .btn-primary::after, .btn-grad::after { display: none; }
  .feat:hover, .tile:hover > img, .feat.safe:hover { translate: none; transform: none; }
  .stack { height: auto; }
  .stack-pin { position: static; height: auto; display: block; padding-top: 0; perspective: none; }
  .deck { height: auto; display: flex; flex-direction: column; gap: 20px; margin: 40px auto 0; }
  .steps { padding-block: 120px 40px; }
  .step { position: relative; inset: auto; height: 360px; transform: none !important; }
  .fill .w { color: var(--ink); }
  .track { animation: none; width: auto; }
  .track > [aria-hidden='true'] { display: none !important; }
  .row { overflow-x: auto; mask-image: none; -webkit-mask-image: none; scroll-snap-type: x mandatory; padding-inline: var(--gutter); }
  .quote { scroll-snap-align: start; }
  .marquee-controls { display: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 760px) {
  .step { height: auto; position: relative; top: auto; filter: none !important; }
}

/* ---------- Waitlist journey: a route with four stops, one question per step, an early access pass ---------- */
.wl .sheet-hero { padding: 26px 30px 20px; }
.wl .sheet-eyebrow { margin-top: 0; }
.route { position: relative; height: 50px; margin-top: 18px; --p: 0; }
.route-line { position: absolute; left: 10px; right: 10px; top: 15px; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.16); overflow: hidden; }
.route-fill { display: block; height: 100%; width: calc(var(--p) * 100%); border-radius: inherit; background: linear-gradient(90deg, #ffc59e, #ff751f); transition: width 0.6s cubic-bezier(0.3, 0.8, 0.2, 1); }
.stop { position: absolute; top: 11px; left: calc(10px + (100% - 20px) * var(--x) / 3); width: 12px; height: 12px; margin-left: -6px; border-radius: 50%; background: #3a1945; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35); transition: background-color 0.3s ease, box-shadow 0.3s ease; }
.stop.done { background: #ff9a52; box-shadow: 0 0 0 3px rgba(255, 154, 82, 0.25); }
.route-car { position: absolute; top: 1px; left: calc(10px + (100% - 20px) * var(--p)); width: 32px; height: 32px; margin-left: -16px; border-radius: 11px; display: grid; place-items: center; font-size: 18px; color: var(--plum); background: var(--white); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.12); transition: left 0.6s cubic-bezier(0.3, 0.8, 0.2, 1); }
.route.arrived .route-car { color: var(--white); background: linear-gradient(135deg, #ff9a52, #ff751f); }
.route-labels { position: absolute; left: 0; right: 0; top: 36px; display: grid; grid-template-columns: repeat(4, 1fr); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.62); }
.route-labels span:nth-child(1) { text-align: left; }
.route-labels span:nth-child(2) { text-align: center; transform: translateX(-16%); }
.route-labels span:nth-child(3) { text-align: center; transform: translateX(16%); }
.route-labels span:nth-child(4) { text-align: right; }

.wl #waitlist-form { gap: 16px; padding-top: 24px; }
.wsteps { position: relative; overflow: hidden; margin: -6px -6px 0; padding: 6px; transition: height 0.45s cubic-bezier(0.3, 0.8, 0.2, 1); -webkit-transform: translateZ(0); transform: translateZ(0); isolation: isolate; }
.wtrack { display: flex; align-items: flex-start; transition: transform 0.5s cubic-bezier(0.3, 0.8, 0.2, 1); will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.wstep { flex: 0 0 100%; min-width: 0; padding: 0 6px 12px; display: flex; flex-direction: column; gap: 14px; visibility: visible; transition: visibility 0s; }
/* Questions not on screen are fully hidden once the slide ends, so nothing bleeds in at the edges (and iPhone Safari has nothing stale to paint). */
.wstep[inert] { visibility: hidden; transition: visibility 0s linear 0.5s; }
.wstep .q { margin: 0; font-size: 23px; line-height: 1.15; letter-spacing: -0.035em; font-weight: 700; }
.wstep .hint { margin: -8px 0 4px; font-size: 14.5px; color: var(--muted); }
.input-ico.big input { height: 60px !important; font-size: 18px !important; border-radius: 18px !important; }
.input-ico.big .icon { font-size: 20px; margin-top: -10px; }

.role { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.field .role label { position: relative; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: 2px; min-height: 176px; padding: 16px; border-radius: 22px; border: 1px solid #e7e3ea; background: linear-gradient(165deg, #ffffff 0%, #fbf7fc 60%, #fff3ea 100%); cursor: pointer; color: var(--ink); text-align: left; transition: border-color 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease; }
.field .role label:hover { transform: translateY(-2px); box-shadow: 0 16px 30px -22px rgba(53, 26, 64, 0.5); }
.field .role label:active { transform: scale(0.98); }
.role input { position: absolute; inset: 0; opacity: 0; cursor: pointer; z-index: 2; }
.role img { position: absolute; top: 10px; right: -6px; width: 104px; height: auto; filter: drop-shadow(0 12px 16px rgba(53, 26, 64, 0.25)); transition: transform 0.35s cubic-bezier(0.3, 1.4, 0.5, 1); }
.role label:nth-child(2) img { top: 26px; right: -14px; width: 124px; }
.role b, .role label > span:last-child { position: relative; z-index: 1; }
.role b { font-size: 19px; letter-spacing: -0.03em; }
.role label > span:last-child { font-size: 13px; line-height: 1.35; color: var(--muted); padding-right: 6px; }
.role .tick { position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-size: 13px; color: var(--white); background: var(--plum); transform: scale(0); transition: transform 0.3s cubic-bezier(0.3, 1.6, 0.5, 1); }
.role label:has(input:checked) { border-color: var(--plum); box-shadow: inset 0 0 0 1px var(--plum), 0 16px 30px -20px rgba(107, 47, 126, 0.6); }
.role label:has(input:checked) .tick { transform: scale(1); }
.role label:has(input:checked) img { transform: translateY(-4px) rotate(-4deg) scale(1.05); }
.role label:has(input:focus-visible) { outline: 3px solid var(--tangerine); outline-offset: 2px; }

.cities-pick { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.field .ctile { position: relative; display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 16px; border-radius: 18px; border: 1px solid #e7e3ea; background: var(--white); cursor: pointer; color: var(--ink); transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, transform 0.15s ease; }
.ctile.wide { grid-column: 1 / -1; }
.ctile input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.ctile .icon { font-size: 22px; color: var(--tangerine); flex-shrink: 0; }
.ctile b { display: block; font-size: 16px; letter-spacing: -0.02em; }
.ctile small { display: block; font-size: 12.5px; color: var(--muted); font-weight: 500; }
.field .ctile:hover { border-color: #cfc8d4; }
.field .ctile:active { transform: scale(0.98); }
.field .ctile:has(input:checked) { background: var(--ink); border-color: var(--ink); color: var(--white); }
.ctile:has(input:checked) small { color: rgba(255, 255, 255, 0.7); }
.ctile:has(input:focus-visible) { outline: 3px solid var(--tangerine); outline-offset: 2px; }
fieldset[aria-invalid='true'] .ctile, fieldset[aria-invalid='true'] .role label { border-color: #f1b7b7; }

.state-pick { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; animation: rise 300ms ease both; }
.state-pick label { font-size: 13.5px; font-weight: 600; color: var(--grey-700); }
.select-ico { position: relative; }
.select-ico .icon { position: absolute; left: 16px; top: 50%; margin-top: -10px; font-size: 20px; color: var(--tangerine); pointer-events: none; }
.select-ico::after { content: ''; position: absolute; right: 18px; top: 50%; width: 8px; height: 8px; margin-top: -6px; border-right: 2px solid #8a8490; border-bottom: 2px solid #8a8490; transform: rotate(45deg); pointer-events: none; }
.select-ico select { width: 100%; height: 56px; border-radius: 16px; border: 1px solid transparent; padding: 0 44px 0 46px; background: #f5f4f6; color: var(--ink); font: inherit; font-size: 16px; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; }
.select-ico select:focus { outline: none; background: var(--white); border-color: var(--plum); box-shadow: 0 0 0 4px rgba(107, 47, 126, 0.12); }
.select-ico select[aria-invalid='true'] { border-color: var(--danger); background: #fff7f7; }
.wl-actions { display: flex; gap: 10px; }
.wl-actions .wl-submit { flex: 1; margin-top: 0; }
.round-back { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; border: 1px solid #e4e1e6; background: var(--white); color: var(--ink); display: grid; place-items: center; font-size: 20px; cursor: pointer; transition: background-color 0.2s ease, transform 0.15s ease; }
.round-back:hover { background: #f6f4f7; }
.round-back:active { transform: scale(0.94); }

/* The pass */
.wl .result { padding: 26px 30px 28px; gap: 12px; background: linear-gradient(180deg, #ffffff 0%, #f7f3f9 100%); }
.wl .result h3 { margin: 0; font-size: 26px; }
.wl .result .result-msg:empty { display: none; }
.pass { width: 100%; margin-top: 6px; border-radius: 24px; overflow: hidden; background: var(--white); text-align: left; box-shadow: 0 0 0 1px rgba(53, 26, 64, 0.06), 0 26px 50px -26px rgba(53, 26, 64, 0.55); animation: pass-in 700ms cubic-bezier(0.25, 1.3, 0.5, 1) both; }
@keyframes pass-in { from { opacity: 0; transform: translateY(26px) rotate(-2deg) scale(0.96); } }
.pass-top { display: flex; align-items: center; gap: 10px; padding: 16px 20px; color: var(--white); background: radial-gradient(80% 140% at 100% 0%, rgba(255, 117, 31, 0.5), transparent 60%), linear-gradient(140deg, #2a1233, #4b2159); }
.pass-top img { width: 26px; height: 26px; }
.pass-top b { font-size: 17px; letter-spacing: -0.03em; }
.pass-top span { margin-left: auto; font-size: 10.5px; font-weight: 700; letter-spacing: 0.22em; color: #ffc59e; }
.pass-body { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; padding: 18px 20px 16px; }
.kv.wide { grid-column: 1 / -1; }
.kv small { display: block; font-size: 10.5px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: #9a93a0; }
.kv span { display: block; margin-top: 3px; font-size: 17px; font-weight: 700; letter-spacing: -0.02em; overflow-wrap: anywhere; }
.pass-cut { position: relative; height: 0; margin: 0 18px; border-top: 2px dashed #e7e1ea; }
.pass-cut::before, .pass-cut::after { content: ''; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: #f7f3f9; box-shadow: inset 0 0 0 1px rgba(53, 26, 64, 0.06); }
.pass-cut::before { left: -30px; }
.pass-cut::after { right: -30px; }
.pass-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px 18px; font-size: 14px; line-height: 1.45; color: var(--grey-700); }
.ok-dot { width: 26px; height: 26px; flex-shrink: 0; border-radius: 50%; display: grid; place-items: center; font-size: 14px; color: var(--white); background: #16a34a; }
.wl .result .btn { margin-top: 8px; }
@media (max-width: 560px) {
  .wl .sheet-hero { padding: 22px 24px 18px; }
  .wl #waitlist-form { padding-top: 20px; }
  .wstep .q { font-size: 22px; }
  .field .role label { min-height: 168px; }
  .role img { width: 92px; top: 6px; }
  .role label:nth-child(2) img { width: 108px; top: 14px; right: -16px; }
  .wl .result { padding: 24px 24px max(26px, env(safe-area-inset-bottom, 0px)); }
}
@media (prefers-reduced-motion: reduce) {
  .wtrack, .wsteps, .route-fill, .route-car, .pass, .role img, .role .tick { transition: none; animation: none; }
}

/* ---------- Phone: the waitlist opens as a bottom sheet ---------- */
@media (max-width: 560px) {
  dialog.sheet { width: 100%; max-width: 100%; margin: auto 0 0; border-radius: 28px 28px 0 0; max-height: 94svh; }
  dialog.sheet[open] { animation: rise-sheet 360ms cubic-bezier(0.2, 0.8, 0.2, 1); }
  .sheet-body { max-height: 94svh; }
  .sheet-hero { padding: 26px 24px 24px; }
  .sheet-hero h2 { font-size: 28px; }
  #waitlist-form { padding: 22px 24px max(24px, env(safe-area-inset-bottom, 0px)); gap: 18px; }
  .result { padding: 30px 24px max(28px, env(safe-area-inset-bottom, 0px)); }
}
@keyframes rise-sheet { from { transform: translateY(100%); } }

/* ---------- Phone hero: one spacing system (8 px steps, 24 px gutters) ---------- */
@media (max-width: 760px) {
  :root { --g: 24px; --nav-h: calc(max(14px, env(safe-area-inset-top, 0px)) + 66px); }
  .nav { padding: max(14px, env(safe-area-inset-top, 0px)) max(var(--g), env(safe-area-inset-right, 0px)) 12px max(var(--g), env(safe-area-inset-left, 0px)); align-items: center; }
  .nav .brand { gap: 10px; align-items: center; }
  .nav .brand img, .brand picture img { width: 32px; height: 32px; }
  .nav .brand span { font-size: 20px; line-height: 1; }
  .nav .btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .topbar.solid .nav { width: calc(100% - 16px); margin-top: max(8px, env(safe-area-inset-top, 0px)); padding: 6px 6px 6px 16px; }
  .topbar.solid .nav .brand img, .topbar.solid .brand picture img { width: 28px; height: 28px; }

  .hero-copy { padding: 40px var(--g) 0; gap: 0; }
  .hero h1 { font-size: min(44px, 11.4vw); line-height: 1.02; letter-spacing: -0.05em; }
  .hero .lede { margin-top: 16px; max-width: 320px; font-size: 17px; line-height: 1.55; }
  .hero .cities { margin-top: 24px; padding: 8px 16px; gap: 8px; font-size: 14px; }
  .hero-video { width: calc(100% - 2 * var(--g)); margin: 32px auto 0; border-radius: 28px; aspect-ratio: 4 / 5; }
  .hero-cta { flex: none; padding: 24px var(--g) max(40px, env(safe-area-inset-bottom, 0px)); gap: 0; }
  .hero-cta .btn-primary { width: 100%; max-width: none; min-height: 56px; }
}

/* ---------- Phone header: full-width audience tabs on top, logo row underneath ---------- */
.aud-tabs { display: none; }
@media (max-width: 760px) {
  :root { --nav-h: calc(env(safe-area-inset-top, 0px) + 120px); }
  .topbar, .topbar.solid { background: var(--white); box-shadow: 0 1px 0 var(--line); backdrop-filter: none; -webkit-backdrop-filter: none; }
  .aud-tabs { display: grid; grid-template-columns: 1fr 1fr; padding-top: env(safe-area-inset-top, 0px); background: #f6f1f8; }
  .aud-tabs button { height: 52px; border: 0; background: transparent; color: #a796b0; font: inherit; font-size: 15.5px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: background-color 0.25s ease, color 0.25s ease; }
  .aud-tabs button[aria-pressed='true'] { background: #e7d8ef; color: var(--aubergine); }
  .aud-tabs button:focus-visible { outline: 3px solid var(--tangerine); outline-offset: -3px; border-radius: 0; }
  .topbar .nav, .topbar.solid .nav { width: 100%; margin: 0; padding: 12px var(--g, 24px); height: 68px; border-radius: 0; background: transparent; box-shadow: none; }
  .topbar .nav-right { display: flex; }
  .topbar .seg-nav { display: none; }
  .topbar .brand img, .topbar .brand picture img, .topbar.solid .brand img, .topbar.solid .brand picture img { width: 32px; height: 32px; }
  .topbar .brand span, .topbar.solid .brand span { font-size: 20px; }
  .topbar .btn-sm, .topbar.solid .btn-sm { min-height: 40px; padding: 0 16px; font-size: 14px; }
  .seg-inline { display: none !important; }
}

/* ---------- Hero rhythm (desktop and tablet): one 4 px based scale, generous air under the nav ----------
   nav → headline 64 · headline → text 20 · text → pill 28 · pill → image 48 · image → CTA 32.
   The nav, the image and the CTA share one stage width, so their edges line up. */
@media (min-width: 761px) {
  :root { --stage-w: min(1040px, calc(100% - 2 * max(32px, var(--gutter))), calc((100svh - 519px) * 16 / 9)); }
  .topbar .nav { width: max(640px, var(--stage-w)); }
  .hero-copy { padding-top: 64px; gap: 0; }
  .hero .lede { margin-top: 20px; }
  .hero .cities { margin-top: 28px; padding: 8px 16px; gap: 8px; }
  .hero-video { margin-top: 48px; width: var(--stage-w); }
  .hero-cta { flex: none; padding-block: 32px 48px; gap: 0; }
}
/* Laptops with short screens: same order of spacing, a step smaller. */
@media (min-width: 761px) and (max-height: 820px) {
  :root { --stage-w: min(1040px, calc(100% - 64px), calc((100svh - 409px) * 16 / 9)); }
  .hero-copy { padding-top: 40px; }
  .hero .lede { margin-top: 16px; }
  .hero .cities { margin-top: 20px; }
  .hero-video { margin-top: 32px; width: var(--stage-w); }
  .hero-cta { padding-block: 24px 32px; }
}
/* Phones: header → headline 48 · headline → text 20 · text → pill 28 · pill → image 40 · image → CTA 28. */
@media (max-width: 760px) {
  .hero-copy { padding-top: 48px; }
  .hero .lede { margin-top: 20px; }
  .hero .cities { margin-top: 28px; }
  .hero-video { margin-top: 40px; }
  .hero-cta { padding-top: 28px; padding-bottom: max(48px, env(safe-area-inset-bottom, 0px)); }
}