/* ══════════════════════════════════════════════════════════════
   home.css v5 — homepage
   Hero + intro: dark, day1-run proportions.
   Below the hero: white paper, thegrind.nl structure.
   Type: Outfit 500 (geometric grotesque — closer to day one's
   "Font Sans" than Figtree, which reads too humanist).
   ══════════════════════════════════════════════════════════════ */

body.home {
  --fs: clamp(11px, 0.926vw, 19px);
  --cush: 1.5em;
  --ink: #ffffff;
  --ghost: #2f2f2f;
  --mute: rgba(255, 255, 255, 0.6);
  --bg: #0e0d0d;

  /* below-hero ground — black, per Daniel. */
  --paper: #0e0d0d;
  --paper-2: #161515;
  --pink: #ffffff;
  --pmute: rgba(255, 255, 255, 0.6);
  --pline: rgba(255, 255, 255, 0.14);
  --pghost: #2f2f2f;

  font-size: var(--fs);
  font-family: 'Outfit', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  background: var(--paper);
  color: var(--pink);
  font-weight: 400;
  line-height: 1.2;
}
body.home .dz-wrap { max-width: none; padding: 0 var(--cush); margin: 0; }

/* ── type ────────────────────────────────────────────────────── */
.d {
  font-size: 9em; font-weight: 500; line-height: 0.9;
  letter-spacing: -0.025em; color: var(--ink); margin: 0;
}
.d .g { color: var(--ghost); }
.bod { font-size: 1.2em; font-weight: 400; line-height: 1.35; color: var(--ink); }
.m {
  font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;
  font-size: 12px; font-weight: 400; letter-spacing: 0.02em;
  text-transform: uppercase; color: var(--ink); line-height: 1.2;
}
.chip {
  display: inline-block;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 2.4px; padding: 2.4px 7.2px 3.6px;
}


/* masked line reveal */
/* the mask has to clear the deepest descender in the type, or the g in
   "Strong" gets sheared off by overflow:hidden */
.ln { display: block; overflow: hidden; padding-bottom: 0.18em; margin-bottom: -0.18em; }
.ln > i { display: block; font-style: normal; will-change: transform; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  background: #ffffff; color: #0e0d0d;
  font-size: 1.2em; font-weight: 500; letter-spacing: -0.005em;
  padding: 0.68em 1.3em; border-radius: 3px;
  transition: opacity 0.2s;
}
.btn:hover { opacity: 0.82; }
.btn.ink { background: #0e0d0d; color: #fff; }
.btn.hollow { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3); }
.btn.hollow:hover { background: rgba(255,255,255,0.08); opacity: 1; }
.btn.wide { width: 100%; }

.rv { opacity: 0; transform: translateY(18px); }

/* ══ INTRO — their pageloader ══════════════════════════════ */
#intro {
  position: fixed; inset: 0; z-index: 9999;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
}
#intro .ph {
  position: absolute;
  font-size: 4.4em; font-weight: 500; letter-spacing: -0.025em; line-height: 0.9;
  color: var(--ink); opacity: 0; white-space: nowrap;
  /* each beat racks from soft to sharp — GSAP drives blur + scale from here */
  will-change: opacity, filter, transform;
}
/* the wordmark beat is deliberately small */
#intro img.ph { width: 7.4em; height: auto; }
/* a slow breathing vignette keeps the black from reading as a dead screen */
#intro::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(255,255,255,0.045) 0%, rgba(255,255,255,0) 70%);
}
html.introdone #intro { display: none; }
html.introing, html.introing body { overflow: hidden; height: 100%; }

/* ══ HERO ══════════════════════════════════════════════════ */
.hero {
  position: relative; height: 100svh; min-height: 600px;
  overflow: hidden; background: var(--bg);
}
/* video is 110% tall and parallaxes, exactly like theirs */
.hero video {
  position: absolute; left: 0; top: 0; width: 100%; height: 110%;
  object-fit: cover; object-position: center 40%; z-index: 0; will-change: transform;
}
/* soft help only where the ghosted headline sits — theirs is unscrimmed */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 68% 50% at 72% 12%, rgba(10,10,12,0.46) 0%, rgba(10,10,12,0) 100%);
}
.hero-in { position: absolute; inset: 0; z-index: 2; }

/* headline block — top right, big and tight to the top edge.
   No wordmark under it: the nav logo already carries the brand, and the
   film puts the wordmark on the pit itself. */
.hero-head {
  position: absolute; top: 1.9em; right: var(--cush);
  text-align: right;
}
.hero-head .d {
  font-size: clamp(3.75rem, 8.6vw, 8.6rem); line-height: 0.96;
  letter-spacing: -0.028em;
  color: rgba(255, 255, 255, 0.5);
}
/* third line: the wordmark, under the ghosted headline */
.hero-mark { display: flex; justify-content: flex-end; margin-top: 0.6em; }
.hero-mark img { width: 22em; max-width: 82vw; height: auto; }

