/**
 * LogNormal — Product Brief
 * Standalone cinematic conversion section. Dark, Swiss/Rams restraint,
 * mathematical seriousness. Vanilla CSS, self-contained (no styles.css needed).
 *
 * Accent grammar (used sparingly):
 *   cyan   — audit / verifiable / active
 *   mint   — valid / confirmed
 *   violet — Articulate mode only
 *   gold   — Apply mode only
 *   red    — break / invalid / "cannot" only
 */

/* Scoped to the .product-brief subtree so these tokens override the landing
   :root vars ONLY inside the brief — the cinematic hero/ravine keeps its own
   --frame, --void, type ramp, etc. (brief is folded into index.html). */
.product-brief {
  --void: #020304;
  --bg: #050607;
  --bg-2: #07090a;
  --panel: #0b0f10;
  --panel-2: #0e1214;
  --panel-3: #11171a;

  --ink: rgba(255, 250, 240, 0.94);
  --ink-2: rgba(232, 230, 223, 0.64);
  --ink-3: rgba(232, 230, 223, 0.4);
  --ink-4: rgba(232, 230, 223, 0.24);

  --line: rgba(232, 230, 223, 0.1);
  --line-soft: rgba(232, 230, 223, 0.06);
  --line-strong: rgba(232, 230, 223, 0.16);

  --cyan: #7df9ff;
  --cyan-dim: rgba(125, 249, 255, 0.6);
  --mint: #9fffd0;
  --violet: #b49cff;
  --gold: #efc879;
  --red: #ff5a5a;

  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --sans: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "JetBrains Mono", "SFMono-Regular", ui-monospace, Menlo, Consolas, monospace;

  --frame: clamp(18px, 3.4vw, 56px);
  --maxw: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

.product-brief *,
.product-brief *::before,
.product-brief *::after {
  box-sizing: border-box;
}

/* The brief is the post-ravine destination inside index.html: a normal-flow
   dark block that scrolls up over the (fading) 3D scene. Smooth-scroll is owned
   by Lenis on index.html, so we do NOT set scroll-behavior here. */
.product-brief {
  position: relative;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Standalone brief.html: the body itself is the .product-brief surface, so it
   needs the page resets the old global `body {}` rule used to provide. (Folded
   into index.html the brief is a <div>, and the landing body owns these.) */
body.brief {
  margin: 0;
  overflow-x: hidden;
}

.product-brief a {
  color: inherit;
  text-decoration: none;
}

.product-brief ::selection {
  background: rgba(125, 249, 255, 0.22);
  color: var(--ink);
}

/* ───────────────────────────── Ambient background ───────────────────────── */

.brief-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  /* Flat void floor — gradients + grain read as haze/banding on dark fills. */
  background: var(--void);
}

.brief-bg__smoke {
  position: absolute;
  inset: 0;
  /* Single restrained wash — no blur (blur was the main "hazy" culprit). */
  background: radial-gradient(130% 90% at 50% 18%, rgba(125, 249, 255, 0.028), transparent 58%);
  opacity: 0.85;
}

.brief-bg__grain {
  display: none;
}

/* Faint floating equations */
.brief-fx {
  position: absolute;
  inset: 0;
}

.brief-fx__eq {
  position: absolute;
  font-family: var(--serif);
  font-style: italic;
  color: var(--ink);
  opacity: 0;
  white-space: nowrap;
  letter-spacing: 0.01em;
  transform: translate3d(0, 0, 0);
  transition: opacity 1.4s var(--ease);
  text-rendering: geometricPrecision;
  -webkit-font-smoothing: antialiased;
}

.brief-fx.is-lit .brief-fx__eq {
  opacity: var(--eq-opacity, 0.042);
}

/* ───────────────────────────── Top chrome ──────────────────────────────── */

.brief-top {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 16px;
  padding: clamp(18px, 2.4vw, 30px) var(--frame);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(2, 3, 4, 0.96) 24%, rgba(2, 3, 4, 0));
}

.brief-top > * {
  pointer-events: auto;
}

.brief-brand__name {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.42em;
  color: var(--ink);
}

.brief-brand__sub {
  margin-top: 4px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.brief-nav {
  justify-self: center;
  display: flex;
  gap: clamp(14px, 1.8vw, 30px);
  align-items: center;
}

.brief-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.4s var(--ease);
}

.brief-nav__link:hover {
  color: var(--ink-2);
}

.brief-nav__dot {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--cyan);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.brief-nav__link.is-active {
  color: var(--ink);
}

.brief-nav__link.is-active .brief-nav__dot {
  opacity: 1;
  transform: scale(1);
  box-shadow: 0 0 8px rgba(125, 249, 255, 0.8);
}

.brief-top__right {
  justify-self: end;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
  transition: color 0.4s var(--ease);
}

.brief-top__right:hover {
  color: var(--ink);
}

/* Reading progress gauge */
.brief-progress {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 41;
  height: 2px;
  width: 100%;
  background: rgba(232, 230, 223, 0.06);
  pointer-events: none;
}

.brief-progress__fill {
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, rgba(125, 249, 255, 0.5), var(--cyan));
  box-shadow: 0 0 10px rgba(125, 249, 255, 0.4);
  transition: width 0.1s linear;
}

/* ───────────────────────────── Bottom chrome ───────────────────────────── */

.brief-bottom {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  padding: clamp(14px, 1.8vw, 22px) var(--frame);
  pointer-events: none;
  background: linear-gradient(to top, rgba(2, 3, 4, 0.92) 18%, rgba(2, 3, 4, 0));
}

.brief-bottom > * {
  pointer-events: auto;
}

.brief-chip {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.brief-bottom__center {
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-3);
}

.brief-bottom__chev {
  font-size: 0.8rem;
  line-height: 1;
  animation: brief-bob 2.4s ease-in-out infinite;
}

@keyframes brief-bob {
  0%, 100% { transform: translateY(0); opacity: 0.5; }
  50% { transform: translateY(3px); opacity: 0.9; }
}

.brief-bottom__right {
  justify-self: end;
  display: inline-flex;
  align-items: center;
  gap: 14px;
}

.brief-bottom__join {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-2);
  transition: color 0.4s var(--ease);
}

.brief-bottom__join:hover {
  color: var(--ink);
}

.brief-enter {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 9px 18px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: rgba(125, 249, 255, 0.015);
  transition: border-color 0.4s var(--ease), background 0.4s var(--ease), color 0.4s var(--ease);
}

.brief-enter:hover {
  border-color: var(--cyan-dim);
  background: rgba(125, 249, 255, 0.06);
  color: var(--cyan);
}

/* ───────────────────────────── Chapter shell ───────────────────────────── */

