/* ============================================================
   Simulacra — page-specific sections
   ============================================================ */

/* ============= hero (home) ============= */
.hero {
  --home-hero-shell-top: clamp(140px, 18vh, 220px);
  padding-block: var(--home-hero-shell-top) clamp(72px, 12vh, 144px);
  position: relative;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 50% at 80% 0%, rgba(255,45,117,0.18) 0%, transparent 60%),
    radial-gradient(60% 50% at 0% 30%, rgba(92,61,255,0.16) 0%, transparent 65%),
    radial-gradient(80% 60% at 50% 110%, rgba(184,43,216,0.14) 0%, transparent 60%);
  pointer-events: none;
  z-index: 0;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(to right, var(--line-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-1) 1px, transparent 1px);
  background-size: 80px 80px;
  background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 30%, transparent 80%);
  mask-image: radial-gradient(ellipse 90% 70% at 50% 50%, black 30%, transparent 80%);
  pointer-events: none;
  opacity: 0.55;
  z-index: 0;
}

.hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.06fr 0.94fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  margin-block-start: calc(var(--hero-eyebrow-top) - var(--home-hero-shell-top));
}
.hero__content > .eyebrow {
  display: flex;
}
@media (max-width: 980px) {
  .hero__inner { grid-template-columns: 1fr; }
}

.hero__h1 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 30, "wght" 460;
  font-size: clamp(46px, 6.4vw, 88px);
  line-height: 0.98;
  letter-spacing: -0.034em;
  margin-block: 18px 24px;
}
.hero__h1 em {
  font-style: italic;
  font-size: 1.06em;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 380;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.hero__lede {
  font-size: clamp(17px, 1.45vw, 20px);
  line-height: 1.55;
  color: var(--text-2);
  max-width: 56ch;
}

.hero__actions {
  display: flex; flex-wrap: wrap; gap: 12px;
  margin-block: 36px 30px;
}

.hero__proofs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-top: 8px;
  border-top: 1px solid var(--line-1);
  padding-top: 24px;
}
@media (max-width: 880px) {
  .hero__proofs { grid-template-columns: repeat(2, 1fr); }
}
.hero__proofs .proof {
  display: grid;
  gap: 6px;
}
.hero__proofs .proof__num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 460;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
.hero__proofs .proof__label {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
  line-height: 1.4;
}

/* ============= hero joint-graph ============= */
.joint-graph {
  position: relative;
  aspect-ratio: 1 / 1;
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
.joint-graph svg { width: 100%; height: 100%; overflow: visible; }
.joint-graph__status {
  position: absolute;
  inset-inline: 0; inset-block-end: -28px;
  display: grid; gap: 6px;
  text-align: center;
  pointer-events: none;
}
.joint-graph__status .status-formula {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.02em;
  color: var(--brand-1);
}
.joint-graph__status .status-formula b {
  color: var(--text-1);
  font-weight: 500;
  background: rgba(255,45,117,0.12);
  padding: 1px 0;
  border-radius: 4px;
}
.joint-graph__status .status-note {
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text-2);
  letter-spacing: 0.04em;
}
.hg-node { cursor: pointer; transition: transform 200ms var(--ease-out); transform-box: fill-box; }
.hg-node:focus { outline: none; }
.hg-node:focus circle:nth-child(1) { stroke: var(--brand-1); }

/* ====== hero graph story panel ====== */
/* Right-docks inside the graph aside; never extends past the hero column
   so it can't drift off-canvas at any viewport width. */
.hg-panel {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  inset-inline-start: auto;
  width: min(340px, 100%);
  max-height: calc(100% + 28px);
  background: linear-gradient(180deg, var(--ink-700), var(--ink-800));
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  padding: 22px 20px 18px;
  box-shadow: var(--shadow-2);
  transform: translateX(calc(100% + 16px));
  opacity: 0;
  pointer-events: none;
  transition: transform 360ms var(--ease-out), opacity 280ms;
  overflow-y: auto;
  z-index: 4;
}
.hg-panel.is-open { transform: translateX(0); opacity: 1; pointer-events: auto; }

/* On wide viewports the container max-width leaves unused white-space to
   the right of the hero. Push the panel into that space (clamped so it
   never crosses the viewport edge or moves further than the panel's own
   width past the graph). Container max-width is 1360px → half is 680px. */
@media (min-width: 1500px) {
  .hg-panel {
    inset-inline-end: clamp(-340px, calc(680px - 50vw + 24px), 0px);
  }
}

@media (max-width: 980px) {
  .hg-panel {
    position: relative;
    inset: auto;
    width: 100%;
    margin-block-start: 24px;
    transform: none;
    opacity: 1;
    pointer-events: auto;
    display: none;
  }
  .hg-panel.is-open { display: block; }
}
.hg-panel__head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-block-end: 14px; }
.hg-panel__kind { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-1); }
.hg-panel__close { background: none; border: 0; color: var(--text-3); font-size: 22px; cursor: pointer; line-height: 1; padding: 4px 8px; border-radius: 4px; }
.hg-panel__close:hover { color: var(--text-1); background: var(--line-1); }
.hg-panel__title { font-family: var(--font-mono); font-size: 14px; letter-spacing: 0.08em; color: var(--text-1); margin: 0 0 6px; }
.hg-panel__desc { color: var(--text-2); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.hg-panel__rows { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; margin: 0; font-size: 13px; line-height: 1.5; }
.hg-panel__rows dt { color: var(--text-3); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; padding-block-start: 3px; }
.hg-panel__rows dd { color: var(--text-1); margin: 0; font-family: var(--font-mono); font-size: 13px; }
.hg-pill {
  display: inline-block;
  padding: 3px 8px;
  border: 1px solid var(--line-2);
  border-radius: 999px;
  margin-block-end: 4px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  background: rgba(78,224,224,0.06);
  border-color: rgba(78,224,224,0.28);
}

/* ============= compliance / trust strip ============= */
.trust-strip {
  padding-block: 28px;
  border-block: 1px solid var(--line-1);
  background: var(--ink-1000);
}
.trust-strip__inner {
  display: flex; flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
}
.trust-strip__intro {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
  max-width: 34ch;
}

/* ============= 3-pillar feature row ============= */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--ink-800);
}
.pillars > article {
  padding: 32px 28px 28px;
  position: relative;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
}
.pillars > article + article { border-inline-start: 1px solid var(--line-1); }
@media (max-width: 980px) {
  .pillars { grid-template-columns: 1fr; }
  .pillars > article + article { border-inline-start: 0; border-block-start: 1px solid var(--line-1); }
}
.pillar__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--brand-1);
  text-transform: uppercase;
}
.pillar h3 {
  font-family: var(--font-display);
  font-weight: 460;
  letter-spacing: -0.02em;
  font-size: 28px;
  line-height: 1.1;
  margin-block: 18px 14px;
  font-variation-settings: "opsz" 144, "wght" 460;
}
.pillar p { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.pillar__viz {
  height: 160px;
  margin-block-start: 20px;
  position: relative;
  border-radius: var(--r-2);
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 50% 50%, rgba(255,255,255,0.04), transparent 70%),
    var(--ink-700);
  border: 1px solid var(--line-1);
}

/* ============= homepage three-moves module ============= */
.three-moves {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* Seven subgrid rows — num, title, desc, controls, visualization,
     result, note — each card declares the same children so every zone
     (including title baselines) aligns across columns regardless of
     any single card's content length. */
  grid-template-rows: auto auto auto auto auto auto auto;
  gap: 0;
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  overflow: hidden;
  background: var(--ink-800);
}
@media (max-width: 1100px) {
  .three-moves { grid-template-columns: 1fr; grid-template-rows: none; }
  .move-card { grid-template-rows: none !important; grid-row: auto !important; }
  .move-card__head { grid-template-rows: none !important; grid-row: auto !important; row-gap: 12px; }
}

.move-card {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 7;
  gap: 18px;
  padding: 30px 28px 28px;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  position: relative;
}
.move-card + .move-card { border-inline-start: 1px solid var(--line-1); }
@media (max-width: 1100px) {
  .move-card + .move-card { border-inline-start: 0; border-block-start: 1px solid var(--line-1); }
}

.move-card__head {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 12px;
}
.move-card__controls { display: grid; gap: 18px; align-content: start; }
.move-card__viz { display: block; align-self: stretch; }
.move-card__result { display: block; align-self: start; }
.move-card__num {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--brand-1);
}
.move-card__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "SOFT" 60, "wght" 470;
  font-size: 26px;
  line-height: 1.12;
  letter-spacing: -0.018em;
  /* Warmer off-white instead of near-pure --text-1: pure white on dark
     maximizes ClearType sub-pixel RGB fringe; a slightly warmer tone
     reduces perceived edge contrast without changing glyph metrics. */
  color: rgba(246, 244, 239, 0.92);
  align-self: end;
}
.move-card__num { align-self: end; }
.move-card__desc { align-self: start; }
.move-card__title code { font-family: var(--font-mono); font-size: 22px; color: var(--brand-1); }
.move-card__desc { color: var(--text-2); font-size: 15px; line-height: 1.55; }
.move-card__footnote,
.move-card__note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
  line-height: 1.55;
  margin: 0;
  align-self: end;
}

.move-field { display: grid; gap: 8px; }
.move-field__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex; justify-content: space-between; gap: 12px; align-items: baseline;
}
.move-field__label b { color: var(--brand-1); font-weight: 500; font-family: var(--font-mono); text-transform: none; letter-spacing: 0.02em; }
.move-field__sub { color: var(--text-3); font-size: 11px; text-transform: none; }
.move-field__input {
  font: inherit;
  font-size: 14.5px;
  font-family: var(--font-mono);
  padding: 10px 12px;
  background: var(--ink-900);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  color: var(--text-1);
  width: 100%;
}
.move-field__input:focus { outline: none; border-color: var(--brand-1); }

.move-slider {
  appearance: none;
  width: 100%;
  margin: 0;
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255,45,117,0.55), rgba(255,255,255,0.22));
  border: 1px solid rgba(255,255,255,0.18);
  outline: none;
  cursor: grab;
}
.move-slider::-webkit-slider-thumb {
  appearance: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand-grad);
  border: 2px solid #fff;
  cursor: grab;
  box-shadow: 0 0 0 4px rgba(255,45,117,0.22), 0 2px 6px rgba(0,0,0,0.4);
}
.move-slider.is-demoing::-webkit-slider-thumb {
  animation: move-slider-thumb-hint 1720ms cubic-bezier(.4,0,.2,1) both;
}
.move-slider::-moz-range-thumb {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--brand-1);
  border: 2px solid #fff;
  cursor: grab;
  box-shadow: 0 0 0 4px rgba(255,45,117,0.22), 0 2px 6px rgba(0,0,0,0.4);
}
.move-slider.is-demoing::-moz-range-thumb {
  animation: move-slider-thumb-hint 1720ms cubic-bezier(.4,0,.2,1) both;
}
/* Quiet, sustained halo through the hint — peaks during the hold, fades back at the end. */
@keyframes move-slider-thumb-hint {
  0%   { box-shadow: 0 0 0 4px rgba(255,45,117,0.22), 0 2px 6px rgba(0,0,0,0.4); }
  36%  { box-shadow: 0 0 0 6px rgba(255,45,117,0.28), 0 0 14px rgba(255,45,117,0.20), 0 2px 6px rgba(0,0,0,0.4); }
  64%  { box-shadow: 0 0 0 6px rgba(255,45,117,0.28), 0 0 14px rgba(255,45,117,0.20), 0 2px 6px rgba(0,0,0,0.4); }
  100% { box-shadow: 0 0 0 4px rgba(255,45,117,0.22), 0 2px 6px rgba(0,0,0,0.4); }
}

.move-viz {
  background: var(--ink-1000);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 8px;
}
.move-viz svg { width: 100%; height: auto; display: block; }
.move-viz--diagram {
  background: var(--ink-1000);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 10px 12px;
}
.move-viz--diagram svg { width: 100%; height: auto; display: block; }

.move-output {
  display: grid; gap: 4px;
  padding: 14px;
  background: var(--ink-1000);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
}
.move-output__row {
  display: flex; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 13px;
}
.move-output__row span { color: var(--text-3); }
.move-output__row b { color: var(--text-1); font-weight: 500; }

.move-bars { display: grid; gap: 14px; padding: 18px 16px; background: var(--ink-1000); border: 1px solid var(--line-1); border-radius: var(--r-2); }
.move-bar {
  display: grid;
  grid-template-columns: 80px 1fr 64px;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.move-bar__label { color: var(--text-3); }
.move-bar__rail { height: 6px; background: var(--ink-700); border-radius: 3px; position: relative; overflow: hidden; }
.move-bar__fill { position: absolute; inset: 0; background: var(--brand-grad); width: var(--w, 50%); transition: width 280ms var(--ease-out); }
.move-bar__val { color: var(--text-1); text-align: right; }

.move-refuse {
  background: var(--ink-1000);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: 16px;
  display: grid; gap: 10px;
}
.move-refuse__head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.move-refuse__badge {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid;
}
.move-refuse__title { font-family: var(--font-mono); font-size: 13px; color: var(--text-1); }
.move-refuse__reason { font-size: 14px; line-height: 1.5; color: var(--text-2); }
.move-refuse__dl {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 4px 14px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  margin: 4px 0 0;
}
.move-refuse__dl dt { color: var(--text-3); }
.move-refuse__dl dd { color: var(--text-1); margin: 0; }

/* ============= scenario card · upstream-condition path ============= */
.move-path {
  padding: 14px 16px;
  background: var(--ink-1000);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 13px;
}
.move-path__rows {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  margin: 0;
}
.move-path__rows dt { color: var(--text-3); }
.move-path__rows dd { color: var(--text-1); margin: 0; font-weight: 500; }
.move-path__meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px 18px;
  flex-wrap: wrap;
  margin-block-start: 12px;
  padding-block-start: 12px;
  border-block-start: 1px solid var(--line-1);
  font-size: 12.5px;
}
.move-path__support {
  color: var(--text-3);
  letter-spacing: 0.03em;
}
.move-path__delta {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
}
.move-path__delta-label {
  color: var(--text-3);
  letter-spacing: 0.03em;
}
.move-path__delta-value {
  color: var(--brand-1);
  font-weight: 600;
  font-size: 13.5px;
}

/* ============= validation strip on home ============= */
.val-strip {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
@media (max-width: 980px) { .val-strip { grid-template-columns: 1fr; } }

.val-card {
  position: relative;
  padding: 38px 36px;
  background:
    linear-gradient(135deg, rgba(255,45,117,0.08), transparent 50%),
    linear-gradient(180deg, var(--ink-700), var(--ink-800));
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  transition: border-color 200ms, transform 240ms var(--ease-out);
  overflow: hidden;
  display: grid;
  gap: 24px;
}
/* When a val-card sits on a paper section, give it a paper background so
   the dark-ink text supplied by the inline overrides is actually readable. */
.section--paper .val-card {
  background:
    linear-gradient(135deg, rgba(255,45,117,0.06), transparent 55%),
    var(--paper-50);
  border-color: var(--paper-200);
}
.section--paper .val-card:hover { border-color: rgba(255,45,117,0.45); }
.val-card:hover { border-color: rgba(255,45,117,0.4); transform: translateY(-2px); }
.val-card__head { display: flex; flex-wrap: wrap; gap: 8px; }
.val-card__title {
  font-family: var(--font-display);
  font-weight: 460;
  font-size: 30px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144;
}
.val-card__metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  border-block-start: 1px solid var(--line-1);
  padding-block-start: 22px;
}
.val-card__metric {
  display: grid; gap: 6px;
}
.val-card__metric-num {
  font-family: var(--font-display);
  font-size: 32px;
  font-variation-settings: "opsz" 144, "wght" 460;
  letter-spacing: -0.025em;
  line-height: 1;
}
.val-card__metric-label {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-2);
}
/* On paper, use a darker ink for the metric labels so they're readable. */
.section--paper .val-card__metric-label { color: var(--paper-ink-2); }
.val-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  color: var(--text-1);
  margin-block-start: 8px;
}
.val-card__cta .arrow {
  transition: transform 200ms var(--ease-out);
}
.val-card:hover .val-card__cta .arrow { transform: translateX(4px); }

/* ============= compare table ============= */
.compare {
  border-radius: var(--r-3);
  overflow: hidden;
  border: 1px solid var(--line-1);
}
.compare__row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1fr;
  gap: 0;
  border-block-end: 1px solid var(--line-1);
}
.compare__row:last-child { border-block-end: 0; }
.compare__cell {
  padding: 20px 24px;
  font-size: 14.5px;
  line-height: 1.45;
  border-inline-start: 1px solid var(--line-1);
  display: flex; align-items: flex-start; gap: 10px;
}
.compare__cell:first-child {
  border-inline-start: 0;
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.02em;
  align-items: center;
}
/* Header: single 4-col × 2-row grid so the Simulacra column can span both
   rows (wordmark fills the full header height) while the other columns
   share a title row + a sub-label row that align across cells. */
.compare__head {
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr 1fr;
  background: var(--ink-800);
  border-block-end: 1px solid var(--line-1);
}
.compare__head .compare__cell { background: var(--ink-800); }

.compare__head__property {
  grid-row: 1 / 3;
  align-items: center;
  font-family: var(--font-mono);
  color: var(--text-3);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.compare__head__brand {
  grid-row: 1 / 3;
  background: rgba(92, 61, 255, 0.14);
  align-items: center;
  justify-content: center;
  padding: 14px 36px;
}
.compare__head__title {
  align-items: center;
  font-family: var(--font-body);
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text-1);
  padding-block-start: 22px;
  padding-block-end: 6px;
}
.compare__head__sub {
  align-items: flex-start;
  padding-block-start: 0;
  padding-block-end: 18px;
}

.compare__wordmark {
  width: 100%;
  height: auto;
  max-height: 100%;
  display: block;
  object-fit: contain;
}
.compare__sub {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  font-weight: 400;
  line-height: 1.4;
}

.compare__cell--ours { color: var(--text-1); background: rgba(92, 61, 255, 0.10); }
.compare__cell--theirs { color: var(--text-3); background: rgba(255, 92, 92, 0.05); }
.compare__check { color: var(--good); flex-shrink: 0; margin-top: 4px; }
.compare__cross { color: var(--guard); flex-shrink: 0; margin-top: 4px; }

@media (max-width: 720px) {
  .compare__row { grid-template-columns: 1fr; }
  .compare__cell { border-inline-start: 0; border-block-start: 1px solid var(--line-1); }
  .compare__cell:first-child { background: var(--ink-700); }
}

/* 4-column variant for ACE/CATE comparison */
.compare--four .compare__row { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
@media (max-width: 960px) {
  .compare--four .compare__row { grid-template-columns: 1fr; }
  .compare--four .compare__cell { border-inline-start: 0; border-block-start: 1px solid var(--line-1); }
  .compare--four .compare__cell:first-child { background: var(--ink-700); }
  .compare--four .compare__head { grid-template-columns: 1fr; }
  .compare--four .compare__head__property,
  .compare--four .compare__head__brand { grid-row: auto; }
  .compare--four .compare__head .compare__cell { border-inline-start: 0; border-block-start: 1px solid var(--line-1); }
}

/* Paper-background variant — used on the causal-engine "vs A/B and
   regression" comparison. Adapts the dark default to a light document
   feel while keeping the indigo emphasis on the Simulacra column. */
.section--paper .compare {
  border-color: rgba(21,23,31,0.14);
  background: white;
}
.section--paper .compare__row,
.section--paper .compare__head {
  border-block-end-color: rgba(21,23,31,0.10);
}
.section--paper .compare__cell {
  border-inline-start-color: rgba(21,23,31,0.10);
  color: var(--paper-ink-2);
}
.section--paper .compare__cell:first-child {
  color: var(--paper-ink);
}
.section--paper .compare__head,
.section--paper .compare__head .compare__cell {
  background: var(--paper-100);
}
.section--paper .compare__head__property {
  color: rgba(21,23,31,0.55);
}
.section--paper .compare__head__brand {
  background: rgba(92, 61, 255, 0.10);
}
.section--paper .compare__head__title {
  color: var(--paper-ink);
}
.section--paper .compare__head__sub .compare__sub {
  color: rgba(21,23,31,0.5);
}
.section--paper .compare__cell--ours {
  color: var(--paper-ink);
  background: rgba(92, 61, 255, 0.08);
}
.section--paper .compare__cell--theirs {
  color: rgba(21,23,31,0.6);
  background: rgba(0,0,0,0.02);
}
@media (max-width: 960px) {
  .section--paper .compare--four .compare__cell:first-child {
    background: var(--paper-100);
  }
}

/* ============= use-case tiles ============= */
.uc-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}
@media (max-width: 720px) { .uc-grid { grid-template-columns: 1fr; } }

.uc-tile {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 20px;
  align-items: center;
  padding: 24px 26px;
  background: var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  transition: border-color 200ms, transform 200ms var(--ease-out), background 200ms;
}
.uc-tile:hover { border-color: var(--line-3); transform: translateY(-1px); background: var(--ink-700); }
.uc-tile__pain {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 470;
  font-size: 25px;
  line-height: 1.22;
  letter-spacing: -0.012em;
  color: var(--text-1);
  margin: 10px 0 0;
}
.uc-tile__sub {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  margin: 0;
}
.uc-tile__pain em {
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 360;
  margin-inline-start: 0.1em;
  margin-inline-end: 0.04em;
}
.uc-tile__value {
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-2);
  margin-top: 14px;
}
.uc-tile__arrow {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid var(--line-2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 200ms, background 200ms, transform 200ms var(--ease-out);
}
.uc-tile:hover .uc-tile__arrow {
  border-color: var(--brand-1);
  background: rgba(255,45,117,0.08);
  transform: rotate(-12deg);
}

/* ============= founder block ============= */
.founder {
  display: grid;
  grid-template-columns: 0.45fr 1fr;
  gap: 40px;
  padding: clamp(32px, 5vh, 56px);
  background:
    radial-gradient(60% 80% at 0% 100%, rgba(184,43,216,0.16), transparent 60%),
    var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-4);
}
@media (max-width: 720px) { .founder { grid-template-columns: 1fr; } }
.founder__quote {
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 380;
  font-size: clamp(22px, 2.4vw, 32px);
  line-height: 1.25;
  color: var(--text-1);
  letter-spacing: -0.015em;
}
.founder__byline {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-block-start: 24px;
}
.founder__name {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 470;
  font-size: clamp(28px, 2.8vw, 36px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--text-1);
  margin-block-start: 14px;
  margin-block-end: 0;
}

