/* ==========================================================================
   Self — trust infrastructure for agents
   --------------------------------------------------------------------------
   Ground:   #0A0A0A void · #F4F1EA signal (light-on-dark, flips per section)
   Type:     Helvetica Neue (display + body) · JetBrains Mono (utility / data)
   Color:    spent almost entirely on meaning — a neutral-to-amber ladder for
             autonomy tiers 0–4, and one shared verdict vocabulary borrowed
             from the gate itself: cream reads as "act," amber as "ask," red
             as "refuse." Nothing decorative is colored.
   Motif:    self.gate — the live decision feed the hero opens on, and the
             same three-verdict language everywhere a state needs a color.
   ========================================================================== */

:root {
  --void: #0a0a0a;
  --raise: #0a0a0a;
  --raise-2: #141412;

  /* Four text weights, all cream-on-void. The floor is 0.5 — below that,
     #F4F1EA on this ground drops under 4.5:1 for anything but the largest
     labels. */
  --peak: #f4f1ea;
  --signal: rgba(244, 241, 234, 0.9);
  --dim: rgba(244, 241, 234, 0.72);
  --dimmer: rgba(244, 241, 234, 0.58);
  --faint: rgba(244, 241, 234, 0.5);

  --line: rgba(244, 241, 234, 0.14);
  --line-soft: rgba(244, 241, 234, 0.09);
  --line-hard: rgba(244, 241, 234, 0.28);

  /* Fixed ink — text set on a bright semantic chip (state badges, move
     chips) stays this regardless of which section theme it sits inside. */
  --ink: #0a0a0a;

  /* The gate's own vocabulary — reused everywhere a verdict needs a color. */
  --amber: #f5b83d;
  --red: #e2483c;

  /* Autonomy tiers 0–4 — sequential, low to high, ending on the one accent
     color the page spends: reaching the top tier is the only thing that
     earns amber. Solid values, not tinted — the ladder appears on both
     grounds and needs to read the same on either. */
  --t0: #4d4d49;
  --t1: #71716b;
  --t2: #9d9d94;
  --t3: #d4d0c4;
  --t4: #f5b83d;

  /* Failure severity — ascending intensity, on the same amber-to-red scale. */
  --sev-info: rgba(244, 241, 234, 0.5);
  --sev-minor: #f5b83d;
  --sev-material: #d9762c;
  --sev-critical: #e2483c;

  /* Recommendation states, in the gate's own words: promote reads as "act,"
     probation as "ask," demote as "refuse." */
  --st-maintain: rgba(244, 241, 234, 0.5);
  --st-promote: #f4f1ea;
  --st-probation: #f5b83d;
  --st-demote: #e2483c;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --sans: "Helvetica Neue", Helvetica, Arial, sans-serif;

  --gutter: clamp(24px, 4vw, 64px);

  /* The page is deliberately flat — borders carry structure, not shadow. */
  --shadow-panel: none;
  --shadow-panel-sm: none;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  background: var(--void);
  /* clip, not hidden: hidden makes this element a scroll container, which
     breaks position:sticky for any descendant (the authority envelope) —
     clip guards against horizontal overflow without that side effect. */
  overflow-x: clip;
}

body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--signal);
  text-decoration: none;
}
a:hover {
  color: #fff;
}

::selection {
  background: var(--amber);
  color: var(--ink);
}

input {
  font: inherit;
  color: inherit;
}
button {
  font: inherit;
}

