/* ============================================================================
   MoviePro — marketing + support site (disposable design probe)
   WIP 2026-06-27 · disposable probe
   One shared stylesheet. Token block + flat component classes.
   No override chains (.a .b .c), no !important. Mobile-first.
   Visual language ("The Instrument") copied from the locked app mockups:
     · ContextualTip-v0.1.html  · AssistModule-v0.2.html
   ============================================================================ */

/* ── 1 · TOKENS ──────────────────────────────────────────────────────────── */
:root {
  /* Page — Instrument near-black (brief §5: #0A0A0C → #141417) */
  --bg-top:        #0A0A0C;
  --bg-bot:        #141417;

  /* Shared chassis (LOCKED .71 — AssistModule) */
  --chassis-top:   rgba(20, 24, 32, 0.71);
  --chassis-bot:   rgba(14, 18, 26, 0.71);
  --chassis-bevel: rgba(255, 255, 255, 0.06);
  --chassis-stroke:rgba(0, 0, 0, 0.45);

  /* Open panel surface (LOCKED .83 — used for cards) */
  --panel-fill:    rgba(12, 14, 18, 0.83);
  --panel-stroke:  rgba(0, 0, 0, 0.55);
  --panel-bevel:   rgba(255, 255, 255, 0.045);
  --panel-bottom:  rgba(0, 0, 0, 0.30);

  /* Wells / recessed readouts */
  --well-fill:     rgb(20, 24, 30);
  --well-stroke:   rgba(0, 0, 0, 0.50);
  --scope-fill:    rgb(6, 7, 9);

  /* Gold — the ONLY accent voice (used sparingly) */
  --gold:          rgba(250, 204, 21, 0.95);   /* pip-gold */
  --gold-text:     rgba(248, 226, 154, 0.96);  /* tab-active text */
  --gold-bg:       rgba(210, 185, 80, 0.06);
  --gold-border:   rgba(210, 185, 80, 0.30);
  --amber:         rgba(245, 197, 66, 0.92);

  /* Ink */
  --ink:           rgb(232, 238, 248);         /* cool white */
  --title:         #f3f5f8;
  --copy:          rgba(231, 235, 240, 0.72);
  --copy-dim:      rgba(231, 235, 240, 0.50);
  --label-mute:    rgba(232, 238, 248, 0.32);
  --hairline:      rgba(255, 255, 255, 0.07);
  --hairline-dk:   rgba(0, 0, 0, 0.45);

  /* Type */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, monospace;

  /* Geometry */
  --r-panel: 3px;
  --r-card:  6px;
  --r-btn:   4px;
  --maxw:    1080px;

  /* Spacing scale */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 104px;
}

/* ── 2 · BASE ────────────────────────────────────────────────────────────── */
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-sans);
  color: var(--copy);
  background:
    radial-gradient(120% 80% at 50% -10%, rgba(40, 44, 56, 0.18) 0%, transparent 60%),
    linear-gradient(180deg, var(--bg-top) 0%, var(--bg-bot) 100%);
  background-attachment: fixed;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
h1, h2, h3, p, ul, dl { margin: 0; }

.container { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 var(--s4); }
.muted { color: var(--copy-dim); }
.gold  { color: var(--gold-text); }
.nowrap { white-space: nowrap; }

/* shared small-caps eyebrow — one gold note per section */
.eyebrow {
  display: inline-block;
  font: 700 11px/1 var(--font-sans);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-text);
  margin-bottom: var(--s4);
}
.eyebrow--mute { color: var(--label-mute); }

.stamp {
  font: 700 10px/1 var(--font-sans);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label-mute);
}

/* ── 3 · NAV ─────────────────────────────────────────────────────────────── */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 10, 12, 0.78);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  box-shadow: inset 0 -1px 0 var(--hairline);
}
.nav__inner {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3);
  max-width: var(--maxw); margin: 0 auto; padding: var(--s3) var(--s4);
}
.nav__brand {
  font: 800 18px/1 var(--font-sans);
  letter-spacing: -0.01em; color: var(--title);
  display: inline-flex; align-items: center; gap: var(--s2);
  flex: 0 0 auto;                      /* never crushed by the phone-width link strip */
  transition: color 120ms ease;
}
.nav__brand:hover { color: var(--gold-text); }
.nav__brand .dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 8px var(--gold);
}
.nav__brand .brand-icon {
  width: 32px; height: 32px; border-radius: 8px; flex: 0 0 auto;
  box-shadow: 0 0 0 0.5px var(--panel-stroke), 0 2px 6px rgba(0,0,0,0.35);
}
.nav__links {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4);
  margin-left: auto;
}
.nav__link {
  font: 600 13.5px/1 var(--font-sans);
  color: var(--copy); padding: var(--s2) 0;
  transition: color 120ms ease;
}
.nav__link:hover { color: var(--title); }
.nav__cta {
  font: 700 12.5px/1 var(--font-sans); letter-spacing: 0.02em;
  color: var(--gold-text);
  background: var(--gold-bg);
  border: 0.5px solid var(--gold-border);
  border-radius: var(--r-btn);
  padding: 9px 13px;
}

