/* ==========================================================================
   EEQ-8 — NEVER FOUND

   ── THE RULEBOOK ─────────────────────────────────────────────────────────
   Nothing in this file invents a value. If a number is needed and it is not
   below, the answer is to use the nearest one that is.

   SPACE      4px base. Only --s1…--s13 exist. No 5px, no 15px, no 30px.
              One exception, stated so it can't creep: optical nudges of 1–2px
              are allowed where they align a glyph rather than lay anything out
              (a currency sign to a numeral, a checkbox to its first line).
              Anything structural uses the scale.
   RADIUS     Exactly three. --r1 controls, --r2 surfaces, --r3 large panels.
   BORDER     Always 1px. --line normally, --line-2 when it must be seen.
              2px appears once, on the focus ring, and nowhere else.
   SHADOW     Two: --sh1 resting, --sh2 lifted. Nothing invents a third.
   TYPE       Eight sizes, --f1…--f8. Display face for headings and figures,
              text face for prose and UI, mono ONLY for numbers and units.
   COLOUR     Three text tones, three surfaces, one accent pair per theme.
   MOTION     Three durations: --t1 state, --t2 reveal, --t3 travel.
   ── ─────────────────────────────────────────────────────────────────────── */

:root {
  /* ---- SPACE ---------------------------------------------------------- */
  --s1:  4px;  --s2:  8px;  --s3: 12px;  --s4: 16px;
  --s5: 20px;  --s6: 24px;  --s7: 32px;  --s8: 40px;
  --s9: 48px;  --s10:64px;  --s11:80px;  --s12:112px;
  --s13:128px;

  /* ---- RADIUS --------------------------------------------------------- */
  --r1: 4px;    /* chips, inputs, small controls        */
  --r2: 8px;    /* buttons, cards, tiles                */
  --r3: 12px;   /* screenshots, large panels            */

  /* ---- BORDER --------------------------------------------------------- */
  --line:   rgba(18, 18, 26, .10);
  --line-2: rgba(18, 18, 26, .18);

  /* ---- SURFACE -------------------------------------------------------- */
  --bg:        #FFFFFF;
  --bg-soft:   #F7F7F9;
  --bg-raised: #F1F1F4;

  /* ---- TEXT ----------------------------------------------------------- */
  --text-1: #14141B;   /* headings, emphasis      18.0:1 */
  --text-2: #52525E;   /* body                     7.3:1 */
  --text-3: #6E6E7A;   /* captions, fine print     4.8:1 */

  /* ---- ACCENT ---------------------------------------------------------
     --accent reads on white. --plug-* is the brighter pair that only ever
     appears inside the dark plugin screenshots. Never swap them.          */
  --accent-rgb:  109  40 217;
  --accent:      rgb(var(--accent-rgb));
  --accent-dark: #55209F;
  --accent-wash: #F4EDFE;
  --plug-accent-rgb: 151  83 245;
  --plug-curve-rgb:  234  80 204;

  /* ---- SHADOW --------------------------------------------------------- */
  --sh1: 0 1px 2px rgba(18, 18, 26, .05), 0 2px 8px rgba(18, 18, 26, .04);
  --sh2: 0 2px 6px rgba(18, 18, 26, .06), 0 14px 36px rgba(18, 18, 26, .09);

  /* ---- TYPE ----------------------------------------------------------- */
  --f1: .75rem;      /* 12 — micro labels                */
  --f2: .8125rem;    /* 13 — captions, fine print, chips */
  --f3: .875rem;     /* 14 — dense UI, spec values       */
  --f4: .9375rem;    /* 15 — nav, buttons, list items    */
  --f5: 1rem;        /* 16 — body copy                   */
  --f6: 1.125rem;    /* 18 — lede, feature headings      */
  --f7: clamp(1.625rem, 2.9vw, 2.375rem);   /* section headings */
  --f8: clamp(2.75rem, 6.6vw, 5rem);        /* the product name */

  --font-display: 'Space Grotesk', 'Helvetica Neue', Arial, sans-serif;
  --font-text:    'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ---- MOTION --------------------------------------------------------- */
  --t1: 140ms cubic-bezier(.32, .72, 0, 1);   /* hover, focus, state    */
  --t2: 480ms cubic-bezier(.22, .8, .18, 1);  /* scroll reveal          */
  --t3: 1000ms cubic-bezier(.4, 0, .16, 1);   /* carousel travel        */

  /* ---- RHYTHM --------------------------------------------------------- */
  --sec-y:  var(--s12);
  --gutter: var(--s6);

  color-scheme: light;
}

