/* =====================================================================
   RetroDeck — marketing site
   Design language: Swiss editorial product board (Helvetica-tight grotesque,
   alternating black / paper panels, captioned product shots, spec tables,
   giant display numerals). STRICT GRAYSCALE — zero chroma anywhere.
   Type: Archivo (display + body) + Martian Mono (spec readouts / captions).
   ===================================================================== */

/* ---------- Tokens ---------- */
:root {
  /* Greyscale only. Chroma is 0 on every value. */
  --black:      oklch(0.15 0 0);   /* panel black */
  --near-black: oklch(0.19 0 0);
  --ink:        oklch(0.20 0 0);   /* primary text on paper */
  --ink-700:    oklch(0.34 0 0);
  --ink-600:    oklch(0.44 0 0);   /* body text on paper (AA) */
  --ink-500:    oklch(0.46 0 0);   /* captions / meta on paper (AA) */

  --paper:      oklch(0.965 0 0);  /* dominant light surface */
  --paper-2:    oklch(0.925 0 0);  /* alt light surface */
  --paper-3:    oklch(0.885 0 0);  /* tiles / insets */

  --snow:       oklch(0.975 0 0);  /* primary text on black */
  --snow-2:     oklch(0.76 0 0);   /* body text on black (AA) */
  --snow-3:     oklch(0.66 0 0);   /* captions on black */

  /* Brushed metal (the wheel / device) — neutral grays */
  --alu-hi: oklch(0.96 0 0);
  --alu-1:  oklch(0.88 0 0);
  --alu-2:  oklch(0.78 0 0);
  --alu-3:  oklch(0.66 0 0);
  --alu-4:  oklch(0.52 0 0);

  /* Hairlines */
  --line:    oklch(0.20 0 0 / 0.16);
  --line-2:  oklch(0.20 0 0 / 0.09);
  --line-d:  oklch(1 0 0 / 0.16);
  --line-d2: oklch(1 0 0 / 0.08);

  --focus: var(--ink);

  /* Fluid type scale — large, editorial, ratio >= 1.25 */
  --step--2: clamp(0.7rem, 0.67rem + 0.13vw, 0.78rem);
  --step--1: clamp(0.82rem, 0.79rem + 0.16vw, 0.93rem);
  --step-0:  clamp(1rem, 0.96rem + 0.2vw, 1.1rem);
  --step-1:  clamp(1.2rem, 1.1rem + 0.45vw, 1.5rem);
  --step-2:  clamp(1.55rem, 1.35rem + 0.9vw, 2.15rem);
  --step-3:  clamp(2.1rem, 1.6rem + 2.1vw, 3.4rem);
  --step-4:  clamp(2.7rem, 1.7rem + 4.3vw, 5.6rem);
  --step-5:  clamp(3.4rem, 1.9rem + 6.6vw, 8rem);
  --step-6:  clamp(4.6rem, 1.5rem + 13vw, 14rem);

  /* Spacing */
  --space-2xs: 0.5rem;
  --space-xs: 0.875rem;
  --space-s: 1.25rem;
  --space-m: 2rem;
  --space-l: clamp(3rem, 2rem + 4vw, 5rem);
  --space-xl: clamp(4.5rem, 3rem + 7vw, 9rem);
  --space-2xl: clamp(6rem, 4rem + 9vw, 12.5rem);

  --measure: 64ch;

  /* Sharp editorial edges — minimal rounding */
  --r-sm: 2px;
  --r: 4px;
  --r-lg: 8px;
  --shell-max: 1280px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);

  --font-sans: "Archivo", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Martian Mono", ui-monospace, "SFMono-Regular", monospace;

  color-scheme: light;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5rem; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}
body {
  font-family: var(--font-sans);
  font-size: var(--step-0);
  line-height: 1.6;
  font-weight: 400;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-synthesis: none;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; cursor: pointer; background: none; border: none; }
ul, ol { list-style: none; padding: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
::selection { background: oklch(0.2 0 0 / 0.85); color: var(--paper); }

/* ---------- Layout primitives ---------- */
.shell { width: 100%; max-width: var(--shell-max); margin-inline: auto; padding-inline: clamp(1.25rem, 0.5rem + 3.5vw, 3.5rem); }

section { position: relative; }
.band { padding-block: var(--space-2xl); }
.band--paper { background: var(--paper); color: var(--ink); }
.band--paper-2 { background: var(--paper-2); color: var(--ink); }
.band--black { background: var(--black); color: var(--snow); --focus: var(--snow); }
.band--black ::selection { background: oklch(0.97 0 0 / 0.85); color: var(--black); }

/* Hairline divider between same-tone bands keeps the artboard rhythm */
.band--paper + .band--paper, .band--paper-2 + .band--paper-2 { border-top: 1px solid var(--line-2); }

/* ---------- Meta line (mono spec-sheet labels, auto-set per use) ---------- */
.meta-line {
  font-family: var(--font-mono);
  font-size: var(--step--2);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-500);
  display: flex; align-items: center; gap: 0.85em;
}
.band--black .meta-line { color: var(--snow-3); }
.meta-line::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.28; max-width: 5rem; }
.meta-line--center { justify-content: center; }
.meta-line--center::before { content: ""; flex: 1; height: 1px; background: currentColor; opacity: 0.28; max-width: 5rem; }

/* ---------- Headings ---------- */
h1, h2, h3, h4 { font-weight: 800; line-height: 1; letter-spacing: -0.03em; }
.display {
  font-weight: 900; letter-spacing: -0.045em; line-height: 0.9;
  font-size: var(--step-5); text-wrap: balance;
}
.statement {
  font-weight: 900; letter-spacing: -0.04em; line-height: 0.92;
  font-size: var(--step-4); text-wrap: balance;
}
.h-2 { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.03em; line-height: 0.98; }
.h-3 { font-size: var(--step-2); font-weight: 800; letter-spacing: -0.025em; }
.lede { font-size: var(--step-1); line-height: 1.45; font-weight: 400; color: var(--ink-600); }
.band--black .lede { color: var(--snow-2); }
.measure { max-width: var(--measure); }
.balance { text-wrap: balance; }