/* portrait variant */
.founder--portrait { grid-template-columns: 240px 1fr; align-items: start; }
@media (max-width: 720px) { .founder--portrait { grid-template-columns: 1fr; } }

/* reverse layout for Z-pattern alternation across stacked founder cards */
.founder--portrait--reverse { grid-template-columns: 1fr 240px; }
.founder--portrait--reverse .founder__photo { grid-column: 2; }
.founder--portrait--reverse .founder__body { grid-column: 1; }
@media (max-width: 720px) {
  .founder--portrait--reverse { grid-template-columns: 1fr; }
  .founder--portrait--reverse .founder__photo,
  .founder--portrait--reverse .founder__body { grid-column: auto; }
  /* On mobile, source order is body-then-photo for reverse cards.
     Force photo-first so the bio block reads like a normal stacked
     "headshot above name" pattern regardless of source order. */
  .founder--portrait--reverse .founder__photo { order: -1; }
}

/* Large-photo variant — used on the About page where bios are long
   and the photo needs more vertical weight. Only kicks in above the
   small-laptop breakpoint so tablet text columns don't get squeezed. */
@media (min-width: 1000px) {
  .founder--portrait--lg { grid-template-columns: 320px 1fr; }
  .founder--portrait--lg.founder--portrait--reverse { grid-template-columns: 1fr 320px; }
}

/* Reverse founder cards: the body sits in the left column, so a
   text-align: right contact link only reaches the body-column edge —
   not the card's outer edge. Extend the link's paragraph past the
   photo column with a negative end margin so it right-aligns with the
   card. Scoped to the last paragraph in the body, which is the
   contact-link wrapper. */
.founder--portrait--reverse .founder__body > p:last-child {
  margin-inline-end: calc(-240px - 40px);
}
@media (min-width: 1000px) {
  .founder--portrait--reverse.founder--portrait--lg .founder__body > p:last-child {
    margin-inline-end: calc(-320px - 40px);
  }
}
@media (max-width: 720px) {
  .founder--portrait--reverse .founder__body > p:last-child {
    margin-inline-end: 0;
  }
}
.founder__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-3);
  overflow: hidden;
  background:
    radial-gradient(60% 60% at 50% 20%, rgba(255,45,117,0.25), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border: 1px solid var(--line-1);
  display: flex;
  align-items: center;
  justify-content: center;
}
.founder__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 15%;
  display: block;
}
.founder__photo-fallback {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 380;
  font-size: 72px;
  color: var(--text-3);
  letter-spacing: -0.04em;
}
.founder__photo--placeholder .founder__photo-fallback { display: flex; }
.founder__body { display: flex; flex-direction: column; }
.founder--portrait .founder__quote { margin-top: 22px; font-size: clamp(20px, 2.1vw, 28px); }

/* ============= cta band ============= */
.cta-band {
  background:
    radial-gradient(80% 100% at 100% 0%, rgba(255,45,117,0.30), transparent 60%),
    radial-gradient(80% 100% at 0% 100%, rgba(92,61,255,0.32), transparent 60%),
    linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border-block: 1px solid var(--line-1);
  padding-block: clamp(72px, 11vh, 128px);
  position: relative;
  overflow: hidden;
}
.cta-band__inner {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 56px;
  align-items: center;
}
@media (max-width: 880px) { .cta-band__inner { grid-template-columns: 1fr; } }

.cta-band h2 {
  font-size: clamp(36px, 4.6vw, 60px);
  line-height: 1.04;
  letter-spacing: -0.025em;
}
.ace-cta h2 {
  max-width: 10.8em;
}
.cta-band p { color: var(--text-2); font-size: 17px; line-height: 1.55; max-width: 56ch; margin-block: 18px 28px; }
.cta-band .actions { display: flex; flex-wrap: wrap; gap: 12px; }

.cta-band__rail {
  display: grid;
  gap: 12px;
  padding: 24px;
  border: 1px dashed var(--line-2);
  border-radius: var(--r-3);
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-3);
}
.cta-band__rail b { color: var(--text-1); font-weight: 500; }
.cta-band__rail .step { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.cta-band__rail .step > span:not(.step-num) {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: -0.005em;
  line-height: 1.4;
  color: var(--text-2);
}
.cta-band__rail .step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--ink-900);
  font-size: 11px;
  font-family: var(--font-mono);
  font-weight: 600;
  flex-shrink: 0;
}
.cta-band__rail-docs {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-size: 14.5px;
  line-height: 1.5;
}
.cta-band__rail-docs li {
  position: relative;
  padding-left: 18px;
  color: var(--text-2);
}
.cta-band__rail-docs li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.6em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--accent);
}

/* ============= flagship validation hero ============= */
.flagship-hero {
  padding-block: var(--hero-eyebrow-top) clamp(48px, 6vh, 72px);
  position: relative;
  overflow: hidden;
}
.flagship-hero__inner { display: grid; gap: 22px; max-width: 90ch; }
.flagship-hero h1 {
  font-size: clamp(40px, 5vw, 76px);
  line-height: 1.12;
  letter-spacing: -0.03em;
  overflow: visible;
  padding-block: 0.04em 0.12em;
}
/* Optical-size compensation for Fraunces italic — at the same nominal
   font-size, the italic variant reads visibly smaller than the upright
   in adjacent text. Bumping size and weight pulls the visual size and
   weight into agreement with the surrounding regular text. */
