/*
 * APEX V3 — PUBLIC LANDING.
 *
 * Design language, so every value below has a reason:
 *
 *   The page is an INSTRUMENT READOUT, not a brochure. It opens on a dark
 *   measured field and then walks down a numbered spine — one chapter per
 *   stage of how APEX actually reasons. Each chapter carries a hairline rail
 *   that draws itself as the chapter arrives, so scrolling feels like
 *   following a single continuous path rather than passing a stack of
 *   unrelated marketing bands.
 *
 * Three rules inherited from theme.css and held to strictly here:
 *
 *   1. SURFACES CATCH LIGHT, THEY DO NOT EMIT IT. Panels have a lit top
 *      edge and a shadowed underside. Nothing on this page glows except the
 *      single decision core in the hero field, which is the one thing the
 *      composition is about.
 *
 *   2. ONE ACCENT, SPENT SPARINGLY. Ice blue marks what is interactive or
 *      what APEX is asserting. Green means authorised, amber means wait, red
 *      means invalidation. A colour that means something is never used for
 *      decoration.
 *
 *   3. TYPE SPLITS BY AUTHORSHIP. Editorial display type for statements APEX
 *      makes; tabular mono for anything the market determines. No webfont is
 *      downloaded — the system stack resolves to SF Pro / SF Mono, and the
 *      page stays render-blocking-free and fully offline.
 *
 * All tokens come from theme.css. This file adds no new palette.
 */

/* ═══════════════════════════════════════════════════════════════════
 * 1. SHELL + BASE
 * ═══════════════════════════════════════════════════════════════════ */

.shell {
  width: min(1240px, 100% - clamp(24px, 6vw, 96px));
  margin-inline: auto;
}

.landing {
  position: relative;
  z-index: 1;
}

/* The landing floor sinks below the app floor: the hero field is the only
   light source, and it needs a genuinely black ground to read against. */
.landing-body {
  background-color: var(--bg-global);
  overflow-x: hidden;
}

/* ═══════════════════════════════════════════════════════════════════
 * 2. TYPOGRAPHY
 * ═══════════════════════════════════════════════════════════════════ */

.display {
  margin: 0 0 clamp(20px, 2.4vw, 30px);
  font-family: var(--font-display);
  /* Sized so the longest line ('before conviction.') holds on ONE line at
     every desktop width inside .hero__copy. Bigger type that wraps into a
     ragged third line reads as an accident, not confidence. */
  font-size: clamp(40px, 6vw, 82px);
  line-height: 1.0;
  font-weight: 600;
  letter-spacing: -0.035em;
  color: var(--text-strong);
}

/* The second clause of a display statement, held one step back. Not a
   colour accent — a WEIGHT and OPACITY step, which reads as considered
   rather than highlighted. */
.display em {
  font-style: normal;
  font-weight: 300;
  color: var(--titanium);
}

.display--sm {
  font-size: clamp(32px, 4.6vw, 62px);
  line-height: 1.06;
}

.headline {
  margin: 0 0 clamp(16px, 1.8vw, 22px);
  font-family: var(--font-display);
  font-size: clamp(26px, 3.1vw, 44px);
  line-height: 1.08;
  font-weight: 600;
  letter-spacing: -0.028em;
  color: var(--text-strong);
  text-wrap: balance;
}

.lede {
  margin: 0 0 clamp(28px, 3vw, 40px);
  max-width: 46ch;
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: var(--muted);
}

.statement {
  margin: 0 0 16px;
  max-width: 44ch;
  font-size: clamp(14px, 1vw, 15.5px);
  line-height: 1.68;
  color: var(--muted);
}

.statement--wide { max-width: 58ch; }

.eyebrow {
  margin: 0 0 clamp(14px, 1.4vw, 20px);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--accent);
}

.eyebrow--rule {
  display: flex;
  align-items: center;
  gap: 14px;
}
.eyebrow--rule::before {
  content: "";
  width: 34px;
  height: 1px;
  background: linear-gradient(90deg, var(--accent), transparent);
  flex: none;
}