/* Registered/tm flourish on the wordmark */
.tm { font-size: 0.32em; font-weight: 700; vertical-align: super; letter-spacing: 0; }

/* Section heads */
.band__head { max-width: 60rem; margin-bottom: var(--space-l); }
.band__head .statement, .band__head .h-2 { margin-top: 1.1rem; }
.band__head .band__sub { margin-top: 1.2rem; max-width: 46ch; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 0.6em;
  padding: 0.85em 1.5em;
  border-radius: 999px;
  font-weight: 600; font-size: var(--step--1); letter-spacing: 0.01em;
  border: 1px solid transparent;
  transition: transform 0.4s var(--ease-out-expo), background 0.3s, color 0.3s, border-color 0.3s;
  will-change: transform;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn--solid { background: var(--ink); color: var(--paper); }
.btn--solid:hover { background: var(--black); }
.band--black .btn--solid { background: var(--snow); color: var(--black); }
.btn--ghost { border-color: var(--line); color: inherit; }
.btn--ghost:hover { border-color: var(--ink); background: oklch(0.2 0 0 / 0.04); }
.band--black .btn--ghost { border-color: var(--line-d); }
.band--black .btn--ghost:hover { border-color: var(--snow); background: oklch(1 0 0 / 0.06); }

/* App Store CTA — Apple-logo-free, monochrome */
.appstore {
  display: inline-flex; align-items: center; gap: 0.8em;
  padding: 0.68em 1.4em 0.7em;
  border-radius: var(--r-lg);
  background: var(--ink); color: var(--paper);
  transition: transform 0.4s var(--ease-out-expo), background 0.3s;
}
.appstore:hover { transform: translateY(-2px); background: var(--black); }
.band--black .appstore { background: var(--snow); color: var(--black); }
.appstore__glyph { width: 26px; height: 26px; flex: none; display: grid; place-items: center; }
.appstore__glyph svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.appstore__txt { display: flex; flex-direction: column; line-height: 1.15; text-align: left; }
.appstore__txt small { font-size: 0.6rem; letter-spacing: 0.06em; opacity: 0.72; text-transform: uppercase; font-family: var(--font-mono); }
.appstore__txt strong { font-size: 1.02rem; font-weight: 700; letter-spacing: -0.01em; }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-xs); }
.platform-line {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em;
  color: var(--ink-500); display: inline-flex; align-items: center; gap: 0.6em; text-transform: uppercase;
}
.band--black .platform-line { color: var(--snow-3); }
.platform-line .dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; }

/* Captions under product shots (Fig. 0X) */
.shot-caption {
  font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.06em;
  color: var(--ink-500); margin-top: 1.1rem; text-align: center; max-width: 32ch;
}
.band--black .shot-caption { color: var(--snow-3); }

/* =====================================================================
   NAV
   ===================================================================== */
.nav {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-m);
  padding: 0.7rem clamp(1.25rem, 0.5rem + 3.5vw, 3.5rem);
  transition: background 0.4s var(--ease-out-quart), border-color 0.4s, backdrop-filter 0.4s;
  border-bottom: 1px solid transparent;
}
.nav[data-scrolled="true"] {
  background: oklch(0.965 0 0 / 0.78);
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  border-bottom-color: var(--line-2);
}
.brand { display: inline-flex; align-items: center; gap: 0.55em; font-weight: 800; letter-spacing: -0.03em; font-size: 1.18rem; }
.brand__wheel {
  width: 26px; height: 26px; flex: none; border-radius: 50%; position: relative;
  background: radial-gradient(circle at 42% 35%, var(--alu-hi), var(--alu-2) 62%, var(--alu-4));
  box-shadow: 0 0 0 1px oklch(0.2 0 0 / 0.25);
}
.brand__wheel::after { content: ""; position: absolute; inset: 36%; border-radius: 50%; background: var(--ink); }
.brand .tm { font-size: 0.42em; vertical-align: super; opacity: 0.55; }
.nav__links { display: flex; align-items: center; gap: clamp(1rem, 0.4rem + 1.4vw, 2.1rem); }
.nav__links a {
  position: relative; font-family: var(--font-mono); font-size: var(--step--2);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500);
  transition: color 0.25s; padding-block: 0.3em;
}
.nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: var(--ink); transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease-out-quart);
}
.nav__links a:hover { color: var(--ink); }
.nav__links a:hover::after, .nav__links a[aria-current="true"]::after { transform: scaleX(1); }
.nav__links a[aria-current="true"] { color: var(--ink); }
.nav__cta { display: flex; align-items: center; gap: var(--space-xs); }
.nav__toggle { display: none; }