/* Standalone brief.html uses <main>; folded into index.html it is a
   <div class="brief-main"> (index already owns the page's single <main>). */
.product-brief main,
.product-brief .brief-main {
  position: relative;
  z-index: 1;
}

.chapter {
  position: relative;
  max-width: var(--maxw);
  margin-inline: auto;
  padding: clamp(96px, 14vh, 180px) var(--frame);
}

.chapter--hero {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  padding-top: clamp(170px, 19vh, 230px);
}

.chapter__index {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.chapter__index .num {
  color: var(--cyan);
}

.chapter__index .bar {
  width: 28px;
  height: 1px;
  background: var(--line-strong);
}

/* Typography */
.display {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin: 0;
}

.display--xl {
  font-size: clamp(2.8rem, 7vw, 5.4rem);
}

.display--lg {
  font-size: clamp(2.2rem, 5vw, 3.8rem);
}

.display--md {
  font-size: clamp(1.7rem, 3.4vw, 2.7rem);
}

.display em {
  font-style: italic;
  color: var(--cyan);
}

.display .accent-red {
  color: var(--red);
}

.display .accent-mint {
  color: var(--mint);
}

.subline {
  font-family: var(--serif);
  font-style: italic;
  font-size: clamp(1.05rem, 1.9vw, 1.5rem);
  color: var(--ink-2);
  margin: 22px 0 0;
}

.subline em {
  color: var(--cyan);
  font-style: italic;
}

.brief-mode-thesis {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 22px 0 0;
  font-family: var(--mono);
  font-size: 0.58rem;
  line-height: 1.55;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.brief-mode-thesis__lead { color: var(--ink-2); }
.brief-mode-thesis__audit { color: var(--cyan); }
.brief-mode-thesis__articulate { color: var(--violet); }
.brief-mode-thesis__apply { color: var(--gold); }

.lede {
  max-width: 60ch;
  font-size: clamp(1rem, 1.3vw, 1.12rem);
  color: var(--ink-2);
  margin: 28px 0 0;
}

.lede + .lede {
  margin-top: 16px;
}

.kicker {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.eyebrow {
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--cyan-dim);
  margin: 0 0 18px;
}

/* math glyph helper */
.math {
  font-family: var(--serif);
  font-style: italic;
  letter-spacing: 0.01em;
}

.mono {
  font-family: var(--mono);
}

/* layout helpers */
.split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}

.split--text-right {
  grid-template-columns: 0.95fr 1.05fr;
}

/* Let grid tracks shrink below intrinsic content width (prevents mobile overflow) */
.split__text,
.split__media {
  min-width: 0;
}

.stack-gap > * + * {
  margin-top: 18px;
}

/* ───────────────────────────── CTAs ────────────────────────────────────── */

.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 40px;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  padding: 14px 26px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  color: var(--ink);
  background: transparent;
  cursor: pointer;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease);
}

.btn:hover {
  border-color: var(--cyan-dim);
  color: var(--cyan);
}

.btn--primary {
  border-color: rgba(125, 249, 255, 0.4);
  background: rgba(125, 249, 255, 0.05);
  color: var(--ink);
}

.btn--primary:hover {
  background: rgba(125, 249, 255, 0.1);
  border-color: var(--cyan);
  color: var(--cyan);
}

.btn__arrow {
  font-family: var(--sans);
  opacity: 0.7;
}

/* ───────────────────────────── Device mockup ───────────────────────────── */

.device {
  position: relative;
  width: min(300px, 78vw);
  margin-inline: auto;
  border-radius: 38px;
  padding: 10px;
  background: linear-gradient(160deg, #1c2024, #050608 60%);
  border: 1px solid rgba(232, 230, 223, 0.12);
  box-shadow:
    0 40px 90px rgba(0, 0, 0, 0.6),
    0 0 0 1px rgba(0, 0, 0, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

.device--tilt {
  transform: perspective(1400px) rotateY(-13deg) rotateX(4deg) rotateZ(1deg);
}

.device--tilt-r {
  transform: perspective(1400px) rotateY(11deg) rotateX(3deg) rotateZ(-1deg);
}

.device__screen {
  position: relative;
  border-radius: 30px;
  background: radial-gradient(120% 80% at 50% 0%, #0b1013, #040506 70%);
  padding: 22px 18px 18px;
  overflow: hidden;
  min-height: 480px;
}

.device__notch {
  position: absolute;
  top: 9px;
  left: 50%;
  transform: translateX(-50%);
  width: 78px;
  height: 6px;
  border-radius: 4px;
  background: rgba(0, 0, 0, 0.7);
}

.device__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.device__bar-title {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.device__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 4px 9px;
  border: 1px solid rgba(125, 249, 255, 0.28);
  border-radius: 999px;
}

.device__badge::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

.device__glow {
  position: absolute;
  inset: -2px;
  border-radius: 40px;
  background: radial-gradient(60% 50% at 50% 60%, rgba(125, 249, 255, 0.1), transparent 70%);
  filter: blur(20px);
  z-index: -1;
}

/* exercise content inside device */
.ex__label {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 14px 0 5px;
}

.ex__prompt {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.28rem;
  color: var(--ink);
  margin: 0 0 4px;
}

.ex__step {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.98rem;
  color: var(--ink-2);
  margin: 2px 0;
}

.ex__divider {
  height: 1px;
  background: var(--line-soft);
  margin: 14px 0;
}

.ex__solution {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}

.ex__solution .math {
  font-size: 1.18rem;
  color: var(--mint);
}

.ex__check {
  color: var(--mint);
}

.ex__hints {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* readiness ring (parent phone) */
.ring {
  --pct: 72;
  position: relative;
  width: 116px;
  height: 116px;
  margin: 10px auto 6px;
  border-radius: 50%;
  background:
    radial-gradient(closest-side, var(--panel) 79%, transparent 80% 100%),
    conic-gradient(var(--mint) calc(var(--pct) * 1%), rgba(232, 230, 223, 0.1) 0);
  display: grid;
  place-items: center;
}

.ring__val {
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--ink);
  line-height: 1;
}

.ring__cap {
  position: absolute;
  bottom: 22px;
  font-family: var(--mono);
  font-size: 0.46rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.kv {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
  font-size: 0.78rem;
  color: var(--ink-2);
}

.kv__num {
  font-family: var(--mono);
  color: var(--ink);
}

/* ─────────────────── Real screenshots (literal iOS captures) ────────────── */

.shot {
  position: relative;
  width: min(296px, 78vw);
  margin-inline: auto;
  border-radius: 46px;
  padding: 6px;
  background: linear-gradient(155deg, #24282e 0%, #0b0d0f 52%, #050608 100%);
  border: 1px solid rgba(232, 230, 223, 0.14);
  box-shadow:
    0 44px 100px rgba(0, 0, 0, 0.62),
    0 0 0 1px rgba(0, 0, 0, 0.55),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.shot--tilt {
  transform: perspective(1500px) rotateY(-12deg) rotateX(4deg) rotateZ(1deg);
}

.shot--tilt-r {
  transform: perspective(1500px) rotateY(11deg) rotateX(3deg) rotateZ(-1deg);
}

.shot__media {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 40px;
  background: #050608;
}

.shot__glow {
  position: absolute;
  inset: -8px;
  border-radius: 54px;
  background: radial-gradient(56% 50% at 50% 58%, rgba(125, 249, 255, 0.12), transparent 70%);
  filter: blur(28px);
  z-index: -1;
}

.shot__tag {
  position: absolute;
  top: 18px;
  right: -12px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--cyan);
  padding: 6px 11px;
  border: 1px solid rgba(125, 249, 255, 0.3);
  border-radius: 999px;
  background: rgba(5, 7, 9, 0.82);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.shot__tag::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 6px var(--cyan);
}

/* Gallery of real captures (Student modes) */
.shot-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 3vw, 44px);
  margin-top: 48px;
  align-items: start;
}

.shot-card {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.shot-card .shot {
  width: min(240px, 100%);
  border-radius: 40px;
}

.shot-card .shot__media {
  border-radius: 34px;
}

.shot-card__cap {
  margin-top: 24px;
  text-align: center;
  max-width: 28ch;
}

.shot-card__mode {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--mode, var(--cyan));
  margin: 0 0 7px;
}

.shot-card__desc {
  font-size: 0.84rem;
  color: var(--ink-2);
  margin: 0;
}

.shot-card--audit { --mode: var(--cyan); }
.shot-card--articulate { --mode: var(--violet); }
.shot-card--apply { --mode: var(--gold); }

.shot-card--articulate .shot__glow { background: radial-gradient(56% 50% at 50% 58%, rgba(180, 156, 255, 0.12), transparent 70%); }
.shot-card--apply .shot__glow { background: radial-gradient(56% 50% at 50% 58%, rgba(239, 200, 121, 0.12), transparent 70%); }

/* ───────────────────────────── Cards / panels ──────────────────────────── */

.panel {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.008));
  border: 1px solid var(--line);
  border-radius: 6px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.card {
  padding: 22px 24px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008));
  border: 1px solid var(--line);
  border-radius: 4px;
}

.card__title {
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.96rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.card__body {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin: 0;
}

.grid {
  display: grid;
  gap: 16px;
}

.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }

/* ───────────────────────────── Mode cards ──────────────────────────────── */

.modes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 44px;
}