:focus-visible {
  outline: 1px solid rgba(244, 241, 234, 0.85);
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Every figure that carries a number uses lining, tabular digits — numbers on
   this page exist to be compared against each other. */
.num,
.check-val,
.ledger,
.rung-num,
.move-chip,
.gate-t,
.gate-value {
  font-variant-numeric: tabular-nums lining-nums;
}

/* Keyboard users land here first; invisible until focused. */
.skip-link {
  position: absolute;
  left: clamp(16px, 4vw, 52px);
  top: -100px;
  z-index: 80;
  padding: 12px 18px;
  background: var(--peak);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  border-radius: 1px;
  transition: top 0.18s ease;
}
.skip-link:focus {
  top: 14px;
  color: var(--ink);
}

/* --------------------------------------------------------------------------
   Motion — a handful of orchestrated moments (the gate feed, ledger flow,
   history draw); everything else stays at state-transition level.
   -------------------------------------------------------------------------- */

@keyframes riseIn {
  from {
    opacity: 0;
    transform: translateY(18px);
    filter: blur(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes pulseDot {
  0%,
  100% {
    opacity: 0.22;
  }
  50% {
    opacity: 1;
  }
}
@keyframes flowPulse {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  22% {
    opacity: 1;
  }
  78% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0;
  }
}
@keyframes drawLine {
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes rowIn {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    /* Delay matters as much as duration — a 1.6s-delayed reveal is still
       motion the reader has to wait through. */
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */

.page {
  position: relative;
  background: var(--void);
  color: var(--signal);
  font-family: var(--sans);
  min-height: 100vh;
  overflow-x: clip;
}

.wrap {
  width: min(1280px, 100%);
  margin-inline: auto;
}

/* --------------------------------------------------------------------------
   Nav
   -------------------------------------------------------------------------- */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 clamp(16px, 4vw, 52px);
  border-bottom: 1px solid var(--line);
  background: rgba(10, 10, 10, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
}
.brand-mark {
  width: 18px;
  height: 18px;
  border: 1px solid var(--peak);
  display: grid;
  place-items: center;
  flex: none;
}
.brand-mark span {
  width: 6px;
  height: 6px;
  background: var(--peak);
  display: block;
}
.brand-name {
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.04em;
}

.nav-links {
  display: none;
  align-items: center;
  gap: clamp(18px, 2.2vw, 30px);
  margin-left: auto;
  margin-right: clamp(18px, 2.2vw, 30px);
  font-size: 13px;
  letter-spacing: -0.01em;
}
.nav-links a {
  color: var(--dimmer);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition:
    color 0.15s ease,
    border-color 0.15s ease;
}
.nav-links a:hover {
  color: var(--peak);
  border-bottom-color: var(--line-hard);
}
.nav-links a[aria-current="page"] {
  color: var(--peak);
  border-bottom-color: var(--line-hard);
}

.nav-progress {
  position: absolute;
  left: 0;
  bottom: -1px;
  height: 1px;
  width: 0;
  background: var(--amber);
  display: block;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--ink);
  background: var(--peak);
  border: 0;
  border-radius: 1px;
  padding: 0 16px;
  height: 36px;
  flex: none;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-ghost:hover {
  background: var(--amber);
}

/* Fixed cream-on-ink, not theme tokens: the button reads the same whether
   it sits on the dark hero or a cream section — same as the source files,
   where --peak/--ink would otherwise flip the button invisible on
   .section--light (dark text on dark background). */
.btn-solid {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 15px;
  letter-spacing: -0.015em;
  white-space: nowrap;
  background: #f4f1ea;
  color: #0a0a0a;
  border: 0;
  border-radius: 1px;
  height: 50px;
  padding: 0 28px;
  cursor: pointer;
  transition: background 0.15s ease;
}
.btn-solid:hover {
  background: var(--amber);
}

/* The closing pilot CTA inverts the button: black box, white text, standing
   out against that section's cream ground instead of blending into it. */
#pilot .btn-solid {
  background: #0a0a0a;
  color: #f4f1ea;
}
#pilot .btn-solid:hover {
  background: var(--amber);
  color: #0a0a0a;
}

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

/* The hero fills the viewport on first paint at every breakpoint: min-height
   (not height) so it still grows rather than clipping if content ever needs
   more room than the screen gives it. padding-top clears the fixed nav;
   hero-grid is centered in whatever space is left. */
.hero {
  position: relative;
  z-index: 2;
  overflow: hidden;
  min-height: 100svh;
  padding-top: 60px;
  display: flex;
  flex-direction: column;
}

/* Signal field — the hero background, drawn on canvas by field.js. Starts
   60px down so it clears the fixed nav rather than rendering under it. */
.field {
  position: absolute;
  inset: 60px 0 0 0;
  z-index: 0;
  overflow: hidden;
}
.field canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.field-veil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(
    115% 85% at 26% 54%,
    rgba(10, 10, 10, 0.94) 0%,
    rgba(10, 10, 10, 0.74) 30%,
    rgba(10, 10, 10, 0.18) 62%,
    rgba(10, 10, 10, 0) 80%
  );
}
.field-fade {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(10, 10, 10, 0.85) 0%,
    rgba(10, 10, 10, 0) 18%,
    rgba(10, 10, 10, 0) 74%,
    rgba(10, 10, 10, 0.92) 100%
  );
}

.hero-grid {
  position: relative;
  z-index: 3;
  flex: 1;
  display: grid;
  grid-template-columns: 1fr;
  align-content: center;
  gap: clamp(32px, 6vh, 80px);
  align-items: center;
  width: min(1280px, 100%);
  margin-inline: auto;
  padding: clamp(28px, 6vh, 64px) var(--gutter);
}

.eyebrow {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: clamp(18px, 3vh, 34px);
  animation: riseIn 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.05s both;
}
.eyebrow-rule {
  display: block;
  width: clamp(20px, 4vw, 44px);
  height: 1px;
  background: rgba(244, 241, 234, 0.35);
}
.eyebrow-text {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.24em;
  color: var(--dim);
  text-wrap: balance;
}

.hero-title {
  margin: 0;
  font-size: clamp(38px, 5.8vw, 88px);
  font-weight: 500;
  letter-spacing: -0.045em;
  line-height: 0.96;
  color: var(--peak);
  text-wrap: balance;
  animation: riseIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.14s both;
}

.hero-lede {
  margin: clamp(18px, 2.6vh, 30px) 0 0;
  max-width: 44ch;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 400;
  letter-spacing: -0.015em;
  line-height: 1.45;
  color: var(--dim);
  text-wrap: pretty;
  animation: riseIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.26s both;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
  margin-top: clamp(26px, 3.6vh, 44px);
  animation: riseIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.46s both;
}

/* Waitlist / pilot-request capture */
.waitlist {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: min(460px, 100%);
  border: 1px solid var(--line-hard);
  border-radius: 1px;
  background: rgba(244, 241, 234, 0.02);
  transition: border-color 0.2s ease;
}
.waitlist:focus-within {
  border-color: rgba(244, 241, 234, 0.5);
}
.waitlist-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line-hard);
}
.waitlist-field {
  background: var(--void);
}
.waitlist input {
  width: 100%;
  height: 44px;
  padding: 0 14px;
  background: transparent;
  border: 0;
  outline: none;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--signal);
}
.waitlist input::placeholder {
  color: var(--dimmer);
}
.waitlist-submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  background: transparent;
  color: var(--signal);
  border: 0;
  border-top: 1px solid var(--line-hard);
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: -0.01em;
  transition:
    background 0.2s ease,
    color 0.2s ease;
}
.waitlist-submit:hover {
  background: var(--peak);
  color: var(--void);
}

/* In flight: the field keeps its shape, the controls stop responding. */
.waitlist[data-pending] {
  opacity: 0.55;
  pointer-events: none;
}
.waitlist[data-pending] .waitlist-submit {
  animation: pulseDot 1.1s ease-in-out infinite;
}

@media (max-width: 460px) {
  .waitlist-grid {
    grid-template-columns: 1fr;
  }
}

/* Failure sits under the actions row, in the same telemetry register. */
.form-error {
  flex: 1 0 100%;
  margin: 4px 0 0;
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  color: var(--signal);
  animation: fadeIn 0.3s ease both;
}
.form-error::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border: 1px solid var(--red);
  display: block;
}

.joined {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 48px;
  padding: 0 20px;
  border: 1px solid var(--line-hard);
  border-radius: 1px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.17em;
  color: var(--signal);
  animation: fadeIn 0.4s ease both;
}
.joined-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--st-promote);
  display: block;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 48px;
  font-family: var(--sans);
  font-size: 14.5px;
  letter-spacing: -0.015em;
  color: var(--dim);
  border-bottom: 1px solid rgba(244, 241, 234, 0.2);
  transition:
    gap 0.22s ease,
    color 0.22s ease,
    border-color 0.22s ease;
}
.link-arrow:hover {
  gap: 15px;
  color: #fff;
  border-bottom-color: rgba(244, 241, 234, 0.6);
}

.status-pill {
  margin-top: clamp(22px, 3vh, 36px);
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--faint);
  animation: fadeIn 1.4s ease 0.9s both;
}
.status-pill-dot {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--dimmer);
  animation: pulseDot 2.8s ease-in-out infinite;
}

/* --------------------------------------------------------------------------
   The hero signature — self.gate, deciding in real time
   -------------------------------------------------------------------------- */

.hero-figure {
  margin: 0;
  animation: fadeIn 1.1s ease 0.5s both;
}

.gate {
  border: 1px solid var(--line);
  background: var(--void);
}
.gate-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 13px clamp(14px, 1.6vw, 20px);
  border-bottom: 1px solid var(--line);
}
.gate-name {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.01em;
  color: var(--dim);
}
.gate-dot {
  width: 6px;
  height: 6px;
  flex: none;
  display: block;
  background: var(--peak);
  animation: pulseDot 1.8s ease infinite;
}
.gate-count {
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: -0.01em;
  color: var(--dimmer);
}

