/* JAECOO 8 product page: pitch prototype.
   Values come from docs/DESIGN.md. Fluid sizes interpolate from 390px to 1440px.
   Everything here maps to a native Foleon block or style; custom code lives in /components. */

:root {
  /* Colour (DESIGN.md §2) */
  --bg: #000;
  --surface-1: #0d0d0d;
  --surface-2: #1c1c1c;
  --text-primary: #fff;
  --text-secondary: #c2c2c2;
  --text-tertiary: #959595;
  --text-inactive: #595959;
  --line: rgba(255, 255, 255, 0.28);
  --line-strong: rgba(255, 255, 255, 0.7);
  --glass: rgba(10, 10, 12, 0.55);
  --btn-secondary: #595959;
  --func-ev: #00c853;
  --func-offer: #ff073a;

  /* Type families */
  --font-display: "Armadura Solid", "Arial Narrow", Arial, sans-serif;
  --font-text: "Source Sans 3", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "Source Code Pro", ui-monospace, Menlo, monospace;

  /* Type scale (DESIGN.md §3.2). Mobile display-xl is 36px, not 40px:
     Armadura runs ~0.9em per character, so 40px breaks "FIRST CLASS," at 390px. */
  --fs-display-xl: clamp(36px, 13.94px + 5.657vw, 96px);
  --fs-display-l: clamp(40px, 25.14px + 3.81vw, 80px);
  --fs-display-m: clamp(32px, 23.09px + 2.286vw, 56px);
  --fs-stat: clamp(48px, 39.09px + 2.286vw, 72px);
  --fs-list-xl: clamp(28px, 20.57px + 1.905vw, 48px);
  --fs-title: 20px;
  --fs-intro: clamp(19px, 18.26px + 0.19vw, 21px);
  --fs-secondary: clamp(19px, 17.14px + 0.476vw, 24px);
  --fs-body: 17px;
  --fs-caption: 14px;
  --fs-label: 12px;
  --fs-legal: 12px;

  /* Space (DESIGN.md §4) */
  --gutter: clamp(20px, 3.66px + 4.19vw, 64px);
  --max: 1260px;
  --measure: 830px;
  --section-y: clamp(112px, 100.11px + 3.048vw, 144px);
  --section-y-xl: clamp(160px, 136.23px + 6.095vw, 224px);
  --stack-l: clamp(24px, 21px + 0.762vw, 32px);
  --stack-m: 8px;
  --nav-h: 56px;

  /* Motion (DESIGN.md §6) */
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ui: 250ms;
}

@media (min-width: 900px) {
  :root { --nav-h: 64px; }
}

/* ---------- Base ---------- */

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

html {
  background: var(--bg);
  color-scheme: dark;
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: var(--nav-h);
}
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font: 400 var(--fs-body)/1.47 var(--font-text);
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, p, figure { margin: 0; }
button { font: inherit; color: inherit; }

