/* Mantler — The Self Governed Vault.
   One navy ground, light carried in translucent layers of the same hue.
   Calistoga for display, Inter for body, JetBrains Mono where the machine
   speaks. The sheet is layered: ground tokens first, then the dark remap,
   then the unified-navy theme that the whole page lives on. */

@font-face {
  font-family: 'Calistoga';
  src: url('../assets/fonts/calistoga-latin.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('../assets/fonts/inter-var-latin.woff2') format('woff2');
  font-weight: 100 900;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../assets/fonts/jetbrainsmono-var-latin.woff2') format('woff2');
  font-weight: 100 800;
  font-display: swap;
}

:root {
  --paper: #F2EFE6;
  --paper-2: #EAE6D9;
  --ink: #111722;
  --ink-soft: #3A4152;
  --ink-ter: #6E7686;
  --blue: #2E5CCC;
  --teal: #0E7C7B;
  --rust: #B4552D;
  --gridline: rgba(17, 23, 34, .09);
  --rule: rgba(17, 23, 34, .18);
  --font-d: 'Calistoga', Georgia, serif;
  --font: 'Inter', system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --ease: cubic-bezier(.16, 1, .3, 1);
  --pad: clamp(22px, 4.5vw, 64px);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
::selection { background: rgba(14, 124, 123, .22); }
button { font: inherit; cursor: pointer; }
img, svg { display: block; max-width: 100%; }
section { position: relative; }
.grid-band {
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 56px 56px;
}

/* ————— type ————— */
.wordmark {
  font-family: var(--font-d);
  font-size: clamp(120px, 26vw, 520px);
  line-height: .78;
  color: var(--blue);
  letter-spacing: -.015em;
  white-space: nowrap;
  margin: -0.09em 0 0 -0.02em;
  user-select: none;
}
.h1 {
  font-family: var(--font-d);
  font-size: clamp(40px, 4.6vw, 74px);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.005em;
}
.d2 {
  font-family: var(--font-d);
  font-size: clamp(44px, 6.4vw, 104px);
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -.008em;
}
.d3 {
  font-family: var(--font-d);
  font-size: clamp(34px, 3.6vw, 58px);
  font-weight: 400;
  line-height: 1.05;
}
.big {
  font-size: clamp(19px, 1.9vw, 25px);
  line-height: 1.45;
  font-weight: 480;
  letter-spacing: -.008em;
}
p { color: var(--ink-soft); max-width: 62ch; }
.lede { font-size: clamp(17px, 1.35vw, 20px); max-width: 52ch; }
strong { color: var(--rust); font-weight: 650; }
.mono-micro {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  line-height: 1.75;
  color: var(--ink-ter);
}

/* descender-safe line masks */
.js-lines .line {
  display: block;
  overflow: hidden;
  padding: .09em 0 .18em;
  margin: -.09em 0 -.18em;
}
.js-lines .line-inner { display: block; will-change: transform; }
.js-reveal { opacity: 0; transform: translateY(24px); }
.reduced .js-reveal { opacity: 1; transform: none; }

/* ————— nav ————— */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px var(--pad);
  transition: background .4s var(--ease), box-shadow .4s var(--ease);
}
.nav.is-scrolled {
  background: rgba(242, 239, 230, .92);
  box-shadow: 0 1px 0 var(--rule);
}
/* over dark zones (audit ledger band, investor panel) the bar flips */
.nav.is-dark { background: rgba(17, 23, 34, .88); box-shadow: 0 1px 0 rgba(242, 239, 230, .12); }
.nav.is-dark .mark { color: var(--paper); }
.nav.is-dark .btn { background: var(--paper); color: var(--ink); }
.nav.is-dark .btn:hover { background: var(--teal); color: var(--paper); }
.mark { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.mark-word { font-weight: 700; letter-spacing: -.015em; font-size: 19px; }

.btn {
  border: 0;
  border-radius: 10px;
  background: var(--ink);
  color: var(--paper);
  font-weight: 600;
  transition: background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
  will-change: transform;
}
.btn:hover { background: var(--teal); box-shadow: 0 10px 30px -12px rgba(14, 124, 123, .6); }
.btn:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.btn-nav { padding: 11px 18px; font-size: 15px; }
.btn-cta { padding: 17px 30px; font-size: 17px; }

/* ————— 01 hero ————— */
.hero { padding: 86px 0 40px; overflow: clip; border-bottom: 1px solid var(--rule); }
.hero-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, .6fr);
  gap: 40px;
  align-items: end;
  padding: clamp(36px, 6vh, 80px) var(--pad) clamp(40px, 7vh, 90px);
}
.hero-copy .lede { margin: 26px 0 36px; }
.hero-side { text-align: right; padding-bottom: 8px; }
/* nested particle sphere (js/hero-sphere.js): three context shells around the core */
.hero-sphere { position: relative; width: min(100%, 420px); aspect-ratio: 1; margin: 0 0 20px auto; }
.hero-sphere canvas { display: block; width: 100%; height: 100%; }
.sph-label {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .1em;
  color: rgba(163, 178, 206, .95);
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
}

/* ————— 02 statement: the full-screen claim ————— */
.statement {
  min-height: 92vh;
  display: grid;
  place-content: center;
  text-align: center;
  padding: clamp(90px, 12vh, 160px) var(--pad);
}