@media (max-width: 900px) {
  .nav__links, .nav__cta .btn { display: none; }
  .nav__toggle {
    display: grid; place-items: center; width: 44px; height: 44px;
    border-radius: var(--r); border: 1px solid var(--line);
  }
  .nav__toggle span { display: block; width: 18px; height: 1.5px; background: var(--ink); position: relative; }
  .nav__toggle span::before, .nav__toggle span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink); transition: transform 0.3s var(--ease-out-quart), top 0.3s; }
  .nav__toggle span::before { top: -6px; }
  .nav__toggle span::after { top: 6px; }
  body[data-menu="open"] .nav__toggle span { background: transparent; }
  body[data-menu="open"] .nav__toggle span::before { top: 0; transform: rotate(45deg); }
  body[data-menu="open"] .nav__toggle span::after { top: 0; transform: rotate(-45deg); }

  .mobile-menu {
    position: fixed; inset: 0; z-index: 90;
    background: var(--paper);
    display: flex; flex-direction: column; justify-content: center; gap: 1.2rem;
    padding: 2rem clamp(1.5rem, 6vw, 3rem);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity 0.4s var(--ease-out-quart), transform 0.4s var(--ease-out-quart), visibility 0.4s;
  }
  body[data-menu="open"] .mobile-menu { opacity: 1; visibility: visible; transform: none; }
  .mobile-menu a { font-size: var(--step-3); font-weight: 800; letter-spacing: -0.03em; display: flex; align-items: baseline; gap: 0.6em; }
  .mobile-menu a span { color: var(--ink-500); font-family: var(--font-mono); font-size: 0.85rem; }
  .mobile-menu .btn { margin-top: 1rem; align-self: flex-start; }
}
@media (min-width: 901px) { .mobile-menu { display: none; } }

/* =====================================================================
   HERO
   ===================================================================== */
.hero {
  position: relative; overflow: hidden;
  padding-top: clamp(7rem, 5rem + 8vw, 11rem);
  padding-bottom: var(--space-xl);
  background: var(--paper);
}
.hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.04fr) minmax(0, 0.96fr);
  gap: clamp(2rem, 1rem + 4vw, 5rem);
  align-items: center;
}
.hero__copy { position: relative; z-index: 2; }
.hero__title {
  font-size: var(--step-5); font-weight: 900; letter-spacing: -0.045em; line-height: 0.9;
  margin: var(--space-m) 0 var(--space-s);
}
.hero__title em { font-style: normal; -webkit-text-stroke: 1.5px var(--ink); color: transparent; }
.hero__lede { max-width: 44ch; margin-bottom: var(--space-l); }
.hero__specs { display: flex; flex-wrap: wrap; gap: 0.6em 1.6em; margin: var(--space-m) 0; }
.hero__specs li { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.04em; color: var(--ink-500); display: flex; align-items: center; gap: 0.5em; }
.hero__specs li::before { content: ""; width: 4px; height: 4px; background: var(--ink); }
.hero__disclaimer { font-size: var(--step--2); color: var(--ink-500); max-width: 54ch; line-height: 1.55; margin-top: var(--space-s); }

.hero__stage { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; }
.hero__stage::before {
  content: ""; position: absolute; inset: -8% -4% -4%;
  background: radial-gradient(60% 55% at 50% 42%, var(--paper-2), transparent 72%);
  z-index: 0;
}
.hero__stage::after {
  content: ""; position: absolute; bottom: 1%; left: 50%; transform: translateX(-50%);
  width: 58%; height: 40px; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at center, oklch(0 0 0 / 0.42), transparent 72%);
  filter: blur(13px);
}
.hero__stage .device, .hero__stage .shot-caption { position: relative; z-index: 1; }

/* =====================================================================
   DEVICE  (the rendered click-wheel hardware) — grayscale
   ===================================================================== */
.device {
  position: relative; z-index: 2;
  width: min(330px, 78vw);
  aspect-ratio: 330 / 560;
  border-radius: 30px;
  padding: 18px 18px 22px;
  display: flex; flex-direction: column; align-items: center;
  background: linear-gradient(155deg, oklch(0.99 0 0), oklch(0.9 0 0) 44%, oklch(0.82 0 0));
  box-shadow:
    0 1px 1px oklch(1 0 0 / 0.9) inset,
    0 0 0 1px oklch(0.2 0 0 / 0.18),
    0 40px 80px -34px oklch(0 0 0 / 0.6),
    0 14px 30px -20px oklch(0 0 0 / 0.55);
}
.device--graphite {
  background: linear-gradient(155deg, oklch(0.34 0 0), oklch(0.2 0 0) 46%, oklch(0.14 0 0));
  box-shadow:
    0 1px 1px oklch(1 0 0 / 0.14) inset,
    0 0 0 1px oklch(0 0 0 / 0.5),
    0 40px 80px -34px oklch(0 0 0 / 0.7);
}
.device__bezel {
  width: 100%; aspect-ratio: 4 / 3;
  border-radius: 6px; padding: 9px;
  background: linear-gradient(160deg, oklch(0.1 0 0), oklch(0.17 0 0));
  box-shadow: 0 2px 5px oklch(0 0 0 / 0.5) inset, 0 1px 0 oklch(1 0 0 / 0.5);
  margin-bottom: auto;
}
.screen {
  width: 100%; height: 100%;
  border-radius: 2px; overflow: hidden; position: relative;
  background: oklch(0.99 0 0);
  color: oklch(0.14 0 0);
  font-size: 11px; line-height: 1.3;
}

/* iPod screen internals — monochrome */
.ipod-titlebar {
  height: 21px; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; letter-spacing: -0.01em;
  color: oklch(0.16 0 0);
  background: linear-gradient(180deg, oklch(0.95 0 0), oklch(0.8 0 0));
  border-bottom: 1px solid oklch(0.6 0 0);
  position: relative;
}
.ipod-titlebar .batt {
  position: absolute; right: 5px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 9px; border: 1px solid oklch(0.3 0 0); border-radius: 1.5px;
}
.ipod-titlebar .batt::after { content: ""; position: absolute; inset: 1px; width: 70%; background: oklch(0.3 0 0); border-radius: 1px; }
.ipod-titlebar .batt::before { content: ""; position: absolute; right: -3px; top: 2px; width: 2px; height: 4px; background: oklch(0.3 0 0); border-radius: 0 1px 1px 0; }
.ipod-play { position: absolute; left: 6px; top: 50%; transform: translateY(-50%); font-size: 9px; }