/* ── 4 · BUTTONS / BADGE ─────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  font: 700 13.5px/1 var(--font-sans); letter-spacing: 0.02em;
  padding: 13px 20px; border-radius: var(--r-btn);
  border: 0.5px solid transparent; cursor: pointer;
  transition: transform 120ms ease, background-color 120ms ease, border-color 120ms ease;
}
.btn:active { transform: translateY(1px); }
.btn--gold {
  color: var(--gold-text);
  background: var(--gold-bg);
  border-color: var(--gold-border);
}
.btn--gold:hover { background: rgba(210, 185, 80, 0.10); }
.btn--ghost {
  color: var(--ink);
  background: linear-gradient(180deg, var(--chassis-top), var(--chassis-bot));
  border-color: var(--chassis-stroke);
}
.btn--ghost:hover { border-color: var(--hairline); }

.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s4); }

/* Official Apple "Download on the App Store" badge (US/UK black lockup, from
   Apple's App Store Marketing Guidelines pack). The artwork is Apple's and
   ships as-is — never recreate, recolor, reproportion, or add effects to it.
   The padding preserves the clear space Apple requires around the badge. */
.badge { display: inline-block; padding: 5px; line-height: 0; }
.badge img { display: block; height: 44px; width: auto; }

/* ── 5 · HERO ────────────────────────────────────────────────────────────── */
.hero { padding: var(--s8) 0 var(--s7); text-align: center; }
.hero__title {
  font-weight: 800; letter-spacing: -0.025em; color: var(--title);
  font-size: clamp(31px, 7vw, 56px); line-height: 1.04;
  max-width: 16ch; margin: 0 auto var(--s4);
}
.hero__sub {
  font-size: clamp(15px, 2.4vw, 19px); color: var(--copy);
  max-width: 46ch; margin: 0 auto var(--s4);
}
.hero__price {
  font: 700 clamp(14px, 2.2vw, 17px)/1.3 var(--font-mono);
  letter-spacing: 0.01em; color: var(--ink); margin-bottom: var(--s6);
}
.hero__price .sep { color: var(--label-mute); margin: 0 8px; }
.hero .cta-row { justify-content: center; margin-bottom: var(--s8); }
.hero__stage { display: flex; justify-content: center; }

/* ── 6 · SECTION ─────────────────────────────────────────────────────────── */
.section { padding: var(--s8) 0; box-shadow: inset 0 1px 0 var(--hairline); }
.section--flush { box-shadow: none; }
.section--alt { background: rgba(255, 255, 255, 0.012); }
.section__head { max-width: 60ch; margin-bottom: var(--s7); }
.section__head--center { margin-left: auto; margin-right: auto; text-align: center; }
.section__title {
  font-weight: 800; letter-spacing: -0.02em; color: var(--title);
  font-size: clamp(26px, 4.6vw, 40px); line-height: 1.08; margin-bottom: var(--s4);
}
.section__lead { font-size: clamp(15px, 2.2vw, 18px); color: var(--copy); }
.section__lead + .section__lead { margin-top: var(--s3); }

/* layout grids */
.grid { display: grid; gap: var(--s5); }
.split { display: grid; gap: var(--s7); align-items: center; }

/* ── 7 · FEATURE / CARD ──────────────────────────────────────────────────── */
.card {
  border-radius: var(--r-card);
  background-color: var(--panel-fill);
  background-image: linear-gradient(180deg,
    rgba(180, 195, 215, 0.030) 0%, rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.06) 100%);
  box-shadow:
    0 0 0 0.5px var(--panel-stroke),
    inset 0 1px 0 var(--panel-bevel),
    inset 0 -1px 0 var(--panel-bottom),
    0 6px 22px rgba(0, 0, 0, 0.35);
  padding: var(--s5);
}
.feature__title {
  font: 700 16px/1.25 var(--font-sans); color: var(--title);
  margin-bottom: var(--s2); display: flex; align-items: center; gap: var(--s2);
}
.feature__title .pip {
  width: 6px; height: 6px; border-radius: 1px; background: var(--gold);
}
.feature__body { font-size: 14.5px; color: var(--copy); }
.feature__meta {
  margin-top: var(--s3); font: 600 11px/1.4 var(--font-mono);
  letter-spacing: 0.02em; color: var(--copy-dim);
}