/* the wordmark line under the headline exists only on mobile, like theirs */
.hero-mark-m { display: none; }

/* caption sits low, well under the headline */
.hero-cap {
  position: absolute; left: 9vw; bottom: 12%;
  text-align: center;
}
.hero-cap .bod { display: block; font-size: clamp(1.0625rem, 1.4vw, 1.4rem); }
.hero-cap .bod + .bod { color: var(--mute); margin-top: 0.25em; }

/* bottom bar — measured: black 20%, blur 50, r3.6, 24px off the corner */
.hero-bar {
  position: absolute; right: var(--cush); bottom: var(--cush);
  display: flex; align-items: center; gap: 1em;
  background: rgba(0, 0, 0, 0.2);
  backdrop-filter: blur(50px); -webkit-backdrop-filter: blur(50px);
  border-radius: 3.6px; padding: 0.75em;
  width: 45vw; max-width: 820px;          /* measured: 784/1728 = 45% */
}
.hero-bar .chip { margin-left: 0.3em; }
.hero-bar .val { flex: 1; font-size: 1.2em; font-weight: 400; color: var(--ink); padding: 0 1em 0 0.7em; }
.hero-bar .val b { font-weight: 500; }
.hero-bar .val span { color: var(--mute); }
.hero-bar.wait { opacity: 0 !important; transform: translateY(16px); pointer-events: none; transition: opacity 0.45s ease, transform 0.5s ease; }
.hero-bar.wait.vis { opacity: 1 !important; transform: none; pointer-events: auto; }

/* ══════════════════════════════════════════════════════════
   BELOW THE HERO — white paper, thegrind.nl structure.
   Labels tiny, content large.
   ══════════════════════════════════════════════════════════ */

/* Section labels use the sans, large and ghosted — day one's "Our Mission".
   Mono is reserved for chips and micro-labels (.m, and the small variants
   below), never for a section head. */
