/* ═══════════════════════════════════════════════════════════════════════
   CHECKBOX — the editorial section system
   Implements docs/marketing/REDESIGN-AUDIT-2026-08-07.md.

   ONE reusable system of editorial sections — deliberately NOT a universal
   card. Cards survive only where they represent a real product entity, a
   price or an interactive decision; everything else is composition, line,
   rhythm and negative space.

   Loaded by BOTH hosts so language parity never depends on maintaining two
   visual systems:
     · the static landings (landing.html / coach.html + their .es twins),
       whose tokens are --cy / --text / --surface / --line   (landing.css)
     · the React routes under app/(marketing)/*, whose tokens are
       --mk-cy / --mk-text / ...                             (marketing-nav.css)
   Every value below resolves --cy first, then --mk-cy, then a literal, so a
   single stylesheet renders identically in both.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Bridged tokens ──────────────────────────────────────────────────── */

.ed-scope,
.mk-page,
body {
  --ed-bg:        var(--bg,        var(--mk-bg,        #000000));
  --ed-surface:   var(--surface,   var(--mk-surface,   #0d0f12));
  --ed-surface-2: var(--surface-2, var(--mk-surface-2, #14171b));
  --ed-line:      var(--line,      var(--mk-line,      rgba(255,255,255,.07)));
  --ed-line-2:    var(--line-2,    rgba(255,255,255,.04));
  --ed-text:      var(--text,      var(--mk-text,      #F3F5F8));
  --ed-text-2:    var(--text-2,    var(--mk-text-2,    #9AA0A9));
  --ed-text-3:    var(--text-3,    var(--mk-text-3,    #5A606A));
  --ed-cy:        var(--cy,        var(--mk-cy,        #E6FC60));
  --ed-on-cy:     var(--on-cy,     var(--mk-on-cy,     #10130A));

  --ed-font:  var(--font-sans, var(--mk-font, 'Geist', system-ui, -apple-system, sans-serif));
  --ed-mono:  var(--font-mono, var(--mk-mono, 'Geist Mono', ui-monospace, monospace));
  --ed-hand:  var(--font-hand, 'Caveat', cursive);

  --ed-ease:  var(--ease, cubic-bezier(.22,.61,.36,1));

  /* Rhythm. Chapters breathe — but "mostly ground" was taken literally and the
     page became mostly ground: measured at 1440px, every section seam was 259px
     of nothing (130 top + 130 bottom), 3,242px of dead vertical space across
     eleven seams, and the average viewport was 87-96% empty black. Air is not
     composition. The seam is now ~150px, which still separates chapters without
     making the reader scroll through vacuum to find the next one. */
  --ed-gutter: 24px;
  --ed-max:    1180px;
  --ed-narrow: 760px;
  --ed-chapter-y: clamp(52px, 5.2vw, 86px);
}

@media (max-width: 640px) {
  .ed-scope, .mk-page, body { --ed-gutter: 20px; --ed-chapter-y: 64px; }
}

/* ═══ 1 · Chapter — one story per viewport ═══════════════════════════ */

.ed-chapter {
  position: relative;
  padding: var(--ed-chapter-y) var(--ed-gutter);
  font-family: var(--ed-font);
}
.ed-chapter--flush   { padding-top: 0; }
.ed-chapter--tight   { padding-block: clamp(48px, 5vw, 72px); }
.ed-chapter--hairline { border-top: 1px solid var(--ed-line); }

.ed-wrap   { max-width: var(--ed-max); margin: 0 auto; }
.ed-wrap--narrow { max-width: var(--ed-narrow); margin: 0 auto; }

/* Composition variants — desktop must NOT always be text-left/art-right.
   The audit calls for alternating centre, split, art-dominant and overlay. */

.ed-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(32px, 5vw, 76px);
  align-items: center;
}
/* Grid items default to min-width:auto, so any child with a wide min-content
   silently grows the track and pushes past the gutter — invisible here only
   because the page clips horizontally. Every column opts out explicitly. */
.ed-split > *, .ed-overlay > * { min-width: 0; }
.ed-split--flip > .ed-split__copy { order: 2; }
.ed-split--flip > .ed-split__vis  { order: 1; }
/* Art dominant: the illustration carries the viewport, copy is a margin note. */
.ed-split--art { grid-template-columns: minmax(0, .78fr) minmax(0, 1.9fr); align-items: end; }
/* Copy dominant: used when the proof, not the picture, is the reward. */
.ed-split--copy { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }

@media (max-width: 900px) {
  /* Order and scale change on mobile — never a plain column stack. */
  .ed-split { grid-template-columns: 1fr; gap: 30px; }
  .ed-split--flip > .ed-split__copy,
  .ed-split--flip > .ed-split__vis { order: 0; }
  .ed-split--lead-vis > .ed-split__vis { order: -1; }
}

.ed-center { text-align: center; }
.ed-center .ed-lede { margin-left: auto; margin-right: auto; }
.ed-center .ed-actions { justify-content: center; }

/* Overlay: art bleeds behind, copy sits on the negative space. */
.ed-overlay { position: relative; display: grid; }
.ed-overlay > * { grid-area: 1 / 1; }
.ed-overlay__art { justify-self: end; width: min(78%, 820px); opacity: .82; pointer-events: none; }
.ed-overlay__copy { align-self: center; max-width: 34rem; position: relative; }
@media (max-width: 900px) {
  .ed-overlay > * { grid-area: auto; }
  .ed-overlay__art { width: 100%; justify-self: stretch; opacity: 1; margin-top: 22px; }
}

/* ═══ 2 · Type — grotesque, compact, sentence case ═══════════════════ */

/* Eyebrow: sentence case. ALL CAPS is reserved for brief metadata (.ed-meta),
   never for a heading or a section label. */
.ed-eyebrow {
  display: block; margin: 0 0 14px;
  font-size: 13px; font-weight: 550; letter-spacing: -.005em;
  color: var(--ed-text-3);
}
.ed-eyebrow--accent { color: var(--ed-cy); }

.ed-display {
  margin: 0;
  font-size: clamp(40px, 6.4vw, 88px); font-weight: 900;
  letter-spacing: -.042em; line-height: .97; text-wrap: balance;
  color: var(--ed-text);
}
.ed-title {
  margin: 0;
  font-size: clamp(30px, 4vw, 54px); font-weight: 850;
  letter-spacing: -.035em; line-height: 1.04; text-wrap: balance;
  color: var(--ed-text);
}
.ed-subtitle {
  margin: 0;
  font-size: clamp(21px, 2.2vw, 27px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.18; text-wrap: balance;
  color: var(--ed-text);
}
.ed-kicker {
  margin: 0 0 10px;
  font-size: 15px; font-weight: 650; letter-spacing: -.012em;
  color: var(--ed-text);
}

/* Lede: 60–70 characters max, per the audit. */
.ed-lede {
  margin: 22px 0 0; max-width: 62ch;
  font-size: clamp(16.5px, 1.35vw, 19px); font-weight: 450;
  line-height: 1.62; letter-spacing: -.011em;
  color: var(--ed-text-2); text-wrap: pretty;
}
.ed-body {
  margin: 14px 0 0; max-width: 66ch;
  font-size: 15.5px; line-height: 1.66; letter-spacing: -.006em;
  color: var(--ed-text-2); text-wrap: pretty;
}
.ed-body--tight { margin-top: 8px; font-size: 14.5px; line-height: 1.58; }
.ed-accent { color: var(--ed-cy); }

/* Monospace: ONLY time, frequency, state, provenance, technical microcopy. */
.ed-meta {
  font-family: var(--ed-mono);
  font-size: 10.5px; font-weight: 600; letter-spacing: .15em;
  text-transform: uppercase; color: var(--ed-text-3);
}
.ed-meta--plain { text-transform: none; letter-spacing: .04em; font-size: 11.5px; }

/* Handwriting: a human intervention of 2–6 words. Never structural type. */
.ed-hand {
  display: inline-block; font-family: var(--ed-hand);
  font-size: clamp(23px, 2.4vw, 30px); font-weight: 600; line-height: 1;
  color: var(--ed-cy); letter-spacing: .005em;
}
.ed-hand--aside {
  display: block; margin-top: 20px; font-size: clamp(20px, 1.9vw, 25px);
  transform: rotate(-1.6deg); transform-origin: left center;
}

/* ═══ 3 · Actions — one primary per viewport, max two in a hero ══════ */

.ed-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 32px; }
.ed-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 52px; padding: 0 26px; border-radius: 999px;
  font-family: var(--ed-font); font-size: 16px; font-weight: 600; letter-spacing: -.012em;
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: background .2s var(--ed-ease), transform .14s var(--ed-ease), border-color .2s var(--ed-ease);
  -webkit-tap-highlight-color: transparent;
}
.ed-btn:active { transform: scale(.975); }
/* Solid accent fill is licensed on the primary CTA. Never a glow, never a
   tinted wash, never an accent border. */
.ed-btn--primary { background: var(--ed-cy); color: var(--ed-on-cy); }
.ed-btn--primary:hover { background: var(--cy-2, var(--mk-cy-2, #CADE54)); }
.ed-btn--secondary { background: var(--ed-surface); color: var(--ed-text); border-color: var(--ed-line); }
.ed-btn--secondary:hover { background: var(--ed-surface-2); }
/* Discreet secondary action: a text link, so the hero keeps ONE dominant CTA. */
.ed-btn--quiet { min-height: 44px; padding: 0 6px; background: none; color: var(--ed-text-2); font-weight: 550; }
.ed-btn--quiet:hover { color: var(--ed-text); }

.ed-link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font-size: 15px; font-weight: 600; letter-spacing: -.012em;
  color: var(--ed-text); text-decoration: none;
}
.ed-link:hover { color: var(--ed-cy); }
.ed-link__arrow { transition: transform .2s var(--ed-ease); }
.ed-link:hover .ed-link__arrow { transform: translateX(3px); }

/* ═══ 4 · Editorial art ══════════════════════════════════════════════ */

/* No rounded mask by default: the reference compositions work because the
   line floats on the black ground instead of reading as another card. */
.ed-figure { margin: 0; position: relative; }
.ed-figure__media { display: block; width: 100%; }
.ed-figure img,
.editorial-art {
  display: block; width: 100%; height: auto;
  object-fit: contain; background: transparent;
}
/* Explicit aspect ratios prevent layout shift before the bitmap lands. */
.ed-figure--wide   .editorial-art { aspect-ratio: 1931 / 814; }
.ed-figure--scene  .editorial-art { aspect-ratio: 1536 / 1024; }

.ed-figure__cap {
  display: block; margin-top: 16px; max-width: 46ch;
  font-size: 13.5px; line-height: 1.55; letter-spacing: -.005em;
  color: var(--ed-text-3);
}
.ed-figure--center .ed-figure__cap { margin-inline: auto; text-align: center; }

/* 01-class-chain-master is a panorama: never shrink it until its seven scenes
   go illegible. Below 1024px the HTML step sequence takes over. */
.ed-art-desktop { display: block; }
.ed-art-mobile  { display: none; }
@media (max-width: 1023px) {
  .ed-art-desktop { display: none; }
  .ed-art-mobile  { display: block; }
}

/* ═══ 5 · The continuous line ════════════════════════════════════════ */

/* One line turns several moments into a single story — this is what replaces
   the repeated rows of identical cards. */
.ed-rail { position: relative; margin: 0; padding: 0 0 0 34px; list-style: none; }
.ed-rail::before {
  content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 1px;
  background: linear-gradient(180deg, transparent, var(--ed-line) 8%, var(--ed-line) 92%, transparent);
}
.ed-rail__item { position: relative; padding-bottom: 30px; }
.ed-rail__item:last-child { padding-bottom: 0; }
.ed-rail__item::before {
  content: ''; position: absolute; left: -34px; top: 7px;
  width: 15px; height: 15px; border-radius: 999px;
  background: var(--ed-bg); border: 1px solid var(--ed-line);
}
/* The accent lives in the glyph — a small dot — never as a fill or border. */
.ed-rail__item::after {
  content: ''; position: absolute; left: -29px; top: 12px;
  width: 5px; height: 5px; border-radius: 999px; background: var(--ed-text-3);
}
.ed-rail__item--on::after { background: var(--ed-cy); }
.ed-rail__label { display: block; margin-bottom: 3px; }
.ed-rail__title { display: block; font-size: 16.5px; font-weight: 650; letter-spacing: -.018em; color: var(--ed-text); }
.ed-rail__body  { display: block; margin-top: 5px; max-width: 54ch; font-size: 14.5px; line-height: 1.55; color: var(--ed-text-2); }

/* Progressive draw, 500–900ms on enter. The collapsed state is armed by
   JS (.is-armed), never by the stylesheet — with scripting off or broken the
   line is simply drawn. Content never depends on animation. */
.ed-rail.is-armed::before { transform-origin: top; transform: scaleY(0); }
.ed-rail.is-armed.is-drawn::before { transform: scaleY(1); transition: transform .78s var(--ed-ease); }

/* Horizontal variant for a short pipeline (developers, organizations). */
.ed-flow { display: grid; gap: 0; margin-top: 34px; grid-auto-flow: column; grid-auto-columns: 1fr; }
.ed-flow__step { position: relative; padding: 0 20px 0 0; }
.ed-flow__step::before {
  content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 1px; background: var(--ed-line);
}
.ed-flow__step:last-child::before { right: 20px; }
.ed-flow__dot {
  position: relative; display: block; width: 15px; height: 15px; border-radius: 999px;
  background: var(--ed-bg); border: 1px solid var(--ed-line); margin-bottom: 16px;
}
.ed-flow__dot::after {
  content: ''; position: absolute; inset: 4px; border-radius: 999px; background: var(--ed-text-3);
}
.ed-flow__step--on .ed-flow__dot::after { background: var(--ed-cy); }
.ed-flow__name { display: block; font-size: 15.5px; font-weight: 650; letter-spacing: -.016em; color: var(--ed-text); }
.ed-flow__note { display: block; margin-top: 5px; font-size: 13.5px; line-height: 1.5; color: var(--ed-text-2); }
@media (max-width: 860px) {
  .ed-flow { grid-auto-flow: row; grid-auto-columns: auto; gap: 0; padding-left: 34px; position: relative; }
  .ed-flow::before {
    content: ''; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 1px; background: var(--ed-line);
  }
  .ed-flow__step { padding: 0 0 26px; }
  .ed-flow__step::before { display: none; }
  .ed-flow__step:last-child { padding-bottom: 0; }
  .ed-flow__dot { position: absolute; left: -34px; top: 2px; margin: 0; }
}

/* ═══ 5b · Step sequence — one scene at a time ═══════════════════════
   The narrow-screen substitute for the panoramic chain: the reader moves,
   nothing auto-advances. */

.ed-steps { position: relative; }
.ed-steps__scene { }
.ed-steps__scene[hidden] { display: none; }
.ed-steps__idx { display: block; margin-bottom: 8px; }
.ed-steps__nav { display: flex; align-items: center; gap: 10px; margin-top: 22px; }
.ed-steps__btn {
  width: 44px; height: 44px; border-radius: 999px; flex: 0 0 auto;
  background: var(--ed-surface); border: 1px solid var(--ed-line); color: var(--ed-text);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .2s var(--ed-ease);
}
.ed-steps__btn:hover:not(:disabled) { background: var(--ed-surface-2); }
.ed-steps__btn:disabled { opacity: .35; cursor: default; }
.ed-steps__dots { display: flex; align-items: center; gap: 7px; margin-left: 4px; }
.ed-steps__dot {
  width: 24px; height: 24px; padding: 0; border: none; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.ed-steps__dot::before {
  content: ''; width: 6px; height: 6px; border-radius: 999px; background: var(--ed-text-3);
  transition: background .2s var(--ed-ease), transform .2s var(--ed-ease);
}
.ed-steps__dot[aria-current="true"]::before { background: var(--ed-cy); transform: scale(1.34); }
.ed-steps__count { margin-left: auto; }

/* ═══ 6 · Ledger — annotated rows, no decorative squares ═════════════ */

/* Rule 3 of the audit: never a decorative square beside a list. Rhythm comes
   from a rule, an index number and type — never from a fake checkbox. */
.ed-ledger { margin: 30px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--ed-line); }
.ed-ledger__row {
  display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto;
  gap: 18px; align-items: baseline;
  padding: 20px 0; border-bottom: 1px solid var(--ed-line);
}
.ed-ledger__idx { font-family: var(--ed-mono); font-size: 12px; font-weight: 600; color: var(--ed-text-3); letter-spacing: .04em; }
.ed-ledger__main { min-width: 0; }
.ed-ledger__title { display: block; font-size: 16.5px; font-weight: 650; letter-spacing: -.018em; color: var(--ed-text); }
.ed-ledger__note { display: block; margin-top: 6px; max-width: 60ch; font-size: 14.5px; line-height: 1.58; color: var(--ed-text-2); }
.ed-ledger__aside { font-family: var(--ed-mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--ed-text-3); white-space: nowrap; }
@media (max-width: 720px) {
  .ed-ledger__row { grid-template-columns: 2.2rem minmax(0, 1fr); }
  .ed-ledger__aside { grid-column: 2; }
}

/* Bare list with typographic rhythm — the alternative to bullet squares. */
.ed-list { margin: 20px 0 0; padding: 0; list-style: none; max-width: 62ch; }
.ed-list li {
  position: relative; padding-left: 22px; margin-bottom: 12px;
  font-size: 15.5px; line-height: 1.6; color: var(--ed-text-2);
}
.ed-list li::before {
  content: ''; position: absolute; left: 2px; top: .68em;
  width: 9px; height: 1px; background: var(--ed-text-3);
}
.ed-list--accent li::before { background: var(--ed-cy); }

/* ═══ 7 · Product stage — a sober frame around REAL product ══════════ */

/* Rule 6: never turn a whole screenshot into a promo image. Real product is
   assembled inside a restrained stage. Neutral hairline only — no accent
   border, no tinted fill, no black sunken container. */
.ed-stage {
  position: relative; border-radius: 26px;
  background: var(--ed-surface); border: 1px solid var(--ed-line);
  box-shadow: 0 18px 44px rgba(0,0,0,.55);
  padding: clamp(16px, 2.2vw, 24px);
}
.ed-stage--bare { background: none; border: none; box-shadow: none; padding: 0; }
.ed-stage__head {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  margin-bottom: 16px; padding: 0 4px;
}
.ed-stage__caption { margin-top: 16px; font-size: 13px; line-height: 1.5; color: var(--ed-text-3); }

/* Circular icon well — icon containers are circles, glyph ≈ 40% of the well. */
.ed-well {
  width: 44px; height: 44px; border-radius: 999px; flex: 0 0 auto;
  background: var(--ed-surface-2); border: 1px solid var(--ed-line);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ed-cy);
}
.ed-well--sm { width: 34px; height: 34px; }

/* ═══ 8 · Accessible tabs (progress & depth, code samples) ═══════════ */

.ed-tabs { margin-top: 30px; }
.ed-tabs__list { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px; border-radius: 999px; background: var(--ed-surface); border: 1px solid var(--ed-line); width: fit-content; max-width: 100%; }
.ed-tab {
  appearance: none; border: none; background: none; cursor: pointer;
  min-height: 44px; padding: 0 18px; border-radius: 999px;
  font-family: var(--ed-font); font-size: 14.5px; font-weight: 600; letter-spacing: -.012em;
  color: var(--ed-text-2); white-space: nowrap;
  transition: color .2s var(--ed-ease), background .2s var(--ed-ease);
}
.ed-tab:hover { color: var(--ed-text); }
/* Selected state = the brand key: solid accent fill, metallic rim, emboss.
   No glow — the cyan halo is exclusive to the two slide keys. */
.ed-tab[aria-selected="true"] {
  background: var(--ed-cy); color: var(--ed-on-cy);
  border: 1px solid #353a42;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.30), 0 2px 5px rgba(0,0,0,.5);
}
/* Narrow screens: the pills become a horizontal scroller instead of overflowing.
   `white-space: nowrap` + `flex-wrap: wrap` let a long label push past the list's
   max-width, and because the page itself does not scroll horizontally the tab
   ended up unreachable at 390px. Same behaviour as the app's FrequencyTabs
   (mobile/components/tasks/FrequencyTabs.tsx): a scrollable row of round pills. */
@media (max-width: 640px) {
  .ed-tabs { margin-inline: calc(var(--ed-gutter, 20px) * -1); }
  .ed-tabs__list {
    width: auto; max-width: none; flex-wrap: nowrap;
    overflow-x: auto; overscroll-behavior-x: contain;
    scrollbar-width: none; -ms-overflow-style: none;
    margin-inline: var(--ed-gutter, 20px);
  }
  .ed-tabs__list::-webkit-scrollbar { display: none; }
  .ed-tab { flex: 0 0 auto; padding: 0 15px; font-size: 13.5px; }
}
.ed-tabs__panel { margin-top: 26px; }
.ed-tabs__panel[hidden] { display: none; }

/* ═══ 9 · Typographic pause ══════════════════════════════════════════ */

/* A held breath between chapters — one sentence, wide margins, no panel. */
.ed-pause { padding: clamp(84px, 11vw, 152px) var(--ed-gutter); text-align: center; }
.ed-pause__line {
  margin: 0 auto; max-width: 24ch;
  font-size: clamp(28px, 4.2vw, 52px); font-weight: 800;
  letter-spacing: -.038em; line-height: 1.1; color: var(--ed-text); text-wrap: balance;
}
.ed-pause__by { display: block; margin-top: 22px; font-size: 13.5px; color: var(--ed-text-3); }

/* ═══ 10 · Semantic comparison table (replaces card matrices) ════════ */

.ed-table { width: 100%; margin-top: 30px; border-collapse: collapse; font-size: 15px; }
.ed-table caption { text-align: left; padding-bottom: 14px; font-size: 13.5px; color: var(--ed-text-3); }
.ed-table th, .ed-table td { padding: 16px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--ed-line); }
.ed-table th { font-weight: 650; letter-spacing: -.014em; color: var(--ed-text); }
.ed-table thead th { font-family: var(--ed-mono); font-size: 10.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-text-3); border-bottom-color: var(--ed-line); }
.ed-table td { color: var(--ed-text-2); line-height: 1.55; }
.ed-table__yes { color: var(--ed-cy); }
@media (max-width: 720px) {
  .ed-table, .ed-table tbody, .ed-table tr, .ed-table td, .ed-table th { display: block; }
  .ed-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .ed-table tr { padding: 18px 0; border-bottom: 1px solid var(--ed-line); }
  .ed-table th, .ed-table td { border: none; padding: 0 0 8px; }
  .ed-table td::before { content: attr(data-label); display: block; margin-bottom: 4px; font-family: var(--ed-mono); font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ed-text-3); }
}

/* ═══ 11 · Motion ════════════════════════════════════════════════════ */

/* Nothing ambient, no scroll-jacking, no auto carousels. Content enters once
   and stays. Product interactions live in the 180–380ms band.

   .ed-rv is a marker only — the hidden state is applied inline by
   editorial.js and only to elements below the first viewport, so a reader
   with scripting off (or a script that fails) sees the whole page. */
.ed-rv.is-in { opacity: 1 !important; transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  /* Reduced motion shows the illustration and the line complete, with no
     transition — never a hidden element waiting on an animation. */
  .ed-rv { opacity: 1 !important; transform: none !important; transition: none !important; }
  .ed-rail.is-armed::before { transform: none !important; transition: none !important; }
  .ed-btn, .ed-link__arrow, .ed-tab { transition: none !important; }
}

/* ═══ 12 · Accent recolouring of editorial art ═══════════════════════ */

/* One master per composition; a deterministic colour matrix maps the lime
   line and its halo onto the selected accent. Never applied to real product
   UI, screenshots, portraits or archival documents. */
.editorial-art { filter: none; }
html[data-accent="blue"] .editorial-art { filter: url(#cbx-art-blue); }
html[data-accent="pink"] .editorial-art { filter: url(#cbx-art-pink); }

/* ═══ 13 · Accessibility ═════════════════════════════════════════════ */

.ed-scope :focus-visible,
.mk-page :focus-visible {
  outline: 2px solid var(--ed-cy); outline-offset: 3px; border-radius: 6px;
}
.ed-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Supporting microcopy inside product stages ──────────────────────
   The technical note under a proof line: prose in sentence case, not a
   monospace caps banner. */
.ve-sub { font-size: 12.5px; line-height: 1.5; color: var(--ed-text-3); }

/* ── Movements inside a chapter ───────────────────────────────────────
   When several former sections become one chapter, each keeps its own
   breathing room — merged does not mean crushed together. */
.ed-movement + .ed-movement { margin-top: clamp(56px, 6vw, 96px); }
/* The chapter owns the outer padding, so a movement never adds its own. */
.ed-chapter > .ed-movement > .section,
.ed-chapter > .ed-movement > .sc-section { padding-left: 0; padding-right: 0; }
/* Section heads inside a movement keep the editorial rhythm. */
.ed-sec-head { display: flex; flex-direction: column; align-items: center; text-align: center; }
.ed-sec-head .ed-lede { margin-left: auto; margin-right: auto; }

/* Anchors must never land a chapter heading under the fixed pill bar. */
.ed-chapter { scroll-margin-top: 124px; }

/* ═══ 14 · Touch targets ═════════════════════════════════════════════
   The punched checkbox is specified at 26 × 26 by the fidelity contract and
   must not grow, so it gets its 44px of finger from an invisible extension
   instead. Same for the small step dots. */
button.cbx-check, .ed-steps__dot { position: relative; }
button.cbx-check::after, .ed-steps__dot::after {
  content: ''; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}
/* The dot's own marker is drawn by ::before, so ::after is free for the
   hit area — keep it behind the marker. */
.ed-steps__dot::after { z-index: -1; }

/* ═══ 15 · App shots — real captures from the shipped app ══════════════
   Every screen here is a PNG taken off a device forced to 1440x2932 @560dpi,
   cropped of the host OS chrome and served as WebP. Because the visitor picks
   the accent and the page follows live, each screen exists three times — lime,
   blue and pink — and the swap is a real re-render of the app in that accent,
   not a colour filter over one master. (Filters are right for the editorial
   illustrations, which are flat art; they would lie about a screenshot, where
   the accent lands on a ring, a glyph and a key with different inks.)

   Three presentations, deliberately unalike: a captured screen must never
   become the page's next repeated object. */

/* The phone — reuses the frame the tour videos already sit in, so a screen and
   a clip are the same physical device on the page. */
.app-shot { margin: 0; }
.vid-screen img,
.app-shot__screen img { display: block; width: 100%; height: auto; }

/* Two screens standing together: the second sits back and slightly lower, so
   the pair reads as depth rather than as two equal tiles. */
.app-pair { display: flex; align-items: flex-end; justify-content: center; gap: clamp(12px, 2.5vw, 28px); }
.app-pair > * { flex: 0 1 auto; min-width: 0; }
.app-pair__lead { width: min(330px, 54%); }
.app-pair__rest { width: min(268px, 44%); margin-bottom: clamp(18px, 4vw, 44px); opacity: .92; }

/* Bleed — no frame at all. The capture is masked into the page so the screen
   dissolves at the bottom instead of ending on a hard edge. */
.app-bleed { position: relative; width: min(360px, 100%); margin: 0 auto; }
.app-bleed img {
  display: block; width: 100%; height: auto;
  border-radius: 26px;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
          mask-image: linear-gradient(180deg, #000 0%, #000 72%, transparent 100%);
}

/* Slice — a window onto ONE horizontal band of a capture, wider than a phone
   frame, so a block that is a third of a screen becomes the whole picture. Each
   use sets its own `aspect-ratio` and image `top` (percentages of the window)
   to choose the band.

   Zooming past 100% was tried and rejected: at 160% the hierarchy read larger
   but the phone is wider than the window, so every line lost its last word off
   the right edge. A band of TEXT wants full width and a tight vertical crop —
   the enlargement comes from the window being wider than a phone, not from
   scaling the image up. */
.app-crop {
  position: relative; overflow: hidden;
  border-radius: 22px; border: 1px solid var(--line, rgba(255,255,255,.09));
  background: var(--bg-soft, #0b0d10);
}
.app-crop img { position: absolute; left: 0; width: 100%; height: auto; max-width: none; }

.app-cap {
  margin-top: 14px; text-align: center;
  font-family: var(--font-mono); font-size: 10px; font-weight: 500;
  letter-spacing: .13em; text-transform: uppercase; color: var(--text-3);
}

@media (max-width: 700px) {
  /* The pair would put two 150px phones side by side — below the width where a
     screenshot says anything. One screen, at a size you can actually read. */
  .app-pair { display: block; }
  .app-pair__lead, .app-pair__rest { width: min(330px, 100%); margin: 0 auto; }
  .app-pair__rest { margin-top: 22px; opacity: 1; }
}

/* A capture standing in a two-column depth split is a whole phone against one
   small card, so it is held below the column width — otherwise the phone sets
   the row height and the card floats in a column of black. */
.depth-split .app-shot .vid-phone { width: min(320px, 100%); }
/* ...and the split itself is capped. The auto-fit columns stretch to the full
   measure, which with a 320px phone on one side and one small card on the other
   left a river of black down the middle. */
.depth-split:has(.app-shot) { max-width: 940px; margin-inline: auto; }

/* The proof sheet is mostly empty BY DESIGN — one validation and a lot of calm
   between it and the locked footer. At full phone width that emptiness becomes
   the loudest thing in the panel, and an edge crop cannot remove space that
   sits in the middle of the screen. So this one exhibit is held smaller and
   pulled closer to the sentence it proves; the calm then reads as the app being
   quiet rather than as the page having nothing to say. */
/* ...and the phone follows the column it belongs to. Centred, it read as a
   second, unrelated object floating under a left-rag panel. */
#proof .app-shot .vid-phone { width: min(300px, 100%); margin-inline: 0; }
#proof .app-shot .app-cap { text-align: left; }

/* ═══ 16 · The lives fan ═══════════════════════════════════════════════
   The creative director's count: 8 of 13 sections were the same object —
   eyebrow, title, paragraph, art beside it — and FOUR of them ran back to
   back, the three life chapters plus Second Chance. By the fourth the reader
   stops seeing the argument and starts seeing the template.

   So the three lives stop alternating sides and become one object read ACROSS:
   a snap rail of three chapters, art on top, each with its own door. The
   composition changes from "two columns, again" to "one row you move through",
   which also matches what the content is — three peers, not three arguments in
   sequence. Second Chance keeps the split, and now stands alone in it. */
.life-fan {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(clamp(258px, 74vw, 300px), 1fr);
  gap: clamp(14px, 2vw, 26px);
  /* Intrinsic heights by default. Stretching every card to the tallest sibling
     only pays off when the three are side by side; inside the rail, where one
     card fills the screen, it padded the shortest Spanish card with ~100px of
     empty space between its last line and its link — which reads as a forgotten
     footer, not as breathing room. Stretch comes back with the 3-across grid. */
  align-items: start;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* No negative-margin bleed. A grid scroll container does not offset its first
     item by padding-inline-start, so the bleed left the first card flush to the
     screen while the heading above it sat at the gutter — a visibly broken left
     margin. Aligned to the wrap instead; the third card clipping at the right
     edge is what tells the reader the row moves. */
  padding-block: 4px 10px;
  scrollbar-width: none;
}
.life-fan::-webkit-scrollbar { display: none; }
.life-card { scroll-snap-align: start; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.life-card__fig { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid var(--line, rgba(255,255,255,.09)); }
.life-card__fig img { display: block; width: 100%; height: auto; }
.life-card .ed-subtitle { margin: 0; }
.life-card .ed-body { margin: 0; }
/* the door sits at the bottom of every card, on one line, whatever the copy
   above it does */
.life-card__foot { padding-top: 4px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }

@media (min-width: 900px) {
  /* three across, no scrolling — the rail only becomes a rail when it must */
  .life-fan {
    grid-auto-flow: initial;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    overflow-x: visible;
    /* side by side, equal heights earn their keep: the three doors land on one
       line however long the titles run */
    align-items: stretch;
  }
  .life-card__foot { margin-top: auto; }
}

/* The operation behind the third chapter — evidence for the whole row, so it
   sits under the rail rather than inside one card, where it would make that
   card taller than its two peers for no reason. */
.ff-credential { margin: clamp(30px, 4vw, 48px) 0 0; display: flex; flex-direction: column; gap: 12px; align-items: center; }
.ff-credential img {
  display: block; width: 100%; max-width: 720px; height: auto;
  border-radius: 22px; border: 1px solid var(--line, rgba(255,255,255,.09));
}

/* ═══ 17 · The chain rail was floating ════════════════════════════════
   `.chain-rail` in the chapter collided with a LEGACY rule of the same name
   (landing.css:375 — a 48px flex connector from an older design) whose
   `display:flex; align-items:center` shrank the list to its content width and
   centred it: a 553px column marooned in the 1180px measure with ~450px of dead
   black either side, while every other block on the page starts at the left
   rag. That is what made the section read as dumped instead of composed.
   Block layout restores the full measure and the page's left edge; the bodies
   keep their own 54ch limit so the lines stay readable. */
.ed-chapter .chain-rail { display: block; align-items: initial; flex: initial; }

/* ...and once it stopped floating, a single left column left ~700px of empty
   black to its right, while every other list on this page (the ledgers in
   #distance and #tour) spans the full measure. The schedule now does too: the
   time is its own column, so the eight steps read as a timetable down the page
   instead of a paragraph stack hugging the left edge. */
@media (min-width: 900px) {
  .ed-chapter .chain-rail .ed-rail__item {
    display: grid;
    grid-template-columns: 200px minmax(0, 1fr);
    column-gap: 32px;
  }
  .ed-chapter .chain-rail .ed-rail__label { grid-column: 1; grid-row: 1; margin-bottom: 0; padding-top: 2px; }
  .ed-chapter .chain-rail .ed-rail__title { grid-column: 2; grid-row: 1; }
  .ed-chapter .chain-rail .ed-rail__body  { grid-column: 2; grid-row: 2; max-width: 66ch; }
  .ed-chapter .chain-rail .ed-rail__item > .task-card { grid-column: 2; grid-row: 3; }
}

/* The Proof panel was a 640px column centred inside the 1180px measure while
   its own heading and tab strip sat on the left rag — the same floating the
   chain rail had. Measured at 1440px it left ~400px of black on either side of
   the evidence, which is what makes a section read as dropped onto the page
   rather than laid out on it. It now starts where the heading starts. */
#proof .ve { margin-left: 0; margin-right: 0; }
#proof .ve-tabs { align-self: flex-start; justify-content: flex-start; }