.flagship-hero h1 em {
  font-style: italic;
  display: inline;
  line-height: 1.2;
  /* Right side: extend the text-clip box (padding-inline-end) so the
     italic Fraunces "I" upper-right serif terminal isn't chopped, then
     pull the visual flow back with a small negative margin so trailing
     punctuation doesn't drift. */
  padding-inline: 0.04em 0.14em;
  margin-inline-end: -0.06em;
  font-size: 1.06em;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 380;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
/* Hero lede matches the base .lede scale so hero ledes never sit smaller
   than the section-head ledes below them. Wider max-width is preserved so
   long hero ledes still get one extra column of breathing room. */
.flagship-hero .lede { font-size: clamp(19px, 1.5vw, 23px); max-width: 88ch; }
.flagship-hero__inner:has(.flagship-meta) .lede { max-width: 76ch; }

.ace-hero {
  padding-block-end: clamp(40px, 5vh, 60px);
}

/* ACE hero: text-flow with floated causal-query rail. Eyebrow, H1,
   lede, and the compact intro are siblings inside .ace-hero__flow.
   The rail floats right and gets a margin-top equal to (eyebrow
   row + gap + H1 first-line height) so the H1's first line clears
   the rail's top edge and runs the full container width. Lines 2+
   of the H1 — and the lede that follows — wrap around the rail.
   When the float passes (rail ends), any remaining lede continues
   full width. ::after clearfix contains the float so the next
   section starts below the rail, not next to it. */
.ace-hero__flow {
  display: block;
  max-width: 106ch;
}
.ace-hero__flow::after {
  content: "";
  display: block;
  clear: both;
}
.ace-hero__flow > .eyebrow {
  margin-block: 0 22px;
}
.ace-hero__flow > h1 {
  margin-block: 0 22px;
}
.ace-hero__flow > .lede {
  margin-block: 0;
  max-width: none;
}
.ace-hero .ace-question-rail {
  --ace-rail-offset: clamp(130px, calc(76px + 5.8vw), 172px);
  float: right;
  width: clamp(430px, 45%, 580px);
  margin-right: clamp(-96px, -6vw, -40px);
  /* Aligns rail top just BELOW H1 line 1's box bottom so H1 line 1
     crosses the full container width above the rail and only line 2+
     wraps. Components:
       eyebrow line box ≈ 28px — driven by .ace-hero__flow's strut
                          (body's line-height 1.55 × 18px), NOT the
                          eyebrow's own mono font (which is smaller)
       eyebrow margin   = 22px
       H1 padding-top   = 0.04em = 0.04 × font-size
       H1 line 1 box    = 1.12 × font-size
     Total H1 line 1 bottom = 50 + 1.16em
     = clamp(96, 50 + 5.8vw, 138). Add 4-6px buffer so the float's
     outer top is strictly past line 1's box bottom — even 1px
     overlap triggers wrap.

     Critical detail: a float's *margin box* still affects line
     wrapping, so margin-top alone does not delay the wrap; the H1
     would wrap beside the rail's top margin. shape-outside insets
     the exclusion shape by the same amount, so the first line can
     span above the rail and wrapping begins where the visible rail
     begins. */
  margin-top: var(--ace-rail-offset);
  shape-outside: inset(var(--ace-rail-offset) 0 0 0 round 8px);
  margin-left: clamp(28px, 3vw, 56px);
  margin-bottom: 24px;
}
.ace-hero .lede a,
.security-hero .lede a,
.section--data-flow .lede a {
  color: inherit;
  text-decoration-line: underline;
  text-decoration-color: rgba(255,45,117,0.45);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
.ace-hero .lede a:hover,
.security-hero .lede a:hover,
.section--data-flow .lede a:hover {
  color: var(--text-1);
  text-decoration-color: var(--brand-1);
}
.ace-question-rail {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(80% 90% at 20% 0%, rgba(255,45,117,0.14), transparent 58%),
    radial-gradient(90% 90% at 100% 100%, rgba(92,61,255,0.14), transparent 60%),
    rgba(255,255,255,0.045);
  box-shadow: 0 28px 80px rgba(0,0,0,0.32);
}
.ace-question-rail__head {
  padding: 18px 22px 14px;
  border-block-end: 1px solid rgba(255,255,255,0.08);
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.ace-question-rail__head [aria-hidden="true"] {
  color: var(--accent);
  margin-inline: 0.24em;
  font-weight: 500;
}
.ace-question-rail__sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
/* The rail is a scrolling list. All 10 rows render in a vertical
   stack; the list is translateY-scrolled so the active row sits at
   the viewport's vertical center. The active row scales up in place
   (transform-origin: left center) — that's the "magnify out of the
   list" effect. After the value cycle, the row shrinks back into
   the list and the list scrolls one step. See assets/js/ace-rail.js. */
.ace-question-rail__viewport {
  position: relative;
  height: 304px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 10%, #000 90%, transparent);
}
.ace-question-rail__stage {
  position: absolute;
  inset: 0;
  display: grid;
  grid-auto-rows: 38px;
  align-content: start;
  transition: transform 720ms cubic-bezier(0.22, 0.61, 0.36, 1);
  will-change: transform;
}
.ace-question {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.4;
  color: var(--text-2);
  opacity: 0.38;
  white-space: nowrap;
  transform-origin: left center;
  transition:
    transform 460ms cubic-bezier(0.22, 0.61, 0.36, 1),
    opacity 460ms ease,
    color 460ms ease;
}
.ace-question.is-stage {
  color: var(--text-1);
  opacity: 1;
  transform: scale(1.32);
  z-index: 5;
}
.ace-question__query {
  min-width: 0;
}
.ace-question__outcome {
  color: var(--accent);
}
/* Value-cycle and result-cycle: each is a one-of-N selector. The
   single visible child uses display:inline; the rest are
   display:none — so the row reflows naturally as the value changes
   and the trailing ")" / result move with it. Pre-JS fallback: the
   first child is the visible one. Once JS attaches, the parent
   gets .js-managed and only the .is-shown child renders. */
.ace-question__val-cycle,
.ace-question__result-cycle {
  display: inline;
}
.ace-question__val-cycle > span,
.ace-question__result-cycle > span {
  display: none;
}
.ace-question__val-cycle:not(.js-managed) > span:first-child,
.ace-question__result-cycle:not(.js-managed) > span:first-child {
  display: inline;
}
.ace-question__val-cycle > span.is-shown,
.ace-question__result-cycle > span.is-shown {
  display: inline;
  animation: aceValueFadeIn 220ms ease-out both;
}
/* Treatment-level color coding: each alternate intervention value
   gets its own hue so the reader sees "we tried three different
   things" at a glance. The cycle steps through the brand gradient
   (rose → lavender → periwinkle), pairing visually with the
   gradient used elsewhere on the page. */
.ace-question__val-cycle > span {
  font-weight: 600;
}
.ace-question__val-cycle > span:nth-child(1) { color: #FF7DA5; }
.ace-question__val-cycle > span:nth-child(2) { color: #C686FF; }
.ace-question__val-cycle > span:nth-child(3) { color: #8EA0FF; }
.ace-question__result-area {
  color: var(--accent);
  font-weight: 600;
}
.ace-question__result-calc {
  display: none;
  font-family: var(--font-mono);
  font-weight: 700;
  /* Amber: warm complement to the cyan result. The squiggle is the
     "computing" beat — bright, energetic, unmistakably not-yet-an-answer. */
  color: #FFB84E;
  transform-origin: center;
}
/* When .is-calculating, swap the resolved number for a wiggling
   squiggle — the "computing" beat between intervention change and
   result reveal. */
.ace-question__result-area.is-calculating .ace-question__result-cycle > span {
  display: none;
}
.ace-question__result-area.is-calculating .ace-question__result-calc {
  display: inline-block;
  animation: aceCalcWave 460ms ease-in-out infinite alternate;
}
@keyframes aceValueFadeIn {
  from { opacity: 0.25; }
  to   { opacity: 1; }
}
@keyframes aceCalcWave {
  from { transform: translateY(-1.5px) rotate(-12deg); }
  to   { transform: translateY( 1.5px) rotate( 12deg); }
}
.ace-question-rail__caption {
  margin: 0;
  padding: 14px 22px 18px;
  border-block-start: 1px solid rgba(255,255,255,0.10);
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.55;
  max-width: 52ch;
}

@media (max-width: 980px) {
  /* Below 980px the float pattern would squeeze the text column
     below readable width. Switch to a stacked flex layout instead,
     with the rail pushed below the eyebrow + H1 + lede via order. */
  .ace-hero__flow {
    display: flex;
    flex-direction: column;
    gap: 28px;
  }
  .ace-hero__flow > * {
    margin-block: 0;
  }
  .ace-hero .ace-question-rail {
    order: 2;
    float: none;
    width: 100%;
    margin: 0;
  }
  .ace-hero__flow > .ace-intro {
    order: 3;
  }
}
@media (max-width: 560px) {
  .ace-question {
    font-size: clamp(10.8px, 3vw, 12px);
    line-height: 1.22;
    padding: 0 10px;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ace-question.is-stage {
    /* Avoid horizontal overflow on narrow viewports: keep the layout
       size, lift via color + weight instead of scale. */
    transform: none;
    font-weight: 600;
  }
  .ace-question-rail__viewport { height: 220px; }
  .ace-question-rail__stage { grid-auto-rows: 42px; }
}
@media (prefers-reduced-motion: reduce) {
  .ace-question,
  .ace-question-rail__stage,
  .ace-question__val-cycle > span.is-shown,
  .ace-question__result-cycle > span.is-shown,
  .ace-question__result-area.is-calculating .ace-question__result-calc {
    transition: none;
    animation: none;
  }
  .ace-question.is-stage {
    transform: none;
    font-weight: 600;
  }
}

/* Split hero variant — content left, product frame right. Used on
   /platform/studio where the hero anchors a live screenshot. The grid
   is biased toward the image so the frame reads as a hero element,
   not a thumbnail. Container stays at default width to align with the
   sections below; visual presence comes from chrome + brand halo. */
.flagship-hero--split .container {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(440px, 0.92fr);
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}
.flagship-hero--split .flagship-hero__inner { max-width: none; }
.flagship-hero--split .studio-product-frame--hero { margin-block-start: 0; }

/* Hero-variant of the product frame: taller chrome, larger window dots,
   and a brand-tinted shadow halo so the screenshot reads with weight. */
.flagship-hero--split .studio-product-frame__chrome { height: 42px; padding-inline: 20px; }
.flagship-hero--split .studio-product-frame__chrome span {
  width: 11px;
  height: 11px;
  background: rgba(255,255,255,0.42);
}
.flagship-hero--split .studio-product-frame--hero {
  box-shadow:
    0 36px 96px rgba(0,0,0,0.45),
    0 0 80px rgba(255,45,117,0.16),
    0 0 140px rgba(92,61,255,0.14);
}
.flagship-hero--split .studio-product-frame--hero > img {
  height: auto;
  object-fit: contain;
  object-position: center;
}

@media (max-width: 980px) {
  .flagship-hero--split .container { grid-template-columns: 1fr; }
  .flagship-hero--split .studio-product-frame--hero {
    margin-block-start: clamp(28px, 5vw, 56px);
  }
}
.security-hero.flagship-hero--split .container {
  grid-template-columns: minmax(0, 1fr) minmax(300px, 380px);
  align-items: center;
}
.security-hero .flagship-hero__inner {
  max-width: 86ch;
}
.security-hero__subsection {
  margin-top: 4px;
  padding-top: clamp(20px, 3vh, 28px);
  border-top: 1px solid rgba(255,255,255,0.10);
}
.security-hero__subsection h2 {
  margin: 0;
  max-width: 28ch;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 460;
  font-size: clamp(24px, 2.6vw, 34px);
  line-height: 1.12;
  letter-spacing: -0.02em;
  color: var(--text-1);
  text-wrap: balance;
}
.security-hero__subsection p {
  margin: 12px 0 0;
  max-width: 82ch;
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.62;
  text-wrap: pretty;
}
@media (max-width: 980px) {
  .security-hero.flagship-hero--split .container { grid-template-columns: 1fr; }
}
.flagship-meta {
  display: flex; flex-wrap: wrap; gap: 12px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* ============= Security assurance badges ============= */
.security-badges {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  margin-block: 28px 36px;
}
.security-badge-card {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 22px;
  min-height: 150px;
  padding: 20px 24px;
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  background:
    radial-gradient(80% 120% at 12% 0%, rgba(78,224,224,0.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
}
.security-badge-card img {
  width: auto;
  height: 104px;
  object-fit: contain;
  flex: 0 0 auto;
}
.security-badge-card--iso img {
  height: 122px;
}
.security-badges--hero {
  grid-template-columns: 1fr;
  gap: 16px;
  margin-block: clamp(6px, 1.2vw, 16px) 0;
}
.security-badges--hero .security-badge-card {
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 0;
  padding: 20px 18px 22px;
}
.security-badges--hero .security-badge-card img {
  height: 144px;
}
.security-badges--hero .security-badge-card--iso img {
  height: 168px;
}
.security-badge-card__label {
  font-family: var(--font-mono);
  font-size: 13.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}
@media (max-width: 980px) {
  .security-badges--hero {
    max-width: 680px;
  }
}
@media (max-width: 760px) {
  .security-badges { grid-template-columns: 1fr; }
  .security-badge-card {
    align-items: flex-start;
    padding: 18px;
  }
  .security-badge-card img { height: 88px; }
  .security-badge-card--iso img { height: 104px; }
}

/* ============= Security page: paper-section card overrides ============= */
body[data-page="security"] .section--paper .card {
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(70% 90% at 18% 0%, rgba(78,224,224,0.07), transparent 60%),
    radial-gradient(70% 90% at 100% 100%, rgba(255,45,117,0.04), transparent 60%),
    linear-gradient(180deg, #FEFCF7, #F6F2E9);
  border-color: var(--paper-200);
  color: var(--paper-ink);
  box-shadow: 0 8px 28px rgba(21,23,31,0.04);
}
body[data-page="security"] .section--paper .card h3 { color: var(--paper-ink); }
body[data-page="security"] .section--paper .card .card__body { color: var(--paper-ink-2); }
body[data-page="security"] .section--paper .card a {
  color: var(--paper-ink);
  text-decoration-line: underline;
  text-decoration-color: rgba(21,23,31,0.35);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}
body[data-page="security"] .section--paper .card a:hover {
  color: var(--brand-2);
  text-decoration-color: var(--brand-2);
}
body[data-page="security"] .section--paper .card__meta {
  margin: auto 0 0;
  padding-block-start: 12px;
  border-block-start: 1px solid rgba(21,23,31,0.08);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: rgba(21,23,31,0.5);
}
body[data-page="security"] .section--paper .control-themes__note {
  margin-top: 28px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: rgba(21,23,31,0.55);
  text-align: center;
}

/* ============= Training & data posture stack (security page) ============= */
.posture-stack {
  display: flex;
  flex-direction: column;
  gap: 28px;
  margin-block-start: 36px;
  max-width: 112ch;
}
.posture-stack__item {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: 32px;
  align-items: baseline;
}
.posture-stack__item p { max-width: 76ch; }
.posture-stack__tag {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  padding-block-start: 3px;
}
.posture-stack__item p {
  margin: 0;
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.62;
}
@media (max-width: 760px) {
  .posture-stack__item {
    grid-template-columns: 1fr;
    gap: 8px;
  }
}

/* ============= API data lifecycle (API security page) ============= */
.api-lifecycle {
  --api-life-log: 255, 184, 107;
  display: block;
  margin-block-start: 36px;
}
.api-lifecycle__map {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  column-gap: clamp(14px, 1.4vw, 22px);
  row-gap: 8px;
  padding: clamp(8px, 0.8vw, 12px);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-3);
  border: 1px solid var(--line-1);
  background:
    radial-gradient(70% 90% at 14% 0%, rgba(78,224,224,0.10), transparent 58%),
    radial-gradient(80% 110% at 88% 18%, rgba(255,45,117,0.075), transparent 64%),
    radial-gradient(circle, rgba(255,255,255,0.105) 0 1px, transparent 1.15px),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  background-size: auto, auto, 18px 18px, auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22);
}
.api-lifecycle__diagram-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.api-lifecycle__diagram {
  position: relative;
  min-height: 560px;
  padding: 30px 0 0;
}
.api-lifecycle__title {
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-1);
}
.api-lifecycle__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 2;
  pointer-events: none;
}
.api-lifecycle__wire {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 180ms ease, opacity 180ms ease, stroke-width 180ms ease;
}
.api-lifecycle__wire--main {
  stroke: rgba(255,255,255,0.30);
  stroke-width: 2.1;
  marker-end: url(#api-life-arrow);
  opacity: 0.45;
}
#api-life-arrow path { fill: context-stroke; }
.api-lifecycle__wire.is-active { opacity: 1; }
.api-lifecycle__wire--main.is-active {
  stroke: var(--accent);
  stroke-width: 3;
}
.api-lifecycle__lanes {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto repeat(4, minmax(104px, auto));
  column-gap: clamp(24px, 2vw, 32px);
  row-gap: 26px;
  padding: 8px;
}
.api-lifecycle__lane {
  display: contents;
}
.api-lifecycle__lane-bg {
  grid-row: 1 / -1;
  border-radius: calc(var(--r-3) - 6px);
  border: 1px solid rgba(255,255,255,0.07);
  background: rgba(7,10,18,0.14);
  margin: -10px;
  z-index: 0;
}
.api-lifecycle__lane-bg--customer { grid-column: 1; }
.api-lifecycle__lane-bg--processing { grid-column: 2; }
.api-lifecycle__lane-bg--store { grid-column: 3; }
.api-lifecycle__lane-kicker {
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.api-lifecycle__lane--processing .api-lifecycle__lane-kicker {
  color: rgba(255,255,255,0.74);
}
.api-lifecycle__lane--store .api-lifecycle__lane-kicker {
  color: var(--brand-2);
}
.api-lifecycle__item {
  position: relative;
  z-index: 3;
  appearance: none;
  font: inherit;
  text-align: left;
  color: var(--text-2);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: calc(var(--r-3) - 8px);
  background: linear-gradient(180deg, #0a0f1a, #090d17);
  box-shadow: 0 16px 42px rgba(0,0,0,0.20);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease,
    opacity 180ms ease;
  display: grid;
  gap: 7px;
  min-height: 104px;
  padding: 14px 15px 15px;
}
.api-lifecycle__item:hover,
.api-lifecycle__item:focus-visible,
.api-lifecycle__item.is-active {
  color: var(--text-1);
  border-color: rgba(78,224,224,0.42);
  background: linear-gradient(180deg, #0d1620, #0a101b);
  box-shadow:
    0 20px 56px rgba(0,0,0,0.30),
    0 0 32px rgba(78,224,224,0.10);
}
.api-lifecycle__item:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.api-lifecycle__num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.api-lifecycle__lane--store .api-lifecycle__num {
  color: var(--brand-2);
}
.api-lifecycle__item-title {
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.16;
}
.api-lifecycle__item-note {
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.35;
}
.api-lifecycle__detail {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: calc(var(--r-3) - 6px);
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(80% 90% at 18% 0%, rgba(78,224,224,0.09), transparent 58%),
    rgba(7,10,18,0.55);
}
.api-lifecycle__detail-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.api-lifecycle__detail h3 {
  margin: 13px 0 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 460;
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.api-lifecycle__detail p {
  margin: 15px 0 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.6;
}
.api-lifecycle__facts {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
}
.api-lifecycle__facts div {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-block-start: 1px solid rgba(255,255,255,0.09);
}
.api-lifecycle__facts dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.api-lifecycle__facts dd {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.45;
}
.api-lifecycle__caption {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 6px 4px 4px;
  border-block-start: 1px solid rgba(255,255,255,0.08);
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
}
.api-lifecycle__caption-kicker {
  display: inline-block;
  margin-inline-end: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  vertical-align: 1px;
}
.api-lifecycle__caption--mobile { display: none; }
.api-lifecycle__policy {
  margin-block-start: clamp(28px, 3vw, 44px);
  display: grid;
  grid-template-columns: minmax(140px, 180px) minmax(0, 1fr);
  column-gap: clamp(24px, 2.5vw, 40px);
  padding: clamp(22px, 2.4vw, 32px) clamp(22px, 2.4vw, 32px);
  border-radius: var(--r-3);
  border: 1px solid var(--line-1);
  background:
    radial-gradient(60% 90% at 12% 0%, rgba(78,224,224,0.08), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.015));
  box-shadow: 0 18px 56px rgba(0,0,0,0.18);
}
.api-lifecycle__policy-label {
  align-self: start;
  padding-block-start: 0.25em;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.api-lifecycle__policy-body {
  min-width: 0;
}
.api-lifecycle__policy h3 {
  margin: 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 460;
  font-size: clamp(28px, 2.8vw, 40px);
  line-height: 1.12;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
.api-lifecycle__policy p {
  margin: 14px 0 0;
  color: var(--text-2);
  font-size: 16.5px;
  line-height: 1.6;
  max-width: 76ch;
}
@media (max-width: 720px) {
  .api-lifecycle__policy {
    grid-template-columns: 1fr;
    row-gap: 8px;
  }
}
body[data-subpage="api"] .section { padding-block: 80px; }
body[data-subpage="api"] .cta-band { padding-block: 80px; }
body[data-subpage="api"] .flagship-hero {
  padding-block-end: clamp(36px, 5vh, 56px);
}
@media (max-width: 1100px) {
  .api-lifecycle__map {
    grid-template-columns: 1fr;
  }
  .api-lifecycle__detail {
    grid-column: 1;
    grid-row: auto;
    min-height: auto;
  }
}
@media (max-width: 920px) {
  .api-lifecycle__lanes {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
  }
  .api-lifecycle__lane-bg,
  .api-lifecycle__lane-kicker {
    display: none;
  }
  .api-lifecycle__diagram {
    min-height: 0;
  }
  .api-lifecycle__wires {
    display: none;
  }
  .api-lifecycle__item[data-api-life-step="source"]     { order: 1; }
  .api-lifecycle__item[data-api-life-step="upload"]     { order: 2; }
  .api-lifecycle__item[data-api-life-step="fit"]        { order: 3; }
  .api-lifecycle__item[data-api-life-step="dataset"]    { order: 4; }
  .api-lifecycle__item[data-api-life-step="generation"] { order: 5; }
  .api-lifecycle__item[data-api-life-step="url"]        { order: 6; }
  .api-lifecycle__item[data-api-life-step="downloaded"] { order: 7; }
  .api-lifecycle__item[data-api-life-step="delete"]     { order: 8; }
}
@media (max-width: 820px) {
  .api-lifecycle__caption--desktop { display: none; }
  .api-lifecycle__caption--mobile { display: block; }
}
@media (max-width: 640px) {
  .api-lifecycle__map {
    padding: 16px;
  }
  .api-lifecycle__item {
    min-height: 0;
  }
}

/* ============= Studio data flow (security page) ============= */
.section--data-flow {
  padding-top: 0;
}
.studio-flow {
  /* CSS-variable carrier + data-reveal hook only; no visual treatment. */
  --studio-flow-log: 255, 184, 107;
  --studio-flow-node-size: 120px;
  --studio-flow-map-min: 440px;
  display: block;
}
.studio-flow__map {
  /* Outer visible card. Contains diagram (left) + detail (right) + caption. */
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 360px);
  grid-template-rows: 1fr auto;
  column-gap: clamp(14px, 1.4vw, 22px);
  row-gap: 6px;
  padding: clamp(14px, 1.4vw, 20px);
  position: relative;
  overflow: hidden;
  border-radius: var(--r-3);
  border: 1px solid var(--line-1);
  background:
    radial-gradient(70% 90% at 14% 0%, rgba(78,224,224,0.10), transparent 58%),
    radial-gradient(80% 110% at 86% 18%, rgba(255,45,117,0.08), transparent 64%),
    radial-gradient(circle, rgba(255,255,255,0.115) 0 1px, transparent 1.15px),
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.018));
  background-size: auto, auto, 18px 18px, auto;
  box-shadow: 0 24px 80px rgba(0,0,0,0.22);
}
.studio-flow__diagram {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-height: var(--studio-flow-map-min);
}
.studio-flow__diagram::before {
  content: "Studio session lifecycle";
  position: absolute;
  top: 4px;
  left: 4px;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-1);
}
.studio-flow__wires {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}
.studio-flow__wire {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: stroke 180ms ease, opacity 180ms ease, stroke-width 180ms ease;
}
.studio-flow__wire--main {
  stroke: rgba(255,255,255,0.24);
  stroke-width: 2.2;
  marker-end: url(#studio-flow-arrow);
}
.studio-flow__wire--meta {
  stroke: rgba(255,255,255,0.19);
  stroke-width: 1.8;
  stroke-dasharray: 5 7;
  marker-end: url(#studio-flow-arrow-muted);
}
#studio-flow-arrow path,
#studio-flow-arrow-muted path { fill: context-stroke; }
.studio-flow__wire.is-active { opacity: 1; }
.studio-flow__wire--main.is-active {
  stroke: var(--accent);
  stroke-width: 3;
}
.studio-flow__wire--meta.is-active {
  stroke: rgba(var(--studio-flow-log), 0.88);
  stroke-width: 2.2;
}
.studio-flow__node {
  appearance: none;
  font: inherit;
  position: absolute;
  z-index: 2;
  display: grid;
  gap: 7px;
  width: clamp(132px, 16%, 168px);
  min-height: 0;
  padding: 15px 16px 16px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: calc(var(--r-3) - 8px);
  background: linear-gradient(180deg, #0a0f1a, #090d17);
  color: var(--text-2);
  height: var(--studio-flow-node-size);
  text-align: left;
  box-shadow: 0 20px 52px rgba(0,0,0,0.24);
  cursor: pointer;
  transition:
    border-color 180ms ease,
    background 180ms ease,
    box-shadow 180ms ease,
    color 180ms ease;
}
.studio-flow__node:hover,
.studio-flow__node:focus-visible,
.studio-flow__node.is-active {
  color: var(--text-1);
  border-color: rgba(78,224,224,0.42);
  background: linear-gradient(180deg, #0d1620, #0a101b);
  box-shadow:
    0 22px 64px rgba(0,0,0,0.30),
    0 0 38px rgba(78,224,224,0.12);
}
.studio-flow__node:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}
.studio-flow.is-measuring .studio-flow__node {
  height: auto;
  min-height: 0;
  transition: none;
}
.studio-flow__node--login { left: 4%; top: 44px; }
.studio-flow__node--container { left: 28%; top: 44px; }
.studio-flow__node--upload { left: 52%; top: 44px; }
.studio-flow__node--fit { right: 4%; top: 44px; }
.studio-flow__node--logs {
  left: 4%;
  bottom: 24px;
  border-style: dashed;
  border-color: rgba(255,255,255,0.115);
  background: linear-gradient(180deg, #0a0f1a, #090d17);
  box-shadow: 0 10px 28px rgba(0,0,0,0.12);
  opacity: 0.76;
}
.studio-flow__node--logs:hover,
.studio-flow__node--logs:focus-visible,
.studio-flow__node--logs.is-active {
  border-color: rgba(var(--studio-flow-log), 0.28);
  background: linear-gradient(180deg, #0a0f1a, #090d17);
  opacity: 0.92;
  box-shadow:
    0 12px 34px rgba(0,0,0,0.16),
    0 0 18px rgba(var(--studio-flow-log), 0.055);
}
.studio-flow__node--destroy {
  left: 28%;
  bottom: 24px;
}
.studio-flow__node--download {
  left: 52%;
  bottom: 24px;
}
.studio-flow__node--generate {
  right: 4%;
  bottom: 24px;
}
.studio-flow__num {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.studio-flow__node--logs .studio-flow__num {
  color: rgba(var(--studio-flow-log), 0.86);
}
.studio-flow__title {
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  line-height: 1.16;
}
.studio-flow__note {
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.35;
}
.studio-flow__detail {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: clamp(16px, 1.8vw, 22px);
  border-radius: calc(var(--r-3) - 6px);
  border: 1px solid rgba(255,255,255,0.12);
  background:
    radial-gradient(80% 90% at 18% 0%, rgba(78,224,224,0.09), transparent 58%),
    rgba(7,10,18,0.55);
}
.studio-flow__detail-kicker {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.studio-flow__detail h3 {
  margin: 13px 0 0;
  color: var(--text-1);
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 460;
  font-size: clamp(25px, 2.6vw, 34px);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.studio-flow__detail p {
  margin: 15px 0 0;
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.6;
}
.studio-flow__facts {
  display: grid;
  gap: 12px;
  margin: 24px 0 0;
}
.studio-flow__facts div {
  display: grid;
  gap: 6px;
  padding: 14px 0;
  border-block-start: 1px solid rgba(255,255,255,0.09);
}
.studio-flow__facts dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.studio-flow__facts dd {
  margin: 0;
  color: var(--text-1);
  font-size: 15px;
  line-height: 1.45;
}
.studio-flow__map > .studio-flow__caption {
  grid-column: 1;
  grid-row: 2;
  margin: 0;
  padding: 6px 4px 4px;
  border-block-start: 1px solid rgba(255,255,255,0.08);
  color: var(--text-3);
  font-size: 13.5px;
  line-height: 1.5;
  text-align: left;
  text-wrap: pretty;
}
.studio-flow__caption-kicker {
  display: inline-block;
  margin-inline-end: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  vertical-align: 1px;
}
.studio-flow__caption--mobile { display: none; }
@media (max-width: 820px) {
  .studio-flow__caption--desktop { display: none; }
  .studio-flow__caption--mobile { display: block; }
}
@media (max-width: 1100px) {
  .studio-flow__map {
    grid-template-columns: 1fr;
  }
  .studio-flow__detail {
    grid-column: 1;
    grid-row: auto;
    min-height: auto;
  }
  .studio-flow__map > .studio-flow__caption {
    grid-column: 1;
    grid-row: auto;
  }
}
@media (max-width: 820px) {
  .studio-flow__map {
    gap: 12px;
    padding: 16px;
  }
  .studio-flow__diagram {
    min-height: 0;
    padding: 40px 0 0;
  }
  .studio-flow__diagram::before {
    top: 4px;
  }
  .studio-flow__wires {
    display: none;
  }
  .studio-flow__node {
    position: static;
    width: auto;
    height: auto;
    min-height: 0;
    transform: none !important;
  }
}

/* ============= Studio product screenshots ============= */
.studio-product-frame,
.studio-paper-frame {
  margin: 0;
  overflow: hidden;
  border-radius: var(--r-3);
  border: 1px solid var(--line-2);
  background: var(--ink-900);
  box-shadow: 0 24px 80px rgba(0,0,0,0.28);
}
.studio-product-frame--hero {
  margin-block-start: clamp(38px, 6vw, 72px);
}
.studio-product-frame__chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding-inline: 16px;
  border-block-end: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
}
.studio-product-frame__chrome span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgba(255,255,255,0.32);
}
.studio-product-frame img,
.studio-paper-frame img,
.studio-step-shot img,
.studio-result-shot img {
  display: block;
  width: 100%;
  height: auto;
}
.studio-product-frame figcaption,
.studio-paper-frame figcaption {
  padding: 15px 18px;
  border-block-start: 1px solid rgba(255,255,255,0.08);
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.45;
}
.studio-product-frame__proofs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}
.studio-product-frame__proofs span {
  display: grid;
  gap: 3px;
  padding: 10px 12px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: calc(var(--r-3) - 6px);
  background: rgba(255,255,255,0.035);
  color: var(--text-3);
  font-size: 13px;
  line-height: 1.2;
  text-align: center;
  justify-items: center;
}
.studio-product-frame__proofs b {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 490;
  font-size: clamp(25px, 2.45vw, 36px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--text-1);
  font-weight: 500;
}
.studio-step-shot,
.studio-result-shot {
  margin: 22px 0 0;
  overflow: hidden;
  border-radius: calc(var(--r-3) - 4px);
  border: 1px solid var(--line-1);
  background: var(--ink-900);
}
.studio-workflow-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  align-items: stretch;
}
.studio-workflow-grid > .card {
  display: grid;
  grid-template-rows: auto auto minmax(4.6em, auto) auto;
  align-content: start;
  gap: 0;
  padding: 22px;
  border-radius: calc(var(--r-3) - 2px);
  background:
    radial-gradient(90% 80% at 100% 0%, rgba(255,45,117,0.055), transparent 62%),
    linear-gradient(180deg, var(--ink-800), var(--ink-900) 84%);
}
.studio-workflow-grid > .card .mono-tag {
  align-self: start;
}
.studio-workflow-grid > .card .card__body {
  font-size: 16px;
  line-height: 1.5;
  max-width: 62ch;
}
.studio-step-shot img {
  height: clamp(230px, 20vw, 292px);
  object-fit: contain;
  object-position: center;
  background: var(--ink-900);
}
.studio-workflow-grid > .card .studio-step-shot { margin-top: 16px; }
.studio-workflow-grid > .card:nth-child(3) .studio-step-shot {
  background: #132d3d;
}
.studio-workflow-grid > .card:nth-child(3) .studio-step-shot img {
  background: #132d3d;
}

/* ---- Studio heading utilities (extracted from inline styles) ---- */
.studio-step-h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 470;
  font-size: 25px;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 10px 0 6px;
}
.studio-capability-h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 480;
  font-size: 28px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
}
.studio-workflow-h3 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 480;
  font-size: 30px;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin-bottom: 14px;
  color: var(--paper-ink);
}
.studio-module-h4 {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 480;
  font-size: 20px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--paper-ink);
  margin-bottom: 6px;
}
.studio-subhead {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 470;
  font-size: clamp(28px, 3vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--paper-ink);
  margin-bottom: 36px;
}
.studio-proof__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-block: 8px 36px;
}
.studio-proof__stats > div {
  padding: 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background: rgba(255,255,255,0.035);
  text-align: center;
}
.studio-proof__stats strong {
  display: block;
  margin-block: 12px 4px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 470;
  font-size: clamp(34px, 4vw, 54px);
  line-height: 0.95;
  letter-spacing: -0.035em;
  color: var(--text-1);
}
.studio-proof__stats p {
  color: var(--text-3);
  font-size: 14px;
  line-height: 1.45;
}
.studio-shift-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}
.studio-shift-card {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
  background:
    radial-gradient(70% 70% at 100% 0%, rgba(255,45,117,0.10), transparent 60%),
    rgba(255,255,255,0.035);
}
.studio-shift-card--wide {
  grid-column: 1 / -1;
  grid-template-columns: minmax(260px, 0.62fr) minmax(0, 1fr);
  grid-template-rows: auto;
  align-items: center;
  gap: 28px;
}
.studio-shift-card h3 {
  margin-block: 10px 8px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 470;
  font-size: clamp(24px, 2.2vw, 32px);
  line-height: 1.12;
  letter-spacing: -0.024em;
}
.studio-shift-card p {
  color: var(--text-2);
  font-size: 16px;
  line-height: 1.55;
}
.studio-shift-card .studio-result-shot {
  align-self: end;
  width: 100%;
}
/* Normalize image display height across the four 2-column shift cards so
   charts with different native aspect ratios don't make cards uneven.
   The --wide card keeps natural sizing because it has horizontal room. */
.studio-shift-card:not(.studio-shift-card--wide) .studio-result-shot img {
  max-height: 200px;
  object-fit: contain;
  object-position: center;
  width: 100%;
}
.studio-analysis__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
/* Force both causal-analysis frames to identical dimensions so source
   aspect-ratio drift between the two screenshots doesn't make the row
   look uneven. */
.studio-analysis__grid .studio-paper-frame img {
  aspect-ratio: 2 / 1;
  object-fit: contain;
  background: var(--ink-900);
}
.section--paper .studio-paper-frame {
  background: var(--paper-100);
  border-color: rgba(21,23,31,0.14);
  box-shadow: 0 22px 72px rgba(21,23,31,0.16);
}
.section--paper .studio-paper-frame figcaption {
  color: var(--paper-ink-2);
  border-block-start-color: rgba(21,23,31,0.12);
}
@media (max-width: 980px) {
  .studio-proof__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-workflow-grid,
  .studio-shift-grid,
  .studio-shift-card--wide,
  .studio-analysis__grid {
    grid-template-columns: 1fr;
  }
  .studio-workflow-grid { gap: 18px; }
  .studio-workflow-grid > .card {
    grid-template-rows: auto;
    padding: 20px;
  }
  .studio-step-shot img { height: clamp(220px, 55vw, 360px); }
}
@media (max-width: 560px) {
  .studio-proof__stats { grid-template-columns: 1fr; }
  .studio-shift-card,
  .studio-proof__stats > div { padding: 18px; }
  .studio-product-frame__proofs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .studio-product-frame figcaption,
  .studio-paper-frame figcaption { font-size: 12px; }
}

/* ============= Agent-friendly features grid ============= */
/* Body min-height equalizes card heights across the 3x2 grid so the
   row stretching reads cleanly when body copy varies by a line or two. */
.api-features-grid .card__body { min-height: 4.5em; }

/* ============= API security defaults grid ============= */
/* 2 columns × 3 rows with column-flow auto-placement: first three cards
   fill the left column top-to-bottom (security primitives), next three
   fill the right column (retention/lifecycle). Row stretching aligns
   card heights horizontally across columns. */
.api-security-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  gap: 14px 24px;
}
@media (max-width: 720px) {
  .api-security-grid {
    grid-template-columns: 1fr;
    grid-template-rows: none;
    grid-auto-flow: row;
  }
}

/* ============= validation metric grid (Twin-2K) ============= */
.metric-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.study-body .metric-grid { gap: 14px; }
.study-body .metric-grid .spec { padding: 20px; }
.study-body .metric-grid .spec__value { font-size: clamp(36px, 3.4vw, 52px); }
@media (max-width: 980px) { .metric-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .metric-grid { grid-template-columns: 1fr; } }

/* ============= chart container ============= */
.chart {
  margin: 0;
  background: var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: 28px;
  display: grid;
  gap: 20px;
}
.chart__head { display: grid; gap: 6px; }
.chart-threshold-badge {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-block-start: 6px;
  padding: 6px 12px;
  border-radius: 6px;
  background: rgba(255,45,117,0.08);
  border: 1px solid rgba(255,45,117,0.4);
  align-self: start;
  max-width: 100%;
}
.chart-threshold-badge__rule {
  display: inline-block;
  width: 24px;
  height: 0;
  border-top: 1.5px dashed #FF2D75;
  flex-shrink: 0;
}
.chart-threshold-badge__label {
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 0;
  color: #FF2D75;
  min-width: 0;
}
.chart__head--row {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: end;
  gap: 24px;
}
@media (max-width: 720px) { .chart__head--row { grid-template-columns: 1fr; } }
/* Chart titles are evidence labels, not section headings — use body type at
   a calm semibold weight. Mono is reserved for axis labels and data values
   so the technical voice doesn't compete with the visualisation itself. */
.chart__title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.3;
  letter-spacing: -0.005em;
  color: var(--text-1);
}
.chart__sub {
  font-family: var(--font-body);
  font-weight: 400;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--text-2);
  letter-spacing: 0;
  text-transform: none;
}
/* Right-aligned view toggle inside chart head */
.chart__view-toggle { display: inline-flex; gap: 6px; }
.chip--toggle {
  font-family: var(--font-body);
  font-size: 12.5px;
  letter-spacing: 0;
  text-transform: none;
  padding: 6px 12px;
}
.chip--toggle.is-on {
  color: white;
  background: rgba(255,45,117,0.14);
  border-color: rgba(255,45,117,0.5);
}

/* ----- stat-row: external evidence cards rendered above plot wells ----- */
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-block-end: 28px;
}
@media (max-width: 820px) { .stat-row { grid-template-columns: 1fr; } }
.stat {
  padding: 18px 20px;
  background: var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  display: grid;
  gap: 6px;
  text-align: center;
}
.stat__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
}
.stat__value {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 460;
  font-size: 38px;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
.stat__unit {
  font-family: var(--font-mono);
  font-weight: 500;
  font-variation-settings: normal;
  font-size: 20px;
  letter-spacing: 0;
  color: var(--text-2);
  margin-inline-start: 2px;
}
.stat__caption {
  font-family: var(--font-body);
  font-size: 13.5px;
  line-height: 1.45;
  color: var(--text-2);
}
.chart__legend {
  display: flex; flex-wrap: wrap;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
}
.chart__legend span { display: inline-flex; align-items: center; gap: 8px; }
.chart__legend i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.chart__caption {
  font-size: 16px; color: var(--text-2); line-height: 1.55;
}
.chart svg { width: 100%; }
.chart__controls {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-block-end: 4px;
}
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px;
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--line-2);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color 160ms, background 160ms, border-color 160ms;
}
.chip:hover { color: var(--text-1); border-color: var(--line-3); }
.chip[aria-pressed="true"] {
  color: white;
  background: rgba(255,45,117,0.12);
  border-color: rgba(255,45,117,0.45);
}
.chip__dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; }