/* bullet list with gold tick */
.bullets { list-style: none; padding: 0; display: grid; gap: var(--s3); }
.bullets li {
  position: relative; padding-left: 24px; font-size: 15px; color: var(--copy);
}
.bullets li::before {
  content: ""; position: absolute; left: 4px; top: 9px;
  width: 7px; height: 7px; border-radius: 1px;
  background: var(--gold); opacity: 0.9;
}

/* small pill (e.g. "Requires same Wi-Fi") */
.pill {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: 600 12px/1 var(--font-sans); letter-spacing: 0.02em;
  color: var(--ink);
  background: var(--well-fill);
  border-radius: 100px; padding: 8px 14px;
  box-shadow: 0 0 0 0.5px var(--well-stroke), inset 0 1px 0 rgba(255,255,255,0.03);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); }

/* honesty / note callout */
.note {
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--chassis-top), var(--chassis-bot));
  box-shadow: 0 0 0 0.5px var(--chassis-stroke), inset 0 1px 0 var(--chassis-bevel);
  padding: var(--s5); font-size: 14.5px; color: var(--copy);
}
.note__title {
  font: 700 11px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--label-mute); margin-bottom: var(--s3);
}

/* ── 8 · DEVICE FRAME ──────────────────────────────────────────────── */
/* A device frame: near-black screen, a hint of gold chrome, a dashed
   "SCREENSHOT" plate. Easy to swap — drop a real image into .device__screen. */
.device { width: 100%; max-width: 280px; }
.device--lg { max-width: 320px; }
.device--sm { max-width: 210px; }
.device--hero { max-width: 1032px; }

.device__frame {
  position: relative;
}
/* Apple-supplied iPhone 17 Pro product bezel, shown unmodified per Apple's
   marketing guidelines — no crop, tilt, recolour, shadow or added effects.
   The Dynamic Island is part of the artwork, so no CSS stand-in for it. */
.device__bezel { position: relative; z-index: 2; width: 100%; height: auto; }
/* The screenshot sits behind the bezel, aligned to its screen aperture —
   measured from the artwork's alpha channel: 1206x2622 at (72,69) inside the
   1350x2760 canvas. Percentages keep it locked at any rendered size. */
.device__shot {
  position: absolute; z-index: 1;
  left: 5.3333%; top: 2.5%; width: 89.3333%; height: 95%;
  object-fit: cover;
  /* The aperture is a rounded squircle, so a square shot pokes past the device
     silhouette at the corners and shows as pale patches against the page.
     Clipping at 128px (of the 1206x2622 opening) sits mid-way in the bleed-free
     window of 71-186px — 186px being the display's nominal corner radius. */
  border-radius: 10.61% / 4.88%;
}
/* Landscape bezel variant — same aperture mirrored: 2622x1206 at (69,72)
   inside the 2760x1350 canvas (see assets/bezels/apertures.json). */
.device--hero .device__shot {
  left: 2.5%; top: 5.3333%; width: 95%; height: 89.3333%;
  border-radius: 4.88% / 10.61%;
}

/* Scene screens on scenes.html are assembled in layers, not flat screenshots:
   footage plate at the bottom (.device__shot, object-fit cover), the real
   app's drop-in chrome above it (.device__ui — a straight-alpha render at
   1206×2622, exactly the bezel's screen aperture, so it shares .device__shot's
   geometry; viewfinder areas are true alpha holes), and the Apple bezel on
   top. The Dual Capture chrome has a second hole for the PiP window —
   .device__pip fills it, measured from the chrome's alpha channel: 477×852 at
   (51,628) of the 1206×2622 canvas, converted to frame-relative percentages. */
.device__ui {
  position: absolute; z-index: 1;
  left: 5.3333%; top: 2.5%; width: 89.3333%; height: 95%;
  border-radius: 10.61% / 4.88%;
  pointer-events: none;
}
.device__pip {
  position: absolute; z-index: 1;
  left: 9.1111%; top: 25.2536%; width: 35.3333%; height: 30.8696%;
  object-fit: cover; border-radius: 6% / 3.5%;
}
/* Landscape variant of the layered scene screen — the Remote scene's
   controller view uses the landscape bezel's aperture (2622×1206 at (69,72),
   same numbers as .device--hero .device__shot). */