[data-theme="ember"] {
  --accent-rgb: 180  63  10; --accent-dark: #8A2F08; --accent-wash: #FDF1E9;
  --plug-accent-rgb: 239 139 60;  --plug-curve-rgb: 242 86 140;
}
[data-theme="ice"] {
  --accent-rgb:   4 110  85; --accent-dark: #02543C; --accent-wash: #E7F6F1;
  --plug-accent-rgb: 78 217 140;  --plug-curve-rgb: 85 201 232;
}
[data-theme="graphite"] {
  --accent-rgb:  51  65  85; --accent-dark: #1E2937; --accent-wash: #EEF1F5;
  --plug-accent-rgb: 154 170 186; --plug-curve-rgb: 226 233 240;
}

/* ============================ 1 · BASE ================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-2);
  font-family: var(--font-text);
  font-size: var(--f5);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
/* height:auto matters: these images carry width/height attributes, so without
   it max-width shrinks the width while the attribute height stays put and the
   picture stretches. */
img, svg, canvas { display: block; max-width: 100%; height: auto; }
button { font: inherit; color: inherit; background: none; border: 0; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p, dl, dd, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r1); }
::selection { background: var(--accent-wash); color: var(--text-1); }

.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip {
  position: absolute; left: var(--s4); top: -64px; z-index: 200;
  background: var(--bg); border: 1px solid var(--line-2);
  padding: var(--s3) var(--s5); border-radius: var(--r2);
  color: var(--text-1); box-shadow: var(--sh2);
  transition: top var(--t1);
}
.skip:focus { top: var(--s4); }

/* ============================ 2 · TYPE ================================== */
.d-xl, .d-lg, .d-md {
  font-family: var(--font-display);
  color: var(--text-1);
  letter-spacing: -.022em;
  text-wrap: balance;
}
.d-xl { font-weight: 700; font-size: var(--f8); line-height: 1.0; letter-spacing: -.036em; }
.d-lg { font-weight: 700; font-size: var(--f7); line-height: 1.1; }
.d-md { font-weight: 600; font-size: var(--f6); line-height: 1.3; letter-spacing: -.014em; }

.lede { font-size: var(--f6); line-height: 1.55; color: var(--text-2); }
.body { font-size: var(--f5); line-height: 1.65; color: var(--text-2); }
.lede, .body { max-width: 60ch; }
.body + .body, .lede + .body { margin-top: var(--s4); }

.num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

.todo {
  font-family: var(--font-mono);
  font-size: var(--f2);
  color: var(--text-3);
  background: var(--bg-soft);
  border: 1px dashed var(--line-2);
  border-radius: var(--r1);
  padding: 1px var(--s2);
}

/* ============================ 3 · LAYOUT ================================ */
.wrap { width: 100%; max-width: 1140px; margin-inline: auto; padding-inline: var(--gutter); }
.sec { position: relative; padding-block: var(--sec-y); }
.sec--soft { background: var(--bg-soft); }
.lead { max-width: 660px; margin-bottom: var(--s10); }
.lead .d-lg { margin-block: var(--s5) var(--s4); }

/* ============================ 4 · NAV =================================== */
/* Not sticky. It sits at the top, and it stays there. */
.nav {
  position: relative; z-index: 60;
  height: 64px;
  border-bottom: 1px solid var(--line);
}
.nav__in { display: flex; align-items: center; gap: var(--s7); height: 100%; }
/* Mixed case, tight tracking. Widely-letterspaced caps is the most over-used
   stand-in wordmark there is; this reads as a name rather than a placeholder.
   Replace with the real script logo when it exists. */
/* inline-block, not flex: flex would swallow the space between the two words,
   so the mark reads as "NeverFound" to a screen reader. */