.section--paper .chip { background: rgba(0,0,0,0.02); border-color: rgba(21,23,31,0.12); color: var(--paper-ink-2); }
.section--paper .chip:hover { color: var(--paper-ink); border-color: rgba(21,23,31,0.22); }
.section--paper .chip[aria-pressed="true"] { color: var(--paper-ink); background: rgba(255,45,117,0.08); border-color: rgba(184,43,216,0.35); }

/* Badge paper-mode overrides: dark-mode tokens disappear on the cream background */
.section--paper .badge { background: rgba(0,0,0,0.04); border-color: rgba(21,23,31,0.14); color: var(--paper-ink-2); }
.section--paper .badge--accent { color: #0F8F8F; background: rgba(15,143,143,0.08); border-color: rgba(15,143,143,0.28); }

/* ----- standardized source citation under every chart ----- */
[data-source-for] {
  margin-block-start: 14px;
  padding-block-start: 14px;
  border-block-start: 1px dashed var(--line-1);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-3);
  display: grid;
  gap: 6px;
}
.section--paper [data-source-for] {
  border-block-start-color: rgba(21,23,31,0.12);
  color: var(--paper-ink-2);
}
.section--paper .chart:not(.chart--paper) [data-source-for] {
  border-block-start-color: var(--line-1);
  color: var(--text-3);
}
[data-source-for] .src-line { display: flex; flex-wrap: wrap; gap: 10px; align-items: baseline; }
[data-source-for] .src-text { font-family: var(--font-mono); font-size: 14px; line-height: 1.55; letter-spacing: 0.02em; }
[data-source-for] .src-text b { color: var(--text-2); font-weight: 500; }
.section--paper [data-source-for] .src-text b { color: var(--paper-ink); }
.section--paper .chart:not(.chart--paper) [data-source-for] .src-text b { color: var(--text-2); }
[data-source-for] .src-text i { font-style: italic; color: var(--text-2); }
[data-source-for] .src-link { color: var(--text-1); border-block-end: 1px solid var(--brand-1); padding-block-end: 1px; }
.section--paper [data-source-for] .src-link { color: var(--paper-ink); }
.section--paper .chart:not(.chart--paper) [data-source-for] .src-link { color: var(--brand-1); }
[data-source-for] .src-calc { font-size: 15px; line-height: 1.6; max-width: 80ch; color: var(--text-2); }
.section--paper [data-source-for] .src-calc { color: var(--paper-ink-2); }

/* Subtle provenance marker: study data is verbatim from the validation
   paper — surface that quietly in the source footer, no warning treatment. */
.src-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  vertical-align: baseline;
}
.src-badge--exact {
  color: var(--good);
  background: rgba(107,230,166,0.08);
  border: 1px solid rgba(107,230,166,0.32);
}
.src-badge--exact::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--good);
  box-shadow: 0 0 0 2px rgba(107,230,166,0.18);
}
.section--paper .src-badge--exact {
  background: rgba(21,127,73,0.06);
  border-color: rgba(21,127,73,0.24);
  color: #157F49;
}

/* ----- Data-reduction per-product blinded grid ----- */
.dr-blind-banner {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin: 14px 0 18px;
  padding: 12px 16px;
  background: rgba(240,181,58,0.06);
  border: 1px solid rgba(240,181,58,0.28);
  border-radius: var(--r-2);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.dr-blind-banner__chip {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--warn);
  background: rgba(240,181,58,0.10);
  border: 1px solid rgba(240,181,58,0.5);
  border-radius: 999px;
  padding: 4px 10px;
  align-self: center;
}
.dr-small-multiples { width: 100%; overflow-x: auto; }
.dr-small-multiples__svg { width: 100%; height: auto; min-width: 720px; }

/* Pricing-promo 2x2 panel charts: same small-multiples treatment —
   keep panel readability at mobile by forcing a horizontal scroll
   instead of shrinking the 2x2 grid into unreadable thumbnails. */
#chart-cpg-avp,
#chart-cpg-response {
  width: 100%;
  overflow-x: auto;
}
#chart-cpg-avp > svg,
#chart-cpg-response > svg {
  width: 100%;
  height: auto;
  min-width: 720px;
}

/* ============= Pricing & Promo · verbatim-only result + stat cards ============= */
.cpg-result-grid, .cpg-stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin-top: 8px;
}
.cpg-result-card, .cpg-stat-card {
  background: var(--ink-800);
  border: 1px solid rgba(78,224,224,0.22);
  border-radius: var(--r-3);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  align-items: center;
}
.cpg-result-card { background: linear-gradient(180deg, rgba(78,224,224,0.055), rgba(255,255,255,0.018)); }
.cpg-result-card--passed { border-color: rgba(78,224,224,0.4); background: rgba(78,224,224,0.04); }
.cpg-result-card--note   { border-color: rgba(240,181,58,0.4); background: rgba(240,181,58,0.04); }
.cpg-result-card__eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brand-1);
}
.cpg-result-card__num, .cpg-stat-card__num {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 460;
  font-size: clamp(28px, 3.6vw, 44px);
  letter-spacing: -0.02em;
  line-height: 1;
  color: #4EE0E0;
}
.cpg-result-card--passed .cpg-result-card__num { color: #4EE0E0; }
.cpg-result-card--note   .cpg-result-card__num { color: #F0B53A; }
.cpg-stat-card__num { color: var(--brand-1); }

.cpg-result-card__label, .cpg-stat-card__label {
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
}
.cpg-stat-card__sub {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--text-2);
  margin-top: auto;
  padding-top: 8px;
  border-top: 1px solid var(--line-1);
  align-self: stretch;  /* keep the divider rule full-width even when card centers its content */
}

.cpg-attestation {
  margin-top: 24px;
  padding: 16px 20px;
  background: rgba(78,224,224,0.06);
  border: 1px solid rgba(78,224,224,0.32);
  border-radius: var(--r-2);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cpg-attestation__chip {
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #4EE0E0;
  background: rgba(78,224,224,0.10);
  border: 1px solid rgba(78,224,224,0.45);
  border-radius: 999px;
  padding: 4px 12px;
  align-self: center;
}
.cpg-attestation__body {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-2);
}

.cpg-source-line {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
}
.cpg-source-line .link-arrow { margin-left: 8px; display: inline-flex; }

/* ----- chart-rendered tables ----- */
.dsc-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-mono);
  font-size: 13px;
}
.dsc-table th, .dsc-table td {
  padding: 12px 16px;
  text-align: left;
  border-block-end: 1px solid var(--line-1);
}
.dsc-table th {
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  background: var(--ink-700);
}
.dsc-table td.num { font-variant-numeric: tabular-nums; }
.dsc-table tr.row-secondary td { color: var(--text-3); }
.dsc-table .row-tag { display: inline-block; padding: 2px 6px; border-radius: 4px; background: rgba(255,255,255,0.05); color: var(--text-3); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 4px; }
.dsc-table .row-note { color: var(--text-3); font-size: 12px; padding-top: 0; padding-bottom: 12px; font-style: italic; border-block-end: 0; }
.dsc-table--paper {
  font-size: 14px;
}
.section--paper .dsc-table th { background: var(--paper-100); color: var(--paper-ink-2); }
.section--paper .dsc-table th, .section--paper .dsc-table td { border-block-end-color: rgba(21,23,31,0.10); }

/* ----- tooltip ----- */
.chart-tip {
  position: fixed;
  z-index: 90;
  pointer-events: none;
  background: var(--ink-1000);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-1);
  box-shadow: var(--shadow-2);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 120ms, transform 120ms;
  max-width: 320px;
}
.chart-tip.is-visible { opacity: 1; transform: translateY(0); }
.chart-tip b { color: var(--brand-1); font-weight: 500; }
.chart-tip dl { margin: 6px 0 0; display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; }
.chart-tip dt { color: var(--text-3); }
.chart-tip dd { margin: 0; color: var(--text-1); }

/* ============= study layout (Twin-2K & other validation deep-dives) ============= */
.study-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 64px;
  padding-block: clamp(24px, 4vh, 56px) clamp(48px, 7vh, 96px);
}
@media (max-width: 1080px) {
  .study-layout { grid-template-columns: 1fr; gap: 28px; }
  .study-toc { display: none; }
}
.study-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-3);
}
.study-toc__label {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-block-end: 14px;
}
.study-toc ol {
  list-style: none;
  padding: 0;
  margin: 0;
  border-inline-start: 1px solid var(--line-1);
}
.study-toc li { margin: 0; }
.study-toc a {
  display: block;
  padding: 8px 14px;
  color: var(--text-2);
  border-inline-start: 1px solid transparent;
  margin-inline-start: -1px;
  transition: color 160ms, border-color 160ms;
  letter-spacing: 0.02em;
}
.study-toc a:hover { color: var(--text-1); }
.study-toc a.is-active {
  color: var(--text-1);
  border-inline-start-color: var(--brand-1);
}
.study-toc__cite {
  margin-block-start: 24px;
  padding-inline-start: 14px;
  font-size: 13.5px;
  color: var(--text-2);
  line-height: 1.6;
}
.study-toc__cite code {
  color: var(--text-2);
  background: rgba(255,255,255,0.04);
  padding: 1px 4px;
  border-radius: 3px;
}

.study-body { min-width: 0; }
.study-section { scroll-margin-top: 96px; padding-block: clamp(48px, 9vh, 112px); border-block-end: 1px solid var(--line-1); }
.study-section:last-child { border-block-end: 0; }
.study-section > .eyebrow { margin-block-end: 14px; }
.study-section > h2 { margin-block-end: 14px; }
.study-section > h2.display-2,
body[data-page-shape="validation-detail"] .section .section-head > h2.display-2 {
  font-size: clamp(30px, 3.6vw, 48px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  font-variation-settings: "opsz" 144, "SOFT" 30;
}
/* Validation detail pages: tighter section + section-head spacing to
   match the compact study-section rhythm. Scoped via the same
   flagship-meta presence used for the H2 size override above. */
body[data-page-shape="validation-detail"] .section,
body[data-page="use-cases"] .section {
  padding-block: clamp(48px, 8vh, 80px);
}
body[data-page-shape="validation-detail"] .section-head,
body[data-page="use-cases"] .section-head {
  margin-block-end: clamp(24px, 3.5vh, 36px);
}
.study-section > .lede { margin-block-end: 28px; }

.study-section--paper {
  position: relative;
  padding-inline: clamp(20px, 4vw, 40px);
  background: var(--paper-50);
  color: var(--paper-ink);
  border-radius: var(--r-3);
  margin-block: 48px;
}
.study-section--paper h2, .study-section--paper h3, .study-section--paper h4 { color: var(--paper-ink); }
.study-section--paper .eyebrow { color: rgba(21,23,31,0.55); }
.study-section--paper .lede { color: var(--paper-ink-2); }
.study-section--paper [data-source-for] {
  border-block-start-color: rgba(21,23,31,0.12);
  color: var(--paper-ink-2);
}
.study-section--paper [data-source-for] .src-text b { color: var(--paper-ink); }
.study-section--paper [data-source-for] .src-link { color: var(--paper-ink); }

.chart--paper { background: white; border-color: var(--paper-200); color: var(--paper-ink); }
.chart--paper .chart__title { color: var(--paper-ink); }
.chart--paper .chart__sub { color: var(--paper-ink-2); }

/* ----- process flow steps (5-card sequential protocol) -----
   Default 3-up gives a balanced 3 + 2 layout; very-wide viewports
   widen to a single 5-up row; narrow viewports stack vertically.
   Avoids the 4 + 1 / 2 + 2 + 1 imbalance auto-fit would produce.
   Three subgrid rows (number, title, body) so every card's number,
   title, and body start at the same y across the entire row. */
.flow-data {
  margin: 0 0 14px;
  padding: 22px;
  background: var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  display: grid;
  gap: 10px;
}
.flow-data__label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}
.flow-data p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
  margin: 0;
  max-width: 76ch;
}
.flow {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto 1fr;
  gap: 14px 14px;
}
@media (min-width: 1500px) {
  .flow { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}
@media (max-width: 800px) {
  .flow {
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }
  .flow__step { grid-row: auto !important; grid-template-rows: none !important; }
}
.flow__step {
  position: relative;
  padding: 22px;
  background: var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  row-gap: 0;
  align-content: start;
}
.flow__num {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  color: var(--brand-1);
  align-self: start;
}
.flow__step h3 {
  font-size: 19px;
  letter-spacing: -0.005em;
  margin-block: 10px 0;
  align-self: start;
}
.flow__step p {
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-2);
  margin-block-start: 10px;
  align-self: start;
}

/* ============= scenario demo ============= */
.scenario-demo {
  background: var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: clamp(20px, 3vw, 28px);
  display: grid;
  grid-template-columns: 0.42fr 0.58fr;
  gap: 28px;
  align-items: stretch;
}
@media (max-width: 880px) { .scenario-demo { grid-template-columns: 1fr; } }
.scenario-demo__controls { display: grid; gap: 22px; align-content: start; }
.scenario-demo__field {
  display: grid; gap: 10px;
}
.scenario-demo__label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
  display: flex; justify-content: space-between;
}
.scenario-demo__label b {
  color: var(--brand-1);
  font-weight: 500;
  font-family: var(--font-mono);
}
.scenario-demo__slider {
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 3px;
  background: var(--ink-600);
  outline: none;
}
.scenario-demo__slider::-webkit-slider-thumb {
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--brand-grad);
  cursor: grab;
  box-shadow: 0 0 0 4px rgba(255,45,117,0.18);
}
.scenario-demo__slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border: 0;
  border-radius: 50%;
  background: var(--brand-1);
  cursor: grab;
}
.scenario-demo__output {
  background: var(--ink-900);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  padding: 18px;
  position: relative;
  overflow: hidden;
}
.scenario-demo__formula {
  font-family: var(--font-mono);
  color: var(--accent);
  font-size: 12px;
  letter-spacing: 0.04em;
  margin-block-end: 12px;
}

/* ============= about ============= */
.about-hero {
  padding-block: var(--hero-eyebrow-top) clamp(64px, 10vh, 128px);
  position: relative;
  overflow: hidden;
}
.about-hero h1 {
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.about-hero h1 em {
  font-style: italic;
  font-size: 1.06em;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 380;
  padding-inline: 0.06em 0.04em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============= form ============= */
.form-card {
  background: var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: clamp(28px, 4vw, 44px);
  display: grid;
  gap: 18px;
}
.form-row { display: grid; gap: 8px; }
.form-row label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-3);
}
.form-row input, .form-row select, .form-row textarea {
  font: inherit;
  font-size: 15px;
  padding: 12px 14px;
  background: var(--ink-900);
  border: 1px solid var(--line-2);
  border-radius: var(--r-2);
  color: var(--text-1);
  width: 100%;
  transition: border-color 160ms;
}
.form-row textarea { min-height: 120px; resize: vertical; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
  outline: none;
  border-color: var(--brand-1);
}
.form-row--two { grid-template-columns: 1fr 1fr; gap: 16px; }
.form-row--two > div { display: grid; gap: 8px; }
@media (max-width: 540px) { .form-row--two { grid-template-columns: 1fr; } }
.honeypot { position: absolute !important; left: -10000px !important; }