.device--land { max-width: 560px; }
.device--land .device__shot,
.device--land .device__ui {
  left: 2.5%; top: 5.3333%; width: 95%; height: 89.3333%;
  border-radius: 4.88% / 10.61%;
}
/* a hint of gold chrome — faux instrument strip (abstract, not a fake UI) */
.device__chrome {
  margin-top: 40px; display: flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: var(--r-panel);
  background: linear-gradient(180deg, var(--chassis-top), var(--chassis-bot));
  box-shadow: 0 0 0 0.5px var(--chassis-stroke), inset 0 1px 0 var(--chassis-bevel);
}
.device__chrome i {
  width: 14px; height: 4px; border-radius: 1px; background: rgba(232,238,248,0.20);
}
.device__chrome .pip { width: 6px; height: 6px; border-radius: 1px; background: var(--gold); }
.device__plate {
  margin: auto; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 18px 16px; border-radius: var(--r-card);
  border: 1px dashed rgba(232, 238, 248, 0.18);
  text-align: center; width: 76%;
}
.device__kicker {
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(232, 238, 248, 0.55);
}
.device__caption { font: 500 11px/1.35 var(--font-sans); color: var(--copy-dim); }
.device__tag {
  font: 700 8px/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--label-mute);
}
.device__rec {
  margin-bottom: 26px; width: 26px; height: 26px; border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.30);
}

/* two-phone remote stage */
.devices-pair {
  display: flex; flex-direction: column; align-items: center; gap: var(--s4);
  justify-content: center;
}
.devices-pair__link {
  display: inline-flex; align-items: center; gap: var(--s2);
  font: 700 10px/1 var(--font-mono); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--copy-dim);
}
.devices-pair__link .line { width: 26px; height: 1px; background: var(--gold-border); }
.devices-pair__link .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.device__role {
  display: block; text-align: center; margin-top: var(--s3);
  font: 700 10px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--label-mute);
}

/* ── 9 · COMPARISON TABLE ────────────────────────────────────────────────── */
.cmp-wrap {
  border-radius: var(--r-card); overflow-x: auto;
  box-shadow: 0 0 0 0.5px var(--panel-stroke), 0 6px 22px rgba(0,0,0,0.30);
}
.cmp { width: 100%; border-collapse: collapse; min-width: 480px; background: var(--panel-fill); }
.cmp caption {
  caption-side: bottom; text-align: left; padding: var(--s3) var(--s4);
  font-size: 12px; color: var(--copy-dim); box-shadow: inset 0 1px 0 var(--hairline);
}
.cmp th, .cmp td {
  text-align: left; padding: 14px var(--s4); vertical-align: top;
  box-shadow: inset 0 -1px 0 var(--hairline-dk);
  font-size: 14px;
}
.cmp thead th {
  font: 800 13px/1.2 var(--font-sans); letter-spacing: 0.01em; color: var(--title);
  background: linear-gradient(180deg, var(--chassis-top), var(--chassis-bot));
}
.cmp thead th:first-child { color: var(--label-mute); font-weight: 700; }
.cmp tbody th {
  font: 700 13px/1.3 var(--font-sans); color: var(--ink); width: 30%;
}
.cmp tbody td { color: var(--copy); }
.cmp .col-us { box-shadow: inset 1px 0 0 var(--gold-border), inset -1px 0 0 var(--gold-border), inset 0 -1px 0 var(--hairline-dk); }
.cmp__mark { color: var(--gold-text); font-weight: 700; }
.cmp__dim  { color: var(--copy-dim); }

/* ── 10 · PRICING ────────────────────────────────────────────────────────── */
.pricing { display: grid; gap: var(--s5); }
.price { display: flex; flex-direction: column; }
.price--feature { box-shadow:
    0 0 0 0.5px var(--gold-border),
    inset 0 1px 0 var(--panel-bevel),
    inset 0 -1px 0 var(--panel-bottom),
    0 6px 22px rgba(0, 0, 0, 0.40); }
.price__name {
  font: 700 12px/1 var(--font-sans); letter-spacing: 0.10em; text-transform: uppercase;
  color: var(--gold-text); margin-bottom: var(--s3);
}
.price__amt { font: 800 34px/1 var(--font-sans); letter-spacing: -0.02em; color: var(--title); }
.price__amt small { font: 600 14px/1 var(--font-mono); color: var(--copy-dim); margin-left: 6px; }
.price__meta { font-size: 13px; color: var(--copy-dim); margin: var(--s2) 0 var(--s4); }
.price__list { list-style: none; padding: 0; display: grid; gap: var(--s2); margin-top: auto; }
.price__list li { position: relative; padding-left: 18px; font-size: 13.5px; color: var(--copy); }
.price__list li::before {
  content: ""; position: absolute; left: 2px; top: 8px;
  width: 6px; height: 6px; border-radius: 1px; background: var(--gold); opacity: 0.85;
}