.nav__mark {
  display: inline-block; line-height: 28px;
  font-family: var(--font-display);
  font-size: var(--f5); font-weight: 600; letter-spacing: -.03em;
  color: var(--text-1); white-space: nowrap;
}
.nav__mark b { font-weight: 600; }
.nav__mark span { font-weight: 400; color: var(--text-3); }
.nav__links { display: flex; gap: var(--s6); margin-left: auto; }
.nav__links a {
  position: relative;
  font-size: var(--f4); font-weight: 500;
  color: var(--text-2);
  padding-block: var(--s1);
  transition: color var(--t1);
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0); transform-origin: right;
  transition: transform var(--t1);
}
.nav__links a:hover { color: var(--text-1); }
.nav__links a:hover::after { transform: scaleX(1); transform-origin: left; }
.nav__end { display: flex; align-items: center; gap: var(--s5); margin-left: auto; }
.nav__links + .nav__end { margin-left: 0; }
.nav__bar {
  position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  transform: scaleX(var(--p, 0)); transform-origin: left;
  background: var(--accent);
}

.dots { display: flex; }
.dot { width: 24px; height: 24px; display: grid; place-items: center; cursor: pointer; }
.dot > span:first-child {
  width: var(--s2); height: var(--s2); border-radius: 50%;
  background: var(--d); opacity: .3;
  transition: opacity var(--t1), transform var(--t1), box-shadow var(--t1);
}
.dot:hover > span:first-child { opacity: .7; transform: scale(1.15); }
.dot[aria-checked="true"] > span:first-child {
  opacity: 1; box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .15);
}
.dot[data-theme-set="neverfound"] { --d: #7C3AED; }
.dot[data-theme-set="ember"]      { --d: #C2410C; }
.dot[data-theme-set="ice"]        { --d: #0E7490; }
.dot[data-theme-set="graphite"]   { --d: #475569; }

/* ============================ 5 · BUTTONS =============================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--font-text);
  font-size: var(--f4); font-weight: 600; letter-spacing: -.004em;
  border-radius: var(--r2);
  cursor: pointer; white-space: nowrap;
  transition: background var(--t1), border-color var(--t1),
              box-shadow var(--t1), color var(--t1);
}
.btn--primary {
  padding: var(--s3) var(--s6);
  background: var(--accent); color: #fff;
  box-shadow: 0 1px 2px rgb(var(--accent-rgb) / .26);
}
.btn--primary:hover  { background: var(--accent-dark); box-shadow: 0 2px 8px rgb(var(--accent-rgb) / .28); }
.btn--primary:active { background: var(--accent-dark); box-shadow: none; }
.btn--secondary {
  padding: var(--s3) var(--s6);
  border: 1px solid var(--line-2); color: var(--text-1); background: var(--bg);
}
.btn--secondary:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-wash); }
.btn--wide { width: 100%; }
.btn--sm { padding: var(--s2) var(--s4); font-size: var(--f3); }

/* ============================ 6 · HERO ================================== */
.hero { position: relative; padding-block: var(--s11) var(--sec-y); overflow: clip; isolation: isolate; }

.hero__photo { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero__photo img {
  width: 100%; height: 100%; object-fit: cover;
  /* Scaled past the box: a blur samples transparency from outside the element
     and would otherwise leave a pale band down each edge. */
  transform: scale(1.08);
  filter: blur(9px) brightness(1.24) saturate(1.06);
}
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgb(255 255 255 / .93) 0%, rgb(255 255 255 / .86) 30%,
      rgb(255 255 255 / .54) 64%, rgb(255 255 255 / .44) 100%),
    linear-gradient(180deg,
      rgb(255 255 255 / .42) 0%, transparent 14%,
      transparent 80%, var(--bg) 100%);
}

.hero__grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.06fr);
  gap: var(--s10);
  align-items: center;
}
.hero__copy { display: grid; justify-items: start; }
.hero__name {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--f8); line-height: .9; letter-spacing: -.045em;
  color: var(--text-1);
  margin-bottom: var(--s4);
}
.hero__tag {
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
  line-height: 1.2; letter-spacing: -.02em;
  color: var(--text-1);
}
.hero__sub { margin-top: var(--s4); max-width: 38ch; }
.hero__cta { margin-top: var(--s7); display: flex; gap: var(--s3); flex-wrap: wrap; }