.gate-cols,
.gate-row {
  display: grid;
  grid-template-columns: 50px minmax(0, 0.8fr) minmax(0, 1.7fr) 60px 74px;
  gap: 0 clamp(8px, 1.2vw, 16px);
  align-items: center;
}
.gate-cols {
  padding: 9px clamp(14px, 1.6vw, 20px);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--faint);
  border-bottom: 1px solid var(--line-soft);
}
.gate-rows {
  display: flex;
  flex-direction: column;
}
.gate-row {
  padding: 12px clamp(14px, 1.6vw, 20px);
  border-bottom: 1px solid var(--line-soft);
}
.gate-rows .gate-row:last-child {
  border-bottom: 0;
}
.gate-row.is-new {
  animation: rowIn 0.45s cubic-bezier(0.2, 0.7, 0.3, 1);
}
.gate-t {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--faint);
}
.gate-agent {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dim);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gate-action {
  font-size: 13.5px;
  letter-spacing: -0.012em;
  color: var(--peak);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gate-value {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--dimmer);
  text-align: right;
}
.gate-verdict {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 11px;
  justify-self: end;
}
.gate-verdict-dot {
  width: 6px;
  height: 6px;
  flex: none;
  display: block;
}
.gate-row[data-verdict="act"] .gate-verdict {
  color: var(--peak);
}
.gate-row[data-verdict="act"] .gate-verdict-dot {
  background: var(--peak);
}
.gate-row[data-verdict="ask"] .gate-verdict {
  color: var(--amber);
}
.gate-row[data-verdict="ask"] .gate-verdict-dot {
  background: var(--amber);
}
.gate-row[data-verdict="refuse"] .gate-verdict {
  color: var(--red);
}
.gate-row[data-verdict="refuse"] .gate-verdict-dot {
  background: var(--red);
}

@media (max-width: 560px) {
  .gate-cols {
    display: none;
  }
  .gate-row {
    grid-template-columns: 1fr auto;
    grid-template-areas: "action verdict" "meta meta";
    row-gap: 5px;
  }
  .gate-t {
    display: none;
  }
  .gate-agent {
    grid-area: meta;
  }
  .gate-action {
    grid-area: action;
    white-space: normal;
  }
  .gate-value {
    display: none;
  }
  .gate-verdict {
    grid-area: verdict;
  }
}

/* --------------------------------------------------------------------------
   The autonomy ladder — used in the tiers section
   -------------------------------------------------------------------------- */

.ladder {
  display: flex;
  gap: 14px;
  border: 1px solid var(--line);
  background: var(--void);
  padding: clamp(14px, 1.6vw, 22px);
}

.ladder-rail {
  position: relative;
  flex: none;
  width: 12px;
}
.ladder-rail::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 6px;
  bottom: 6px;
  width: 1px;
  background: var(--line);
}
.climber {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 9px;
  height: 9px;
  margin-left: -4.5px;
  margin-top: -4.5px;
  background: var(--peak);
  transition: top 0.75s cubic-bezier(0.65, 0.02, 0.28, 1);
}
.climber--static {
  transition: top 0.3s cubic-bezier(0.3, 0.7, 0.2, 1);
}

.ladder-body {
  flex: 1;
  min-width: 0;
}

.rungs {
  list-style: none;
  margin: 0;
  padding: 0;
  display: block;
}

.rung {
  display: grid;
  grid-template-columns: 4px 18px 1fr auto;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 46px;
  padding: 10px 10px;
  text-align: left;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line-soft);
  color: var(--signal);
  transition:
    background 0.22s ease,
    color 0.22s ease;
}
.rungs > .rung:first-child {
  border-top: 0;
}
button.rung {
  cursor: pointer;
  font-family: inherit;
}
button.rung:hover {
  background: rgba(244, 241, 234, 0.035);
}
button.rung[aria-selected="true"] {
  background: rgba(244, 241, 234, 0.07);
}
button.rung[aria-selected="true"] .rung-name {
  color: var(--peak);
}

.rung-chip {
  display: block;
  width: 4px;
  height: 22px;
  background: var(--faint);
}
[data-tier-chip="0"] {
  background: var(--t0);
}
[data-tier-chip="1"] {
  background: var(--t1);
}
[data-tier-chip="2"] {
  background: var(--t2);
}
[data-tier-chip="3"] {
  background: var(--t3);
}
[data-tier-chip="4"] {
  background: var(--t4);
}

.rung-num {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dimmer);
}
.rung-name {
  font-size: 14px;
  letter-spacing: -0.01em;
  color: var(--dim);
}
.rung-note {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--faint);
  text-align: right;
}

/* --------------------------------------------------------------------------
   Section scaffolding
   -------------------------------------------------------------------------- */

.section {
  position: relative;
  z-index: 2;
  padding: clamp(72px, 9vw, 140px) var(--gutter);
  border-top: 1px solid var(--line-soft);
}

/* A section that opens the page in place of a hero: clears the fixed nav
   with a tighter top offset than the full section padding (scaled by
   viewport height, not width, so short/wide windows don't push the content
   below the fold), and drops the separator line since there's nothing
   above it. */
.page-first {
  padding-top: calc(60px + clamp(20px, 4vh, 56px));
  border-top: 0;
}

/* Sections alternate ground — every token below drives backgrounds, text
   and hairlines throughout a section's content, so flipping them here
   flips the whole section without touching individual components. sev-*
   and st-* stay untouched here on purpose: they're also chip backgrounds
   (state-badge, move-chip) paired with fixed --ink text, so darkening them
   globally would kill that pairing's contrast instead of fixing it — see
   the targeted text-only overrides below. The autonomy-tier colors
   (t0–t4) are solid, not tinted, and left alone entirely — the ladder
   motif reads as one fixed identity everywhere it appears. */
.section--light {
  background: #f4f1ea;
  --void: #f4f1ea;
  --raise: #efece3;
  --raise-2: #e6e2d5;

  --peak: #0a0a0a;
  --signal: rgba(10, 10, 10, 0.9);
  --dim: rgba(10, 10, 10, 0.72);
  --dimmer: rgba(10, 10, 10, 0.58);
  --faint: rgba(10, 10, 10, 0.5);

  --line: rgba(10, 10, 10, 0.14);
  --line-soft: rgba(10, 10, 10, 0.09);
  --line-hard: rgba(10, 10, 10, 0.28);
}
.section--light :focus-visible {
  outline-color: rgba(10, 10, 10, 0.8);
}

/* sev-*, st-* and fig-t--* need their own darker-on-cream values to hold a
   contrast floor when they're set directly as text/stroke color rather than
   as a chip background — the ledger severity column, the annotated-figure
   labels, and the "act" indicators (ring, joined dot, decision dot, state
   border, badge) are the only places that happens. */