.mode {
  position: relative;
  padding: 26px 24px 28px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--mode, var(--cyan));
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
  overflow: hidden;
}

.mode::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  height: 80%;
  background: radial-gradient(circle, var(--mode-glow, rgba(125, 249, 255, 0.12)), transparent 70%);
  filter: blur(20px);
  pointer-events: none;
}

.mode--audit { --mode: var(--cyan); --mode-glow: rgba(125, 249, 255, 0.14); }
.mode--articulate { --mode: var(--violet); --mode-glow: rgba(180, 156, 255, 0.14); }
.mode--apply { --mode: var(--gold); --mode-glow: rgba(239, 200, 121, 0.14); }

.mode__icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 1px solid var(--mode);
  border-radius: 50%;
  color: var(--mode);
  margin-bottom: 18px;
}

.mode__name {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
  margin: 0 0 4px;
}

.mode__tag {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mode);
  margin: 0 0 14px;
}

.mode__body {
  font-size: 0.86rem;
  color: var(--ink-2);
  margin: 0;
}

.mode__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 16px;
  font-family: var(--mono);
  font-size: 0.55rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--mode);
  opacity: 0.85;
  transition: opacity 0.3s var(--ease);
}

.mode__link:hover {
  opacity: 1;
}

/* Engine doctrine — the declare → audit → compute boundary, numbered. */
.doctrine-flow {
  list-style: none;
  counter-reset: df;
  margin: 28px 0 0;
  padding: 0;
  max-width: 62ch;
}

.doctrine-flow li {
  counter-increment: df;
  position: relative;
  padding: 12px 0 12px 42px;
  font-size: 0.92rem;
  color: var(--ink-2);
  border-top: 1px solid var(--line-soft);
}

.doctrine-flow li:last-child {
  color: var(--ink);
}

.doctrine-flow li::before {
  content: counter(df, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 14px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--cyan);
}

/* ───────────────────────────── Interaction model ───────────────────────── */

.interaction {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
}

.interaction__step {
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.interaction__step:last-child { border-bottom: 0; }

.interaction__k {
  grid-column: 1;
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
  min-width: 96px;
}

.interaction__v {
  font-family: var(--serif);
  font-style: italic;
  font-size: 1.06rem;
  color: var(--ink);
}

.interaction__v.is-op {
  color: var(--cyan);
  letter-spacing: 0.3em;
}

/* ───────────────────────────── Status codes ────────────────────────────── */

.status-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.status {
  padding: 16px 18px;
  background: var(--panel);
}

.status__name {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 0.64rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--st, var(--ink));
}

.status__name::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--st, var(--ink));
}

.status__desc {
  margin: 7px 0 0;
  font-size: 0.78rem;
  color: var(--ink-2);
}

.st-valid { --st: var(--mint); }
.st-displaced { --st: var(--cyan); }
.st-inefficient { --st: var(--gold); }
.st-gaming { --st: #ff9a52; }
.st-incomplete { --st: var(--ink-3); }
.st-invalid { --st: var(--red); }

/* compact status chips (dashboard footer) */
.chips {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.chip-stat {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 3px;
  background: rgba(0, 0, 0, 0.2);
}

.chip-stat__l {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cs, var(--ink-2));
}

.chip-stat__n {
  font-family: var(--mono);
  font-size: 0.84rem;
  color: var(--ink);
}

/* ───────────────────────────── Parent dashboard ────────────────────────── */

.dash {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: linear-gradient(165deg, rgba(14, 18, 20, 0.95), rgba(5, 6, 8, 0.95));
  box-shadow: 0 50px 110px rgba(0, 0, 0, 0.6);
  overflow: hidden;
}

.dash__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 22px;
  border-bottom: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.25);
}

.dash__brand {
  font-family: var(--mono);
  font-size: 0.62rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ink-2);
}

.dash__meta {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
  display: flex;
  align-items: center;
  gap: 10px;
}

.dash__share {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  padding: 5px 11px;
  border: 1px solid var(--line-strong);
  border-radius: 3px;
}

.dash__cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.dash__col {
  padding: 20px 22px;
  border-right: 1px solid var(--line-soft);
}

.dash__col:last-child { border-right: 0; }