.trust {
  margin-top: var(--s6);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s1) var(--s4);
  font-size: var(--f2); font-weight: 500; color: var(--text-2);
}
.trust li { display: inline-flex; align-items: center; gap: var(--s4); }
.trust li + li::before {
  content: ""; flex: none; width: 1px; height: 11px; background: var(--line-2);
}

.aud {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--s1);
  margin-top: var(--s6);
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.0625rem, 1.6vw, 1.25rem);
  letter-spacing: -.014em; color: var(--text-2);
}
.aud__reel { display: block; height: 1.35em; overflow: hidden; }
.aud__list { display: flex; flex-direction: column; transition: transform 640ms cubic-bezier(.76,0,.24,1); }
.aud__list.nojump { transition: none; }
.aud__list span { height: 1.35em; line-height: 1.35em; color: var(--accent); white-space: nowrap; font-weight: 700; }

/* ------------------------- 6b · THE CAROUSEL ---------------------------- */
/* Slides are clipped by this window, never faded with opacity. Fading a stack
   of overlapping panels makes all of them translucent at the same instant, so
   mid-step nothing on screen is solid. The window also stops a slide wandering
   across the headline — the copy ends at ~400px, the window opens at ~444px. */
.rot__win {
  /* Uneven on purpose: the right side runs out of viewport before it runs out
     of window, so the left is trimmed back to roughly match what shows. */
  --bleed-l: var(--s13);
  --bleed-r: var(--s11);
  position: relative;
  margin-inline: calc(var(--bleed-l) * -1) calc(var(--bleed-r) * -1);
  padding-inline: var(--bleed-l) var(--bleed-r);
  padding-block: var(--s8);
  margin-block: calc(var(--s8) * -1);
  overflow: hidden;
  /* Length stops, not percentages: the fade must end exactly where the centre
     slide begins, or its leading edge picks up a white gradient. Percentages
     drift as the column resizes; --bleed-* is by definition the right distance. */
  -webkit-mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--bleed-l),
    #000 calc(100% - var(--bleed-r)), transparent 100%);
          mask-image: linear-gradient(90deg,
    transparent 0, #000 var(--bleed-l),
    #000 calc(100% - var(--bleed-r)), transparent 100%);
}
.rot { position: relative; aspect-ratio: 1780 / 1022; }

.rot__slide {
  position: absolute; inset: 0;
  border-radius: var(--r3);
  background: #0F0F12;
  box-shadow: var(--sh2);
  transform: translateX(calc(var(--d, 0) * 74%)) scale(var(--s, .86));
  opacity: var(--o, 0);
  z-index: var(--z, 1);
  pointer-events: none;
  /* No overflow clip here. Clipping a rounded box that is also being scaled is
     what produced the jagged corners; the image carries the radius instead. */
  transition: transform var(--t3),
              opacity var(--ot, 760ms) ease var(--od, 0ms);
}
.rot__slide img {
  width: 100%; height: 100%; object-fit: cover;
  border-radius: inherit;
}

/* Travel is right to left. The neighbours are genuinely translucent — that is
   the look — but the timing is asymmetric on purpose: a slide arriving at the
   centre goes solid fast, one leaving gives up its opacity late. Fade them
   symmetrically and both sit half-transparent at the midpoint of every step,
   which is when the whole row looks like it has dissolved. */
.rot__slide[data-d="0"]  { --s: 1;   --o: 1;   --z: 3; --ot: 380ms; --od: 0ms; }
.rot__slide[data-d="-1"] { --s: .86; --o: .34; --z: 2; --ot: 760ms; --od: 340ms; }
.rot__slide[data-d="1"]  { --s: .86; --o: .34; --z: 2; --ot: 760ms; --od: 0ms; }
.rot__slide[data-d="-2"] { --s: .82; --o: 0;   --z: 1; --ot: 560ms; --od: 340ms; }
.rot__slide[data-d="2"]  { --s: .82; --o: 0;   --z: 1; --ot: 560ms; --od: 0ms; }
.rot__slide.rot--warp { transition: none; }