/* ————— 04 audit ledger ————— */
.audit-head { margin-bottom: clamp(40px, 7vh, 80px); }
.audit-head .lede { margin-top: 24px; max-width: 62ch; }
.audit { padding: clamp(70px, 10vh, 130px) var(--pad); background: var(--ink); }
.tilt-space { perspective: 1400px; max-width: 1380px; margin: 0 auto; }
.ledger {
  background: var(--paper);
  border-radius: 6px;
  box-shadow: 0 60px 140px -50px rgba(0, 0, 0, .85);
  transform-origin: 50% 20%;
  will-change: transform;
  overflow: hidden;
}
.led-top {
  display: flex;
  align-items: center;
  gap: 26px;
  padding: 18px 26px;
  border-bottom: 1px solid var(--rule);
}
.led-title { font-weight: 650; font-size: 15px; letter-spacing: -.01em; white-space: nowrap; }
.led-title em { font-style: normal; color: var(--ink-ter); font-weight: 500; }
.led-op { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; }
.led-op i { font-style: normal; color: var(--teal); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.led-opbar { flex: 1; max-width: 220px; height: 2px; background: rgba(17, 23, 34, .14); border-radius: 2px; overflow: hidden; display: block; }
.led-opbar u { display: block; height: 100%; width: 0%; background: var(--teal); }
.led-steps { display: flex; gap: 14px; }
.led-steps em { font-style: normal; opacity: .3; transition: opacity .3s; }
.led-steps em.is-on { opacity: 1; color: var(--teal); }
.led-grid { display: grid; grid-template-columns: minmax(0, 1fr) 250px; }
.led-table { width: 100%; border-collapse: collapse; }
.led-table th {
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-align: left;
  color: var(--ink-ter);
  padding: 14px 14px 12px 26px;
  border-bottom: 1px solid var(--rule);
}
.led-table td {
  padding: 15px 14px 15px 26px;
  border-bottom: 1px solid var(--gridline);
  font-size: 13.5px;
  vertical-align: middle;
}
.led-name { font-family: var(--mono); font-size: 13px; color: var(--ink); white-space: nowrap; }
.led-src, .led-ver { font-family: var(--mono); font-size: 11.5px; color: var(--ink-ter); white-space: nowrap; }
.led-st { width: 240px; }
.led-status { display: grid; gap: 5px; }
.led-status-label { font-family: var(--mono); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-ter); white-space: nowrap; }
.led-bar { width: 150px; height: 2px; background: rgba(17, 23, 34, .12); border-radius: 2px; overflow: hidden; opacity: 0; transition: opacity .3s; }
.led-bar.is-on { opacity: 1; }
.led-bar i { display: block; height: 100%; width: 0%; background: var(--teal); }
tr.is-busy { background: rgba(14, 124, 123, .06); }
tr.is-busy .led-status-label { color: var(--teal); }
tr.is-flag { background: rgba(180, 85, 45, .08); }
tr.is-flag .led-status-label { color: var(--rust); }
tr.is-flag .led-bar i { background: var(--rust); }
.led-log { border-left: 1px solid var(--rule); padding: 16px 20px; background: var(--paper-2); }
.led-log-h { display: block; margin-bottom: 10px; color: var(--ink-soft); }
.led-log ul { list-style: none; display: grid; gap: 8px; }
.led-log li { color: var(--ink-ter); line-height: 1.5; letter-spacing: .04em; font-size: 10.5px; }
.led-log li.is-new { color: var(--teal); }
.led-log li.is-alert { color: var(--rust); }

/* ————— 03 tension ————— */
.tension { padding: clamp(110px, 15vh, 190px) var(--pad); border-bottom: 1px solid var(--rule); }
.tension .d2 { color: var(--blue); max-width: 12ch; }
.tension-cols {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(30px, 5vw, 90px);
  margin-top: clamp(40px, 6vh, 70px);
  align-items: start;
  max-width: 1240px;
}
.tension-cols .big { max-width: 27ch; }
.memo {
  background: #FDFBF4;
  border: 1px solid var(--rule);
  padding: 22px 26px 18px;
  max-width: 430px;
  transform: rotate(1.1deg);
  box-shadow: 4px 6px 0 rgba(17, 23, 34, .08);
  justify-self: end;
}
.memo p { font-size: 18px; color: var(--ink); margin: 12px 0 16px; }
.redact {
  background: var(--ink);
  color: var(--ink);
  border-radius: 2px;
  padding: 0 4px;
  user-select: none;
}
.memo-stamp {
  display: inline-block;
  color: var(--rust);
  border: 1.5px solid var(--rust);
  border-radius: 3px;
  padding: 3px 8px;
  transform: rotate(-3deg);
  letter-spacing: .14em;
}

/* ————— card body: one question, three conflicting sources ————— */
.memo-q { font-family: var(--font-d); font-size: 21px; color: var(--ink); margin: 12px 0 14px; line-height: 1.2; }
.memo-rows { display: flex; flex-direction: column; gap: 8px; margin: 0 0 16px; }
.memo-row {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 11px; border-radius: 3px;
  background: rgba(17, 23, 34, .04);
  border: 1px solid rgba(17, 23, 34, .07);
}
.memo-row b { font-family: var(--font-d); font-weight: 400; font-size: 19px; color: var(--ink); min-width: 92px; flex: 0 0 auto; }
.memo-row span { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; color: var(--ink); opacity: .7; text-transform: uppercase; }
.memo-row .row-tag { margin-left: auto; font-size: 9px; letter-spacing: .12em; flex: 0 0 auto; font-style: normal; }
/* the answer the agent committed to: ringed and tagged */
.memo-row.is-picked { background: rgba(46, 92, 204, .1); border-color: rgba(46, 92, 204, .5); }
.memo-row.is-picked .row-tag { color: var(--blue); }
/* the real sources it silently ignored: dimmed, still legible */
.memo-row.is-dim { opacity: .42; }
.memo-row.is-dim .row-tag { opacity: .8; }

/* ————— the card stack (5 confidently-wrong examples, drag to dismiss) ————— */
.memo-stack {
  position: relative;
  justify-self: end;
  width: min(430px, 100%);
  /* absolute cards don't reserve height; the pile does + room for dots/hint */
  min-height: 380px;
  outline: none;
}
.memo-stack .memo {
  position: absolute;
  inset: 0 0 auto 0;
  max-width: none;
  margin: 0;
  transform-origin: 50% 50%;
  will-change: transform;
  cursor: grab;
  touch-action: none;      /* card owns the gesture; page still scrolls elsewhere */
  user-select: none;
}
/* resting pile: lower cards peek behind. GSAP overwrites this once loaded; this
   is the no-JS / pre-hydration state. */
.memo-stack .memo:nth-child(1) { transform: rotate(1.1deg);              z-index: 4; }
.memo-stack .memo:nth-child(2) { transform: translate(6px, 8px) rotate(-2deg);  z-index: 3; }
.memo-stack .memo:nth-child(3) { transform: translate(-5px, 15px) rotate(2.4deg); z-index: 2; }
.memo-stack .memo:nth-child(4) { transform: translate(3px, 22px) rotate(-1.2deg); z-index: 1; }
.memo-stack .memo.is-dragging { cursor: grabbing; }
.memo-stack .memo.is-gone { pointer-events: none; }
.memo-stack:focus-visible { outline: 2px solid var(--rust); outline-offset: 6px; border-radius: 4px; }

.stack-dots {
  position: absolute;
  left: 0; bottom: 22px;
  display: flex;
  gap: 7px;
  z-index: 6;
}
.stack-dots i {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: .28;
  transition: opacity .25s;
}
.stack-dots i.on { opacity: 1; }
.stack-hint {
  position: absolute;
  left: 0; bottom: 0;
  margin: 0;
  opacity: .55;
}

/* ————— 04 layers ————— */
.layers { padding: clamp(110px, 15vh, 190px) var(--pad); max-width: 1240px; }
.layers .lede { margin: 26px 0 clamp(50px, 7vh, 80px); }
.lrow {
  display: grid;
  grid-template-columns: minmax(90px, 150px) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 50px);
  padding: clamp(28px, 4vh, 44px) 0;
  border-top: 1px solid var(--rule);
  align-items: start;
}
.lnum {
  font-family: var(--font-d);
  font-size: clamp(64px, 8vw, 128px);
  line-height: .8;
  color: transparent;
  -webkit-text-stroke: 1.5px var(--blue);
}
.lrow:nth-of-type(odd) .lnum { color: var(--blue); -webkit-text-stroke: 0; }
.lbody h3 { font-family: var(--font-d); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 6px; }
.lbody > p { max-width: 50ch; }