.dash__h {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 4px;
}

.dash__hsub {
  font-size: 0.7rem;
  color: var(--ink-3);
  margin: 0 0 16px;
}

.found {
  padding: 11px 0;
  border-top: 1px solid var(--line-soft);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
}

.found__name {
  font-size: 0.84rem;
  color: var(--ink);
}

.found__state {
  font-size: 0.7rem;
  color: var(--ink-3);
  margin-top: 2px;
}

.found__mark {
  flex: none;
  margin-top: 3px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid var(--red);
  color: var(--red);
  font-size: 0.6rem;
  display: grid;
  place-items: center;
}

.brk {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-top: 1px solid var(--line-soft);
}

.brk__n {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  white-space: nowrap;
}

.brk__expr {
  flex: 1;
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.92rem;
  color: var(--ink-2);
}

.brk__x {
  color: var(--red);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.brk__ok {
  color: var(--mint);
  font-family: var(--mono);
  font-size: 0.8rem;
}

.core-issue {
  margin-top: 16px;
  padding: 13px 15px;
  border: 1px solid rgba(255, 90, 90, 0.3);
  border-radius: 4px;
  background: rgba(255, 90, 90, 0.05);
}

.core-issue__h {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--red);
  margin: 0 0 6px;
}

.core-issue__b {
  font-size: 0.78rem;
  color: var(--ink-2);
  margin: 0;
}

.path {
  padding: 13px 0;
  border-top: 1px solid var(--line-soft);
}

.path__h {
  font-size: 0.8rem;
  color: var(--ink);
  margin: 0 0 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.path__h .dot { width: 6px; height: 6px; border-radius: 50%; }
.path--expert .dot { background: var(--mint); }
.path--student .dot { background: var(--cyan); }

.path__sub {
  font-size: 0.72rem;
  color: var(--ink-3);
  margin: 0 0 6px;
}

.path__expr {
  font-family: var(--serif);
  font-style: italic;
  font-size: 0.96rem;
  color: var(--ink-2);
}

.dash__bottom {
  padding: 16px 22px 18px;
  border-top: 1px solid var(--line);
  background: rgba(0, 0, 0, 0.22);
}

.dash__bottom-h {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 12px;
}

/* ───────────────────────────── Trace card ──────────────────────────────── */

.trace {
  padding: 20px 22px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(165deg, rgba(14, 18, 20, 0.92), rgba(5, 6, 8, 0.92));
}

.trace__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}

.trace__id-l {
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.trace__id {
  font-family: var(--mono);
  font-size: 0.9rem;
  color: var(--ink);
  margin-top: 3px;
}

.badge-verified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  padding: 5px 11px;
  border: 1px solid rgba(159, 255, 208, 0.32);
  border-radius: 999px;
}

.badge-verified::before {
  content: "✓";
  font-size: 0.7rem;
}

.trace__step {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line-soft);
}

.trace__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mint);
  box-shadow: 0 0 7px rgba(159, 255, 208, 0.6);
  flex: none;
}

.trace__label {
  font-size: 0.86rem;
  color: var(--ink-2);
}

.trace__time {
  margin-left: auto;
  font-family: var(--mono);
  font-size: 0.56rem;
  color: var(--ink-4);
}

/* ───────────────────────────── Atomic step / trinity ───────────────────── */

.atomic {
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
}

.atomic__row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px;
  padding: 14px 18px;
  border-top: 1px solid var(--line-soft);
}

.atomic__row:first-child { border-top: 0; }

.atomic__k {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.atomic__v {
  font-size: 0.9rem;
  color: var(--ink);
}

.atomic__v.is-status {
  font-family: var(--mono);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mint);
  font-size: 0.72rem;
}

.trinity {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.trinity__cell {
  padding: 22px 20px;
  background: var(--panel);
}

.trinity__name {
  font-family: var(--serif);
  font-size: 1.3rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.trinity__parts {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  color: var(--ink-3);
}

/* ───────────────────────────── Roadmap grid ────────────────────────────── */

.roadmap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 40px;
}

.course {
  padding: 22px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), transparent);
}

.course__tier {
  display: inline-block;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--cs, var(--ink-3));
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  margin-bottom: 14px;
}

.course--free .course__tier { color: var(--mint); border-color: rgba(159, 255, 208, 0.3); }
.course--paid .course__tier { color: var(--cyan); border-color: rgba(125, 249, 255, 0.3); }
.course--applied .course__tier { color: var(--gold); border-color: rgba(239, 200, 121, 0.3); }
.course--roadmap .course__tier { color: var(--ink-3); }

.course__name {
  font-family: var(--serif);
  font-size: 1.22rem;
  color: var(--ink);
  margin: 0 0 8px;
}

.course__body {
  font-size: 0.82rem;
  color: var(--ink-2);
  margin: 0;
}

/* ───────────────────────────── Founder tiers ───────────────────────────── */

.tiers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 40px;
}

.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 26px 22px 24px;
  border: 1px solid var(--line);
  border-radius: 5px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent);
}

.tier--feature {
  border-color: rgba(125, 249, 255, 0.32);
  background: linear-gradient(180deg, rgba(125, 249, 255, 0.05), transparent);
}

.tier__rank {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.tier__price {
  font-family: var(--serif);
  font-size: 2.1rem;
  color: var(--ink);
  margin: 10px 0 2px;
}

.tier__seats {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--cyan);
  margin-bottom: 14px;
}

.tier__list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
}

.tier__list li {
  position: relative;
  padding: 7px 0 7px 16px;
  font-size: 0.8rem;
  color: var(--ink-2);
  border-top: 1px solid var(--line-soft);
}

.tier__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan-dim);
}

.note {
  margin-top: 22px;
  padding: 16px 18px;
  border-left: 2px solid var(--cyan-dim);
  background: rgba(125, 249, 255, 0.03);
  font-size: 0.86rem;
  color: var(--ink-2);
}

.note strong { color: var(--ink); font-weight: 600; }

.econ {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 28px;
}

.econ__cell {
  padding: 18px 20px;
  background: var(--panel);
}

.econ__k {
  font-family: var(--mono);
  font-size: 0.54rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 8px;
}

.econ__v {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
}

.econ__v small {
  font-family: var(--mono);
  font-size: 0.7rem;
  color: var(--ink-3);
  letter-spacing: 0.08em;
}

/* Founder threshold rule + commitment status row */
.threshold {
  margin-top: 34px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  border-left: 2px solid var(--cyan-dim);
  border-radius: 6px;
  background: rgba(125, 249, 255, 0.03);
}

.threshold__rule {
  margin: 0;
  max-width: 80ch;
  font-size: 0.94rem;
  color: var(--ink-2);
}