.hero__show { position: relative; }
.shotcap { display: grid; margin-top: var(--s5); }
.shotcap span {
  grid-area: 1 / 1; opacity: 0;
  font-family: var(--font-display);
  font-size: var(--f4); font-weight: 600; letter-spacing: -.01em;
  color: var(--text-1);
  transition: opacity var(--t2);
}
.shotcap span.is-on { opacity: 1; }

/* ============================ 7 · FORMAT STRIP ========================== */
.strip-formats { border-block: 1px solid var(--line); background: var(--bg-soft); }
.fmt {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s6);
  padding-block: var(--s5);
  font-size: var(--f4); font-weight: 500; color: var(--text-2);
}
.fmt li { display: flex; align-items: center; gap: var(--s6); }
.fmt li + li::before { content: ""; width: 1px; height: 12px; background: var(--line-2); }
.fmt__flag { margin-left: auto; color: var(--text-3); }

/* ============================ 8 · THE PITCH ============================= */
.pitch { margin-bottom: var(--s9); }
.pitch__h { display: grid; gap: var(--s1); font-family: var(--font-display); letter-spacing: -.024em; }
.pitch__no  { font-weight: 600; font-size: clamp(1.25rem, 2.2vw, 1.625rem); line-height: 1.2; color: var(--text-3); }
.pitch__yes { font-weight: 700; font-size: clamp(2rem, 4.4vw, 3.25rem); line-height: 1.04; color: var(--text-1); }
.pitch__p   { color: var(--accent); font-variant-numeric: tabular-nums; }
.pitch__sub { margin-top: var(--s3); font-size: var(--f5); color: var(--text-2); }

/* ============================ 9 · FIGURES =============================== */
.figures {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--line); border-radius: var(--r2);
  overflow: hidden; background: var(--bg);
}
.fig { padding: var(--s7); border-right: 1px solid var(--line); }
.fig:last-child { border-right: 0; }
.fig__n {
  display: block;
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.5rem; line-height: 1; letter-spacing: -.028em;
  color: var(--text-1); font-variant-numeric: tabular-nums;
}
.fig__u { font-size: .46em; color: var(--text-3); margin-left: 2px; letter-spacing: 0; }
.fig__l { display: block; margin-top: var(--s2); font-size: var(--f4); font-weight: 500; color: var(--text-2); }

/* ============================ 10 · FEATURES ============================= */
.feats {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r2);
  overflow: hidden; margin-top: var(--s5);
}
.feat { background: var(--bg); padding: var(--s7); transition: background var(--t1); }
.feat:hover { background: var(--bg-soft); }
.feat h3 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--f6); letter-spacing: -.014em; color: var(--text-1);
}
.feat p { margin-top: var(--s2); font-size: var(--f5); line-height: 1.6; color: var(--text-2); }

/* ============================ 11 · STORY =============================== */
.story { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--s10); align-items: start; }
.story__q {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.875rem, 3.6vw, 3rem);
  line-height: 1.06; letter-spacing: -.032em; color: var(--text-1);
}
.story__price { color: var(--accent); }
.story__body p { font-size: var(--f6); line-height: 1.7; color: var(--text-2); max-width: 58ch; }
.story__body p + p { margin-top: var(--s5); }
.story__sign { margin-top: var(--s6); font-size: var(--f5); color: var(--text-1); font-weight: 500; }

/* ============================ 12 · SPECS ================================ */
.spectable { display: grid; grid-template-columns: 1fr 1fr; gap: 0 var(--s10); }
.spec div {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--s6); padding: var(--s3) 0;
  border-bottom: 1px solid var(--line);
}
.spec dt { font-size: var(--f4); color: var(--text-2); white-space: nowrap; }
.spec dd {
  font-family: var(--font-mono); font-size: var(--f3);
  font-variant-numeric: tabular-nums; color: var(--text-1); text-align: right;
}
.spec dd.todo { color: var(--text-3); }
.specs__note { margin-top: var(--s8); max-width: 66ch; }

/* ============================ 13 · FAQ ================================== */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s6);
  padding: var(--s5) 0; cursor: pointer; list-style: none;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--f6); letter-spacing: -.014em; color: var(--text-1);
  transition: color var(--t1);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--accent); }