/* ————— 05 belt ————— */
.belt { background: var(--blue); color: var(--paper); padding: 34px 0 30px; overflow: clip; }
.belt-track {
  display: flex;
  align-items: baseline;
  gap: 28px;
  white-space: nowrap;
  width: max-content;
  animation: belt 36s linear infinite;
  font-family: var(--font-d);
  font-size: clamp(34px, 4.4vw, 64px);
  line-height: 1;
}
.belt-track i { font-style: normal; opacity: .45; font-size: .6em; }
@keyframes belt { to { transform: translateX(-50%); } }
.reduced .belt-track { animation: none; }
.belt-note { color: rgba(242, 239, 230, .7); padding: 22px var(--pad) 0; }

/* ————— 06 how ————— */
.how { padding: clamp(110px, 15vh, 190px) var(--pad); border-bottom: 1px solid var(--rule); }
.how .d2 { margin-bottom: clamp(46px, 7vh, 80px); }

/* ————— 07 verdicts ————— */
.middle { padding: clamp(80px, 10vh, 130px) var(--pad) clamp(110px, 15vh, 190px); max-width: 1240px; }
.verdicts { display: grid; gap: 8px; margin-top: clamp(36px, 5vh, 60px); }
.verdict {
  font-family: var(--font-d);
  font-size: clamp(30px, 4.6vw, 72px);
  line-height: 1.08;
  color: var(--ink-ter);
  max-width: none;
}
.verdict s { text-decoration-color: var(--rust); text-decoration-thickness: clamp(2px, .06em, 5px); }
.v-new { color: var(--blue); margin-top: 18px; }
.verdict-note { margin: 2px 0 26px 4px; position: relative; display: inline-block; justify-self: start; }
.verdict-note-new { color: var(--teal); }
.sweep {
  position: absolute;
  left: 0; bottom: -7px;
  width: 100%; height: 2px;
  background: var(--teal);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.1s var(--ease) .2s;
}
.verdict-note-new.is-in .sweep { transform: scaleX(1); }
.reduced .sweep { transform: scaleX(1); }

/* ————— 08 dual ————— */
.dual { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); border-top: 1px solid var(--rule); }
.dual-buy { padding: clamp(70px, 10vh, 120px) var(--pad); }
.dual-buy .big { margin: 28px 0 34px; max-width: 30ch; }
.ticks { list-style: none; max-width: 460px; }
.ticks li {
  padding: 14px 0 14px 30px;
  border-top: 1px solid var(--rule);
  color: var(--ink-soft);
  position: relative;
  font-size: 15.5px;
}
.ticks li:first-child { border-top: 0; }
.ticks li::before {
  content: '';
  position: absolute;
  left: 2px; top: 21px;
  width: 12px; height: 7px;
  border-left: 2px solid var(--teal);
  border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg);
}
.dual-inv {
  background: var(--ink);
  color: var(--paper);
  padding: clamp(70px, 10vh, 120px) var(--pad);
  display: grid;
  align-content: center;
  gap: 18px;
}
.dual-inv .big { color: rgba(242, 239, 230, .88); max-width: 34ch; }
.dual-inv .mono-micro { color: rgba(242, 239, 230, .55); }

/* ————— 09 final ————— */
.final {
  padding: clamp(120px, 16vh, 200px) var(--pad) clamp(90px, 12vh, 140px);
  border-top: 1px solid var(--rule);
  overflow: clip;
  text-align: left;
}
.final .d2, .final .lede, .final p:last-of-type { position: relative; z-index: 1; }
.final .lede { margin: 26px 0 36px; }

/* ————— footer ————— */
.foot {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 20px;
  padding: 28px var(--pad) 32px;
  border-top: 1px solid var(--rule);
  background: var(--paper-2);
}
.foot > .mono-micro:last-child { text-align: right; }
/* full-bleed particle wordmark band (js/footer-particles.js); height set by JS */
.foot-word { grid-column: 1 / -1; justify-self: stretch; margin: 0 calc(-1 * var(--pad)) 10px; }
.foot-word canvas { display: block; width: 100%; }
.foot-mail { color: var(--teal); text-decoration: none; }
.foot-mail:hover { text-decoration: underline; }
/* footer link row: product first, then legal */
.foot-nav {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 26px;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}
.foot-nav a, .foot-nav button {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-ter);
  text-decoration: none;
  background: none;
  border: 0;
  padding: 0;
}
.foot-nav a:hover, .foot-nav button:hover { color: var(--teal); }
.foot-nav a:focus-visible, .foot-nav button:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
/* the two product links lead; give the following legal block a little distance */
.foot-nav a:nth-child(3) { margin-left: auto; }
@media (max-width: 640px) {
  .foot-nav a:nth-child(3) { margin-left: 0; }
}

/* ————— responsive ————— */
@media (max-width: 1120px) {
  .led-grid { grid-template-columns: 1fr; }
  .led-log { border-left: 0; border-top: 1px solid var(--rule); }
}
@media (max-width: 960px) {
  .hero-row, .tension-cols, .dual { grid-template-columns: 1fr; }
  .hero-side { text-align: left; }
  .hero-sphere { width: min(70vw, 320px); margin: 8px auto 20px 0; }
  .memo-stack { justify-self: start; }
  .led-steps { display: none; }
  .lrow { grid-template-columns: 64px minmax(0, 1fr); }
}
@media (max-width: 640px) {
  body { font-size: 16px; }
  .wordmark { font-size: 23vw; margin-left: -0.02em; } /* the full word fits; the bleed is the desktop move */
  .tension, .layers, .how, .middle { padding-top: 84px; padding-bottom: 84px; }
  .nav { background: rgba(242, 239, 230, .92); box-shadow: 0 1px 0 var(--rule); padding: 12px 16px; }
  .mark-word { font-size: 16px; }
  .btn-nav { padding: 9px 13px; font-size: 13px; }
  .led-table th:nth-child(2), .led-table td:nth-child(2) { display: none; }
  .led-table th:nth-child(3), .led-table td:nth-child(3) { display: none; }
  .led-table th, .led-table td { padding-left: 16px; }
  .led-st { width: auto; }
  .led-bar { width: 90px; }
  .led-top { flex-wrap: wrap; gap: 10px 26px; }
  .led-op { flex-basis: 100%; }
  .memo { transform: none; }
  .led-name { white-space: normal; }
}

/* ————— reduced motion ————— */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; }
  .js-tilt { transform: none !important; }
}