.threshold__rule strong {
  color: var(--ink);
  font-weight: 600;
}

.status-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 16px;
}

.status-row__item {
  padding: 16px 18px;
  background: var(--panel);
}

.status-row__k {
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 7px;
}

.status-row__v {
  font-size: 0.9rem;
  color: var(--ink);
  margin: 0;
}

/* Founder card: best-for line, in-card reserve CTA, threshold microcopy.
   The list flexes so every card's CTA + microcopy align at the bottom. */
.tier__best {
  font-size: 0.8rem;
  color: var(--ink-2);
  margin: 2px 0 14px;
}

.tier__list {
  flex: 1 1 auto;
}

.tier__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  margin-top: 20px;
  padding: 12px 16px;
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  cursor: pointer;
  transition: border-color 0.4s var(--ease), color 0.4s var(--ease), background 0.4s var(--ease);
}

.tier__cta:hover {
  border-color: var(--cyan-dim);
  color: var(--cyan);
}

.tier--feature .tier__cta,
.tier--patron .tier__cta {
  border-color: rgba(125, 249, 255, 0.4);
  background: rgba(125, 249, 255, 0.05);
}

.tier--feature .tier__cta:hover,
.tier--patron .tier__cta:hover {
  border-color: var(--cyan);
  background: rgba(125, 249, 255, 0.1);
  color: var(--cyan);
}

.tier__micro {
  margin: 10px 0 0;
  font-family: var(--mono);
  font-size: 0.5rem;
  letter-spacing: 0.08em;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}

/* Patron tier stands out with restraint — a quiet cyan wash, not a loud badge. */
.tier--patron {
  border-color: rgba(125, 249, 255, 0.24);
  background: linear-gradient(180deg, rgba(125, 249, 255, 0.035), transparent);
}

/* ───────────────────────────── Founding Patrons ────────────────────────── */
.patron-points {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
}

.patron-points li {
  position: relative;
  padding: 16px 20px 16px 34px;
  background: var(--panel);
  font-size: 0.88rem;
  color: var(--ink-2);
}

.patron-points li::before {
  content: "";
  position: absolute;
  left: 18px;
  top: 22px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--cyan-dim);
}

/* ───────────────────────────── Final CTA ───────────────────────────────── */
.final-cta {
  text-align: center;
  border-top: 1px solid var(--line-soft);
}

.final-cta .lede {
  margin-inline: auto;
}

.final-cta .cta-row {
  justify-content: center;
}

/* founder bio */
.bio {
  display: grid;
  grid-template-columns: 188px 1fr;
  gap: 32px;
  align-items: start;
  margin-top: 36px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.025), transparent);
}

.bio__avatar {
  width: 120px;
  height: 120px;
  border-radius: 4px;
  border: 1px solid var(--line);
  background:
    radial-gradient(80% 80% at 30% 25%, rgba(125, 249, 255, 0.12), transparent 70%),
    linear-gradient(160deg, #14181b, #070809);
  display: grid;
  place-items: center;
  font-family: var(--serif);
  font-size: 2rem;
  color: var(--ink-2);
}

.bio__figure {
  margin: 0;
}

.bio__photo {
  display: block;
  width: 188px;
  height: 232px;
  object-fit: cover;
  object-position: center 28%;
  border-radius: 6px;
  border: 1px solid var(--line-strong);
  filter: saturate(0.9) contrast(1.02) brightness(0.98);
  box-shadow: 0 24px 56px rgba(0, 0, 0, 0.55);
}

.bio__cap {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 0.52rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-3);
  text-align: center;
}

.bio__name {
  font-family: var(--serif);
  font-size: 1.5rem;
  color: var(--ink);
  margin: 0 0 4px;
}

.bio__role {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--cyan-dim);
  margin: 0 0 16px;
}

.bio__body {
  font-size: 0.92rem;
  color: var(--ink-2);
  margin: 0 0 12px;
}

/* ───────────────────────────── Philosophy ──────────────────────────────── */

.philosophy {
  text-align: center;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line-soft);
}

.phil-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  margin-top: 44px;
  text-align: left;
}

.phil {
  padding: 30px 28px;
  background: var(--bg);
}

.phil__n {
  font-family: var(--mono);
  font-size: 0.56rem;
  letter-spacing: 0.2em;
  color: var(--cyan-dim);
  margin: 0 0 14px;
}

.phil__h {
  font-family: var(--serif);
  font-size: 1.45rem;
  color: var(--ink);
  margin: 0 0 10px;
}

.phil__b {
  font-size: 0.88rem;
  color: var(--ink-2);
  margin: 0;
}

/* ───────────────────────────── FAQ ─────────────────────────────────────── */

.faq {
  margin-top: 40px;
  border-top: 1px solid var(--line);
}

.faq__item {
  border-bottom: 1px solid var(--line);
}

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: 100%;
  padding: 22px 4px;
  cursor: pointer;
  list-style: none;
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
  color: var(--ink);
  transition: color 0.3s var(--ease);
}

.faq__q::-webkit-details-marker { display: none; }

.faq__item[open] .faq__q { color: var(--cyan); }

.faq__sign {
  flex: none;
  font-family: var(--mono);
  font-size: 1rem;
  color: var(--ink-3);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}

.faq__item[open] .faq__sign {
  transform: rotate(45deg);
  color: var(--cyan);
}

.faq__a {
  padding: 0 4px 24px;
  max-width: 72ch;
  font-size: 0.94rem;
  color: var(--ink-2);
}

/* ───────────────────────────── Reveal animation ────────────────────────── */

[data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
  transition-delay: var(--reveal-delay, 0s);
}

[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .brief-bottom__chev { animation: none; }
}

/* ───────────────────────────── Responsive ──────────────────────────────── */