/* ═══════════════════════════════════════════════════════════════════
 * 3. BUTTONS
 * ═══════════════════════════════════════════════════════════════════ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 13px 26px;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              background-color 0.22s ease, border-color 0.22s ease,
              color 0.22s ease, box-shadow 0.22s ease;
}
.btn:hover { text-decoration: none; }
/* One tap acts once. Without this, mobile Safari can hold the tap for a
   double-tap-zoom gesture, which users read as an unresponsive button. */
.btn { touch-action: manipulation; }

.btn--lg { padding: 16px 34px; font-size: 13.5px; }

.btn--primary {
  background: var(--accent-bright);
  color: #05070c;
  border-color: var(--accent-bright);
}
.btn--primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 14px 34px -14px rgba(134, 184, 222, 0.7);
}

.btn--ghost {
  border-color: var(--border-strong);
  color: var(--text);
  background: transparent;
}
.btn--ghost:hover {
  border-color: var(--accent);
  color: var(--accent-bright);
  transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════
 * 4. HERO + EVIDENCE FIELD
 * ═══════════════════════════════════════════════════════════════════ */

.hero {
  position: relative;
  min-height: min(94vh, 900px);
  display: flex;
  align-items: center;
  padding-block: clamp(56px, 9vh, 120px) clamp(72px, 12vh, 150px);
  overflow: hidden;
}

/* The field sits behind the type and is pushed right, so the editorial
   column has genuinely clean ground under it. This is the single decision
   that lets the type carry the first screen. */
.field {
  position: absolute;
  inset: 0 0 0 auto;
  width: min(1180px, 96%);
  pointer-events: none;
  z-index: 0;
}
.field__canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* Masks the field's left edge into the void so it never collides with the
   headline, and softens the outer frame so it reads as depth, not a box. */
.field__vignette {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, var(--bg-global) 2%, rgba(1, 2, 4, 0.66) 18%, transparent 44%),
    radial-gradient(ellipse 74% 74% at 62% 46%, transparent 42%, var(--bg-global) 100%);
}

.hero__inner {
  position: relative;
  z-index: 1;
  width: min(1240px, 100% - clamp(24px, 6vw, 96px));
}

.hero__copy { max-width: 740px; }

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: clamp(34px, 4vw, 52px);
}

/* Three structural facts, set as a hairline-ruled list. Deliberately not
   "stats": no number on this page is a performance claim. */
.hero__facts {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
  max-width: 520px;
}
.hero__facts li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.hero__facts-k {
  flex: none;
  width: 76px;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--dim);
}

/* Lane legend — names what the field is drawing, bottom-right of the hero. */
.hero__lanes {
  position: absolute;
  right: 0;
  bottom: clamp(18px, 3vh, 34px);
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  max-width: 46%;
  justify-content: flex-end;
}
.hero__lanes li {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--dim);
}
.hero__lanes li::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 1px;
  margin-right: 8px;
  vertical-align: middle;
  background: var(--border-strong);
}

.scroll-cue {
  position: absolute;
  left: clamp(24px, 6vw, 96px);
  bottom: clamp(24px, 4vh, 48px);
  display: flex;
  align-items: center;
  gap: 12px;
  z-index: 2;
  transition: opacity 0.5s ease;
}
.scroll-cue[data-hidden="true"] { opacity: 0; pointer-events: none; }
.scroll-cue__rail {
  width: 44px;
  height: 1px;
  background: linear-gradient(90deg, var(--titanium), transparent);
}
.scroll-cue__label {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--dim);
}

/* ═══════════════════════════════════════════════════════════════════
 * 5. CHAPTERS — the numbered spine
 * ═══════════════════════════════════════════════════════════════════ */

.chapter {
  position: relative;
  padding-block: clamp(72px, 10vh, 132px);
}

/* A raised chapter is one step above the void, with hairlines top and
   bottom. It gives the scroll a rhythm of surfacing and sinking rather than
   one uninterrupted black run. */