.section--light .sev--info {
  color: rgba(10, 10, 10, 0.55);
}
.section--light .sev--minor {
  color: #8a5f12;
}
.section--light .sev--material {
  color: #a34e12;
}
.section--light .sev--critical {
  color: #b8362c;
}
.section--light .fig-t--change {
  fill: #a34e12;
}
.section--light .fig-t--probation {
  fill: #8a5f12;
}
.section--light .fig-t--danger {
  fill: #b8362c;
}
.section--light .state--maintain {
  border-top-color: rgba(10, 10, 10, 0.35);
}
.section--light .state--promote {
  border-top-color: #0a0a0a;
}
.section--light .state-badge--promote {
  background: #0a0a0a;
  color: #f4f1ea;
}
.section--light .ring-value {
  stroke: #0a0a0a;
}
.section--light .decision-record::before {
  background: #0a0a0a;
}
.section--light .joined-dot {
  background: #0a0a0a;
}
.section--light .check--ok .check-icon {
  color: #0a0a0a;
  background: rgba(10, 10, 10, 0.07);
  border-color: rgba(10, 10, 10, 0.32);
}
.section--light .check--warn .check-icon {
  color: #8a5f12;
  background: rgba(245, 184, 61, 0.16);
  border-color: rgba(245, 184, 61, 0.5);
}

/* Decorative fills that were hand-tuned as translucent cream against the
   dark ground and need an ink equivalent on the light ground. */
.section--light .ledger-head {
  background: rgba(10, 10, 10, 0.03);
}
.section--light .ledger-row:hover {
  background: rgba(10, 10, 10, 0.035);
}
.section--light .ledger-row--pending {
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(10, 10, 10, 0.045) 0 1px,
    transparent 1px 6px
  );
}
.section--light .waitlist {
  background: rgba(10, 10, 10, 0.03);
}
.section--light .waitlist:focus-within {
  border-color: rgba(10, 10, 10, 0.4);
}
.section--light .fig-bar-bg {
  fill: rgba(10, 10, 10, 0.06);
}
.section--light .fig-bar {
  fill: rgba(10, 10, 10, 0.32);
}

.sec-head {
  max-width: 78ch;
  margin-bottom: clamp(40px, 6vh, 68px);
}
.sec-head--sub {
  margin-top: clamp(64px, 8vw, 110px);
  padding-top: clamp(40px, 5vw, 68px);
  border-top: 1px solid var(--line);
}
.sec-eyebrow {
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: var(--dimmer);
}
.sec-title {
  margin: 0;
  max-width: 22ch;
  font-size: clamp(30px, 4vw, 60px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.03;
  color: var(--peak);
  text-wrap: balance;
}
.sec-lede {
  margin: clamp(18px, 2.4vh, 26px) 0 0;
  max-width: 62ch;
  font-size: 15.5px;
  line-height: 1.72;
  color: var(--dim);
  text-wrap: pretty;
}

/* Shared SVG figure primitives */
.fig-t {
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.18em;
  fill: var(--faint);
}
.fig-t--peak {
  fill: var(--peak);
}
.fig-t--change {
  fill: var(--sev-material);
}
.fig-t--probation {
  fill: var(--st-probation);
}
.fig-t--danger {
  fill: var(--sev-critical);
}
.fig-t--rot {
  fill: var(--faint);
}

/* --------------------------------------------------------------------------
   1b — Why now
   -------------------------------------------------------------------------- */

.stat-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.stat-col {
  display: flex;
  flex-direction: column;
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--void);
  transition: background 0.25s ease;
}
.stat-col:hover {
  background: var(--raise-2);
}
.stat-label {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  color: var(--dimmer);
}
.stat-fig {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 24px;
}
.stat-baseline {
  stroke: var(--line-hard);
  stroke-width: 1;
}
.stat-bar--prior {
  fill: var(--dimmer);
}
.stat-bar--now {
  fill: var(--peak);
}
.stat-num {
  font-family: var(--sans);
  font-variant-numeric: tabular-nums lining-nums;
}
.stat-num--prior {
  font-size: 15px;
  font-weight: 500;
  fill: var(--dimmer);
}
.stat-num--now {
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  fill: var(--peak);
}
.stat-copy {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dim);
  text-wrap: pretty;
}
.stat-source {
  margin-top: auto;
  padding-top: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--faint);
}

.stat-col--quote {
  background: var(--raise);
}
.stat-fig--proportion .stat-num--now {
  font-size: 30px;
}
.stat-num-unit {
  font-size: 0.5em;
  fill: var(--dimmer);
}
.fig-bar--risk {
  fill: var(--sev-material);
}

/* --------------------------------------------------------------------------
   2 — Two failure modes
   -------------------------------------------------------------------------- */

.lanes {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.lane {
  padding: clamp(22px, 2.4vw, 32px);
  background: var(--void);
  transition: background 0.25s ease;
}
.lane:hover {
  background: var(--raise-2);
}
.lane--self {
  background: var(--raise);
  box-shadow: inset 0 2px 0 var(--amber);
}
.lane--self:hover {
  background: var(--raise-2);
}
.lane-title {
  margin: 0;
  font-size: 19px;
  font-weight: 500;
  letter-spacing: -0.02em;
  color: var(--peak);
}
.lane-verdict {
  margin: 10px 0 26px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.lane-verdict--bad {
  color: var(--sev-material);
}
.lane-verdict--good {
  color: var(--st-promote);
}
.lane-fig {
  display: block;
  width: 100%;
  height: auto;
  margin-bottom: 24px;
}
.lane-copy {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dim);
  text-wrap: pretty;
}

.fig-review rect {
  fill: var(--dimmer);
}
.fig-review--probation rect {
  fill: var(--st-probation);
}
.fig-drop line {
  stroke: var(--line-hard);
  stroke-width: 1;
  stroke-dasharray: 2 3;
}
.fig-tick rect {
  fill: rgba(244, 241, 234, 0.42);
}
.fig-tick--critical rect {
  fill: var(--sev-critical);
}
.fig-change line {
  stroke: var(--sev-material);
  stroke-width: 1;
  stroke-dasharray: 3 3;
}
.fig-change--probation line {
  stroke: var(--st-probation);
}
.fig-bar-bg {
  fill: rgba(244, 241, 234, 0.06);
}
.fig-bar {
  fill: rgba(244, 241, 234, 0.45);
}
.fig-bar--critical {
  fill: var(--sev-critical);
  opacity: 0.75;
}
.fig-bar--good {
  fill: var(--st-promote);
}

/* --------------------------------------------------------------------------
   3 — The loop
   -------------------------------------------------------------------------- */

/* minmax(0,…) and min-width:0 stop the ledger's 720px min-content from
   stretching the whole diagram past the viewport — the ledger scrolls, the
   stage does not. */
.loop {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}
.loop-stage {
  min-width: 0;
  border: 1px solid var(--line-soft);
  background: var(--raise);
  padding: clamp(20px, 2.2vw, 28px);
}
.stage-label {
  margin: 0 0 20px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--dimmer);
}