@media (max-width: 980px) {
  .brief-nav { display: none; }
  .brief-top { grid-template-columns: 1fr auto; }
  .split,
  .split--text-right {
    grid-template-columns: 1fr;
    gap: 44px;
  }
  .split--text-right .split__media { order: -1; }
  .modes { grid-template-columns: 1fr; }
  .dash__cols { grid-template-columns: 1fr; }
  .dash__col { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .trinity { grid-template-columns: 1fr; }
  .roadmap { grid-template-columns: 1fr; }
  .tiers { grid-template-columns: repeat(2, 1fr); }
  .econ { grid-template-columns: 1fr; }
  .status-row { grid-template-columns: repeat(2, 1fr); }
  .patron-points { grid-template-columns: 1fr; }
  .phil-grid { grid-template-columns: 1fr; }
  .chips { grid-template-columns: repeat(2, 1fr); }
  .status-grid { grid-template-columns: 1fr; }
  .shot-gallery { grid-template-columns: 1fr; gap: 48px; }
  .shot-card .shot { width: min(264px, 78vw); }
  .shot--tilt,
  .shot--tilt-r { transform: none; }
  .interaction { min-width: 0; }
  .interaction__k { min-width: 0; }
  .interaction__step { flex-wrap: wrap; row-gap: 4px; }
}

@media (max-width: 560px) {
  .brief-top__right {
    display: block;
    font-size: 0.56rem;
    letter-spacing: 0.14em;
  }
  .tiers { grid-template-columns: 1fr; }
  .status-row { grid-template-columns: 1fr; }
  .bio { grid-template-columns: 1fr; gap: 18px; justify-items: center; }
  .bio__avatar { width: 84px; height: 84px; }
  .bio__photo { width: 160px; height: 198px; }
  .bio__figure { text-align: center; }
  .device--tilt,
  .device--tilt-r { transform: none; }
  .cta-row { flex-direction: column; align-items: stretch; }
  .btn { justify-content: center; }
  .brief-bottom__join { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOLDED INTO index.html — the brief is the destination at the end of the
   ravine. It is a normal-flow dark block placed after the .hero-track camera-scrub
   spacer (.hero-track), so it naturally begins once the descent reaches its end
   and scrolls up over the (fading) 3D scene. The camera "coalesces" into it via
   a crossfade: the 3D scene-shell + hero HUD fade out while the brief's ambient
   backdrop + chrome fade in. Driven by body.brief-active (brief.js).

   On index.html the brief MUST stay inside the same letterboxed viewport as
   .scene-shell / .hero-frame (styles.css --frame). Full-bleed fixed layers
   break the illusion — they paint past the cinematic frame on the right/left.
   ═════════════════════════════════════════════════════════════════════════ */

/* Sync inner padding + viewport inset with the landing cinematic frame
   (styles.css --frame), not the wider standalone brief.html gutter. */
body.landing-home .product-brief {
  --frame: clamp(14px, 2.1vw, 30px);
  max-width: calc(100% - 2 * var(--frame));
  margin-inline: var(--frame);
  overflow-x: clip;
}

/* The product contains the majority of the landing DOM. Do not ask mobile
   Safari to lay out and paint it behind the loader/proof. `brief-active` is
   applied during the final reading hold, giving the first chapter ample time
   to prepaint before the authored product crossfade begins. */
body.landing-home.v1-mvp:not(.brief-active):not(.direct-product-entry) .product-brief {
  display: none;
}

body.landing-home .brief-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: transparent;
  --ink: rgba(255, 250, 240, 0.94);
  --serif: "Newsreader", Georgia, "Times New Roman", serif;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
}

body.landing-home .brief-top {
  top: var(--frame);
  left: var(--frame);
  right: var(--frame);
  width: auto;
}

body.landing-home .brief-bottom {
  left: var(--frame);
  right: var(--frame);
  width: auto;
}

body.landing-home .brief-progress {
  left: var(--frame);
  right: var(--frame);
  width: auto;
}

/* The brief lives inside .page-flow (z-50), above the fixed 3D .scene-shell
   (z-1). Solid floor so the chapters fully occlude the 3D as they rise. */
.product-brief {
  z-index: 2;
  pointer-events: auto;
}

/* Fixed chrome + ambient backdrop are viewport-fixed, so they must stay dark
   and inert through the descent — otherwise they'd paint over the ravine.
   Phase 1 (brief-active): math backdrop only.
   Phase 2 (brief-content-ready): chrome + scrollable chapters fade in. */
.brief-bg,
.brief-top,
.brief-bottom,
.brief-progress,
.product-brief .brief-main {
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.1s var(--ease), visibility 0s linear 1.1s;
}

/* The coalesce on index.html: the ravine void (.scene-shell) stays the floor.
   We only overlay the floating equations — no second backdrop, no flash. */
body.landing-home .brief-bg {
  opacity: 1;
  visibility: visible;
  background: transparent;
  transition: visibility 0s, opacity 0s;
}

body.landing-home .brief-bg__smoke,
body.landing-home .brief-bg__grain {
  display: none;
}

/* Ravine-era: hide DOM equation spans on landing (Three.js owned them). MVP uses CSS field. */
body.landing-home:not(.v1-mvp) .brief-fx.is-lit .brief-fx__eq {
  opacity: 0;
  filter: none;
  transition: none;
}

body.landing-home:not(.v1-mvp) .brief-fx {
  visibility: hidden;
}

/* The 3D canvas remains present through the handoff. Only its non-world overlays
   clear; the camera itself carries the ravine walls out of frame. */
body.landing-home.brief-void-ready .math-instrument,
body.landing-home.brief-void-ready .math-tail,
body.landing-home.brief-void-ready .world-labels {
  opacity: 0 !important;
  visibility: hidden !important;
  transition:
    opacity 1.35s var(--ease),
    visibility 0s linear 1.35s !important;
}

/* Default folded handoff (standalone brief.html keeps its own solid floor). */
body.brief-active .brief-bg {
  opacity: 1;
  visibility: visible;
  transition: opacity 1.6s var(--ease);
}

body.brief-active:not(.brief-content-ready) .product-brief {
  background: transparent;
}

body.brief-content-ready .brief-top,
body.brief-content-ready .brief-bottom,
body.brief-content-ready .brief-progress,
body.brief-content-ready .product-brief .brief-main {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 2.6s var(--handoff-ease, var(--ease)),
    visibility 0s linear 0s;
}

body.brief-content-ready .product-brief .brief-main {
  transform: translate3d(0, 0, 0);
  transition:
    opacity 2.8s var(--handoff-ease, var(--ease)),
    transform 3.2s var(--handoff-ease, var(--ease)),
    visibility 0s linear 0s;
}

body.brief-content-ready .brief-top,
body.brief-content-ready .brief-bottom,
body.brief-content-ready .brief-progress {
  transition:
    opacity 2.1s var(--handoff-ease, var(--ease)) 0.65s,
    visibility 0s linear 0.65s;
}

body.landing-home .product-brief {
  --handoff-ease: cubic-bezier(0.45, 0.05, 0.55, 0.95);
  --handoff-fade: 2.8s;
  --handoff-chrome-fade: 2s;
  --handoff-copy-fade: 2.2s;
}

/* ── Landing portal HUD: one frame (hero-chrome) for ravine + product ───────
   styles.css declares hero-chrome the single persistent HUD. Do not swap in
   brief-top / brief-progress — morph brand + crossfade nav inside the portal. */

body.landing-home .brief-progress {
  display: none !important;
}

body.landing-home .brief-top .brief-brand {
  visibility: hidden !important;
  pointer-events: none !important;
}

body.landing-home .brief-top {
  position: fixed;
  inset: 0;
  z-index: 57;
  display: block;
  padding: 0;
  pointer-events: none;
  background: none !important;
  grid-template-columns: unset;
}

/* Fixed occlusion plane beneath the product banner. Chapter copy may scroll
   upward, but it disappears behind this plane instead of painting through the
   navigation. The persistent equation field remains underneath both layers. */
body.landing-home.brief-content-ready .brief-top::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: clamp(108px, 11vw, 150px);
  z-index: 0;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 1) 0%,
    rgba(0, 0, 0, 0.98) 48%,
    rgba(0, 0, 0, 0.82) 72%,
    rgba(0, 0, 0, 0) 100%
  );
}