.eyebrow {
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1.25rem, 2vw, 2rem); font-weight: 500; letter-spacing: -0.028em;
  text-transform: none; color: #6a6a68; line-height: 1; margin: 0;
}
/* the small in-component labels stay mono */
.g-specs .eyebrow, .g-facts .eyebrow, .foot .eyebrow, .card .eyebrow {
  font-family: ui-monospace, 'SF Mono', 'Roboto Mono', Menlo, monospace;
  font-size: 12px; font-weight: 400; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--pmute); line-height: 1.3;
}
.display {
  font-size: clamp(2.375rem, 8vw, 8.4rem); font-weight: 500; line-height: 0.94;
  letter-spacing: -0.03em; color: var(--pink); margin: 0;
}
.display .g { color: #4d7bff; }
.title {
  font-size: clamp(1.75rem, 3.2vw, 3.2rem); font-weight: 500; line-height: 1.02;
  letter-spacing: -0.028em; color: var(--pink); margin: 0;
}
.lede {
  font-size: clamp(1.0625rem, 1.85vw, 1.85rem); font-weight: 400; line-height: 1.45;
  letter-spacing: -0.014em; color: rgba(255,255,255,0.78); margin: 0; max-width: 24ch;
}
.fact {
  display: block;
  font-size: clamp(1.0625rem, 1.85vw, 1.85rem); font-weight: 500; line-height: 1.2;
  letter-spacing: -0.022em; color: var(--pink);
}

.g-sec { background: var(--paper); padding: 7em var(--cush) 0; }
.g-sec .eyebrow { margin-bottom: 0.7em; }
.g-sec .display + .lede { margin-top: 3.4em; }

/* ══ THE PITS — the real builder, contained ════════════════
   Full 19-colour configurator, one per product. The stage is held
   to a centred column instead of running edge to edge, so the pit
   reads as an object on a table rather than a banner.
   All rules scoped to body.home so the product pages keep dz.css.
   ══════════════════════════════════════════════════════════ */
.show { background: #0e0d0d; padding: 8em 0 9em; margin-top: 4em; }
.show-in { max-width: 1240px; margin: 0 auto; padding: 0 var(--cush); }

.show-top { max-width: 62%; margin-bottom: 4.5em; }
.show-top .eyebrow { margin-bottom: 0.7em; }
.show-top .display { font-size: clamp(2.5rem, 5.6vw, 5.4rem); }
.show-top .lede { margin-top: 1.4em; max-width: 46ch; }

/* ── the whole configurator is one object: picker, stage and controls
   share a single card so nothing floats loose on the page ── */
.bx {
  background: #141317;
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 2.2em;
}

/* the switcher has to look pressable — display type alone read as a heading.
   Same frosted treatment as the hero bar so the two read as one system. */
.bx-pick { text-align: center; }
.bx-pick-lab {
  display: block;
  font-family: 'Outfit', sans-serif;
  font-size: clamp(1rem, 1.15vw, 1.15rem); font-weight: 500;
  letter-spacing: -0.012em; text-transform: none;
  color: #fff; margin-bottom: 1.1em;
}
.bx-tabs {
  display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  border-radius: 5px; overflow: hidden;
  background: rgba(255,255,255,0.07);
  backdrop-filter: blur(50px) saturate(1.4);
  -webkit-backdrop-filter: blur(50px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16),
              inset 0 1px 0 rgba(255,255,255,0.14);
}
.bx-tab {
  min-height: 52px; padding: 0 2.2em; border: 0; cursor: pointer;
  background: none; font-family: inherit;
  font-size: clamp(1.0625rem, 1.35vw, 1.35rem); font-weight: 500;
  letter-spacing: -0.018em; color: rgba(255,255,255,0.62);
  transition: background 0.24s, color 0.24s;
}
.bx-tab + .bx-tab { box-shadow: inset 1px 0 0 rgba(255,255,255,0.14); }
.bx-tab:hover { color: #fff; background: rgba(255,255,255,0.07); }
.bx-tab.is-on {
  background: #4d7bff; color: #fff;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28);
}
.bx-tab:focus-visible { outline: 2px solid #4d7bff; outline-offset: 3px; }

.bx-sub {
  display: none; margin: 1.2em auto 2.2em; max-width: 52ch;
  font-size: clamp(0.9375rem, 1.05vw, 1.05rem);
  color: var(--pmute); letter-spacing: -0.008em; text-align: center;
}
.bx-sub.is-on { display: block; }

.bx-pane { display: none; }
.bx-pane.is-on { display: block; animation: bxIn 0.4s cubic-bezier(.22,.68,.32,1) both; }
@keyframes bxIn { from { opacity: 0; } to { opacity: 1; } }

/* ── builder shell ── */
body.home .dzb {
  display: grid; grid-template-columns: minmax(0, 1.32fr) minmax(280px, 0.68fr);
  gap: 2.4em; align-items: stretch;
}
body.home .dzb-stage {
  position: relative; overflow: hidden;
  background: radial-gradient(ellipse 78% 68% at 50% 42%, #201f24 0%, #171620 62%, #131218 100%);
  border: 1px solid rgba(255,255,255,0.07); border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  /* No aspect-ratio in the two-column layout. The grid stretches this to the
     panel's height, and an aspect-ratio would then derive a width from that
     height — overflowing the column and sliding under the panel. Let the
     column set the width and the row set the height. */
  min-height: 0; padding: 2.2em;
}
/* the pit floats inside the frame — not bleeding to the edges */
body.home .dzb-stage canvas {
  width: 100%; height: 100%; object-fit: contain; display: block;
  filter: drop-shadow(0 34px 44px rgba(0,0,0,0.6));
  transition: filter 0.16s ease;
}
body.home .dzb-stage canvas.dzb-flash { filter: drop-shadow(0 34px 44px rgba(0,0,0,0.6)) brightness(1.14) saturate(1.04); }
body.home .dzb-badge {
  position: absolute; top: 1.1em; left: 1.1em; z-index: 2;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.62); background: rgba(0,0,0,0.34);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.12);
  padding: 0.45em 0.75em; border-radius: 3px;
}
body.home .dzb-loading {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.4); background: #121111;
}

/* ── panel: no box, just a hairline. Lets the render carry the weight. ── */
body.home .dzb-panel {
  background: none; border: none; box-shadow: none; padding: 0.2em 0 0 2.4em;
  border-left: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; gap: 2em;
}
body.home .dzb-price {
  font-family: 'Outfit', sans-serif; font-weight: 500;
  font-size: clamp(2rem, 2.8vw, 2.8rem); line-height: 0.95;
  letter-spacing: -0.03em; color: #fff;
}
body.home .dzb-price small {
  display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; font-weight: 400; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pmute); margin-bottom: 0.6em;
}

body.home .dzb-seg-wrap { display: block; }
body.home .dzb-seg-label {
  display: block; font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--pmute); margin-bottom: 0.9em;
}
body.home .dzb-seg {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0;
  background: none; border: 1px solid rgba(255,255,255,0.14);
  border-radius: 3px; padding: 0; overflow: hidden;
}
body.home .dzb-seg button {
  display: flex; align-items: center; justify-content: center; gap: 0.6em;
  min-height: 44px; padding: 0 0.8em; border: 0; background: none; cursor: pointer;
  font-family: 'Outfit', sans-serif; font-size: 0.95rem; font-weight: 400;
  letter-spacing: -0.01em; color: rgba(255,255,255,0.55);
  transition: background 0.22s, color 0.22s;
}
body.home .dzb-seg button + button { border-left: 1px solid rgba(255,255,255,0.14); }
body.home .dzb-seg button:hover { color: #fff; }
body.home .dzb-seg button.on { background: rgba(255,255,255,0.09); color: #fff; }

body.home .dzb-lab { display: flex; justify-content: space-between; align-items: baseline; gap: 1em; }
body.home .dzb-lab span {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; font-weight: 400; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--pmute);
}
body.home .dzb-lab b {
  font-family: 'Outfit', sans-serif; font-size: 1.05rem; font-weight: 500;
  letter-spacing: -0.015em; color: #fff; text-transform: none;
}
/* rounded-square chips rather than dots — a chip reads as a swatch of
   material, a dot reads as a radio button. Each carries a soft top-light
   sheen so the colour looks like vinyl instead of flat paint. */
body.home .dzb-sw {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(46px, 1fr));
  gap: 10px; margin-top: 1.1em;
  /* Top offers 11 colours and Base 13, so the grid gains a row when you switch
     and every control below it used to jump. Hold three rows either way. */
  min-height: calc(3 * 46px + 2 * 10px);
  align-content: start;
}
body.home .dzb-sw button {
  position: relative; width: 100%; aspect-ratio: 1; min-height: 46px;
  padding: 0; border: 0; cursor: pointer; border-radius: 12px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(0,0,0,0.28),
    0 2px 6px rgba(0,0,0,0.4);
  transition: transform 0.24s cubic-bezier(.22,.68,.32,1), box-shadow 0.24s;
}
/* the sheen: a soft diagonal highlight over the top-left corner */
body.home .dzb-sw button::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(150deg, rgba(255,255,255,0.26) 0%, rgba(255,255,255,0.05) 38%, rgba(0,0,0,0.14) 100%);
  pointer-events: none;
}
body.home .dzb-sw button:hover { transform: translateY(-2px); }
body.home .dzb-sw button:active { transform: translateY(0) scale(0.95); }
body.home .dzb-sw button.on {
  transform: translateY(-2px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.22),
    inset 0 0 0 1px rgba(0,0,0,0.28),
    0 0 0 2px #0e0d0d, 0 0 0 3.5px #fff,
    0 4px 12px rgba(0,0,0,0.5);
}
body.home .dzb-sw button:focus-visible { outline: 2px solid #4d7bff; outline-offset: 4px; }

/* the region dots match the chips — small rounded squares, not circles */
body.home .dzb-seg .dot {
  width: 16px; height: 16px; border-radius: 5px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.28), inset 0 0 0 1px rgba(0,0,0,0.3);
}