::selection { background: #fff; color: #000; }

:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

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

.wrap {
  width: 100%;
  max-width: calc(var(--max) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Type roles ---------- */

.display-xl, .display-l, .display-m, .stat-num, .list-xl, .title {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  text-wrap: balance;
}
.display-xl { font-size: var(--fs-display-xl); line-height: 1; }
.display-l  { font-size: var(--fs-display-l);  line-height: 1.05; }
.display-m  { font-size: var(--fs-display-m);  line-height: 1.07; }
.list-xl    { font-size: var(--fs-list-xl);    line-height: 1.1; }
.title      { font-size: var(--fs-title);      line-height: 1.1; }

.secondary {
  font-size: var(--fs-secondary);
  font-weight: 300;
  line-height: 1.3;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.intro {
  font-size: var(--fs-intro);
  font-weight: 500;
  line-height: 1.38;
  color: var(--text-tertiary);
  max-width: var(--measure);
  text-wrap: pretty;
}
.intro strong { color: var(--text-primary); font-weight: 500; }

.caption { font-size: var(--fs-caption); line-height: 1.43; color: var(--text-secondary); }

.label {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: var(--fs-label);
  line-height: 1.33;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
}

.legal {
  font-size: var(--fs-legal);
  line-height: 1.33;
  color: var(--text-tertiary);
  max-width: 96ch;
}
.legal p + p { margin-top: 8px; }

/* Chapter label: "06/09 · SAFETY" (replaces a live nav counter) */
.chapter-label { display: block; color: var(--text-secondary); }
.chapter-label b { color: var(--text-primary); font-weight: 500; }

/* Chapter header block */
.chapter-head { display: grid; gap: var(--stack-l); }
.chapter-head .chapter-label { margin-bottom: calc(var(--stack-l) * -0.25); }
.chapter-head .secondary { max-width: 34ch; }

/* ---------- Buttons: JAECOO chipped rectangle (DESIGN.md §5.1) ---------- */

.btn {
  --chamfer: 20px;
  --fill: #fff;      /* face colour */
  --edge: #fff;      /* 1px outline, follows the chamfer */
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 46px;
  padding: 0 22px 0 20px;
  border: 0;
  background: var(--fill);
  font: 400 var(--fs-caption)/1 var(--font-text);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
  transition: color var(--ui) var(--ease);
}
/* Outline as two layers, not a box-shadow: clip-path would cut a box-shadow off the diagonal.
   The inner chamfer is 0.59px smaller so the line stays 1px wide along the cut corner. */
.btn::before, .btn::after {
  content: "";
  position: absolute;
  z-index: -1;
  transition: background-color var(--ui) var(--ease);
}
.btn::before { inset: 0; background: var(--edge); }
.btn::after {
  inset: 1px;
  background: var(--fill);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer) + 0.59px), calc(100% - var(--chamfer) + 0.59px) 100%, 0 100%);
}
.btn svg { width: 10px; height: 10px; flex: none; fill: currentColor; }
.btn:focus-visible { outline: 2px solid currentColor; outline-offset: -5px; }
/* Dark page (DESIGN.md §5.1): white primary, #595959 secondary, both invert on hover */
.btn--primary { --fill: #fff; --edge: #fff; color: #000; background: #fff; }
.btn--primary:hover { --fill: #000; --edge: #fff; color: #fff; background: #000; }
.btn--secondary { --fill: var(--btn-secondary); --edge: var(--btn-secondary); color: #fff; background: var(--btn-secondary); }
.btn--secondary:hover { --fill: #fff; --edge: #fff; color: #000; background: #fff; }

.cta-row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.cta-row .btn { min-height: 48px; }
.cta-row--single { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 734px) {
  .cta-row { display: flex; flex-wrap: wrap; gap: 12px; }
  .cta-row .btn { min-width: 220px; }
}

/* ---------- Foleon navigation bar (stays visible while scrolling) ---------- */

.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  height: var(--nav-h);
  background: var(--glass);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  backdrop-filter: blur(18px) saturate(140%);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav__logo { display: block; width: 92px; color: #fff; }
.nav__logo img { display: block; width: 100%; height: auto; }
.nav__tabs { display: flex; height: 100%; gap: 4px; }
.nav__tab {
  display: flex;
  align-items: center;
  height: 100%;
  padding: 0 10px;
  font-size: var(--fs-caption);
  text-decoration: none;
  color: var(--text-secondary);
  box-shadow: inset 0 -1px 0 transparent;
  transition: color var(--ui) var(--ease), box-shadow var(--ui) var(--ease);
}
.nav__tab:hover { color: #fff; }
.nav__tab[aria-current="page"] { color: #fff; box-shadow: inset 0 -1px 0 #fff; }
@media (min-width: 900px) {
  .nav__logo { width: 112px; }
  .nav__tabs { gap: 16px; }
  .nav__tab { font-size: 15px; }
}

/* ---------- Corner-bracket frame (JAECOO motif) ---------- */

/* ---------- Hero corner brackets (handoff/corner-brackets.md) ----------
   Traced from the jaecoo.co.uk hero: long arm + diagonal, 36 x 18 px, 1 px stroke, 14 px in.
   Top pair sits 14 px below the Foleon nav bar so the bar doesn't cover it. */

.frame-marks { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.frame-marks i { position: absolute; width: 36px; height: 18px; }
.frame-marks svg {
  display: block;
  width: 36px;
  height: 18px;
  fill: none;
  stroke: rgba(255, 255, 255, .9);
  stroke-width: 1;
  stroke-linecap: butt;
  stroke-linejoin: miter;
}
.frame-marks path { vector-effect: non-scaling-stroke; }
.frame-marks .tl { left: calc(14px + env(safe-area-inset-left)); top: calc(var(--nav-h) + 14px); }
.frame-marks .tr { right: calc(14px + env(safe-area-inset-right)); top: calc(var(--nav-h) + 14px); transform: scaleX(-1); }
.frame-marks .bl { left: calc(14px + env(safe-area-inset-left)); bottom: calc(14px + env(safe-area-inset-bottom)); transform: scaleY(-1); }
.frame-marks .br { right: calc(14px + env(safe-area-inset-right)); bottom: calc(14px + env(safe-area-inset-bottom)); transform: scale(-1, -1); }
.light .frame-marks svg { stroke: rgba(0, 0, 0, .75); }
@media (max-width: 640px), (max-height: 500px) and (pointer: coarse) { .frame-marks:not(.frame-marks--inset) { display: none; } }
/* Inside a framed image (06 camera view): 14 px in from the image edges, kept on phones as part of the viewfinder. */
.frame-marks--inset .tl, .frame-marks--inset .tr { top: 14px; }
.frame-marks--inset .bl, .frame-marks--inset .br { bottom: 14px; }
.frame-marks--inset .tl, .frame-marks--inset .bl { left: 14px; }
.frame-marks--inset .tr, .frame-marks--inset .br { right: 14px; }

/* ---------- Chapters ---------- */

.chapter { position: relative; }
.pad-y { padding-block: var(--section-y); }

/* 01 Hero: full-screen film behind the headline (native Foleon background video). */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.hero__stage { position: absolute; inset: 0; overflow: hidden; background: #000; }
/* One film per screen shape: 9:16 cut on portrait screens, 16:9 on landscape. */
.hero__film {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: none;
}
@media (max-aspect-ratio: 1/1) { .hero__film--tall { display: block; } }
@media (min-aspect-ratio: 1001/1000) { .hero__film--wide { display: block; } }
/* Phones are taller than 9:16: show the whole 9:16 film across the width (no side crop)
   and let it fade into the black under the headline. */
@media (max-aspect-ratio: 9/16) { .hero__stage { bottom: auto; aspect-ratio: 9 / 16; } }
/* Mobile cut is full-frame orange, so the type sits on a fade to black. */
.hero__stage::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(0,0,0,.55) 0, transparent 16%, transparent 40%, rgba(0,0,0,.72) 60%, #000 86%);
}
.hero__foot {
  position: relative;
  z-index: 3;
  display: grid;
  gap: 16px;
  padding-top: 24px;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.hero__name { margin-top: 4px; }
.hero__meta { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 20px; }
.hero__price { font-size: var(--fs-body); color: var(--text-secondary); }
.hero__price b { color: #fff; font-weight: 500; }
/* Carwow's official badge (supplied artwork, so its own rounded corners stay). */
.award { display: block; line-height: 0; transition: opacity var(--ui) var(--ease); }
/* The badge's black half meets the black page, so a faint keyline traces its own corner radius
   (19.62 of 118.27 = 16.6% of the height) to keep the shape readable. The artwork is untouched. */
.award img { --h: 44px; display: block; height: var(--h); width: auto; border-radius: calc(var(--h) * .166); box-shadow: 0 0 0 1px rgba(255,255,255,.22); }
.award:hover { opacity: .85; }
.award:focus-visible { outline-offset: 4px; }
@media (min-width: 734px) { .award img { --h: 64px; } }
.hero .cta-row { margin-top: 8px; }

@media (min-width: 900px) {
  .hero { display: block; height: 100vh; min-height: 680px; }
  .hero__stage::after {
    background:
      linear-gradient(to bottom, #000 0, rgba(0,0,0,.55) 12%, transparent 30%, transparent 58%, rgba(0,0,0,.7) 78%, #000 100%),
      linear-gradient(to right, rgba(0,0,0,.6) 0, transparent 40%);
  }
  .hero__foot {
    position: absolute;
    inset: auto 0 0;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 24px 48px;
    padding-bottom: 56px;
  }
  .hero__foot > .hero__lead { grid-column: 1; }
  /* The badge lines up with Configure's left edge; the price sits right, over Book a test drive. */
  .hero__foot > .hero__act { grid-column: 2; display: grid; gap: 16px; }
  .hero__meta { justify-content: space-between; }
}

/* 02 Three reasons */
.reasons .intro { margin-top: var(--stack-l); }
.stats {
  list-style: none;
  margin: clamp(56px, 40px + 4vw, 96px) 0 0;
  padding: 0;
  display: grid;
  gap: 40px;
}
.stat {
  position: relative;
  display: grid;
  gap: var(--stack-m);
  padding-top: 24px;
  border-top: 1px solid var(--line);
  text-decoration: none;
  color: inherit;
}
.stat-num { font-size: var(--fs-stat); line-height: 1; color: #fff; white-space: nowrap; }
.stat .caption { max-width: 32ch; }
a.stat { transition: border-color var(--ui) var(--ease); }
a.stat:hover, a.stat:focus-visible { border-top-color: var(--line-strong); }
.stat__go {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  color: var(--text-secondary);
  transition: color var(--ui) var(--ease), gap var(--ui) var(--ease);
}
.stat__go svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 1.5; }
a.stat:hover .stat__go { color: #fff; gap: 12px; }
@media (min-width: 734px) {
  .stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
  .stats--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
  .stats--3 > li, .stats--4 > li { display: grid; }
  .stats--3 > li > .stat, .stats--3 > .stat { padding: 24px 32px 0; }
  .stats--4 > li > .stat, .stats--4 > .stat { padding: 24px 24px 0; }
  .stats--3 > li + li > .stat, .stats--4 > .stat + .stat { box-shadow: inset 1px 0 0 var(--line); }
  .stats--3 > li:first-child > .stat, .stats--4 > .stat:first-child { padding-left: 0; }
}

/* Slide-over sequence: emulates Foleon's "No scroll" background speed.
   Each screen holds while the next slides over it. Images only, ≤10 per page (8 used). */
.sequence { position: relative; }
.slide {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  background: #000;
}
.slide > img, .slide > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.slide::after {
  content: "";
  position: absolute;
  inset: 0;
  /* Top fade plus a soft corner glow behind the caption: keeps the caption above 4.5:1 even over
     bright interiors (boot slide measured at 7.0:1 desktop, 6.4:1 phone) without dulling the image. */
  background:
    radial-gradient(120% 70% at 0% 0%, rgba(0,0,0,.8) 0, rgba(0,0,0,.7) 40%, transparent 80%),
    linear-gradient(to bottom, rgba(0,0,0,.78) 0, rgba(0,0,0,.45) 24%, transparent 46%, transparent 82%, rgba(0,0,0,.35) 100%);
  pointer-events: none;
}
/* Caption sits at the top: the next slide covers this one from the bottom up, so a caption
   near the top stays readable for ~1.7 screens of scroll, against ~0.2 at the bottom. */
/* A film slide (03 Crystal Array): Foleon's "No scroll" is images only, so this one scrolls normally
   between the held stills. One cut per device, filling the screen. */
.slide--film { position: relative; }
.slide__film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #000; display: none; }
@media (max-width: 733px) { .slide__film--tall { display: block; } }
@media (min-width: 734px) { .slide__film--wide { display: block; } }

/* On phones the caption runs nearly full width, so the glow is wider (HUD slide measured 5.2:1). */
@media (max-width: 733px) {
  .slide::after {
    background:
      radial-gradient(240% 60% at 0% 0%, rgba(0,0,0,.8) 0, rgba(0,0,0,.7) 40%, transparent 80%),
      linear-gradient(to bottom, rgba(0,0,0,.78) 0, rgba(0,0,0,.45) 24%, transparent 46%, transparent 82%, rgba(0,0,0,.35) 100%);
  }
}
.slide__cap {
  position: absolute;
  z-index: 2;
  left: 0; right: 0; top: 0;
  padding-top: calc(var(--nav-h) + clamp(28px, 18px + 2.5vw, 56px));
  display: grid;
  gap: 12px;
}
.slide__cap .list-xl { max-width: 14ch; }
.slide__cap p:not(.label) { max-width: 40ch; color: var(--text-secondary); }
.slide__cap .label { color: var(--text-secondary); }

/* Layered scenes (03 opener, 07 "Where the road ends"): a clean background plate and the car
   cut-out on one shared canvas (4800 x 3584). Both layers get the same cover crop, so the car stays
   locked to the ground at every size. 16:9 on desktop, square on phones.
   Native: background image block + image element with a fly-in entrance.
   Both cars face left, so the car drives in from the right as the plate settles. */
.layered { position: relative; overflow: hidden; }
.layered__stage { position: relative; aspect-ratio: 16 / 9; }
.layered__stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: var(--op, 50% 50%);
}
.layered::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, #000 0, transparent 18%, transparent 85%, #000 100%);
  pointer-events: none;
}
.js .layered__car[data-reveal] { opacity: 0; transform: translateX(14%); }
.js .layered__car[data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: transform 1800ms var(--ease-out), opacity 700ms var(--ease-out);
}
.js .layered__bg[data-reveal] { transform: scale(1.08); }
.js .layered__bg[data-reveal].is-in { transform: none; transition: transform 2400ms var(--ease-out), opacity 900ms var(--ease-out); }

/* Per-scene crop: keep the car (and its dust) in frame */
.layered--design { --op: 50% 75%; margin-top: clamp(32px, 20px + 3vw, 64px); }
.layered--sand { --op: 50% 20%; }
@media (max-width: 733px) {
  .layered__stage { aspect-ratio: 1 / 1; }
  .layered--design { --op: 40% 50%; }
  .layered--sand { --op: 36% 50%; }
}

/* 03 Colour moment */
.colours { display: grid; gap: 28px; }
.colours__studio {
  --chamfer: 24px;
  position: relative;
  aspect-ratio: 1264 / 848;
  background: #fff;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
}
.colours__studio img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  transition: opacity 450ms var(--ease);
}
.colours__studio img.is-on { opacity: 1; }
.colours__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px 24px; }
.colours__name { font-family: var(--font-display); text-transform: uppercase; letter-spacing: .02em; font-size: var(--fs-display-m); line-height: 1.07; }
.swatch-rows { display: grid; gap: 18px; }
.swatch-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.swatch-row .label { width: 100%; }
.swatch {
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 9999px;
  background: var(--sw);
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform var(--ui) var(--ease);
}
.swatch--roof { background: linear-gradient(to bottom, #111 0 50%, var(--sw) 50% 100%); }
.swatch::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 9999px;
  border: 1px solid transparent;
  transition: border-color var(--ui) var(--ease);
}
.swatch:hover { transform: scale(1.06); }
.swatch[aria-selected="true"]::after { border-color: #fff; }
.swatch:focus-visible { outline-offset: 8px; }
@media (min-width: 900px) {
  .colours { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); align-items: end; gap: 48px; }
  .colours__controls { padding-bottom: 32px; }
}

/* 04 Explore in 3D */
.explore { padding-top: var(--section-y-xl); padding-bottom: var(--section-y); }
.embed { display: block; width: 100%; border: 0; background: transparent; }
.explore .embed { margin-top: clamp(40px, 28px + 3vw, 64px); }

/* 05 Technology: hotspot image keeps its 3:2 ratio so the points stay on the right parts */
.hs-box {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, calc(max(100svh, 560px) * 1.5));
  aspect-ratio: 3 / 2;
  transform: translate(-50%, -50%);
}
.hs-box > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hs-box { z-index: 2; }
.hs-box::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to bottom, rgba(0,0,0,.4) 0, transparent 18%, transparent 55%, rgba(0,0,0,.85) 100%);
  pointer-events: none;
}
@media (max-width: 733px) {
  .hs-box { width: 200%; left: -30%; top: 54%; transform: translateY(-50%); }
  .hs-box::after { background: linear-gradient(to bottom, #000 0, transparent 14%, transparent 78%, #000 100%); }
}
@media (min-width: 900px) {
  /* Image anchored right so the caption gets a clean black column on the left. */
  .hs-box {
    width: 70%;
    left: auto;
    right: 0;
    top: calc(var(--nav-h) + (max(100svh, 560px) - var(--nav-h)) / 2);
    transform: translateY(-50%);
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%);
    mask-image: linear-gradient(to right, transparent 0, #000 14%);
  }
  .slide--hotspots .slide__cap .list-xl { max-width: 9ch; }
}
.slide--hotspots .hotspot { z-index: 3; }

/* 05 Technology: hotspots. Closed points are solid white with a dark edge so they hold on the
   bright screens and the dark console alike; an open point flips to black. */
.hotspot {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  padding: 0;
  border: 0;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 6px 18px rgba(0,0,0,.5);
  cursor: pointer;
  transition: background-color var(--ui) var(--ease), box-shadow var(--ui) var(--ease);
}
.hotspot::before, .hotspot::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 16px; height: 2px;
  margin: -1px 0 0 -8px;
  background: #000;
  transition: opacity var(--ui) var(--ease), background-color var(--ui) var(--ease);
}
.hotspot::after { transform: rotate(90deg); }
.hotspot:hover { background: #e6e6e6; }
.hotspot[aria-expanded="true"] { background: #000; box-shadow: inset 0 0 0 1px #fff, 0 6px 18px rgba(0,0,0,.5); }
.hotspot[aria-expanded="true"]::before { background: #fff; }
.hotspot[aria-expanded="true"]::after { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .hotspot:not([aria-expanded="true"]) { animation: beacon 2.4s var(--ease) infinite; }
  @keyframes beacon {
    0%, 100% { box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 0 0 3px rgba(255,255,255,.7), 0 6px 18px rgba(0,0,0,.5); }
    60% { box-shadow: 0 0 0 3px rgba(0,0,0,.4), 0 0 0 16px rgba(255,255,255,0), 0 6px 18px rgba(0,0,0,.5); }
  }
}

/* The pop-up opens beside its point (right of it, vertically centred) with a hairline joining the two.
   The panel and chamfer live on ::after so the connector (::before) isn't clipped. */
.pop {
  --chamfer: 16px;
  --gap: 14px;
  position: absolute;
  z-index: 4;
  left: calc(var(--x) + 22px + var(--gap));
  top: var(--y);
  width: 340px;
  transform: translateY(-50%);
  display: grid;
  gap: 8px;
  padding: 20px 22px 24px;
}
.pop::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(10, 10, 12, .92);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
}
.pop::before {
  content: "";
  position: absolute;
  left: calc(-1 * var(--gap));
  top: 50%;
  width: var(--gap);
  height: 1px;
  background: #fff;
}
.pop[hidden] { display: none; }
.pop p:not(.label) { color: var(--text-secondary); }
@media (max-width: 733px) {
  /* The image box is 200% wide and starts at -30%, so the screen's right edge sits at 65% of it. */
  .pop { width: calc(65% - var(--x) - 22px - var(--gap) - var(--gutter)); padding: 16px 18px 20px; }
}

.ask-block { padding-block: var(--section-y) 0; }

/* 06 Safety */
.camera {
  position: relative;
  margin-top: clamp(48px, 30px + 4vw, 80px);
  aspect-ratio: 4 / 5; /* the phone cut */
  overflow: hidden;
  background: #000;
}
.camera__film {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 48% 50%;
  background: #000;
}
@media (max-width: 733px) { .camera__film--tall { display: block; } }
@media (min-width: 734px) { .camera__film--wide { display: block; } }
.camera__ui { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.camera__ui svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.camera__tag {
  position: absolute;
  z-index: 3;
  top: 36px; left: 36px;
  display: flex; align-items: center; gap: 8px;
  color: #fff;
}
@media (min-width: 734px) { .camera { aspect-ratio: 16 / 9; } .camera__tag { top: 64px; left: 64px; } }
.camera::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 70%, #000 100%);
  pointer-events: none;
}

.safety .stats { margin-top: clamp(48px, 30px + 4vw, 80px); }

.detail { display: grid; gap: 24px; margin-top: clamp(64px, 40px + 6vw, 128px); }
@media (min-width: 900px) {
  .detail { grid-template-columns: 1fr 2fr; gap: 48px; }
}
.accordion { border-top: 1px solid var(--line); }
.acc { border-bottom: 1px solid var(--line); background: var(--surface-1); }
.acc summary {
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 25px 20px;
  font-size: var(--fs-body);
  text-transform: uppercase;
  letter-spacing: .02em;
  cursor: pointer;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:focus-visible { outline-offset: -3px; }
.plus { position: relative; width: 16px; height: 16px; flex: none; }
.plus::before, .plus::after {
  content: "";
  position: absolute;
  left: 0; top: 7px;
  width: 16px; height: 2px;
  background: #fff;
  transition: opacity var(--ui) var(--ease);
}
.plus::after { transform: rotate(90deg); }
.acc[open] .plus::after { opacity: 0; }
.acc__body { padding: 0 20px 28px; color: var(--text-tertiary); max-width: 62ch; }
.acc__body strong { color: #fff; font-weight: 400; }

.footnote { margin-top: 20px; }

/* 07 Performance: the POWER text-mask film (native Foleon video, one cut per device).
   Each plays at its true shape, full width (cover would crop the word's ends).
   The black field around the word is pure #000, so it melts into the page. */
.power { position: relative; padding-top: calc(var(--nav-h) + 40px); }
.power__film {
  display: none;
  width: 100%;
  margin-top: clamp(16px, 2vw, 32px);
  object-fit: cover;
  background: #000;
}
@media (max-width: 733px) { .power__film--tall { display: block; aspect-ratio: 9 / 16; } }
@media (min-width: 734px) { .power__film--wide { display: block; aspect-ratio: 16 / 9; } }

.quiet { display: grid; gap: var(--stack-l); }
.quiet__media { position: relative; margin-top: clamp(40px, 28px + 3vw, 64px); aspect-ratio: 16 / 10; overflow: hidden; }
.quiet__media img { width: 100%; height: 100%; object-fit: cover; }
.quiet__media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, #000 0, transparent 20%, transparent 80%, #000 100%);
}

.modes { display: grid; gap: 56px; margin-top: var(--section-y); }
@media (min-width: 734px) {
  .modes { grid-template-columns: 1fr 1fr; gap: 0; }
  .mode + .mode { border-left: 1px solid var(--line); padding-left: 40px; }
  .mode:first-child { padding-right: 40px; }
}
.mode__head { display: flex; align-items: center; gap: 10px; margin-bottom: 24px; }
.mode__head .title { color: #fff; }
.flag-ev { width: 10px; height: 10px; background: var(--func-ev); flex: none; }
.flag-hy { width: 10px; height: 10px; border: 1px solid #fff; flex: none; }
.mode .stats { margin: 0; gap: 28px; }
.mode .stat-num { font-size: clamp(36px, 30px + 1.6vw, 56px); }
.stat-num .unit { font-size: .42em; letter-spacing: .02em; margin-left: .2em; }
.stat-fn { color: var(--text-secondary); vertical-align: top; margin-left: 6px; font-size: 12px; }
.ev-figure { color: var(--func-ev); }

.offroad { position: relative; margin-top: var(--section-y); }
.offroad__copy { position: relative; z-index: 2; display: grid; gap: var(--stack-l); margin-top: -4%; }
.offroad .stat { max-width: 340px; }

.official { margin-top: clamp(64px, 40px + 6vw, 112px); padding-top: 24px; border-top: 1px solid var(--line); }
.chapter-cta { margin-top: clamp(40px, 28px + 3vw, 64px); }

/* 08 Price teaser */
.trims {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 84%;
  gap: 12px;
  margin: clamp(40px, 28px + 3vw, 64px) calc(var(--gutter) * -1) 0;
  padding: 0 var(--gutter) 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--gutter);
  scrollbar-width: none;
}
.trims::-webkit-scrollbar { display: none; }
@media (min-width: 734px) {
  .trims { grid-auto-flow: row; grid-template-columns: 1fr 1fr; margin-inline: 0; padding: 0; overflow: visible; gap: 16px; }
}
.trim {
  --chamfer: 24px;
  scroll-snap-align: start;
  position: relative;
  display: grid;
  align-content: start;
  gap: 8px;
  padding: 28px 24px 32px;
  background: var(--surface-1);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chamfer)), calc(100% - var(--chamfer)) 100%, 0 100%);
}
.trim img { width: calc(100% + 48px); max-width: none; margin: -28px -24px 16px; aspect-ratio: 16 / 9; object-fit: cover; }
@media (min-width: 900px) { .trim img { width: calc(100% + 80px); margin: -40px -40px 20px; } }
.trim .display-m { margin-top: 4px; }
.trim__price { margin-top: 12px; padding-top: 16px; border-top: 1px solid var(--line); display: grid; gap: 4px; }
.trim__price .stat-num { font-size: clamp(36px, 30px + 1.6vw, 56px); }
@media (min-width: 900px) { .trim { padding: 40px 40px 44px; } }

.offer {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
  margin-top: 24px;
  padding: 16px 0;
  border-bottom: 1px solid var(--line);
}
.offer .label { color: var(--func-offer); }
.offer p:not(.label) { color: var(--text-secondary); }
.offer b { color: #fff; font-weight: 500; }

.peace { margin-top: clamp(56px, 40px + 4vw, 96px); }
.peace .stats { margin-top: 24px; }
@media (min-width: 734px) {
  .peace .stats--2up { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
  .peace .stats--2up .stat { padding-right: 32px; }
  .peace .stats--2up .stat + .stat { padding-left: 32px; border-left: 1px solid var(--line); }
}

/* 09 Brand and next steps */
.brand-open { position: relative; aspect-ratio: 4 / 5; overflow: hidden; }
.brand-open picture { display: block; height: 100%; }
.brand-open img { width: 100%; height: 100%; object-fit: cover; }
.brand-open::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, #000 0, transparent 25%, transparent 60%, #000 100%);
}
@media (min-width: 734px) { .brand-open { aspect-ratio: 21 / 9; } }
.brand-copy { position: relative; z-index: 2; margin-top: -18%; display: grid; gap: var(--stack-l); }
@media (min-width: 734px) { .brand-copy { margin-top: -8%; } }
.final-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: clamp(40px, 28px + 3vw, 64px); }
.final-ctas .btn { min-height: 56px; }
@media (min-width: 900px) {
  .final-ctas { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
}

.footer { padding-block: var(--section-y) 48px; }
.footer__top { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-bottom: 24px; border-bottom: 1px solid var(--line); margin-bottom: 24px; }


/* ---------- Entrance animation (native: fade + fly in) ---------- */

.js [data-reveal] { opacity: 0; transform: translateY(24px); }
.js [data-reveal].is-in {
  opacity: 1;
  transform: none;
  transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.js [data-reveal="zoom"] { transform: scale(1.04); }
.js [data-reveal="zoom"].is-in { transform: none; transition-duration: 1200ms; }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Prototype only: Foleon build notes ---------- */

.notes-toggle {
  position: fixed;
  z-index: 60;
  right: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid var(--line);
  background: rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--text-secondary);
  font: 500 11px/1 var(--font-mono);
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
}
.notes-toggle[hidden] { display: none; }
.notes-toggle i { width: 8px; height: 8px; border: 1px solid currentColor; }
@media (min-width: 641px) { .notes-toggle { bottom: 44px; } } /* keeps the hero's corner bracket clear */
@media (max-width: 733px) {
  .notes-toggle { min-height: 32px; padding: 0 10px; opacity: .75; font-size: 11px; }
  .notes-toggle span { display: none; }
}
.notes-on .notes-toggle { opacity: 1; color: #000; background: #fff; border-color: #fff; }
.notes-on .notes-toggle i { background: #000; border-color: #000; }

.build-tag { display: none; }
.notes-on .build-tag {
  display: flex;
  position: absolute;
  z-index: 40;
  top: calc(var(--nav-h) + 12px);
  right: 12px;
  max-width: min(320px, calc(100% - 24px));
  flex-direction: column;
  gap: 4px;
  padding: 10px 12px;
  background: #fff;
  color: #000;
  font: 500 11px/1.35 var(--font-mono);
  letter-spacing: .02em;
  text-transform: uppercase;
  pointer-events: none;
}
.build-tag b { font-weight: 500; padding: 2px 6px; align-self: flex-start; color: #fff; background: #000; }
.build-tag[data-kind="custom"] b { background: var(--func-offer); color: #000; }
.notes-on [data-build-outline] { outline: 1px dashed var(--func-offer); outline-offset: -1px; }

.event-log { display: none; }
.notes-on .event-log {
  display: grid;
  position: fixed;
  z-index: 60;
  left: 12px;
  bottom: max(12px, env(safe-area-inset-bottom));
  width: min(300px, calc(100% - 180px));
  gap: 2px;
  padding: 10px 12px;
  background: rgba(0, 0, 0, .82);
  border: 1px solid var(--line);
  color: var(--text-secondary);
  font: 500 10px/1.4 var(--font-mono);
  pointer-events: none;
}
.event-log b { color: var(--func-ev); font-weight: 500; }