.inputs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.input-card {
  padding: 18px;
  background: var(--void);
  transition: background 0.25s ease;
}
.input-card:hover {
  background: var(--raise-2);
}
.input-card h3 {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--peak);
  letter-spacing: -0.01em;
}
.input-card p {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--dimmer);
}

/* The connector between stages, and the pulse that travels it. */
.loop-flow {
  position: relative;
  height: 46px;
  overflow: hidden;
}
.flow-line {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--line);
}
.flow-pulse {
  position: absolute;
  left: 50%;
  top: 0;
  width: 1px;
  height: 46px;
  margin-left: -0.5px;
  background: linear-gradient(
    to bottom,
    transparent,
    var(--peak) 45%,
    transparent
  );
  opacity: 0;
}
.loop.is-live .flow-pulse {
  animation: flowPulse 1.5s cubic-bezier(0.5, 0, 0.5, 1) infinite;
}
/* The three connectors are children 2, 4 and 6 of .loop — staggering them is
   what makes the diagram read as one stream rather than three animations. */
.loop.is-live > .loop-flow:nth-child(4) .flow-pulse {
  animation-delay: 0.35s;
}
.loop.is-live > .loop-flow:nth-child(6) .flow-pulse {
  animation-delay: 0.7s;
}

/* Ledger */
.ledger {
  border: 1px solid var(--line-soft);
  font-family: var(--mono);
  font-size: 11px;
  overflow-x: auto;
}
.ledger-head,
.ledger-row {
  display: grid;
  grid-template-columns: 1.4fr 1.4fr 0.9fr 1.1fr 1.1fr;
  gap: 14px;
  padding: 11px 16px;
  min-width: 720px;
  align-items: center;
}
.ledger-head {
  border-bottom: 1px solid var(--line);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--faint);
  background: rgba(244, 241, 234, 0.02);
}
.ledger-row {
  border-bottom: 1px solid var(--line-soft);
  color: var(--dimmer);
  transition: background 0.15s ease;
}
.ledger-row:hover {
  background: rgba(244, 241, 234, 0.025);
}
.ledger-row span:first-child {
  color: var(--dim);
}
.ledger-row--pending {
  opacity: 0.6;
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(244, 241, 234, 0.03) 0 1px,
    transparent 1px 6px
  );
}
.sev--info {
  color: var(--sev-info);
}
.sev--minor {
  color: var(--sev-minor);
}
.sev--material {
  color: var(--sev-material);
}
.sev--critical {
  color: var(--sev-critical);
}
.ledger-foot {
  margin: 0;
  padding: 12px 16px;
  min-width: 720px;
  font-size: 10px;
  line-height: 1.7;
  letter-spacing: 0.04em;
  color: var(--faint);
}

/* Engine */
.engine {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px 32px;
}
.engine li {
  position: relative;
  padding-left: 20px;
  font-size: 14px;
  line-height: 1.6;
  color: var(--dim);
}
.engine li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  width: 7px;
  height: 7px;
  border: 1px solid var(--line-hard);
}

/* States */
.states {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.state {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px;
  background: var(--void);
  border-top: 2px solid var(--faint);
  opacity: 0.55;
  transition: opacity 0.3s ease;
}
.state.is-active {
  opacity: 1;
  background: var(--raise-2);
}
.state--maintain {
  border-top-color: var(--st-maintain);
}
.state--promote {
  border-top-color: var(--st-promote);
}
.state--probation {
  border-top-color: var(--st-probation);
}
.state--demote {
  border-top-color: var(--st-demote);
}
.state-name {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--peak);
}
.state-copy {
  font-size: 13px;
  line-height: 1.6;
  color: var(--dimmer);
}

/* --------------------------------------------------------------------------
   4 — Tiers, expanded
   -------------------------------------------------------------------------- */

.tiers {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(28px, 3vw, 44px);
  align-items: start;
}
.ladder--select .rung-name {
  font-size: 14.5px;
}

.tier-panel {
  border: 1px solid var(--line-soft);
  background: var(--raise);
  padding: clamp(22px, 2.6vw, 34px);
  animation: fadeIn 0.3s ease both;
}
.panel-tier {
  margin: 0 0 12px;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.26em;
  color: var(--dimmer);
}
.panel-title {
  margin: 0 0 26px;
  font-size: clamp(21px, 2.2vw, 30px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--peak);
}
.panel-dl {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
.panel-dl dt {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
  padding-top: 16px;
  border-top: 1px solid var(--line-soft);
}
.panel-dl dd {
  margin: 8px 0 20px;
  font-size: 14.5px;
  line-height: 1.7;
  color: var(--dim);
  max-width: 58ch;
  text-wrap: pretty;
}

/* --------------------------------------------------------------------------
   5 — Anatomy of a recommendation
   -------------------------------------------------------------------------- */

.rec {
  border: 1px solid var(--line);
  background: var(--raise);
}

.rec-head {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  justify-content: space-between;
  align-items: flex-start;
  padding: clamp(20px, 2.4vw, 30px);
  border-bottom: 1px solid var(--line);
}
.state-badge {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  padding: 5px 10px;
  border-radius: 1px;
  color: var(--ink);
}
.state-badge--promote {
  background: var(--st-promote);
}
.rec-title {
  margin: 14px 0 6px;
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 500;
  letter-spacing: -0.028em;
  color: var(--peak);
}
.rec-sub {
  margin: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  color: var(--dimmer);
}
.rec-head-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
}
.rec-move {
  display: flex;
  align-items: center;
  gap: 12px;
}
.move-chip {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  padding: 6px 10px;
  border-radius: 1px;
  color: var(--ink);
  background: var(--t2);
}
.move-chip--to {
  background: var(--t4);
}
.move-arrow {
  color: var(--dimmer);
  font-size: 14px;
}

/* The card the auditor actually reads: three headline figures — one raw
   count, two gauges — then a signed checklist of everything that could have
   gone wrong and didn't (or did, and was caught). */
.rec-evidence {
  border-bottom: 1px solid var(--line);
}

.ev-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}
.ev-primary,
.ev-ring {
  padding: 22px clamp(16px, 1.8vw, 24px) 26px;
  background: var(--raise);
}
.ev-primary {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.ev-primary dt,
.ev-ring dt {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--faint);
}
.ev-primary dd {
  margin: 12px 0 8px;
}
.ev-ring {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.ev-ring dt {
  order: 2;
  margin-top: 16px;
}
.ev-ring p {
  order: 3;
  margin: 6px 0 0;
}

.num {
  font-size: clamp(26px, 2.8vw, 36px);
  font-weight: 500;
  letter-spacing: -0.03em;
  color: var(--peak);
  line-height: 1;
}
.num--sm {
  font-size: 17px;
  letter-spacing: -0.018em;
  line-height: 1.3;
}
.unit {
  font-size: 0.55em;
  color: var(--dimmer);
  margin-left: 2px;
}
.ev-primary p,
.ev-ring p {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--dimmer);
  max-width: 26ch;
}