.chapter--raised {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.016), transparent 62%);
  border-block: 1px solid var(--border);
}

.chapter__grid {
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr) minmax(0, 1.04fr);
  gap: clamp(20px, 3.4vw, 60px);
  align-items: start;
}
.chapter__rail { grid-column: 1; grid-row: 1; }
.chapter__lead { grid-column: 2; grid-row: 1; }
.chapter__demo { grid-column: 3; grid-row: 1; min-width: 0; }

.chapter__grid--reverse { grid-template-columns: 54px minmax(0, 1.04fr) minmax(0, 1fr); }
.chapter__grid--reverse .chapter__lead { grid-column: 3; }
.chapter__grid--reverse .chapter__demo { grid-column: 2; }

/* The rail: a number and a hairline that draws downward as the chapter
   enters. This is the page's connective tissue. */
.chapter__rail {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding-top: 4px;
}
.chapter__n {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
  letter-spacing: 0.06em;
}
.chapter__line {
  flex: 1;
  width: 1px;
  min-height: 120px;
  background: linear-gradient(180deg, var(--border-accent), var(--border) 55%, transparent);
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 1.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
.chapter.is-in .chapter__line { transform: scaleY(1); }

.chapter__rail--inline {
  flex-direction: row;
  margin-bottom: 14px;
  justify-content: flex-start;
}

.chapter__head {
  max-width: 64ch;
  margin-bottom: clamp(32px, 4vw, 56px);
}

.chapter__note {
  margin: clamp(24px, 3vw, 36px) 0 0;
  max-width: 62ch;
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--dim);
}

/* ═══════════════════════════════════════════════════════════════════
 * 6. REVEAL — one-shot, never perpetual motion
 * ═══════════════════════════════════════════════════════════════════ */

.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}
.reveal.is-in {
  opacity: 1;
  transform: none;
  will-change: auto;
}
.reveal--d1 { transition-delay: 0.1s; }
.reveal--d2 { transition-delay: 0.2s; }

/* ═══════════════════════════════════════════════════════════════════
 * 7. PANEL + TAGS
 * ═══════════════════════════════════════════════════════════════════ */

/* The APEX surface: lit top edge, shadowed underside, hairline border. */
.panel {
  position: relative;
  padding: clamp(20px, 2vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.028), transparent 46%),
    var(--panel);
  box-shadow: var(--shadow-panel);
}
.panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent);
}

.panel__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 20px;
}
.panel__title {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text);
}
.panel__foot {
  margin: 20px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--dim);
}
.panel__foot--loose {
  border-top: 0;
  padding-top: 0;
  margin-top: 22px;
}
.panel__foot strong { color: var(--text); font-weight: 600; }

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 9px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--muted);
  white-space: nowrap;
}
/* The honesty tag. Deliberately legible, never a whisper. */
.tag--illus {
  border-color: color-mix(in srgb, var(--amber) 34%, var(--border));
  background: var(--amber-dim);
  color: var(--amber);
}
.tag--quiet { color: var(--dim); }

/* ═══════════════════════════════════════════════════════════════════
 * 8. CHAPTER 01 — EVIDENCE STREAMS
 * ═══════════════════════════════════════════════════════════════════ */

.streams {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.stream {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr) 68px;
  align-items: center;
  gap: 14px;
  padding: 11px 12px;
  border-radius: var(--radius-sm);
  transition: background-color 0.3s ease;
}
.stream:hover { background: rgba(255, 255, 255, 0.02); }

.stream__name {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--text);
}

.stream__trace {
  width: 100%;
  height: 20px;
  overflow: visible;
}
.stream__trace path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.55;
  /* Drawn on reveal. 260 comfortably exceeds every path length here, so a
     single value serves all seven without measuring each in JS. */
  stroke-dasharray: 260;
  stroke-dashoffset: 260;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.stream__trace rect {
  fill: var(--accent);
  opacity: 0;
  transition: opacity 0.6s ease;
  transition-delay: calc(var(--i, 0) * 90ms + 500ms);
}
.reveal.is-in .stream__trace path { stroke-dashoffset: 0; }
.reveal.is-in .stream__trace rect { opacity: 0.16; }