/* ============= 404 ============= */
.error-page {
  min-height: 80vh;
  display: grid;
  place-items: center;
  text-align: center;
  padding-block: 160px;
}
.error-page h1 { font-size: clamp(80px, 14vw, 200px); line-height: 1; margin-block-end: 18px; }
.error-page h1 em {
  font-style: italic;
  /* Inline padding gives the italic "0" in "404" room before
     background-clip: text stops painting at the box edge. Right side
     gets more because italic leans right at the top — the lean extends
     further past the box edge on the right than the left. */
  padding-inline: 0.04em 0.08em;
  background: var(--brand-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ============= validations index ============= */
.val-list {
  display: grid;
  gap: 18px;
}
.val-row {
  display: grid;
  grid-template-columns: 1fr 1.2fr auto;
  gap: 32px;
  align-items: center;
  padding: 28px 32px;
  background: var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  transition: border-color 200ms, transform 200ms var(--ease-out);
}
.val-row:hover { border-color: rgba(255,45,117,0.3); transform: translateY(-1px); }
.val-row__title {
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 470;
  font-size: 28px;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.val-row__sub {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--text-2);
  margin-block-start: 10px;
}
.val-row__head {
  font-family: var(--font-body);
  font-size: clamp(16px, 1.3vw, 18px);
  line-height: 1.5;
  letter-spacing: -0.005em;
  color: var(--text-1);
}
@media (max-width: 880px) {
  .val-row { grid-template-columns: 1fr; }
}

/* ============= pricing posture (studio) ============= */
.posture {
  padding: 36px;
  background:
    radial-gradient(50% 100% at 100% 0%, rgba(255,45,117,0.15), transparent 60%),
    var(--ink-800);
  border: 1px solid var(--line-2);
  border-radius: var(--r-3);
}

/* ============= use-case detail page ============= */
.uc-hero { padding-block: var(--hero-eyebrow-top) clamp(48px, 8vh, 96px); position: relative; overflow: hidden; }
.uc-hero h1 {
  font-size: clamp(36px, 4.4vw, 60px);
  line-height: 1.12;
  letter-spacing: -0.03em;
}
.uc-hero__pain {
  display: inline-block;
  font-family: var(--font-display);
  font-style: italic;
  font-variation-settings: "opsz" 144, "SOFT" 50, "wght" 360;
  font-size: clamp(24px, 2.6vw, 36px);
  line-height: 1.3;
  letter-spacing: -0.01em;
  color: var(--brand-1);
  margin: 0;
}
.pricing-do {
  font-family: var(--font-mono);
  font-style: normal;
  font-weight: 500;
  font-size: 0.92em;
  letter-spacing: 0;
}
.display-2 .pricing-do,
.cta-band h2 .pricing-do {
  font-size: 0.9em;
}
.lede .pricing-do,
.card__body .pricing-do {
  font-size: 0.9em;
}

/* ============= concept workflow panel ============= */
.concept-workflow-section { padding-top: 0; }
.concept-workflow {
  display: grid;
  grid-template-columns: minmax(300px, 0.9fr) minmax(0, 1.35fr);
  gap: 0;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  overflow: hidden;
}
.concept-workflow__controls,
.concept-workflow__readout {
  padding: clamp(20px, 2.5vw, 28px);
}
.concept-workflow__controls {
  display: grid;
  gap: 26px;
  align-content: start;
  border-inline-end: 1px solid var(--line-1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 55%),
    var(--ink-800);
}
.concept-workflow__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.concept-workflow__choices {
  display: grid;
  gap: 10px;
}
.concept-workflow__choices--audience {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
.concept-workflow__choices--audience .concept-choice {
  align-content: start;
  min-height: 76px;
}
.concept-choice {
  display: grid;
  gap: 5px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  background: rgba(255,255,255,0.025);
  color: var(--text-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  transition: border-color 180ms, background 180ms, color 180ms, transform 180ms var(--ease-out);
}
.concept-choice:hover {
  color: var(--text-1);
  border-color: var(--line-3);
  background: rgba(255,255,255,0.045);
  transform: translateY(-1px);
}
.concept-choice.is-active,
.concept-choice[aria-pressed="true"] {
  color: var(--text-1);
  border-color: rgba(255,45,117,0.42);
  background: rgba(255,45,117,0.08);
}
.concept-choice span {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.concept-choice small {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
}
.concept-workflow__mix {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}
.concept-mix {
  min-height: 44px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  color: var(--text-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-align: center;
  transition: border-color 180ms, background 180ms, color 180ms;
}
.concept-mix:hover {
  color: var(--text-1);
  border-color: var(--line-3);
}
.concept-mix.is-active,
.concept-mix[aria-pressed="true"] {
  color: var(--text-1);
  border-color: rgba(255,45,117,0.42);
  background: rgba(255,45,117,0.08);
}
.concept-workflow .move-field__label { align-items: center; }
.concept-workflow .move-field__label b {
  color: var(--brand-1);
  font-size: clamp(17px, 1.45vw, 21px);
  line-height: 1;
  letter-spacing: 0;
}
.concept-workflow__slider {
  background: linear-gradient(90deg, rgba(255,45,117,0.62), rgba(255,255,255,0.20));
}
.concept-workflow__hint,
.concept-workflow__note {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.concept-workflow__readout {
  display: grid;
  grid-template-rows: auto auto auto auto auto auto minmax(0, 1fr);
  gap: 12px;
  align-content: start;
}
.concept-workflow__note { align-self: end; }
.concept-workflow__readout-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-1);
}
.concept-workflow__readout-head > span:last-child {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-3);
}
.concept-workflow__summary {
  max-width: 62ch;
  font-family: var(--font-display);
  font-size: clamp(23px, 2vw, 29px);
  line-height: 1.14;
  letter-spacing: 0;
  color: var(--text-1);
}
.concept-workflow__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  overflow: hidden;
}
.concept-workflow__kpis > div {
  display: grid;
  gap: 10px;
  padding: 16px;
  background: rgba(7,9,15,0.72);
}
.concept-workflow__kpis dt,
.concept-workflow__outputs dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-1);
}
.concept-workflow__kpis dd {
  display: grid;
  gap: 5px;
  margin: 0;
}
.concept-workflow__kpis dd span {
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  color: var(--text-1);
  white-space: nowrap;
}
.concept-workflow__kpis dd small {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  white-space: nowrap;
}
.workflow-population {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  overflow: hidden;
}
.workflow-population > div {
  display: grid;
  gap: 5px;
  padding: 12px 14px;
  background: rgba(7,9,15,0.72);
}
.workflow-population span,
.workflow-cuts__head {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text-3);
}
.workflow-population b {
  min-width: 0;
  color: var(--text-1);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.35;
}
.workflow-cascade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}
.workflow-cascade--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.workflow-card {
  display: grid;
  gap: 7px;
  min-width: 0;
  padding: 11px;
  background: rgba(7,9,15,0.72);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
}
.workflow-card.is-active {
  border-color: rgba(78,224,224,0.36);
  background:
    linear-gradient(180deg, rgba(78,224,224,0.055), transparent 70%),
    rgba(7,9,15,0.72);
}
.workflow-card__title {
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.25;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.76);
}
.workflow-card__rows {
  display: grid;
  gap: 0;
}
.workflow-dist-row,
.workflow-cuts__head,
.workflow-cut-row {
  display: grid;
  grid-template-columns: minmax(84px, 0.82fr) minmax(88px, 1fr) max-content;
  gap: 12px;
  align-items: center;
}
.workflow-cuts__head span:last-child {
  text-align: center;
}
.workflow-dist-row,
.workflow-cut-row {
  padding-block: 5px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  color: var(--text-2);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
}
.workflow-dist-row:last-child,
.workflow-cut-row:last-child {
  border-bottom: 0;
}
.workflow-dist-row > span,
.workflow-cut-row > span {
  min-width: 0;
  overflow: visible;
  text-overflow: clip;
  white-space: normal;
  line-height: 1.25;
}
.workflow-dist-row i,
.workflow-cut-row i {
  position: relative;
  display: block;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,0.055);
  overflow: hidden;
}
.workflow-dist-row em,
.workflow-cut-row em {
  display: block;
  width: var(--w, 0%);
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, rgba(78,224,224,0.92), rgba(78,224,224,0.54));
  transition: width 260ms var(--ease-out);
}
.workflow-dist-row--mid em {
  background: linear-gradient(90deg, rgba(255,255,255,0.58), rgba(255,255,255,0.28));
}
.workflow-dist-row--low em {
  background: linear-gradient(90deg, rgba(255,45,117,0.66), rgba(255,45,117,0.30));
}
.workflow-dist-row b,
.workflow-cut-row b {
  color: var(--text-1);
  font-weight: 500;
  text-align: right;
  white-space: nowrap;
}
.workflow-cuts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  overflow: hidden;
}
.workflow-cuts__head,
.workflow-cut-row {
  background: rgba(7,9,15,0.72);
}
.workflow-cuts__head {
  grid-column: 1 / -1;
  padding: 11px 16px;
}
.workflow-cut-row {
  grid-template-columns: minmax(0, 1fr) max-content;
  padding: 10px 16px;
  transition: background 180ms, color 180ms;
}
.workflow-cut-row i {
  grid-column: 1 / -1;
}
.workflow-cut-row.is-active {
  color: var(--text-1);
  background: rgba(78,224,224,0.075);
}
.concept-effects {
  display: grid;
  gap: 1px;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  overflow: hidden;
}
.concept-effects__head,
.concept-effect {
  display: grid;
  grid-template-columns: minmax(150px, 1.1fr) minmax(120px, 1fr) max-content;
  gap: 16px;
  align-items: center;
  background: rgba(7,9,15,0.72);
}
.concept-effects__head {
  padding: 14px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
}
.concept-effects__head span:last-child {
  text-align: right;
  grid-column: 2 / 4;
}
.concept-effect {
  padding: 14px 18px;
  color: var(--text-2);
  transition: background 180ms, color 180ms;
}
.concept-effect.is-active {
  color: var(--text-1);
  background: rgba(255,45,117,0.08);
}
.concept-effect span {
  font-size: 14.5px;
  line-height: 1.35;
}
.concept-effect i {
  position: relative;
  display: block;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,255,255,0.10), rgba(255,255,255,0.24), rgba(255,255,255,0.10));
}
.concept-effect i::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -5px;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.16);
}
.concept-effect i::after {
  content: "";
  position: absolute;
  left: var(--x);
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--brand-1);
  border: 2px solid white;
  transform: translate(-50%, -50%);
}
.concept-effect b {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-1);
  white-space: nowrap;
}
.concept-workflow__outputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  overflow: hidden;
}
.concept-workflow__outputs > div {
  display: grid;
  gap: 6px;
  padding: 13px;
  background: rgba(7,9,15,0.72);
}
.concept-workflow__outputs dd {
  margin: 0;
  color: var(--text-2);
  font-size: 13.5px;
  line-height: 1.4;
}
@media (max-width: 980px) {
  .concept-workflow { grid-template-columns: 1fr; }
  .concept-workflow__controls { border-inline-end: 0; border-block-end: 1px solid var(--line-1); }
  .concept-workflow__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .workflow-cascade--three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .concept-workflow__readout-head { display: grid; }
  .concept-workflow__kpis,
  .workflow-population,
  .workflow-cascade,
  .workflow-cuts,
  .concept-workflow__outputs { grid-template-columns: 1fr; }
  .concept-workflow__choices--audience { grid-template-columns: 1fr; }
  .concept-effects__head { display: none; }
  .concept-effect { grid-template-columns: 1fr; gap: 10px; }
  .workflow-cuts__head { display: none; }
  .workflow-cut-row { grid-template-columns: 1fr minmax(0, 1fr) max-content; }
  .workflow-cut-row i { grid-column: auto; }
}

/* ============= segmentation workflow panel ============= */
.segment-workflow-section { padding-top: 0; }
.segment-workflow {
  grid-template-columns: minmax(280px, 0.75fr) minmax(0, 1.55fr);
}
.segment-workflow .concept-workflow__controls { gap: 22px; }
.segment-workflow__segments .concept-choice { min-height: 78px; }
.segment-workflow__outcomes {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.segment-outcome {
  min-height: 46px;
  letter-spacing: 0;
}
.segment-workflow .concept-workflow__summary {
  max-width: 54ch;
  font-size: clamp(23px, 2.1vw, 31px);
}
.segment-workflow .concept-workflow__kpis dd span {
  font-size: clamp(20px, 1.75vw, 27px);
}
@media (max-width: 980px) {
  .segment-workflow { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .segment-workflow__outcomes { grid-template-columns: 1fr; }
}

/* ============= pricing workflow panel ============= */
.pricing-workflow-section { padding-top: 0; }
.pricing-workflow {
  display: grid;
  grid-template-columns: minmax(280px, 0.82fr) minmax(0, 1.45fr);
  gap: 0;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  overflow: hidden;
}
.pricing-workflow__controls,
.pricing-workflow__readout {
  padding: clamp(22px, 3vw, 34px);
}
.pricing-workflow__controls {
  display: grid;
  gap: 28px;
  align-content: start;
  border-inline-end: 1px solid var(--line-1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 55%),
    var(--ink-800);
}
.pricing-workflow__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.pricing-workflow__choices {
  display: grid;
  gap: 10px;
}
.pricing-choice {
  display: grid;
  gap: 5px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  background: rgba(255,255,255,0.025);
  color: var(--text-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  transition: border-color 180ms, background 180ms, color 180ms, transform 180ms var(--ease-out);
}
.pricing-choice:hover {
  color: var(--text-1);
  border-color: var(--line-3);
  background: rgba(255,255,255,0.045);
  transform: translateY(-1px);
}
.pricing-choice.is-active,
.pricing-choice[aria-pressed="true"] {
  color: var(--text-1);
  border-color: rgba(255,45,117,0.42);
  background: rgba(255,45,117,0.08);
}
.pricing-choice span {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: 0;
}
.pricing-choice small {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
}
.pricing-workflow__hint,
.pricing-workflow__note {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.pricing-workflow__readout {
  display: grid;
  gap: 22px;
  align-content: start;
}
.pricing-workflow__readout-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-1);
}
.pricing-workflow__readout-head > span:last-child {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-3);
}
.pricing-workflow__summary {
  max-width: 62ch;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.14;
  letter-spacing: 0;
  color: var(--text-1);
}
.pricing-curve {
  margin: 0;
  padding: 18px;
  background: rgba(7,9,15,0.58);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
}
.pricing-curve svg {
  width: 100%;
  height: auto;
  overflow: visible;
}
.pricing-curve__axis {
  stroke: rgba(255,255,255,0.16);
  stroke-width: 1;
}
.pricing-curve__axis--x,
.pricing-curve__axis--y {
  stroke: rgba(255,255,255,0.34);
  stroke-width: 1.25;
}
.pricing-curve__axis-tip {
  fill: rgba(255,255,255,0.34);
}
.pricing-curve__baseline,
.pricing-curve__scenario {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.pricing-curve__baseline {
  stroke: rgba(255,255,255,0.24);
  stroke-width: 2;
  stroke-dasharray: 5 7;
}
.pricing-curve__scenario {
  stroke: var(--accent);
  stroke-width: 3;
  filter: drop-shadow(0 0 10px rgba(78,224,224,0.22));
  transition: points 220ms var(--ease-out);
}
.pricing-curve__dot {
  fill: var(--brand-1);
  stroke: white;
  stroke-width: 2;
  transition: cx 220ms var(--ease-out), cy 220ms var(--ease-out);
}
.pricing-curve text {
  fill: var(--text-3);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.pricing-curve .pricing-curve__y-label {
  fill: var(--text-2);
  font-size: 10.5px;
}
.pricing-workflow__kpis {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  overflow: hidden;
}
.pricing-workflow__kpis > div {
  display: grid;
  gap: 8px;
  padding: 16px;
  background: rgba(7,9,15,0.72);
}
.pricing-workflow__kpis dt,
.pricing-workflow__outputs dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--brand-1);
}
.pricing-workflow__kpis dd {
  margin: 0;
  font-family: var(--font-mono);
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  color: var(--text-1);
}
.pricing-workflow__outputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  overflow: hidden;
}
.pricing-workflow__outputs > div {
  display: grid;
  gap: 8px;
  padding: 18px;
  background: rgba(7,9,15,0.72);
}
.pricing-workflow__outputs dd {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.5;
}
@media (max-width: 980px) {
  .pricing-workflow { grid-template-columns: 1fr; }
  .pricing-workflow__controls { border-inline-end: 0; border-block-end: 1px solid var(--line-1); }
  .pricing-workflow__kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .pricing-workflow__readout-head { display: grid; }
  .pricing-workflow__kpis,
  .pricing-workflow__outputs { grid-template-columns: 1fr; }
}

/* ============= brand-tracker workflow panel ============= */
.tracker-workflow-section { padding-top: 0; }
.tracker-workflow {
  display: grid;
  grid-template-columns: minmax(280px, 0.85fr) minmax(0, 1.4fr);
  gap: 0;
  background: linear-gradient(180deg, var(--ink-800), var(--ink-900));
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  overflow: hidden;
}
.tracker-workflow__controls,
.tracker-workflow__readout {
  padding: clamp(22px, 3vw, 34px);
}
.tracker-workflow__controls {
  display: grid;
  gap: 28px;
  align-content: start;
  border-inline-end: 1px solid var(--line-1);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.025), transparent 55%),
    var(--ink-800);
}
.tracker-workflow__label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 12px;
}
.tracker-workflow__choices {
  display: grid;
  gap: 10px;
}
.tracker-choice {
  display: grid;
  gap: 5px;
  width: 100%;
  text-align: left;
  padding: 13px 14px;
  background: rgba(255,255,255,0.025);
  color: var(--text-2);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  transition: border-color 180ms, background 180ms, color 180ms, transform 180ms var(--ease-out);
}
.tracker-choice:hover {
  color: var(--text-1);
  border-color: var(--line-3);
  background: rgba(255,255,255,0.045);
  transform: translateY(-1px);
}
.tracker-choice.is-active,
.tracker-choice[aria-pressed="true"] {
  color: var(--text-1);
  border-color: rgba(78,224,224,0.42);
  background: rgba(78,224,224,0.08);
}
.tracker-choice span {
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
}
.tracker-choice small {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-3);
}
.tracker-workflow__slider {
  background: linear-gradient(90deg, rgba(78,224,224,0.58), rgba(255,255,255,0.20));
}
.tracker-workflow__slider::-webkit-slider-thumb {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(78,224,224,0.20), 0 2px 6px rgba(0,0,0,0.4);
}
.tracker-workflow__slider::-moz-range-thumb {
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(78,224,224,0.20), 0 2px 6px rgba(0,0,0,0.4);
}
.tracker-workflow .move-field__label b { color: var(--accent); }
.tracker-workflow__hint,
.tracker-workflow__note {
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--text-2);
}
.tracker-workflow__readout {
  display: grid;
  gap: 22px;
  align-content: start;
}
.tracker-workflow__readout-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: baseline;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line-1);
}
.tracker-workflow__readout-head > span:last-child {
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text-3);
}
.tracker-workflow__summary {
  max-width: 58ch;
  font-family: var(--font-display);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.14;
  letter-spacing: -0.02em;
  color: var(--text-1);
}
.tracker-workflow__meters {
  display: grid;
  gap: 14px;
}
.tracker-meter {
  display: grid;
  gap: 9px;
}
.tracker-meter__top {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-2);
}
.tracker-meter__top b {
  color: var(--text-1);
  font-weight: 500;
}
.tracker-meter__bar {
  display: block;
  width: var(--w);
  min-width: 34px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.12);
  transition: width 220ms var(--ease-out);
}
.tracker-meter--boosted .tracker-meter__bar {
  background: linear-gradient(90deg, rgba(78,224,224,0.70), rgba(92,61,255,0.58));
  border-color: rgba(78,224,224,0.32);
}
.tracker-workflow__outputs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  background: var(--line-1);
  border: 1px solid var(--line-1);
  border-radius: var(--r-2);
  overflow: hidden;
}
.tracker-workflow__outputs > div {
  display: grid;
  gap: 8px;
  padding: 18px;
  background: rgba(7,9,15,0.72);
}
.tracker-workflow__outputs dt {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
}
.tracker-workflow__outputs dd {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.5;
}
@media (max-width: 980px) {
  .tracker-workflow { grid-template-columns: 1fr; }
  .tracker-workflow__controls { border-inline-end: 0; border-block-end: 1px solid var(--line-1); }
}
@media (max-width: 720px) {
  .tracker-workflow__readout-head { display: grid; }
  .tracker-workflow__outputs { grid-template-columns: 1fr; }
}

/* ============= API code tabs ============= */
.code-tabs {
  background: var(--ink-1000);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  overflow: hidden;
}
.code-tabs__bar {
  display: flex; gap: 0;
  border-block-end: 1px solid var(--line-1);
  background: var(--ink-900);
}
.code-tabs__tab {
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--text-3);
  background: transparent;
  border: 0;
  border-block-end: 2px solid transparent;
  cursor: pointer;
  transition: color 160ms, border-color 160ms;
}
.code-tabs__tab[aria-selected="true"] {
  color: var(--text-1);
  border-block-end-color: var(--brand-1);
}
.code-tabs__panel {
  padding: 22px 24px;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-2);
  overflow-x: auto;
}
.code-tabs__panel pre { margin: 0; }
.code-tabs__panel .k { color: #e98ed1; }
.code-tabs__panel .s { color: #a0e6c0; }
.code-tabs__panel .c { color: var(--text-3); font-style: italic; }
.code-tabs__panel .n { color: #f0b53a; }
.code-tabs__panel[hidden] { display: none; }

/* ============= manifold viz ============= */
.manifold-viz {
  background: var(--paper-100);
  border: 1px solid var(--paper-200);
  border-radius: var(--r-3);
  padding: 36px;
  position: relative;
  overflow: hidden;
}
.manifold-viz__caption {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--paper-ink-2);
  letter-spacing: 0.04em;
}
.manifold-viz svg { width: 100%; height: auto; }

/* ============= interactive manifold explorer ============= */
.manifold-explorer {
  display: grid;
  grid-template-columns: 260px 1fr 280px;
  grid-template-areas:
    "kc kv kr"
    "c  v  r";
  column-gap: 24px;
  row-gap: 14px;
  align-items: start;
  background: linear-gradient(135deg, rgba(14,18,32,0.96), rgba(20,22,40,0.96));
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-3);
  padding: 18px 28px 28px;
  position: relative;
  overflow: hidden;
  color: rgba(255,255,255,0.92);
}
.manifold-explorer__kicker--controls { grid-area: kc; }
.manifold-explorer__kicker--viz      { grid-area: kv; }
.manifold-explorer__kicker--response { grid-area: kr; }
.manifold-explorer__controls         { grid-area: c; }
.manifold-explorer__viz              { grid-area: v; }
.manifold-explorer__response-col     { grid-area: r; }
@media (max-width: 1100px) {
  .manifold-explorer {
    grid-template-columns: 1fr;
    grid-template-areas:
      "kc"
      "c"
      "kv"
      "v"
      "kr"
      "r";
  }
}

/* controls column */
.manifold-explorer__controls { display: flex; flex-direction: column; gap: 18px; }
.manifold-explorer__intro { font-size: 15px; line-height: 1.55; color: rgba(255,255,255,0.78); margin: 0; }
.manifold-explorer .eyebrow--inline,
.manifold-explorer__kicker {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #FF2D75;
  margin: 0;
}
.manifold-explorer__field { display: flex; flex-direction: column; gap: 6px; }
.manifold-explorer__field label {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.manifold-explorer__field input[type=range] {
  width: 100%;
  accent-color: #FF2D75;
}
.manifold-explorer__field-val {
  font-family: var(--font-mono);
  font-size: 15px;
  color: white;
  letter-spacing: 0.04em;
}
.manifold-explorer__field-val span { color: white; font-weight: 600; }

.manifold-explorer__legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  margin-top: 12px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
}
.manifold-explorer__legend .dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  vertical-align: middle;
}
.manifold-explorer__legend .dot--obs    { background: rgba(255,255,255,0.55); }
.manifold-explorer__legend .dot--near   { background: #4EE0E0; }
.manifold-explorer__legend .dot--cursor { background: #4EE0E0; box-shadow: 0 0 0 2px rgba(78,224,224,0.35); }

/* scatter column */
.manifold-explorer__viz { position: relative; min-width: 0; }
.manifold-explorer__viz svg {
  width: 100%;
  height: auto;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--r-2);
}
.manifold-explorer__hint {
  margin-top: 10px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: rgba(255,255,255,0.5);
  letter-spacing: 0.04em;
}
.manifold-explorer__dot {
  cursor: pointer;
  transition: r 120ms ease, fill 120ms ease;
}
.manifold-explorer__dot:hover {
  fill: white !important;
  r: 6 !important;
}

/* output column */
.manifold-explorer__response-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.manifold-explorer__output {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: var(--r-2);
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-size: 14.5px;
  line-height: 1.55;
  transition: border-color 200ms ease;
}
.manifold-explorer__output[data-state=ok]            { border-color: rgba(78,224,224,0.45); }
.manifold-explorer__output[data-state=refused-hard]   { border-color: rgba(255,92,92,0.45); }
.manifold-explorer__output[data-state=partial-evidence] { border-color: rgba(255,184,107,0.48); }

/* The title is the colored column header for the response card: state
   color carries the status (cyan / amber / red), centered text with a
   thin underline rule reinforces the "header for this column" read.
   Replaces the previous pill-badge + plain-title pair, which were
   communicating the same state in two stacked elements. */
.manifold-explorer__title {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
  margin: 0 0 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  color: white;
  word-break: break-word;
  transition: color 200ms ease, border-color 200ms ease;
}
.manifold-explorer__output[data-state=ok] .manifold-explorer__title {
  color: #4EE0E0;
  border-bottom-color: rgba(78,224,224,0.45);
}
.manifold-explorer__output[data-state=refused-hard] .manifold-explorer__title {
  color: #FF5C5C;
  border-bottom-color: rgba(255,92,92,0.45);
}
.manifold-explorer__output[data-state=partial-evidence] .manifold-explorer__title {
  color: #FFB86B;
  border-bottom-color: rgba(255,184,107,0.48);
}
/* The explorer keeps its dark theme even when nested in a paper section,
   so override the .section--paper h3 cascade that would otherwise paint
   the title in paper-ink. The state rules above still win via specificity. */
.section--paper .manifold-explorer__title { color: white; }
.manifold-explorer__reason {
  color: rgba(255,255,255,0.78);
  margin: 0;
  font-size: 14px;
}
.manifold-explorer__row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
  margin: 4px 0 0;
  font-size: 14px;
}
.manifold-explorer__row dt {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  align-self: center;
}
.manifold-explorer__row dd {
  margin: 0;
  color: white;
  font-size: 14px;
}
.manifold-explorer__footnote {
  font-size: 13px;
  color: rgba(255,255,255,0.6);
  border-top: 1px solid rgba(255,255,255,0.08);
  padding-top: 10px;
  margin: 4px 0 0;
}