.ipod-menu { display: flex; flex-direction: column; }
.ipod-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3.5px 7px; font-size: 11px; font-weight: 500;
  border-bottom: 1px solid oklch(0.9 0 0);
  color: oklch(0.14 0 0);
  position: relative; z-index: 1;
}
.ipod-row .chev { color: oklch(0.55 0 0); font-size: 10px; }
.ipod-row[data-on="true"] {
  color: oklch(0.99 0 0);
  background: linear-gradient(180deg, oklch(0.32 0 0), oklch(0.2 0 0));
  border-bottom-color: transparent;
}
.ipod-row[data-on="true"] .chev { color: oklch(0.99 0 0 / 0.8); }
.ipod-split { display: grid; grid-template-columns: 1.25fr 1fr; height: 100%; }
.ipod-split__preview { display: grid; place-items: center; border-left: 1px solid oklch(0.85 0 0); background: oklch(0.97 0 0); }

/* Now Playing */
.np { display: flex; flex-direction: column; height: 100%; }
.np__counter { text-align: center; font-size: 9px; color: oklch(0.46 0 0); padding-top: 4px; }
.np__main { display: flex; gap: 8px; padding: 5px 8px; align-items: center; }
.np__art { width: 58px; height: 58px; flex: none; border-radius: 2px; box-shadow: 0 1px 3px oklch(0 0 0 / 0.3); }
.np__meta { min-width: 0; }
.np__meta .t { font-weight: 700; font-size: 11px; line-height: 1.15; }
.np__meta .a { font-size: 9.5px; color: oklch(0.44 0 0); }
.np__bar-wrap { margin-top: auto; padding: 0 8px 7px; }
.np__times { display: flex; justify-content: space-between; font-size: 8px; color: oklch(0.46 0 0); margin-top: 2px; }
.np__bar { height: 5px; border-radius: 3px; background: oklch(0.84 0 0); overflow: hidden; }
.np__bar i { display: block; height: 100%; width: 42%; background: oklch(0.22 0 0); }
.np__mode { text-align: center; font-size: 8.5px; color: oklch(0.3 0 0); padding-bottom: 3px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

/* Cover Flow */
.cf { height: 100%; background: linear-gradient(180deg, oklch(0.16 0 0), oklch(0.05 0 0)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; position: relative; overflow: hidden; }
.cf__stage { display: flex; align-items: center; justify-content: center; perspective: 320px; height: 96px; }
.cf__cover { width: 64px; height: 64px; border-radius: 1px; flex: none; box-shadow: 0 6px 14px oklch(0 0 0 / 0.6); }
.cf__cover.side { transform: rotateY(52deg) scale(0.8); opacity: 0.8; margin: 0 -16px; z-index: 1; }
.cf__cover.side.left { transform: rotateY(-52deg) scale(0.8); }
.cf__cover.center { z-index: 3; box-shadow: 0 10px 22px oklch(0 0 0 / 0.7); }
.cf__label { text-align: center; color: oklch(0.97 0 0); }
.cf__label .t { font-size: 10px; font-weight: 700; }
.cf__label .a { font-size: 8.5px; color: oklch(0.7 0 0); }

/* Photos grid */
.pg { height: 100%; display: flex; flex-direction: column; }
.pg__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5px; padding: 2px; }
.pg__cell { aspect-ratio: 1; border-radius: 1px; }
.pg__cell[data-sel="true"] { outline: 1.5px solid oklch(0.18 0 0); outline-offset: -1.5px; }

/* Album-art swatches — distinct grayscale tones so images still read */
.art-a { background: linear-gradient(135deg, oklch(0.82 0 0), oklch(0.6 0 0)); }
.art-b { background: linear-gradient(135deg, oklch(0.5 0 0), oklch(0.28 0 0)); }
.art-c { background: linear-gradient(135deg, oklch(0.7 0 0), oklch(0.42 0 0)); }
.art-d { background: linear-gradient(135deg, oklch(0.38 0 0), oklch(0.18 0 0)); }
.art-e { background: linear-gradient(135deg, oklch(0.9 0 0), oklch(0.66 0 0)); }
.art-f { background: linear-gradient(135deg, oklch(0.26 0 0), oklch(0.12 0 0)); }
.art-g { background: linear-gradient(135deg, oklch(0.6 0 0), oklch(0.34 0 0)); }

/* The click wheel — brushed metal, grayscale */
.wheel {
  position: relative; margin-top: 16px;
  width: 56%; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  background:
    radial-gradient(circle at 38% 30%, oklch(1 0 0 / 0.8), transparent 38%),
    repeating-conic-gradient(from 0deg,
      oklch(1 0 0 / 0) 0deg, oklch(1 0 0 / 0.06) 0.5deg,
      oklch(0.2 0 0 / 0.05) 1deg, oklch(1 0 0 / 0) 1.6deg),
    radial-gradient(circle at 50% 45%, var(--alu-hi), var(--alu-2) 58%, var(--alu-3) 100%);
  box-shadow:
    0 1px 1px oklch(1 0 0 / 0.9) inset,
    0 -8px 16px -8px oklch(0 0 0 / 0.35) inset,
    0 10px 22px -12px oklch(0 0 0 / 0.55);
  cursor: grab;
  touch-action: none;
}
.device--graphite .wheel {
  background:
    radial-gradient(circle at 38% 30%, oklch(0.55 0 0 / 0.6), transparent 40%),
    repeating-conic-gradient(from 0deg,
      oklch(1 0 0 / 0) 0deg, oklch(1 0 0 / 0.04) 0.5deg,
      oklch(0 0 0 / 0.12) 1deg, oklch(1 0 0 / 0) 1.6deg),
    radial-gradient(circle at 50% 45%, oklch(0.34 0 0), oklch(0.22 0 0) 60%, oklch(0.15 0 0));
}
.wheel:active { cursor: grabbing; }
.wheel__arc {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: conic-gradient(from var(--arc-angle, 0deg), oklch(0.2 0 0 / 0.5), transparent 55deg);
  opacity: var(--arc-opacity, 0); transition: opacity 0.5s var(--ease-out-quart);
  mask: radial-gradient(circle, transparent 56%, #000 57%, #000 99%, transparent 100%);
  -webkit-mask: radial-gradient(circle, transparent 56%, #000 57%, #000 99%, transparent 100%);
}
.device--graphite .wheel__arc { background: conic-gradient(from var(--arc-angle, 0deg), oklch(1 0 0 / 0.45), transparent 55deg); }
.wheel__label {
  position: absolute; font-family: var(--font-mono); font-size: 0.5rem; font-weight: 600;
  letter-spacing: 0.1em; color: oklch(0.38 0 0 / 0.85); text-transform: uppercase;
  user-select: none;
}
.device--graphite .wheel__label { color: oklch(0.82 0 0 / 0.7); }
.wheel__label.menu { top: 9%; left: 50%; transform: translateX(-50%); }
.wheel__label.next { right: 7%; top: 50%; transform: translateY(-50%); }
.wheel__label.prev { left: 7%; top: 50%; transform: translateY(-50%); }
.wheel__label.play { bottom: 9%; left: 50%; transform: translateX(-50%); }
.wheel__center {
  width: 38%; aspect-ratio: 1; border-radius: 50%; z-index: 2;
  background: radial-gradient(circle at 42% 35%, oklch(0.28 0 0), oklch(0.1 0 0) 80%);
  box-shadow: 0 2px 6px oklch(0 0 0 / 0.6) inset, 0 1px 0 oklch(1 0 0 / 0.5);
}

/* =====================================================================
   SPEC STRIP  (under hero)
   ===================================================================== */
.strip { border-block: 1px solid var(--line); background: var(--paper); }
.strip__inner { display: grid; grid-template-columns: repeat(4, 1fr); }
.strip__cell { padding: var(--space-m) clamp(1rem, 0.5rem + 1.5vw, 2rem); border-left: 1px solid var(--line-2); display: flex; flex-direction: column; gap: 0.3em; }
.strip__cell:first-child { border-left: none; padding-left: 0; }
.strip__cell b { font-size: var(--step-2); font-weight: 900; letter-spacing: -0.04em; }
.strip__cell span { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; color: var(--ink-500); text-transform: uppercase; }
@media (max-width: 760px) {
  .strip__inner { grid-template-columns: 1fr 1fr; }
  .strip__cell { border-left: none; border-top: 1px solid var(--line-2); padding-inline: 0; }
  .strip__cell:nth-child(2) { padding-left: 1.5rem; border-left: 1px solid var(--line-2); }
  .strip__cell:nth-child(4) { padding-left: 1.5rem; border-left: 1px solid var(--line-2); }
  .strip__cell:first-child, .strip__cell:nth-child(2) { border-top: none; }
}

/* =====================================================================
   STORY  (black pull-quote band)
   ===================================================================== */
.story__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: end; margin-top: var(--space-l); }
.story__body { display: flex; flex-direction: column; gap: var(--space-s); }
.story__body p { color: var(--snow-2); max-width: 46ch; }
.timeline { display: flex; gap: clamp(1.5rem, 1rem + 3vw, 4rem); margin-top: var(--space-m); flex-wrap: wrap; border-top: 1px solid var(--line-d); padding-top: var(--space-m); }
.timeline div { display: flex; flex-direction: column; gap: 0.2em; }
.timeline b { font-family: var(--font-mono); font-size: var(--step-1); color: var(--snow); letter-spacing: -0.01em; font-weight: 500; }
.timeline span { font-size: var(--step--2); color: var(--snow-3); font-family: var(--font-mono); letter-spacing: 0.08em; text-transform: uppercase; }

/* =====================================================================
   FEATURES  (editorial spec grid — no cards)
   ===================================================================== */
.spec-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.spec {
  padding: var(--space-m) var(--space-m) var(--space-l) 0;
  border-bottom: 1px solid var(--line); border-right: 1px solid var(--line);
  position: relative;
}
.spec:nth-child(3n) { border-right: none; padding-right: 0; }
.spec:nth-child(3n+2) { padding-inline: var(--space-m); }
.spec__no { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.1em; color: var(--ink-500); }
.spec__glyph { width: 30px; height: 30px; margin: 1.1rem 0 1.2rem; color: var(--ink); }
.spec__glyph svg { width: 100%; height: 100%; }
.spec h3 { font-size: var(--step-2); margin-bottom: 0.5em; letter-spacing: -0.025em; }
.spec p { color: var(--ink-600); font-size: var(--step--1); max-width: 36ch; }
@media (max-width: 860px) {
  .spec-grid { grid-template-columns: 1fr 1fr; }
  .spec:nth-child(3n) { border-right: 1px solid var(--line); padding-right: var(--space-m); }
  .spec:nth-child(3n+2) { padding-inline: 0 var(--space-m); }
  .spec:nth-child(2n) { border-right: none; padding-right: 0; }
  .spec { padding-inline: 0 var(--space-m); }
  .spec:nth-child(2n) { padding-inline: var(--space-m) 0; }
}
@media (max-width: 540px) {
  .spec-grid { grid-template-columns: 1fr; }
  .spec, .spec:nth-child(2n), .spec:nth-child(3n) { border-right: none; padding: var(--space-s) 0 var(--space-m); }
}

/* =====================================================================
   EXPERIENCE  (captioned screens, big numerals, alternating)
   ===================================================================== */
.xp-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 5vw, 6rem); align-items: center; }
.xp-row + .xp-row { margin-top: var(--space-2xl); }
.xp-row--flip .xp-row__media { order: 2; }
.xp-row__media { display: flex; flex-direction: column; align-items: center; position: relative; }
.xp-row__num { font-size: var(--step-5); font-weight: 900; letter-spacing: -0.05em; line-height: 0.8; color: transparent; -webkit-text-stroke: 1.5px var(--ink-500); margin-bottom: var(--space-xs); }
.band--black .xp-row__num { -webkit-text-stroke-color: var(--snow-3); }
.xp-row__tag { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-500); margin-bottom: var(--space-s); }
.band--black .xp-row__tag { color: var(--snow-3); }
.xp-row h3 { font-size: var(--step-3); margin-bottom: var(--space-s); letter-spacing: -0.03em; }
.xp-row p { color: var(--ink-600); max-width: 46ch; margin-bottom: var(--space-m); }
.band--black .xp-row p { color: var(--snow-2); }
.xp-list { display: flex; flex-direction: column; gap: 0; }
.xp-list li { display: flex; gap: 0.8em; align-items: flex-start; padding: 0.75em 0; font-size: var(--step--1); border-top: 1px solid var(--line); }
.band--black .xp-list li { border-top-color: var(--line-d); color: var(--snow-2); }
.xp-list svg { width: 17px; height: 17px; flex: none; margin-top: 2px; }