/* ── 11 · EMAIL STUB / FACTS / ASSETS ────────────────────────────────────── */
.signup { display: flex; flex-wrap: wrap; gap: var(--s3); max-width: 460px; }
.signup__field {
  flex: 1 1 220px; min-width: 0;
  font: 500 15px/1 var(--font-sans); color: var(--ink);
  background: var(--well-fill); border: 0; border-radius: var(--r-btn);
  padding: 14px 16px;
  box-shadow: 0 0 0 0.5px var(--well-stroke), inset 0 1px 0 rgba(255,255,255,0.03);
}
.signup__field::placeholder { color: var(--copy-dim); }
.signup__field:focus { outline: none; box-shadow: 0 0 0 0.5px var(--gold-border), inset 0 1px 0 rgba(255,255,255,0.03); }

.facts { display: grid; gap: 0; border-radius: var(--r-card); overflow: hidden;
  box-shadow: 0 0 0 0.5px var(--panel-stroke); background: var(--panel-fill); }
.facts__row {
  display: grid; grid-template-columns: 38% 1fr; gap: var(--s4);
  padding: 14px var(--s5); box-shadow: inset 0 -1px 0 var(--hairline-dk);
}
.facts dt { font: 700 12px/1.4 var(--font-sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label-mute); }
.facts dd { margin: 0; font-size: 14.5px; color: var(--ink); }

.assets { display: grid; gap: var(--s4); }
.asset {
  display: flex; align-items: center; gap: var(--s4);
  border-radius: var(--r-card); padding: var(--s4) var(--s5);
  background: linear-gradient(180deg, var(--chassis-top), var(--chassis-bot));
  box-shadow: 0 0 0 0.5px var(--chassis-stroke), inset 0 1px 0 var(--chassis-bevel);
}
.asset__thumb {
  flex: 0 0 auto; width: 48px; height: 48px; border-radius: var(--r-panel);
  display: flex; align-items: center; justify-content: center;
  background: var(--scope-fill); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}
.asset__thumb .pip { width: 9px; height: 9px; border-radius: 2px; background: var(--gold); opacity: 0.7; }
.asset__body { min-width: 0; }
.asset__name { font: 700 14.5px/1.2 var(--font-sans); color: var(--title); }
.asset__meta { font: 600 11px/1.3 var(--font-mono); letter-spacing: 0.03em; color: var(--copy-dim); margin-top: 3px; }

/* ── 12 · DOCS / MANUAL ──────────────────────────────────────────────────── */
.docs { display: grid; gap: var(--s6); }
.docs__nav { align-self: start; }
.docs__group + .docs__group { margin-top: var(--s5); }
.docs__grouptitle {
  font: 700 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--label-mute); margin-bottom: var(--s3);
}
.docs__navlink { display: block; padding: 7px 0; font-size: 14px; color: var(--copy); }
.docs__navlink:hover { color: var(--title); }
.docs__body { display: grid; gap: var(--s6); min-width: 0; }
.article {
  scroll-margin-top: 90px;
  border-radius: var(--r-card); padding: var(--s6);
  background-color: var(--panel-fill);
  box-shadow: 0 0 0 0.5px var(--panel-stroke), inset 0 1px 0 var(--panel-bevel);
}
.article__title { font: 800 22px/1.2 var(--font-sans); letter-spacing: -0.01em; color: var(--title); margin-bottom: 6px; }
.article__summary { font-size: 14px; color: var(--copy-dim); margin-bottom: var(--s5); }
.article p { font-size: 15px; line-height: 1.65; color: var(--copy); margin-bottom: var(--s4); max-width: 72ch; }
.article p:last-child { margin-bottom: 0; }
.article strong { color: var(--ink); font-weight: 700; }
.article ul { padding-left: 20px; margin: 0 0 var(--s4); display: grid; gap: var(--s2); max-width: 72ch; }
.article li { font-size: 15px; line-height: 1.6; color: var(--copy); }
.article__summary { max-width: 72ch; }

/* manual figure frame — swap .figure__ph for a real screenshot <img>.
   Bottom margin separates the figcaption from the paragraph that follows. */
.article__figure { margin: var(--s5) 0; }
.article__figure:last-child { margin-bottom: 0; }
.figure__ph {
  aspect-ratio: 16 / 9; border-radius: var(--r-panel);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.014) 0 9px, rgba(0,0,0,0) 9px 18px),
    var(--scope-fill);
  box-shadow: inset 0 0 0 1px var(--panel-stroke);
}
.figure__kicker { font: 700 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--label-mute); }
.figure__tag { font: 600 11px/1 var(--font-mono); letter-spacing: 0.03em; color: var(--gold-text); opacity: 0.85; }
.article figcaption { margin-top: 12px; font: 600 12.5px/1.5 var(--font-sans); color: var(--copy-dim); max-width: 72ch; }