/* hover tooltip for observed records */
.manifold-explorer__tip {
  position: fixed;
  display: none;
  background: rgba(14,18,32,0.96);
  border: 1px solid rgba(255,45,117,0.4);
  border-radius: var(--r-2);
  padding: 10px 12px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: rgba(255,255,255,0.85);
  pointer-events: none;
  z-index: 9999;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.manifold-explorer__tip-title {
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #FF2D75;
  margin-bottom: 6px;
}
.manifold-explorer__tip-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 2px 0;
}
.manifold-explorer__tip-row span:first-child { color: rgba(255,255,255,0.5); }

/* ============= paper-context card--feature (auto-adapt when placed
   inside a .section--paper). Same card markup, light-context palette. */
.section--paper .card.card--feature {
  background:
    radial-gradient(120% 80% at 20% 0%, rgba(255,45,117,0.06), transparent 60%),
    linear-gradient(180deg, white, var(--paper-100) 100%);
  border-color: var(--paper-200);
  color: var(--paper-ink);
}
.section--paper .card.card--feature:hover {
  border-color: rgba(255,45,117,0.42);
}
.section--paper .card.card--feature h3 { color: var(--paper-ink); }
.section--paper .card.card--feature .card__body { color: var(--paper-ink-2); }

/* ============= rows-as-loose-columns diagram =============
   Asymmetric Act-1 layout: eyebrow + H2 anchor the top-left, then the
   lede + epilogue (body) and the stacked panels (right) begin together
   on the next row. Panels deliberately start *below* the H2 line so
   the H2 reads as a one-line header into the figure pair, not as a
   competing column. Collapses to a single column on tablet. */
.rows-diagram-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  grid-template-areas:
    "header  header"
    "body    panels";
  column-gap: clamp(36px, 5vw, 80px);
  row-gap: 32px;
  align-items: start;
}
.rows-diagram-layout__header { grid-area: header; display: grid; gap: 14px; }
.rows-diagram-layout__body { grid-area: body; display: grid; gap: 18px; }
.rows-diagram-layout .rows-diagram {
  grid-area: panels;
  /* Push panels down so the card's top border aligns with the lede's
     first text line, not the panel padding leaving the H3 to sit
     visually below the lede. */
  margin-block-start: 12px;
}
@media (max-width: 880px) {
  .rows-diagram-layout {
    grid-template-columns: 1fr;
    grid-template-areas:
      "header"
      "body"
      "panels";
    row-gap: 28px;
  }
  .rows-diagram-layout .rows-diagram { margin-block-start: 0; }
}
.rows-diagram {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
}
.rows-diagram__panel {
  background: var(--ink-800);
  border: 1px solid var(--line-1);
  border-radius: var(--r-3);
  padding: 26px 28px 28px;
  display: grid;
  gap: 14px;
}
/* Internal pairings: H3 + intro caption read as a unit; outcome caption
   hugs the data row. The 14px base gap gives the data row breathing
   room as the central exhibit. */
.rows-diagram__panel h3 + .mono { margin-block-start: -6px; }
.rows-diagram__panel .rows-diagram__row + .mono { margin-block-start: -2px; }
.rows-diagram__panel--good {
  border-color: rgba(78,224,224,0.32);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(78,224,224,0.08), transparent 60%),
    var(--ink-800);
}
.rows-diagram__panel--bad {
  border-color: rgba(255,92,92,0.24);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255,92,92,0.06), transparent 60%),
    var(--ink-800);
}
.rows-diagram__row {
  font-family: var(--font-mono);
  font-size: 14px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 12px 14px;
  border-radius: var(--r-2);
  background: var(--ink-900);
  border: 1px solid var(--line-1);
}
.rows-diagram__row span:first-child { color: var(--text-3); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; }

.rows-diagram__epilogue {
  margin: 0;
  color: var(--text-2);
  font-size: clamp(19px, 1.5vw, 23px);
  line-height: 1.55;
}

/* ============= response-surface follow-up: inference safety as subsection
   Sits flush in the .section--paper background. Pure typography, paper-ink
   throughout for accessibility. The rules render in a light Z-form
   (alternating column placement) to give the subsection its own visual
   rhythm without reusing the card grid pattern that follows in the
   validation philosophy section. */
.surface-safety {
  margin-top: clamp(36px, 5vh, 56px);
  padding-top: clamp(28px, 4vh, 44px);
  border-top: 1px solid var(--paper-200);
}
.surface-safety__title {
  margin: 0;
  font-family: var(--font-display);
  font-variation-settings: 'opsz' 144, 'wght' 460;
  font-size: clamp(24px, 2.6vw, 32px);
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--paper-ink);
  max-width: 28ch;
}
.surface-safety__lede {
  margin: 12px 0 0;
  max-width: 72ch;
  color: var(--paper-ink-2);
  font-size: 17px;
  line-height: 1.55;
}

/* Two-column layout: one substantive boundary diagram + prose rules with
   bold leads. Differentiated from the validation card grid below: this
   subsection has no card chrome, just typography + a single figure. */