body.landing-home.brief-content-ready .brief-nav,
body.landing-home.brief-content-ready .brief-top__right {
  z-index: 1;
}

body.landing-home:not(.brief-content-ready) .brief-nav,
body.landing-home:not(.brief-content-ready) .brief-top__right {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.landing-home.brief-content-ready .brief-nav {
  position: fixed;
  top: clamp(32px, 4vw, 58px);
  left: 50%;
  transform: translateX(-50%);
  justify-self: unset;
  pointer-events: auto;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity var(--handoff-chrome-fade) var(--handoff-ease);
}

body.landing-home.brief-content-ready .brief-top__right {
  position: fixed;
  top: clamp(32px, 4vw, 58px);
  right: clamp(28px, 4vw, 56px);
  pointer-events: auto;
  opacity: 1 !important;
  visibility: visible !important;
  transition: opacity var(--handoff-chrome-fade) var(--handoff-ease) 0.15s;
}

body.landing-home.brief-content-ready .hero-nav,
body.landing-home.brief-content-ready .hero-strip {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  transition: opacity 0.45s var(--ease), visibility 0s linear 0.45s !important;
}

body.landing-home.brief-content-ready .brief-bottom {
  display: none !important;
}

body.landing-home.brief-void-ready .hero-chrome,
body.landing-home.brief-content-ready .hero-chrome,
body.landing-home.brief-content-ready .hero-progress-bar,
body.landing-home.brief-active .hero-progress-bar,
body.landing-home.brief-active .journey-rail,
body.landing-home.brief-content-ready .journey-rail {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
}

body.landing-home.brief-active .journey-rail,
body.landing-home.brief-content-ready .journey-rail {
  pointer-events: auto;
}

body.landing-home.brief-active .journey-rail__stop {
  pointer-events: auto;
}

/* The cinematic rail remains usable at Instrument, so reserve an actual left
   gutter for it instead of painting the controls over the product copy. The
   brief's first text column is the only surface that needs this allowance. */
body.landing-home.brief-active #instrument .split__text {
  padding-left: clamp(116px, 10vw, 142px);
}

@media (max-width: 767px) {
  body.landing-home.brief-active #instrument .split__text {
    padding-left: 0;
  }
}

body.landing-home.brief-active .hero-interaction-hint {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (max-width: 560px) {
  body.landing-home.brief-active #instrument .display--xl {
    font-size: clamp(2.15rem, 10vw, 2.65rem);
  }
}

body.landing-home.brief-void-ready .hero-scroll-label,
body.landing-home.brief-void-ready .hero-scroll-chevron,
body.landing-home.brief-content-ready .hero-scroll-label,
body.landing-home.brief-content-ready .hero-scroll-chevron {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.landing-home.brief-content-ready .brief-top,
body.landing-home.brief-content-ready .brief-bottom,
body.landing-home.brief-content-ready .brief-progress {
  opacity: 1 !important;
  visibility: visible !important;
  background: none !important;
}

/* Prime layers at opacity 0 (in place) so the reveal can ease without a pop. */
body.landing-home.brief-handoff .brief-top,
body.landing-home.brief-handoff .brief-bottom,
body.landing-home.brief-handoff .brief-progress,
body.landing-home.brief-handoff .product-brief .brief-main {
  visibility: visible;
  opacity: 0;
  transform: none;
}

body.landing-home.brief-content-ready .product-brief .brief-main {
  opacity: 1;
  transform: none;
  transition: opacity var(--handoff-fade) var(--handoff-ease);
}

/* Direct proof → product handoff. Keep the full document out of the animated
   layer: compositing a ~16,000px opacity surface caused raster stalls and
   intermittent flashes. The first viewport-sized chapter is pre-painted under
   the closing message, then it alone crossfades into view. */
body.landing-home.finale-product-prime .product-brief .brief-main,
body.landing-home.finale-product-crossfade .product-brief .brief-main {
  visibility: visible !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body.landing-home.finale-product-prime #instrument {
  visibility: visible;
  opacity: 0;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: opacity;
  transition: none;
}

body.landing-home.finale-product-crossfade #instrument {
  visibility: visible;
  opacity: 1 !important;
  transition: opacity 1.8s cubic-bezier(0.45, 0.05, 0.55, 0.95) !important;
}

body.landing-home.finale-product-prime #instrument [data-reveal].is-in,
body.landing-home.finale-product-crossfade #instrument [data-reveal].is-in {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* The permanent product commit must never resurrect the old scene's opaque
   black floor. Keep this independent of hero-intro-complete so the completion
   class can be committed without changing the painted frame. */
body.landing-home.brief-content-ready.finale-phrase-exit .scene-shell {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  background: transparent !important;
  transition: none !important;
}

body.landing-home.brief-content-ready .brief-top,
body.landing-home.brief-content-ready .brief-bottom,
body.landing-home.brief-content-ready .brief-progress {
  transition:
    opacity var(--handoff-chrome-fade) var(--handoff-ease) 0.4s,
    visibility 0s linear 0.4s;
}

/* Landing handoff: fade copy in place — ease-in-out, no translateY slide. */
body.landing-home.brief-handoff #instrument [data-reveal] {
  opacity: 0 !important;
  transform: none !important;
  transition: opacity var(--handoff-copy-fade) var(--handoff-ease) !important;
}

body.landing-home.brief-content-ready #instrument [data-reveal].is-in {
  opacity: 1 !important;
  transform: none !important;
}