.mk { position: relative; flex: none; width: var(--s4); height: var(--s4); }
.mk::before, .mk::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  background: var(--accent); border-radius: 1px;
  transform: translate(-50%, -50%);
  transition: transform var(--t1), opacity var(--t1);
}
.mk::before { width: 13px; height: 1.5px; }
.mk::after  { width: 1.5px; height: 13px; }
.faq details[open] .mk::after { transform: translate(-50%,-50%) rotate(90deg); opacity: 0; }
.faq__wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--t1); }
.faq details[open] .faq__wrap { grid-template-rows: 1fr; }
.faq__inner { overflow: hidden; }
.faq__inner > * { padding-bottom: var(--s5); }
.faq__b p { max-width: 66ch; }
.faq__b a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }

/* ============================ 14 · CLOSE ================================ */
.close { position: relative; display: grid; grid-template-columns: minmax(0,1fr) 400px; gap: var(--s10); align-items: start; }
.close__right { display: grid; gap: var(--s5); }
.close__shot img { border-radius: var(--r3); box-shadow: var(--sh2); }
.close__shot[hidden] { display: none; }

.card {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: var(--r2);
  padding: var(--s7);
  box-shadow: var(--sh1);
}
.card--buy { display: grid; gap: var(--s3); }
.card__t { font-size: var(--f4); font-weight: 600; color: var(--text-1); }
.price {
  font-family: var(--font-display); font-weight: 700;
  font-size: 3rem; line-height: 1; letter-spacing: -.032em;
  color: var(--text-1); font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 2px;
}
.price__cur { font-size: .44em; color: var(--text-2); }
.price__alt { font-size: var(--f2); color: var(--text-3); }
.incl {
  display: grid; gap: var(--s2);
  border-block: 1px solid var(--line);
  padding-block: var(--s5); margin-block: var(--s1);
}
.incl li { position: relative; padding-left: var(--s6); font-size: var(--f4); color: var(--text-2); }
.incl li::before {
  content: ""; position: absolute; left: 0; top: .5em;
  width: 11px; height: 6px;
  border-left: 1.5px solid var(--accent); border-bottom: 1.5px solid var(--accent);
  transform: rotate(-45deg);
}
.price__fine { font-size: var(--f2); color: var(--text-3); }

.steps {
  margin-top: var(--s9);
  padding-top: var(--s6);
  border-top: 1px solid var(--line);
  max-width: 480px;
}
.steps__t {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--f5); letter-spacing: -.014em;
  color: var(--text-1); margin-bottom: var(--s4);
}
.steps ol { counter-reset: step; display: grid; gap: var(--s4); }
.steps li {
  position: relative; padding-left: var(--s8);
  font-size: var(--f4); line-height: 1.55; color: var(--text-2);
}
.steps li::before {
  counter-increment: step; content: counter(step);
  position: absolute; left: 0; top: -1px;
  width: var(--s6); height: var(--s6); border-radius: 50%;
  display: grid; place-items: center;
  background: var(--accent-wash); color: var(--accent);
  font-family: var(--font-mono); font-size: var(--f1); font-weight: 500;
}
.steps b { color: var(--text-1); font-weight: 600; }

.sub { margin-top: var(--s6); display: grid; gap: var(--s3); max-width: 480px; }
.sub__row { display: flex; gap: var(--s2); flex-wrap: wrap; }
.sub__in {
  flex: 1 1 220px; min-width: 0; height: 46px; padding-inline: var(--s4);
  background: var(--bg); border: 1px solid var(--line-2); border-radius: var(--r2);
  color: var(--text-1); font-family: var(--font-text); font-size: var(--f4);
  transition: border-color var(--t1), box-shadow var(--t1);
}
.sub__in::placeholder { color: var(--text-3); }
.sub__in:hover { border-color: var(--accent); }
.sub__in:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgb(var(--accent-rgb) / .13); }
.sub__go { height: 46px; padding-inline: var(--s5); flex: 0 0 auto; }
.sub__consent {
  display: flex; gap: var(--s3); align-items: flex-start;
  font-size: var(--f2); line-height: 1.5; color: var(--text-2); cursor: pointer;
}
.sub__consent input { flex: none; width: 16px; height: 16px; margin: 2px 0 0; accent-color: rgb(var(--accent-rgb)); cursor: pointer; }
.sub__consent a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.sub__msg { font-size: var(--f2); color: var(--text-2); }
.sub__msg:empty { display: none; }
.sub__msg[data-ok="0"] { color: #B4204C; }

.totop { margin-top: var(--s11); text-align: center; position: relative; }
.totop a {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--f4); font-weight: 500; color: var(--text-3);
  padding: var(--s2) var(--s4); border-radius: var(--r2);
  transition: color var(--t1), background var(--t1);
}
.totop a:hover { color: var(--accent); background: var(--accent-wash); }