.surface-safety__layout {
  margin-top: clamp(18px, 2.8vh, 28px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 880px) {
  .surface-safety__layout { grid-template-columns: 1fr; }
}

.surface-safety__rules {
  display: grid;
  gap: 14px;
}
.surface-safety__intro {
  margin: 0;
  color: var(--paper-ink);
  font-size: 16px;
  line-height: 1.55;
  font-weight: 500;
}
.surface-safety__list {
  list-style: decimal;
  margin: 0;
  padding-left: 1.5em;
  display: grid;
  gap: 14px;
  color: var(--paper-ink-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.surface-safety__list li::marker {
  color: var(--paper-ink-2);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.surface-safety__list b {
  color: var(--paper-ink);
  font-weight: 600;
}

/* Boundary diagrams — schema gate first, return behavior second. */
.boundary-diagram {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.boundary-diagram__stack {
  display: grid;
  gap: 8px;
}
.boundary-diagram__svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 560px;
}
.boundary-diagram__caption {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--paper-ink-2);
  max-width: 52ch;
}
.bd-envelope-label {
  fill: var(--paper-ink-2);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bd-schema {
  fill: rgba(21,23,31,0.025);
  stroke: var(--paper-200);
  stroke-width: 1.5;
}
.bd-schema-note {
  fill: var(--paper-ink-2);
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.02em;
}
.bd-field-pill rect {
  fill: rgba(78,224,224,0.10);
  stroke: rgba(20,142,142,0.45);
  stroke-width: 1.2;
}
.bd-field-pill text {
  fill: var(--paper-ink);
  font-family: var(--font-mono);
  font-size: 10.8px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.bd-blocked rect {
  fill: rgba(255,92,92,0.11);
  stroke: rgba(179,23,63,0.50);
  stroke-width: 1.4;
}
.bd-state rect {
  fill: white;
  stroke-width: 1.4;
}
.bd-state--ok rect {
  fill: rgba(78,224,224,0.10);
  stroke: rgba(20,142,142,0.55);
}
.bd-state--thin rect {
  fill: rgba(255,184,107,0.16);
  stroke: rgba(178,111,21,0.55);
}
.bd-state--refuse rect {
  fill: rgba(255,92,92,0.11);
  stroke: rgba(179,23,63,0.50);
}
.bd-state__label {
  fill: var(--paper-ink);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.bd-state__metric {
  fill: var(--paper-ink);
  font-family: var(--font-display);
  font-size: 23px;
  font-weight: 520;
}
.bd-state__body {
  fill: var(--paper-ink-2);
  font-family: var(--font-mono);
  font-size: 10.8px;
  letter-spacing: 0.03em;
}

/* ============= response-structure explainer ============= */
.response-model-intro {
  display: grid;
  gap: clamp(26px, 3vw, 36px);
  margin-block-end: clamp(28px, 4vw, 44px);
}
.response-model-intro .section-head { margin-block-end: 0; }
.response-model-notes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(22px, 3vw, 36px);
}
@media (max-width: 880px) {
  .response-model-notes { grid-template-columns: 1fr; }
}
.response-model-notes p {
  margin: 0;
  padding-inline-start: 18px;
  border-inline-start: 1px solid rgba(255,255,255,0.14);
  color: var(--text-2);
  font-size: 15.5px;
  line-height: 1.6;
}
.response-model-notes b { color: var(--text-1); font-weight: 650; }

.section-head--method-compare > h2 { max-width: 22ch; }
.section-head--method-compare > .lede { max-width: 84ch; }

.response-flow {
  margin: 0;
  border: 1px solid rgba(255,255,255,0.11);
  border-radius: var(--r-2);
  background:
    radial-gradient(circle at 88% 14%, rgba(78,224,224,0.10), transparent 38%),
    linear-gradient(140deg, rgba(18,22,38,0.98), rgba(9,12,22,0.98));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 24px 70px rgba(0,0,0,0.28);
  padding: clamp(18px, 2vw, 26px) clamp(24px, 2.6vw, 36px) clamp(24px, 2.6vw, 36px);
}
.response-flow__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  margin-block: 0 18px;
  max-width: 100%;
  position: relative;
}
/* One-time scroll cue for the method tabs. The selected tab already has
   its own underline glow, so the sweep runs only across the other tabs.
   That keeps Compare from getting a double-glow on first load. */
.response-flow__tab:nth-child(1) { --tab-led-rgb: 184, 43, 216; }  /* compare — brand violet */
.response-flow__tab:nth-child(2) { --tab-led-rgb: 156, 179, 214; } /* BN — muted steel */
.response-flow__tab:nth-child(3) { --tab-led-rgb: 255, 197, 137; } /* SCM — amber */
.response-flow__tab:nth-child(4) { --tab-led-rgb: 78, 224, 224; }  /* Simulacra — cyan */
.response-flow--tab-sweep .response-flow__tab {
  animation: rfTabLed 800ms cubic-bezier(.2, .68, .18, 1) both;
}
.response-flow--tab-sweep .response-flow__tab[aria-selected="true"] {
  animation: none;
}
.response-flow--tab-sweep .response-flow__tab:nth-child(2) { animation-delay: 0ms; }
.response-flow--tab-sweep .response-flow__tab:nth-child(3) { animation-delay: 280ms; }
.response-flow--tab-sweep .response-flow__tab:nth-child(4) { animation-delay: 560ms; }
@keyframes rfTabLed {
  0% {
    background: radial-gradient(ellipse 125% 180% at 50% 112%, rgba(var(--tab-led-rgb, 78, 224, 224), 0) 0%, transparent 72%);
    box-shadow: 0 0 0 0 transparent;
  }
  34% {
    background: radial-gradient(ellipse 118% 168% at 50% 104%, rgba(var(--tab-led-rgb, 78, 224, 224), 0.14) 0%, transparent 72%);
    box-shadow: 0 12px 22px -24px rgba(var(--tab-led-rgb, 78, 224, 224), 0.28);
  }
  62% {
    background: radial-gradient(ellipse 118% 158% at 50% 96%, rgba(var(--tab-led-rgb, 78, 224, 224), 0.24) 0%, rgba(var(--tab-led-rgb, 78, 224, 224), 0.09) 42%, transparent 76%);
    box-shadow:
      0 12px 26px -21px rgba(var(--tab-led-rgb, 78, 224, 224), 0.34),
      inset 0 -1px 0 rgba(var(--tab-led-rgb, 78, 224, 224), 0.24);
  }
  100% {
    background: radial-gradient(ellipse 125% 180% at 50% 78%, rgba(var(--tab-led-rgb, 78, 224, 224), 0) 0%, transparent 72%);
    box-shadow: 0 0 0 0 transparent;
  }
}
.response-flow__tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: rgba(255,255,255,0.60);
  /* Slight pill radius so the LED-ripple radial gradient doesn't hit
     square corners when lit — the gradient follows the rounded tab
     boundary and the box-shadow halo softens around the curve. */
  border-radius: 10px;
  padding: 0 18px 13px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  position: relative;
  z-index: 1;
  transition: color 180ms ease;
}
.response-flow__tab:hover {
  color: white;
}
.response-flow__tab + .response-flow__tab::before {
  content: "";
  position: absolute;
  inset-block-start: 1px;
  inset-inline-start: 0;
  width: 1px;
  height: 14px;
  background: rgba(255,255,255,0.12);
}
.response-flow__tab::after {
  content: "";
  position: absolute;
  /* Inset slightly so the underline indicator sits inside the tab's
     border-radius rather than overshooting the rounded bottom corners. */
  inset-inline: 6px;
  inset-block-end: 4px;
  height: 2px;
  border-radius: 2px;
  background: transparent;
  transition: background 180ms ease, box-shadow 180ms ease;
}
.response-flow__tab[aria-selected="true"] {
  color: white;
}
.response-flow__tab[aria-selected="true"]::after {
  background: var(--accent);
  box-shadow: 0 0 14px rgba(78,224,224,0.40);
}
.response-flow__tab:focus-visible {
  outline: 2px solid rgba(78,224,224,0.58);
  outline-offset: 6px;
}
.response-flow__scenario {
  display: flex;
  align-items: baseline;
  gap: 16px;
  padding: 0 0 18px;
  margin-block-end: 30px;
  border-block-end: 1px solid rgba(255,255,255,0.11);
}
.response-flow__scenario-eyebrow {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,45,117,0.90);
  flex: 0 0 auto;
}
.response-flow__scenario p {
  margin: 0;
  color: rgba(255,255,255,0.88);
  font-size: 16.5px;
  line-height: 1.5;
}
.response-flow__scenario .mono {
  color: white;
  background: rgba(255,45,117,0.14);
  padding: 1px 0;
  border-radius: 2px;
  /* No horizontal padding or margin so the highlight hugs the text
     exactly — no bleed into adjacent whitespace (the space before
     "income") and no push against bracketing characters (parens
     around "(₹25,000+ Indian rupees)"). box-decoration-break: clone
     keeps the highlight clean across line breaks. */
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.response-flow__split {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr);
  gap: 28px;
  align-items: start;
}
@media (max-width: 880px) {
  .response-flow__split { grid-template-columns: 1fr; }
}
.response-flow__model {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
.response-flow__svg {
  display: block;
  width: 100%;
  height: auto;
}
.response-flow__legend {
  margin: 0;
  font-family: var(--font-body);
  font-size: 14.5px;
  letter-spacing: 0;
  color: rgba(255,255,255,0.66);
  line-height: 1.5;
  max-width: 70ch;
  font-style: italic;
}
.response-flow__legend:empty { display: none; }
.rf-legend__hot {
  color: #FF7DA5;
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 0 4px;
}
/* SCM callout — formula only. The do(...) operation is annotated directly
   on the graph, attached to the income node. */
.rf-scm-callout {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px 16px;
  margin-bottom: 12px;
}
/* Properly tab-aligned equation grid: column 1 holds the LHS (the "ACE ="
   on row 1 and the "−" on row 2) right-aligned, column 2 holds the RHS
   terms. The "−" lines up under the "=" so the equation reads as a
   real two-line math expression. */
.rf-scm-callout__formula {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  column-gap: 8px;
  row-gap: 2px;
  align-items: baseline;
  flex: 1 1 240px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  line-height: 1.5;
}
.rf-scm-callout__formula .rf-eq__lhs {
  color: rgba(255,255,255,0.62);
  text-align: right;
  white-space: nowrap;
}
.rf-scm-callout__formula .rf-eq__term {
  color: white;
  white-space: normal;
}
/* No card chrome on the returns panel — the outer figure card is the
   visible container; the returns panel is just a flex flow inside it.
   This removes the "well-in-card" pattern where a second box sat
   between the tabs and the actual content (BN/SCM/Simulacra returns
   on those tabs, or the 3 columns on Compare). */
.response-flow__returns {
  display: flex;
  flex-direction: column;
  gap: 18px;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 320ms ease, transform 320ms ease;
}
.response-flow__returns--instant {
  transition: none;
}
.response-flow__returns.is-visible {
  opacity: 1;
  transform: translateY(0);
}
.response-flow__caption {
  margin-top: 22px;
  color: rgba(255,255,255,0.74);
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.6;
}
.response-flow__caption em {
  font-style: italic;
  color: white;
}

/* provenance — borrows the validation-page src-line voice (quiet, inline) */
.response-flow__provenance {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.response-flow__provenance.src-line {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 14px;
  align-items: baseline;
}
.response-flow__provenance .src-text {
  flex: 1 1 0;
  min-width: 0;
  color: rgba(255,255,255,0.72);
  font-size: 14.5px;
  line-height: 1.6;
}
.response-flow__provenance .src-text b {
  color: rgba(255,255,255,0.92);
  font-weight: 500;
}
.response-flow__provenance .src-text i {
  color: rgba(255,255,255,0.88);
}
.response-flow__provenance .src-link {
  color: white;
  border-block-end: 1px solid rgba(78,224,224,0.55);
  padding-block-end: 1px;
  text-decoration: none;
}
.response-flow__provenance .src-link:hover {
  border-block-end-color: #4EE0E0;
}
.rf-load-error {
  font-family: var(--font-mono);
  color: rgba(255,160,80,0.9);
  font-size: 13px;
}
/* Panel-level error variant — shown if the JSON fails to load so the
   flagship page doesn't render a mostly blank Compare area. */
.rf-load-error--panel {
  padding: 28px 24px;
  border: 1px solid rgba(255,160,80,0.32);
  background: rgba(255,160,80,0.05);
  border-radius: 12px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  color: rgba(255,255,255,0.82);
  max-width: 56ch;
}
.rf-load-error--panel a {
  color: #FFB86B;
  border-bottom: 1px solid rgba(255,184,107,0.55);
  text-decoration: none;
}
.rf-load-error--panel a:hover { border-bottom-color: #FFB86B; }

/* ---- returns panel content ---- */
.rf-returns__head {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.78);
  line-height: 1.45;
}
.rf-returns__head .mono { color: white; text-transform: none; letter-spacing: 0.02em; }
.rf-returns__cpt {
  margin: 0;
  display: grid;
  gap: 8px;
}
.rf-returns__cpt > div,
.rf-dist-row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding: 10px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  transition: background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.rf-returns__cpt > div:hover,
.rf-dist-row:hover {
  background: rgba(78,224,224,0.07);
  border-color: rgba(78,224,224,0.22);
}
.rf-returns__cpt dt,
.rf-dist-row dt {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: rgba(255,255,255,0.86);
}
.rf-returns__cpt dd,
.rf-dist-row dd {
  margin: 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  font-variant-numeric: tabular-nums;
}
.rf-returns__cpt .rf-bar {
  height: 8px;
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(78,224,224,0.85), rgba(78,224,224,0.45));
  width: var(--w, 0);
  min-width: 4px;
  transition: width 600ms cubic-bezier(.4, .8, .3, 1);
}
.rf-bar--blue { background: linear-gradient(90deg, rgba(255,255,255,0.65), rgba(255,255,255,0.30)); }
.rf-bar--cyan { background: linear-gradient(90deg, rgba(78,224,224,0.92), rgba(78,224,224,0.42)); }
.rf-bar--anim {
  transition: width 720ms cubic-bezier(.4, .8, .3, 1);
}
.rf-sim__bridge {
  margin: 6px 0 14px;
  color: rgba(255,255,255,0.66);
  font-size: 14px;
  line-height: 1.55;
  max-width: 78ch;
}
.rf-returns__cpt .rf-val {
  font-family: var(--font-mono);
  font-size: 14.5px;
  color: white;
  font-variant-numeric: tabular-nums;
}
.rf-returns__cpt--compact {
  gap: 6px;
}
.rf-returns__cpt--compact > div,
.rf-returns__cpt--compact .rf-dist-row {
  grid-template-columns: 72px 1fr;
  padding: 8px 10px;
}
.rf-returns__cpt--delta > div {
  grid-template-columns: 88px 1fr;
  padding: 11px 0;
  border: 0;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  border-radius: 0;
  background: transparent;
}
.rf-returns__cpt--delta > div:hover {
  background: transparent;
  border-color: rgba(255,255,255,0.28);
}
.rf-returns__cpt--delta > div:last-child { border-bottom: 0; }
.rf-bn-row dd {
  display: grid;
  grid-template-columns: minmax(120px, 1fr) 92px 58px;
  gap: 12px;
  align-items: center;
}
/* ---- Two-sided centered delta bullet -----------------------------------
   Shared component used in the BN distribution rows and the Simulacra
   cascade rows. Each row's bullet shows the per-outcome shift from
   baseline: bar extends right of the center axis for a positive delta,
   left for a negative delta. Bar width is normalized within the chart
   (largest |delta| in the chart maps to 50% of channel width).

   Direction is encoded by both position (left/right of axis) AND
   intensity (bright fill for positive, muted fill for negative). The
   panel context controls hue: white in BN, cyan in Simulacra. */
.rf-bullet {
  position: relative;
  display: block;
  height: 14px;
  border-radius: 7px;
  background: rgba(255,255,255,0.045);
}
.rf-bullet__axis,
.rf-bullet__fill {
  position: absolute;
  display: block;
}
.rf-bullet__axis {
  inset-block: -4px;
  inset-inline-start: 50%;
  width: 1.5px;
  background: rgba(255,255,255,0.55);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
}
.rf-bullet__fill {
  inset-block: 1px;
  height: calc(100% - 2px);
  width: var(--w, 0%);
  transition: width 620ms cubic-bezier(.4, .8, .3, 1);
}
/* Both directions carry the same fade span (~0.25 opacity range) so
   positive and negative read as symmetric in shape; negative is just
   shifted dimmer overall to signal "muted = fell" without changing the
   gradient character. The bright end of each bar sits at the axis;
   the faded end sits at the outer edge. */
.rf-bullet__fill--pos {
  inset-inline-start: 50%;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, rgba(255,255,255,0.82), rgba(255,255,255,0.55));
}
.rf-bullet__fill--neg {
  inset-inline-end: 50%;
  border-radius: 6px 0 0 6px;
  background: linear-gradient(-90deg, rgba(255,255,255,0.55), rgba(255,255,255,0.28));
}
/* Simulacra panel: cyan, with the same symmetric fade pattern. */
.rf-artifact-panel--sim .rf-bullet__fill--pos {
  background: linear-gradient(90deg, rgba(78,224,224,0.92), rgba(78,224,224,0.62));
}
.rf-artifact-panel--sim .rf-bullet__fill--neg {
  background: linear-gradient(-90deg, rgba(78,224,224,0.62), rgba(78,224,224,0.30));
}
.rf-bn-values,
.rf-bn-delta {
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rf-bn-values {
  color: rgba(255,255,255,0.78);
  text-align: right;
}
.rf-bn-delta {
  color: rgba(255,255,255,0.58);
  font-size: 14.5px;
  font-weight: 600;
  text-align: right;
}
.rf-bn-row--up .rf-bn-delta,
.rf-bn-row--target dt,
.rf-bn-row--target .rf-bn-values {
  color: white;
}
.rf-bn-row--down .rf-bn-delta {
  color: rgba(255,255,255,0.48);
}
@media (max-width: 640px) {
  .rf-bn-row dd { grid-template-columns: 1fr; gap: 7px; }
  .rf-bn-values,
  .rf-bn-delta { text-align: left; }
}
.rf-returns__dual-dist {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.rf-minihead--sub {
  color: rgba(255,255,255,0.50);
  font-size: 10.5px;
  letter-spacing: 0.10em;
}
.rf-dist-row--target dt,
.rf-dist-row--target .rf-val {
  color: white;
  font-weight: 600;
}
.rf-minihead {
  display: block;
  margin-bottom: 7px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.54);
}
.rf-minihead--math {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content);
  column-gap: 7px;
  row-gap: 3px;
  align-items: baseline;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
.rf-eq__lhs {
  color: rgba(255,255,255,0.50);
  text-align: right;
}
.rf-eq__term {
  color: rgba(255,255,255,0.68);
  white-space: normal;
}
@media (max-width: 980px) {
  .rf-returns__dual-dist { grid-template-columns: 1fr; }
}
.rf-ci-plot {
  display: grid;
  gap: 12px;
}
.rf-ci-row {
  display: grid;
  grid-template-columns: minmax(150px, 0.82fr) minmax(170px, 1fr);
  gap: 16px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  transition: background 160ms ease, border-color 160ms ease;
}
.rf-ci-row:hover {
  background: rgba(255,255,255,0.065);
  border-color: rgba(255,255,255,0.18);
}
.rf-ci-row__spec {
  display: grid;
  gap: 3px;
  min-width: 0;
}
.rf-ci-row__spec b {
  color: white;
  font-family: var(--font-body);
  font-size: 14.5px;
  font-weight: 650;
  line-height: 1.25;
}
.rf-ci-row__spec span {
  color: rgba(255,184,107,0.74);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rf-ci-row__plot {
  position: relative;
  justify-self: center;
  width: min(100%, 196px);
  height: 140px;
}
.rf-ci-row__axis,
.rf-ci-row__zero,
.rf-ci-row__interval,
.rf-ci-row__dot,
.rf-ci-row__label {
  position: absolute;
  display: block;
}
/* Axis spans the full container so the percentage-based marker positions
   (inset-block-end: var(--x)) line up with axis ends; previously a 6px
   top/bottom inset on the axis caused the zero line to drift outside
   the axis range when zero sat near the domain edge. */
.rf-ci-row__axis {
  inset-block: 0;
  inset-inline-start: 42px;
  width: 1px;
  background: rgba(255,255,255,0.16);
}
/* Zero is a quiet dotted reference; estimate and CI labels sit on the
   data marks, while the no-effect annotation stays on the opposite side. */
.rf-ci-row__zero {
  inset-inline-start: 20px;
  width: 38px;
  inset-block-end: var(--x);
  height: 1px;
  background:
    repeating-linear-gradient(to right,
      rgba(255,255,255,0.34) 0,
      rgba(255,255,255,0.34) 3px,
      transparent 3px,
      transparent 6px);
  transform: translateY(50%);
  pointer-events: none;
}
.rf-ci-row__zero::before {
  content: "0";
  position: absolute;
  inset-inline-start: -14px;
  inset-block-start: -6px;
  color: rgba(255,255,255,0.52);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
}
/* Vertical CI bar with whisker caps at top and bottom — reads as a
   proper forest-plot error bar instead of a plain colored strip. The
   caps are pseudo-elements on the bar itself so they track --lo / --hi
   automatically. */
.rf-ci-row__interval {
  inset-inline-start: 42px;
  inset-block-end: var(--lo);
  width: 4px;
  height: calc(var(--hi) - var(--lo));
  border-radius: 4px;
  background: linear-gradient(0deg, rgba(255,197,137,0.60), rgba(255,197,137,0.95));
  transform: translateX(-50%);
}
.rf-ci-row__interval::before,
.rf-ci-row__interval::after {
  content: "";
  position: absolute;
  inset-inline: -5px;
  height: 1.5px;
  background: rgba(255,197,137,0.92);
  border-radius: 1px;
}
.rf-ci-row__interval::before { inset-block-start: 0; }
.rf-ci-row__interval::after  { inset-block-end: 0; }
.rf-ci-row__dot {
  inset-inline-start: 42px;
  inset-block-end: var(--x);
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: #FFC589;
  box-shadow: 0 0 0 3px rgba(255,197,137,0.16), 0 0 16px rgba(255,197,137,0.20);
  transform: translate(-50%, 50%);
}
.rf-ci-row__label {
  inset-inline-start: 68px;
  inset-block-end: var(--x);
  transform: translateY(50%);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rf-ci-row__label--point {
  color: rgba(255,197,137,0.90);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.rf-ci-row__label--ci {
  color: rgba(255,255,255,0.62);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1;
}
.rf-ci-row__label--hi,
.rf-ci-row__label--lo {
  color: rgba(255,197,137,0.72);
}
.rf-ci-row--compact {
  grid-template-columns: 1fr;
  justify-items: center;
  gap: 10px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.rf-ci-row--compact:hover {
  background: transparent;
  border-color: transparent;
}
.rf-ci-row--compact .rf-ci-row__spec { display: none; }
.rf-ci-row--compact .rf-ci-row__plot {
  width: min(100%, 176px);
  height: 140px;
}
@media (max-width: 760px) {
  .rf-ci-row { grid-template-columns: 1fr; }
  .rf-ci-row__plot { justify-self: start; }
}
.rf-returns__pop {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-family: var(--font-mono);
  font-size: 13.5px;
  font-variant-numeric: tabular-nums;
}
.rf-returns__pop th {
  text-align: left;
  font-weight: 500;
  color: rgba(255,255,255,0.50);
  font-size: 11.5px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 0 10px 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.rf-returns__pop td {
  padding: 10px;
  color: rgba(255,255,255,0.88);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.rf-returns__pop tbody tr:hover td { background: rgba(78,224,224,0.08); }
.rf-returns__pop tbody tr:last-child td { border-bottom: none; }
.rf-chip {
  display: inline-block;
  padding: 3px 11px;
  border-radius: 999px;
  font-size: 11.5px;
  letter-spacing: 0.04em;
  font-family: var(--font-mono);
  background: rgba(78,224,224,0.10);
  color: #7AECEC;
  border: 1px solid rgba(78,224,224,0.24);
}
.rf-returns__caveat {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  color: rgba(255,255,255,0.58);
  line-height: 1.5;
}
.rf-returns__takeaway {
  margin: 0;
  color: rgba(255,255,255,0.76);
  font-size: 14px;
  line-height: 1.55;
}
.rf-returns__takeaway b { color: white; font-weight: 650; }

/* ---- per-tab headline: artifact-type led, not number-led ---------------
   Each method tab leads with WHAT KIND OF OBJECT the method returned.
   Numbers live inside the visual below this block. */
/* Two-column lede: bold sentence-case body label tab-aligned to a fixed
   left column; explanatory body paragraph in the right column starting at
   the same x across all three tabs. Same body tier on both columns, no
   separate display-size heading. */
.rf-headline {
  display: grid;
  grid-template-columns: minmax(240px, 300px) minmax(0, 1fr);
  gap: 28px;
  align-items: baseline;
  padding: 0 2px 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.rf-headline__label {
  color: white;
  font-family: var(--font-body);
  font-size: 15.5px;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: none;
}
.rf-headline__lede {
  margin: 0;
  color: rgba(255,255,255,0.78);
  font-family: var(--font-body);
  font-size: 15.5px;
  line-height: 1.55;
  max-width: 100ch;
}
/* Method labels are neutral white across all three tabs — Simulacra's
   identity is carried by the panel tint and cyan bars in the cascade,
   not by the headline. The amber on the SCM ACE CI plot stays as
   uncertainty-color semantics, not as method ID. */
.rf-headline__label { color: white; }
@media (max-width: 720px) {
  .rf-headline { grid-template-columns: 1fr; gap: 6px; }
}
/* SCM tab carries a big graphic below the headline, so the headline
   stacks single-column (label on a row above the body) instead of the
   tab-aligned 2-column used for BN/Simulacra. */
.rf-headline--scm { grid-template-columns: 1fr; gap: 6px; }

.rf-returns__detail {
  display: grid;
  gap: 10px;
}
.rf-artifact-panel {
  display: grid;
  gap: 18px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
/* BN and SCM panels are neutral; Simulacra carries the brand cyan tint. */
.rf-artifact-panel--bn {
  border-color: rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.025);
}
.rf-artifact-panel--sim {
  border-color: rgba(78,224,224,0.22);
  background: rgba(78,224,224,0.035);
}

/* Shared bar-key strip — same component on BN and Simulacra. The dashed
   swatch is neutral white in both contexts (matches the dotted baseline
   marker on the bars). The filled bar swatch inherits the panel's accent:
   neutral white in BN, brand cyan in Simulacra. */
.rf-bar-key {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  margin: 0;
  padding: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: rgba(255,255,255,0.70);
}
.rf-bar-key__sample {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.rf-bar-key__bar {
  display: inline-block;
  width: 18px;
  height: 8px;
  border-radius: 2px;
}
.rf-bar-key__bar--pos {
  background: linear-gradient(90deg, rgba(255,255,255,0.82), rgba(255,255,255,0.55));
}
.rf-bar-key__bar--neg {
  background: linear-gradient(-90deg, rgba(255,255,255,0.55), rgba(255,255,255,0.28));
}
/* Cyan in Simulacra panel context — matches the cascade bullets. */
.rf-artifact-panel--sim .rf-bar-key__bar--pos {
  background: linear-gradient(90deg, rgba(78,224,224,0.92), rgba(78,224,224,0.62));
}
.rf-artifact-panel--sim .rf-bar-key__bar--neg {
  background: linear-gradient(-90deg, rgba(78,224,224,0.62), rgba(78,224,224,0.30));
}
.rf-bar-key__axis {
  display: inline-block;
  width: 1.5px;
  height: 14px;
  background: rgba(255,255,255,0.55);
}
.rf-method-strip {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.rf-method-strip > div {
  display: grid;
  gap: 4px;
  padding-inline: 16px;
  border-left: 1px solid rgba(255,255,255,0.10);
}
.rf-method-strip > div:first-child {
  padding-left: 0;
  border-left: 0;
}
.rf-method-strip > div:last-child {
  padding-right: 0;
}
.rf-method-strip span {
  color: rgba(255,255,255,0.56);
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.rf-method-strip b {
  color: rgba(255,255,255,0.88);
  font-size: 14.5px;
  font-weight: 600;
  line-height: 1.3;
}
.rf-method-strip__metric b {
  color: white;
  font-size: 16.5px;
}
/* Column headers — sentence-case mono, real divider below at the same
   opacity as the data-row dividers. No inline legend (the .rf-bar-key
   above this row carries the dotted/bar key). */
.rf-bn-columns {
  display: grid;
  grid-template-columns: 88px minmax(120px, 1fr) 92px 58px;
  gap: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.56);
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  line-height: 1.35;
}
/* "shift from baseline" sits over the bullet's 0 axis (the visual center
   of the column), so the column header is centered. The numeric columns
   (share, change) remain right-aligned to match the data below them. */
.rf-bn-columns span:nth-child(2) {
  text-align: center;
}
.rf-bn-columns span:nth-child(3),
.rf-bn-columns span:nth-child(4) {
  text-align: right;
}
@media (max-width: 760px) {
  .rf-method-strip {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .rf-method-strip > div {
    padding-inline: 0;
    border-left: 0;
  }
}
@media (max-width: 640px) {
  .rf-bn-columns { display: none; }
}

/* ---- Single-column layout for tabs that don't carry a model SVG.
   Only SCM has a model graphic worth drawing; BN, Simulacra, and
   Compare put their entire artifact in the content panel. */
.response-flow.response-flow--no-model .response-flow__model { display: none; }
.response-flow.response-flow--no-model .response-flow__split {
  grid-template-columns: 1fr;
  align-items: start;
}

/* ============================================================
   COMPARE TAB — three columns, parallel structure
   Reader scans across at same row-level: method name, artifact
   type, snapshot of the actual return, useful-for framing.
   ============================================================ */
.rf-cmp { display: grid; gap: 22px; }
.rf-cmp__cols {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}
@media (max-width: 880px) {
  .rf-cmp__cols { grid-template-columns: 1fr; }
}
.rf-cmp__col {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: 14px;
  padding: 20px;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 12px;
  background: rgba(255,255,255,0.03);
}
.rf-cmp__col--sim {
  border-color: rgba(78,224,224,0.32);
  background: rgba(78,224,224,0.05);
}
.rf-cmp__method {
  margin: 0;
  font-family: var(--font-body);
  font-size: 21px;
  font-weight: 650;
  letter-spacing: 0;
  color: white;
}
.rf-cmp__type {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.80);
  font-weight: 500;
}
.rf-cmp__boost {
  display: block;
  margin-top: 4px;
  color: rgba(255,255,255,0.66);
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.rf-boost-arrow,
.rf-boost-out {
  color: #7AECEC;
  text-shadow: 0 0 10px rgba(78,224,224,0.24);
}
/* The snap region groups the per-method data display (CPT bars, ACE
   number, sim list). Earlier it had its own background + border + padding,
   which read as a "well inside a card" — too many nested depth layers
   on top of the column card and the figure card. Now: just a spacing
   container, no chrome of its own. */
.rf-cmp__snap {
  display: grid;
  gap: 12px;
  align-self: start;
}
.rf-cmp__snap-cap {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.58);
}
.rf-cmp__snap-cap--math {
  display: grid;
  grid-template-columns: max-content minmax(0, max-content);
  column-gap: 7px;
  row-gap: 3px;
  align-items: baseline;
  letter-spacing: 0;
  line-height: 1.35;
  text-transform: none;
}
.rf-cmp__bars {
  display: grid;
  gap: 6px;
}
.rf-cmp__bar-row {
  display: grid;
  grid-template-columns: 72px 1fr 48px;
  gap: 10px;
  align-items: center;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,0.78);
}
.rf-cmp__bar-label { color: rgba(255,255,255,0.62); }
.rf-cmp__bar-track {
  height: 7px;
  border-radius: 4px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.rf-cmp__bar-fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: linear-gradient(90deg, rgba(255,255,255,0.62), rgba(255,255,255,0.30));
  border-radius: 4px;
}
.rf-cmp__bar-row--hot .rf-cmp__bar-label,
.rf-cmp__bar-row--hot .rf-cmp__bar-val { color: white; }
.rf-cmp__bar-row--hot .rf-cmp__bar-fill {
  background: linear-gradient(90deg, rgba(255,255,255,0.84), rgba(255,255,255,0.46));
}
.rf-cmp__bar-val { text-align: right; color: rgba(255,255,255,0.86); }
.rf-cmp__sim-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14.5px;
  color: rgba(255,255,255,0.78);
}
.rf-cmp__sim-table th {
  padding: 0 10px 8px 0;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.52);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-align: left;
  text-transform: uppercase;
}
.rf-cmp__sim-table td {
  padding: 8px 10px 8px 0;
  border-bottom: 1px dashed rgba(255,255,255,0.08);
}
.rf-cmp__sim-table th:last-child,
.rf-cmp__sim-table td:last-child {
  padding-right: 0;
  text-align: right;
}
.rf-cmp__sim-table td:last-child {
  color: #7AECEC;
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rf-cmp__sim-table tr:last-child td { border-bottom: none; }
.rf-cmp__use {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: rgba(255,255,255,0.66);
  align-self: end;
}

/* ============================================================
   SIMULACRA CASCADE — four cards, one per non-intervention
   variable. Each card overlays a ghost baseline behind the
   under-do bars in cyan. The visual story IS the cards; no
   "how to read" needed.
   ============================================================ */
.rf-cascade {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 24px;
  margin-top: 0;
  align-items: stretch;
}
@media (min-width: 1180px) { .rf-cascade { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .rf-cascade { grid-template-columns: 1fr; } }
.rf-cascade__card {
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.rf-sim-boost {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 12px;
  margin-bottom: 16px;
  padding: 0 0 12px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
}
.rf-sim-boost > span {
  color: rgba(255,255,255,0.50);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.rf-sim-boost b {
  color: rgba(255,255,255,0.72);
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
@media (max-width: 560px) {
  .rf-sim-boost { align-items: flex-start; flex-direction: column; gap: 6px; }
}
.rf-cascade__title {
  margin: 0;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.70);
}
.rf-cascade__bars {
  display: grid;
  gap: 0;
  align-content: start;
}
.rf-cascade__columns {
  display: grid;
  grid-template-columns: 88px 1fr 44px;
  gap: 10px;
  padding-block: 0 6px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.42);
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.08em;
  line-height: 1.35;
  text-transform: uppercase;
}
.rf-cascade__columns span:nth-child(2) { text-align: center; }
.rf-cascade__columns span:nth-child(3) { text-align: right; }
.rf-cascade__bar-row {
  position: relative;
  display: grid;
  grid-template-columns: 88px 1fr 44px;
  gap: 10px;
  align-items: center;
  padding-block: 8px;
  border-bottom: 1px solid rgba(255,255,255,0.18);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.rf-cascade__bar-row:last-child { border-bottom: 0; }
/* Styled hover tooltip — replaces the native browser title tooltip with
   a CSS pseudo-element that matches the figure's dark/cyan palette. The
   row carries the data on a data-rf-tip attribute; on hover, a small
   floating chip appears above the bar with the level + before/after
   values. Pointer-events: none so the chip doesn't intercept the next
   row's hover. */
.rf-cascade__bar-row[data-rf-tip]::after {
  content: attr(data-rf-tip);
  position: absolute;
  inset-block-end: calc(100% - 4px);
  inset-inline-start: 0;
  /* pre preserves the multi-space gaps between label / values / delta
     so the three fields read visually separated, mirroring the BN row
     structure (label, X% → Y%, delta). */
  white-space: pre;
  padding: 5px 9px;
  background: rgba(10, 14, 28, 0.96);
  color: white;
  border: 1px solid rgba(78, 224, 224, 0.40);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.02em;
  line-height: 1.2;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 140ms ease, transform 140ms ease;
  pointer-events: none;
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0,0,0,0.40);
}
.rf-cascade__bar-row[data-rf-tip]:hover::after {
  opacity: 1;
  transform: translateY(0);
}
.rf-cascade__bar-label {
  color: rgba(255,255,255,0.66);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* .rf-cascade__bar-track / __bar-baseline / __bar-now removed —
   the cascade now uses the shared .rf-bullet centered-delta component. */
.rf-cascade__bar-row--up   .rf-cascade__bar-val { color: #7AECEC; }
.rf-cascade__bar-row--down .rf-cascade__bar-val { color: rgba(255,255,255,0.56); }
.rf-cascade__bar-val {
  text-align: right;
  color: rgba(255,255,255,0.82);
}
.rf-cascade__summary {
  align-self: end;
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.45;
  color: rgba(255,255,255,0.78);
}
.rf-cascade__summary b { color: white; font-weight: 600; }
.rf-cascade__foot {
  margin: 2px 0 0;
  padding-top: 16px;
  border-top: 1px solid rgba(78,224,224,0.12);
  color: rgba(255,255,255,0.66);
  font-size: 14.5px;
  line-height: 1.55;
}

.rf-sim__note {
  margin: 14px 0 0;
  color: rgba(255,255,255,0.72);
  font-size: 14.5px;
  line-height: 1.6;
  max-width: 78ch;
}

/* ---- graph (BN & SCM) ---- */
.rf-edge {
  fill: none;
  stroke: rgba(255,255,255,0.42);
  stroke-width: 1.65;
  opacity: 0.95;
  transition: stroke 280ms ease, stroke-width 280ms ease, opacity 280ms ease;
}
.rf-edge.is-active {
  stroke: #4EE0E0;
  stroke-width: 2.5;
  opacity: 1;
}
.rf-edge--primary-downstream {
  stroke: rgba(78,224,224,0.62);
  stroke-width: 1.9;
}
.rf-edge--cut {
  stroke: rgba(255,92,92,0.48);
  stroke-width: 1.8;
  stroke-dasharray: 5 5;
}
.rf-node circle {
  fill: #171B2A;
  stroke: rgba(255,255,255,0.36);
  stroke-width: 1.2;
  transition: fill 280ms ease, stroke 280ms ease, filter 280ms ease;
}
.rf-node:hover circle,
.rf-node:focus-visible circle {
  fill: #22283C;
  stroke: rgba(255,255,255,0.62);
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.12));
}
.rf-node--adjuster circle {
  stroke: rgba(255,184,107,0.56);
}
.rf-node--adjuster text { fill: rgba(255,229,198,0.94); }
.rf-node text {
  fill: rgba(255,255,255,0.82);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-anchor: middle;
  text-transform: uppercase;
  pointer-events: none;
}
.rf-node__metric {
  fill: #4EE0E0;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.rf-node.is-condition circle {
  fill: #3B1330;
  stroke: #FF2D75;
  stroke-width: 1.5;
  filter: drop-shadow(0 0 12px rgba(255,45,117,0.45));
}
.rf-node.is-condition text { fill: white; }
.rf-node--outcome circle {
  stroke: rgba(78,224,224,0.68);
}
.rf-node--outcome .rf-node__metric {
  opacity: 0;
  transition: opacity 220ms ease;
}
.rf-node--outcome.is-result circle {
  fill: rgba(12,54,62,0.92);
  stroke: #4EE0E0;
  stroke-width: 1.7;
  filter: drop-shadow(0 0 14px rgba(78,224,224,0.35));
}
.rf-node--outcome.is-result .rf-node__metric {
  opacity: 1;
  fill: #7AECFC;
}
.rf-node-tip {
  opacity: 0;
  transition: opacity 160ms ease;
  pointer-events: none;
}
.rf-node:hover .rf-node-tip,
.rf-node:focus-visible .rf-node-tip {
  opacity: 1;
}
.rf-node-tip rect {
  fill: rgba(10,14,26,0.94);
  stroke: rgba(255,255,255,0.16);
}
.rf-node-tip text {
  text-anchor: start;
  letter-spacing: 0.03em;
  text-transform: none;
}
.rf-node-tip__title {
  fill: white;
  font-size: 12px;
  font-weight: 700;
}
.rf-node-tip__body {
  fill: rgba(255,255,255,0.66);
  font-size: 11.5px;
}
.rf-node.is-condition .rf-node-tip__body,
.rf-node--outcome.is-result .rf-node-tip__body {
  fill: rgba(255,255,255,0.66);
}

/* Cut X mark: a wider dark "halo" line under a sharp red X. Reads cleanly
   over the cut edge without an ugly bullseye circle. */
.rf-cut line {
  stroke-linecap: round;
  opacity: 0;
  transform-origin: center;
  transform: scale(0.5);
  transition: opacity 220ms ease, transform 220ms cubic-bezier(.34,1.56,.64,1);
}
.rf-cut__halo {
  stroke: rgba(11,15,28,0.95);
  stroke-width: 5;
}
.rf-cut line:not(.rf-cut__halo) {
  stroke: #FF5C5C;
  stroke-width: 2.6;
}
.rf-cut.is-visible line {
  opacity: 1;
  transform: scale(1);
}
.rf-scm-note {
  opacity: 0;
  transition: opacity 240ms ease;
}
.rf-scm-note.is-visible { opacity: 1; }
/* Leaders are solid by default — dashed reads as "severed data" (matches
   the cut edges), so annotation leaders must look distinct from the data
   they annotate. Stroke-width 1.4 gives the leader presence over the
   distance from box to target; color is set per annotation type below. */
.rf-scm-note__leader {
  fill: none;
  stroke: rgba(255,255,255,0.34);
  stroke-width: 1.4;
  stroke-linecap: round;
}
.rf-scm-note__box {
  fill: rgba(16,20,34,0.92);
  stroke: rgba(255,255,255,0.16);
  stroke-width: 1;
}
.rf-scm-note__title,
.rf-scm-note__body,
.rf-do-text {
  font-family: var(--font-mono);
  letter-spacing: 0.05em;
  pointer-events: none;
}
.rf-scm-note__title {
  fill: white;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
}
.rf-scm-note__body {
  fill: rgba(255,255,255,0.68);
  font-size: 11.5px;
}
.rf-do-bg {
  fill: rgba(255,45,117,0.14);
  stroke: rgba(255,45,117,0.65);
}
.rf-do-text {
  fill: #FF7DA5;
  font-size: 13px;
  font-weight: 600;
}
/* Leader strokes match the edge they point at, at roughly the same
   weight so the leader doesn't read as "weaker" than the data it
   annotates. Opacities bumped: cuts 0.42→0.58 (matches cut edge 0.48),
   effect 0.44→0.60 (matches primary-downstream edge 0.62), do
   0.48→0.62 (no edge to match — just the brand magenta presence). */
.rf-scm-note--do .rf-scm-note__leader {
  stroke: rgba(255,45,117,0.62);
}
.rf-scm-note--cuts .rf-scm-note__box {
  stroke: rgba(255,92,92,0.36);
}
.rf-scm-note--cuts .rf-scm-note__leader {
  stroke: rgba(255,92,92,0.58);
}
.rf-scm-note--effect .rf-scm-note__box {
  stroke: rgba(78,224,224,0.32);
}
.rf-scm-note--effect .rf-scm-note__leader {
  stroke: rgba(78,224,224,0.60);
}

@media (max-width: 720px) {
  .response-flow__scenario { flex-direction: column; gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .response-flow--tab-sweep .response-flow__tab { animation: none; }
  .response-flow__returns { transition: opacity 0ms; transform: none; }
  .rf-cut line { transition: opacity 0ms; transform: scale(1); }
  .rf-scm-note { transition: opacity 0ms; }
  .rf-bullet__fill { transition: none; }
  .rf-edge { transition: stroke 0ms, stroke-width 0ms; }
  .rf-node circle { transition: fill 0ms, stroke 0ms, filter 0ms; }
}

/* ============= about subnav offsets etc ============= */
.subnav-spacer { height: 0; }

/* ============= hero glow accent ============= */
.glow-line {
  width: 38px; height: 1px;
  background: var(--brand-grad);
  display: inline-block;
}

/* ============= scenario output panel mini-bar ============= */
.minibar {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 8px 0;
  border-block-start: 1px dashed var(--line-1);
  font-family: var(--font-mono);
  font-size: 12.5px;
}
.minibar:first-of-type { border-block-start: 0; }
.minibar__label { color: var(--text-3); }
.minibar__bar { height: 6px; background: var(--ink-700); border-radius: 3px; position: relative; overflow: hidden; }
.minibar__fill {
  position: absolute; inset: 0;
  background: var(--brand-grad);
  width: var(--w, 50%);
  transition: width 360ms var(--ease-out);
}
.minibar__val { color: var(--text-1); font-weight: 500; min-width: 64px; text-align: right; }

/* ============= ACE intro ============= */
.ace-intro {
  margin-block-start: clamp(18px, 2.4vw, 28px);
  max-width: none;
}
.ace-intro h3 {
  margin: 0 0 18px;
  max-width: 26ch;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 460;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.08;
  color: var(--text-1);
}
.ace-intro .lede {
  max-width: none;
}
.ace-intro .lede + .lede {
  margin-block-start: 14px;
}

/* ============= ACE estimate cards ============= */
.ace-estimates-section {
  padding-block-start: clamp(50px, 7vh, 88px);
  padding-block-end: clamp(50px, 7vh, 88px);
}
.ace-estimates-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 28px);
}
.ace-estimate-card {
  --ace-paper-accent: #087E84;
  display: grid;
  align-content: start;
  gap: 16px;
  padding: clamp(24px, 3vw, 34px);
  border: 1px solid var(--paper-200);
  border-radius: 8px;
  background:
    radial-gradient(90% 80% at 12% 0%, rgba(255,45,117,0.055), transparent 58%),
    radial-gradient(90% 90% at 100% 100%, rgba(92,61,255,0.055), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,0.92) 0%, var(--paper-50) 100%);
  color: var(--paper-ink);
  box-shadow: 0 18px 48px rgba(21,23,31,0.08);
}
.ace-estimate-card__topline {
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.2;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  /* Same magenta the validation philosophy section uses for its
     paper-bg mono-tags — paper-AA accessible variant of brand-1. */
  color: #B3173F;
}
.ace-estimate-card h3 {
  margin: 0;
  font-family: var(--font-body);
  font-size: clamp(22px, 2.2vw, 28px);
  line-height: 1.08;
  font-weight: 700;
  color: var(--paper-ink);
}
.ace-estimate-card p {
  margin: 0;
  color: var(--paper-ink-2);
  font-size: 15.5px;
  line-height: 1.58;
}
.ace-effect-query {
  display: grid;
  gap: 6px;
  padding-block: 2px 0;
}
.ace-effect-query__kicker {
  color: rgba(21,23,31,0.52);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.ace-effect-query__line {
  color: var(--paper-ink);
  font-family: var(--font-mono);
  font-size: 14.5px;
  line-height: 1.4;
  font-weight: 600;
}
.ace-effect-query__do {
  color: var(--brand-1);
}
.ace-effect-query__level {
  color: #8A46D4;
}
.ace-effect-query__muted {
  color: rgba(21,23,31,0.56);
  font-weight: 500;
}
.ace-effect-query__arrow,
.ace-effect-query__outcome {
  /* Paper-bg cyan that stays in the same family as the hero rail's
     --accent (#4EE0E0). #087E84 is dark enough to pass AA on
     paper-50 (~4.57:1) but keeps the cyan hue — the earlier
     color-mix(accent 50%, paper-ink 50%) muted it too far toward
     paper-ink and broke the visual rhyme with the hero. */
  color: #087E84;
  transition: background-color 180ms ease, box-shadow 180ms ease;
  border-radius: 3px;
}
.ace-formula {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  gap: 3px 9px;
  align-items: baseline;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--paper-50);
  border: 1px solid rgba(21,23,31,0.10);
  color: var(--paper-ink);
  font-family: var(--font-mono);
  font-size: clamp(12px, 1.05vw, 14px);
  line-height: 1.65;
  overflow-wrap: anywhere;
}
.ace-formula__lhs {
  color: var(--paper-ink);
  font-weight: 600;
  text-align: right;
}
.ace-formula__eq {
  color: rgba(21,23,31,0.56);
  font-weight: 600;
}
.ace-formula__rhs {
  color: var(--paper-ink-2);
}
.ace-formula__rhs--continuation {
  grid-column: 3;
}
.ace-formula__op {
  color: var(--brand-1);
  font-weight: 600;
}
.ace-formula__segment {
  color: var(--brand-2);
  font-weight: 600;
  white-space: nowrap;
}
.ace-formula__sym {
  /* Wrapper around x₀ / x₁ atoms so JS can cross-highlight them
     against their concrete counterpart in the example query. */
  display: inline-block;
  border-radius: 3px;
  transition: background-color 180ms ease, box-shadow 180ms ease;
}
.ace-formula sub { font-size: 0.72em; line-height: 0; }

/* Cross-highlight on hover: when one member of a link-group is
   hovered (formula sym, segment marker, or its example-query /
   chart-row counterpart), JS adds .is-linked to every member of
   the group. The fill uses box-shadow so the highlight doesn't
   shift adjacent text. */
.ace-formula__sym.is-linked,
.ace-formula__segment.is-linked,
.ace-effect-query__level.is-linked,
.ace-effect-query__muted.is-linked,
.ace-effect-query__outcome.is-linked {
  background-color: rgba(255,45,117,0.16);
  box-shadow: 0 0 0 2px rgba(255,45,117,0.16);
}
.ace-formula__segment.is-linked {
  background-color: rgba(184,43,216,0.18);
  box-shadow: 0 0 0 2px rgba(184,43,216,0.18);
}
/* Y ↔ outcome link uses the cyan-accent family the outcome already
   lives in, so the highlight stays in semantic-color band. */
.ace-formula__sym--y.is-linked,
.ace-effect-query__outcome.is-linked {
  background-color: rgba(8,126,132,0.14);
  box-shadow: 0 0 0 2px rgba(8,126,132,0.14);
}
.ace-forest__label {
  transition: color 180ms ease, background-color 180ms ease, box-shadow 180ms ease;
  border-radius: 3px;
}
.ace-forest__label.is-linked {
  background-color: rgba(184,43,216,0.14);
  box-shadow: 0 0 0 3px rgba(184,43,216,0.14);
  color: var(--brand-2);
}
.ace-forest {
  --zero: 38%;
  display: grid;
  gap: 4px;
  padding-block-start: 2px;
}
.ace-forest__title {
  margin: 2px 0 4px;
  color: var(--paper-ink);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
}
.ace-forest__columns,
.ace-forest__row {
  display: grid;
  /* Fixed col 1 and col 3 widths so col 2 is identical across the
     header and every row — the "0" marker (positioned at var(--zero)
     inside col 2) then lands at the same X position in the header
     and in each row's track. With max-content sizing, the header's
     wider "Mean effect on PI" pushed col 2 narrower than the rows'
     "+7.2pp" allowed, drifting the "0" by ~13px. */
  grid-template-columns: 120px minmax(0, 1fr) 140px;
  gap: 8px 14px;
  align-items: center;
}
.ace-forest__columns {
  color: rgba(21,23,31,0.50);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.2;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-block: 0 7px;
}
.ace-forest__columns span:last-child {
  text-align: right;
}
.ace-forest__range-head {
  position: relative;
  display: block;
  min-width: 0;
}
.ace-forest__zero-head {
  position: absolute;
  inset-inline-start: var(--zero);
  transform: translateX(-50%);
  color: rgba(21,23,31,0.54);
  letter-spacing: 0;
}
.ace-forest__row {
  padding-block: 10px;
  border-block-start: 1px solid rgba(21,23,31,0.09);
  border-radius: 8px;
  transition: background 160ms ease, border-color 160ms ease;
}
.ace-forest__row:hover {
  background: rgba(255,45,117,0.035);
}
.ace-forest--segments .ace-forest__row:hover {
  background: rgba(184,43,216,0.035);
}
.ace-forest__label {
  color: var(--paper-ink);
  font-size: 14.5px;
  line-height: 1.2;
  font-weight: 600;
}
.ace-forest__track {
  position: relative;
  display: block;
  min-width: 0;
  height: 28px;
}
.ace-forest__axis,
.ace-forest__zero,
.ace-forest__interval,
.ace-forest__dot {
  position: absolute;
  display: block;
}
.ace-forest__axis {
  inset-inline: 0;
  inset-block-start: 50%;
  height: 1px;
  background: rgba(21,23,31,0.16);
  transform: translateY(-50%);
}
.ace-forest__zero {
  inset-inline-start: var(--zero);
  inset-block: 3px;
  width: 1px;
  background:
    repeating-linear-gradient(to bottom,
      rgba(21,23,31,0.34) 0,
      rgba(21,23,31,0.34) 3px,
      transparent 3px,
      transparent 6px);
}
.ace-forest__interval {
  inset-inline-start: var(--lo);
  inset-block-start: 50%;
  inline-size: calc(var(--hi) - var(--lo));
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,125,165,0.58), rgba(198,134,255,0.74), rgba(142,160,255,0.74));
  transform: translateY(-50%);
  transition: height 160ms ease;
}
.ace-forest__interval::before,
.ace-forest__interval::after {
  content: "";
  position: absolute;
  inset-block: -4px;
  width: 1.5px;
  border-radius: 1px;
  background: rgba(198,134,255,0.74);
}
.ace-forest__interval::before { inset-inline-start: 0; }
.ace-forest__interval::after { inset-inline-end: 0; }
.ace-forest__dot {
  inset-inline-start: var(--x);
  inset-block-start: 50%;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 4px rgba(15,143,143,0.14);
  transform: translate(-50%, -50%);
  transition: transform 160ms ease, box-shadow 160ms ease;
}
.ace-forest__row:hover .ace-forest__dot {
  transform: translate(-50%, -50%) scale(1.14);
  box-shadow: 0 0 0 6px rgba(15,143,143,0.20);
}
.ace-forest__row:hover .ace-forest__interval {
  height: 5px;
}
.ace-forest__value {
  color: var(--ace-paper-accent);
  color: color-mix(in srgb, var(--accent) 50%, var(--paper-ink) 50%);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.2;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.ace-forest__value--neutral {
  color: var(--paper-ink-2);
}
.ace-forest__value small {
  display: block;
  margin-block-start: 3px;
  color: inherit;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.ace-forest__detail {
  grid-column: 2 / -1;
  color: rgba(21,23,31,0.54);
  font-family: var(--font-mono);
  font-size: 11.5px;
  line-height: 1.35;
}
.ace-forest__detail--thin {
  color: rgba(21,23,31,0.46);
}
.ace-forest__row--thin .ace-forest__interval {
  background: rgba(21,23,31,0.25);
}
.ace-forest__row--thin .ace-forest__interval::before,
.ace-forest__row--thin .ace-forest__interval::after {
  background: rgba(21,23,31,0.28);
}
.ace-forest__row--thin .ace-forest__dot {
  background: rgba(21,23,31,0.44);
  box-shadow: 0 0 0 4px rgba(21,23,31,0.08);
}
.ace-forest__row--thin .ace-forest__value {
  color: rgba(21,23,31,0.52);
}

/* Chart key — mirrors the chart's visual language at 11px so a
   reader who's never seen a forest plot can decode the encoding
   without inferring it. Lives under the last row inside .ace-forest. */
.ace-forest__key {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  margin-block-start: 10px;
  padding-block-start: 10px;
  border-block-start: 1px dashed rgba(21,23,31,0.10);
  color: var(--paper-ink-3);
  font-family: var(--font-mono);
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
}
.ace-forest__key-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.ace-forest__key-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(15,143,143,0.14);
  margin-inline-end: 2px;
}
.ace-forest__key-band {
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255,125,165,0.58), rgba(198,134,255,0.74), rgba(142,160,255,0.74));
}
.ace-forest__key-zero-mark {
  display: inline-block;
  width: 1px;
  height: 12px;
  background:
    repeating-linear-gradient(to bottom,
      rgba(21,23,31,0.34) 0,
      rgba(21,23,31,0.34) 2px,
      transparent 2px,
      transparent 4px);
}
@media (max-width: 1080px) {
  .ace-estimates-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .ace-estimate-card { padding: 22px 18px; }
  .ace-formula {
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 3px 8px;
  }
  .ace-formula__eq { display: none; }
  .ace-formula__rhs,
  .ace-formula__rhs--continuation {
    grid-column: 2;
  }
  .ace-forest__columns { display: none; }
  .ace-forest__row {
    grid-template-columns: minmax(0, 1fr) max-content;
    gap: 7px 10px;
  }
  .ace-forest__track {
    grid-column: 1 / -1;
    grid-row: 2;
  }
  .ace-forest__detail {
    grid-column: 1 / -1;
    grid-row: 3;
  }
}

/* ============= ACE Studio workflow ============= */
.ace-studio-workflow {
  padding-block-start: clamp(50px, 7vh, 88px);
}
.ace-studio-workflow .section-head {
  margin-block-end: clamp(38px, 5vw, 62px);
}
.ace-studio-workflow .section-head .lede {
  max-width: 82ch;
}
.ace-workflow-panels {
  display: grid;
  gap: clamp(36px, 5vw, 64px);
}
.ace-workflow-panel {
  display: grid;
  grid-template-columns: minmax(300px, 0.78fr) minmax(0, 1.22fr);
  gap: clamp(28px, 5vw, 62px);
  align-items: center;
}
.ace-workflow-panel--image-left {
  grid-template-columns: minmax(0, 1.22fr) minmax(300px, 0.78fr);
}
.ace-workflow-panel--image-left .ace-workflow-panel__copy {
  order: 2;
}
.ace-workflow-panel--image-left .ace-product-frame {
  order: 1;
}
.ace-workflow-panel__copy {
  max-width: 56ch;
}
.ace-workflow-panel__copy h3 {
  margin: 0 0 14px;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 470;
  font-size: clamp(26px, 2.5vw, 34px);
  line-height: 1.08;
  color: var(--text-1);
}
.ace-workflow-panel__copy p {
  margin: 0;
  color: var(--text-2);
  font-size: clamp(16.5px, 1.25vw, 19px);
  line-height: 1.62;
}
.ace-workflow-points {
  display: grid;
  gap: 16px;
  margin-block-start: 24px;
  padding-block-start: 22px;
  border-block-start: 1px solid rgba(255,255,255,0.10);
}
.ace-workflow-points > div {
  display: grid;
  grid-template-columns: minmax(120px, 0.42fr) minmax(0, 1fr);
  gap: 16px;
}
.ace-workflow-points h4 {
  margin: 0;
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.25;
}
.ace-workflow-points p {
  margin: 0;
  color: var(--text-2);
  font-size: 14.5px;
  line-height: 1.55;
}
.ace-capabilities {
  margin-block-start: clamp(44px, 6vw, 72px);
  padding-block-start: clamp(34px, 4.5vw, 52px);
  border-block-start: 1px solid rgba(255,255,255,0.10);
}
.ace-capabilities h3 {
  margin: 0;
  max-width: 24ch;
  font-family: var(--font-display);
  font-variation-settings: "opsz" 144, "wght" 460;
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.08;
  color: var(--text-1);
}
.ace-capabilities > .lede {
  margin-block: 14px 28px;
  max-width: 78ch;
}
.ace-capabilities .card h4 {
  margin: 0 0 8px;
  color: var(--text-1);
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: 700;
  line-height: 1.18;
}
.ace-product-frame {
  margin: 0;
  overflow: hidden;
  border-radius: 8px;
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 24px 70px rgba(0,0,0,0.28);
}
.ace-product-frame__chrome {
  height: 34px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-inline: 16px;
  background: rgba(255,255,255,0.07);
  border-block-end: 1px solid rgba(255,255,255,0.10);
}
.ace-product-frame__chrome span {
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
}
.ace-product-frame img {
  display: block;
  width: 100%;
  height: auto;
}
.ace-product-frame figcaption {
  padding: 12px 16px 14px;
  border-block-start: 1px solid rgba(255,255,255,0.10);
  color: var(--text-3);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.45;
}

@media (max-width: 980px) {
  .ace-workflow-panel,
  .ace-workflow-panel--image-left {
    grid-template-columns: 1fr;
  }
  .ace-workflow-panel--image-left .ace-workflow-panel__copy {
    order: 1;
  }
  .ace-workflow-panel--image-left .ace-product-frame {
    order: 2;
  }
  .ace-workflow-panel__copy {
    max-width: 72ch;
  }
}
@media (max-width: 560px) {
  .ace-workflow-points > div {
    grid-template-columns: 1fr;
    gap: 6px;
  }
}