/* CTAs sit to the bottom of the stage; the hairline turns the gap that
   creates into a deliberate divider rather than a hole */
body.home .dzb-ctas {
  margin-top: auto; padding-top: 1.7em;
  border-top: 1px solid rgba(255,255,255,0.1);
  display: flex; flex-direction: column; gap: 0.7em;
}
body.home .dzb-ctas .btn { width: 100%; }
body.home .dzb-ctas .btn .ar { margin-left: 0.5em; }
body.home .dzb-note {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; line-height: 1.6; letter-spacing: 0.03em;
  color: rgba(255,255,255,0.42); text-align: center; margin-top: 0.3em;
}

.mz-sec { margin-top: 7em; }
.mz {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 10.5vw;
  grid-auto-flow: dense;
  gap: 4px;
}
.mz-t {
  margin: 0; position: relative; overflow: hidden; background: #1a1a1a;
  opacity: 0; transform: translateY(26px) scale(0.985);
  /* the poster is inline on the element, so a tile always shows a real
     frame — never a black box waiting on a download */
  background-size: cover; background-position: var(--fit, center); background-repeat: no-repeat;
}
.mz-t.s22 { grid-column: span 2; grid-row: span 2; }
.mz-t.s32 { grid-column: span 3; grid-row: span 2; }
.mz-t.s12 { grid-column: span 1; grid-row: span 2; }
.mz-t.on { opacity: 1; transform: none; transition: opacity 0.7s ease, transform 0.9s cubic-bezier(.22,.68,.32,1); }
.mz-t video {
  position: absolute; inset: -5% 0; width: 100%; height: 110%;
  object-fit: cover; object-position: var(--fit, center); display: block;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.8s cubic-bezier(.22,.68,.32,1);
}
/* set by JS on the video's first 'playing' event */
.mz-t.rolling video { opacity: 1; }
.mz-t:hover video { transform: scale(1.05); }

/* ── TILE CAPTIONS ─────────────────────────────────────────
   The facts that used to sit in two standalone sections now ride
   the footage that proves them. Only tiles without a large wordmark
   carry text, and the anchor is chosen per shot so the type never
   lands on the subject.
   ────────────────────────────────────────────────────────── */
.mz-cap {
  position: absolute; left: 0; right: 0; z-index: 2;
  padding: 1.15em 1.3em; margin: 0;
  display: flex; flex-direction: column; gap: 0.34em;
  pointer-events: none;
}
.mz-t.cap-bot .mz-cap { bottom: 0; }
.mz-t.cap-top .mz-cap { top: 0; }
/* the scrim only exists where the type does, and only as far as it needs
   to reach — the footage stays the loudest thing in the tile */