/* ── 13 · FOOTER ─────────────────────────────────────────────────────────── */
.footer { padding: var(--s8) 0 var(--s6); box-shadow: inset 0 1px 0 var(--hairline); margin-top: var(--s8); }
.footer__cols { display: grid; gap: var(--s6); margin-bottom: var(--s7); }
.footer__brand .nav__brand { margin-bottom: var(--s3); }
.footer__tag { font-size: 13.5px; color: var(--copy-dim); max-width: 34ch; }
.footer__col h4 {
  font: 700 11px/1 var(--font-sans); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--label-mute); margin-bottom: var(--s3);
}
.footer__col a { display: block; padding: 5px 0; font-size: 13.5px; color: var(--copy); }
.footer__col a:hover { color: var(--title); }
.footer__bottom {
  display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); align-items: center;
  padding-top: var(--s5); box-shadow: inset 0 1px 0 var(--hairline);
  font-size: 12.5px; color: var(--copy-dim);
}
/* Apple trademark attribution — required alongside the App Store badge and the
   Apple product bezels used in the device imagery. */
.footer__legal {
  margin-top: var(--s4);
  max-width: 78ch;
  font-size: 11.5px; line-height: 1.5; color: var(--label-mute);
}
.mailto { color: var(--gold-text); }
.mailto:hover { text-decoration: underline; }

/* ── 14 · RESPONSIVE ─────────────────────────────────────────────────────── */
@media (min-width: 680px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .pricing { grid-template-columns: repeat(3, 1fr); }
  .devices-pair { flex-direction: row; align-items: flex-start; gap: var(--s6); }
  .devices-pair__link { flex-direction: column; align-self: center; }
  .devices-pair__link .line { width: 1px; height: 26px; }
  .footer__cols { grid-template-columns: 1.6fr 1fr 1fr; }
  .assets--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .split--media { grid-template-columns: 1.1fr 0.9fr; }
  .split--media-rev { grid-template-columns: 0.9fr 1.1fr; }
  .docs { grid-template-columns: 230px 1fr; }
  .docs__nav { position: sticky; top: 84px; }
}

/* ── 15 · CTA BAND ───────────────────────────────────────────────────────── */
/* Reusable closing call-to-action panel (home final CTA, page footers-of-content). */
.cta-band {
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--chassis-top), var(--chassis-bot));
  box-shadow: 0 0 0 0.5px var(--chassis-stroke), inset 0 1px 0 var(--chassis-bevel);
  padding: var(--s8) var(--s5);
  text-align: center;
}
.cta-band .section__title { margin-bottom: var(--s3); }
.cta-band .cta-row { justify-content: center; margin-top: var(--s5); }

/* ── 16 · SCREENSHOT STRIP ───────────────────────────────────────────────── */
/* Horizontal app-preview strip. Each tile is a device frame. */
.shots {
  display: flex; gap: var(--s5);
  overflow-x: auto; padding: 4px 0 var(--s4);
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
}
.shots .device { flex: 0 0 auto; scroll-snap-align: center; }

/* ── 17 · FAQ ACCORDION (native <details>, no JS) ─────────────────────────── */
.faq { display: grid; gap: var(--s3); }
.faq__group + .faq__group { margin-top: var(--s6); }
.faq__grouptitle {
  font: 700 11px/1 var(--font-sans); letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--label-mute); margin-bottom: var(--s3);
}
.faq__item {
  border-radius: var(--r-card);
  background-color: var(--panel-fill);
  box-shadow: 0 0 0 0.5px var(--panel-stroke), inset 0 1px 0 var(--panel-bevel);
}
.faq__item summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) var(--s5);
  font: 700 15px/1.35 var(--font-sans); color: var(--title);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "+"; flex: 0 0 auto;
  font: 700 18px/1 var(--font-mono); color: var(--gold-text);
}
.faq__item[open] summary::after { content: "\2013"; }
.faq__answer { padding: 0 var(--s5) var(--s5); font-size: 14.5px; color: var(--copy); }
.faq__answer p + p { margin-top: var(--s3); }

/* ── 18 · SCENE BLOCK ────────────────────────────────────────────────────── */
/* Anchor target for per-scene cards on scenes.html (offset under sticky nav). */
.scene { scroll-margin-top: 90px; }
.scene__tag {
  display: inline-block; margin-bottom: var(--s2);
  font: 700 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--label-mute);
}

/* ── 19 · ANCHOR OFFSET · TAP TARGETS · MOBILE NAV · FAQ TOC ──────────────── */
/* Keep in-page anchor targets clear of the sticky header at every width
   (.article and .scene already set this; add the remaining anchored blocks). */