/* Gauges — the same lower-confidence-bound figure a reviewer used to read
   as a bare percentage, now read as a dial closing toward its own claim. */
.ring-wrap {
  order: 1;
  position: relative;
  width: 108px;
  height: 108px;
}
.ring-fig {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
}
.ring-track {
  fill: none;
  stroke: var(--line-hard);
  stroke-width: 8;
}
.ring-value {
  fill: none;
  stroke: var(--st-promote);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-dasharray: 339.3;
  stroke-dashoffset: calc(339.3 * (1 - var(--val, 1)));
}
.js .ring-value {
  stroke-dashoffset: 339.3;
  transition: stroke-dashoffset 1.3s cubic-bezier(0.4, 0, 0.3, 1);
}
.js .ev-hero.is-live .ring-value {
  stroke-dashoffset: calc(339.3 * (1 - var(--val, 1)));
}
.ring-num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
}

/* Checklist — the "did anything happen" half of the evidence, read the way
   a reviewer scans CI checks: status first, detail second. */
.ev-checks {
  list-style: none;
  margin: 0;
  padding: 0;
  background: var(--raise);
}
.check {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px clamp(16px, 1.8vw, 24px);
  border-top: 1px solid var(--line-soft);
}
.check:first-child {
  border-top: none;
}
.check-icon {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}
.check--ok .check-icon {
  color: var(--st-promote);
  background: rgba(244, 241, 234, 0.12);
  border: 1px solid rgba(244, 241, 234, 0.35);
}
.check--warn .check-icon {
  color: var(--sev-minor);
  background: rgba(245, 184, 61, 0.14);
  border: 1px solid rgba(245, 184, 61, 0.4);
}
.check-body {
  flex: 1;
  min-width: 0;
}
.check-label {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  font-size: 13.5px;
  color: var(--signal);
}
.check-val {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.02em;
  color: var(--dim);
}
.check-note {
  margin: 4px 0 0;
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--dimmer);
}

.rec-bounds {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 1px;
  background: var(--line-soft);
  border-bottom: 1px solid var(--line);
}
.bound {
  padding: 20px clamp(16px, 1.8vw, 24px);
  background: var(--raise);
}
.bound-label {
  margin: 0 0 10px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  color: var(--faint);
}
.bound-copy {
  margin: 0;
  font-size: 14px;
  line-height: 1.65;
  color: var(--dim);
}
.bound-copy .num--sm {
  color: var(--peak);
}

.rec-decision {
  display: grid;
  grid-template-columns: 1fr;
  gap: 26px;
  padding: clamp(20px, 2.4vw, 30px);
}
.decision-title {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--peak);
}
.decision-note {
  margin: 0;
  max-width: 60ch;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--dimmer);
  text-wrap: pretty;
}
.decision-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.btn-decision {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: -0.01em;
  height: 40px;
  padding: 0 18px;
  color: var(--signal);
  background: transparent;
  border: 1px solid var(--line-hard);
  border-radius: 1px;
  cursor: pointer;
  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease;
}
.btn-decision:hover {
  background: var(--signal);
  color: var(--void);
  border-color: var(--signal);
}

.decision-record {
  flex: 1 0 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--peak);
  animation: fadeIn 0.3s ease both;
}
.decision-record::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--st-promote);
}

/* --------------------------------------------------------------------------
   7 — Authority envelope
   --------------------------------------------------------------------------
   A pinned, scroll-driven section: as the reader scrolls through its 360vh
   track, the "act" square grows against the "ask"/"refuse" bounds around it,
   the counters climb, and the stage note narrates what just moved — until an
   incident contracts the envelope back down, instantly, with no scroll left
   to undo it. Themed like the rest of the dark ground (--void/--peak), not
   the fixed cream of the source file, so it takes its place in the site's
   normal dark/light alternation instead of breaking it.
   -------------------------------------------------------------------------- */

.env {
  position: relative;
  height: 360vh;
  background: var(--void);
  color: var(--signal);
  border-top: 1px solid var(--line-soft);
}
.env-sticky {
  position: sticky;
  top: 60px;
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  padding: clamp(24px, 3vw, 44px) var(--gutter);
  overflow: hidden;
}
.env-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* Reuses the site's standard section header (same eyebrow/title/lede as
   every other section) — just compacted to fit the sticky viewport this
   section is pinned within, rather than the full-height spacing .sec-head
   gets when it can grow with the page. Lives inside .env-copy (not as a
   full-width block above the split) so the copy column and the field both
   sit in the same row and can be centered together across the section's
   full height — a full-width header above would eat the top of the sticky
   viewport and push the field down into just the leftover strip below it. */
.env-sec-head {
  margin-bottom: clamp(18px, 3vh, 34px);
}
.env-sec-head .sec-title {
  max-width: 20ch;
  font-size: clamp(26px, 3.2vw, 46px);
}
.env-sec-head .sec-lede {
  max-width: 56ch;
}

.env-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(26px, 4vw, 72px);
  /* Centered on both axes: the field box has a fixed, capped height (see
     .env-field), so centering it against the full row height is what keeps
     it in the middle of the section at any viewport rather than pinned to
     whichever edge the leftover space happens to fall on. */
  align-items: center;
  flex: 1;
  min-height: 0;
  padding: clamp(16px, 2.4vw, 34px) 0;
}
.env-stats {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(26px, 3.4vw, 54px);
}
.env-stat-label {
  display: block;
  font-family: var(--mono);
  font-size: 12px;
  color: var(--dimmer);
}
.env-stat-value {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: clamp(24px, 3vw, 44px);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--peak);
}
.env-note {
  margin: clamp(20px, 2.4vw, 34px) 0 0;
  max-width: 40ch;
  min-height: 4.4em;
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.45;
  color: var(--dim);
}