.stream__state {
  justify-self: end;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--dim);
}

/* ═══════════════════════════════════════════════════════════════════
 * 9. CHAPTER 02 — CONVERGENCE
 * ═══════════════════════════════════════════════════════════════════ */

.converge {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 22px;
}
.converge__links path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 1;
  opacity: 0.3;
  stroke-dasharray: 240;
  stroke-dashoffset: 240;
  transition: stroke-dashoffset 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.converge__links path:nth-child(2) { transition-delay: 0.07s; }
.converge__links path:nth-child(3) { transition-delay: 0.14s; }
.converge__links path:nth-child(4) { transition-delay: 0.21s; }
.converge__links path:nth-child(5) { transition-delay: 0.28s; }
.converge__links path:nth-child(6) { transition-delay: 0.35s; }
.converge__links path:nth-child(7) { transition-delay: 0.42s; }
.reveal.is-in .converge__links path { stroke-dashoffset: 0; }

.converge__in circle { fill: var(--titanium); opacity: 0.6; }
.converge__out circle {
  fill: var(--accent-bright);
  opacity: 0;
  transition: opacity 0.7s ease 0.9s;
}
.reveal.is-in .converge__out circle { opacity: 0.9; }

.context-keys {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 9px;
}
.context-keys li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-top: 9px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
.context-keys__k {
  flex: none;
  width: 82px;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════════
 * 10. CHAPTER 03 — THE DECISION OBJECT
 * ═══════════════════════════════════════════════════════════════════ */

.verdict {
  position: relative;
  padding: clamp(22px, 2.2vw, 32px);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-lg);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.036), transparent 40%),
    var(--panel);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.5), 0 26px 60px -26px rgba(0, 0, 0, 0.9);
}
.verdict::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, transparent, rgba(211, 231, 247, 0.32), transparent);
}

.verdict__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border);
}
.verdict__instrument { display: flex; align-items: baseline; gap: 10px; }
.verdict__sym {
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text-strong);
}
.verdict__tf {
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  color: var(--dim);
}

.verdict__bias {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
}
.verdict__bias-k {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--dim);
}
.verdict__bias-v {
  font-family: var(--font-display);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}
.verdict__bias-v[data-dir="long"] { color: var(--green); }
.verdict__bias-v[data-dir="short"] { color: var(--red); }
.verdict__bias-v[data-dir="wait"] { color: var(--amber); }

.verdict__levels {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 1px;
  margin: 0 -4px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}
.level { padding: 0 4px; }
.level__k {
  display: block;
  margin-bottom: 7px;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--dim);
}
.level__v {
  display: block;
  font-size: clamp(17px, 1.5vw, 21px);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--text-strong);
}
.level--red .level__v { color: var(--red); }
.level--green .level__v { color: var(--green); }

.verdict__why {
  margin: 20px 0 0;
  font-size: 13px;
  line-height: 1.68;
  color: var(--muted);
}
.verdict__note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-micro);
  line-height: 1.6;
  color: var(--dim);
}

/* ═══════════════════════════════════════════════════════════════════
 * 11. CHAPTER 04 — THE RISK GATE
 * ═══════════════════════════════════════════════════════════════════ */

.gate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.gate__col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: clamp(20px, 2vw, 28px) 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 50%), var(--panel);
  text-align: center;
}

.gate__node {
  padding: 9px 16px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--muted);
  white-space: nowrap;
}
.gate__node--check {
  border-color: var(--border-accent);
  color: var(--accent);
}

.gate__arrow {
  width: 1px;
  height: 28px;
  margin: 4px 0;
  background: linear-gradient(180deg, var(--border-strong), var(--titanium));
  position: relative;
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}
.gate__col .gate__arrow:nth-of-type(2) { transition-delay: 0.35s; }
.reveal.is-in .gate__arrow { transform: scaleY(1); }
.gate__arrow::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1px;
  width: 5px;
  height: 5px;
  margin-left: -2.5px;
  border-right: 1px solid var(--titanium);
  border-bottom: 1px solid var(--titanium);
  transform: rotate(45deg);
}