.section, .faq__group, .faq__item { scroll-margin-top: 90px; }

/* Comfortable tap targets (≥44px) on navigation, footer, and docs links. */
.nav__link, .nav__cta { display: inline-flex; align-items: center; min-height: 44px; }
.docs__navlink { display: flex; align-items: center; min-height: 44px; }
.footer__col a { display: flex; align-items: center; min-height: 44px; padding: 3px 0; }
.footer__bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* Slightly stronger contrast on navigation-bearing group titles. */
.faq__grouptitle, .docs__grouptitle { color: rgba(232, 238, 248, 0.58); }

/* FAQ on-page table of contents — wrapping chip row of the group titles. */
.faq__toc { display: flex; flex-wrap: wrap; gap: var(--s2); margin-bottom: var(--s7); }
.faq__toc a {
  display: inline-flex; align-items: center; min-height: 36px;
  padding: 7px 13px; border-radius: 100px;
  font: 600 12.5px/1 var(--font-sans); color: var(--copy);
  background: var(--well-fill);
  box-shadow: 0 0 0 0.5px var(--well-stroke), inset 0 1px 0 rgba(255, 255, 255, 0.03);
}
.faq__toc a:hover { color: var(--title); }

/* Compact single-row nav on phones — scroll the links instead of wrapping to
   a 2–3 row sticky header. */
@media (max-width: 679px) {
  .nav__inner { flex-wrap: nowrap; gap: var(--s2); }
  .nav__links {
    min-width: 0; margin-left: auto; gap: var(--s3);
    flex-wrap: nowrap; white-space: nowrap;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
  }
  .nav__link { font-size: 13px; }
  .nav__cta { padding-left: 12px; padding-right: 12px; flex: 0 0 auto; }
}

/* ── 20 · COMPLETE USER MANUAL ───────────────────────────────────────────── */
.nav__link[aria-current="page"] { color: var(--title); }

.manual-hero { padding: var(--s8) 0 var(--s6); }
.manual-hero .section__lead { max-width: 68ch; }
.manual__route {
  max-width: 72ch;
  margin-top: var(--s3);
  font-size: 14.5px;
  color: var(--copy);
}
.manual__route a {
  color: var(--gold-text);
  text-decoration: underline;
  text-decoration-color: var(--gold-border);
  text-underline-offset: 3px;
}
.manual__route a:hover { color: var(--title); text-decoration-color: currentColor; }
.manual__revision {
  margin-top: var(--s4);
  font: 600 11.5px/1.5 var(--font-mono);
  letter-spacing: 0.025em;
  color: var(--copy-dim);
}
.manual-section { padding-top: var(--s3); }
.manual-section .docs,
.manual-section .docs__nav,
.manual-section .docs__body { min-width: 0; max-width: 100%; }

.manual-search {
  margin-bottom: var(--s6);
  padding: var(--s5);
  border-radius: var(--r-card);
  background: linear-gradient(180deg, var(--chassis-top), var(--chassis-bot));
  box-shadow: 0 0 0 0.5px var(--chassis-stroke), inset 0 1px 0 var(--chassis-bevel);
}
.manual-search > label {
  display: block;
  margin-bottom: var(--s3);
  font: 700 13px/1.2 var(--font-sans);
  color: var(--title);
}
.manual-search__field {
  display: flex;
  align-items: center;
  gap: var(--s3);
  min-height: 48px;
  padding: 0 var(--s4);
  border-radius: var(--r-panel);
  color: var(--copy-dim);
  background: var(--well-fill);
  box-shadow: inset 0 0 0 1px var(--well-stroke);
}
.manual-search__field:focus-within {
  color: var(--gold-text);
  box-shadow: inset 0 0 0 1px rgba(217, 177, 92, 0.55), 0 0 0 3px rgba(217, 177, 92, 0.08);
}
.manual-search__field input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  padding: 13px 0;
  color: var(--ink);
  background: transparent;
  font: 500 15px/1.35 var(--font-sans);
}
.manual-search__field input::placeholder { color: var(--copy-dim); opacity: 0.78; }
.manual-search__field input::-webkit-search-cancel-button { cursor: pointer; }
.manual-search__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s3);
  font-size: 12px;
  color: var(--copy-dim);
}
#manual-search-status { flex: 0 0 auto; color: var(--gold-text); }

mark[data-manual-highlight] {
  padding: 0 0.08em;
  border-radius: 2px;
  color: var(--title);
  background: rgba(250, 204, 21, 0.24);
  box-shadow: 0 0 0 1px rgba(250, 204, 21, 0.16);
  scroll-margin-top: 110px;
}