.mz-t.has-cap::after {
  content: ""; position: absolute; left: 0; right: 0; height: 62%; z-index: 1;
  pointer-events: none;
}
.mz-t.cap-bot::after {
  bottom: 0;
  background: linear-gradient(to top, rgba(8,8,10,0.82) 0%, rgba(8,8,10,0.42) 44%, rgba(8,8,10,0) 100%);
}
.mz-t.cap-top::after {
  top: 0;
  background: linear-gradient(to bottom, rgba(8,8,10,0.82) 0%, rgba(8,8,10,0.42) 44%, rgba(8,8,10,0) 100%);
}
/* same treatment as the hero headline — Outfit 500, hero tracking and
   line-height — just scaled to the tile it sits in */
.mz-cap-h {
  font-family: 'Outfit', -apple-system, 'Helvetica Neue', Arial, sans-serif;
  font-weight: 500; line-height: 0.96; letter-spacing: -0.028em;
  color: #fff; text-wrap: balance;
}
.mz-cap-s {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  line-height: 1.45; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(255,255,255,0.76);
}
/* type scales to the tile it sits in — a 1-col tile can't carry 3-col type */
.mz-t.s12 .mz-cap-h { font-size: clamp(1.25rem, 1.75vw, 1.75rem); }
.mz-t.s12 .mz-cap-s { font-size: 10px; }
.mz-t.s22 .mz-cap-h { font-size: clamp(1.875rem, 2.7vw, 2.7rem); }
.mz-t.s22 .mz-cap-s { font-size: 11px; }
.mz-t.s32 .mz-cap-h { font-size: clamp(2.25rem, 3.5vw, 3.5rem); }
.mz-t.s32 .mz-cap-s { font-size: 11.5px; }




/* ══ FAQ ═══════════════════════════════════════════════════ */
.g-faq { margin-top: 5em; border-top: 1px solid var(--pline); }
.g-faq details { border-bottom: 1px solid var(--pline); }
.g-faq summary {
  list-style: none; cursor: pointer;
  font-size: clamp(1.5rem, 2.2vw, 2.25rem);
  font-weight: 500; letter-spacing: -0.024em; line-height: 1.15;
  color: var(--pink); padding: 0.85em 2.4em; position: relative;
  min-height: 44px; display: flex; align-items: center; justify-content: center;
  text-align: center;
}
.g-faq summary::-webkit-details-marker { display: none; }
.g-faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-weight: 400; color: var(--pmute);
}
.g-faq details[open] summary::after { content: "\2013"; }
.g-faq details p {
  font-size: clamp(1.0625rem, 1.5vw, 1.5rem); line-height: 1.5;
  color: rgba(255,255,255,0.72); max-width: 52ch;
  padding: 0 0 1.6em; margin: 0 auto; letter-spacing: -0.01em;
  text-align: center;
}

/* ══ CLOSING ══════════════════════════════════════════════
   Full-bleed film, one line, one action — the pattern every
   awarded sports site closes on (Radian, Podium, Balmoral).
   The clip cycles the pit through the colours, so the close
   demonstrates the builder above it.
   ══════════════════════════════════════════════════════════ */
.cta {
  position: relative; overflow: hidden;
  min-height: 82svh; display: flex; justify-content: center;
  /* copy sits in the upper third — dead centre put it on top of the pit and
     read as low on the frame */
  align-items: flex-start;
  padding: 17svh var(--cush) 8em;
  background: #0a0a0c;
}
.cta-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%; z-index: 0;
}
/* soft centre pool + top/bottom falloff. Light enough that the colour
   change still reads — that cycle is the argument of the whole page. */
.cta::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    radial-gradient(ellipse 58% 46% at 50% 34%, rgba(6,6,9,0.66) 0%, rgba(6,6,9,0.24) 66%, rgba(6,6,9,0) 100%),
    linear-gradient(180deg, rgba(10,10,12,0.82) 0%, rgba(10,10,12,0) 26%, rgba(10,10,12,0) 72%, rgba(10,10,12,0.88) 100%);
}
.cta-in { position: relative; z-index: 2; text-align: center; width: 100%; }
/* ── the rotating line ──────────────────────────────────────
   Every phrase is stacked in the same box and masked. Height is
   reserved for two lines so nothing under it ever moves.
   ─────────────────────────────────────────────────────────── */
.cta-rot {
  position: relative; margin: 0 auto; max-width: 16ch;
  min-height: calc(2 * 0.94em);
  font-size: clamp(2.75rem, 7.6vw, 7.6rem); line-height: 0.94;
  font-weight: 500; letter-spacing: -0.032em; color: #fff;
}
.cta-line {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* no overflow mask here — the phrases rack in and out of focus, and a
     clip would cut the blur off at the edges */
  visibility: hidden;
}
.cta-line.is-on { visibility: visible; }
.cta-line > i {
  display: block; font-style: normal; text-align: center;
  text-wrap: balance; will-change: opacity, filter, transform;
  text-shadow: 0 2px 40px rgba(0,0,0,0.55);
}