.env-field-wrap {
  display: grid;
  place-items: center;
  min-height: 0;
  align-self: center;
}
.env-field {
  position: relative;
  height: min(calc(100vh - 240px), 340px);
  aspect-ratio: 1;
  border: 1px solid rgba(226, 72, 60, 0.7);
  background-image:
    linear-gradient(var(--line-soft) 1px, transparent 1px),
    linear-gradient(90deg, var(--line-soft) 1px, transparent 1px);
  background-size: calc(100% / 12) calc(100% / 12);
}
.env-field-label {
  position: absolute;
  top: -8px;
  left: 12px;
  background: var(--void);
  padding: 0 7px;
  font-family: var(--mono);
  font-size: 11px;
}
.env-field-label--refuse {
  color: var(--red);
}
.env-review {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  height: 20%;
  display: block;
  border: 1px solid var(--amber);
}
.env-review-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 20%;
  height: 20%;
  display: block;
  pointer-events: none;
}
.env-review-label span {
  position: absolute;
  top: -8px;
  left: 8px;
  background: var(--void);
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--amber);
  white-space: nowrap;
}
.env-auto {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4%;
  height: 4%;
  display: block;
  background: var(--peak);
}
.env-auto-label {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 4%;
  height: 4%;
  display: block;
  pointer-events: none;
}
.env-auto-label span {
  position: absolute;
  top: -8px;
  left: 8px;
  background: var(--void);
  padding: 0 6px;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--peak);
  white-space: nowrap;
}
.env-flash {
  position: absolute;
  inset: 0;
  display: block;
  background: var(--red);
  opacity: 0;
  pointer-events: none;
}

.env-progress {
  flex: none;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.env-progress-track {
  display: block;
  height: 2px;
  position: relative;
  background: var(--line);
}
.env-progress-bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 2px;
  width: 0;
  display: block;
  background: var(--peak);
}

@media (min-width: 721px) {
  .env-split {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr);
  }
}
@media (max-width: 720px) {
  .env-field {
    height: min(calc(100vh - 430px), 220px);
  }
  .env-note {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   10 — Closing
   -------------------------------------------------------------------------- */

.section--cta {
  border-top: 1px solid var(--line);
}
.cta-title {
  margin: 0;
  max-width: 26ch;
  font-size: clamp(32px, 4.6vw, 68px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.04;
  color: var(--peak);
  text-wrap: balance;
}

/* --------------------------------------------------------------------------
   404
   -------------------------------------------------------------------------- */

/* The nav is fixed and takes no flow space, so let flex do the arithmetic
   rather than hard-coding chrome heights. */
.page--sparse {
  display: flex;
  flex-direction: column;
  min-height: 100svh;
}

.notfound {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(88px, 16vh, 190px) clamp(20px, 7vw, 110px);
}
.section-tag {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.24em;
  color: var(--dimmer);
  margin-bottom: clamp(30px, 5vh, 56px);
}
.notfound-title {
  margin: 0;
  max-width: 16ch;
  font-size: clamp(34px, 5.4vw, 74px);
  font-weight: 500;
  letter-spacing: -0.04em;
  line-height: 1.02;
  color: var(--peak);
  text-wrap: balance;
  animation: riseIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.08s both;
}
.notfound-copy {
  margin: clamp(20px, 2.8vh, 30px) 0 clamp(32px, 4.4vh, 48px);
  max-width: 46ch;
  font-family: var(--mono);
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--dim);
  text-wrap: pretty;
  animation: riseIn 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.2s both;
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */

.footer {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 28px;
  padding: 26px clamp(16px, 4vw, 52px);
  border-top: 1px solid var(--line);
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: 0.19em;
  color: var(--dimmer);
}
.dot-sep {
  opacity: 0.4;
}

.footer-group {
  display: flex;
  align-items: center;
  /* Floor of 20px keeps the two expanded link hit areas (9px each side) from
     overlapping on narrow screens. */
  gap: clamp(20px, 2vw, 26px);
  flex-wrap: wrap;
}

.footer-link {
  position: relative;
  color: var(--dim);
  border-bottom: 1px solid transparent;
  padding: 3px 0;
  transition:
    color 0.2s ease,
    border-color 0.2s ease;
}
/* "X" is barely 8px of glyph. Grow the hit area to a comfortable tap target
   without growing the mark itself — the inset stays inside the flex gap, so
   the two links never overlap. */
.footer-link::after {
  content: "";
  position: absolute;
  inset: -9px -9px;
}
.footer-link:hover {
  color: #fff;
  border-bottom-color: rgba(244, 241, 234, 0.55);
}

/* --------------------------------------------------------------------------
   Breakpoints
   -------------------------------------------------------------------------- */

@media (min-width: 720px) {
  .lanes,
  .stat-cols {
    grid-template-columns: repeat(3, 1fr);
  }
  .rec-decision {
    grid-template-columns: 1.3fr 1fr;
    align-items: start;
  }
  .ev-hero {
    grid-template-columns: 1.1fr 1fr 1fr;
  }
  .panel-dl {
    grid-template-columns: 170px 1fr;
    column-gap: 28px;
  }
  .panel-dl dt {
    padding-top: 18px;
  }
  .panel-dl dd {
    margin: 0 0 20px;
    padding-top: 16px;
    border-top: 1px solid var(--line-soft);
  }
}

@media (min-width: 900px) {
  .nav-links {
    display: flex;
  }
  .tiers {
    grid-template-columns: minmax(320px, 0.85fr) 1.15fr;
  }
  .hero-grid {
    grid-template-columns: 1fr 0.92fr;
  }
}

/* Phones: the hero has to fit one screen in a single stacked column, so the
   vertical rhythm tightens across the board rather than any one element
   giving up all the room. */
@media (max-width: 759px) {
  .hero-grid {
    gap: clamp(20px, 4vh, 40px);
    padding-block: clamp(16px, 3vh, 32px);
  }
  .eyebrow {
    margin-bottom: clamp(10px, 2vh, 20px);
  }
  .hero-lede {
    margin-top: clamp(12px, 2vh, 22px);
  }
  .hero-actions {
    margin-top: clamp(16px, 2.5vh, 28px);
  }
  .status-pill {
    margin-top: clamp(12px, 2vh, 20px);
  }
  .rung {
    min-height: 40px;
    padding: 8px 10px;
  }
}

/* Small phones: the ladder's right-hand note column costs more than it earns. */
@media (max-width: 460px) {
  .rung {
    grid-template-columns: 4px 16px 1fr;
    gap: 10px;
  }
  .rung-note {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Legal (privacy policy, etc.)
   -------------------------------------------------------------------------- */

.legal-main {
  position: relative;
  z-index: 2;
  padding: clamp(96px, 14vh, 150px) var(--gutter) clamp(60px, 8vh, 96px);
}
.legal-head {
  max-width: 68ch;
  margin-bottom: clamp(36px, 5.5vh, 60px);
}
.legal-title {
  margin: 0;
  max-width: 20ch;
  font-size: clamp(30px, 4vw, 52px);
  font-weight: 500;
  letter-spacing: -0.036em;
  line-height: 1.05;
  color: var(--peak);
  text-wrap: balance;
}
.legal-updated {
  margin: 14px 0 0;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: var(--dimmer);
}
.legal-body {
  max-width: 68ch;
}
.legal-body h2 {
  margin: clamp(40px, 5.5vh, 56px) 0 14px;
  font-size: clamp(18px, 1.8vw, 22px);
  font-weight: 500;
  letter-spacing: -0.015em;
  color: var(--peak);
}
.legal-body h2:first-child {
  margin-top: 0;
}
.legal-body p {
  margin: 0 0 16px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--dim);
  text-wrap: pretty;
}
.legal-body ul {
  margin: 0 0 16px;
  padding-left: 1.3em;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--dim);
}
.legal-body li {
  margin-bottom: 6px;
}
.legal-body li::marker {
  color: var(--dimmer);
}
.legal-body strong {
  color: var(--signal);
  font-weight: 600;
}
.legal-body a {
  text-decoration: underline;
  text-decoration-color: var(--line-hard);
  text-underline-offset: 3px;
}
.legal-back {
  margin-top: clamp(40px, 6vh, 64px);
}

/* --------------------------------------------------------------------------
   Secondary pages — Solutions
   -------------------------------------------------------------------------- */

/* Audience list (Solutions): who they are, what they're stuck with, what
   they get, repeated per audience. No heading sits above the list and it's
   the last section before the footer, so it only needs enough top/bottom
   padding to clear the surrounding borders, not the full section padding
   a heading or a following section would need. */
#audiences {
  padding-top: clamp(32px, 4vw, 56px);
  padding-bottom: clamp(32px, 4vw, 56px);
}
.audience-list {
  border-top: 1px solid var(--line);
}
.audience-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(20px, 3.4vw, 64px);
  align-items: start;
  padding: clamp(34px, 4.4vw, 68px) 0;
  border-bottom: 1px solid var(--line-soft);
}
.audience-who {
  display: block;
  font-family: var(--mono);
  font-size: 12.5px;
  letter-spacing: -0.005em;
  color: var(--amber);
}
.audience-head {
  font-size: clamp(23px, 2.9vw, 44px);
  line-height: 1;
  letter-spacing: -0.04em;
  font-weight: 500;
  margin: 16px 0 0;
  max-width: 15ch;
  color: var(--peak);
  text-wrap: balance;
}
.audience-pain {
  font-size: clamp(14px, 1.15vw, 17px);
  line-height: 1.45;
  color: var(--faint);
  margin: 20px 0 0;
  max-width: 38ch;
  text-wrap: pretty;
}
.audience-secondary {
  display: flex;
  flex-direction: column;
  padding-top: clamp(4px, 1vw, 28px);
}
.audience-gets {
  display: flex;
  flex-direction: column;
  gap: 0;
  list-style: none;
  margin: 0;
  padding-left: 0;
}
.audience-get {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: clamp(14px, 1.2vw, 18px);
  letter-spacing: -0.01em;
  color: var(--signal);
}
.audience-get::before {
  content: "";
  width: 6px;
  height: 6px;
  background: var(--dimmer);
  flex: none;
  display: block;
}
@media (min-width: 720px) {
  .audience-row {
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  }
}

/* Scroll reveal — a numbered row fades and rises into place the first time
   it crosses into view. Applied via IntersectionObserver in field.js. */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity 0.7s cubic-bezier(0.2, 0.7, 0.3, 1),
    transform 0.7s cubic-bezier(0.2, 0.7, 0.3, 1);
}
[data-reveal].on {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Solutions field — the one-hour, fifty-two-action grid. Fixed dark:
   act/ask/refuse are fixed cream/amber/red accents that need a dark ground
   to stay legible, so this section sits outside the light/dark alternation
   the rest of the page follows.
   -------------------------------------------------------------------------- */
.field-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
}
.field-head .sec-title {
  margin: 0;
  max-width: 24ch;
}
.field-head .sec-lede {
  max-width: 46ch;
  margin-top: clamp(10px, 1.4vh, 18px);
}
.field-chips {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: clamp(14px, 1.6vw, 22px);
}
.field-chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: -0.005em;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  border: 1px solid var(--line-hard);
  color: var(--dimmer);
  background: transparent;
  transition: 0.15s ease;
}
.field-chip:hover {
  border-color: var(--peak);
  color: var(--dim);
}
.field-chip.is-active {
  background: var(--peak);
  color: var(--void);
  border-color: var(--peak);
}