/* Equations live in the CSS brief-fx field on MVP — keep scene-shell hidden. */
body.landing-home.v1-mvp.brief-content-ready:not(.brief-handoff) .scene-shell {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.landing-home.v1-mvp.brief-handoff .scene-shell {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  /* The retired cinematic shell must never become a black curtain between the
     held message and the product. The persistent equation field now owns the
     shared background, while the canvas message remains above both layers. */
  z-index: 0 !important;
  background: transparent !important;
}

body.landing-home.v1-mvp.brief-handoff .math-instrument,
body.landing-home.v1-mvp.brief-handoff .math-instrument-body {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.landing-home.v1-mvp.brief-handoff .math-tail,
body.landing-home.v1-mvp.brief-handoff .math-phrase,
body.landing-home.v1-mvp.brief-handoff .phrase-headline,
body.landing-home.v1-mvp.brief-handoff .phrase-modes,
body.landing-home.v1-mvp.brief-handoff .phrase-char {
  visibility: visible !important;
}

body.landing-home:not(.v1-mvp).brief-content-ready .scene-shell {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none !important;
}

body.brief-content-ready .product-brief {
  background: var(--bg);
}

body.landing-home.brief-content-ready .product-brief {
  background: transparent;
}

/* While the math → content handoff runs, scroll is pinned so section 1 does
   not drift upward before the fade completes. brief.js pins every frame. */
body.brief-handoff {
  overscroll-behavior: none;
}

/* Hold scroll-reveal items until the page content beat lands. */
body.brief-active:not(.brief-content-ready) .product-brief [data-reveal] {
  opacity: 0 !important;
  transform: none !important;
}

/* Phase 1 on index.html: void stays (.scene-shell); equations overlay only. */
body.brief-active {
  background: var(--black, #000);
  overflow-x: clip;
}

body.brief-active .scene-shell {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 1s var(--ease), visibility 0s linear 1s;
}

body.landing-home.brief-active .scene-shell {
  opacity: 1;
  visibility: visible;
  pointer-events: none;
  background: #000;
  transition: none;
}

body.brief-active .hero-chrome,
body.brief-active .hero-progress-bar,
body.brief-active .site-header,
body.brief-active .ambient-audio-prompt,
body.brief-active .journey-cue,
body.brief-active .world-labels {
  opacity: 0 !important;
  pointer-events: none !important;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}

body.landing-home.brief-active .hero-chrome,
body.landing-home.brief-active .hero-progress-bar,
body.landing-home.brief-active .journey-rail {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
  transition: none;
}

body.landing-home.brief-active .journey-rail,
body.landing-home.brief-content-ready .journey-rail {
  pointer-events: auto;
}

body.landing-home.brief-active .journey-rail__stop {
  pointer-events: auto;
}

body.landing-home.brief-active:not(.brief-content-ready) .hero-chrome {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: none;
  transition: none;
}

body.landing-home.brief-active:not(.brief-content-ready) .hero-chrome a,
body.landing-home.brief-active:not(.brief-content-ready) .hero-chrome button {
  pointer-events: auto;
}

body.landing-home.brief-content-ready .brief-nav a,
body.landing-home.brief-content-ready .brief-top__right {
  pointer-events: auto;
}

body.landing-home.brief-content-ready .journey-cue,
body.landing-home.brief-content-ready .world-labels {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .brief-bg,
  .brief-top,
  .brief-bottom,
  .brief-progress,
  .product-brief .brief-main,
  body.brief-active .scene-shell,
  body.brief-active .hero-chrome,
  body.brief-active .hero-progress-bar,
  body.brief-active .site-header,
  body.brief-active .ambient-audio-prompt,
  body.brief-active .journey-cue,
  body.brief-active .world-labels {
    transition: none;
  }
}

/* MVP finale handoff — brief-void-ready hides math-tail globally above; keep phrase
   visible until finale-phrase-exit drives the scroll crossfade (journey.css). */
body.landing-home.v1-mvp.brief-void-ready:not(.finale-phrase-exit) .math-instrument,
body.landing-home.v1-mvp.brief-void-ready:not(.finale-phrase-exit) .math-tail {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Direct proof -> product layering contract.
   The product document starts at y=0 and is thousands of pixels tall. Its
   normal-flow z-index must never cover the fixed proof while the cinematic or
   closing statement is still in control. Once the user actually enters the
   product, the scene has faded and the document resumes normal interaction. */
body.landing-home:not(.direct-product-entry):not(.hero-intro-complete) .scene-shell {
  z-index: 10 !important;
}

body.landing-home:not(.direct-product-entry):not(.hero-intro-complete) .product-brief {
  z-index: 1;
  pointer-events: none;
}

body.landing-home.hero-intro-complete .product-brief,
body.landing-home.direct-product-entry .product-brief {
  pointer-events: auto;
}

/* The product equation field is a viewport backdrop, not a percentage of the
   full 16,000px document. The old ravine fold made it absolute, which pushed
   every equation far below the opening product viewport. */
body.landing-home.v1-mvp .brief-bg {
  position: fixed;
  inset: var(--frame) var(--frame) 0;
  width: auto;
  height: auto;
  contain: layout paint;
  z-index: 1;
  opacity: 0;
  visibility: hidden;
  transition:
    opacity 1.5s var(--ease),
    visibility 0s linear 1.5s;
}

body.landing-home.v1-mvp.equation-bridge-locked .brief-fx__eq {
  transform: translate3d(0, 0, 0) !important;
  /* Do not permit a deferred Newsreader download to swap glyph metrics during
     the handoff. Georgia is already resident before the cinematic begins, so
     the exact same widths, wrapping and right-edge anchors survive the scroll. */
  font-family: Georgia, "Times New Roman", serif !important;
}

/* Once activated, this is a persistent visual plane—not a finale state and not
   a product state. Pin it independently so swapping those state classes during
   the scroll handoff cannot produce even one hidden frame. The transition is
   retained for its initial entrance; subsequent state changes cannot touch it. */
body.landing-home.v1-mvp.equation-bridge-locked .brief-bg {
  opacity: 1 !important;
  visibility: visible !important;
  transition:
    opacity 1.5s var(--ease),
    visibility 0s linear 0s !important;
}

body.landing-home.v1-mvp.equation-bridge-locked .brief-fx.is-lit .brief-fx__eq {
  opacity: 0.105 !important;
  visibility: visible !important;
}

body.landing-home.v1-mvp.finale-product-prime .brief-bg,
body.landing-home.v1-mvp.brief-content-ready .brief-bg,
body.landing-home.v1-mvp.direct-product-entry .brief-bg {
  opacity: 1;
  visibility: visible;
  transition:
    opacity 1.5s var(--ease),
    visibility 0s linear 0s;
}

/* The generic field's 4.2% opacity vanishes against cinematic black on many
   displays. During the final reading hold only, let the equations register as
   a real background while remaining subordinate to the resolved statement. */
body.landing-home.v1-mvp.finale-product-prime .brief-fx.is-lit .brief-fx__eq,
body.landing-home.v1-mvp.brief-content-ready .brief-fx.is-lit .brief-fx__eq {
  opacity: 0.105;
  transition: opacity 1.9s var(--ease);
}

/* Once the closing statement has resolved, reveal that product backdrop
   beneath it. The scene continues to own the phrase, but no longer paints an
   opaque second black floor over the equations. */
body.landing-home.v1-mvp.finale-product-prime .scene-shell {
  background: transparent !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}