/* ── the button ────────────────────────────────────────────
   Blue-on-blue turned to mush over this footage. White glass
   over moving colour is what actually pops: a bright translucent
   pill with a crisp rim, a slow blue bloom behind it, and a fill
   to solid white on hover.
   ────────────────────────────────────────────────────────── */
.cta-act { position: relative; display: inline-block; margin-top: 1.9em; }
/* the bloom lives behind the pill and breathes */
.cta-act::before {
  content: ""; position: absolute; inset: -30% -12%;
  background: radial-gradient(ellipse at center, rgba(77,123,255,0.55) 0%, rgba(77,123,255,0) 70%);
  filter: blur(26px); z-index: 0; pointer-events: none;
  animation: ctaGlow 4.5s ease-in-out infinite;
}
@keyframes ctaGlow {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50%      { opacity: 1;    transform: scale(1.04); }
}
.cta-btn {
  position: relative; z-index: 1;
  display: inline-flex; align-items: center; gap: 0.7em;
  font-size: clamp(1.0625rem, 1.35vw, 1.35rem); font-weight: 500;
  letter-spacing: -0.012em;
  padding: 1.1em 2.2em; min-height: 62px; border-radius: 5px;
  color: #fff;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(26px) saturate(1.9);
  -webkit-backdrop-filter: blur(26px) saturate(1.9);
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.5),
    inset 0 1px 0 rgba(255,255,255,0.6),
    0 18px 50px rgba(0,0,0,0.45);
  transition: background 0.32s cubic-bezier(.22,.68,.32,1),
              color 0.32s, box-shadow 0.32s, transform 0.32s;
}
.cta-btn:hover {
  opacity: 1; transform: translateY(-2px);
  background: #fff; color: #0a0a0c;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,0.9),
    0 22px 60px rgba(0,0,0,0.5),
    0 0 0 6px rgba(255,255,255,0.09);
}
/* rounded square, echoing the colour chips — the site has no circles */
.cta-btn .ar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.75em; height: 1.75em; border-radius: 7px;
  background: rgba(255,255,255,0.16);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.34);
  transition: transform 0.32s cubic-bezier(.22,.68,.32,1), background 0.32s, box-shadow 0.32s;
}
.cta-btn:hover .ar {
  transform: translateX(4px);
  background: #4d7bff; box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
  color: #fff;
}
.cta-btn:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

