:root {
  --blue-950: #082f3c;
  --blue-900: #0b4358;
  --blue-800: #105f79;
  --blue-700: #2c9fec;
  --blue-600: #218aab;
  --blue-100: #dceef3;
  --blue-050: #edf7f9;
  --paper: #ffffff;
  --wash: #f4f8f9;
  --ink: #102a34;
  --muted: #5f737b;
  --red: #e6111e;
  --line: rgba(16, 42, 52, 0.14);
  --serif: Iowan Old Style, Baskerville, "Times New Roman", serif;
  --sans: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --shadow: 0 30px 80px rgba(8, 47, 60, 0.15);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body { margin: 0; overflow-x: clip; background: var(--paper); color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.menu-open { overflow: hidden; }
button, input, textarea, a { font: inherit; }
button { color: inherit; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.container { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.section { padding: 112px 0; }
section[id] { scroll-margin-top: 94px; }

.skip-link { position: fixed; z-index: 1000; top: 8px; left: 8px; padding: 12px 18px; border-radius: 8px; background: var(--paper); color: var(--blue-950); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }

:where(a, button, input, textarea):focus-visible { outline: 3px solid #ffb9ba; outline-offset: 4px; }
.button:focus-visible { outline-color: var(--red); }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: 999px; padding: 13px 24px; font-weight: 800; line-height: 1.2; text-decoration: none; cursor: pointer; transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--blue-700); color: var(--paper); box-shadow: 0 12px 28px rgba(44, 159, 236, 0.28); }
.button-primary:hover { background: var(--blue-800); }
.button-secondary { border-color: rgba(255,255,255,.46); background: rgba(255,255,255,.08); color: var(--paper); }
.button-secondary:hover { background: rgba(255,255,255,.16); }
.button-light { background: var(--paper); color: var(--blue-950); }
.button-small { min-height: 44px; padding: 10px 19px; font-size: 14px; }

.site-header { position: fixed; z-index: 100; inset: 0 0 auto; border-bottom: 1px solid rgba(16,42,52,.1); background: var(--paper); color: var(--ink); box-shadow: 0 5px 22px rgba(5,25,33,.08); transition: box-shadow 180ms ease; }
.site-header.scrolled { box-shadow: 0 12px 35px rgba(5,25,33,.16); }
.header-inner { display: flex; min-height: 86px; align-items: center; justify-content: space-between; gap: 28px; }
.brand { display: inline-flex; min-height: 44px; align-items: center; }
.brand-wordmark { width: 210px; height: auto; }
.site-header .brand-wordmark { width: 240px; }
.desktop-nav { display: flex; align-items: center; gap: 28px; margin-left: auto; }
.desktop-nav a { min-height: 44px; display: inline-flex; align-items: center; color: var(--blue-900); font-size: 14px; font-weight: 750; text-decoration: none; }
.desktop-nav a:hover { color: var(--blue-700); }
.header-actions { display: flex; align-items: center; gap: 12px; }
.menu-toggle { display: none; width: 46px; height: 46px; border: 1px solid rgba(44,159,236,.42); border-radius: 50%; background: var(--blue-050); align-items: center; justify-content: center; flex-direction: column; gap: 6px; cursor: pointer; }
.menu-toggle span { width: 19px; height: 2px; background: var(--blue-900); transition: transform 180ms ease; }
.menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); }
.mobile-menu { padding: 14px 24px 24px; background: var(--blue-950); border-top: 1px solid rgba(255,255,255,.12); }
.mobile-menu a:not(.button) { display: flex; min-height: 48px; align-items: center; color: var(--paper); font-weight: 750; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,.1); }
.mobile-menu .button { width: 100%; margin-top: 16px; }