/* ============================ 15 · FOOTER =============================== */
.foot { border-top: 1px solid var(--line); background: var(--bg-soft); padding-top: var(--s10); }
.foot__in { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: var(--s9); padding-bottom: var(--s9); }
.foot__line { margin-top: var(--s2); font-size: var(--f4); color: var(--text-3); }
.foot__nav { display: grid; gap: var(--s2); align-content: start; }
.foot__h { font-size: var(--f3); font-weight: 600; color: var(--text-1); margin-bottom: var(--s1); }
.foot__nav a { font-size: var(--f4); color: var(--text-2); width: fit-content; transition: color var(--t1); }
.foot__nav a:hover { color: var(--accent); }
.foot__base { border-top: 1px solid var(--line); padding-block: var(--s5); }
.foot__base p { font-size: var(--f2); color: var(--text-3); }

/* ============================ 16 · LEGAL ================================ */
.legal { padding-block: var(--s11) var(--s12); }
.legal .wrap { max-width: 740px; }
.legal h1 {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.875rem, 3.2vw, 2.5rem); letter-spacing: -.03em;
  line-height: 1.1; color: var(--text-1); margin-top: var(--s3);
}
.legal h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--f6); letter-spacing: -.014em; color: var(--text-1);
  margin-top: var(--s9); margin-bottom: var(--s3);
}
.legal h3 { font-weight: 600; font-size: var(--f5); color: var(--text-1); margin-top: var(--s6); margin-bottom: var(--s2); }
.legal p, .legal li { font-size: var(--f5); line-height: 1.7; max-width: 66ch; color: var(--text-2); }
.legal p + p, .legal ul + p, .legal p + ul { margin-top: var(--s4); }
.legal ul { list-style: disc; padding-left: var(--s6); display: grid; gap: var(--s2); }
.legal a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.legal address { font-style: normal; }
.legal__note {
  border: 1px solid var(--line-2); border-left: 2px solid var(--accent);
  border-radius: var(--r2); background: var(--bg-soft);
  padding: var(--s5); margin-top: var(--s6);
}
.legal__note p { font-size: var(--f4); }
.legal__meta { margin-top: var(--s9); padding-top: var(--s5); border-top: 1px solid var(--line); }
.legal .back { display: inline-block; margin-bottom: var(--s1); font-size: var(--f4); }
.model { border: 1px solid var(--line); border-radius: var(--r2); padding: var(--s6); margin-top: var(--s5); background: var(--bg-soft); }
.klabel { font-size: var(--f3); font-weight: 600; color: var(--accent); }

