/* ==========================================================================
   Landing sections v6 - NORMAL FLOW (Tarak 2026-07-14: "remove the scroll-to-
   stick everywhere"). Every section flows normally as a fixed-height "sheet"
   painting its own gradient; the gradients meet at boundaries to form the
   continuous spine. The ONLY pinned section is the index chapter
   (assets/index-chapter.css). No footer.
   TWO UNITS: --u (Playfair headings + positions/boxes); --cu = 0.85u (all sans
   text, labels, buttons, graphics - the content-shrink dial).
   ========================================================================== */

:root {
  --u: calc(var(--scale, 1) * 1px);
  --cu: calc(var(--scale, 1) * 0.85px);
  /* Mobile copy uses two deliberate reading roles. Long-form body copy needs
     a larger measure; concise supporting copy can sit one step below it.
     Components should consume these roles instead of inventing local sizes. */
  --mobile-body-size: 15px;
  --mobile-body-leading: 1.52;
  --mobile-support-size: 13px;
  --mobile-support-leading: 24px;
  --mobile-meta-size: 10px;
}

/* --- sheets: fixed-height flow sections ----------------------------------- */

.sheet-sec { position: relative; width: 100%; overflow: hidden; }
.sheet-sec > .sheet {
  position: relative;
  width: calc(1440 * var(--u));
  margin: 0 auto;
}
.sheet-sec > .sheet > * { position: absolute; }