/* iPhone mockup */
.iphone {
  width: min(280px, 70vw); aspect-ratio: 280 / 580; position: relative;
  border-radius: 42px; padding: 11px;
  background: linear-gradient(150deg, oklch(0.32 0 0), oklch(0.12 0 0));
  box-shadow: 0 0 0 1.5px oklch(0 0 0 / 0.5), 0 1px 0 oklch(1 0 0 / 0.14) inset, 0 50px 90px -44px oklch(0 0 0 / 0.6);
}
.iphone__island { position: absolute; top: 9px; left: 50%; transform: translateX(-50%); width: 86px; height: 24px; background: oklch(0.05 0 0); border-radius: 999px; z-index: 5; }
.iphone .device { width: 88%; margin: auto; box-shadow: 0 30px 60px -34px oklch(0 0 0 / 0.7); }
.iphone__fill { position: absolute; inset: 0; display: grid; place-items: center; padding: 34px 14px 18px; background: var(--paper-2); border-radius: 31px; }
.band--black .iphone__fill { background: oklch(0.22 0 0); }
.device--graphite ~ .iphone__fill, .iphone__fill:has(.device--graphite) { background: oklch(0.1 0 0); }

@media (max-width: 860px) {
  .xp-row { grid-template-columns: 1fr; gap: var(--space-l); }
  .xp-row--flip .xp-row__media { order: 0; }
  .story__grid { grid-template-columns: 1fr; gap: var(--space-l); align-items: start; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__stage { margin-top: var(--space-l); }
}

/* =====================================================================
   SPECS  (tech-spec table + giant numeral + shot — collage)
   ===================================================================== */
.specs { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(2rem, 1rem + 4vw, 5rem); margin-top: var(--space-l); align-items: start; }
.spec-table { border-top: 2px solid var(--ink); }
.spec-table__row { display: grid; grid-template-columns: minmax(0, 0.6fr) minmax(0, 1fr); gap: 1.5rem; padding: 1.05rem 0; border-bottom: 1px solid var(--line); }
.spec-table__row dt { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-500); align-self: center; }
.spec-table__row dd { font-size: var(--step-0); font-weight: 600; letter-spacing: -0.01em; }
.specs__side { display: flex; flex-direction: column; gap: var(--space-m); }
.numeral-tile { background: var(--black); color: var(--snow); padding: clamp(1.6rem, 1rem + 2vw, 2.4rem); border-radius: var(--r-lg); display: flex; flex-direction: column; }
.numeral-tile .giant-num { font-size: var(--step-6); font-weight: 900; letter-spacing: -0.06em; line-height: 0.78; }
.numeral-tile p { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--snow-3); margin-top: 0.8em; max-width: 24ch; }
.shot-tile { background: var(--paper-3); border-radius: var(--r-lg); padding: 1.6rem 1.6rem 1.2rem; display: flex; flex-direction: column; align-items: center; }
.shot-tile .device { width: min(180px, 60vw); }
.shot-tile .shot-caption { margin-top: 1rem; }
@media (max-width: 820px) { .specs { grid-template-columns: 1fr; } .specs__side { flex-direction: row; flex-wrap: wrap; } .numeral-tile, .shot-tile { flex: 1 1 240px; } }