/* The two outcomes are given identical visual weight. That equality is the
   argument: WAIT is a result, not a failure to produce one. */
.gate__out {
  margin-top: 4px;
  padding: 13px 26px;
  border: 1px solid;
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-size: clamp(15px, 1.5vw, 19px);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.6s ease 0.75s, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.75s;
}
.reveal.is-in .gate__out { opacity: 1; transform: none; }
.gate__out--ok {
  border-color: color-mix(in srgb, var(--green) 46%, var(--border));
  background: var(--green-dim);
  color: var(--green);
}
.gate__out--wait {
  border-color: color-mix(in srgb, var(--amber) 46%, var(--border));
  background: var(--amber-dim);
  color: var(--amber);
}

.gate__caption {
  margin: 16px 0 0;
  max-width: 26ch;
  font-size: var(--fs-caption);
  line-height: 1.55;
  color: var(--dim);
}

/* ═══════════════════════════════════════════════════════════════════
 * 12. CHAPTER 05 — LIFECYCLE
 * ═══════════════════════════════════════════════════════════════════ */

.lifecycle {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.lifecycle__step {
  position: relative;
  padding: clamp(20px, 2vw, 28px) clamp(16px, 1.4vw, 22px);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.018), transparent 60%), var(--panel);
  transition: background-color 0.35s ease;
}
.lifecycle__step:hover { background-color: var(--panel-2); }
/* A hairline that fills left-to-right across each step in sequence: the
   lifecycle reads as a path, not five boxes. */
.lifecycle__step::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--accent);
  opacity: 0.45;
  transform-origin: left;
  transform: scaleX(0);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i, 0) * 130ms);
}
.reveal.is-in .lifecycle__step::before { transform: scaleX(1); }

.lifecycle__n {
  display: block;
  margin-bottom: 14px;
  font-family: var(--font-mono);
  font-size: var(--fs-caption);
  font-variant-numeric: tabular-nums;
  color: var(--accent);
}
.lifecycle__t {
  margin: 0 0 8px;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--text-strong);
}
.lifecycle__b {
  margin: 0;
  font-size: 12.5px;
  line-height: 1.58;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════
 * 13. CHAPTER 06 — MARKETS
 * ═══════════════════════════════════════════════════════════════════ */

.markets {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
}
.market {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: clamp(20px, 2vw, 26px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 52%), var(--panel);
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.market:hover { border-color: var(--border-strong); transform: translateY(-2px); }

.market__sym {
  font-family: var(--font-mono);
  font-size: clamp(19px, 1.9vw, 25px);
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-strong);
}
.market__class {
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--dim);
}
/* Session state. Clock-derived and therefore genuinely true — the only
   live thing on this page, and the reason no price appears beside it. */
.market__state {
  margin-top: 6px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--dim);
}
.market__state[data-state="open"] { color: var(--green); }
.market__state[data-state="closed"] { color: var(--dim); }
.market__state[data-state="always"] { color: var(--accent); }

.tf-ladder {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}
.tf-ladder__k {
  margin-right: 6px;
  font-size: var(--fs-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--dim);
}
.tf {
  padding: 5px 11px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--panel);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════
 * 14. CHAPTER 07 — STRATEGY LADDER
 * ═══════════════════════════════════════════════════════════════════ */

.ladder {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}
.ladder__step {
  display: grid;
  grid-template-columns: 108px minmax(0, 1fr);
  align-items: baseline;
  gap: 16px;
  padding: 16px 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--panel);
  transition: border-color 0.3s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  /* Each rung sits fractionally further right than the last — the idea is
     climbing, not queuing. */
  margin-left: calc(var(--i, 0) * 10px);
}
.ladder__step:hover { border-color: var(--border-strong); transform: translateX(3px); }
.ladder__step--end {
  border-color: color-mix(in srgb, var(--green) 34%, var(--border));
  background: linear-gradient(90deg, var(--green-dim), transparent 60%), var(--panel);
}
.ladder__k {
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-label);
  color: var(--accent);
}
.ladder__step--end .ladder__k { color: var(--green); }
.ladder__b {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--muted);
}