/* shared label row */
.label-row-s { display: flex; align-items: center; gap: calc(12 * var(--cu)); position: absolute; }
.label-row-s .ld { width: calc(20 * var(--cu)); height: calc(20 * var(--cu)); background: #5F5F5F; }
.label-row-s .lt { font-family: var(--sans); font-size: calc(15 * var(--cu)); line-height: calc(20 * var(--cu)); color: #5F5F5F; white-space: nowrap; }

/* --- HEADER (40:15, h=84) --------------------------------------------------- */

.sticky-header.hdr { height: calc(84 * var(--u)); }
.hdr > .sheet { height: calc(84 * var(--u)); }
.hdr .brand { left: calc(81 * var(--u)); top: calc(26 * var(--u)); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.hdr .brand img { width: calc(30 * var(--u)); height: calc(22 * var(--u)); display: block; }
.hdr .brand .wordmark-g {
  font-family: var(--serif);
  font-size: calc(24 * var(--u));
  line-height: 1.33;
  letter-spacing: 0.18em;
  background: linear-gradient(90deg, #666666 0%, #000000 54%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #000;
}
.hdr .nav-row { left: auto; right: calc(66 * var(--u)); top: 0; height: 100%; display: flex; align-items: center; gap: calc(33 * var(--cu)); }
.hdr .nav-row a { font-family: var(--serif); font-size: calc(18 * var(--cu)); color: #807C7C; text-decoration: none; transition: color 160ms ease; }
.hdr .nav-row a:hover { color: #000; }

.pill-o {
  display: inline-flex; align-items: center; gap: calc(9 * var(--cu));
  border: 1px solid #B5B3AD; border-radius: 999px;
  padding: calc(6 * var(--cu)) calc(16 * var(--cu)) calc(7 * var(--cu));
  font-family: var(--sans); font-size: calc(14 * var(--cu)); color: #000 !important;
  text-decoration: none;
  transition: background 180ms ease, color 180ms ease;
}
.pill-o .pd { width: calc(9 * var(--cu)); height: calc(9 * var(--cu)); background: #000; transition: background 180ms ease; }
.pill-o:hover { background: #000; color: #fff !important; }
.pill-o:hover .pd { background: #fff; }

/* Dark-zone header inversion - the DISCRETE path, for when the live probe is
   not driving (no JS, or a page that does not load script.js). Every rule is
   gated on :not([data-tone]) so the two systems can never both drive at once:
   .hdr.is-over-dark .brand .wordmark-g is four classes and silently outranked
   the continuous rules, forcing a white wordmark onto a white panel over dark
   greys (Tarak 2026-07-27). */
.hdr.is-over-dark:not([data-tone]) .brand .wordmark-g {
  background: linear-gradient(90deg, #B9B9B9 0%, #FFFFFF 54%);
  -webkit-background-clip: text; background-clip: text;
}
.hdr.is-over-dark:not([data-tone]) .brand img { filter: invert(1); }
.hdr.is-over-dark:not([data-tone]) .nav-row a { color: rgba(255, 255, 255, 0.72); }
.hdr.is-over-dark:not([data-tone]) .nav-row a:hover { color: #fff; }
.sticky-header.is-over-dark:not([data-tone]) .pill-o { border-color: rgba(255, 255, 255, 0.5); color: #fff !important; }
.sticky-header.is-over-dark:not([data-tone]) .pill-o .pd { background: #fff; }
.sticky-header.is-over-dark:not([data-tone]) .pill-o:hover { background: #fff; color: #000 !important; }
.sticky-header.is-over-dark:not([data-tone]) .pill-o:hover .pd { background: #000; }

/* --- HERO (23:819) - registered art right; copy CENTRED + clear of gate -- */

.hero {
  background: #fff;
  /* Keep the copy centred in the visible laptop viewport independently of
     the right-anchored artwork. */
  /* Keep the copy registered to the composition as the browser narrows.
     The stable height shift protects the contracted layouts; a separate
     wide-screen lift restores the higher optical position of the reference
     composition without reintroducing width-driven downward drift. */
  --hero-copy-height-shift: clamp(-60px, calc(42svh - 426px), -48px);
  --hero-copy-wide-lift: clamp(0px, calc((100vw - 1200px) * 0.2083), 50px);
  --hero-copy-shift:
    calc(var(--hero-copy-height-shift) - var(--hero-copy-wide-lift));
  /* Preserve the reference MacBook composition at full width, then reduce
     the artwork more decisively as the browser narrows. The height cap keeps
     the complete gate visible in shallower windows without letting it feel
     fixed while the copy responds. */
  --hero-art-width:
    clamp(
      700px,
      calc(132.5vw - 620px),
      min(90vw, calc(156svh - 131.04 * var(--u) + 3px))
    );
  --hero-art-right: max(0px, calc((100vw - 1440 * var(--u)) / 2));
}
.hero .sheet { height: calc(1020 * var(--u)); }
.hero .hero-media {
  position: absolute; inset: 0;
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 90%, transparent 100%);
}
.hero .hero-img {
  position: absolute; top: calc(42 * var(--u)); right: var(--hero-art-right);
  width: var(--hero-art-width); height: auto;
  transform-origin: 72.5% 46%;
  will-change: opacity, transform;
  transition: opacity 520ms ease;
}
/* Both 3:2 exports share the same gate registration, so the void default and
   portal alternate crossfade without moving the lintel, columns or base. */
.hero .hero-img-a,
.hero .hero-img-b {
  transform: translateY(calc(34 * var(--u))) scale(1.28);
}
.hero .hero-img-b { opacity: 0; }

/* copy: enlarged editorial H1; block
   centred in the hero - H1 just above centre, sub roughly central */
.hero .hero-title { left: calc(75 * var(--u)); top: calc(270 * var(--u) + var(--hero-copy-shift)); width: calc(990 * var(--u)); margin: 0;
  font-family: var(--serif); font-weight: 400; font-size: calc(68 * var(--u)); line-height: calc(71 * var(--u));
  color: #000; transition: color 520ms ease, font-weight 0s; }
.hero .hero-title .l { display: block; }
.hero .hero-title:focus:not(:focus-visible) { outline: none; }
/* 700u wrapped the longer subtitle onto three lines. 850u still sits inside
   the 990u headline measure and gives ~10% slack over the two-line minimum
   (Tarak 2026-07-27). Font scales on --cu and the box on --u, so the ratio
   holds at every desktop scale. */
.hero .hero-subtitle { left: calc(75 * var(--u)); top: calc(435 * var(--u) + var(--hero-copy-shift)); width: calc(850 * var(--u)); margin: 0;
  font-family: var(--sans); font-size: calc(20 * var(--cu)); line-height: calc(26 * var(--cu));
  color: #5F5F5F; transition: color 520ms ease; }
.hero .hero-subtitle .concept-link { color: inherit; border-bottom-color: rgba(0, 0, 0, 0.35); }
.hero .hero-actions { left: calc(75 * var(--u)); top: calc(523 * var(--u) + var(--hero-copy-shift)); display: flex; align-items: center; gap: calc(12 * var(--u)); }
.hero .hero-index { display: none; }
.hero .hero-button,
.hero .hero-learn {
  display: inline-flex; align-items: center; justify-content: center;
  width: calc(164 * var(--cu)); min-width: 0;
  height: calc(52 * var(--cu)); padding: 0 calc(22 * var(--cu));
  border: 1px solid transparent; border-radius: 999px;
  font-family: var(--serif); font-size: calc(18 * var(--cu)); font-weight: 400; line-height: 1;
  letter-spacing: 0; white-space: nowrap; text-decoration: none;
  transition: transform 180ms cubic-bezier(.2,.75,.25,1), background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.hero .hero-button {
  background: #080808; color: #fff; border-color: #080808;
  box-shadow: 0 calc(8 * var(--cu)) calc(20 * var(--cu)) rgba(0,0,0,0.15);
}
.hero .hero-learn {
  background: #fff; color: #0B0B0B; border-color: #0B0B0B;
  box-shadow: none;
}
.hero .hero-button:hover,
.hero .hero-learn:hover { transform: translateY(calc(-2 * var(--cu))); }
.hero .hero-button:hover { background: #1a1a1a; border-color: #1a1a1a; box-shadow: 0 calc(11 * var(--cu)) calc(24 * var(--cu)) rgba(0,0,0,0.18); }
.hero .hero-learn:hover { background: #F4F4F2; border-color: #0B0B0B; box-shadow: none; }
.hero .hero-button:active,
.hero .hero-learn:active { transform: translateY(0) scale(0.985); }
.hero .hero-button:focus-visible,
.hero .hero-learn:focus-visible { outline: 2px solid #111; outline-offset: 3px; }

/* Hovering the hero's Knowledge Index link lights the header pill, so the two
   entry points read as one destination (Tarak 2026-07-27). The reverse
   direction - pill hover crossfading the hero art - is below. */
body:has(.hero .hero-subtitle .concept-link:is(:hover, :focus-visible)) .hdr .pill-o {
  background: #000; color: #fff !important;
}
body:has(.hero .hero-subtitle .concept-link:is(:hover, :focus-visible)) .hdr .pill-o .pd {
  background: #fff;
}

/* Programmatic focus targets carry a temporary tabindex="-1" and cannot be
   reached by Tab, so any focus on them is script-driven. A ring there reads as
   the heading being "selected" after a back-navigation (Tarak 2026-07-27). */
main.flow [tabindex="-1"]:focus { outline: none; }

/* ALT STATE - hover/focus either Index entry point. Only the art crossfades
   and the linked phrase resolves to emphasis; the headline remains stable. */
html.hero-alt-ready body:has(.hdr .pill-o:is(:hover, :focus-visible)) .hero .hero-img-a,
html.hero-alt-ready .hero:has(.concept-link:is(:hover, :focus-visible)) .hero-img-a,
html.hero-alt-ready .hero.hero-alt .hero-img-a { opacity: 0; }
html.hero-alt-ready body:has(.hdr .pill-o:is(:hover, :focus-visible)) .hero .hero-img-b,
html.hero-alt-ready .hero:has(.concept-link:is(:hover, :focus-visible)) .hero-img-b,
html.hero-alt-ready .hero.hero-alt .hero-img-b { opacity: 1; }
html.hero-alt-ready body:has(.hdr .pill-o:is(:hover, :focus-visible)) .hero .hero-subtitle,
html.hero-alt-ready .hero:has(.concept-link:is(:hover, :focus-visible)) .hero-subtitle,
html.hero-alt-ready .hero.hero-alt .hero-subtitle { color: #000; }
html.hero-alt-ready body:has(.hdr .pill-o:is(:hover, :focus-visible)) .hero .hero-subtitle .concept-link,
html.hero-alt-ready .hero:has(.concept-link:is(:hover, :focus-visible)) .hero-subtitle .concept-link,
html.hero-alt-ready .hero.hero-alt .hero-subtitle .concept-link { font-weight: 700; }

/* End the desktop hero at the visible viewport boundary. The artwork keeps
   its existing size and registration; only the obsolete blank tail beneath
   the copy is removed from document flow. */
@media (min-width: 901px) {
  .hero .sheet { height: calc(100svh - 84 * var(--u) + 2px); }
}

/* --- SHIFT -> PROBLEM CHAPTER ---------------------------------------------- */

.sp-chapter { position: relative; height: 260vh; }
.sp-fragment { position: absolute; width: 0; height: 0; scroll-margin: 0 !important; pointer-events: none; }
.sp-fragment-shift { top: 0; }
.sp-fragment-problem { top: calc(100% - 100vh); }
.sp-stage { position: relative; width: 100%; }
.sp-bg { display: none; }
.sp-act { min-height: 100svh; display: flex; align-items: center; overflow: hidden; }
.sp-shift { background: linear-gradient(180deg, #fff 0%, #fff 42%, #EFEFED 66%, #C5C5C2 86%, #9A9A97 100%); }
.sp-problem { background: linear-gradient(180deg, #999 0%, #6F6F6E 22%, #454542 40%, #232321 52%, #000 60%, #000 100%); }
.sp-act > .sheet { position: relative; width: calc(1440 * var(--u)); height: calc(559 * var(--u)); margin: auto; }
.sp-copy { position: absolute; left: calc(94 * var(--u)); top: calc(82 * var(--u)); width: calc(614 * var(--u)); height: calc(390 * var(--u)); }
.sp-copy .label-row-s, .sp-copy h2, .sp-copy p { position: static; }
.sp-copy .label-row-s { margin: 0 0 calc(24 * var(--u)); }
.sp-copy h2 { margin: 0 0 calc(18 * var(--u)); font: 400 calc(42 * var(--u))/calc(55 * var(--u)) var(--serif); }
.sp-copy p { margin: 0; }
.sp-copy .stat-citation { margin-top: calc(12 * var(--u)); }
.sp-visual { position: absolute; left: calc(781 * var(--u)); top: calc(54 * var(--u)); width: calc(520 * var(--u)); height: calc(400 * var(--u)); }
.sp-shift .sp-visual { top: calc(70 * var(--u)); }

.is-sp-enhanced .sp-stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.is-sp-enhanced .sp-bg { display: block; position: absolute; inset: 0; }
.is-sp-enhanced .sp-act { position: absolute; inset: 0; min-height: 0; background: transparent; }
.is-sp-enhanced .sp-bg-shift { background: linear-gradient(180deg, #fff 0%, #fff 42%, #EFEFED 66%, #C5C5C2 86%, #9A9A97 100%); }
.is-sp-enhanced .sp-bg-problem { background: linear-gradient(180deg, #999 0%, #6F6F6E 22%, #454542 40%, #232321 52%, #000 60%, #000 100%); opacity: var(--sp-h, 0); }
.is-sp-enhanced [data-sp-shift] { opacity: var(--sp-shift-opacity, 1); transform: translateY(var(--sp-shift-y, 0px)); }
.is-sp-enhanced [data-sp-problem] { opacity: var(--sp-problem-opacity, 0); transform: translateY(var(--sp-problem-y, 32px)); }

/* The right-hand visual runs its own, later and longer exchange on top of the
   act's move: the Shift panel lifts out upward while the Problem surface-field
   rises into the same frame from below. Opacity is multiplied by the act's, so
   the visual can never outlive its own section. */
.is-sp-enhanced [data-sp-shift] .sp-visual {
  opacity: var(--sp-shift-visual-opacity, 1);
  transform: translateY(var(--sp-shift-visual-y, 0px));
}
.is-sp-enhanced [data-sp-problem] .sp-visual {
  opacity: var(--sp-problem-visual-opacity, 0);
  transform: translateY(var(--sp-problem-visual-y, 120px));
}

@media (prefers-reduced-motion: reduce) {
  .is-sp-enhanced [data-sp-shift] .sp-visual,
  .is-sp-enhanced [data-sp-problem] .sp-visual { transform: none; }
}

.sp-shift h2 { color: #000; }
.sp-shift .shift-body-open {
  font-family: var(--sans); font-size: calc(20 * var(--cu)); line-height: calc(26 * var(--cu)); color: #383737; }
.sp-shift .shift-stat-number { font-weight: inherit; }
.sp-shift .shift-body-section { display: block; }
.sp-shift .shift-body-section + .shift-body-section { margin-top: clamp(8px, calc(12 * var(--u)), 14px); }
.sp-shift .shift-body-close {
  color: #111;
  font-weight: 600;
}
@media (max-width: 1200px) {
  .sp-shift .shift-copy-break { display: none; }
}
.sp-shift .stat-citation {
  font-family: "IBM Plex Mono", monospace; font-size: calc(11.5 * var(--cu)); line-height: 1.5; letter-spacing: 0.02em; color: #55534E;
  opacity: 0; transition: opacity 260ms ease; }
.sp-shift .sheet:has(.stat-cite:hover) .stat-citation,
.sp-shift .sheet:has(.stat-cite:focus) .stat-citation { opacity: 1; }
@media (hover: none) { .sp-shift .stat-citation { opacity: 1; } }
/* The citation is signalled by a dot closing the line, not an underline: the
   underline read as a link on a line that is not one. Hover anywhere on the
   line still reveals the source - the dot is the tell, not the target
   (Tarak 2026-07-27). */
.stat-cite {
  text-decoration: none;
  cursor: help; outline: none;
}
.stat-dot {
  display: inline-block;
  width: calc(6 * var(--cu)); height: calc(6 * var(--cu));
  margin-left: calc(7 * var(--cu));
  vertical-align: calc(2 * var(--cu));
  background: #0B0B0B;
  opacity: 0.55;
  transition: opacity 200ms ease;
}
.stat-cite:hover .stat-dot, .stat-cite:focus .stat-dot { opacity: 1; }

/* prompt bubble: SQUARE top-left corner (Figma vector 27:998) */
.sp-shift .shift-q-pill { position: absolute; left: calc(38 * var(--u)); top: calc(99 * var(--u)); width: calc(386 * var(--cu)); height: calc(55 * var(--cu));
  background: #000; border-radius: 0 calc(20 * var(--cu)) calc(20 * var(--cu)) calc(20 * var(--cu));
  display: flex; align-items: center; justify-content: center; }
.sp-shift .shift-q-pill span { font-family: var(--sans); font-size: calc(20 * var(--cu)); color: #fff; }
.sp-shift .shift-sourcing { position: absolute; left: auto; right: 0; top: calc(209 * var(--u)); margin: 0;
  font-family: var(--sans); font-size: calc(20 * var(--cu)); line-height: calc(26 * var(--cu)); color: #383737;
  text-align: right;
  animation: eval-breathe 1.6s ease-in-out infinite; }
.sp-chapter:not([data-shift-active]) .shift-sourcing { animation-play-state: paused; }
@keyframes eval-breathe { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .sp-shift .shift-sourcing { animation: none; } }
.sp-shift .shift-sources { position: absolute; left: auto; right: 0; top: calc(245 * var(--u)); display: flex; align-items: center; }
.sp-shift .shift-sources .dot { width: calc(20 * var(--cu)); height: calc(20 * var(--cu)); margin-right: calc(5 * var(--cu));
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  font-size: calc(12 * var(--cu)); transition: opacity 420ms ease, transform 420ms ease; }
.sp-shift .shift-sources .dot.swap-out { opacity: 0; transform: scale(0.6); }
.sp-shift .shift-sources .d1 { background: #000; color: #fff; font-family: "Times New Roman", serif; }
.sp-shift .shift-sources .d2 { background: #D9D9D9; color: #000; font-family: var(--sans); }
.sp-shift .shift-sources .d3 { background: #807C7C; color: #fff; font-weight: 500; }
.sp-shift .shift-sources .more { color: #383737; font-size: calc(13 * var(--cu)); margin-left: calc(6 * var(--cu)); }

.sp-problem .label-row-s .ld { background: #F2F0EC; }
.sp-problem .label-row-s .lt { color: #F2F0EC; }
.sp-problem h2 { color: #fff; }
.sp-problem .problem-body {
  font-family: var(--sans); font-size: calc(20 * var(--cu)); line-height: calc(30 * var(--cu)); color: #E2E2E2; }
.sp-problem .problem-body-section { display: block; }
.sp-problem .problem-body-mobile-copy { display: none; }
.sp-problem .problem-body-section + .problem-body-section { margin-top: clamp(8px, calc(12 * var(--u)), 14px); }
.sp-problem .problem-body-close {
  color: #fff;
  font-weight: 600;
}

.sp-problem .surface-field { position: absolute; left: 0; top: 0; width: calc(520 * var(--u)); height: calc(400 * var(--u));
  transform: scale(0.85); transform-origin: 60% 40%; }
.sp-problem .surface-field .sf-atom {
  position: absolute;
  width: calc(15 * var(--u)); height: calc(15 * var(--u));
  border-radius: calc(4 * var(--u));
  background: #787873;
  transition: background 480ms ease, box-shadow 480ms ease;
}
/* below the line: BLACK unread depth */
.sp-problem .surface-field .sf-atom.below { background: #000; }
.sp-problem .surface-field .sf-atom.lit { background: #E6E3DA; box-shadow: 0 0 calc(6 * var(--u)) rgba(230, 227, 218, 0.28); transition-duration: 220ms; }
.sp-problem .surface-field .sf-atom.cool { background: #96938B; }
.sp-problem .surface-field .sf-line { position: absolute; height: 1px; background: rgba(255, 255, 255, 0.45); }

/* Keep the enhanced composition readable before the global canvas scale
   reaches its full desktop size. Geometry still follows the shared scale. */
@media (min-width: 1201px) {
  .sp-copy h2 {
    font-size: max(calc(42 * var(--u)), 32px);
    line-height: max(calc(55 * var(--u)), 40px);
  }
  .sp-copy .label-row-s .lt {
    font-size: max(calc(15 * var(--cu)), 12px);
    line-height: max(calc(20 * var(--cu)), 16px);
  }
  .sp-shift .shift-body-open, .sp-problem .problem-body { font-size: max(calc(20 * var(--cu)), 16px); }
  .sp-shift .shift-body-open { line-height: max(calc(26 * var(--cu)), 24px); }
  .sp-problem .problem-body { line-height: max(calc(30 * var(--cu)), 24px); }
  .sp-shift .stat-citation { font-size: max(calc(11.5 * var(--cu)), 11px); }
}

/* --- CTA (41:354) - normal terminal section, white close ---------------------
   Two columns; the form's fields flex-FILL the card (space-between) so there's
   no dead band at the bottom; the "More info" pill anchors under the body. */

.next-steps {
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: linear-gradient(180deg,
    #232321 0%,
    #4D4D4A 8%,
    #898985 16%,
    #C5C5C1 22%,
    #FFFFFF 30%,
    #FFFFFF 100%);
}
.next-steps .sheet { flex: 0 0 auto; height: calc(560 * var(--u)); }
.next-steps .ns-copy, .next-steps .ns-form { position: absolute; }
.next-steps .ns-copy { left: calc(84 * var(--u)); top: calc(96 * var(--u)); width: calc(700 * var(--u)); }
.next-steps .label-row-s { position: static; display: flex; margin-bottom: calc(20 * var(--u)); }
.next-steps .label-row-s .ld { background: #2B2B26; }
.next-steps .label-row-s .lt { color: #2B2B26; }
.next-steps h2 { position: static; width: calc(700 * var(--u)); margin: 0 0 calc(26 * var(--u));
  font-family: var(--serif); font-weight: 400; font-size: calc(42 * var(--u)); line-height: calc(50 * var(--u)); color: #0B0B0B; }
.next-steps h2 .cta-heading-line { display: block; white-space: nowrap; }
.cta-mobile-break { display: none; }
.next-steps .ns-body { position: static; width: calc(620 * var(--u)); margin: 0 0 calc(30 * var(--u));
  font-family: var(--sans); font-size: calc(17 * var(--cu)); line-height: calc(26 * var(--cu)); color: #383737; text-wrap: pretty; }
.next-steps .ns-form { left: calc(832 * var(--u)); top: calc(79 * var(--u)); width: calc(479 * var(--u)); height: calc(402 * var(--u));
  border: 1px solid #D8D7D2; border-radius: calc(12 * var(--u)); background: transparent; }
.next-steps .ns-form .f-inner { position: absolute; inset: 0; padding: calc(36 * var(--u)) calc(34 * var(--u));
  display: flex; flex-direction: column; justify-content: space-between; }
.next-steps .ns-fg { display: block; }
.next-steps .ns-label { display: block; font-family: var(--serif); font-size: calc(19 * var(--u)); color: #0B0B0B; margin: 0 0 calc(10 * var(--u)); }
.next-steps .ns-field { display: block; width: 100%; background: transparent; border: 0; border-bottom: 1px solid #0B0B0B; border-radius: 0;
  padding: calc(2 * var(--u)) calc(2 * var(--u)) calc(8 * var(--u));
  color: #0B0B0B; font-family: var(--sans); font-size: calc(14 * var(--cu)); outline: none; }
.next-steps .ns-field::placeholder { color: #6F6E68; opacity: 1; }
.next-steps .ns-field.field-invalid { border-bottom-color: #A34D3C; }
.next-steps .ns-phone-row { display: grid; width: 100%; min-width: 0; overflow: hidden; contain: inline-size;
  grid-template-columns: minmax(0, calc(142 * var(--u))) minmax(0, 1fr);
  align-items: end; gap: calc(14 * var(--u)); }
.next-steps .ns-country-code-shell { display: contents; }
.next-steps .ns-country-code-display { display: none; }
.next-steps .ns-country-code { display: block; width: 100%; min-width: 0; max-width: 100%; overflow: hidden; appearance: none;
  border: 0; border-bottom: 1px solid #0B0B0B; border-radius: 0;
  padding: calc(2 * var(--u)) calc(24 * var(--u)) calc(8 * var(--u)) calc(2 * var(--u));
  background-color: transparent;
  background-image: linear-gradient(45deg, transparent 50%, #0B0B0B 50%), linear-gradient(135deg, #0B0B0B 50%, transparent 50%);
  background-position: calc(100% - 8px) 42%, calc(100% - 4px) 42%;
  background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
  color: #0B0B0B; font-family: var(--sans); font-size: calc(14 * var(--cu)); outline: none;
  white-space: nowrap; text-overflow: ellipsis; cursor: pointer; }
.next-steps .ns-country-code.field-invalid { border-bottom-color: #A34D3C; }
.next-steps .ns-country-code option { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
.next-steps .ns-country-code:focus-visible, .next-steps .ns-field:focus-visible { border-bottom-width: 2px; }
.next-steps .ns-phone-field { min-width: 0; }
.next-steps .ns-error { margin: calc(4 * var(--u)) 0 0; font-family: var(--sans); font-size: calc(12 * var(--cu)); color: #A34D3C; min-height: 1em; }
.next-steps .ns-submit-row { display: block; }
.next-steps .ns-submit { display: flex; align-items: center; justify-content: center; width: 100%; height: calc(50 * var(--cu));
  background: #0B0B0B; color: #fff; border: 0; border-radius: calc(8 * var(--u));
  font-family: var(--serif); font-size: calc(18 * var(--cu)); cursor: pointer;
  transition: transform 160ms ease; }
.next-steps .ns-submit:hover { transform: translateY(-1px); }
.next-steps .ns-submit:disabled { opacity: 0.6; cursor: default; }
.next-steps .ns-status { margin: calc(8 * var(--u)) 0 0; font-family: var(--sans); font-size: calc(13 * var(--cu)); color: #383737; }
.next-steps .ns-status.form-status-error { color: #A34D3C; }
.next-steps .ns-privacy { margin: 0 0 calc(14 * var(--u)); font-family: var(--sans); font-size: calc(12 * var(--cu)); line-height: 1.45; color: #595959; }
.next-steps .ns-privacy a { color: inherit; text-underline-offset: 0.18em; }
.hp-label, .hp-field { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* --- CTA REVEAL FOOTER (doc 22 §1.10) ---------------------------------------
   A sub-part of the CTA, not a section: #consultation stays the terminal
   section, so MAIN_STEPS and the journey nav are untouched.

   The peek is exact rather than viewport-dependent. Making the section
   (100svh + strip - peek) tall and letting the sheet take `margin-block: auto`
   centres the CTA composition in the first (100svh - peek), which puts the
   strip's top exactly one peek above the fold. At rest the reader sees the
   hook line and a sliver of card tops - unmistakably "more below", far too
   little to read, so it cannot compete with the form.

   The rail scrolls horizontally. Doc 17's "no nested scroller" rule is scoped
   to vertical scroll ownership; horizontal overflow does not contend with the
   page's vertical scroll (carve-out approved 2026-07-25). */

.next-steps {
  --strip-h: calc(356 * var(--u));
  --strip-peek: calc(60 * var(--u));
  --rail-pad: calc((100% - 1440 * var(--u)) / 2 + 56 * var(--u));
  --sheet-hold: calc((100svh - var(--strip-peek) - 560 * var(--u)) / 2);
  --reveal: calc(var(--strip-h) - var(--strip-peek));
  flex-direction: column;
  /* --rail-travel is measured and written by assets/cta-strip.js; the fallback
     of 0 means a no-JS page is simply the reveal, with a natively scrollable
     rail. Phase A (reveal) = strip-h - peek. Phase B (shuffle) = rail-travel. */
  height: calc(100svh + var(--reveal) + var(--rail-travel, 0px));
  min-height: 0;
  /* clip, not hidden: clip does not create a scroll container, so the sticky
     holds below survive. .sheet-sec's blanket overflow:hidden would silently
     kill them - the trap already documented in layout-shell.css. */
  overflow: clip;
  /* the release is a fixed distance from the section top, so it must not be
     expressed as a percentage: the section is now several viewports tall and
     percentage stops stretched the dark band over the form
     (Tarak 2026-07-27). svh reproduces the original composition exactly. */
  background: linear-gradient(180deg,
    #232321 0,
    #4D4D4A 8svh,
    #898985 16svh,
    #C5C5C1 22svh,
    #FFFFFF 30svh,
    #FFFFFF 100%);
}
/* Equal margins put the CTA composition dead-centre in the first
   (100svh - peek) AND land the strip's natural top exactly one peek above the
   fold. Both facts fall out of the same number.
   Phase B holds BOTH the CTA and the strip: sticky is compositor-driven, so
   neither lags the scroll the way a JS transform does. */
.next-steps > .sheet {
  margin-block: var(--sheet-hold);
  position: sticky;
  /* Hold at exactly the position natural scrolling leaves it in at the end of
     the reveal, and not one pixel earlier. Nothing pins DURING the reveal: the
     CTA and the strip scroll up together as one page, and only freeze once the
     cards are fully visible.
     (A clamp of max(0px, …) was tried here to keep the CTA unclipped. It made
     the CTA stop ~70px into the reveal while the strip kept rising, so the
     strip slid up over it - the covering bug, Tarak 2026-07-27. The CTA being
     partly scrolled off is correct: that is what scrolling did.) */
  top: calc(var(--sheet-hold) - var(--reveal));
}

.cta-strip {
  flex: 0 0 auto;
  align-self: stretch;
  width: 100%;
  height: var(--strip-h);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: calc(100svh - var(--strip-h));
  /* Top padding gives the peeking card edges air; the tail below the cards is
     the "space for the vertical scroll to max out at" - it pushes the pin
     point down so the horizontal shuffle cannot trigger before the cards are
     comfortably settled (Tarak 2026-07-27). */
  padding: calc(20 * var(--u)) 0 calc(56 * var(--u));
  /* No border and no z-index layering: the strip never overlaps the CTA, it
     settles in the clear space below it. */
  background: #fff;
}

/* At rest only the card tops clear the fold, and the journey widget sits over
   them. A soft blur keeps that peek as texture rather than as competing text,
   and clears as the reveal progresses. --peek-veil is written by
   assets/cta-strip.js and defaults to 0, so a no-JS page is simply sharp. */
.cta-strip-rail {
  filter: blur(calc(var(--peek-veil, 0) * 4px));
  transition: filter 120ms linear;
}
/* The pinned index card is NEVER blurred. The peek veil exists so the AO rail
   reads as texture behind the journey widget at rest; this card is the one
   thing that should stay legible there, because it is what teases the Index
   below the CTA before the reveal begins (Tarak 2026-07-28). It keeps the
   transform-driven scroll mechanic - only the blur is dropped. */
.cta-strip .ao-card-index {
  filter: none;
  transition: border-color 180ms ease, background 180ms ease;
}

.cta-strip-viewport {
  overflow-x: auto;              /* no-JS / reduced-motion fallback */
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: #D2D1CC transparent;
}
.cta-strip[data-driven] .cta-strip-viewport { overflow: hidden; scrollbar-width: none; }

/* --- pinned index card (Tarak 2026-07-28) ---------------------------------
   The black "Enter the Index" card holds still while the 29 AO cards slide
   underneath and vanish before its left edge.

   It cannot use position:sticky. The rail is driven by a transform, and a
   transform establishes a containing block, so a sticky child would resolve
   against the moving rail instead of the viewport - it would travel with the
   cards. Instead the card is lifted out of rail flow and absolutely positioned
   against the viewport, and the rail is padded by its width so the AO cards
   begin to its right.

   The card stays FIRST in the DOM: tab order and screen-reader order are
   unchanged, only its painting is. */
/* Desktop only. cta-strip.js sets data-driven on MOBILE as well, so without
   this guard the card would be absolutely positioned over a 375px rail and
   the padding would push every AO card off-screen. Mobile keeps the card in
   normal flow above the rail. */
@media (min-width: 901px) {
  .cta-strip[data-driven] .cta-strip-viewport { position: relative; }

  .cta-strip[data-driven] .cta-strip-rail {
    /* start clear of the pinned card: its width + the flex gap */
    padding-left: calc(var(--rail-pad) + 360 * var(--u) + 20 * var(--u));
  }

  .cta-strip[data-driven] .ao-card-index {
    position: absolute;
    z-index: 3;
    top: 0;
    left: var(--rail-pad);
  }

  /* Without this the cards re-emerge in the left gutter, because the viewport is
     full-bleed while the column is 1440. This paints the gutter in the strip's
     own colour so a card disappears BEHIND the pinned card and never past it. */
  .cta-strip[data-driven] .cta-strip-viewport::before {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 0;
    width: var(--rail-pad);
    background: #fff;
    pointer-events: none;
  }
}
.cta-strip-rail {
  display: flex;
  gap: calc(20 * var(--u));
  margin: 0;
  padding: 0 var(--rail-pad) calc(10 * var(--u));
  list-style: none;
  will-change: transform;
}
.cta-strip-rail > li { flex: 0 0 auto; }
.cta-strip-nav,
.landing-footer { display: none; }

.ao-card {
  display: flex;
  flex-direction: column;
  width: calc(360 * var(--u));
  height: calc(280 * var(--u));
  padding: calc(24 * var(--u)) calc(26 * var(--u));
  border: 1px solid #E2E1DC;
  border-radius: calc(10 * var(--u));
  background: #fff;
  color: #0B0B0B;
  text-decoration: none;
  /* no translate on hover: the rail viewport clips, so a lifted card loses its
     top border (Tarak 2026-07-27). Colour carries the whole hover state. */
  transition: border-color 180ms ease, background 180ms ease;
}
.ao-card:hover,
.ao-card:focus-visible { border-color: #0B0B0B; background: #FBFBFA; }
.ao-card-meta {
  display: flex; align-items: center; justify-content: space-between; gap: calc(12 * var(--u));
  font-family: "IBM Plex Mono", ui-monospace, monospace; font-size: calc(12 * var(--cu)); line-height: calc(16 * var(--cu));
  letter-spacing: 0.06em; text-transform: uppercase; color: #8A8983;
}
.ao-card-go {
  flex: 0 0 auto;
  font-family: var(--sans); font-size: calc(15 * var(--cu)); letter-spacing: 0;
  transition: color 180ms ease, transform 200ms ease;
}
.ao-card:hover .ao-card-go,
.ao-card:focus-visible .ao-card-go { color: #0B0B0B; transform: translateX(calc(4 * var(--u))); }
.ao-card-q {
  margin-top: calc(14 * var(--u));
  font-family: var(--serif); font-size: calc(23 * var(--cu)); line-height: calc(30 * var(--cu));
  text-wrap: pretty;
}
.ao-card-a {
  margin-top: calc(12 * var(--u));
  font-family: var(--sans); font-size: calc(15 * var(--u)); line-height: calc(22 * var(--u));
  color: #6F6E68; text-wrap: pretty;
}

/* Terminal card: the way into the full index, and the last thing on the site. */
.ao-card-index { background: #0B0B0B; border-color: #0B0B0B; color: #fff; }
.ao-card-index .ao-card-meta { color: #8A8983; }
.ao-card-index .ao-card-a { color: #B5B3AD; }
.ao-card-index:hover,
.ao-card-index:focus-visible { background: #000; border-color: #000; }
.ao-card-index:hover .ao-card-go,
.ao-card-index:focus-visible .ao-card-go { color: #fff; }

/* The journey nav is a bottom-centred widget and collides with the strip the
   moment it starts revealing. cta-strip.js owns the flag. */
html[data-strip-zone] .journey-nav { opacity: 0; pointer-events: none; }

/* --- reduced motion: stacked chapter fallback ----------------------------- */

@media (prefers-reduced-motion: reduce) {
  .sp-shift .shift-sources .dot,
  .sp-shift .shift-sources .dot.swap-out,
  .sp-problem .surface-field .sf-atom,
  .sp-problem .surface-field .sf-atom.lit,
  .sp-problem .surface-field .sf-atom.cool { transition: none; }
  .sp-chapter { height: auto; display: flex; flex-direction: column; }
  .sp-stage, .is-sp-enhanced .sp-stage { display: contents; position: static; height: auto; overflow: visible; }
  .sp-bg, .is-sp-enhanced .sp-bg { display: none; }
  .sp-fragment { position: static; }
  .sp-fragment-shift { order: 0; }
  .sp-shift { order: 1; }
  .sp-fragment-problem { order: 2; }
  .sp-problem { order: 3; }
  .sp-act, .is-sp-enhanced .sp-act { position: relative; inset: auto; min-height: 100svh; }
  .sp-shift, .is-sp-enhanced .sp-shift { background: linear-gradient(180deg, #fff 0%, #fff 42%, #EFEFED 66%, #C5C5C2 86%, #9A9A97 100%); }
  .sp-problem, .is-sp-enhanced .sp-problem { background: linear-gradient(180deg, #999 0%, #6F6F6E 22%, #454542 40%, #232321 52%, #000 60%, #000 100%); }
  .is-sp-enhanced [data-sp-shift], .is-sp-enhanced [data-sp-problem] { opacity: 1; transform: none; }
  .sp-copy { height: auto; }
}

/* --- tablet: dedicated acts, readable type, no pinned crossfade ----------- */

@media (min-width: 901px) and (max-width: 1200px) {
  .sp-chapter { height: auto; display: flex; flex-direction: column; }
  .sp-stage, .is-sp-enhanced .sp-stage { display: contents; position: static; height: auto; overflow: visible; }
  .sp-bg, .is-sp-enhanced .sp-bg { display: none; }
  .sp-fragment { position: static; }
  .sp-fragment-shift { order: 0; }
  .sp-shift { order: 1; }
  .sp-fragment-problem { order: 2; }
  .sp-problem { order: 3; }
  .sp-act, .is-sp-enhanced .sp-act { position: relative; inset: auto; min-height: 100svh; }
  .sp-shift, .is-sp-enhanced .sp-shift {
    background: linear-gradient(180deg, #fff 0%, #fff 42%, #EFEFED 66%, #C5C5C2 86%, #9A9A97 100%);
  }
  .sp-problem, .is-sp-enhanced .sp-problem {
    background: linear-gradient(180deg, #999 0%, #6F6F6E 22%, #454542 40%, #232321 52%, #000 60%, #000 100%);
  }
  .is-sp-enhanced [data-sp-shift], .is-sp-enhanced [data-sp-problem] { opacity: 1; transform: none; }

  .sp-act > .sheet {
    width: min(calc(100% - 80px), 1040px);
    min-height: 100svh;
    height: auto;
    padding: clamp(72px, 10svh, 112px) 0;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: clamp(36px, 5vw, 64px);
    align-items: center;
  }
  .sp-act > .sheet > .sp-copy {
    position: relative;
    left: auto;
    top: auto;
    width: auto;
    height: auto;
    max-width: 560px;
  }
  .sp-copy .label-row-s { gap: 10px; margin-bottom: 18px; }
  .sp-copy .label-row-s .ld { width: 14px; height: 14px; }
  .sp-copy .label-row-s .lt { font-size: clamp(13px, 1.25vw, 15px); line-height: 1.3; }
  .sp-copy h2 {
    margin-bottom: 18px;
    font: 400 clamp(32px, 3.4vw, 40px)/1.18 var(--serif);
  }
  .sp-shift .shift-body-open, .sp-problem .problem-body {
    font-size: clamp(16px, 1.5vw, 18px);
    line-height: 1.5;
  }
  .sp-shift .stat-citation { margin-top: 12px; font-size: 11px; line-height: 1.5; }

  .sp-act > .sheet > .sp-visual {
    --u: clamp(0.56px, 0.065vw, 0.78px);
    --cu: calc(0.85 * var(--u));
    position: relative;
    left: auto;
    top: auto;
    width: calc(520 * var(--u));
    height: calc(400 * var(--u));
    justify-self: end;
  }
  .sp-shift .shift-q-pill { left: 0; top: 24%; width: 94%; height: 48px; }
  .sp-shift .shift-q-pill span { font-size: clamp(12px, 1.25vw, 15px); white-space: nowrap; }
  .sp-shift .shift-sourcing {
    left: auto;
    right: 0;
    top: 55%;
    font-size: clamp(13px, 1.3vw, 15px);
    line-height: 1.4;
  }
  .sp-shift .shift-sources { left: auto; right: 0; top: 66%; }
  .sp-shift .shift-sources .dot { width: 20px; height: 20px; font-size: 12px; }
  .sp-shift .shift-sources .more { margin-left: 6px; font-size: 12px; }
}

/* --- mobile: one native-scroll visual narrative --------------------------- */

@media (max-width: 900px) {
  /* The live mobile header is a quiet, centred opening mark. It belongs to
     the document rather than following the reader through every chapter. */
  .sticky-header.hdr {
    position: relative !important;
    height: 84px;
    overflow: visible;
    background: #fff;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .hdr > .sheet {
    width: 100%;
    height: 84px !important;
    padding: 22px 20px 18px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hdr .brand { position: static; min-height: 44px; display: inline-flex; align-items: center; gap: 9px; }
  .hdr .brand img { width: 28px; height: 22px; }
  .hdr .brand .wordmark-g { font-size: 19px; letter-spacing: 0.16em; }
  .hdr .nav-row { display: none; }

  /* Hero: use the purpose-built front-facing gate as the composition itself,
     not as a detached image above a stack of desktop copy. */
  .hero {
    --hero-copy-shift: 0px;
    position: relative;
    height: 678px;
    min-height: 678px;
    overflow: hidden;
    background: #fff;
    isolation: isolate;
  }
  .hero .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background-image: url("media/hero-arch-mobile.webp");
    background-repeat: no-repeat;
    background-position: 50% -18px;
    background-size: min(129vw, 504px) auto;
    opacity: 0.43;
    filter: grayscale(1) contrast(1.02) brightness(1.02);
    mix-blend-mode: multiply;
    -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 83%, transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0%, #000 9%, #000 83%, transparent 100%);
    pointer-events: none;
    z-index: 0;
  }
  .hero .hero-media::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 44%;
    width: min(94vw, 392px);
    height: 44%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.82) 0%, rgba(255,255,255,0.58) 50%, transparent 78%);
    transform: translate(-50%, -50%);
  }
  .hero .hero-img { display: none; }
  .hero .sheet {
    position: relative;
    width: 100%;
    height: 678px !important;
    min-height: 678px;
    padding: 76px 18px 72px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    z-index: 1;
  }
  .hero .hero-title,
  .hero.hero-alt .hero-title,
  .hero:has(.concept-link:is(:hover, :focus-visible)) .hero-title {
    position: static;
    width: min(100%, 346px);
    margin: 0 auto;
    padding: 0;
    color: #080808;
    background: none;
    font-size: clamp(33px, 9.2vw, 36px);
    font-weight: 400;
    line-height: 1.045;
    text-wrap: balance;
    transform: translateY(-14px);
  }
  .hero .hero-title .l { display: block; }
  .hero .hero-title .l:last-child { font-weight: 700; }
  .hero .hero-subtitle,
  .hero.hero-alt .hero-subtitle,
  .hero:has(.concept-link:is(:hover, :focus-visible)) .hero-subtitle {
    position: static;
    width: min(100%, 350px) !important;
    max-width: 350px !important;
    margin: 17px auto 0;
    padding: 0;
    color: #333;
    font-size: var(--mobile-support-size);
    line-height: var(--mobile-support-leading);
    text-wrap: pretty;
  }
  .hero .hero-actions {
    position: static;
    width: min(100%, 186px);
    margin: 21px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-self: center;
  }
  .hero .hero-button,
  .hero .hero-index {
    position: relative;
    isolation: isolate;
    height: 44px;
    padding: 0 14px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    font-size: 14px;
  }
  .hero .hero-button::before,
  .hero .hero-index::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 4.5px 0;
    border-radius: 999px;
  }
  .hero .hero-button::before {
    border: 1px solid #080808;
    background: #080808;
  }
  .hero .hero-button { width: 138px; align-self: center; }
  .hero .hero-index {
    display: inline-flex;
    width: 186px;
    align-items: center;
    justify-content: center;
    gap: 9px;
    color: #111;
    font-family: var(--sans);
    text-decoration: none;
  }
  .hero .hero-index::before {
    border: 1px solid #111;
    background: rgba(255,255,255,0.78);
  }
  .hero .hero-index > span {
    width: 9px;
    height: 9px;
    background: #111;
  }
  .hero .hero-learn {
    position: absolute;
    left: 50%;
    bottom: max(18px, env(safe-area-inset-bottom));
    width: auto;
    height: 44px;
    padding: 0;
    transform: translateX(-50%);
    border: 0;
    background: transparent;
    color: #111;
    box-shadow: none;
    font-family: var(--sans);
    font-size: 14px;
  }
  .hero .hero-learn::after {
    content: "⌄";
    margin-left: 7px;
    color: #777;
    font-family: var(--sans);
    font-size: 17px;
    line-height: 1;
  }
  .hero .hero-learn::before { content: none; }
  .hero .hero-learn:hover { transform: translateX(-50%); background: transparent; }
  .hero .hero-button:hover,
  .hero .hero-button:focus-visible {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
  }
  .hero .hero-button:hover { transform: none; }
  .hero .hero-button:hover::before { background: #1a1a1a; }

  /* Figma's mobile Shift and Problem are one continuous composition, not two
     viewport cards. Keep the existing desktop primitives and animation
     canvases, but register them to one 390 × 1279 tonal field. The fixed
     reference height is intentional: it preserves the argument's rhythm on
     tall phones instead of stretching every gap with `svh`. Narrow-phone
     adjustments below add room without shrinking readable type. */
  .sp-chapter {
    position: relative;
    display: block;
    height: 1279px;
    overflow: hidden;
    background: linear-gradient(180deg,
      #fff 0%,
      #fff 5.7692%,
      #f1f1ef 27.404%,
      #cacac6 51.442%,
      #979794 60.577%,
      #656563 71.231%,
      #626261 71.383%,
      #434342 78.605%,
      #222221 86.538%,
      #000 93.269%);
  }
  .sp-stage, .is-sp-enhanced .sp-stage {
    position: absolute;
    inset: 0;
    display: block;
    height: 100%;
    overflow: hidden;
  }
  .sp-bg, .is-sp-enhanced .sp-bg { display: none; }
  .sp-fragment { position: absolute; }
  .sp-fragment-shift { top: 0; }
  .sp-fragment-problem { top: 560px; }
  .sp-act, .is-sp-enhanced .sp-act {
    position: absolute;
    left: 0;
    right: 0;
    min-height: 0;
    overflow: visible;
    background: transparent;
  }
  .sp-shift, .is-sp-enhanced .sp-shift { top: 0; height: 560px; }
  .sp-problem, .is-sp-enhanced .sp-problem { top: 560px; height: 719px; }
  .is-sp-enhanced [data-sp-shift], .is-sp-enhanced [data-sp-problem] { opacity: 1; transform: none; }
  .sp-act > .sheet {
    position: relative;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    padding: 0 20px;
    display: block;
    text-align: center;
  }
  .sp-act > .sheet > .sp-copy {
    position: relative;
    left: auto;
    top: auto;
    width: min(100%, 350px);
    height: auto;
  }
  .next-steps .label-row-s {
    position: static;
    display: flex;
    justify-content: center;
    margin: 0 0 18px;
  }
  .sp-copy .label-row-s .ld,
  .next-steps .label-row-s .ld { width: 14px; height: 14px; }
  .sp-copy .label-row-s .lt,
  .next-steps .label-row-s .lt { font-size: 13px; line-height: 15px; }
  .sp-act h2 {
    position: absolute;
    left: 50%;
    width: min(calc(100vw - 40px), 350px);
    margin: 0;
    font-size: 22px;
    line-height: 33.158px;
    text-align: center;
    text-wrap: balance;
    transform: translateX(-50%);
  }
  .sp-act h2 br { display: none; }
  .next-steps h2 {
    position: static;
    width: min(100%, 350px);
    margin: 0 auto 18px;
    font-size: clamp(28px, 7.45vw, 31px);
    line-height: 1.1;
    text-align: center;
    text-wrap: balance;
  }
  .sp-shift .shift-body-open,
  .sp-problem .problem-body {
    font-size: var(--mobile-support-size);
    line-height: var(--mobile-support-leading);
    text-wrap: pretty;
  }
  .next-steps .ns-body {
    font-size: var(--mobile-body-size);
    line-height: var(--mobile-body-leading);
    text-wrap: pretty;
  }

  /* On mobile the two acts become centred editorial sequences. `contents`
     lets the visual sit where the argument needs it without disturbing the
     approved desktop composition. */
  .sp-shift > .sheet > .sp-copy,
  .sp-problem > .sheet > .sp-copy,
  .sp-shift .shift-body-open,
  .sp-problem .problem-body { display: contents; }

  .sp-shift .label-row-s,
  .sp-problem .label-row-s {
    position: absolute;
    left: 50%;
    justify-content: center;
    margin: 0;
    transform: translateX(-50%);
  }
  .sp-shift .label-row-s { top: 67.52px; }
  .sp-problem .label-row-s { top: 17.52px; }
  .sp-shift h2 { top: 100.52px; }
  .sp-problem h2 { top: 82px; }

  .sp-shift .stat-cite {
    position: absolute;
    left: 50%;
    top: 190px;
    width: min(calc(100vw - 64px), 291px);
    margin: 0;
    display: block;
    color: #383737;
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-wrap: pretty;
    transform: translateX(-50%);
  }
  .sp-shift .shift-stat-lead,
  .sp-shift .shift-stat-number,
  .sp-shift .shift-stat-copy { display: inline; font: inherit; letter-spacing: inherit; }
  .sp-shift .stat-dot { display: none; }
  .sp-shift .stat-citation {
    display: none;
  }
  .sp-shift .stat-cite {
    text-decoration: none;
    cursor: default;
  }

  .sp-shift .shift-body-section + .shift-body-section,
  .sp-problem .problem-body-section + .problem-body-section { margin-top: 0; }
  .sp-shift .shift-body-section:not(.stat-cite),
  .sp-problem .problem-body-section {
    position: absolute;
    left: 50%;
    width: min(calc(100vw - 64px), 291px);
    margin: 0;
    text-align: center;
    transform: translateX(-50%);
  }
  /* The desktop has room for the explanatory bridge. On mobile the headline,
     proof, graphic and conclusion already complete the argument; repeating
     the bridge turns the section into a stack of competing text blocks. */
  .sp-shift .shift-body-section:not(.stat-cite):not(.shift-body-close) { display: none; }
  .sp-shift .shift-body-close {
    top: 262px;
    color: #383737;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-wrap: pretty;
  }

  .sp-act > .sheet > .sp-visual {
    position: absolute;
    left: 50%;
    flex: 0 0 auto;
    transform: translateX(-50%);
  }
  .sp-shift > .sheet > .sp-visual {
    /* Scale the approved 520 × 400 desktop canvas as one object. All child
       geometry continues to use the desktop's --u/--cu values, so the prompt,
       evaluation state and source atoms retain the same proportions rather
       than becoming a separate mobile component. */
    --u: min(0.6730769px, calc((100vw - 40px) / 520));
    --cu: var(--u);
    width: calc(520 * var(--u));
    height: calc(400 * var(--u));
    top: 294px;
    margin: 0;
    isolation: isolate;
  }
  .sp-shift > .sheet > .sp-visual::before,
  .sp-shift .shift-q-pill::before,
  .sp-shift .shift-sources .dot::after { content: none; }

  .sp-problem > .sheet > .sp-visual {
    --u: min(0.6730769px, calc((100vw - 40px) / 520));
    --cu: var(--u);
    width: calc(520 * var(--u));
    height: calc(400 * var(--u));
    top: 141px;
    margin: 0;
    isolation: isolate;
  }
  .sp-problem > .sheet > .sp-visual::before,
  .sp-problem > .sheet > .sp-visual::after {
    content: none;
  }
  .sp-problem .surface-field {
    position: absolute;
    left: 0;
    top: 0;
    width: calc(520 * var(--u));
    height: calc(400 * var(--u));
    margin: 0;
    transform: scale(0.85);
  }
  .sp-problem .surface-field .sf-atom,
  .sp-problem .surface-field .sf-atom.below {
    background: #585858;
  }
  .sp-problem .surface-field .sf-atom:not(.below) { background: #cdcdcd; }
  .sp-problem .surface-field .sf-atom.lit { background: #fff; }
  .sp-problem .surface-field .sf-atom.cool { background: #cdcdcd; }
  .sp-problem .label-row-s .ld { background: #000; }
  .sp-problem .label-row-s .lt,
  .sp-problem h2 { color: #000; }

  /* The distribution sentence is useful on desktop. On the tighter mobile
     narrative it repeats what the atom field already communicates, so the
     approved composition starts with the website constraint itself. */
  .sp-problem .problem-body-section:first-child { display: none; }
  .sp-problem .problem-body-section:nth-child(2) {
    top: 423px;
    color: #e2e2e2;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
  }
  .sp-problem .problem-body-section.problem-body-close {
    top: 567px;
    color: #e2e2e2;
    font-family: var(--sans);
    font-size: 13px;
    font-weight: 400;
    line-height: 24px;
    text-align: center;
    text-wrap: pretty;
  }

  /* The CTA begins with a long tonal release from the black Index rather
     than a hard colour boundary, then gives the form enough vertical room. */
  .next-steps {
    --cta-release: clamp(360px, 45svh, 420px);
    min-height: 100svh;
    align-items: flex-start;
    background: linear-gradient(180deg,
      #000 0px,
      #060606 7svh,
      #1f1f1f 15svh,
      #6b6b6b 25svh,
      #d1d1d1 35svh,
      #fff var(--cta-release),
      #fff 100%);
  }
  .next-steps > .sheet {
    width: 100%;
    min-height: 100svh;
    height: auto !important;
    padding: calc(var(--cta-release) + 18px) 20px 76px;
  }
  .next-steps .ns-copy,
  .next-steps .ns-form { position: static; width: 100%; }
  .next-steps .ns-copy {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .next-steps .ns-copy h2 { width: min(100%, 350px); max-width: none; }
  .next-steps .label-row-s .ld { display: none; }
  .next-steps .label-row-s .lt {
    color: #696969;
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    line-height: 14px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
  }
  .next-steps .ns-body {
    width: min(100%, 34ch);
    max-width: none;
    text-align: center;
  }
  .next-steps h2 {
    font-size: 28px;
    line-height: 1.18;
  }
  .next-steps h2 .cta-heading-line { display: block; white-space: normal; }
  .next-steps h2 .cta-heading-line + .cta-heading-line::before { content: none; }
  .next-steps h2 .cta-mobile-break { display: block; }
  .next-steps .ns-body { margin: 0; }
  .next-steps .ns-form {
    height: auto;
    margin-top: 34px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }
  .next-steps .ns-form .f-inner { position: static; padding: 0; display: block; }
  .next-steps .ns-fg { position: relative; margin-bottom: 12px; }
  .next-steps .ns-label {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .next-steps .ns-field {
    min-height: 52px;
    padding: 0 16px;
    border: 1px solid #949494;
    border-radius: 0;
    background: rgba(255,255,255,0.72);
    font-size: 16px;
  }
  .next-steps .ns-field.field-invalid { border-color: #A34D3C; }
  .next-steps .ns-phone-row {
    grid-template-columns: minmax(0, 94px) minmax(0, 1fr);
    align-items: stretch;
    gap: 10px;
  }
  .next-steps .ns-country-code {
    min-height: 52px;
    padding: 0 28px 0 14px;
    border: 1px solid #949494;
    border-radius: 0;
    background-color: rgba(255,255,255,0.72);
    background-position: calc(100% - 13px) 48%, calc(100% - 9px) 48%;
    font-size: 16px;
  }
  .next-steps .ns-country-code.field-invalid { border-color: #A34D3C; }
  .next-steps .ns-country-code:focus-visible,
  .next-steps .ns-field:focus-visible { border-width: 2px; }
  .next-steps .ns-error:empty { display: none; }
  .next-steps .ns-error:not(:empty) { min-height: 0; margin: 5px 0 0; }
  .next-steps .ns-submit {
    height: 52px;
    margin-top: 8px;
    border-radius: 999px;
    font-family: var(--sans);
    font-size: 14px;
  }

  /* The CTA remains normal document flow, then the AO rail pins to the bottom
     of the phone viewport. Continued vertical scroll drives the cards
     horizontally in both directions; the generated flex spacer supplies the
     runway without trapping touch input or introducing a nested scroller. */
  .next-steps {
    --rail-pad: 20px;
    --mobile-strip-h: clamp(304px, 38svh, 326px);
    --mobile-strip-gap: 18px;
    --mobile-sheet-h: 0px;
    height: auto;
    min-height: 100svh;
    flex-direction: column;
  }
  .next-steps::after {
    content: "";
    display: block;
    /* The final 18px is the quiet floor beneath the cards. Without including
       it in the runway, the document ends one floor-gap early and the last
       card remains partly off-canvas. */
    flex: 0 0 calc(var(--rail-travel, 0px) + var(--mobile-strip-gap));
    width: 100%;
    pointer-events: none;
  }
  .next-steps > .sheet { margin-block: 0; position: relative; top: auto; }
  .next-steps:has(.cta-strip[data-driven]) > .sheet {
    position: sticky;
    top: calc(100svh - var(--mobile-strip-h) - var(--mobile-strip-gap) - var(--mobile-sheet-h));
  }
  .cta-strip {
    height: var(--mobile-strip-h);
    padding: 18px 0 12px;
    position: relative;
    top: auto;
    transform: none !important;
  }
  .cta-strip[data-driven] {
    position: sticky;
    top: calc(100svh - var(--mobile-strip-h) - var(--mobile-strip-gap));
  }
  .cta-strip-viewport {
    position: relative;
    flex: 0 0 auto;
    height: 226px;
    overflow-x: auto !important;
  }
  .cta-strip[data-driven] .cta-strip-viewport { overflow: hidden !important; }
  .cta-strip .ao-card-index {
    position: absolute;
    z-index: 2;
    top: 0;
    left: var(--rail-pad);
    transform: translate3d(calc(var(--rail-offset, 0px) * -1), 0, 0);
    will-change: transform;
  }
  .cta-strip-rail {
    gap: 12px;
    min-height: 226px;
    padding: 0 var(--rail-pad) 10px calc(var(--rail-pad) + min(80vw, 290px) + 12px);
  }
  .cta-strip:not([data-driven]) .cta-strip-rail { scroll-snap-type: x mandatory; }
  .cta-strip:not([data-driven]) .cta-strip-rail > li { scroll-snap-align: start; }
  .ao-card {
    width: min(80vw, 290px);
    height: auto;
    min-height: 210px;
    padding: 18px;
    border-radius: 10px;
  }
  .ao-card-meta { font-size: 11px; line-height: 15px; }
  .ao-card-q { margin-top: 12px; font-size: 19px; line-height: 1.26; }
  .ao-card-a { margin-top: 10px; font-size: 13.5px; line-height: 1.46; }
  .ao-card-go { font-size: 14px; }

  .cta-strip-nav {
    flex: 0 0 auto;
    width: 148px;
    height: 44px;
    margin: 10px auto 0;
    padding: 0;
    display: grid;
    grid-template-columns: 44px 1fr 44px;
    align-items: center;
    border: 1px solid #111;
    border-radius: 999px;
    background: #fff;
    color: #111;
  }
  .cta-strip-nav button {
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 16px;
    cursor: pointer;
  }
  .cta-strip-nav button:disabled { opacity: 0.28; cursor: default; }
  .cta-strip-nav span {
    font-family: "IBM Plex Mono", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.08em;
    text-align: center;
    text-transform: uppercase;
  }

  .landing-footer {
    min-height: 146px;
    padding: 28px 20px max(28px, env(safe-area-inset-bottom));
    display: flex;
    align-items: center;
    justify-content: center;
    background: #050505;
    color: #fff;
  }
  .landing-footer__brand {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: #fff;
    text-decoration: none;
  }
  .landing-footer__brand img {
    width: 32px;
    height: 25px;
    filter: invert(1);
  }
  .landing-footer__brand span {
    font-family: "Delphic Header Serif", "Playfair Display", Georgia, serif;
    font-size: 22px;
    letter-spacing: 0.18em;
  }

  /* --- mobile legibility floors ---------------------------------------
     `--scale: 1` at <=900px makes `--cu` resolve to 0.85px, so every
     `calc(N * var(--cu))` that has no mobile override lands at 0.85x its
     desktop size. Measured at 390px before this block: hero subtitle
     13.5px, stat citation 8.5px, form error 10.2px, form status 11.05px.
     The form error and status are the only feedback a failed submit gives,
     and the subtitle is the page's primary value proposition. Set explicit
     px floors rather than re-deriving `--cu`, which desktop depends on. */
  .next-steps .ns-error { font-size: 13px; }
  .next-steps .ns-status { font-size: 13px; }
  /* 16px exactly: iOS Safari zooms the viewport on focus below this, and
     does not zoom back out. Every sibling field is already 16px. */
  .next-steps .ns-country-code { font-size: 16px; }
}

@media (min-width: 600px) and (max-width: 900px) {
  .hero .hero-media {
    background-position: 50% clamp(64px, 7svh, 92px);
    background-size: min(70vw, 560px) auto;
    opacity: 0.28;
  }
  .hero .hero-media::after {
    width: min(74vw, 580px);
    height: 48%;
  }
  .hero .sheet {
    padding: clamp(170px, 18svh, 205px) 40px 110px;
  }
  .hero .hero-title,
  .hero.hero-alt .hero-title,
  .hero:has(.concept-link:is(:hover, :focus-visible)) .hero-title {
    width: min(100%, 680px);
    font-size: clamp(40px, 5.15vw, 46px);
    line-height: 1.04;
  }
  .hero .hero-title .l { white-space: nowrap; }
  .hero .hero-subtitle,
  .hero.hero-alt .hero-subtitle,
  .hero:has(.concept-link:is(:hover, :focus-visible)) .hero-subtitle {
    width: min(100%, 54ch) !important;
    max-width: 54ch !important;
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.5;
  }
  .hero .hero-actions { width: 186px; margin-top: 28px; gap: 8px; }
  .hero .hero-button { width: 138px; height: 44px; font-size: 14px; }
  .hero .hero-index { width: 186px; height: 44px; font-size: 14px; }
  .hero .hero-learn { width: auto; height: 44px; font-size: 14px; }
}

@media (max-width: 380px) and (max-height: 720px) {
  .hero .sheet { padding-top: 54px; padding-bottom: 82px; }
  .hero .hero-title { font-size: 30px; }
  .hero .hero-subtitle { margin-top: 14px; font-size: 13px; line-height: 1.55; }
  .hero .hero-actions { margin-top: 16px; }
  .hero .hero-button,
  .hero .hero-index { height: 44px; font-size: 14px; }
  .hero .hero-learn { width: auto; height: 44px; font-size: 13px; }
}

@media (max-width: 900px) and (max-height: 620px) {
  .sticky-header.hdr,
  .hdr > .sheet { height: 60px !important; }
  .hdr > .sheet { padding-top: 14px; padding-bottom: 11px; }
  .hero { min-height: calc(100svh - 60px); }
  .hero .hero-media {
    background-position-y: 14px;
    background-size: min(108vw, 420px) auto;
  }
  .hero .sheet {
    min-height: calc(100svh - 60px);
    padding: 54px 16px 48px;
  }
  .hero .hero-title { font-size: clamp(28px, 7.6vw, 30px); line-height: 1.02; }
  .hero .hero-subtitle { margin-top: 11px; font-size: 13px; line-height: 1.48; }
  .hero .hero-actions { margin-top: 13px; }
  .hero .hero-button,
  .hero .hero-index { height: 44px; font-size: 13.5px; }
  .hero .hero-learn { width: auto; height: 44px; font-size: 13px; }

}

/* 320–340px phones need more vertical room because the approved 22px
   headings gain a line. Preserve the type floor and component proportions;
   move the later beats instead of scaling the whole composition down. */
@media (max-width: 340px) {
  .sp-chapter { height: 1400px; }
  .sp-fragment-problem { top: 610px; }
  .sp-shift, .is-sp-enhanced .sp-shift { height: 610px; }
  .sp-problem, .is-sp-enhanced .sp-problem { top: 610px; height: 790px; }
  .sp-shift .stat-cite { top: 215px; }
  .sp-shift .shift-body-close { top: 311px; }
  .sp-shift > .sheet > .sp-visual { top: 356px; }
  .sp-problem > .sheet > .sp-visual { top: 188px; }
  .sp-problem .problem-body-section:nth-child(2) { top: 484px; }
  .sp-problem .problem-body-section.problem-body-close { top: 676px; }
}

/* A short landscape viewport cannot accommodate the portrait action stack
   and the persistent "Full Story" affordance without overlap. Keep both
   actions intact, but place them on one line for this shape only. */
@media (min-width: 600px) and (max-width: 900px) and (max-height: 620px) {
  .hero {
    height: max(330px, calc(100svh - 60px));
    min-height: max(330px, calc(100svh - 60px));
  }
  .hero .sheet {
    height: 100% !important;
    min-height: max(330px, calc(100svh - 60px));
  }
  .hero .hero-actions {
    width: 336px;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 12px;
  }
  .hero .hero-button { flex: 0 0 138px; }
  .hero .hero-index { flex: 0 0 186px; }
  .hero .hero-learn { bottom: max(0px, env(safe-area-inset-bottom)); }
}