/* ═══════════ dark remap — the deep palette and its glass surfaces ═══════════
   Gradient budget: exactly three lit surfaces (audit bloom, belt, band core).
   Everything else is flat. */

:root {
  --navy: #0B1830;
  --navy-deep: #070E1D;
  --d-fg: #EAEEF5;
  --d-soft: #C7D2E8;
  --d-ter: #8FA0C0;
  --d-blue: #7FA0D8;
  --d-green: #3FA39F;
  --d-green-b: #4FC4BF;
  --d-rust: #C96A43;
  --d-line: rgba(199, 210, 232, .14);
  --d-line-soft: rgba(199, 210, 232, .07);
}

/* ————— 02 audit: navy field, glow bloom (gradient 1/3), glass ledger ————— */
.audit { background: var(--navy); position: relative; overflow: clip; }
.audit::before {
  content: '';
  position: absolute;
  left: 50%; top: 52%;
  width: min(1200px, 92vw); height: 72%;
  transform: translate(-50%, -50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(79, 196, 191, .16), rgba(127, 160, 216, .08) 55%, transparent 78%);
  pointer-events: none;
}
.tilt-space { position: relative; }
.audit .ledger {
  background: rgba(11, 24, 48, .62);
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border-radius: 14px;
  box-shadow: inset 0 1px 0 rgba(234, 238, 245, .09), inset 0 0 0 1px rgba(199, 210, 232, .06), 0 60px 140px -50px rgba(0, 0, 0, .9);
}
.audit .led-top { border-bottom-color: var(--d-line-soft); }
.audit .led-title { color: var(--d-fg); }
.audit .led-title em { color: var(--d-ter); }
.audit .led-op i { color: var(--d-green-b); }
.audit .led-opbar { background: rgba(199, 210, 232, .14); }
.audit .led-opbar u { background: var(--d-green-b); }
.audit .led-steps em { color: var(--d-ter); }
.audit .led-steps em.is-on { color: var(--d-green-b); }
.audit .led-table th { color: var(--d-ter); border-bottom-color: var(--d-line); }
.audit .led-table td { border-bottom-color: var(--d-line-soft); }
.audit .led-name { color: var(--d-fg); }
.audit .led-src, .audit .led-ver { color: var(--d-ter); }
.audit .led-status-label { color: var(--d-ter); }
.audit .led-bar { background: rgba(199, 210, 232, .14); }
.audit .led-bar i { background: var(--d-green-b); }
.audit tr.is-busy { background: rgba(63, 163, 159, .08); }
.audit tr.is-busy .led-status-label { color: var(--d-green-b); }
.audit tr.is-flag { background: rgba(201, 106, 67, .12); }
.audit tr.is-flag .led-status-label { color: var(--d-rust); }
.audit tr.is-flag .led-bar i { background: var(--d-rust); }
.audit .led-log { background: rgba(7, 14, 29, .5); border-left-color: var(--d-line-soft); }
.audit .led-log-h { color: var(--d-soft); }
.audit .led-log li { color: var(--d-ter); }
.audit .led-log li.is-new { color: var(--d-green-b); }
.audit .led-log li.is-alert { color: var(--d-rust); }