/* ═══════════════════════════════════════════════════════════════════
 * 15. CHAPTER 08 — THE STACK
 * ═══════════════════════════════════════════════════════════════════ */

.stack {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: clamp(26px, 3vw, 40px) clamp(18px, 2vw, 28px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.022), transparent 50%), var(--panel);
}
.stack__node {
  padding: 12px 24px;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  background: var(--panel-2);
  font-size: var(--fs-label);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-caps);
  color: var(--muted);
  text-align: center;
}
.stack__node--core {
  border-color: var(--border-accent);
  background: var(--accent-dim);
  color: var(--accent-bright);
}
.stack__node--out {
  border-color: color-mix(in srgb, var(--green) 40%, var(--border));
  background: var(--green-dim);
  color: var(--green);
}
.stack__link {
  width: 1px;
  height: 26px;
  background: linear-gradient(180deg, var(--border-strong), var(--titanium));
  transform-origin: top;
  transform: scaleY(0);
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}
.stack__link:nth-of-type(2) { transition-delay: 0.18s; }
.stack__link:nth-of-type(3) { transition-delay: 0.36s; }
.reveal.is-in .stack__link { transform: scaleY(1); }

.stack__always {
  margin-top: 26px;
  padding-top: 20px;
  width: 100%;
  border-top: 1px solid var(--border);
  text-align: center;
  font-family: var(--font-mono);
  font-size: clamp(20px, 2.2vw, 28px);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.14em;
  color: var(--text-strong);
}

/* ═══════════════════════════════════════════════════════════════════
 * 16. CHAPTER 09 — ENTER
 * ═══════════════════════════════════════════════════════════════════ */

.enter {
  position: relative;
  padding-block: clamp(96px, 16vh, 190px);
  text-align: center;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(ellipse 62% 100% at 50% 100%, rgba(134, 184, 222, 0.07), transparent 70%),
    var(--bg-global);
}
.enter__inner { max-width: 900px; margin-inline: auto; }
.enter .display { margin-bottom: clamp(30px, 3.6vw, 44px); }
.enter__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════════
 * 17. FOOTER
 * ═══════════════════════════════════════════════════════════════════ */

.landing-footer {
  padding-block: clamp(48px, 7vh, 84px);
  border-top: 1px solid var(--border);
  background: var(--bg);
}
.landing-footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: clamp(22px, 3vw, 44px);
  padding-bottom: clamp(30px, 4vw, 46px);
  border-bottom: 1px solid var(--border);
}
.landing-footer .label { margin: 0 0 9px; }
.landing-footer__b {
  margin: 0;
  font-size: var(--fs-caption);
  line-height: 1.6;
  color: var(--dim);
}
.landing-footer__note {
  margin: clamp(24px, 3vw, 32px) 0 0;
  max-width: 82ch;
  font-size: var(--fs-micro);
  line-height: 1.65;
  color: var(--dim);
}
.landing-footer__note + .landing-footer__note { margin-top: 12px; }

/* ═══════════════════════════════════════════════════════════════════
 * 18. RESPONSIVE
 *
 * Mobile is not the desktop page scaled down. The hero shortens, the field
 * loses its right-offset and sits behind everything at low contrast, the
 * chapter rails go inline, and every multi-column demo becomes a single
 * readable column with full-width touch targets.
 * ═══════════════════════════════════════════════════════════════════ */