/* =====================================================================
   PRICING  (black band, giant Free)
   ===================================================================== */
.price { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: center; margin-top: var(--space-l); }
.price__big { font-size: var(--step-6); font-weight: 900; letter-spacing: -0.05em; line-height: 0.82; }
.price__big small { display: block; font-size: var(--step-1); font-weight: 500; letter-spacing: -0.01em; color: var(--snow-2); margin-top: 0.6em; }
.price-list { margin: var(--space-m) 0; display: flex; flex-direction: column; }
.price-list li { display: flex; gap: 0.8em; align-items: center; color: var(--snow-2); font-size: var(--step-0); padding: 0.7em 0; border-top: 1px solid var(--line-d); }
.price-list svg { width: 18px; height: 18px; color: var(--snow); flex: none; }
.price__note h3 { font-size: var(--step-2); margin-bottom: var(--space-s); }
.price__note p { color: var(--snow-2); }
@media (max-width: 760px) { .price { grid-template-columns: 1fr; } }

/* =====================================================================
   COMPARISON
   ===================================================================== */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: var(--space-l); border: 1px solid var(--line); }
.compare__col { padding: clamp(1.6rem, 1rem + 2vw, 2.6rem); }
.compare__col--them { background: var(--paper-2); }
.compare__col--us { background: var(--black); color: var(--snow); }
.compare__col h3 { font-size: var(--step-2); margin-bottom: 0.2em; }
.compare__col .sub { font-size: var(--step--1); margin-bottom: var(--space-m); }
.compare__col--them .sub { color: var(--ink-500); }
.compare__col--us .sub { color: var(--snow-3); }
.compare__list li { display: flex; gap: 0.8em; align-items: flex-start; padding: 0.85em 0; font-size: var(--step--1); }
.compare__col--them .compare__list li { color: var(--ink-600); border-bottom: 1px solid var(--line-2); }
.compare__col--us .compare__list li { color: var(--snow-2); border-bottom: 1px solid var(--line-d2); }
.compare__list li:last-child { border-bottom: none; }
.compare__list .mk { width: 19px; height: 19px; flex: none; margin-top: 1px; }
.compare__col--them .mk { color: var(--ink-500); }
.compare__col--us .mk { color: var(--snow); }
@media (max-width: 720px) { .compare { grid-template-columns: 1fr; } .compare__col--them { border-bottom: 1px solid var(--line); } }