/* ————— 03 tension: dark band ————— */
.tension { background: var(--navy); border-bottom: 0; }
.tension .d2 { color: var(--d-fg); max-width: 14ch; }
.t-dim { color: var(--d-ter); }
.tension .big { color: var(--d-fg); }
.tension p { color: var(--d-soft); }
.tension-follow { max-width: 44ch; margin-top: 18px; }
.tension .memo {
  background: rgba(16, 35, 63, .72);
  border-color: rgba(199, 210, 232, .16);
  box-shadow: inset 0 1px 0 rgba(234, 238, 245, .07), 0 30px 70px -30px rgba(0, 0, 0, .9);
}
/* stacked cards overlap, so the face must be opaque or lower cards shine through */
.tension .memo-stack .memo { background: #12233F; }
.tension .memo p { color: var(--d-fg); }
.tension .redact { background: #050B16; color: #050B16; }
.tension .memo-stamp { color: var(--d-rust); border-color: var(--d-rust); }
.tension .stack-dots { color: var(--d-soft); }
.tension .stack-dots i.on { color: var(--d-rust); opacity: 1; }
.tension .stack-hint { color: var(--d-soft); }
/* card rows on the dark card face */
.tension .memo-q { color: var(--d-fg); }
.tension .memo-row { background: rgba(255, 255, 255, .03); border-color: rgba(255, 255, 255, .06); }
.tension .memo-row b { color: var(--d-fg); }
.tension .memo-row span { color: var(--d-soft); opacity: .85; }
.tension .memo-row.is-picked { background: rgba(74, 120, 232, .14); border-color: rgba(74, 120, 232, .55); }
.tension .memo-row.is-picked .row-tag { color: #7DA0F2; }
.tension .memo-row.is-dim .row-tag { color: var(--d-soft); }

/* ————— 04 layers: dark band, instrument, the record ————— */
.layers { background: var(--navy); max-width: none; padding: clamp(90px, 12vh, 150px) var(--pad) clamp(110px, 15vh, 180px); }
.layers-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 4vw, 70px);
  align-items: center;
  max-width: 1320px;
  margin: 0 auto;
}
.layers .d2 { color: var(--d-fg); }
.layers .lede { color: var(--d-soft); margin: 26px 0 clamp(28px, 4vh, 42px); }
.layers .lrow { border-top-color: var(--d-line-soft); grid-template-columns: minmax(64px, 100px) minmax(0, 1fr); padding: 20px 0; }
.layers .lnum { color: var(--d-blue); -webkit-text-stroke: 0; font-size: clamp(54px, 6vw, 96px); }
.layers .lbody h3 { color: var(--d-fg); }
.layers .lbody p { color: var(--d-ter); }

/* the record card and its three context plates */
.record-kind { color: var(--d-green-b); }
.record-quote { font-family: var(--font-d); font-size: clamp(20px, 2vw, 27px); color: var(--d-fg); margin-top: 10px; max-width: none; }
.stratum {
  padding: 15px 30px 13px;
  border-radius: 16px;
  /* near-opaque: a plate in flight must not let the card behind it read through */
  background: rgba(16, 35, 63, .96);
  box-shadow: inset 0 1px 0 rgba(234, 238, 245, .07), inset 0 0 0 1px rgba(199, 210, 232, .05);
}
.stratum p { font-family: var(--mono); font-size: 12.5px; letter-spacing: .01em; color: var(--d-soft); margin-top: 4px; max-width: none; }
.stratum-tag { color: var(--d-green-b); }

/* ————— 05 belt: brand gradient (2/3) ————— */
.belt {
  background-image:
    linear-gradient(rgba(242, 239, 230, .07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(242, 239, 230, .07) 1px, transparent 1px),
    linear-gradient(120deg, #2E5CCC, #0E7C7B);
  background-size: 56px 56px, 56px 56px, 100% 100%;
}

/* ————— 07 the scene ————— */
.scene { position: relative; max-width: 960px; margin: clamp(64px, 9vh, 110px) 0 0; }
.scene-agents { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 10px; }
.scene-links { width: 100%; height: 104px; display: block; overflow: visible; }
.scene-dn { height: 120px; }
.scene-links path { fill: none; stroke: rgba(17, 23, 34, .22); stroke-width: 1; stroke-dasharray: 3 6; }
.flow-dot { fill: var(--teal); opacity: 0; }
.band {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 3px;
  padding: 26px 20px 24px;
  border-radius: 16px;
  border: 1px solid var(--rule);
  background: #FDFBF4;
  box-shadow: 4px 6px 0 rgba(17, 23, 34, .06);
  overflow: hidden;
}
.band-core {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(55% 130% at 20% 50%, rgba(14, 124, 123, .10), transparent 60%),
    radial-gradient(50% 120% at 80% 50%, rgba(46, 92, 204, .09), transparent 60%);
}
.band-label { position: relative; font-family: var(--font-d); font-size: clamp(24px, 2.6vw, 34px); color: var(--ink); }
.band-sub { position: relative; color: var(--teal); }
.scene-systems { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; }
.sys {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  padding: 10px 14px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper-2);
  white-space: nowrap;
}

/* ————— dark-band responsive ————— */
@media (max-width: 960px) {
  .layers-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .scene-links { display: none; }
  .scene-systems { flex-wrap: wrap; justify-content: center; margin-top: 16px; }
  .scene-agents { margin-bottom: 16px; }
  .stratum p { font-size: 11.5px; }
}

/* ═══════════ the one-navy theme — a single ground, one UI ═══════════
   The entire page lives on a single navy. No paper, no second black.
   Elevation is translucent light on the same hue, never a different color.
   Interaction is the brand's bright teal; electric blue lifted one step
   so it carries on the dark ground. */

:root {
  --paper: #0B1830;                       /* the one ground */
  --paper-2: #10233F;                     /* raised surface, same hue */
  --ink: #EAEEF5;
  --ink-soft: #C7D2E8;
  --ink-ter: #8FA0C0;
  --blue: #4A78E8;                        /* electric blue, lifted for dark */
  --teal: #14B3B2;                        /* brand bright teal */
  --rust: #C96A43;                        /* one rust for flags on the dark ground */
  --gridline: rgba(199, 210, 232, .055);
  --rule: rgba(199, 210, 232, .16);
  --navy: #0B1830;
  --navy-deep: #0B1830;                   /* unified: there is no second dark */
}
::selection { background: rgba(20, 179, 178, .3); }

/* nav: navy glass in both states, no flip needed visually */
.nav.is-scrolled {
  background: rgba(11, 24, 48, .85);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 var(--rule);
}
.nav.is-dark { background: transparent; box-shadow: none; }
.nav.is-dark.is-scrolled {
  background: rgba(11, 24, 48, .85);
  -webkit-backdrop-filter: blur(16px) saturate(1.3);
  backdrop-filter: blur(16px) saturate(1.3);
  box-shadow: 0 1px 0 var(--rule);
}
.nav.is-dark .btn { background: var(--ink); color: var(--paper); }
.nav.is-dark .btn:hover { background: var(--teal); color: var(--paper); }
.btn:hover { background: var(--teal); color: var(--paper); box-shadow: 0 10px 30px -12px rgba(20, 179, 178, .55); }

/* memo: same-hue raised surface, soft depth (no offset print shadow) */
.memo {
  background: var(--paper-2);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(234, 238, 245, .07), 0 24px 60px -30px rgba(0, 0, 0, .8);
}

/* investor panel: raised light-on-navy, not a second dark */
.dual-inv { background: rgba(199, 210, 232, .05); border-left: 1px solid var(--rule); }

/* verdict strikes: drawn on scroll, not pre-printed */
.verdict s { text-decoration: none; position: relative; }

/* ————— the scene, final form: dark glass, alive ————— */
.scene-links path { stroke: rgba(199, 210, 232, .25); }
.flow-dot { fill: var(--teal); filter: drop-shadow(0 0 4px rgba(20, 179, 178, .8)); }
.band {
  background: rgba(16, 35, 63, .55);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 0;
  box-shadow:
    inset 0 1px 0 rgba(234, 238, 245, .09),
    inset 0 0 0 1px rgba(199, 210, 232, .07),
    0 30px 80px -30px rgba(0, 0, 0, .85);
  transition: box-shadow .45s var(--ease);
}
.band.is-pulse {
  box-shadow:
    inset 0 1px 0 rgba(234, 238, 245, .09),
    inset 0 0 0 1px rgba(20, 179, 178, .25),
    0 30px 80px -30px rgba(0, 0, 0, .85),
    0 0 54px -10px rgba(20, 179, 178, .4);
}
.band-core {
  background:
    radial-gradient(55% 130% at 20% 50%, rgba(20, 179, 178, .15), transparent 60%),
    radial-gradient(50% 120% at 80% 50%, rgba(74, 120, 232, .12), transparent 60%);
}
.sys { transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease); }
.sys-busy { background: rgba(20, 179, 178, .09); border-color: rgba(20, 179, 178, .45); }
.sys.is-lit { color: var(--teal); border-color: rgba(20, 179, 178, .55); background: rgba(20, 179, 178, .1); }

/* hero wordmark letters (split by JS for the entrance) */
.wordmark { overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.wordmark .wm-l { display: inline-block; will-change: transform; }

/* hero wordmark as a particle field (js/footer-particles.js → #heroParticles).
   Full-bleed to the hero edges like the old solid word; height set by JS. */
.wordmark-fx { width: 100%; margin: -0.04em 0 0; line-height: 0; }
.wordmark-fx canvas { display: block; width: 100%; }

/* mobile: the scene still breathes without connector geometry */
@media (max-width: 640px) {
  .scene-systems .sys { animation: sysglow 9.5s var(--ease) infinite; }
  .scene-systems .sys:nth-child(2) { animation-delay: 1.6s; }
  .scene-systems .sys:nth-child(3) { animation-delay: 3.2s; }
  .scene-systems .sys:nth-child(4) { animation-delay: 4.8s; }
  .scene-systems .sys:nth-child(5) { animation-delay: 6.4s; }
  .scene-systems .sys:nth-child(6) { animation-delay: 8.0s; }
  @keyframes sysglow {
    0%, 11%, 100% { color: var(--ink-soft); border-color: var(--rule); background: var(--paper-2); }
    5% { color: var(--teal); border-color: rgba(20, 179, 178, .5); background: rgba(20, 179, 178, .09); }
  }
  .band-core { animation: corebreathe 7s ease-in-out infinite; }
  @keyframes corebreathe { 0%, 100% { opacity: .75; } 50% { opacity: 1; } }
}
@media (prefers-reduced-motion: reduce) {
  .scene-systems .sys, .band-core { animation: none !important; }
}
/* belt text stays bone on the gradient (the token flip must not touch it) */
.belt { color: #F2EFE6; }

/* ═══ ground continuity — no seams, stronger scene ═══ */

/* the grid lives on the body: one uninterrupted surface, seams are impossible */
body {
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 56px 56px;
}
.grid-band { background-image: none; }
/* no hairlines between sections either; only the footer keeps its surface edge */
.hero, .how { border-bottom: 0; }
.final { border-top: 0; }
.hero, .tension, .layers, .audit, .how, .middle, .final, .dual-buy { background: transparent; }

/* nav: more opaque so headlines never smear through it; navy on mobile too */
.nav.is-scrolled,
.nav.is-dark.is-scrolled {
  background: rgba(10, 21, 40, .93);
}
@media (max-width: 640px) {
  .nav {
    background: rgba(10, 21, 40, .93);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 1px 0 var(--rule);
  }
}

/* tighter seam between hero and the vault panel */
.audit { padding-top: clamp(36px, 6vh, 80px); }
.audit .led-log { background: rgba(199, 210, 232, .045); }

/* hero wordmark fills every width */
.wordmark { font-size: clamp(120px, 26vw, 900px); }

/* strikes that survive line wraps (drawn per line) */
.verdict s {
  background-image: linear-gradient(var(--rust), var(--rust));
  background-repeat: no-repeat;
  background-size: 0% .055em;
  background-position: 0 57%;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-size 1.1s var(--ease);
}
.verdict.is-struck s { background-size: 100% .055em; }
.reduced .verdict s { background-size: 100% .055em; }

/* one blue for all three numerals; the tension headline breaks where it wants */
.layers .lrow .lnum { color: var(--d-blue); -webkit-text-stroke: 0; }
.tension .d2 { max-width: none; }

/* the belt joins the system: raised band, gradient lives in the type */
.belt {
  background: rgba(199, 210, 232, .045);
  box-shadow: 0 1px 0 var(--rule), 0 -1px 0 var(--rule);
  color: var(--ink);
}
.belt-track span {
  background: linear-gradient(110deg, #6E96EA, #2ED3C6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.belt-track i { color: var(--ink-ter); opacity: 1; }
.belt-note { color: var(--ink-ter); }

/* investor panel: a designed inset card, not a floating tone seam */
.dual { border-top: 0; }
.dual-inv {
  margin: clamp(50px, 8vh, 90px) var(--pad) clamp(50px, 8vh, 90px) 0;
  border: 1px solid var(--rule);
  border-radius: 16px;
  background: rgba(199, 210, 232, .05);
  padding: clamp(40px, 6vh, 70px) clamp(28px, 3vw, 54px);
}

/* the scene, composed: centered, visible connectors, brand agent glyphs */
.scene { margin-left: auto; margin-right: auto; }
.scene-links path { stroke: rgba(199, 210, 232, .38); stroke-width: 1.2; }
.agent { display: block; width: 26px; height: 17px; overflow: visible; }
.agent path {
  fill: none;
  stroke: var(--d-blue);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke .3s var(--ease), filter .3s var(--ease);
}
.agent.is-flash path { stroke: var(--teal); filter: drop-shadow(0 0 6px rgba(20, 179, 178, .8)); }
.scene-agents { gap: 20px; }

/* redaction bars tuned to the card ink */
.tension .redact { background: #0A1526; color: #0A1526; }

/* the closer centers itself */
.final { text-align: center; }
.final .lede { margin-left: auto; margin-right: auto; }

/* ═══ polish ═══ */

/* the mark is always light on the dark zones */
.nav.is-dark .mark { color: var(--ink); }

/* the CTA paragraph is capped at 62ch; center its box too */
.final p { margin-left: auto; margin-right: auto; }

/* the full word on phones: never crop the name */
@media (max-width: 640px) {
  .wordmark { font-size: 23vw; }
}

/* rhythm: trim the four biggest dead stretches */
.tension { padding-top: clamp(90px, 12vh, 150px); padding-bottom: clamp(90px, 12vh, 150px); }
.layers { padding-top: clamp(70px, 9vh, 120px); padding-bottom: clamp(80px, 11vh, 140px); }
.how { padding-top: clamp(90px, 12vh, 150px); padding-bottom: clamp(90px, 12vh, 150px); }
.middle { padding-bottom: clamp(90px, 12vh, 150px); }
.dual-inv { align-self: center; }

/* the marquee speaks in one muted voice; the separators carry the teal */
.belt-track span { background: none; -webkit-background-clip: initial; background-clip: initial; color: var(--ink-soft); }
.belt-track i { color: var(--teal); }

/* scene: connector ports, and lines that light when their chip hands off */
.scene-links .port { fill: rgba(199, 210, 232, .38); }
.scene-links path { transition: stroke .3s var(--ease); }
.scene-links path.is-hot { stroke: rgba(20, 179, 178, .75); }
.scene-agents { position: relative; }
.scene-agents .mono-micro { position: absolute; left: calc(50% + 78px); top: 50%; transform: translateY(-50%); }

/* step tracker: inactive states readable at rest */
.led-steps em { opacity: .45; }

/* ═══════════ the console, the flow rail, the pinned example ═══════════ */

/* ————— CTAs: the working product gets a quiet second door ————— */
.nav-cta { display: inline-flex; align-items: center; gap: 22px; }
.btn-ghost {
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
  border-bottom: 1.5px solid rgba(20, 179, 178, .45);
  padding-bottom: 2px;
  white-space: nowrap;
  transition: color .25s var(--ease), border-color .25s var(--ease);
}
.btn-ghost::after { content: ' →'; }
.btn-ghost:hover { color: var(--teal); border-color: var(--teal); }
.btn-ghost:focus-visible { outline: 2px solid var(--teal); outline-offset: 3px; }
.nav .btn-ghost { font-size: 14px; }
.cta-row { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; }
.cta-row-final { justify-content: center; }
@media (max-width: 700px) {
  .nav .btn-ghost { display: none; } /* the mobile pill has no room; hero and final carry it */
}

/* ————— 02 the console: sidebar + tabs around the audit view ————— */
.ledger { display: grid; grid-template-columns: 208px minmax(0, 1fr); }
.led-side {
  display: flex;
  flex-direction: column;
  gap: 26px;
  padding: 22px 18px;
  background: rgba(199, 210, 232, .035);
  border-right: 1px solid var(--d-line-soft);
}
.led-brand { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; color: var(--ink); }
.led-nav { display: grid; gap: 2px; }
.led-nav button {
  text-align: left;
  background: none;
  border: 0;
  border-radius: 8px;
  padding: 9px 11px;
  font-size: 13.5px;
  color: var(--ink-ter);
  transition: background .25s var(--ease), color .25s var(--ease);
}
.led-nav button:hover { color: var(--ink); background: rgba(199, 210, 232, .05); }
.led-nav button.is-here { color: var(--ink); background: rgba(199, 210, 232, .09); }
.led-nav button:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.led-env { margin-top: auto; color: var(--ink-ter); }
.led-main { min-width: 0; display: flex; flex-direction: column; }
.led-pane { flex: 1; }
.led-pane[hidden] { display: none; }
.led-pane.is-in { animation: paneIn .3s var(--ease); }
@keyframes paneIn { from { opacity: 0; transform: translateY(6px); } }
@media (min-width: 961px) { .led-main { min-height: 540px; } }

/* overview */
.ov-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 24px 26px 18px; }
.ov-card {
  display: grid;
  gap: 5px;
  padding: 18px;
  border: 1px solid var(--d-line-soft);
  border-radius: 12px;
  background: rgba(199, 210, 232, .03);
}
.ov-card b { font-size: 26px; font-weight: 650; letter-spacing: -.02em; color: var(--ink); }
.ov-card i { font-style: normal; font-size: 12.5px; color: var(--ink-ter); }
.ov-strip { display: grid; gap: 10px; padding: 8px 26px 26px; }
.ov-bars { display: flex; align-items: flex-end; gap: 5px; height: 86px; }
.ov-bars i { flex: 1; min-width: 4px; height: var(--h); background: rgba(20, 179, 178, .4); border-radius: 2px 2px 0 0; }
.ov-strip-note { color: var(--ink-ter); }

/* sources */
.src-grid {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 12px;
  padding: 24px 26px 26px;
}
.src-grid li { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--d-line-soft); border-radius: 10px; }
.src-grid b { font-size: 14px; font-weight: 600; color: var(--ink); }
.src-grid li.is-busy { border-color: rgba(20, 179, 178, .45); background: rgba(20, 179, 178, .06); }
.src-grid li.is-busy .mono-micro { color: var(--teal); }

/* records */
.rec-list { list-style: none; display: grid; gap: 14px; padding: 24px 26px 26px; max-width: 900px; }
.rec-list li { display: grid; gap: 6px; padding: 18px 22px; border: 1px solid var(--d-line-soft); border-radius: 12px; background: rgba(199, 210, 232, .03); }
.rec-kind { color: var(--d-green-b); }
.rec-list p { font-family: var(--font-d); font-size: 20px; color: var(--ink); max-width: none; }
.rec-meta { color: var(--ink-ter); }

.pane-foot { padding: 0 26px 22px; color: var(--ink-ter); }

/* rules */
.rule-list { list-style: none; padding: 12px 26px 12px; }
.rule-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 17px 4px;
  border-top: 1px solid var(--d-line-soft);
}
.rule-list li:first-child { border-top: 0; }
.rule-list b { font-size: 15px; font-weight: 600; color: var(--ink); }
.rule-list li.is-edited .mono-micro { color: var(--teal); }

/* ————— 04 layers: pinned record example ————— */
.layers { padding: 0 var(--pad); max-width: none; }
.pin-wrap { min-height: 100svh; display: flex; align-items: center; padding: clamp(60px, 8vh, 100px) 0; }
.layers-grid { width: 100%; }
.layers .lede { margin: 26px 0 clamp(22px, 3vh, 36px); }
.layers .lrow { opacity: .35; transition: opacity .5s var(--ease); }
.layers .lrow.is-active { opacity: 1; }
.reduced .layers .lrow { opacity: 1; }
.layers-close { display: block; margin-top: 26px; color: var(--d-ter); opacity: 0; transform: translateY(10px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.layers-close.is-in { opacity: 1; transform: none; }
.reduced .layers-close { opacity: 1; transform: none; }

.layers-stage {
  position: relative;
  border: 1px dashed rgba(199, 210, 232, .24);
  border-radius: 20px;
  padding: clamp(20px, 2.4vw, 34px);
  /* opaque light-raised fill (light over navy, not translucent): the page grid
     must not read through the stage while the plates fly in */
  background: linear-gradient(rgba(199, 210, 232, .045), rgba(199, 210, 232, .045)) var(--navy);
}
.stage-tag {
  position: absolute;
  top: -10px;
  right: 22px;
  padding: 2px 10px;
  background: var(--navy);
  color: var(--d-ter);
  letter-spacing: .1em;
}
/* flat stacking on purpose: the cards must paint by z-index (a flying plate above
   the landed ones), so no shared 3D context; perspective still shapes each tilt */
.stack { position: relative; height: var(--stack-h, 560px); perspective: 1300px; }
.stack .record {
  position: absolute;
  inset: auto 0 0;
  padding: 26px 30px;
  border-radius: 16px;
  background: linear-gradient(180deg, #10233F, #0B1830);
  box-shadow: inset 0 1px 0 rgba(234, 238, 245, .09), 0 30px 80px -30px rgba(0, 0, 0, .95);
  z-index: 4;
}
/* assembled is the CSS default: the layout survives without any script.
   JS measures real card heights and overwrites --rest-y before it animates. */
.stack .stratum {
  position: absolute;
  inset: auto 0 0;
  opacity: 1;
  transform: translateY(var(--rest-y, 0));
  transition: none;
  will-change: transform, opacity;
}
.stack .s-meta  { --rest-y: -140px; z-index: 3; }
.stack .s-valid { --rest-y: -240px; z-index: 2; }
.stack .s-usage { --rest-y: -340px; z-index: 1; }

/* ————— 06 how: the flow rail ————— */
.how .d2 { margin-bottom: clamp(40px, 6vh, 70px); }
.flow { position: relative; max-width: 1160px; }
.flow-svg { width: 100%; height: 190px; overflow: visible; }
#flowPath { stroke: rgba(199, 210, 232, .22); stroke-width: 1.2; }
#flowPathLit { stroke: var(--teal); stroke-width: 1.6; filter: drop-shadow(0 0 6px rgba(20, 179, 178, .55)); }
#flowDot { fill: var(--teal); filter: drop-shadow(0 0 8px rgba(20, 179, 178, .9)); opacity: 0; }
.stations { list-style: none; display: grid; grid-template-columns: repeat(6, 1fr); gap: 18px; margin-top: 12px; }
.stations li { display: grid; gap: 6px; align-content: start; opacity: .35; transition: opacity .5s var(--ease); }
.stations li.is-lit { opacity: 1; }
.stations i { font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--teal); letter-spacing: .1em; }
.stations b { font-family: var(--font-d); font-weight: 400; font-size: clamp(19px, 1.7vw, 25px); color: var(--ink); }
.stations span { color: var(--ink-ter); font-size: 13.5px; line-height: 1.5; }
.reduced .stations li { opacity: 1; }

/* ————— 09 final: the Instrument as the closing presence ————— */
/* right-weighted like the old ghost wordmark, so the core never sits behind the type */
.final-orbit {
  position: absolute;
  top: 50%;
  right: -10%;
  transform: translateY(-50%);
  width: min(58vw, 840px);
  aspect-ratio: 1;
  z-index: 0;
  opacity: .55;
  pointer-events: none;
}
.final-orbit .orbit-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

/* ————— v7 responsive ————— */
/* narrow desktops: the pinned block must fit under the fixed nav for the whole pin */
@media (min-width: 961px) and (max-width: 1180px) {
  .pin-wrap { padding-top: 110px; align-items: safe center; }
  .layers .d2 { font-size: clamp(36px, 4.4vw, 54px); }
  .layers .lede { margin: 16px 0 18px; }
  .layers .lrow { padding: 12px 0; }
  .layers .lnum { font-size: clamp(40px, 4.6vw, 64px); }
  .layers-close { margin-top: 18px; }
}
@media (max-width: 1120px) {
  .ledger { grid-template-columns: 1fr; }
  .led-side {
    flex-direction: row;
    align-items: center;
    gap: 14px;
    padding: 12px 16px;
    border-right: 0;
    border-bottom: 1px solid var(--d-line-soft);
    overflow-x: auto;
  }
  .led-nav { display: flex; gap: 2px; }
  .led-nav button { white-space: nowrap; }
  .led-env { margin-top: 0; margin-left: auto; white-space: nowrap; }
}
@media (max-width: 960px) {
  .pin-wrap { min-height: 0; padding: 0; }
  .layers { padding: 84px var(--pad); }
  .dual-inv { margin-left: var(--pad); }
  .layers-grid { grid-template-columns: 1fr; }
  .layers .lrow { opacity: 1; }
  .layers-close { opacity: 1; transform: none; }
  .layers-stage { margin-top: 6px; }
  .stack { height: auto; display: flex; flex-direction: column; gap: 10px; }
  .stack .record, .stack .stratum { position: static; inset: auto; transform: none !important; opacity: 1; }
  .ov-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .flow-svg { display: none; }
  .stations { grid-template-columns: 1fr; gap: 0; margin-top: 0; }
  .stations li {
    grid-template-columns: 50px minmax(0, 1fr);
    align-items: baseline;
    gap: 6px 18px;
    padding: 18px 0;
    border-top: 1px solid var(--rule);
  }
  .stations li span { grid-column: 2; }
}
@media (max-width: 640px) {
  .led-brand > span, .led-env { display: none; }
  .led-nav button { font-size: 12.5px; padding: 8px 9px; }
  .ov-cards { grid-template-columns: 1fr 1fr; padding: 16px; gap: 10px; }
  .ov-card b { font-size: 21px; }
  .ov-strip { padding: 4px 16px 18px; }
  .src-grid, .rec-list, .rule-list { padding: 16px; }
  .pane-foot { padding: 0 16px 16px; }
  .how { padding-bottom: 56px; }
  .middle { padding-top: 56px; }
  .layers { padding-bottom: 64px; }
  .final-orbit { display: none; }
  .foot { grid-template-columns: 1fr; justify-items: start; gap: 12px; }
  .foot > .mono-micro:last-child { text-align: left; }
}

/* ————— signup modal (js/signup-modal.js) ————— */
.sgm { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: var(--pad); }
.sgm[hidden] { display: none; }
body.sgm-lock { overflow: hidden; }
.sgm-backdrop {
  position: absolute; inset: 0;
  background: rgba(17, 23, 34, .55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.sgm-card {
  position: relative;
  width: min(640px, 100%);
  max-height: calc(100dvh - 2 * var(--pad));
  overflow-y: auto;
  background: var(--paper);
  background-image:
    linear-gradient(var(--gridline) 1px, transparent 1px),
    linear-gradient(90deg, var(--gridline) 1px, transparent 1px);
  background-size: 56px 56px;
  border-radius: 14px;
  box-shadow: 0 40px 90px -30px rgba(17, 23, 34, .55);
  padding: clamp(26px, 4vw, 44px);
}
.sgm-x {
  position: absolute; top: 12px; right: 14px;
  border: 0; background: none;
  font-size: 26px; line-height: 1;
  color: var(--ink-ter);
  padding: 6px 8px;
}
.sgm-x:hover { color: var(--ink); }
.sgm-x:focus-visible { outline: 2px solid var(--teal); outline-offset: 2px; }
.sgm-tag { display: block; margin-bottom: 14px; }
.sgm-title {
  font-family: var(--font-d);
  font-size: clamp(28px, 3.4vw, 40px);
  font-weight: 400;
  line-height: 1.05;
  margin-bottom: 12px;
}
.sgm-lede { font-size: 16px; max-width: 46ch; margin-bottom: 24px; }
.sgm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 18px; }
.sgm-field { display: grid; gap: 6px; }
.sgm-field > span {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ink-ter);
}
.sgm-field input, .sgm-field select {
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  background: rgba(255, 255, 255, .72);
  border: 1px solid var(--rule);
  border-radius: 8px;
  padding: 11px 12px;
  width: 100%;
}
.sgm-field select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' fill='none'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%236E7686' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 30px;
}
.sgm-field input::placeholder { color: var(--ink-ter); }
.sgm-field input:focus-visible, .sgm-field select:focus-visible,
.sgm-consent input:focus-visible { outline: 2px solid var(--teal); outline-offset: 1px; }
.sgm-hp { position: absolute; left: -9999px; top: -9999px; height: 1px; width: 1px; overflow: hidden; }
.sgm-consent {
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  gap: 10px;
  align-items: start;
  margin-top: 20px;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}
.sgm-consent input { margin-top: 3px; accent-color: var(--teal); }
.sgm-consent a { color: var(--ink); }
.sgm-error {
  margin-top: 14px;
  font-size: 14px;
  font-weight: 550;
  color: var(--rust);
}
.sgm-actions { display: flex; align-items: center; gap: 22px; margin-top: 22px; }
.sgm-done .sgm-lede { margin-bottom: 4px; }
.sgm-done .btn-ghost { background: none; border-top: 0; border-left: 0; border-right: 0; }
@media (max-width: 640px) {
  .sgm { padding: 14px; }
  .sgm-card { max-height: calc(100dvh - 28px); }
  .sgm-grid { grid-template-columns: 1fr; }
  .sgm-actions { flex-direction: column; align-items: stretch; text-align: center; }
}
html.sgm-lock, body.sgm-lock { overflow: hidden; }
.sgm-actions .btn { text-decoration: none; text-align: center; }