.hero { position: relative; min-height: 780px; overflow: hidden; padding: 150px 0 68px; background: var(--blue-950); color: var(--paper); }
.hero::before { content: ""; position: absolute; inset: 0; opacity: .12; background-image: linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px); background-size: 72px 72px; mask-image: linear-gradient(to bottom, #000, transparent 78%); }
.hero-glow { position: absolute; width: 720px; height: 720px; right: -180px; top: -150px; border-radius: 50%; background: radial-gradient(circle, rgba(33,138,171,.42), transparent 66%); }
.hero-glow-accent { width: 420px; height: 420px; right: auto; top: auto; left: -140px; bottom: -180px; background: radial-gradient(circle, rgba(230,17,30,.14), transparent 70%); }
.hero-grid { position: relative; display: grid; grid-template-columns: minmax(0,1.03fr) minmax(340px,.97fr); align-items: center; gap: 66px; }
.eyebrow, .kicker { display: inline-flex; align-items: center; gap: 10px; color: var(--blue-700); font-size: 12px; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.eyebrow { color: #b9dfeb; }
.eyebrow span { width: 28px; height: 2px; background: var(--red); }
h1, h2, h3, p { margin-top: 0; }
h1 { max-width: 730px; margin: 22px 0 24px; font: 700 clamp(50px, 6.2vw, 84px)/.98 var(--serif); letter-spacing: -.045em; }
h2 { margin: 16px 0 22px; font: 700 clamp(38px, 4.7vw, 64px)/1.02 var(--serif); letter-spacing: -.035em; }
h2 em { color: var(--blue-700); font-weight: inherit; }
.hero-lede { max-width: 650px; margin-bottom: 30px; color: rgba(255,255,255,.78); font-size: clamp(18px,2vw,21px); line-height: 1.6; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-proof { display: flex; flex-wrap: wrap; gap: 14px 22px; margin-top: 30px; color: rgba(255,255,255,.74); font-size: 13px; font-weight: 700; }
.hero-proof span { display: inline-flex; align-items: center; gap: 8px; }
.hero-proof i { display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: rgba(255,255,255,.12); color: #c8eaf3; font-style: normal; }
.hero-visual { position: relative; display: grid; margin: 0; place-items: center; min-height: 610px; }
.phone-shell { position: relative; z-index: 2; width: min(344px,80%); overflow: hidden; border: 10px solid #061f29; border-radius: 50px; background: #061f29; box-shadow: 0 46px 100px rgba(0,0,0,.5), 0 0 0 1px rgba(255,255,255,.06); }
.phone-shell img { width: 100%; height: auto; }
.phone-notch { position: absolute; z-index: 4; top: 0; left: 50%; width: 132px; height: 26px; border-radius: 0 0 18px 18px; background: #061f29; transform: translateX(-50%); }
.orbit { position: absolute; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.orbit-one { width: 570px; height: 570px; }
.orbit-two { width: 430px; height: 430px; border-style: dashed; }
.hero-badge { position: absolute; z-index: 3; top: 6%; left: -6px; display: grid; padding: 12px 18px; border-radius: 18px; background: var(--paper); color: var(--blue-950); box-shadow: 0 20px 44px rgba(0,0,0,.32); line-height: 1.1; }
.hero-badge strong { font: 700 20px var(--serif); }
.hero-badge span { color: var(--muted); font-size: 11px; font-weight: 750; text-transform: uppercase; letter-spacing: .06em; }
/* Deliberately NOT position:absolute — the caption sits in normal grid flow
   BELOW the phone-shell (a second auto row in .hero-visual's single-column
   grid), never overlapping the screenshot inside the device frame. An earlier
   absolutely-positioned version covered the bottom of the phone image. */
.preview-caption { margin: 16px 0 0; max-width: 300px; color: rgba(255,255,255,.58); font-size: 12px; font-weight: 650; font-style: normal; line-height: 1.4; text-align: center; }
/* Official store badges, sized to the same visual height so App Store and Google
   Play read as a matched pair without stretching either asset off its native
   aspect ratio (docs/BRAND.md forbids recolouring/stretching brand artwork; the
   same discipline applies to third-party badge artwork). */
.store-badges {
  display: flex;
  align-items: center;
  justify-content: center;
  /* Never wrap: two badges on separate lines reads as broken, not a graceful
     fallback. `.hero-visual` is a `place-items:center` grid, whose single
     implicit column's own intrinsic-sizing can, on some real mobile viewports,
     come out narrower than this row's natural content width even though the
     figure itself has plenty of room (2026-09-13, reported off a real Android
     phone: the row wrapped onto two lines even though the .hero-visual column
     had space to spare) -- giving this box its OWN definite width removes
     that ambiguity outright rather than trying to out-guess grid track sizing. */
  flex-wrap: nowrap;
  width: 100%;
  max-width: 320px;
  gap: 14px;
  margin: 20px 0 0;
}
.store-badge { display: inline-flex; line-height: 0; }
.store-badges img { display: block; height: 48px; width: auto; }

.section-heading { max-width: 660px; }
.section-heading.centred { margin-inline: auto; text-align: center; }
.section-heading p { color: var(--muted); font-size: 18px; line-height: 1.65; }
.section-heading.split { max-width: none; display: grid; grid-template-columns: 1.1fr .8fr; align-items: end; gap: 80px; margin-bottom: 62px; }
.section-heading.split p { margin-bottom: 10px; }
.benefit-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 58px; }
.benefit-card { position: relative; min-height: 430px; overflow: hidden; padding: 34px; border-radius: 28px; }
.benefit-card h3 { margin: 178px 0 12px; font: 700 30px/1.05 var(--serif); }
.benefit-card p { margin: 0; line-height: 1.65; }
.benefit-blue { background: var(--blue-700); color: var(--paper); }
.benefit-blue p, .benefit-dark p { color: rgba(255,255,255,.76); }
.benefit-pale { background: var(--blue-050); }
.benefit-dark { background: var(--blue-900); color: var(--paper); }
.card-number { opacity: .62; font-size: 12px; font-weight: 850; letter-spacing: .14em; }
.mini-calendar, .mini-chart, .mini-health { position: absolute; top: 70px; left: 34px; right: 34px; }
.mini-calendar { width: 116px; height: 112px; padding: 15px; border-radius: 16px; background: rgba(255,255,255,.16); }
.mini-calendar span { display: block; font-size: 10px; letter-spacing: .15em; }
.mini-calendar strong { font: 700 38px var(--serif); }
.mini-calendar i { position: absolute; right: -12px; bottom: -12px; display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--paper); color: var(--blue-700); font-style: normal; }
.mini-chart span { font: 700 44px var(--serif); color: var(--blue-700); }
.mini-chart svg { width: 210px; height: 80px; }
.mini-chart path { fill: none; stroke: var(--blue-700); stroke-width: 4; }
.mini-health { padding: 18px; border: 1px solid rgba(255,255,255,.18); border-radius: 16px; background: rgba(255,255,255,.08); }
.mini-health span, .mini-health strong { display: block; }
.mini-health span { color: rgba(255,255,255,.6); font-size: 11px; text-transform: uppercase; letter-spacing: .1em; }
.mini-health strong { margin-top: 7px; }
.mini-health div { height: 6px; margin-top: 16px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.14); }
.mini-health i { display: block; width: 84%; height: 100%; background: #a7d9e7; }

.feature-stage { overflow: hidden; background: var(--blue-900); color: var(--paper); }
.feature-layout { display: grid; grid-template-columns: .82fr 1.18fr; align-items: center; gap: 70px; }
.kicker-light { color: #a7d9e7; }
.feature-copy h2 em { color: #b9dfeb; }
.feature-copy > p { color: rgba(255,255,255,.7); font-size: 17px; line-height: 1.65; }
.feature-tabs { display: grid; grid-template-columns: repeat(2,1fr); gap: 9px; margin-top: 34px; }
.feature-tabs button { min-height: 56px; border: 1px solid rgba(255,255,255,.15); border-radius: 13px; background: transparent; color: rgba(255,255,255,.72); text-align: left; cursor: pointer; }
.feature-tabs button span { margin-right: 9px; opacity: .54; font-size: 10px; }
.feature-tabs button[aria-selected="true"] { border-color: var(--blue-600); background: var(--blue-700); color: var(--paper); }
.feature-panel { position: relative; min-height: 500px; overflow: hidden; padding: 52px; border: 1px solid rgba(8,47,60,.06); border-radius: 32px; color: var(--ink); box-shadow: var(--shadow); }
.tone-blue { background: #dceef3; }
.tone-deep { background: #c7e5ed; }
.tone-paper { background: var(--paper); }
.tone-wash { background: #e9f3f6; }
.panel-eyebrow { color: var(--blue-700); font-size: 11px; font-weight: 850; letter-spacing: .12em; text-transform: uppercase; }
.feature-panel h3 { max-width: 500px; margin: 14px 0; font: 700 42px/1.04 var(--serif); }
.feature-panel > p { max-width: 530px; color: var(--muted); line-height: 1.65; }
.feature-panel ul { display: grid; gap: 11px; margin: 30px 0 0; padding: 0; list-style: none; }
.feature-panel li { display: flex; gap: 10px; align-items: center; font-weight: 750; }
.feature-panel li span { display: grid; width: 24px; height: 24px; place-items: center; border-radius: 50%; background: var(--blue-700); color: var(--paper); font-size: 12px; }
.feature-stat { position: absolute; right: 38px; bottom: 36px; display: grid; min-width: 168px; padding: 22px; border-radius: 18px; background: var(--blue-950); color: var(--paper); }
.feature-stat strong { font: 700 29px var(--serif); }
.feature-stat span { color: rgba(255,255,255,.65); font-size: 11px; }
.panel-orbit { position: absolute; width: 220px; height: 220px; right: -90px; top: -80px; border: 25px solid rgba(44,159,236,.14); border-radius: 50%; }

.steps { background: var(--wash); }
.steps-list { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin: 0; padding: 0; list-style: none; }
.steps-list li { min-height: 345px; padding: 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); }
.step-index { color: var(--blue-700); font-size: 11px; font-weight: 850; letter-spacing: .15em; }
.step-art { display: grid; height: 135px; margin: 24px 0; place-items: center; }
.steps-list h3 { margin-bottom: 9px; font: 700 27px var(--serif); }
.steps-list p { color: var(--muted); line-height: 1.55; }
.plate-art { display: flex; width: min(230px,100%); height: 65px; align-self: center; margin-block: 58px 60px; border: 4px solid var(--ink); border-radius: 7px; background: #f4dd30; font-weight: 900; }
.plate-art span { align-self: stretch; display: grid; place-items: center; padding: 0 9px; background: var(--blue-700); color: var(--paper); font-size: 10px; }
.plate-art strong { margin: auto; letter-spacing: .09em; }
.radar-art { position: relative; }
.radar-art::before, .radar-art::after, .radar-art i { content: ""; position: absolute; border: 2px solid var(--blue-700); border-radius: 50%; }
.radar-art::before { width: 118px; height: 118px; opacity: .22; }
.radar-art::after { width: 76px; height: 76px; opacity: .46; }
.radar-art i { width: 38px; height: 38px; background: var(--blue-100); }
.radar-art b { position: relative; z-index: 2; width: 9px; height: 9px; border-radius: 50%; background: var(--red); }
.tick-art { width: 86px; height: 86px; margin: 48px auto 50px; border-radius: 50%; background: var(--blue-700); color: var(--paper); font-size: 38px; }

.promise-card { position: relative; min-height: 500px; display: grid; grid-template-columns: .9fr 1.1fr; overflow: hidden; border-radius: 34px; background: var(--blue-950); color: var(--paper); }
.promise-copy { position: relative; z-index: 2; padding: 68px 0 68px 68px; }
.promise-copy h2 { font-size: clamp(38px,4.5vw,60px); }
.promise-copy h2 em { color: #b9dfeb; }
.promise-copy p { max-width: 520px; color: rgba(255,255,255,.72); font-size: 17px; line-height: 1.65; }
.promise-art { position: relative; display: flex; align-items: end; justify-content: center; min-width: 0; padding: 30px 28px 34px; }
.promise-art img { position: relative; z-index: 2; width: min(650px,100%); height: auto; object-fit: contain; filter: drop-shadow(0 28px 28px rgba(0,0,0,.28)); }
.road { position: absolute; width: 640px; height: 640px; border: 1px dashed rgba(255,255,255,.16); border-radius: 50%; }
.road-two { width: 430px; height: 430px; }

.pricing { background: var(--blue-050); }
.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; }

.plan-matrix-wrap { margin-top: 56px; }
.plan-matrix-scroll { overflow-x: auto; border-radius: 28px; border: 1px solid rgba(44,159,236,.1); background: var(--paper); box-shadow: var(--shadow); }
.plan-matrix { width: 100%; min-width: 760px; border-collapse: collapse; }
.plan-matrix thead th { padding: 26px 18px 20px; border-bottom: 1px solid var(--line); text-align: center; vertical-align: top; }
.plan-matrix-feature-head { min-width: 240px; padding-bottom: 14px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; text-align: left; vertical-align: bottom; }
.plan-col { position: relative; min-width: 150px; }
.plan-col-featured { border-radius: 18px 18px 0 0; background: var(--blue-100); }
.plan-col-badge { display: inline-block; margin-bottom: 8px; border-radius: 999px; background: var(--blue-700); padding: 3px 12px; color: var(--paper); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.plan-col-name { display: block; color: var(--blue-950); font-size: 17px; font-weight: 800; }
.plan-col-price { display: block; margin: 6px 0 16px; color: var(--ink); font-size: 26px; font-weight: 800; }
.plan-col-cadence { color: var(--muted); font-size: 13px; font-weight: 650; }
.plan-col-cta { width: 100%; }
.plan-col-app-only { display: grid; gap: 8px; }
.plan-col-app-only-note { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.45; }
.plan-col-app-only-links { display: grid; gap: 6px; }
/* Real Apple/Google badge artwork (2026-09-13, owner: the pricing card's store
   links were plain text pills, not the actual store badges every other "get the
   app" link on the site uses — see the hero's own `.store-badge`). No text-colour
   contrast concern here (the fix this replaced, 2026-09-02, was for a plain-text
   button unreadable on this light table): the badge art is self-contained black
   artwork, not styled text, so it reads the same on every surface. */
.plan-store-badge { display: inline-flex; padding: 0; line-height: 0; }
.plan-store-badge img { display: block; height: 36px; width: auto; }
.plan-matrix tbody th { padding: 16px 18px; border-bottom: 1px solid var(--line); text-align: left; }
.plan-row-title { display: block; color: var(--ink); font-weight: 700; }
.plan-row-desc { display: block; margin-top: 3px; color: var(--muted); font-size: 13px; font-weight: 500; line-height: 1.5; }
.plan-matrix tbody td { padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--blue-700); font-size: 17px; text-align: center; }
.plan-matrix tbody td[data-checked="false"] { color: var(--muted); }
.plan-matrix tbody tr:last-child th, .plan-matrix tbody tr:last-child td { border-bottom: 0; }
.plan-mobile-matrix { display: none; }
.plan-matrix-note { margin: 20px 4px 0; color: var(--muted); font-size: 13px; line-height: 1.6; }

.pricing-detail { margin-top: 40px; }
.pricing-detail-card { display: flex; gap: 22px; align-items: flex-start; padding: 32px; border: 1px solid rgba(44,159,236,.14); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.pricing-detail-icon { display: grid; flex: 0 0 52px; width: 52px; height: 52px; place-items: center; border-radius: 16px; background: var(--blue-100); color: var(--blue-800); font-size: 24px; }
.pricing-detail-card h3 { margin: 0 0 10px; font: 700 22px var(--serif); color: var(--blue-950); }
.pricing-detail-card > div > p { margin: 0 0 16px; color: var(--muted); font-size: 15px; line-height: 1.6; }
.pricing-detail-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.pricing-detail-list li { position: relative; padding-left: 20px; color: var(--ink); font-size: 14px; line-height: 1.55; }
.pricing-detail-list li::before { content: "•"; position: absolute; left: 2px; color: var(--blue-700); font-weight: 900; }

/* Shop (owner ruling 2026-09-02) — the VeePeak OBD reader + future merchandise.
   The section itself carries [hidden] until site.js's applyShopCatalogue() shows
   it, so no extra display rule is needed for the hidden state. */
.shop { background: var(--blue-050); }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 24px; margin-top: 12px; }
.shop-item-card { display: flex; flex-direction: column; padding: 28px; border: 1px solid rgba(44,159,236,.14); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); text-align: left; }
.shop-item-image { width: 100%; height: 180px; margin-bottom: 16px; border-radius: 16px; object-fit: cover; background: var(--blue-100); }
.shop-item-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.shop-item-badge { padding: 4px 10px; border-radius: 999px; background: var(--blue-100); color: var(--blue-800); font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.shop-item-name { margin: 0 0 4px; font: 700 22px var(--serif); color: var(--blue-950); }
.shop-item-subtitle { margin: 0 0 10px; color: var(--blue-700); font-size: 14px; font-weight: 700; }
.shop-item-description { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.shop-item-compat { margin: 0 0 14px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.shop-item-price-row { display: flex; align-items: baseline; gap: 10px; margin: auto 0 16px; }
.shop-item-price { font: 700 26px var(--serif); color: var(--blue-950); }
.shop-item-compare-at { color: var(--muted); font-size: 14px; text-decoration: line-through; }
.shop-item-cta { width: 100%; text-align: center; }

.faq-layout { display: grid; grid-template-columns: .72fr 1.28fr; align-items: start; gap: 80px; }
.accordion { border-top: 1px solid var(--line); }
.accordion-item { border-bottom: 1px solid var(--line); }
.accordion-item h3 { margin: 0; }
.accordion-item button { display: flex; width: 100%; min-height: 76px; align-items: center; justify-content: space-between; gap: 20px; border: 0; padding: 18px 4px; background: none; font-weight: 800; text-align: left; cursor: pointer; }
.accordion-item button i { position: relative; flex: 0 0 30px; height: 30px; border-radius: 50%; background: var(--blue-100); }
.accordion-item button i::before, .accordion-item button i::after { content: ""; position: absolute; top: 14px; left: 9px; width: 12px; height: 2px; background: var(--blue-800); }
.accordion-item button i::after { transform: rotate(90deg); transition: transform 160ms ease; }
.accordion-item.open button i::after { transform: rotate(0); }
.accordion-panel { padding: 0 48px 24px 4px; }
.accordion-panel p { margin: 0; color: var(--muted); line-height: 1.65; }

.final-cta { position: relative; overflow: hidden; padding: 108px 0; background: var(--blue-950); color: var(--paper); }
.final-cta::before { content: ""; position: absolute; width: 620px; height: 620px; right: -250px; bottom: -390px; border: 1px solid rgba(255,255,255,.1); border-radius: 50%; box-shadow: 0 0 0 88px rgba(44,159,236,.06), 0 0 0 176px rgba(44,159,236,.04); pointer-events: none; }
.waitlist-layout { position: relative; display: grid; grid-template-columns: minmax(0,.84fr) minmax(460px,1.16fr); align-items: center; gap: clamp(56px,7vw,92px); }
.cta-mark { width: 62px; height: 62px; margin-bottom: 26px; object-fit: contain; }
.waitlist-copy h2 { margin-bottom: 20px; }
.waitlist-copy p { max-width: 520px; color: rgba(255,255,255,.72); font-size: 18px; line-height: 1.6; }
.waitlist-form { position: relative; padding: 38px 40px 34px; border: 1px solid rgba(255,255,255,.38); border-radius: 28px; background: var(--paper); color: var(--ink); box-shadow: 0 32px 80px rgba(0,0,0,.28); }
.form-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.form-heading h3 { margin: 4px 0 0; font: 700 28px/1.1 var(--serif); letter-spacing: -.02em; }
.form-kicker { color: var(--blue-700); font-size: 11px; font-weight: 850; letter-spacing: .13em; text-transform: uppercase; }
.form-assurance { max-width: 390px; margin: 10px 0 0; color: var(--muted); font-size: 13px; font-weight: 650; line-height: 1.5; }
.form-grid { display: grid; gap: 24px; }
.form-field { min-width: 0; }
.form-field label { display: block; margin-bottom: 9px; color: var(--blue-950); font-size: 14px; font-weight: 800; }
.form-field label span { color: var(--muted); font-weight: 500; }
.form-field input, .form-field textarea { width: 100%; border: 1px solid rgba(16,42,52,.26); border-radius: 12px; padding: 13px 14px; background: #fbfdfe; color: var(--ink); transition: border-color 160ms ease, box-shadow 160ms ease, background 160ms ease; }
.form-field input { min-height: 50px; }
.form-field textarea { min-height: 112px; resize: vertical; }
.form-field input:hover, .form-field textarea:hover { border-color: rgba(44,159,236,.55); }
.form-field input:focus, .form-field textarea:focus { border-color: var(--blue-700); background: var(--paper); box-shadow: 0 0 0 3px rgba(44,159,236,.13); outline: none; }
.form-field input[aria-invalid="true"] { border-color: var(--red); box-shadow: 0 0 0 1px var(--red); }
.form-field small { display: block; margin-top: 8px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.form-legal { margin: 24px 0 18px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; line-height: 1.6; }
.form-legal a { color: var(--blue-700); font-weight: 750; }
.form-submit { width: 100%; }
.form-submit:disabled { background: #9ab7c1; color: var(--paper); box-shadow: none; cursor: not-allowed; opacity: 1; transform: none; }
.waitlist-form[aria-busy="true"] .form-submit:disabled { background: var(--blue-800); cursor: wait; }
.form-status { min-height: 24px; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.55; }
.form-status[data-state="success"] { color: #11614b; font-weight: 750; }
.form-status[data-state="error"] { color: #a30a0d; font-weight: 750; }
.form-trap { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; clip-path: inset(50%) !important; white-space: nowrap !important; }

.site-footer { padding: 66px 0 24px; background: #061f29; color: var(--paper); }
.footer-main { display: grid; grid-template-columns: 1.25fr .75fr .75fr; gap: 60px; }
.footer-main > div:first-child p { max-width: 350px; margin-top: 20px; color: rgba(255,255,255,.57); line-height: 1.6; }
.footer-main nav, .footer-contact { display: grid; align-content: start; gap: 8px; }
.footer-main nav a, .footer-contact a { display: inline-flex; min-height: 44px; align-items: center; color: rgba(255,255,255,.72); text-decoration: none; }
.footer-contact span { margin-bottom: 6px; color: rgba(255,255,255,.45); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; }
.footer-base { display: flex; justify-content: space-between; margin-top: 48px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.42); font-size: 12px; }

/* Third-party trademark notice. Sits in the footer of EVERY page because every
   page can show vehicle imagery, demo data or app screens carrying a
   manufacturer's name. Deliberately quieter than the copyright line above it —
   it is a standing notice, not a message. Two tones because the marketing footer
   is dark (#061f29) and the legal/preview footer is the light --wash. */
.footer-marks { max-width: 900px; margin: 18px 0 0; font-size: 12px; line-height: 1.6; }
.site-footer .footer-marks { color: rgba(255,255,255,.42); }
.legal-footer .footer-marks { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); }

/* Content is visible by default. JavaScript adds this class only after all
   enhancement setup succeeds, so a module/network failure can never hide it. */
.js-ready .reveal { opacity: 0; transform: translateY(22px); transition: opacity 600ms ease, transform 600ms ease; }
.js-ready .reveal.visible { opacity: 1; transform: none; }
.js-ready .reveal-delay { transition-delay: 120ms; }
.js-ready .reveal-delay-short { transition-delay: 70ms; }
.js-ready .reveal-delay-long { transition-delay: 140ms; }

@media (max-width: 940px) {
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: flex; }
  .hero { min-height: auto; padding-top: 128px; }
  .hero-grid { grid-template-columns: 1fr 390px; gap: 30px; }
  .hero-visual { min-height: 550px; }
  .phone-shell { width: 288px; }
  .hero-badge { top: 2%; left: -10px; padding: 10px 14px; }
  .hero-badge strong { font-size: 17px; }
  .store-badges { margin-top: 18px; }
  .store-badges img { height: 44px; }
  .benefit-grid { grid-template-columns: 1fr 1fr; }
  .benefit-card:last-child { grid-column: 1 / -1; min-height: 360px; }
  .feature-layout, .waitlist-layout { grid-template-columns: 1fr; }
  .feature-layout, .waitlist-layout { gap: 48px; }
  .promise-card { grid-template-columns: 1fr; }
  .promise-copy { padding: 54px 54px 20px; }
  .promise-art { min-height: 310px; }
  .faq-layout { grid-template-columns: 1fr; gap: 42px; }
}

@media (max-width: 720px) {
  .container { width: min(100% - 32px, 620px); }
  .section { padding: 76px 0; }
  .header-inner { min-height: 76px; }
  .brand-wordmark { width: 190px; }
  .site-header .brand-wordmark { width: 210px; }
  .hero { padding: 110px 0 50px; }
  .hero-grid { display: flex; flex-direction: column; gap: 30px; }
  h1 { margin: 17px 0 19px; font-size: clamp(45px,14vw,62px); }
  .hero-lede { margin-bottom: 23px; font-size: 17px; line-height: 1.52; }
  .hero-actions { display: grid; grid-template-columns: 1fr 1fr; }
  .hero-actions .button { padding-inline: 14px; }
  .hero-proof { gap: 9px 18px; margin-top: 22px; }
  .hero-visual { width: 100%; min-height: 440px; }
  .phone-shell { width: 230px; max-height: 392px; border-width: 7px; border-radius: 36px; }
  .phone-shell img { transform: translateY(-4px); }
  .phone-notch { width: 96px; height: 20px; border-radius: 0 0 13px 13px; }
  .orbit-one { width: 400px; height: 400px; }
  .orbit-two { width: 310px; height: 310px; }
  .hero-badge { display: none; }
  .store-badges { margin-top: 16px; max-width: 300px; gap: 10px; }
  .store-badges img { height: 40px; }
  .preview-caption { max-width: 280px; }
  .section-heading.split { grid-template-columns: 1fr; gap: 8px; margin-bottom: 42px; }
  .benefit-grid, .steps-list { grid-template-columns: 1fr; }
  .benefit-card, .benefit-card:last-child { grid-column: auto; min-height: 370px; }
  .mini-calendar, .mini-chart, .mini-health { position: relative; top: auto; right: auto; left: auto; margin-top: 28px; }
  .benefit-card h3 { margin-top: 30px; }
  .feature-panel { min-height: 520px; padding: 34px 26px; }
  .feature-panel h3 { font-size: 35px; }
  .feature-panel ul { margin-top: 26px; }
  .feature-stat { position: relative; right: auto; bottom: auto; left: auto; width: 100%; min-width: 0; margin-top: 30px; }
  .promise-copy { padding: 44px 28px 12px; }
  .promise-art { min-height: 250px; padding: 16px 18px 26px; }
  .plan-matrix-wrap { margin-top: 40px; }
  .plan-matrix-scroll { display: none; }
  .plan-mobile-matrix { display: grid; gap: 14px; }
  .plan-mobile-card { display: grid; grid-template-columns: minmax(112px, .72fr) minmax(0, 1.28fr); align-items: stretch; gap: 14px; overflow: hidden; border: 1px solid rgba(44,159,236,.18); border-radius: 20px; background: var(--paper); box-shadow: 0 14px 34px rgba(8,47,60,.08); }
  .plan-mobile-card-featured { border-color: rgba(44,159,236,.52); box-shadow: 0 16px 38px rgba(44,159,236,.16); }
  .plan-mobile-choice { display: flex; min-width: 0; flex-direction: column; align-items: stretch; padding: 18px 14px; background: var(--blue-050); }
  .plan-mobile-card-featured .plan-mobile-choice { background: var(--blue-100); }
  .plan-mobile-name { color: var(--blue-950); font-size: 16px; font-weight: 850; }
  .plan-mobile-price { display: block; margin: 3px 0 14px; color: var(--ink); font-size: 24px; font-weight: 850; letter-spacing: -.03em; line-height: 1; }
  .plan-mobile-cadence { margin-left: 2px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: 0; }
  .plan-mobile-badge { display: inline-flex; width: fit-content; margin-bottom: 7px; border-radius: 999px; padding: 3px 7px; background: var(--blue-700); color: var(--paper); font-size: 9px; font-weight: 850; letter-spacing: .04em; line-height: 1.2; text-transform: uppercase; }
  .plan-mobile-cta { width: 100%; margin-top: 2px; padding-inline: 8px; }
  .plan-mobile-app-only { display: grid; gap: 8px; margin-top: 4px; }
  .plan-mobile-app-only-note { margin: 0; color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1.45; }
  .plan-mobile-app-only-links { display: grid; gap: 6px; }
  .plan-mobile-benefits { min-width: 0; padding: 18px 16px 18px 0; }
  .plan-mobile-includes { margin: 0 0 9px; color: var(--blue-900); font-size: 12px; font-weight: 850; letter-spacing: .05em; line-height: 1.35; text-transform: uppercase; }
  .plan-mobile-benefit-list { display: grid; gap: 9px; margin: 0; padding: 0; list-style: none; }
  .plan-mobile-benefit-list li { position: relative; padding-left: 17px; color: var(--ink); font-size: 13px; font-weight: 600; line-height: 1.45; }
  .plan-mobile-benefit-list li::before { content: "✓"; position: absolute; top: 0; left: 0; color: var(--blue-700); font-weight: 900; }
  .plan-mobile-benefit-list strong { font-weight: 850; }
  .pricing-detail-card { flex-direction: column; gap: 14px; padding: 24px; }
  .waitlist-form { padding: 28px 22px 24px; }
  .form-heading { align-items: flex-start; gap: 14px; margin-bottom: 24px; padding-bottom: 20px; }
  .form-heading h3 { font-size: 25px; }
  .footer-main { grid-template-columns: 1fr; gap: 34px; }
  .footer-base { display: grid; gap: 8px; }
}

@media (max-width: 410px) {
  .hero-actions { grid-template-columns: 1fr; }
  .hero-actions .button { width: 100%; }
  .hero-proof { display: grid; }
  .feature-tabs { grid-template-columns: 1fr 1fr; }
  .feature-tabs button { padding: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-ready .reveal { opacity: 1; transform: none; }
}

/* Legal / policy pages (privacy.html, and any future same-origin policy doc).
   Reuses the site tokens for an on-brand, readable long-form document so the
   marketing site can host its own working Privacy Policy without depending on
   the (not-yet-deployed) production app. */
.legal-page { padding-top: 86px; }
.legal-hero { background: var(--blue-950); color: var(--paper); padding: 72px 0 58px; }
.legal-hero .kicker { color: #b9dfeb; }
.legal-hero h1 { max-width: none; margin: 14px 0 10px; font: 700 clamp(38px, 5vw, 60px)/1.03 var(--serif); letter-spacing: -.035em; }
.legal-meta { color: rgba(255,255,255,.72); font-size: 14px; font-weight: 700; letter-spacing: .03em; }
.legal-body { padding: 60px 0 96px; }
.legal-body .container { max-width: 820px; }
.legal-body .lead { font-size: clamp(18px, 2vw, 21px); line-height: 1.65; color: var(--ink); margin-bottom: 10px; }
.legal-body h2 { margin: 42px 0 12px; font: 700 clamp(24px, 3vw, 32px)/1.16 var(--serif); letter-spacing: -.02em; }
.legal-body h3 { margin: 26px 0 6px; color: var(--blue-700); font-size: 18px; font-weight: 800; }
.legal-body p, .legal-body li { color: var(--ink); font-size: 16px; line-height: 1.7; }
.legal-body ul { padding-left: 22px; }
.legal-body li { margin: 6px 0; }
.legal-body strong { font-weight: 800; }
.legal-body a { color: var(--blue-700); font-weight: 700; text-underline-offset: 3px; }
.legal-body a:hover { color: var(--blue-800); }
.legal-callout { background: var(--wash); border: 1px solid var(--line); border-left: 4px solid var(--blue-700); border-radius: 14px; padding: 18px 22px; margin: 22px 0; }
.legal-callout ul { margin: 0; }
.legal-table-wrap { overflow-x: auto; margin: 16px 0; }
.legal-body table { border-collapse: collapse; width: 100%; font-size: 15px; }
.legal-body th, .legal-body td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-body th { background: var(--blue-050); font-weight: 800; }
.legal-footer { border-top: 1px solid var(--line); padding: 40px 0; background: var(--wash); }
.legal-footer .container { display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; color: var(--muted); font-size: 14px; }
.legal-footer nav { display: inline-flex; flex-wrap: wrap; gap: 18px; }
.legal-footer a { color: var(--blue-800); font-weight: 750; text-decoration: none; }
.legal-footer a:hover { color: var(--blue-700); }

/* ---------------------------------------------------------------------------
   The public app walkthrough (walkthrough.html) — a controlled, screen-driven
   guide that is linked from the site and sitemap.

   There is only ONE palette below, and that is the change worth noticing. The
   previous version of this block carried a second `--vf-*` set that re-created
   the app's surface in this stylesheet, because the phone's contents were
   hand-built markup on this page. They are not any more: the phone holds an
   <iframe> running a real build of the app, which brings its own stylesheet. So
   everything here styles the page AROUND the phone, plus the bezel and the
   fingertip. Nothing here can style what is inside the app, and nothing should
   try — that is the product's job.

   Everything animated here is suppressed under prefers-reduced-motion at the end
   of the block, and the walkthrough does not auto-play in that case either.
--------------------------------------------------------------------------- */
.walkthrough-page .legal-body .container { max-width: 1100px; }

.vfsim { margin: 40px 0 8px; }
.vfsim-head { max-width: 640px; }
.vfsim-head h2 { margin: 10px 0 12px; font: 700 clamp(26px, 3.2vw, 36px)/1.12 var(--serif); letter-spacing: -.025em; }
.vfsim-head p { margin: 0; }

.vfsim-layout { display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 44px; align-items: start; margin-top: 34px; }
/* Grid items default to `min-width: auto`, exactly like flex items — their
   content-based minimum (here, the unwrapped `.vfsim-status`/`.vfsim-error`
   text several thousand px wide) sets a floor under the grid track's own size,
   independent of any `min-width: 0` given to a descendant. `minmax(0, …)` above
   already overrides that floor for desktop's two-column tracks; the mobile
   media query below collapses to a single bare `1fr` track with no such
   override, so the two direct grid items need their own `min-width: 0` too. */
.vfsim-aside,
.vfsim-stage { min-width: 0; }

/* "Pick a journey" — the scenario selector's own label, and the current
   scenario's title shown above the narration so each step reads as part of a
   named, self-contained story rather than a loose feature tour (owner, 2026-08-08). */
.vfsim-pick { margin: 0 0 10px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.vfsim-scenario { margin: 0 0 10px; color: var(--blue-900); font-size: 19px; font-weight: 850; line-height: 1.25; }
.vfsim-scenario:empty { display: none; }

.vfsim-chapters { display: grid; gap: 8px; margin: 0 0 22px; padding: 0; list-style: none; counter-reset: none; }
.vfsim-chapters li { border-radius: 14px; }
.vfsim-chapters button { display: flex; width: 100%; min-height: 48px; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--paper); color: var(--muted); font-size: 15px; font-weight: 750; text-align: left; cursor: pointer; transition: border-color 180ms ease, color 180ms ease, background 180ms ease; }
.vfsim-chapters button span { display: inline-flex; width: 26px; height: 26px; flex: 0 0 26px; align-items: center; justify-content: center; border-radius: 50%; background: var(--wash); color: var(--blue-900); font-size: 13px; font-weight: 850; }
.vfsim-chapters .is-done button { color: var(--blue-800); }
.vfsim-chapters .is-done button span { background: var(--blue-100); }
.vfsim-chapters .is-current button { border-color: var(--blue-700); background: var(--blue-050); color: var(--blue-900); }
.vfsim-chapters .is-current button span { background: var(--blue-700); color: var(--paper); }

.vfsim-status { display: flex; min-width: 0; min-height: 76px; align-items: center; gap: 12px; margin: 0 0 18px; padding: 16px 18px; border-left: 3px solid var(--blue-700); border-radius: 4px 14px 14px 4px; background: var(--blue-050); color: var(--blue-900); font-size: 16px; font-weight: 700; line-height: 1.45; }

/* A broken beat is shown, not swallowed. The walkthrough drives the real app, so
   a control that has been renamed or moved must stop the playthrough visibly —
   silently playing a shorter story is the failure nobody ever notices. */
.vfsim-error { min-width: 0; margin: 0 0 18px; padding: 16px 18px; border-left: 3px solid var(--red); border-radius: 4px 14px 14px 4px; background: #fdeceb; color: #8a1c14; font-size: 14.5px; font-weight: 650; line-height: 1.5; }
.vfsim-error[hidden] { display: none; }

.vfsim-controls { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 18px; }
.vfsim-controls button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); color: var(--blue-900); font-size: 14px; font-weight: 800; cursor: pointer; }
.vfsim-controls button:hover:not(:disabled) { border-color: var(--blue-700); color: var(--blue-700); }
.vfsim-controls button:disabled { opacity: .45; cursor: default; }
.vfsim-controls [data-demo-toggle] { border-color: transparent; background: var(--blue-700); color: var(--paper); }
.vfsim-step { margin: 0 0 22px; color: var(--muted); font-size: 14px; }
.vfsim-legend { margin: 0; padding: 18px 20px; border: 1px dashed rgba(16, 42, 52, .28); border-radius: 16px; background: var(--wash); color: var(--muted); font-size: 14px; line-height: 1.6; }
.vfsim-legend strong { color: var(--ink); }

/* -------- the phone ------------------------------------------------------- */
/* The bezel is ours; everything inside the frame is the app's own. */
.vfsim-stage { display: flex; justify-content: center; }
.vfsim-device { position: relative; width: min(380px, 100%); }
.vfsim-bezel { position: relative; overflow: hidden; padding: 12px; border-radius: 46px; background: linear-gradient(160deg, #1d2b33, #0b1418); box-shadow: 0 30px 70px rgba(8, 30, 40, .32), inset 0 0 0 1px rgba(255, 255, 255, .1); }
/* `pointer-events: none` is a public-demo constraint, not a styling choice:
   roaming freely could create account records, request location permission or
   start a booking or purchase. The walkthrough's own scripted clicks are
   unaffected — they are dispatched at the element and never hit-tested. */
.vfsim-frame { display: block; width: 100%; height: 700px; border: 0; border-radius: 34px; background: #f2f2f0; pointer-events: none; }
.vfsim-gesture-surface { position: absolute; z-index: 2; inset: 12px; border-radius: 34px; pointer-events: none; }
.vfsim-notch { position: absolute; z-index: 4; top: 12px; left: 50%; width: 108px; height: 24px; border-radius: 0 0 16px 16px; background: #0b1418; transform: translateX(-50%); }

/* -------- the tap indicator ---------------------------------------------- */
/* A finger, not an arrow: this is a phone, and a mouse pointer inside a phone
   frame reads as a recording of something else. The travel, the settle and the
   press are three separate moments, because the point of the indicator is to
   show WHICH control was pressed BEFORE the screen answers. The travel duration
   below is the one the player waits out (TIMING.travel) — keep them equal or the
   press lands before the finger arrives. */
.vfsim-finger { position: absolute; z-index: 6; top: 0; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; border: 2px solid var(--blue-700); border-radius: 50%; background: rgba(44, 159, 236, .3); opacity: 0; pointer-events: none; transition: left 460ms cubic-bezier(.32, .72, .3, 1), top 460ms cubic-bezier(.32, .72, .3, 1), opacity 200ms ease, transform 180ms ease; }
.vfsim-finger.is-visible { opacity: 1; }
.vfsim-finger.is-pressing { transform: scale(.78); background: rgba(44, 159, 236, .5); }
.vfsim-finger.is-pressing::after { content: ""; position: absolute; inset: -8px; border: 2px solid var(--blue-700); border-radius: 50%; animation: vfsim-ripple 620ms ease-out; }
@keyframes vfsim-ripple { from { opacity: .85; transform: scale(.6); } to { opacity: 0; transform: scale(1.7); } }

/* -------- capture mode ---------------------------------------------------- */
/* `?chrome=off` strips the page down to the phone so a later ad capture can
   frame the device at a chosen viewport without cropping site furniture out. */
body.vfsim-solo .site-header,
body.vfsim-solo .legal-hero,
body.vfsim-solo .legal-footer,
body.vfsim-solo .vfsim-head,
body.vfsim-solo .vfsim-aside,
body.vfsim-solo .vfsim-prose { display: none; }
body.vfsim-solo .legal-body { padding: 0; }
body.vfsim-solo .walkthrough-page, body.vfsim-solo { padding-top: 0; }
body.vfsim-solo .vfsim { margin: 0; }
body.vfsim-solo .vfsim-layout { grid-template-columns: 1fr; gap: 0; margin: 0; }

@media (max-width: 940px) {
  .vfsim-layout { grid-template-columns: 1fr; gap: 28px; }
  .vfsim-aside { order: 2; }
  .vfsim-stage { order: 1; }
  .vfsim-chapters { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
  .vfsim-chapters li { flex: 0 0 min(290px, calc(100vw - 64px)); scroll-snap-align: start; }
}

/* The frame stays read-only: this transparent surface accepts only gestures the
   driver translates into app scrolling or guided-step navigation. It never lets a
   touch through as an arbitrary app click. */
@media (max-width: 940px), (pointer: coarse) {
  .vfsim-gesture-surface { pointer-events: auto; touch-action: none; cursor: grab; }
  .vfsim-gesture-surface:active { cursor: grabbing; }
}

@media (max-width: 420px) {
  .vfsim-frame { height: 620px; }
  .vfsim-bezel { padding: 9px; border-radius: 38px; }
  .vfsim-gesture-surface { inset: 9px; border-radius: 29px; }
  .vfsim-notch { top: 9px; }
  .vfsim-controls button { flex: 1 1 44%; padding: 10px 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .vfsim-finger { transition: opacity 1ms linear; }
  .vfsim-finger.is-pressing::after { animation: none; }
  .vfsim-chapters button { transition: none; }
}

/* -------- web subscription checkout (index.html's Subscribe buttons) ------ */
body.checkout-modal-open { overflow: hidden; }
.checkout-modal-backdrop { position: fixed; z-index: 400; inset: 0; display: grid; place-items: center; padding: 24px; background: rgba(6,25,33,.56); }
.checkout-modal { position: relative; width: min(460px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; padding: 40px 36px 32px; border-radius: 26px; background: var(--paper); color: var(--ink); box-shadow: var(--shadow); }
.checkout-modal-close { position: absolute; top: 16px; right: 16px; display: grid; width: 40px; height: 40px; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: var(--paper); color: var(--blue-950); font-size: 22px; line-height: 1; cursor: pointer; }
.checkout-modal-close:hover { background: var(--wash); }
.checkout-modal h2 { margin: 8px 0 14px; font-size: 24px; }
.checkout-modal-intro { margin: 0 0 24px; color: var(--muted); font-size: 14px; line-height: 1.6; }
.checkout-signed-in { display: grid; gap: 12px; margin-bottom: 8px; }
.checkout-signed-in p { margin: 0; color: var(--ink); }
.checkout-oauth-row { display: grid; gap: 12px; margin-bottom: 22px; }
.checkout-oauth-button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 10px; border: 1px solid rgba(16,42,52,.26); border-radius: 999px; padding: 12px 20px; background: var(--paper); color: var(--ink); font-weight: 750; cursor: pointer; transition: background 160ms ease, border-color 160ms ease; }
.checkout-oauth-button:hover { background: var(--wash); border-color: rgba(44,159,236,.5); }
.checkout-oauth-button:disabled { opacity: .6; cursor: wait; }
.checkout-divider { position: relative; display: flex; align-items: center; justify-content: center; margin: 4px 0 20px; color: var(--muted); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.checkout-divider::before, .checkout-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.checkout-divider span { padding: 0 12px; }
.checkout-mode-tabs { display: flex; gap: 6px; margin-bottom: 20px; padding: 4px; border-radius: 999px; background: var(--wash); }
.checkout-mode-tabs button { flex: 1; min-height: 40px; border: none; border-radius: 999px; background: transparent; color: var(--muted); font-size: 13px; font-weight: 750; cursor: pointer; }
.checkout-mode-tabs button[aria-selected="true"] { background: var(--paper); color: var(--blue-950); box-shadow: 0 4px 14px rgba(8,47,60,.12); }
.checkout-auth-form .form-grid, .checkout-auth-form { display: grid; gap: 18px; }
.checkout-modal-link { border: none; background: none; padding: 4px 0; color: var(--blue-700); font-size: 13px; font-weight: 750; text-align: left; cursor: pointer; }
.checkout-modal-link:hover { text-decoration: underline; }
.checkout-modal .button-secondary { border-color: rgba(16,42,52,.26); background: var(--paper); color: var(--ink); box-shadow: none; }
.checkout-modal .button-secondary:hover { background: var(--wash); }

/* -------- post-purchase routing (checkout-success.html) ------------------- */
.checkout-success { padding: 24px 0 88px; }
.checkout-success-card { width: min(560px, 100%); margin-inline: auto; padding: 44px 40px; border: 1px solid var(--line); border-radius: 26px; background: var(--paper); box-shadow: var(--shadow); text-align: center; }
.checkout-success-card h1 { margin: 10px 0 18px; font-size: 30px; }
.checkout-success-card p { color: var(--muted); font-size: 16px; line-height: 1.65; }
.checkout-success-note { margin-top: -6px; font-size: 14px; }
.checkout-success-actions { display: grid; gap: 14px; margin-top: 28px; }
.checkout-success-actions .button { width: 100%; }

@media (max-width: 560px) {
  .checkout-modal { padding: 32px 22px 26px; border-radius: 20px; }
  .checkout-success-card { padding: 32px 22px; }
}

/* ── Public Marketplace (marketplace.html / marketplace-listing.html) ──────────
   Owner ask, 2026-09-11 — the cross-dealer car browse on the marketing site.
   Deliberately built from the SAME tokens (--blue-*, --ink, --muted, --line,
   --shadow) and the same .container / .button / .kicker / .lead primitives every
   other page here uses, so the Marketplace reads as part of the site rather than
   a bolted-on second design. No new fonts, no new colour values. */
.market-page { background: var(--wash); }
/* padding-top must clear `.site-header`'s fixed height (86px desktop / 76px at the
   720px breakpoint, `.header-inner`'s own min-height) - the old 64px sat UNDER the
   header, so the "MARKETPLACE" kicker and the page's own top edge rendered
   partially hidden behind it on every real device (owner report, 2026-09-14,
   screenshot). `.hero` (the home page) already clears its own fixed header the
   same way, with room to spare (150px top padding against the same ~86px header). */
.market-hero { background: var(--blue-950); color: var(--paper); padding: 106px 0 44px; }
.market-hero .kicker { color: #b9dfeb; }
.market-hero h1 { margin: 14px 0 10px; font: 700 clamp(32px, 4.4vw, 52px)/1.05 var(--serif); letter-spacing: -.03em; }
.market-hero .lead { max-width: 660px; color: #d6ebf2; font-size: clamp(16px, 1.7vw, 19px); line-height: 1.6; }

.market-search-form { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
.market-search-input { flex: 1 1 320px; min-height: 48px; padding: 12px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--paper); color: var(--ink); }
.market-search-form .button-small { background: rgba(255, 255, 255, .12); color: var(--paper); border-color: rgba(255, 255, 255, .35); }
.market-search-form .button-small:hover { background: rgba(255, 255, 255, .2); }
.market-location-note { min-height: 20px; margin: 10px 0 0; color: #b9dfeb; font-size: 14px; }

/* The location gate (owner ruling, 2026-09-13) — shown alone until a postcode is
   submitted or a device fix succeeds; `.market-body[hidden]` (data-market-results)
   is what stays hidden until then. Sized/coloured to match `.market-search-form`
   on the same dark hero surface, not a second visual language. */
.market-location-gate { max-width: 480px; margin-top: 24px; }
.market-gate-label { display: block; margin-bottom: 10px; color: var(--paper); font-size: 18px; font-weight: 750; }
.market-gate-row { display: flex; flex-wrap: wrap; gap: 12px; }
/* The locate-me crosshair sits INSIDE the input (2026-09-14, replacing a separate
   "Use my location" button) - right-padding on the input clears the icon so typed
   text never runs under it. */
.market-gate-input-wrap { position: relative; flex: 1 1 220px; }
.market-gate-input { width: 100%; min-height: 48px; padding: 12px 44px 12px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--paper); color: var(--ink); }
.market-gate-locate-button { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); display: grid; place-items: center; width: 34px; height: 34px; border: none; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.market-gate-locate-button:hover { background: var(--blue-050); color: var(--blue-700); }

/* The conversational box. Hidden in markup until the published flag enables it —
   `[hidden]` must win over this display rule, hence the explicit guard. */
.market-ai { margin-top: 26px; padding: 18px 20px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 20px; background: rgba(255, 255, 255, .07); }
.market-ai[hidden] { display: none; }
.market-ai-label { display: block; margin-bottom: 8px; color: #d6ebf2; font-size: 14px; font-weight: 700; }
.market-ai-row { display: flex; flex-wrap: wrap; gap: 12px; }
.market-ai-input { flex: 1 1 320px; min-height: 48px; padding: 12px 18px; border: 1px solid transparent; border-radius: 999px; background: var(--paper); color: var(--ink); }
.market-ai-answer { margin: 14px 0 0; color: #eaf6fa; font-size: 15px; line-height: 1.6; }
.market-ai-answer[hidden] { display: none; }

.market-body { padding: 28px 0 80px; }
.market-filters { display: flex; flex-wrap: wrap; gap: 12px 16px; padding: 18px 20px; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); }
.market-filters[hidden] { display: none; }
.market-filter { display: flex; flex-direction: column; gap: 6px; }
.market-filter-label { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.market-filter-select { min-height: 40px; min-width: 150px; padding: 8px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper); color: var(--ink); }
.market-filter-toggle { width: 22px; height: 22px; margin: 8px 0 0; accent-color: var(--blue-700); }

.market-summary { margin: 22px 0 4px; color: var(--ink); font-size: 16px; font-weight: 700; }
.market-status { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
.market-status[hidden] { display: none; }

.market-grid { display: grid; gap: 20px; margin-top: 18px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); }
.market-card { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: 20px; background: var(--paper); box-shadow: 0 14px 34px rgba(8, 47, 60, .07); }
.market-card-media { aspect-ratio: 4 / 3; background: var(--blue-050); }
.market-card-photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.market-card-media-empty { display: flex; align-items: center; justify-content: center; }
.market-card-nophoto { color: var(--muted); font-size: 14px; font-weight: 700; }
.market-card-body { display: flex; flex-direction: column; flex: 1; gap: 8px; padding: 16px 18px 18px; }
.market-card-title { margin: 0; font-size: 18px; line-height: 1.3; }
.market-card-title a { text-decoration: none; }
.market-card-title a:hover { color: var(--blue-600); }
.market-card-variant { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.45; }
.market-card-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
.market-card-chips li { padding: 4px 10px; border-radius: 999px; background: var(--blue-050); color: var(--blue-900); font-size: 12px; font-weight: 700; }
.market-card-footer { margin-top: auto; padding-top: 10px; }
.market-card-price { margin: 0; font-size: 22px; font-weight: 850; }
.market-card-dealer { display: flex; flex-wrap: wrap; gap: 4px 10px; margin: 4px 0 0; color: var(--muted); font-size: 13px; }
.market-card-distance { color: var(--blue-600); font-weight: 700; }

.market-more-row { display: flex; justify-content: center; margin-top: 28px; }
.market-more-row .button[hidden] { display: none; }

.listing-body { padding: 40px 0 80px; }
.listing-body .container { max-width: 860px; }
.listing-detail { padding: 26px 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); box-shadow: var(--shadow); }
.listing-title { margin: 0 0 6px; font: 700 clamp(28px, 3.6vw, 40px)/1.1 var(--serif); letter-spacing: -.02em; }
.listing-variant { margin: 0 0 16px; color: var(--muted); font-size: 16px; }
.listing-photo { width: 100%; border-radius: 16px; display: block; }
.listing-price { margin: 18px 0 6px; font-size: 30px; font-weight: 850; }
.listing-facts { display: grid; grid-template-columns: minmax(120px, auto) 1fr; gap: 8px 20px; margin: 18px 0 0; }
.listing-facts dt { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.listing-facts dd { margin: 0; font-size: 16px; }
.listing-dealer { margin-top: 24px; padding-top: 18px; border-top: 1px solid var(--line); }
.listing-dealer h2 { margin: 0 0 6px; font-size: 14px; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; }
.listing-dealer-name { margin: 0; font-size: 18px; font-weight: 800; }
.listing-dealer-area { margin: 2px 0 0; color: var(--muted); font-size: 14px; }
.listing-dealer-phone { margin: 10px 0 0; }
.listing-dealer-call-button { display: inline-block; padding: 11px 22px; border-radius: 999px; background: var(--blue-700); color: var(--paper); font-size: 15px; font-weight: 750; text-decoration: none; }
.listing-dealer-call-button:hover { background: var(--blue-800); }
.listing-dealer-site-link { display: inline-block; margin-top: 14px; color: var(--blue-800); font-size: 14px; font-weight: 700; text-decoration: underline; }

.listing-enquiry { display: grid; gap: 8px; margin-top: 24px; padding: 26px 28px; border: 1px solid var(--line); border-radius: 24px; background: var(--paper); }
.listing-enquiry[hidden] { display: none; }
.listing-enquiry h2 { margin: 0; font-size: 22px; }
.listing-enquiry-note { margin: 0 0 8px; color: var(--muted); font-size: 15px; }
.listing-enquiry-field { color: var(--muted); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.listing-enquiry input, .listing-enquiry textarea { width: 100%; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); }
.listing-enquiry .button { justify-self: start; margin-top: 10px; }
.listing-enquiry-result { min-height: 20px; margin: 6px 0 0; color: var(--muted); font-size: 14px; }

@media (max-width: 560px) {
  .market-grid { grid-template-columns: 1fr; }
  .listing-detail, .listing-enquiry { padding: 22px 20px; }
  .listing-facts { grid-template-columns: 1fr; gap: 2px 0; }
  .listing-facts dd { margin-bottom: 10px; }
}