/* Flex, not a breakpointed grid: the grid and role panel sit side by side
   on any viewport wide enough, and only wrap to stacked where they
   genuinely can't fit. */
.field-body {
  display: flex;
  flex-wrap: wrap;
  gap: clamp(24px, 3vw, 60px);
  margin-top: clamp(16px, 2vw, 28px);
  align-items: flex-start;
}
.field-body > .field-figure {
  flex: 1.6 1 400px;
  min-width: 320px;
}
.field-grid {
  display: grid;
  grid-template-columns: repeat(13, minmax(0, 1fr));
  gap: clamp(4px, 0.6vw, 8px);
}
.field-cell {
  display: block;
  aspect-ratio: 1;
  transition: 0.3s cubic-bezier(0.2, 0.7, 0.3, 1);
  opacity: 0.5;
  border: 1px solid var(--line);
  background: transparent;
}
.field-cell--act.is-on {
  background: var(--peak);
  border-color: transparent;
  opacity: 1;
}
.field-cell--ask.is-on {
  background: var(--amber);
  border-color: transparent;
  opacity: 0.9;
}
.field-cell--no.is-on {
  background: var(--red);
  border-color: transparent;
  opacity: 0.9;
}
.field-panel {
  flex: 1 1 300px;
  min-width: 240px;
  max-width: 520px;
  border-left: 1px solid var(--line-hard);
  padding-left: clamp(20px, 2.4vw, 34px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 1vw, 14px);
}
.field-panel-who {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--amber);
}
.field-panel-head {
  font-size: clamp(20px, 2.4vw, 36px);
  line-height: 1.08;
  letter-spacing: -0.038em;
  font-weight: 500;
  margin: 0;
  max-width: 20ch;
  color: var(--peak);
  text-wrap: balance;
}
.field-panel-reading {
  font-size: clamp(15px, 1.25vw, 19px);
  line-height: 1.4;
  margin: 0;
  color: var(--dim);
  max-width: 46ch;
  text-wrap: pretty;
}
.field-panel-metric {
  margin-top: auto;
  padding-top: clamp(8px, 1vw, 14px);
  border-top: 1px solid var(--line);
}
.field-panel-metric-k {
  display: block;
  font-family: var(--mono);
  font-size: 11.5px;
  color: var(--dimmer);
}
.field-panel-metric-v {
  display: block;
  font-size: clamp(32px, 4vw, 60px);
  letter-spacing: -0.05em;
  font-weight: 500;
  line-height: 1;
  margin-top: 10px;
  color: var(--peak);
  font-variant-numeric: tabular-nums;
}