.manual-section .docs__navlink {
  gap: 9px;
  line-height: 1.35;
}
.manual-section .docs__navlink > span {
  flex: 0 0 20px;
  font: 700 10px/1 var(--font-mono);
  color: var(--label-mute);
}
.manual-section .article { position: relative; }
.article__eyebrow {
  margin-bottom: var(--s2);
  font: 700 10px/1 var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold-text);
}
.manual-section .article h3 {
  scroll-margin-top: 94px;
  margin: var(--s6) 0 var(--s3);
  font: 750 17px/1.3 var(--font-sans);
  letter-spacing: -0.005em;
  color: var(--title);
}
.manual-section .article h3:first-of-type { margin-top: var(--s5); }
.manual-section .article ol {
  display: grid;
  gap: var(--s2);
  max-width: 72ch;
  margin: 0 0 var(--s4);
  padding-left: 24px;
}
.manual-section .article a { color: var(--gold-text); text-decoration-color: transparent; }
.manual-section .article a:hover { color: var(--title); text-decoration-color: currentColor; }
.anchor-alias { display: block; height: 0; scroll-margin-top: 94px; }

.article__pager {
  display: flex;
  justify-content: space-between;
  gap: var(--s4);
  margin-top: var(--s7);
  padding-top: var(--s4);
  border-top: 1px solid var(--hairline);
}
.article__pager a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  max-width: 46%;
  font-size: 12.5px;
  line-height: 1.4;
}
.article__pager a:last-child { margin-left: auto; text-align: right; }

.manual-faq__item {
  scroll-margin-top: 94px;
  border-top: 1px solid var(--hairline);
}
.manual-faq__item:first-of-type { margin-top: var(--s4); }
.manual-faq__item summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: var(--s4) 34px var(--s4) 0;
  font: 700 15px/1.45 var(--font-sans);
  color: var(--title);
}
.manual-faq__item summary::-webkit-details-marker { display: none; }
.manual-faq__item summary::after {
  content: "+";
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  font: 700 18px/1 var(--font-mono);
  color: var(--gold-text);
}
.manual-faq__item[open] summary::after { content: "\2013"; }
.manual-faq__answer { padding: 0 0 var(--s4); }
.manual-faq__answer p:last-child { margin-bottom: 0; }

.manual-glossary {
  max-width: 72ch;
  margin: 0 0 var(--s5);
}
.manual-glossary > div {
  display: grid;
  grid-template-columns: minmax(110px, 0.34fr) minmax(0, 1fr);
  gap: var(--s4);
  padding: 10px 0;
  border-top: 1px solid var(--hairline);
}
.manual-glossary dt { font-weight: 700; color: var(--ink); }
.manual-glossary dd { margin: 0; color: var(--copy); }

.manual-empty {
  border-radius: var(--r-card);
  padding: var(--s7) var(--s6);
  text-align: center;
  background: var(--panel-fill);
  box-shadow: 0 0 0 0.5px var(--panel-stroke), inset 0 1px 0 var(--panel-bevel);
}
.manual-empty h2 { margin-bottom: var(--s2); color: var(--title); font-size: 20px; }
.manual-empty p { color: var(--copy-dim); }

@media (min-width: 900px) {
  .manual-section .docs__nav {
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: var(--s3);
    scrollbar-width: thin;
  }
}

@media (max-width: 899px) {
  .manual-section .docs__nav {
    display: flex;
    width: 100%;
    gap: var(--s3);
    overflow-x: auto;
    padding: 1px 1px var(--s4);
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
  }
  .manual-section .docs__group {
    flex: 0 0 min(260px, 78vw);
    min-width: 0;
    scroll-snap-align: start;
    margin-top: 0;
    padding: var(--s4);
    border-radius: var(--r-panel);
    background: var(--panel-fill);
    box-shadow: 0 0 0 0.5px var(--panel-stroke), inset 0 1px 0 var(--panel-bevel);
  }
}

@media (max-width: 560px) {
  .manual-search { padding: var(--s4); }
  .manual-search__meta { display: grid; gap: 4px; }
  .article__pager { display: grid; }
  .article__pager a { max-width: none; }
  .article__pager a:last-child { margin-left: 0; text-align: left; }
  .manual-glossary > div { grid-template-columns: 1fr; gap: 3px; }
}

@media print {
  .nav, .footer, .manual-search, .docs__nav, .article__pager { display: none; }
  .manual-hero { padding: 0 0 18pt; }
  .manual-section { padding: 0; }
  .docs { display: block; }
  .docs__body { display: block; }
  .article {
    break-before: page;
    margin: 0;
    padding: 0;
    background: transparent;
    box-shadow: none;
  }
  .article:first-of-type { break-before: auto; }
  .manual-faq__item > .manual-faq__answer { display: block; }
}