/* ============================ 17 · DIVIDER ============================== */
.divider { width: 100%; height: 32px; background-repeat: no-repeat; background-size: 100% 100%; }
.divider[data-variant="highpass"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 40 C 40 40 56 20 104 20 L1200 20' fill='none' stroke='rgba(18,18,26,0.14)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.divider[data-variant="lowshelf"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 9 L160 9 C 232 9 240 21 312 21 L1200 21' fill='none' stroke='rgba(18,18,26,0.14)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.divider[data-variant="bell"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 22 L400 22 C 472 22 480 6 552 6 C 624 6 632 22 704 22 L1200 22' fill='none' stroke='rgba(18,18,26,0.14)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.divider[data-variant="dip"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 18 L520 18 C 600 18 608 34 680 34 C 752 34 760 18 840 18 L1200 18' fill='none' stroke='rgba(18,18,26,0.14)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }
.divider[data-variant="highcut"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0 19 L960 19 C 1032 19 1048 40 1104 40' fill='none' stroke='rgba(18,18,26,0.14)' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E"); }

/* ============================ 18 · MOTION =============================== */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity var(--t2) var(--rd, 0ms), transform var(--t2) var(--rd, 0ms);
}
.js [data-stagger] > * { opacity: 0; transform: translateY(14px); }
.js [data-stagger].is-in > * { opacity: 1; transform: none; transition: opacity var(--t2), transform var(--t2); }
.js [data-stagger].is-in > *:nth-child(1) { transition-delay: 0ms; }
.js [data-stagger].is-in > *:nth-child(2) { transition-delay: 60ms; }
.js [data-stagger].is-in > *:nth-child(3) { transition-delay: 120ms; }
.js [data-stagger].is-in > *:nth-child(4) { transition-delay: 180ms; }

/* The page re-colours with the carousel, so anything wearing the accent eases
   into it. Colour only — never layout. */
.btn--primary, .dot > span:first-child, .aud__list span, .nav__bar,
.pitch__p, .story__price, .fig__n, .nav__links a::after,
.mk::before, .mk::after, .incl li::before {
  transition: background-color 600ms ease, color 600ms ease,
              box-shadow 600ms ease, border-color 600ms ease;
}
.hero__scrim { transition: background 600ms ease; }

[data-par] { will-change: transform; }
.hero__photo { transform: translate3d(0, var(--py, 0px), 0); }

/* ============================ 19 · RESPONSIVE =========================== */
@media (max-width: 1120px) {
  .hero__grid { gap: var(--s8); }
  .rot__win { --bleed-l: var(--s11); --bleed-r: var(--s9); }
  .story { grid-template-columns: 1fr; gap: var(--s6); }
  .close { grid-template-columns: minmax(0,1fr) 360px; gap: var(--s8); }
  .figures { grid-template-columns: repeat(2, 1fr); }
  .fig:nth-child(2) { border-right: 0; }
  .fig:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
}
@media (max-width: 940px) {
  :root { --sec-y: var(--s11); }
  .hero__grid { grid-template-columns: 1fr; gap: var(--s9); }
  .rot__win { --bleed-l: var(--s9); --bleed-r: var(--s9);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
            mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%); }
  .close { grid-template-columns: 1fr; gap: var(--s8); }
  .close__right { max-width: 440px; }
  .nav__links { display: none; }
  .spectable { grid-template-columns: 1fr; gap: 0; }
  .foot__in { grid-template-columns: 1fr 1fr; gap: var(--s7); }
  .lead { margin-bottom: var(--s8); }
}
@media (max-width: 700px) {
  :root { --sec-y: var(--s10); --gutter: var(--s5); }
  .nav__in { gap: var(--s3); }
  .nav__end { gap: var(--s2); }
  .nav__mark { font-size: var(--f1); letter-spacing: .12em; }
  .nav__buyLong { display: none; }
  .hero { padding-top: var(--s10); }
  .hero__cta { width: 100%; }
  .hero__cta .btn { flex: 1 1 auto; }
  .rot__win { --bleed-l: var(--s6); --bleed-r: var(--s6); }
  .figures { grid-template-columns: 1fr; }
  .fig { border-right: 0; border-bottom: 1px solid var(--line); }
  .fig:last-child { border-bottom: 0; }
  .feats { grid-template-columns: 1fr; }
  .feat { padding: var(--s6); }
  .card { padding: var(--s6); }
  .sub__row { flex-direction: column; }
  .sub__in { flex: 0 0 auto; width: 100%; }
  .sub__go { width: 100%; }
  .totop { margin-top: var(--s10); }
  .foot__in { grid-template-columns: 1fr; gap: var(--s7); }
  .foot__nav a, .legal a { padding-block: var(--s1); }
  .fmt { gap: var(--s2) var(--s4); }
  .fmt li { gap: var(--s4); }
  .spec div { flex-direction: column; gap: 2px; align-items: flex-start; }
  .spec dd { text-align: left; }
}

/* ============================ 20 · REDUCED MOTION ======================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js .reveal, .js [data-stagger] > * { opacity: 1; transform: none; }
  .hero__photo { transform: none; }
  [data-par] { will-change: auto; }
}