@media (max-width: 1080px) {
  .lifecycle { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lifecycle__step:last-child { grid-column: span 2; }
}

@media (max-width: 900px) {
  .hero {
    /* Still opens with presence on a tablet — just not a full desktop
       viewport. On a phone the copy is taller than this anyway, so the
       min-height quietly stops applying rather than forcing dead space. */
    min-height: 72vh;
    padding-block: clamp(48px, 8vh, 72px) clamp(72px, 10vh, 96px);
  }
  .hero__copy { max-width: none; }

  /* Field spans the full hero and drops back considerably: on a phone the
     type must win outright. */
  .field { inset: 0; width: 100%; opacity: 0.42; }
  .field__vignette {
    background:
      linear-gradient(180deg, var(--bg-global) 2%, rgba(1, 2, 4, 0.55) 30%, transparent 70%),
      radial-gradient(ellipse 80% 70% at 50% 50%, transparent 30%, var(--bg-global) 100%);
  }

  .hero__lanes { display: none; }
  .scroll-cue { display: none; }

  .chapter { padding-block: clamp(56px, 8vh, 80px); }

  /* Rail collapses to an inline number above the heading. */
  .chapter__grid,
  .chapter__grid--reverse { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .chapter__grid .chapter__rail,
  .chapter__grid--reverse .chapter__rail {
    grid-column: 1;
    grid-row: 1;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
  }
  .chapter__grid .chapter__lead,
  .chapter__grid--reverse .chapter__lead { grid-column: 1; grid-row: 2; }
  .chapter__grid .chapter__demo,
  .chapter__grid--reverse .chapter__demo { grid-column: 1; grid-row: 3; }
  .chapter__line {
    width: 100%;
    min-height: 0;
    height: 1px;
    transform: scaleX(0);
    transform-origin: left;
    background: linear-gradient(90deg, var(--border-accent), transparent);
    transition: transform 1.1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  .chapter.is-in .chapter__line { transform: scaleX(1); }

  .statement, .lede { max-width: none; }

  .gate { grid-template-columns: minmax(0, 1fr); }
  .lifecycle { grid-template-columns: minmax(0, 1fr); }
  .lifecycle__step:last-child { grid-column: auto; }
  .ladder__step { margin-left: 0; }
}

@media (max-width: 640px) {
  /* The brand subtitle wraps to two lines at this width and doubles the
     header's height on the one screen that most needs to open clean. Scoped
     to the landing page — the authenticated shell keeps its full lockup. */
  .landing-body .apex-header .subtitle { display: none; }

  .display { font-size: clamp(34px, 10.5vw, 52px); }
  .headline { font-size: clamp(24px, 7vw, 32px); }

  /* Full-width, thumb-sized CTAs. */
  .hero__actions, .enter__actions { flex-direction: column; align-items: stretch; }
  .hero__actions .btn, .enter__actions .btn { width: 100%; padding-block: 17px; }

  .stream { grid-template-columns: 74px minmax(0, 1fr); gap: 10px; padding: 10px 8px; }
  .stream__state { display: none; }

  .ladder__step { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .verdict__levels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
  .markets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .market:last-child { grid-column: span 2; }
  .context-keys li { flex-direction: column; gap: 3px; }
  .context-keys__k { width: auto; }
  .hero__facts li { flex-direction: column; gap: 3px; }
  .hero__facts-k { width: auto; }
}

/* ═══════════════════════════════════════════════════════════════════
 * 19. REDUCED MOTION
 *
 * Everything arrives in its settled state. Nothing translates, draws,
 * counts or breathes. The canvas paints a single static frame (handled in
 * evidence-field.js) rather than being removed, so the composition survives.
 * ═══════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.is-in {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .chapter__line,
  .chapter.is-in .chapter__line { transform: none; transition: none; }
  .stream__trace path { stroke-dashoffset: 0; transition: none; }
  .stream__trace rect { opacity: 0.16; transition: none; }
  .converge__links path { stroke-dashoffset: 0; transition: none; }
  .converge__out circle { opacity: 0.9; transition: none; }
  .gate__arrow, .stack__link { transform: none; transition: none; }
  .gate__out { opacity: 1; transform: none; transition: none; }
  .lifecycle__step::before { transform: scaleX(1); transition: none; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
  .market:hover, .ladder__step:hover { transform: none; }
  .scroll-cue { transition: none; }
}