/* =====================================================================
   USE CASES
   ===================================================================== */
.uses { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: var(--space-l); }
.use {
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 1.6rem; display: flex; flex-direction: column; gap: 0.5em; min-height: 168px;
  transition: background 0.4s var(--ease-out-quart);
}
.use:hover { background: var(--paper-2); }
.use__icon { width: 26px; height: 26px; color: var(--ink); margin-bottom: auto; }
.use h4 { font-size: var(--step-1); font-weight: 800; letter-spacing: -0.02em; }
.use p { font-size: var(--step--1); color: var(--ink-600); }

/* =====================================================================
   SKINS
   ===================================================================== */
.skins { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(1.5rem, 1rem + 2vw, 3rem); margin-top: var(--space-l); }
.skin { display: flex; flex-direction: column; align-items: center; gap: 0.9em; text-align: center; }
.skin__disc { width: 100px; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; position: relative; box-shadow: 0 1px 0 oklch(1 0 0 / 0.4) inset, 0 14px 30px -18px oklch(0 0 0 / 0.6); }
.skin__disc .c { width: 38%; aspect-ratio: 1; border-radius: 50%; box-shadow: 0 2px 5px oklch(0 0 0 / 0.5) inset; }
.skin__disc.white { background: radial-gradient(circle at 45% 40%, oklch(0.99 0 0), oklch(0.88 0 0) 72%, oklch(0.8 0 0)); }
.skin__disc.white .c { background: radial-gradient(circle at 42% 35%, oklch(0.99 0 0), oklch(0.92 0 0)); border: 1px solid oklch(0.8 0 0); }
.skin__disc.black { background: radial-gradient(circle at 45% 40%, oklch(0.3 0 0), oklch(0.14 0 0) 76%); }
.skin__disc.black .c { background: radial-gradient(circle at 42% 35%, oklch(0.28 0 0), oklch(0.12 0 0)); }
/* The Special edition wheel is red (the one intentional spot of color). */
.skin__disc.special { background: radial-gradient(circle at 45% 40%, oklch(0.61 0.205 27), oklch(0.46 0.2 26) 76%); }
.skin__disc.special .c { background: radial-gradient(circle at 42% 35%, oklch(0.2 0 0), oklch(0.09 0 0)); border: 1px solid oklch(0.4 0.12 26); }
.skin__disc.silver { background: radial-gradient(circle at 45% 40%, oklch(0.9 0 0), oklch(0.74 0 0) 72%, oklch(0.62 0 0)); }
.skin__disc.silver .c { background: radial-gradient(circle at 42% 35%, oklch(0.88 0 0), oklch(0.76 0 0)); border: 1px solid oklch(0.62 0 0); }
.skin h4 { font-size: var(--step-0); font-weight: 800; }
.skin span { font-size: var(--step--2); color: var(--snow-3); font-family: var(--font-mono); letter-spacing: 0.06em; text-transform: uppercase; }

/* =====================================================================
   REVIEWS  (editorial grid, star-rated)
   ===================================================================== */
.reviews {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--line-d); border-left: 1px solid var(--line-d);
  margin-top: var(--space-l);
}
.review {
  border-right: 1px solid var(--line-d); border-bottom: 1px solid var(--line-d);
  padding: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem);
  display: flex; flex-direction: column; gap: var(--space-s);
  transition: background 0.4s var(--ease-out-quart);
}
.review:hover { background: oklch(1 0 0 / 0.03); }
.review__stars { font-size: 0.82rem; letter-spacing: 0.22em; color: var(--snow); line-height: 1; }
.review blockquote {
  font-size: var(--step-1); line-height: 1.42; font-weight: 500; letter-spacing: -0.01em;
  color: var(--snow); flex: 1; text-wrap: pretty;
}
.review figcaption { display: flex; flex-direction: column; gap: 0.15em; margin-top: auto; padding-top: var(--space-xs); }
.review__name { font-size: var(--step--1); font-weight: 600; color: var(--snow); }
.review__role { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.08em; text-transform: uppercase; color: var(--snow-3); }
@media (max-width: 880px) { .reviews { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .reviews { grid-template-columns: 1fr; } }

/* =====================================================================
   PRIVACY
   ===================================================================== */
.privacy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); margin-top: var(--space-l); }
.priv { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 1.8rem; }
.priv__icon { width: 30px; height: 30px; color: var(--ink); margin-bottom: 1.1rem; }
.priv h4 { font-size: var(--step-1); font-weight: 800; margin-bottom: 0.4em; letter-spacing: -0.02em; }
.priv p { font-size: var(--step--1); color: var(--ink-600); }

/* =====================================================================
   FAQ
   ===================================================================== */