/* ══ FOOTER ════════════════════════════════════════════════ */
.foot {
  background: var(--paper); border-top: 1px solid var(--pline);
  padding: 5em var(--cush) 2.6em;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
.foot-mark { display: block; margin-bottom: 2.6em; }
.foot-mark img { width: 23em; max-width: 78vw; height: auto; display: block; }
.foot-links {
  display: flex; justify-content: center; gap: 2em; flex-wrap: wrap;
  font-size: clamp(0.9375rem, 1.15vw, 1.15rem);
}
.foot a { color: var(--pmute); transition: color 0.2s; }
.foot a:hover { color: var(--pink); }
.foot-ph {
  margin-top: 2em; color: var(--pink) !important;
  font-size: clamp(1.25rem, 2.1vw, 2.1rem); font-weight: 500; letter-spacing: -0.024em;
}
.foot-fine {
  margin-top: 3.2em; padding-top: 1.6em; width: 100%;
  border-top: 1px solid rgba(255,255,255,0.08);
  display: flex; justify-content: center; gap: 1.6em; flex-wrap: wrap;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* ══ BURGER + MENU — the button is fixed and always reachable.
   It is a button, not a bar. Two lines, hard right. ══════════ */
body.home .dz-nav-toggle { display: none !important; }
/* the burger is a phone control — desktop already has the text links,
   and two ways to the same menu is one too many */
@media (min-width: 901px) { .bg, .menu { display: none !important; } }

.bg {
  position: fixed; top: var(--cush); right: var(--cush); z-index: 200;
  display: flex; flex-direction: column; justify-content: center; gap: 7px;
  width: 44px; height: 44px; padding: 0 4px;
  background: none; border: 0; cursor: pointer;
}
.bg span {
  display: block; width: 100%; height: 2px; background: #fff; border-radius: 2px;
  transition: transform 0.4s cubic-bezier(.22,.68,.32,1), opacity 0.3s;
  transform-origin: center;
}
html.menu-open .bg span:first-child { transform: translateY(4.5px) rotate(45deg); }
html.menu-open .bg span:last-child  { transform: translateY(-4.5px) rotate(-45deg); }

.menu {
  position: fixed; inset: 0; z-index: 190;
  background: #0e0d0d;
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 var(--cush);
  opacity: 0; pointer-events: none;
  transition: opacity 0.45s ease;
}
html.menu-open .menu { opacity: 1; pointer-events: auto; }
html.menu-open, html.menu-open body { overflow: hidden; }
.menu-in { display: flex; flex-direction: column; gap: 0.1em; }
.menu-in a {
  font-size: 5.4em; font-weight: 500; line-height: 1.08;
  letter-spacing: -0.03em; color: #fff;
  opacity: 0; transform: translateY(24px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(.22,.68,.32,1), color 0.2s;
}
.menu-in a:hover { color: #4d7bff; }
html.menu-open .menu-in a { opacity: 1; transform: none; }
html.menu-open .menu-in a:nth-child(1) { transition-delay: 0.10s; }
html.menu-open .menu-in a:nth-child(2) { transition-delay: 0.16s; }
html.menu-open .menu-in a:nth-child(3) { transition-delay: 0.22s; }
html.menu-open .menu-in a:nth-child(4) { transition-delay: 0.28s; }
html.menu-open .menu-in a:nth-child(5) { transition-delay: 0.34s; color: #4d7bff; }
.menu-ph {
  margin-top: 2.4em; font-size: 1.6em; color: rgba(255,255,255,0.6);
  opacity: 0; transition: opacity 0.5s ease 0.42s;
}
html.menu-open .menu-ph { opacity: 1; }

/* ══ NAV — floats over the film and scrolls away with it.
   There is NO sticky state and NO bar background. Never add one. ══ */
body.home .dz-nav {
  position: absolute !important; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent !important; border: none !important;
  backdrop-filter: none !important; box-shadow: none !important; padding: 0;
}
body.home .dz-nav-in {
  max-width: none; padding: var(--cush) 6em 0.6em var(--cush); margin: 0;
  display: flex; align-items: center; justify-content: flex-start;
}
body.home .dz-nav-logo img { width: 11em !important; height: auto !important; max-height: none !important; }
/* no separators. Commas are day1-run's tic; spacing does the same job and
   reads cleaner. Each link gets a rule that draws in from the left on hover. */
body.home .dz-nav-links {
  display: flex; margin-left: 4.6em; margin-right: 0;
  align-items: baseline; gap: clamp(1.5rem, 2.4vw, 2.4rem);
}
body.home .dz-nav-links a { position: relative; }
body.home .dz-nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -0.35em; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.38s cubic-bezier(.22,.68,.32,1);
}
body.home .dz-nav-links a:hover::after { transform: scaleX(1); }
body.home .dz-nav a {
  font-family: 'Outfit', sans-serif; font-weight: 500; font-size: 1.2em;
  letter-spacing: normal; text-transform: none; color: #fff;
  background: none; border: none; padding: 0;
}
body.home .dz-nav a:hover { opacity: 0.7; }
body.home .dz-nav-toggle span { background: #fff; }

/* ══ CENTRED AXIS ══════════════════════════════════════════
   Everything below the hero runs on a centre axis. The hero keeps its
   day1 asymmetry; from the mission section down, copy is centred and
   width-limited so lines break on measure instead of hugging the left
   rail. ══════════════════════════════════════════════════════ */
.g-sec, .show-top { text-align: center; }

.g-sec .lede, .show-top .lede {
  max-width: 42ch; margin-left: auto; margin-right: auto;
}
.show-top { max-width: 100%; }
.show-top .display { margin-left: auto; margin-right: auto; }

/* the board stays a left-read sheet — centring a scoreboard breaks the
   column scan. Only the section head above it sits on the axis. */

/* build-quality overlay: copy on the axis, spec columns still a row */


@media (max-width: 1100px) { .mz { grid-auto-rows: 13vw; } }

/* below ~980 the panel column squeezes under its 280px min and the stage
   collapses — stack before that happens rather than after */
@media (max-width: 980px) {
  body.home .dzb { grid-template-columns: 1fr; gap: 1.8em; }
  body.home .dzb-panel { border-left: 0; padding: 0; }
  .show-top { max-width: none; }
  /* dz.css pins the stage (sticky, z-index 40, fixed height) under 1024px so it
     stays visible while you pick colours on the product pages. That assumes a
     fixed nav bar to sit under — this page has none — and the z-index laid the
     stage over the price. Unpin it; the controls sit right beneath it here. */
  body.home .dzb-stage {
    position: relative; top: auto; z-index: auto;
    height: auto; min-height: 0; max-height: none;
    aspect-ratio: 4 / 3; box-shadow: none;
  }
}


@media (max-width: 760px) {
  body.home { --fs: clamp(9px, 2.35vw, 12px); }
  body.home .dz-nav-links { display: none; }
  body.home .dz-nav-logo img { width: 15em !important; }
  .bg { width: 44px; height: 44px; gap: 6px; }
  .menu-in a { font-size: 3.6em; }
  .menu-ph { font-size: 1.5em; margin-top: 1.8em; }

  /* ── HERO: two lines hard right, big. Caption low, both lines equal. ── */
  .hero { min-height: 560px; }
  .hero-head { top: 17%; right: var(--cush); left: var(--cush); text-align: right; }
  .hero-cap .bod { line-height: 1.35; }
  .lede, .show-x { max-width: none; }
  .hero-head .ln { padding-top: 0.08em; margin-top: -0.08em; }

  .hero-cap { left: 0; right: 0; bottom: 15%; text-align: center; }
  .hero-cap .bod + .bod { color: #fff; margin-top: 0.1em; }

  .hero-bar {
    left: var(--cush); right: var(--cush); bottom: var(--cush);
    width: auto; max-width: none; gap: 0.6em; padding: 0.6em;
  }
  .hero-bar .chip { white-space: nowrap; }
  .hero-bar .val { padding: 0 0.3em 0 0.4em; font-size: 1.15em; white-space: nowrap; }
  .hero-bar .btn { white-space: nowrap; font-size: 1.05rem; min-height: 44px; padding: 0.6em 1em; }
  .btn.pop { min-height: 48px; }
  .foot-links a, .foot-ph { display: inline-block; padding: 0.5em 0; }

  #intro .ph { font-size: 2.7em; }
  #intro img.ph { width: 9em; }

  /* ── TYPE ── */

  /* ── SECTIONS: tight, no dead screens ── */
  .g-sec { padding: 5.5em var(--cush) 0; }
  .g-sec .eyebrow { margin-bottom: 0.5em; }
  .g-sec .display + .lede { margin-top: 1.8em; }


  /* ── BUILDER: stacks, stage stays a framed object not a full-bleed band ── */
  .show { padding: 4em 0 4.5em; margin-top: 3.5em; }
  .show-in { padding: 0 var(--cush); }
  .show-top { max-width: none; margin-bottom: 3em; }
  .show-top .lede { max-width: none; }
  .bx { padding: 1.4em 1.1em 1.6em; border-radius: 6px; }
  .bx-tabs { display: grid; grid-auto-flow: column; width: 100%; }
  .bx-tab { padding: 0 0.8em; min-height: 50px; }
  .bx-sub { margin: 0.9em auto 1.5em; max-width: none; }
  /* 6 swatches per row at this width too, so the same three-row reserve holds */
  body.home .dzb-sw { min-height: calc(3 * 44px + 2 * 9px); }
  body.home .dzb { grid-template-columns: 1fr; gap: 1.6em; }
  body.home .dzb-stage { aspect-ratio: 4 / 3; padding: 1.1em; }
  body.home .dzb-panel { border-left: 0; padding: 0; gap: 1.6em; }
  /* dz.css reorders the panel on phones for the product pages, whose panel
     has a kicker/name block and a spec block this one doesn't. Those nth-of-type
     rules leave the swatch block unordered, so it floats to the top. Reset to
     DOM order — price, section, swatches, CTAs. */
  body.home .dzb-panel > * { order: 0; }
  body.home .dzb-sw { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 9px; }
  body.home .dzb-sw button { min-height: 44px; }
  .show .btn.pop { width: 100%; }
  .btn.pop { font-size: 1.35em; padding: 0.9em 1.2em; }


  /* ── MOSAIC (chrisfoy: 2-wide squares, full-width ultrawides) ── */
  .mz-sec { padding-top: 4.5em; }
  .mz-sec { margin-top: 3.5em; }
  .mz { grid-template-columns: repeat(2, 1fr); grid-auto-rows: calc(50vw - 2px); gap: 3px; }
  .mz-t.s22, .mz-t.s12 { grid-column: span 1; grid-row: span 1; }
  .mz-t.s32 { grid-column: span 2; grid-row: span 1; }
  /* the sunset tile runs too long on a phone — dropped here only */
  .mz-t.no-phone { display: none; }

  /* every tile is a ~50vw square here, so one caption size fits all —
     set to stay legible rather than proportional */
  .mz-cap { padding: 0.85em 0.9em; gap: 0.3em; }
  .mz-t.s12 .mz-cap-h,
  .mz-t.s22 .mz-cap-h { font-size: 1.1875rem; }
  .mz-t.s32 .mz-cap-h { font-size: 1.625rem; }
  .mz-t.s12 .mz-cap-s,
  .mz-t.s22 .mz-cap-s,
  .mz-t.s32 .mz-cap-s { font-size: 9.5px; letter-spacing: 0.04em; }
  .mz-t.has-cap::after { height: 68%; }

  /* ── FAQ ── */
  .g-faq { margin-top: 2.6em; }

  /* ── CLOSE + FOOTER ── */

  /* the film is the point on a phone too — give it real height, and keep the
     pill a pill rather than stretching it edge to edge */
  .cta { min-height: 88svh; padding: 13svh var(--cush) 5em; }
  .cta-rot { max-width: 11ch; font-size: clamp(2.5rem, 13vw, 3.75rem); min-height: calc(3 * 0.94em); }
  .cta-act { margin-top: 1.5em; display: block; }
  .cta-btn { width: 100%; max-width: 22em; justify-content: center; min-height: 60px; }

  .foot { padding: 3.4em var(--cush) 2em; }
  .foot-mark { margin-bottom: 2em; }
  .foot-links { gap: 1.2em 1.6em; }
}
@media (prefers-reduced-motion: reduce) {
  .rv { opacity: 1; transform: none; }
  #intro { display: none; }
  .hero video { display: none; }
}