.faq { max-width: 880px; margin: var(--space-l) auto 0; border-top: 1px solid var(--line); }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.5rem 0; text-align: left; font-size: var(--step-2); font-weight: 800; letter-spacing: -0.025em; color: var(--ink); transition: opacity 0.25s; }
.faq__q:hover { opacity: 0.6; }
.faq__sign { width: 20px; height: 20px; flex: none; position: relative; }
.faq__sign::before, .faq__sign::after { content: ""; position: absolute; background: var(--ink); border-radius: 1px; transition: transform 0.4s var(--ease-out-expo), opacity 0.3s; }
.faq__sign::before { top: 50%; left: 1px; right: 1px; height: 2px; transform: translateY(-50%); }
.faq__sign::after { left: 50%; top: 1px; bottom: 1px; width: 2px; transform: translateX(-50%); }
.faq__item[data-open="true"] .faq__sign::after { transform: translateX(-50%) scaleY(0); opacity: 0; }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-out-expo); }
.faq__item[data-open="true"] .faq__a { grid-template-rows: 1fr; }
.faq__a-inner { overflow: hidden; }
.faq__a p { color: var(--ink-600); max-width: 72ch; padding-bottom: 1.5rem; font-size: var(--step-0); }
.faq__a a { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }

/* =====================================================================
   WORDMARK BAND + FINAL CTA  (black)
   ===================================================================== */
.wordmark {
  font-size: var(--step-6); font-weight: 900; letter-spacing: -0.055em; line-height: 0.82;
  text-align: center; color: var(--snow);
}
.wordmark .tm { font-size: 0.22em; vertical-align: super; opacity: 0.5; }
.final { text-align: center; }
.final .display { margin: 0 auto var(--space-s); max-width: 18ch; }
.final .lede { margin: 0 auto var(--space-l); max-width: 44ch; }
.final .cta-row { justify-content: center; }

/* =====================================================================
   FOOTER
   ===================================================================== */
.footer { background: var(--black); color: var(--snow); border-top: 1px solid var(--line-d2); padding-block: var(--space-xl) var(--space-l); }
.footer__top { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: var(--space-m); margin-bottom: var(--space-xl); }
.footer .brand { color: var(--snow); }
.footer .brand__wheel { box-shadow: 0 0 0 1px oklch(1 0 0 / 0.2); }
.footer .brand .tm { color: var(--snow-3); }
.footer__brand p { color: var(--snow-3); font-size: var(--step--1); max-width: 32ch; margin-top: var(--space-s); }
.footer__col h5 { font-family: var(--font-mono); font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; color: var(--snow-3); margin-bottom: 1.1em; }
.footer__col a { display: block; color: var(--snow-2); font-size: var(--step--1); padding: 0.5em 0; transition: color 0.25s; }
.footer__col a:hover { color: var(--snow); }
.footer__legal { border-top: 1px solid var(--line-d2); padding-top: var(--space-m); display: flex; flex-wrap: wrap; gap: var(--space-s) var(--space-m); justify-content: space-between; align-items: flex-start; }
.footer__disclaimer { font-size: var(--step--2); color: var(--snow-3); max-width: 64ch; line-height: 1.65; }
.footer__meta { font-family: var(--font-mono); font-size: var(--step--2); color: var(--snow-3); display: flex; gap: var(--space-s); flex-wrap: wrap; letter-spacing: 0.04em; }
@media (max-width: 760px) { .footer__top { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: span 2; } }

/* =====================================================================
   REVEAL animations
   ===================================================================== */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity 0.85s var(--ease-out-expo), transform 0.85s var(--ease-out-expo); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.07s; }
[data-reveal-delay="2"] { transition-delay: 0.14s; }
[data-reveal-delay="3"] { transition-delay: 0.21s; }
[data-reveal-delay="4"] { transition-delay: 0.28s; }

/* =====================================================================
   LEGAL pages
   ===================================================================== */
.legal { padding-top: clamp(7rem, 6rem + 6vw, 10rem); padding-bottom: var(--space-2xl); background: var(--paper); }
.legal__head { max-width: 760px; margin-bottom: var(--space-l); }
.legal__head h1 { font-size: var(--step-4); margin-bottom: var(--space-s); letter-spacing: -0.04em; }
.legal__head .updated { font-family: var(--font-mono); font-size: var(--step--2); color: var(--ink-500); letter-spacing: 0.06em; text-transform: uppercase; }
.legal__body { max-width: 760px; }
.legal__body h2 { font-size: var(--step-2); margin: var(--space-l) 0 var(--space-xs); letter-spacing: -0.025em; }
.legal__body h3 { font-size: var(--step-1); margin: var(--space-m) 0 var(--space-2xs); }
.legal__body p, .legal__body li { color: var(--ink-600); margin-bottom: var(--space-xs); max-width: 72ch; }
.legal__body ul { display: flex; flex-direction: column; gap: 0.5em; padding-left: 1.2em; list-style: disc; margin-bottom: var(--space-s); }
.legal__body ul li { margin-bottom: 0; }
.legal__body a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.legal__callout { border: 1px solid var(--line); border-radius: var(--r); padding: 1.5rem; background: var(--paper-2); margin: var(--space-m) 0; }
.legal__callout p { margin-bottom: 0; color: var(--ink); }
.back-link { display: inline-flex; align-items: center; gap: 0.5em; font-size: var(--step--1); color: var(--ink-500); margin-bottom: var(--space-l); font-family: var(--font-mono); letter-spacing: 0.04em; text-transform: uppercase; }
.back-link:hover { color: var(--ink); }

/* utility */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; top: -60px; left: 12px; z-index: 200; background: var(--ink); color: var(--paper); padding: 0.7em 1.2em; border-radius: var(--r); transition: top 0.3s; }
.skip-link:focus { top: 12px; }