:root {
  --ink: #0b1220;
  --ink-soft: #435066;
  --paper: #f6f8fb;
  --paper-deep: #eaf0f6;
  --line: #cbd5e1;
  --signal: #b7f34a;
  --signal-dark: #263900;
  --accent: #5b4fc7;
  --white: #ffffff;
  --red: #c83e4d;
  --content: 1180px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 17px;
  line-height: 1.55;
}

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}

a:hover {
  text-decoration-thickness: 2px;
}

a:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 4px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 20;
  padding: 0.75rem 1rem;
  color: var(--white);
  background: var(--ink);
}

.skip-link:focus {
  top: 1rem;
}

.site-header {
  position: relative;
  z-index: 10;
  border-bottom: 1px solid var(--line);
}

.nav,
.section-inner,
.hero-inner,
.footer-inner {
  width: min(calc(100% - 2.5rem), var(--content));
  margin-inline: auto;
}

.nav {
  min-height: 82px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  font-weight: 760;
  letter-spacing: -0.03em;
  text-decoration: none;
}

.brand-mark {
  width: 30px;
  height: 30px;
  display: inline-block;
  flex: 0 0 auto;
  border-radius: 7px;
  background: url("logo-mark.svg") center / contain no-repeat;
  box-shadow: 0 0 0 1px rgba(7, 20, 33, 0.08);
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  font-size: 0.88rem;
  font-weight: 650;
}

.nav-links a {
  text-decoration: none;
}

.nav-links a:hover {
  text-decoration: underline;
}

.nav-links .nav-cta {
  padding: 0.58rem 0.8rem;
  border: 1px solid var(--ink);
  border-radius: 12px;
  color: var(--white);
  background: var(--ink);
}

.nav-links .nav-cta:hover {
  color: var(--ink);
  background: var(--signal);
  text-decoration: none;
}

.hero {
  min-height: 720px;
  display: grid;
  align-items: stretch;
  border-bottom: 1px solid var(--ink);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 7.5rem 0;
}

.eyebrow {
  margin: 0 0 1.4rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.hero h1 {
  max-width: 770px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.65rem, 6.3vw, 6.6rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.89;
}

.hero h1 em {
  position: relative;
  z-index: 0;
  font-style: italic;
}

.hero h1 em::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: -0.04em;
  right: -0.02em;
  bottom: 0.06em;
  height: 0.22em;
  background: var(--signal);
}

.hero-lede {
  max-width: 650px;
  margin: 2.2rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.35rem);
  line-height: 1.55;
}

.hero-qualifier {
  max-width: 650px;
  margin: 1.25rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(0.98rem, 1.35vw, 1.08rem);
  line-height: 1.55;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 1.35rem;
  margin-top: 2.4rem;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 50px;
  padding: 0.75rem 1.1rem;
  border: 1px solid var(--ink);
  border-radius: 14px;
  color: var(--white);
  background: var(--ink);
  font-size: 0.9rem;
  font-weight: 720;
  text-decoration: none;
}

.button:hover {
  color: var(--ink);
  background: var(--signal);
  text-decoration: none;
}

.text-link {
  font-size: 0.9rem;
  font-weight: 700;
}

.hero-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 4rem 0 4rem 4rem;
}

.report {
  color: var(--white);
  background: var(--ink);
  border-radius: 30px 30px 30px 8px;
  overflow: hidden;
  box-shadow: 18px 18px 0 var(--signal);
}

.report-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  border-bottom: 1px solid #61707b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.report-status {
  color: var(--signal);
}

.report-body {
  padding: 1.8rem;
}

.report-kicker {
  margin: 0 0 0.55rem;
  color: #b7c0c7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  text-transform: uppercase;
}

.report h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.75rem, 3.1vw, 2.75rem);
  font-weight: 400;
  line-height: 1.04;
  overflow-wrap: anywhere;
}

.verdict {
  margin: 1.7rem 0;
  padding: 1rem 0;
  border-block: 1px solid #61707b;
  color: var(--signal);
  font-size: 0.9rem;
  font-weight: 750;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.measure {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid #34434e;
  font-size: 0.82rem;
}

.measure span:last-child {
  color: #dce3e7;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.report-note {
  margin: 1.5rem 0 0;
  color: #b7c0c7;
  font-size: 0.78rem;
}

.prediction-orientation {
  border-bottom: 1px solid var(--ink);
  background: var(--white);
}

.prediction-orientation .section-inner {
  padding-block: clamp(4.5rem, 8vw, 8rem);
}

.orientation-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
  gap: 2rem clamp(3rem, 7vw, 7rem);
  align-items: end;
  margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}

.orientation-heading .eyebrow {
  color: var(--accent);
}

.orientation-heading h2 {
  max-width: 760px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3rem, 5.7vw, 5.8rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.96;
}

.orientation-intro p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.18rem);
}

.orientation-intro p + p {
  margin-top: 1.25rem;
}

.orientation-intro strong {
  color: var(--ink);
}

.prediction-journey {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
  list-style: none;
}

.prediction-journey li {
  min-height: 285px;
  padding: 1.5rem;
  border-right: 1px solid var(--line);
  background: var(--paper-deep);
}

.prediction-journey li:last-child {
  border-right: 0;
}

.prediction-journey span {
  display: block;
  min-height: 3rem;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.prediction-journey strong {
  display: block;
  margin-bottom: 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.prediction-journey p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.prediction-journey .prediction-journey-referee {
  color: var(--ink);
  background: var(--signal);
}

.prediction-journey .prediction-journey-referee span,
.prediction-journey .prediction-journey-referee p {
  color: var(--ink);
}

.orientation-callout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  gap: 2rem clamp(3rem, 7vw, 7rem);
  margin-top: 1rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-radius: 10px 34px 34px 34px;
  color: var(--white);
  background: var(--ink);
}

.orientation-callout .eyebrow,
.orientation-callout .text-link {
  color: var(--signal);
}

.orientation-callout h3 {
  max-width: 680px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.8vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.orientation-callout > div:last-child {
  align-self: end;
}

.orientation-callout > div:last-child p {
  margin: 0 0 1.5rem;
  color: #cdd6df;
}

.orientation-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1.5rem;
}

/* Two complete reading paths, not two competing stories on the homepage. */
.audience-paths {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin-top: 2rem;
  scroll-margin-top: 7rem;
}

.audience-path {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid var(--ink);
  border-radius: 10px 28px 28px 28px;
  color: var(--ink);
  background: var(--white);
  text-decoration: none;
}

.audience-path:hover {
  background: var(--paper-deep);
}

.audience-path h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 2.6vw, 2.5rem);
  font-weight: 400;
  line-height: 1.15;
}

.audience-path p {
  margin: 0;
  color: var(--ink-soft);
}

.audience-path .text-link {
  margin-top: auto;
}

.boundary,
.legal-main code,
.research-report {
  min-width: 0;
  overflow-wrap: anywhere;
}

.improvement-cycle {
  margin-top: 1rem;
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
  background: var(--white);
}

.improvement-cycle-head {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: 2rem clamp(3rem, 7vw, 7rem);
  align-items: end;
  padding: clamp(2rem, 4vw, 3.5rem);
  border-bottom: 1px solid var(--ink);
}

.improvement-cycle-head .eyebrow {
  color: var(--accent);
}

.improvement-cycle-head h3 {
  max-width: 720px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.improvement-cycle-head > p {
  margin: 0;
  color: var(--ink-soft);
}

.improvement-cycle-list {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  padding: 0;
  margin: 0;
  list-style: none;
}

.improvement-cycle-list li {
  position: relative;
  min-height: 245px;
  padding: 1.5rem;
  border-right: 1px solid var(--line);
  background: var(--paper-deep);
}

.improvement-cycle-list li:last-child {
  border-right: 0;
  background: var(--signal);
}

.improvement-cycle-list span {
  display: block;
  min-height: 2.8rem;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.improvement-cycle-list strong {
  display: block;
  margin-bottom: 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.25rem, 1.7vw, 1.7rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.05;
}

.improvement-cycle-list p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.improvement-cycle-list li:last-child span,
.improvement-cycle-list li:last-child p {
  color: var(--ink);
}

.improvement-cycle-list li:last-child::after {
  content: "↺";
  position: absolute;
  right: 1.2rem;
  bottom: 0.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.2rem;
  line-height: 1;
}

.audience-routes {
  border-bottom: 1px solid var(--ink);
  background: var(--white);
}

.audience-routes .section-inner {
  padding-block: clamp(3.5rem, 6vw, 6rem);
}

.route-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 1rem clamp(2rem, 6vw, 6rem);
  align-items: end;
  margin-bottom: 2.5rem;
}

.route-heading .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
  color: var(--accent);
}

.route-heading h2 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
}

.route-heading > p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.route-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.route-card {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: clamp(2rem, 4vw, 3.25rem);
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
  text-decoration: none;
}

.route-card:hover {
  transform: translateY(-3px);
  text-decoration: none;
}

.route-card-gentle {
  background: var(--paper-deep);
}

.route-card-technical {
  color: var(--white);
  background: var(--ink);
  box-shadow: 12px 12px 0 var(--signal);
}

.route-kicker {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.74rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.route-card-technical .route-kicker,
.route-card-technical > span:last-child {
  color: var(--signal);
}

.route-card strong {
  max-width: 600px;
  margin-block: 3rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.5vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.route-card > span:last-child {
  color: var(--accent);
  font-size: 0.9rem;
  font-weight: 750;
}

.route-card.route-card-technical > span:last-child {
  color: var(--signal);
}

.expert-path {
  background: var(--white);
}

.expert-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-bottom: 3.5rem;
}

.expert-intro p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.22rem);
}

.expert-intro strong {
  color: var(--ink);
}

.ml-journey {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
}

.ml-journey article {
  min-height: 275px;
  padding: 1.4rem;
  border-right: 1px solid var(--line);
  background: var(--paper-deep);
}

.ml-journey article:last-child {
  border-right: 0;
}

.ml-journey article span {
  display: block;
  min-height: 3.5rem;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ml-journey article h3 {
  margin: 0 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.ml-journey article p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.ml-journey .ml-journey-referee {
  grid-column: span 2;
  color: var(--ink);
  background: var(--signal);
}

.ml-journey .ml-journey-referee span,
.ml-journey .ml-journey-referee p {
  color: var(--ink);
}

.ablation-explainer {
  display: grid;
  grid-template-columns: minmax(0, 0.75fr) minmax(0, 1.25fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  margin-top: 1rem;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--ink);
  border-radius: 10px 34px 34px 34px;
  color: var(--white);
  background: var(--ink);
}

.ablation-explainer .eyebrow {
  color: var(--signal);
}

.ablation-explainer h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 4.6vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
}

.ablation-explainer > div:last-child p {
  margin: 0;
  color: #cdd6df;
}

.ablation-explainer > div:last-child p + p {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #526073;
}

.ablation-explainer strong {
  color: var(--white);
}

.expert-value-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: 1rem;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.expert-value-grid article {
  min-height: 210px;
  padding: 1.5rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.expert-value-grid span {
  display: block;
  min-height: 3rem;
  color: var(--accent);
  font-size: 0.77rem;
  font-weight: 750;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.expert-value-grid p {
  margin: 1.5rem 0 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.dark-section .expert-value-grid {
  border-color: #526073;
}

.dark-section .expert-value-grid article {
  border-color: #526073;
}

.dark-section .expert-value-grid span {
  color: var(--signal);
}

.dark-section .expert-value-grid p {
  color: #dce3e7;
}

.section {
  border-bottom: 1px solid var(--ink);
}

.section-inner {
  padding-block: clamp(5rem, 9vw, 8.5rem);
}

.section-head {
  display: grid;
  grid-template-columns: 1fr 2.25fr;
  gap: 4rem;
  margin-bottom: 4.5rem;
}

.section-number {
  margin: 0;
  color: var(--ink-soft);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.76rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.section-title {
  max-width: 880px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 5.5vw, 5.6rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

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

.intro-item {
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 26px 26px 8px 26px;
  background: var(--white);
}

.intro-item h3 {
  margin: 0 0 0.8rem;
  font-size: 1rem;
}

.intro-item p {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.94rem;
}

/* Plain-language homepage introduction */
.plain-language {
  background: var(--paper-deep);
}

.plain-language-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 5rem);
  margin-bottom: 3.5rem;
}

.plain-language-intro p {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
}

.plain-language-intro strong {
  color: var(--ink);
}

.spreadsheet-story {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
  color: var(--ink);
  background: var(--white);
}

.spreadsheet-card {
  min-height: 310px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-right: 1px solid var(--line);
}

.spreadsheet-card:last-child {
  border-right: 0;
}

.spreadsheet-answer {
  background: rgba(101, 88, 217, 0.1);
}

.spreadsheet-features {
  background: rgba(183, 243, 74, 0.22);
}

.spreadsheet-model {
  color: var(--white);
  background: var(--ink);
}

.spreadsheet-label,
.plain-problem-index {
  margin: 0 0 3.5rem;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.spreadsheet-model .spreadsheet-label {
  color: var(--signal);
}

.spreadsheet-card h3 {
  margin: 0 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.spreadsheet-card p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.spreadsheet-model p:last-child {
  color: #cdd6df;
}

.simple-use {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  margin-top: 1rem;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--ink);
  border-radius: 10px 34px 34px 34px;
  color: var(--ink);
  background: var(--white);
}

.simple-use-lead .eyebrow {
  color: var(--accent);
}

.simple-use-lead h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 3.8vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.simple-use-steps {
  margin: 0;
  padding: 0;
  counter-reset: simple-use;
  list-style: none;
  border-top: 1px solid var(--line);
}

.simple-use-steps li {
  display: grid;
  grid-template-columns: minmax(150px, 0.42fr) minmax(0, 1fr);
  gap: 1rem;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--line);
  counter-increment: simple-use;
}

.simple-use-steps strong::before {
  content: "0" counter(simple-use) " / ";
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
}

.simple-use-steps strong,
.simple-use-steps span {
  display: block;
}

.simple-use-steps strong {
  font-size: 0.9rem;
}

.simple-use-steps span {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.familiar-examples {
  display: grid;
  grid-template-columns: minmax(260px, 0.7fr) minmax(0, 1.3fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  margin-top: clamp(4rem, 8vw, 7rem);
}

.familiar-examples-copy h3 {
  margin: 0 0 1.2rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.3rem, 4.5vw, 4.5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.familiar-examples-copy > p:last-child {
  color: var(--ink-soft);
}

.familiar-example-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.familiar-example-grid article {
  min-height: 155px;
  padding: 1.4rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--white);
}

.familiar-example-grid strong,
.familiar-example-grid span {
  display: block;
}

.familiar-example-grid strong {
  margin-bottom: 1.6rem;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.familiar-example-grid span {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.plain-problem-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: clamp(4rem, 8vw, 7rem);
}

.plain-problem-card {
  min-height: 480px;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
  background: var(--white);
}

.plain-problem-solution {
  background: var(--signal);
}

.plain-problem-card h3 {
  margin: 0 0 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 3.7vw, 3.7rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.03;
}

.plain-problem-card > p:last-child {
  color: var(--ink-soft);
}

.executive-priority {
  margin-top: 1rem;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
  background: var(--white);
}

.executive-priority-lead {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 6vw, 6rem);
  align-items: end;
}

.executive-priority-lead .eyebrow {
  grid-column: 1 / -1;
  margin-bottom: 0;
  color: var(--accent);
}

.executive-priority-lead h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.4rem, 4.8vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 1;
}

.executive-priority-lead > p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: clamp(1rem, 1.5vw, 1.2rem);
}

.executive-priority-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: clamp(2.5rem, 5vw, 4.5rem);
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.executive-priority-grid article {
  min-height: 250px;
  padding: 1.6rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.executive-priority-grid article:nth-child(2) {
  background: rgba(183, 243, 74, 0.22);
}

.executive-priority-index {
  margin: 0 0 3rem;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.executive-priority-grid h4 {
  margin: 0 0 0.9rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.45rem, 2vw, 2rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.executive-priority-grid article > p:last-child,
.executive-priority-close {
  color: var(--ink-soft);
}

.executive-priority-grid article > p:last-child {
  margin: 0;
  font-size: 0.92rem;
}

.executive-priority-close {
  max-width: 900px;
  margin: 2rem 0 0;
  padding-left: 1rem;
  border-left: 4px solid var(--accent);
}

.plain-boundary {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  margin-top: 1rem;
  padding: clamp(2rem, 5vw, 4rem);
  border: 1px solid var(--ink);
  border-radius: 10px 34px 34px 34px;
  color: var(--white);
  background: var(--ink);
}

.plain-boundary h3 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4.2vw, 4.2rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.plain-boundary .eyebrow {
  color: var(--signal);
}

.plain-boundary > div:last-child p {
  margin: 0;
  color: #cdd6df;
}

.plain-boundary > div:last-child p + p {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid #526073;
}

.selection-path {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
  color: var(--ink);
  background: var(--white);
}

.selection-step {
  min-height: 330px;
  padding: clamp(1.6rem, 3vw, 2.4rem);
  border-right: 1px solid var(--line);
}

.selection-step:last-child {
  border-right: 0;
  background: var(--signal);
}

.selection-index {
  margin: 0 0 4rem;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.1em;
}

.selection-step h3 {
  margin: 0 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.7rem, 2.5vw, 2.5rem);
  font-weight: 400;
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.selection-step p:last-child {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.selection-note {
  display: grid;
  grid-template-columns: 0.45fr 1.55fr;
  gap: 2rem;
  margin-top: 1rem;
  padding: 1.5rem 1.7rem;
  border: 1px solid var(--line);
  border-radius: 8px 22px 22px 22px;
}

.selection-note strong {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.selection-note p {
  margin: 0;
  color: var(--ink-soft);
}

.ablation-story-copy {
  min-width: 0;
  max-width: 68ch;
}

.ablation-story-copy p + p {
  margin-top: 1rem;
}

.ablation-story-copy strong {
  font-family: inherit;
  font-size: inherit;
  letter-spacing: normal;
  text-transform: none;
}

.lane-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.lane {
  min-height: 540px;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
}

.lane-referee {
  color: var(--white);
  background: var(--ink);
}

.lane-repair {
  color: var(--ink);
  background: var(--signal);
}

.lane-number {
  margin: 0 0 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 750;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

.lane h3 {
  max-width: 540px;
  margin: 5rem 0 1.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.25rem, 4vw, 4rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.02;
}

.lane > p:not(.lane-number) {
  max-width: 590px;
  margin: 0;
  font-size: 1rem;
}

.lane-referee > p:not(.lane-number) {
  color: #cdd6df;
}

.lane-meta {
  margin: 2.5rem 0 0;
  border-top: 1px solid currentColor;
}

.lane-meta div {
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid currentColor;
}

.lane-meta dt {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.lane-meta dd {
  margin: 0;
  font-size: 0.86rem;
}

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

.value-grid .lane {
  min-height: 0;
  padding: clamp(1.5rem, 2.5vw, 2.5rem);
}

.value-grid .lane-number {
  margin-bottom: 1.5rem;
}

.value-grid h3 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.8rem, 2.7vw, 2.7rem);
  line-height: 1.12;
}

.value-grid .lane-meta {
  margin-top: 1.75rem;
}

.lane-research {
  color: var(--ink);
  background: var(--white);
}

.buy-case {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(3rem, 6vw, 6rem);
  margin-top: 1rem;
  padding: clamp(2rem, 5vw, 4.5rem);
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 10px 34px 34px 34px;
  color: var(--white);
  background: var(--ink);
}

.buy-case-kicker,
.buy-case-index {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.buy-case-kicker {
  max-width: 520px;
  margin: 0 0 2.25rem;
  color: var(--signal);
}

.buy-case h3 {
  max-width: 650px;
  margin: 0 0 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.6rem, 5vw, 5.25rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.buy-case-lead > p:not(.buy-case-kicker):not(.buy-case-thesis) {
  max-width: 650px;
  margin: 0;
  color: #cdd6df;
}

.buy-case-thesis {
  max-width: 650px;
  margin: 2.5rem 0 0;
  padding-top: 1.5rem;
  border-top: 1px solid #526073;
  color: var(--white);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.35rem, 2.1vw, 1.9rem);
  line-height: 1.2;
}

.buy-case-reasons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-content: start;
  border-top: 1px solid #526073;
  border-left: 1px solid #526073;
}

.buy-case-reasons article {
  min-height: 210px;
  padding: 1.5rem;
  border-right: 1px solid #526073;
  border-bottom: 1px solid #526073;
}

.buy-case-index {
  margin: 0 0 2.5rem;
  color: var(--signal);
}

.buy-case h4 {
  margin: 0 0 0.7rem;
  font-size: 1rem;
}

.buy-case-reasons article > p:last-child {
  margin: 0;
  color: #cdd6df;
  font-size: 0.88rem;
}

.buy-case-close {
  grid-column: 1 / -1;
  margin: 0;
  padding: 1.3rem 1.5rem;
  border-radius: 8px 20px 20px 20px;
  color: var(--signal-dark);
  background: var(--signal);
  font-weight: 750;
  text-align: center;
}

.process {
  counter-reset: steps;
  border-top: 1px solid var(--ink);
}

.process-row {
  counter-increment: steps;
  display: grid;
  grid-template-columns: 80px minmax(190px, 0.7fr) 1.5fr;
  gap: 2rem;
  align-items: start;
  padding: 2rem 0;
  border-bottom: 1px solid var(--line);
}

.process-row::before {
  content: "0" counter(steps);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.78rem;
  font-weight: 700;
}

.process-row h3,
.process-row p {
  margin: 0;
}

.process-row h3 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.65rem;
  font-weight: 400;
  line-height: 1.2;
}

.process-row p {
  max-width: 660px;
  color: var(--ink-soft);
}

.dark-section {
  color: var(--white);
  background: var(--ink);
}

.dark-section .section-number,
.dark-section .outcome-copy {
  color: #c5cdd2;
}

.dark-section .plain-language-intro p {
  color: #dce3e7;
}

.dark-section .plain-language-intro strong {
  color: var(--white);
}

.outcome-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(3rem, 8vw, 8rem);
}

.outcome-copy {
  max-width: 650px;
  margin: 2rem 0 0;
  font-size: 1.12rem;
}

.outcome-list {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid #54636e;
}

.outcome-list li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  padding: 1.1rem 0;
  border-bottom: 1px solid #54636e;
}

.outcome-list strong {
  color: var(--signal);
  font-size: 0.78rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.outcome-list span {
  color: #dce3e7;
  font-size: 0.94rem;
}

.boundary-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.boundary {
  min-height: 280px;
  padding: 2.2rem;
  border: 1px solid var(--line);
  border-radius: 28px 8px 28px 28px;
  background: var(--white);
}

.boundary-label {
  margin: 0 0 2rem;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.boundary h3 {
  margin: 0 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 400;
}

.boundary p {
  margin: 0;
  color: var(--ink-soft);
}

.fit-gate {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}

.fit-gate-card {
  min-height: 330px;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
}

.fit-gate-card h3 {
  max-width: 620px;
  margin: 2.5rem 0 1rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.4vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.fit-gate-card > p:last-child {
  margin: auto 0 0;
}

.fit-gate-yes {
  color: var(--white);
  background: var(--ink);
}

.fit-gate-yes > p:last-child {
  color: #dce3e7;
}

.fit-gate-yes .boundary-label,
.research-path-supported .boundary-label {
  color: var(--signal);
}

.fit-gate-not-yet {
  background: var(--signal);
}

.domain-intro {
  margin: 0 0 1rem;
  padding: 1.25rem 1.4rem;
  border-left: 6px solid var(--blue);
  color: var(--ink-soft);
  background: var(--paper-deep);
}

.domain-intro strong {
  color: var(--ink);
}

.domain-grid .boundary {
  min-height: 320px;
}

.domain-link-card {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
  transition: background-color 140ms ease, transform 140ms ease;
}

.domain-link-card:hover {
  background: var(--signal);
  text-decoration: none;
  transform: translateY(-3px);
}

.domain-card-link {
  margin-top: auto;
  padding-top: 2rem;
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 750;
}

.cta {
  border-bottom: 1px solid var(--ink);
  background: var(--paper-deep);
}

.cta .section-inner {
  display: grid;
  grid-template-columns: 1.35fr 0.65fr;
  gap: 4rem;
  align-items: end;
  padding-block: clamp(4rem, 8vw, 7rem);
}

.cta h2 {
  max-width: 850px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.1rem, 6vw, 6rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.cta-copy p {
  margin: 0 0 1.5rem;
  font-weight: 650;
}

.site-footer {
  background: var(--paper-deep);
}

.footer-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2rem;
  align-items: end;
  padding-block: 2.5rem;
}

.footer-note {
  max-width: 670px;
  margin: 1.2rem 0 0;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.footer-links {
  display: flex;
  gap: 1.5rem;
  font-size: 0.82rem;
  font-weight: 650;
}

.legal-main {
  width: min(calc(100% - 2.5rem), 800px);
  margin-inline: auto;
  padding: clamp(4rem, 9vw, 8rem) 0;
}

.legal-main h1 {
  margin: 0 0 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 8vw, 6.6rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.legal-lede {
  margin-bottom: 4rem;
  color: var(--ink-soft);
  font-size: 1.15rem;
}

.legal-meta {
  margin: -2.5rem 0 3rem;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.legal-form {
  margin-top: 3rem;
}

.agent-endpoint {
  overflow-wrap: anywhere;
}

.agent-steps li {
  margin-bottom: 1.25rem;
  overflow-wrap: anywhere;
}

.legal-main h2 {
  margin-top: 3.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--line);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 400;
}

.legal-main li {
  margin-bottom: 0.65rem;
}

/* Unlisted product demo */
.demo-main {
  width: min(calc(100% - 2.5rem), 1120px);
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.demo-heading {
  max-width: 850px;
}

.demo-heading h1 {
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 7vw, 6.8rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.93;
}

.demo-lede {
  max-width: 760px;
  margin: 2rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.8vw, 1.3rem);
}

.demo-player {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
}

.demo-player video {
  width: 100%;
  height: auto;
  display: block;
  border: 1px solid var(--ink);
  border-radius: 26px 26px 8px 26px;
  background: var(--ink);
  box-shadow: 16px 16px 0 var(--signal);
}

.demo-player figcaption {
  max-width: 820px;
  margin: 1.5rem 16px 0 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.demo-outline {
  max-width: 820px;
  margin-top: clamp(3.5rem, 7vw, 6rem);
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}

.demo-outline h2 {
  margin: 0 0 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 400;
}

.demo-outline li {
  margin-bottom: 0.7rem;
}

.agent-callout {
  margin: 3rem 0;
  padding: 2rem;
  border: 1px solid var(--ink);
  border-radius: 26px 26px 8px 26px;
  background: var(--white);
}

.agent-callout h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.contract-list {
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.contract-list li {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1rem;
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
}

.contract-list li::before {
  content: "✓";
  color: var(--accent);
  font-weight: 800;
}

.architecture {
  margin: 2.5rem 0;
  padding: 1.5rem;
  border: 1px solid var(--ink);
  background: var(--white);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
  overflow-x: auto;
}

.beta-hero {
  border-bottom: 1px solid var(--ink);
}

.beta-hero .section-inner {
  padding-block: clamp(5.5rem, 11vw, 10rem);
}

.beta-hero h1 {
  max-width: 960px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(4rem, 9vw, 8.5rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.9;
}

.beta-lede {
  max-width: 780px;
  margin: 2rem 0 2.4rem;
  color: var(--ink-soft);
  font-size: clamp(1.1rem, 2vw, 1.4rem);
}

.beta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.beta-card {
  min-height: 500px;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
  background: var(--white);
}

.beta-card-agent {
  color: var(--white);
  background: var(--ink);
}

.beta-card h3 {
  margin: 3.5rem 0 1.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.03;
}

.beta-card p,
.beta-card li {
  font-size: 0.95rem;
}

.beta-card blockquote {
  margin: 1.4rem 0;
  padding: 1.2rem;
  border-left: 5px solid var(--accent);
  background: var(--paper-deep);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.84rem;
}

.beta-card ol {
  padding-left: 1.3rem;
}

.beta-card-agent code,
.beta-card-agent .text-link {
  color: var(--signal);
}

.beta-note {
  max-width: 820px;
  margin: 3rem 0 0;
  padding: 1.25rem 1.5rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--white);
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.request-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.65fr);
  gap: 1rem;
  align-items: start;
}

.beta-form,
.request-aside {
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
}

.beta-form {
  display: grid;
  gap: 1.35rem;
  padding: clamp(2rem, 5vw, 4rem);
  background: var(--white);
}

.form-row {
  display: grid;
  gap: 0.5rem;
}

.form-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.form-row label {
  font-size: 0.86rem;
  font-weight: 720;
}

.form-row label span {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 500;
}

.form-row input,
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 0.9rem 1rem;
  border: 1px solid #8190a3;
  border-radius: 12px;
  color: var(--ink);
  background: var(--paper);
  font: inherit;
}

.form-row textarea {
  resize: vertical;
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
  border-color: var(--ink);
}

.form-warning,
.form-privacy,
.form-instructions {
  margin: 0;
  color: var(--ink-soft);
  font-size: 0.82rem;
}

.form-instructions {
  padding-bottom: 0.25rem;
}

.form-warning {
  padding: 1rem;
  border-left: 4px solid var(--accent);
  background: var(--paper-deep);
}

.beta-form .button {
  width: fit-content;
  cursor: pointer;
}

.form-honey {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.request-aside {
  padding: clamp(2rem, 4vw, 3rem);
  color: var(--white);
  background: var(--ink);
}

.request-aside h3 {
  margin: 4rem 0 1.2rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.2rem, 4vw, 3.8rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.03;
}

.request-aside p:not(.lane-number) {
  color: #cdd6df;
}

.request-aside .text-link {
  color: var(--signal);
}

.confirmation-main {
  min-height: calc(100vh - 82px);
  display: grid;
  place-items: center;
  width: min(calc(100% - 2.5rem), 800px);
  margin-inline: auto;
  padding-block: clamp(4rem, 10vw, 8rem);
}

.confirmation-card {
  width: 100%;
  padding: clamp(2.5rem, 7vw, 5rem);
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
  background: var(--white);
  box-shadow: 18px 18px 0 var(--signal);
}

.confirmation-card h1 {
  margin: 0 0 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.2rem, 8vw, 6.6rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.95;
}

.confirmation-card > p:not(.eyebrow) {
  max-width: 620px;
  color: var(--ink-soft);
  font-size: 1.08rem;
}

.confirmation-card .hero-actions {
  margin-top: 2rem;
}

@media (max-width: 900px) {
  .audience-paths,
  .value-grid {
    grid-template-columns: 1fr;
  }
  .hero {
    min-height: auto;
  }

  .hero-inner,
  .section-head,
  .orientation-heading,
  .orientation-callout,
  .improvement-cycle-head,
  .route-heading,
  .lane-grid,
  .buy-case,
  .beta-grid,
  .request-layout,
  .outcome-layout,
  .cta .section-inner,
  .expert-intro,
  .ablation-explainer,
  .familiar-examples,
  .simple-use,
  .plain-boundary {
    grid-template-columns: 1fr;
  }

  .prediction-journey {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .improvement-cycle-list {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .prediction-journey li {
    min-height: 240px;
    border-bottom: 1px solid var(--line);
  }

  .prediction-journey li:nth-child(2n) {
    border-right: 0;
  }

  .prediction-journey li:nth-last-child(-n + 2) {
    border-bottom: 0;
  }

  .improvement-cycle-list li {
    min-height: 220px;
    border-bottom: 1px solid var(--line);
  }

  .improvement-cycle-list li:nth-child(3n) {
    border-right: 0;
  }

  .improvement-cycle-list li:nth-last-child(-n + 3) {
    border-bottom: 0;
  }

  .spreadsheet-story {
    grid-template-columns: 1fr 1fr;
  }

  .ml-journey {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .ml-journey article:nth-child(4) {
    border-right: 0;
  }

  .ml-journey .ml-journey-referee {
    grid-column: span 2;
  }

  .expert-value-grid {
    grid-template-columns: 1fr 1fr;
  }

  .spreadsheet-card:nth-child(2) {
    border-right: 0;
  }

  .spreadsheet-card:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .hero-copy {
    padding: 5.5rem 0 4rem;
    border-right: 0;
  }

  .hero-visual {
    padding: 1rem 18px 5rem 0;
  }

  .section-head {
    gap: 1.6rem;
  }

  .intro-grid {
    grid-template-columns: 1fr;
  }

  .buy-case-reasons article {
    min-height: 185px;
  }

  .selection-path {
    grid-template-columns: 1fr 1fr;
  }

  .selection-step:nth-child(2) {
    border-right: 0;
  }

  .selection-step:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .intro-item,
  .intro-item:first-child,
  .intro-item:last-child {
    padding: 1.5rem;
  }

  .cta .section-inner {
    align-items: start;
  }
}

/* Concrete onboarding: preserve the two reading paths without dense card grids. */
.usage-overview {
  margin-block: 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-left: 5px solid var(--accent);
  background: var(--paper-deep);
  color: var(--ink);
}
.usage-overview h3 { margin: 0 0 0.8rem; font-size: 1.4rem; }
.usage-overview p { max-width: 80ch; margin: 0.8rem 0 0; }
.implementation-section { border-top: 1px solid var(--line); }
.implementation-guide { max-width: 940px; color: var(--ink); }
.implementation-guide > h3 {
  margin: 2.5rem 0 0.8rem;
  font-size: clamp(1.25rem, 3vw, 1.55rem);
  line-height: 1.3;
}
.implementation-guide p, .implementation-guide li { line-height: 1.7; }
.implementation-guide code, .intro-guide code {
  overflow-wrap: anywhere;
  font-size: 0.9em;
  color: inherit;
}
.workflow-routes { padding-left: 1.4rem; }
.workflow-routes li + li { margin-top: 1rem; }
.workflow-table-wrap { overflow-x: auto; margin-block: 1.5rem; }
.workflow-table { width: 100%; min-width: 590px; border-collapse: collapse; font-size: 0.9rem; }
.workflow-table caption { text-align: left; padding-bottom: 0.75rem; color: var(--ink-soft); }
.workflow-table th, .workflow-table td {
  border: 1px solid var(--line);
  padding: 0.8rem;
  text-align: left;
}
.workflow-table thead { color: var(--white); background: var(--ink); }
.workflow-table small { font-weight: 400; }
.agent-task {
  margin-block: 2rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border-left: 5px solid var(--accent);
  background: var(--paper-deep);
  color: var(--ink);
}
.agent-task h3 { margin-top: 0; }
.agent-task blockquote { margin: 1rem 0; line-height: 1.7; }

@media (max-width: 660px) {
  body {
    font-size: 16px;
  }

  .nav,
  .section-inner,
  .hero-inner,
  .footer-inner {
    width: min(calc(100% - 1.5rem), var(--content));
  }

  .demo-main {
    width: min(calc(100% - 1.5rem), 1120px);
  }

  .demo-player video {
    border-radius: 18px 18px 6px 18px;
    box-shadow: 9px 9px 0 var(--signal);
  }

  .nav {
    min-height: 70px;
    flex-wrap: wrap;
    gap: 0.65rem 1rem;
    padding-block: 0.75rem;
  }

  .nav-links {
    width: 100%;
    flex: 1 0 100%;
    flex-wrap: wrap;
    gap: 0.45rem 0.65rem;
    order: 2;
  }

  .nav-links a,
  .nav-links a:not(.nav-cta):not(:last-child) {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--white);
  }

  .nav-links .nav-cta {
    border-color: var(--ink);
  }

  .hero h1 {
    font-size: clamp(2.8rem, 12vw, 3.6rem);
    line-height: 1.06;
  }

  .orientation-heading h2,
  .section-title,
  .cta h2,
  .home-case-copy h2 {
    font-size: clamp(2.45rem, 12vw, 3.5rem);
    line-height: 0.98;
  }

  .section-inner,
  .prediction-orientation .section-inner {
    padding-block: 4rem;
  }

  .hero-actions,
  .footer-links {
    align-items: flex-start;
    flex-direction: column;
  }

  .report-body {
    padding: 1.4rem;
  }

  .process-row {
    grid-template-columns: 44px 1fr;
    gap: 1rem;
  }

  .process-row p {
    grid-column: 2;
  }

  .boundary-grid,
  .fit-gate,
  .footer-inner,
  .form-split,
  .route-grid,
  .selection-path,
  .selection-note,
  .buy-case-reasons,
  .plain-language-intro,
  .spreadsheet-story,
  .familiar-example-grid,
  .plain-problem-grid,
  .executive-priority-lead,
  .executive-priority-grid {
    grid-template-columns: 1fr;
  }

  .ml-journey,
  .prediction-journey,
  .improvement-cycle-list,
  .expert-value-grid {
    grid-template-columns: 1fr;
  }

  .prediction-journey li,
  .prediction-journey li:nth-child(2n),
  .prediction-journey li:nth-last-child(-n + 2) {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .prediction-journey li:last-child {
    border-bottom: 0;
  }

  .improvement-cycle-list li,
  .improvement-cycle-list li:nth-child(3n),
  .improvement-cycle-list li:nth-last-child(-n + 3) {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .improvement-cycle-list li:last-child {
    border-bottom: 0;
  }

  .prediction-journey span {
    min-height: auto;
    margin-bottom: 1.5rem;
  }

  .improvement-cycle-list span {
    min-height: auto;
    margin-bottom: 1.5rem;
  }

  .ml-journey article,
  .ml-journey article:nth-child(4),
  .ml-journey .ml-journey-referee {
    grid-column: auto;
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .ml-journey article:last-child {
    border-bottom: 0;
  }

  .ml-journey article span,
  .expert-value-grid span {
    min-height: auto;
    margin-bottom: 1.5rem;
  }

  .route-card {
    min-height: auto;
  }

  .spreadsheet-card,
  .spreadsheet-card:nth-child(2) {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .spreadsheet-card:last-child {
    border-bottom: 0;
  }

  .simple-use-steps li {
    grid-template-columns: 1fr;
  }

  .spreadsheet-label,
  .plain-problem-index {
    margin-bottom: 2.3rem;
  }

  .plain-problem-card {
    min-height: auto;
  }

  .executive-priority-grid article {
    min-height: auto;
  }

  .buy-case-reasons article {
    min-height: auto;
  }

  .selection-step,
  .selection-step:nth-child(2) {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .selection-step:last-child {
    border-bottom: 0;
  }

  .selection-index {
    margin-bottom: 2.5rem;
  }

  .boundary {
    min-height: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* AI-safety case study */
.case-hero {
  border-bottom: 1px solid var(--ink);
}

.case-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  padding-block: clamp(5.5rem, 10vw, 9rem);
}

.case-hero h1 {
  max-width: 830px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.6rem, 7vw, 7.2rem);
  font-weight: 400;
  letter-spacing: -0.065em;
  line-height: 0.91;
}

.case-lede {
  max-width: 780px;
  margin: 2.2rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.08rem, 1.7vw, 1.35rem);
}

.case-story-copy {
  max-width: 74ch;
  margin-bottom: 2rem;
  font-size: 1.05rem;
}

.case-story-copy p + p {
  margin-top: 1.25rem;
}

.case-contents {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 1.25rem;
  margin-top: 1.75rem;
}

.case-contents span {
  flex-basis: 100%;
  font-weight: 700;
}

.case-contents a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-underline-offset: 0.2em;
}

.case-technical {
  background: var(--paper-deep);
}

.case-detail-block {
  min-width: 0;
  padding-block: 2rem;
  border-top: 1px solid var(--line);
}

.case-detail-block h3 {
  margin: 0 0 1.25rem;
  font-size: clamp(1.35rem, 3vw, 1.8rem);
  line-height: 1.25;
}

.case-detail-block > p,
.case-detail-block > ul {
  max-width: 74ch;
}

.case-detail-block li + li {
  margin-top: 0.6rem;
}

.case-narrative .provenance-grid > div {
  min-width: 0;
}

.case-narrative .provenance-grid code {
  overflow-wrap: anywhere;
}

.case-narrative .research-certificate h3 {
  margin-top: 0;
}

.case-narrative .research-certificate p {
  margin-bottom: 0;
}

.case-qualifier {
  max-width: 760px;
  margin: 1.25rem 0 0;
  padding-left: 1.1rem;
  border-left: 4px solid var(--accent);
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.case-priority {
  max-width: 780px;
  margin: 1.5rem 0 0;
  padding: 1.25rem 1.4rem;
  border: 1px solid var(--ink);
  border-radius: 18px 18px 5px 18px;
  background: var(--signal);
}

.case-priority strong {
  display: block;
  font-size: 1.05rem;
}

.case-priority p {
  margin: 0.35rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.case-scorecard {
  overflow: hidden;
  border-radius: 30px 30px 30px 8px;
  color: var(--white);
  background: var(--ink);
  box-shadow: 18px 18px 0 var(--signal);
}

.case-scorecard-top {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.2rem;
  border-bottom: 1px solid #61707b;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.case-scorecard-top span:last-child {
  color: var(--signal);
}

.case-scorecard-body {
  padding: clamp(1.5rem, 4vw, 2.2rem);
}

.case-big-number {
  margin: 0;
  color: var(--signal);
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(5rem, 10vw, 8rem);
  line-height: 0.88;
}

.case-big-label {
  max-width: 350px;
  margin: 0.75rem 0 2rem;
  color: #dce3e7;
}

.case-metric-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid #526073;
  border-left: 1px solid #526073;
}

.case-metric-grid div {
  min-height: 112px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 1rem;
  border-right: 1px solid #526073;
  border-bottom: 1px solid #526073;
}

.case-metric-grid strong {
  color: var(--signal);
  font-size: 1.45rem;
}

.case-metric-grid span {
  color: #cdd6df;
  font-size: 0.76rem;
}

.evidence-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.evidence-card {
  min-height: 480px;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
}

.evidence-card-referee {
  color: var(--white);
  background: var(--ink);
}

.evidence-card-harness {
  background: var(--signal);
}

.evidence-card h3 {
  max-width: 580px;
  margin: 5rem 0 1.3rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 4.7vw, 4.6rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.evidence-card > p:not(.lane-number):not(.evidence-boundary) {
  margin: 0;
}

.evidence-card-referee > p:not(.lane-number):not(.evidence-boundary) {
  color: #dce3e7;
}

.evidence-card code,
.research-report code {
  padding: 0.08em 0.28em;
  border-radius: 4px;
  background: rgba(101, 88, 217, 0.12);
  font-size: 0.85em;
  overflow-wrap: anywhere;
}

.evidence-card-referee code {
  color: var(--signal);
  background: rgba(183, 243, 74, 0.1);
}

.evidence-boundary {
  margin: auto 0 0;
  padding-top: 2rem;
  border-top: 1px solid currentColor;
  font-size: 0.8rem;
}

.research-paths {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 1rem;
}

.research-path {
  min-height: 420px;
  display: flex;
  flex-direction: column;
  padding: clamp(2rem, 4vw, 3.5rem);
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
}

.research-path-supported {
  color: var(--white);
  background: var(--ink);
}

.research-path-next {
  background: var(--signal);
}

.research-path h3 {
  max-width: 650px;
  margin: 3.5rem 0 1.25rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 3.5vw, 3.7rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1;
}

.research-path > p:last-child {
  margin: auto 0 0;
}

.research-path-supported > p:last-child {
  color: #dce3e7;
}

.research-certificate {
  max-width: 980px;
  margin: 1rem 0 0;
  padding: 1.4rem 1.6rem;
  border-left: 6px solid var(--blue);
  color: var(--ink-soft);
  background: var(--paper-deep);
}

.case-table-wrap {
  width: 100%;
  overflow-x: auto;
  border: 1px solid #54636e;
  border-radius: 26px 26px 8px 26px;
  scrollbar-gutter: stable;
}

.case-table-wrap:focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 4px;
}

.case-table {
  width: 100%;
  min-width: 760px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.case-table th,
.case-table td {
  padding: 1.3rem 1.2rem;
  border-right: 1px solid #54636e;
  border-bottom: 1px solid #54636e;
  text-align: left;
  vertical-align: top;
}

.case-table th:last-child,
.case-table td:last-child {
  border-right: 0;
}

.case-table tbody tr:last-child th,
.case-table tbody tr:last-child td {
  border-bottom: 0;
}

.case-table thead th {
  color: var(--signal);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

.case-table tbody th {
  font-weight: 700;
}

.case-table td span,
.case-table th span {
  color: #b7c0c7;
  font-size: 0.8rem;
}

.case-emphasis {
  color: var(--signal);
  font-weight: 750;
}

.case-table-note {
  max-width: 920px;
  margin: 1.5rem 0 0;
  color: #c5cdd2;
  font-size: 0.82rem;
}

.method-sequence {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  overflow: hidden;
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
  background: var(--white);
}

.method-sequence article {
  min-height: 300px;
  display: flex;
  flex-direction: column;
  padding: 1.8rem;
  border-right: 1px solid var(--line);
}

.method-sequence article:last-child {
  border-right: 0;
  background: var(--signal);
}

.method-sequence article > span {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  font-weight: 750;
}

.method-sequence h3 {
  margin: 3.5rem 0 0.3rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 400;
}

.method-sequence strong {
  font-size: 1.15rem;
}

.method-sequence p {
  margin: auto 0 0;
  color: var(--ink-soft);
  font-size: 0.84rem;
}

.method-notes {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  margin-top: 1rem;
}

.method-notes article {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: 8px 22px 22px 22px;
}

.method-notes h3,
.method-notes p {
  margin: 0;
}

.method-notes h3 {
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
}

.method-notes p {
  color: var(--ink-soft);
  font-size: 0.86rem;
}

.case-report-link {
  display: inline-block;
  margin-top: 2rem;
}

.provenance-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(2rem, 6vw, 6rem);
}

.provenance-grid p {
  margin-top: 0;
}

.provenance-notice {
  padding: 2rem;
  border: 1px solid var(--ink);
  border-radius: 28px 28px 8px 28px;
  background: var(--white);
}

.provenance-notice strong {
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.provenance-notice p {
  margin: 1.2rem 0 0;
  color: var(--ink-soft);
  font-size: 0.9rem;
}

.home-case-study {
  border-bottom: 1px solid var(--ink);
  background: var(--paper-deep);
}

.home-case-card {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(2rem, 6vw, 6rem);
  padding: clamp(2rem, 5vw, 4.5rem);
  border: 1px solid var(--ink);
  border-radius: 34px 34px 10px 34px;
  background: var(--white);
}

.home-case-result {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-self: stretch;
  border-top: 1px solid var(--line);
  border-left: 1px solid var(--line);
}

.home-case-result div {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 145px;
  padding: 1.25rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

.home-case-result strong {
  color: var(--accent);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.5rem;
  font-weight: 400;
}

.home-case-result span {
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.home-case-copy h2 {
  max-width: 680px;
  margin: 0 0 1.2rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.5rem, 5vw, 5rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.98;
}

.home-case-copy > p:not(.eyebrow) {
  max-width: 650px;
  color: var(--ink-soft);
}

.research-report {
  width: min(calc(100% - 2.5rem), 980px);
  margin-inline: auto;
  padding: clamp(4rem, 8vw, 7rem) 0;
}

.research-report-header {
  padding-bottom: 4rem;
  border-bottom: 1px solid var(--ink);
}

.research-report h1 {
  max-width: 900px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.5rem, 8vw, 7.5rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.research-report-lede {
  max-width: 800px;
  margin: 2rem 0 0;
  color: var(--ink-soft);
  font-size: 1.12rem;
}

.research-report > section {
  padding: 3.5rem 0;
  border-bottom: 1px solid var(--line);
}

.research-report > section:last-child {
  border-bottom: 0;
}

.research-report h2 {
  margin: 0 0 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2rem, 4vw, 3.3rem);
  font-weight: 400;
  letter-spacing: -0.035em;
}

.research-report p,
.research-report li {
  max-width: 850px;
}

.research-report li {
  margin-bottom: 0.75rem;
}

.report-table-light {
  margin: 1.5rem 0;
  border-color: var(--line);
  background: var(--white);
}

.report-table-light .case-table th,
.report-table-light .case-table td {
  border-color: var(--line);
}

.report-table-light .case-table thead th {
  color: var(--accent);
}

.report-table-light .case-table td span,
.report-table-light .case-table th span {
  color: var(--ink-soft);
}

.report-table-wide .case-table {
  min-width: 1120px;
  font-size: 0.78rem;
}

.selected-row {
  background: rgba(183, 243, 74, 0.3);
}

.report-notice {
  margin-top: 1.5rem;
  padding: 1.25rem 1.5rem;
  border-left: 5px solid var(--accent);
  background: var(--paper-deep);
  color: var(--ink-soft);
}

@media (max-width: 900px) {
  .case-hero-grid,
  .evidence-split,
  .research-paths,
  .provenance-grid,
  .home-case-card {
    grid-template-columns: 1fr;
  }

  .method-sequence {
    grid-template-columns: 1fr 1fr;
  }

  .method-sequence article:nth-child(2) {
    border-right: 0;
  }

  .method-sequence article:nth-child(-n + 2) {
    border-bottom: 1px solid var(--line);
  }

  .method-notes {
    grid-template-columns: 1fr;
  }

  .case-scorecard {
    margin-right: 18px;
  }
}

@media (max-width: 660px) {
  .case-hero h1 {
    font-size: clamp(3.2rem, 16vw, 4.8rem);
  }

  .case-metric-grid,
  .method-sequence,
  .home-case-result {
    grid-template-columns: 1fr;
  }

  .method-sequence article,
  .method-sequence article:nth-child(2) {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }

  .method-sequence article:last-child {
    border-bottom: 0;
  }

  .method-sequence p {
    margin-top: 2rem;
  }

  .evidence-card {
    min-height: 420px;
  }

  .research-report {
    width: min(calc(100% - 1.5rem), 980px);
  }
}

/* Domain use-case guides */
.intro-guide {
  width: min(calc(100% - 2rem), 780px);
  margin-inline: auto;
  color: var(--ink);
  font-size: 1.08rem;
  line-height: 1.7;
}

.intro-opening {
  padding-block: clamp(3rem, 6vw, 5rem) 2.5rem;
}

.intro-opening h1 {
  margin: 0 0 1.75rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.7rem, 6vw, 4.8rem);
  font-weight: 400;
  letter-spacing: -0.045em;
  line-height: 1.05;
}

.intro-lede {
  font-size: 1.2rem;
}

.intro-example-note {
  color: var(--ink-soft);
  font-size: 0.92rem;
}

.intro-chapter {
  padding-block: 2.5rem;
  border-top: 1px solid var(--line);
}

.intro-chapter h2 {
  margin: 0.75rem 0 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.intro-chapter h3 {
  margin-top: 2rem;
  font-size: 1.3rem;
  line-height: 1.3;
}

.intro-referee {
  border-top: 4px solid var(--blue);
}

.intro-next-step {
  padding-bottom: 5rem;
}

.use-case-hero {
  border-bottom: 1px solid var(--ink);
}

.use-case-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, 0.8fr);
  gap: clamp(3rem, 7vw, 7rem);
  align-items: center;
  padding-block: clamp(5.5rem, 10vw, 9rem);
}

.use-case-breadcrumb {
  margin: 0 0 1.5rem;
  color: var(--ink-soft);
  font-size: 0.78rem;
}

.use-case-breadcrumb a {
  font-weight: 700;
}

.use-case-hero h1 {
  max-width: 860px;
  margin: 0;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(3.4rem, 7vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.92;
}

.use-case-lede {
  max-width: 780px;
  margin: 2rem 0 0;
  color: var(--ink-soft);
  font-size: clamp(1.05rem, 1.7vw, 1.3rem);
}

.use-case-fit-card {
  padding: clamp(2rem, 4vw, 3rem);
  border-radius: 32px 32px 32px 8px;
  color: var(--white);
  background: var(--ink);
  box-shadow: 16px 16px 0 var(--signal);
}

.use-case-fit-card h2 {
  margin: 0 0 1.5rem;
  color: var(--signal);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2.2rem;
  font-weight: 400;
  line-height: 1;
}

.use-case-fit-card ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.use-case-fit-card li {
  padding: 0.8rem 0;
  border-top: 1px solid #526073;
  color: #dce3e7;
  font-size: 0.9rem;
}

.use-case-fit-card strong {
  display: block;
  margin-bottom: 0.15rem;
  color: var(--white);
}

.use-case-example-grid,
.use-case-output-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.use-case-example,
.use-case-output {
  min-height: 270px;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 28px 8px 28px 28px;
  background: var(--white);
}

.use-case-example h3,
.use-case-output h3 {
  margin: 0 0 0.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.05;
}

.use-case-example p,
.use-case-output p {
  margin: 0;
  color: var(--ink-soft);
}

.use-case-keyword {
  display: inline-block;
  margin: 0 0 2.5rem;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.use-case-requirements {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid #526073;
  border-radius: 30px 30px 8px 30px;
  overflow: hidden;
  color: var(--white);
  background: var(--ink);
}

.use-case-requirement {
  min-height: 260px;
  padding: 1.8rem;
  border-right: 1px solid #526073;
}

.use-case-requirement:last-child {
  border-right: 0;
  color: var(--ink);
  background: var(--signal);
}

.use-case-requirement span {
  color: var(--signal);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  font-weight: 750;
}

.use-case-requirement:last-child span {
  color: var(--accent);
}

.use-case-requirement h3 {
  margin: 3rem 0 0.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 1.85rem;
  font-weight: 400;
  line-height: 1.05;
}

.use-case-requirement p {
  margin: 0;
  color: #dce3e7;
  font-size: 0.84rem;
}

.use-case-requirement:last-child p {
  color: var(--ink-soft);
}

.use-case-boundary {
  margin: 1rem 0 0;
  padding: 1.4rem 1.6rem;
  border-left: 6px solid var(--accent);
  color: var(--ink-soft);
  background: var(--paper-deep);
}

.use-case-method {
  max-width: 780px;
  margin: -1.2rem 0 2rem;
  color: var(--ink-soft);
  font-size: 1.05rem;
}

.use-case-decision-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.use-case-decision {
  min-height: 230px;
  padding: 2rem;
  border: 1px solid var(--line);
  border-radius: 28px 8px 28px 28px;
  color: var(--ink);
  background: var(--white);
}

.use-case-decision span {
  display: inline-block;
  margin-bottom: 2.5rem;
  color: var(--accent);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.7rem;
  font-weight: 750;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.use-case-decision h3 {
  margin: 0 0 0.8rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.05;
}

.use-case-decision p {
  margin: 0;
  color: var(--ink-soft);
}

.related-use-cases {
  border-bottom: 1px solid var(--ink);
  background: var(--paper-deep);
}

.related-use-cases .section-inner {
  padding-block: clamp(3.5rem, 7vw, 6rem);
}

.related-use-cases h2 {
  margin: 0 0 1.5rem;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(2.1rem, 4vw, 3.7rem);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.related-link-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
}

.related-link-grid a {
  min-height: 110px;
  display: flex;
  align-items: flex-end;
  padding: 1.2rem;
  border: 1px solid var(--line);
  border-radius: 18px 18px 6px 18px;
  background: var(--white);
  font-size: 0.84rem;
  font-weight: 750;
  text-decoration: none;
}

.related-link-grid a:hover {
  border-color: var(--ink);
  background: var(--signal);
}

@media (max-width: 900px) {
  .use-case-hero-grid {
    grid-template-columns: 1fr;
  }

  .use-case-requirements,
  .use-case-decision-grid,
  .related-link-grid {
    grid-template-columns: 1fr 1fr;
  }

  .use-case-requirement:nth-child(2) {
    border-right: 0;
  }

  .use-case-requirement:nth-child(-n + 2) {
    border-bottom: 1px solid #526073;
  }
}

@media (max-width: 660px) {
  .use-case-hero h1 {
    font-size: clamp(2.5rem, 11vw, 3.4rem);
    line-height: 1.06;
  }

  .use-case-example-grid,
  .use-case-output-grid,
  .use-case-decision-grid,
  .use-case-requirements,
  .related-link-grid {
    grid-template-columns: 1fr;
  }

  .use-case-fit-card {
    margin-right: 14px;
  }

  .use-case-requirement,
  .use-case-requirement:nth-child(2) {
    min-height: auto;
    border-right: 0;
    border-bottom: 1px solid #526073;
  }

  .use-case-requirement:last-child {
    border-bottom: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .domain-link-card {
    transition: none;
  }
}

@media (forced-colors: active) {
  .button,
  .nav-links .nav-cta,
  .selection-note,
  .case-priority,
  .report,
  .case-scorecard {
    border: 2px solid CanvasText;
  }

  .hero h1 em::after {
    display: none;
  }
}

/* ==========================================================================
   Motion and polish layer
   Pure CSS and inert SVG: no scripts, no new requests beyond same-origin SVG.
   Every effect is decorative and progressive. Content is fully visible when a
   browser lacks a feature, and motion is removed under reduced-motion.
   ========================================================================== */

:root {
  --blue: var(--accent);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --header-glass: rgba(246, 248, 251, 0.8);
}

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

h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

p,
li,
dd,
figcaption {
  text-wrap: pretty;
}

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

/* Cross-page transitions for same-origin navigation; ignored where unsupported. */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: vt-out 220ms var(--ease-out) both;
}

::view-transition-new(root) {
  animation: vt-in 480ms var(--ease-out) both;
}

@keyframes vt-out {
  to { opacity: 0; translate: 0 -12px; }
}

@keyframes vt-in {
  from { opacity: 0; translate: 0 18px; }
}

/* Header: frosted and sticky where the navigation fits on one row. */
@media (min-width: 661px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 15;
    background: rgba(246, 248, 251, 0.96);
    view-transition-name: site-header;
  }

  @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .site-header {
      background: var(--header-glass);
      -webkit-backdrop-filter: saturate(1.6) blur(16px);
      backdrop-filter: saturate(1.6) blur(16px);
    }
  }

  main [id] {
    scroll-margin-top: 104px;
  }

  .nav-links a:not(.nav-cta) {
    padding-block: 0.3rem;
    background: linear-gradient(currentColor, currentColor) left 100% / 0 2px no-repeat;
    transition: background-size 320ms var(--ease-out);
  }

  .nav-links a:not(.nav-cta):hover {
    text-decoration: none;
    background-size: 100% 2px;
  }
}

.brand-mark {
  transition: transform 420ms var(--ease-out);
}

.brand:hover .brand-mark {
  transform: rotate(-90deg);
}

/* Reading-progress bar tied to page scroll. */
@supports (animation-timeline: scroll()) {
  body::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    z-index: 30;
    height: 3px;
    pointer-events: none;
    background: linear-gradient(90deg, var(--accent), var(--signal));
    transform-origin: 0 50%;
    animation: grow-x linear both;
    animation-timeline: scroll(root);
  }

  @media (min-width: 661px) {
    .site-header {
      animation: header-settle linear both;
      animation-timeline: scroll(root);
      animation-range: 0 160px;
    }
  }
}

@keyframes grow-x {
  from { scale: 0 1; }
  to { scale: 1 1; }
}

@keyframes header-settle {
  to { box-shadow: 0 10px 30px -18px rgba(11, 18, 32, 0.45); }
}

/* Buttons: lift, sheen, and the site's offset-shadow motif. */
.button,
.nav-links .nav-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color 220ms ease, background-color 220ms ease, border-color 220ms ease, transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}

.button::after,
.nav-links .nav-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-120%);
  transition: transform 700ms var(--ease-out);
}

@media (hover: hover) {
  .button:hover,
  .nav-links .nav-cta:hover {
    transform: translate(-2px, -2px);
    box-shadow: 4px 4px 0 var(--ink);
  }

  .button:hover::after,
  .nav-links .nav-cta:hover::after {
    transform: translateX(120%);
  }
}

.button:active,
.nav-links .nav-cta:active {
  transform: none;
  box-shadow: none;
}

.text-link {
  text-underline-offset: 0.2em;
  transition: text-underline-offset 220ms var(--ease-out), color 220ms ease;
}

.text-link:hover {
  text-underline-offset: 0.38em;
}

/* Section labels gain an editorial rule. */
.section-number::before {
  content: "";
  display: inline-block;
  width: 2rem;
  height: 1px;
  margin-right: 0.75rem;
  vertical-align: 0.3em;
  background: currentColor;
  transform-origin: 0 50%;
}

/* Status dot on the opening eyebrow. */
.hero .eyebrow::before,
.beta-hero .eyebrow::before,
.case-hero .eyebrow::before,
.use-case-hero .eyebrow::before {
  content: "";
  display: inline-block;
  width: 0.62rem;
  height: 0.62rem;
  margin-right: 0.7rem;
  vertical-align: -0.05em;
  border: 1px solid var(--ink);
  border-radius: 50%;
  background: var(--signal);
}

/* Opening heroes: graph-paper field, soft light, and staged entrance. */
.hero,
.beta-hero,
.case-hero,
.use-case-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.hero::before,
.beta-hero::before,
.case-hero::before,
.use-case-hero::before {
  content: "";
  position: absolute;
  inset: -48px;
  z-index: -2;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(11, 18, 32, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11, 18, 32, 0.055) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 75% at 72% 42%, #000 15%, transparent 72%);
  mask-image: radial-gradient(ellipse 70% 75% at 72% 42%, #000 15%, transparent 72%);
}

.hero::after,
.beta-hero::after,
.case-hero::after,
.use-case-hero::after {
  content: "";
  position: absolute;
  top: -30%;
  right: -18%;
  z-index: -1;
  width: min(1100px, 95vw);
  aspect-ratio: 1;
  pointer-events: none;
  background:
    radial-gradient(closest-side at 38% 42%, rgba(183, 243, 74, 0.42), transparent),
    radial-gradient(closest-side at 64% 62%, rgba(91, 79, 199, 0.2), transparent);
}

@keyframes rise {
  from { opacity: 0; translate: 0 26px; filter: blur(6px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}

.hero-copy > *,
.beta-hero .section-inner > *,
.case-hero-copy > *,
.case-scorecard,
.use-case-hero-grid > * > *,
:where(.legal-main) > :nth-child(-n + 3),
.demo-heading > *,
.demo-player,
.confirmation-card > *,
.research-report-header > *,
.intro-opening > * {
  animation: rise 900ms var(--ease-out) both;
}

.hero-copy > :nth-child(2),
.beta-hero .section-inner > :nth-child(2),
.case-hero-copy > :nth-child(2),
.use-case-hero-grid > * > :nth-child(2),
.legal-main > :nth-child(2),
.demo-heading > :nth-child(2),
.confirmation-card > :nth-child(2),
.research-report-header > :nth-child(2),
.intro-opening > :nth-child(2) {
  animation-delay: 90ms;
}

.hero-copy > :nth-child(3),
.beta-hero .section-inner > :nth-child(3),
.case-hero-copy > :nth-child(3),
.use-case-hero-grid > * > :nth-child(3),
.legal-main > :nth-child(3),
.demo-heading > :nth-child(3),
.confirmation-card > :nth-child(3),
.research-report-header > :nth-child(3),
.intro-opening > :nth-child(3) {
  animation-delay: 200ms;
}

.hero-copy > :nth-child(4),
.beta-hero .section-inner > :nth-child(4),
.case-hero-copy > :nth-child(4),
.use-case-hero-grid > * > :nth-child(4),
.confirmation-card > :nth-child(4),
.research-report-header > :nth-child(4),
.intro-opening > :nth-child(4) {
  animation-delay: 300ms;
}

.hero-copy > :nth-child(n + 5),
.case-hero-copy > :nth-child(n + 5),
.use-case-hero-grid > * > :nth-child(n + 5),
.confirmation-card > :nth-child(n + 5),
.research-report-header > :nth-child(n + 5),
.intro-opening > :nth-child(n + 5),
.case-scorecard,
.use-case-hero-grid > :nth-child(2) > *,
.demo-player {
  animation-delay: 400ms;
}

/* Headlines and ledes stay readable from first paint: they settle, not fade. */
@keyframes settle {
  from { translate: 0 22px; }
  to { translate: 0 0; }
}

:is(.hero, .beta-hero, .case-hero, .use-case-hero, .legal-main, .demo-heading, .confirmation-card, .research-report-header, .intro-opening) h1,
.hero-lede,
.hero-qualifier,
.beta-lede,
.case-lede,
.use-case-lede,
.legal-lede,
.demo-lede,
.research-report-lede,
.intro-lede {
  animation-name: settle;
}

/* Home hero: the example card sits beside the headline on wide screens. */
@media (min-width: 1100px) {
  .hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(380px, 470px);
    gap: clamp(2.5rem, 4vw, 4.5rem);
    align-items: center;
  }

  .hero h1 {
    font-size: clamp(3.65rem, 4.7vw, 5.4rem);
  }

  .hero-art {
    animation: rise 1100ms var(--ease-out) 300ms both;
  }
}

/* Dark panels: a soft glow behind the content. */
.dark-section,
.lane-referee,
.buy-case,
.orientation-callout,
.ablation-explainer,
.plain-boundary,
.fit-gate-yes,
.route-card-technical,
.evidence-card-referee,
.research-path-supported,
.beta-card-agent,
.request-aside,
.case-scorecard,
.use-case-fit-card,
.use-case-requirements {
  position: relative;
  isolation: isolate;
  overflow: clip;
}

.dark-section::before,
.lane-referee::before,
.buy-case::before,
.orientation-callout::before,
.ablation-explainer::before,
.plain-boundary::before,
.fit-gate-yes::before,
.route-card-technical::before,
.evidence-card-referee::before,
.research-path-supported::before,
.beta-card-agent::before,
.request-aside::before,
.case-scorecard::before,
.use-case-fit-card::before,
.use-case-requirements::before {
  content: "";
  position: absolute;
  top: -35%;
  right: -25%;
  z-index: -1;
  width: max(420px, 70%);
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(183, 243, 74, 0.16), rgba(91, 79, 199, 0.1) 55%, transparent);
}

.dark-section::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}

/* Containers whose children reveal on scroll must not become scroll containers. */
.prediction-journey,
.improvement-cycle,
.ml-journey,
.spreadsheet-story,
.selection-path,
.method-sequence {
  overflow: clip;
}

/* An accent rule along each step sequence. */
.prediction-journey,
.ml-journey,
.selection-path,
.method-sequence,
.improvement-cycle-list {
  position: relative;
}

.prediction-journey::after,
.ml-journey::after,
.selection-path::after,
.method-sequence::after,
.improvement-cycle-list::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  z-index: 1;
  height: 4px;
  pointer-events: none;
  background: linear-gradient(90deg, var(--accent), var(--signal), var(--accent));
}

/* Link cards: on-brand offset shadow and a nudge toward the destination. */
.audience-path,
.route-card,
.domain-link-card,
.related-link-grid a {
  transition: transform 320ms var(--ease-out), box-shadow 320ms var(--ease-out), background-color 220ms ease, border-color 220ms ease;
}

.audience-path .text-link,
.route-card > span:last-child,
.domain-card-link {
  display: inline-block;
  transition: translate 320ms var(--ease-out);
}

@media (hover: hover) {
  .audience-path:hover,
  .route-card-gentle:hover,
  .domain-link-card:hover,
  .related-link-grid a:hover {
    transform: translate(-4px, -4px);
    box-shadow: 8px 8px 0 var(--signal);
  }

  .route-card-technical:hover {
    transform: translate(-4px, -4px);
    box-shadow: 16px 16px 0 var(--signal);
  }

  .domain-link-card:hover,
  .related-link-grid a:hover {
    box-shadow: 8px 8px 0 var(--ink);
  }

  .audience-path:hover .text-link,
  .route-card:hover > span:last-child,
  .domain-link-card:hover .domain-card-link {
    translate: 6px 0;
  }

  .process-row:hover::before {
    color: var(--ink);
    background: var(--signal);
    border-color: var(--ink);
  }

  .case-table tbody tr:hover {
    background: rgba(183, 243, 74, 0.08);
  }

  .demo-player video:hover {
    box-shadow: 22px 22px 0 var(--signal);
  }
}

.process-row::before {
  width: 48px;
  height: 48px;
  display: inline-grid;
  place-items: center;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--white);
  transition: background-color 260ms ease, border-color 260ms ease, color 260ms ease;
}

.demo-player video {
  transition: box-shadow 320ms var(--ease-out);
}

.case-table tbody tr {
  transition: background-color 200ms ease;
}

@media (max-width: 660px) {
  .process-row::before {
    width: 38px;
    height: 38px;
  }
}

/* Forms: calmer fields with a clear, animated focus state. */
.form-row input,
.form-row select,
.form-row textarea {
  transition: border-color 200ms ease, background-color 200ms ease, box-shadow 260ms var(--ease-out);
}

.form-row input:hover,
.form-row select:hover,
.form-row textarea:hover {
  border-color: var(--ink-soft);
}

.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  background: var(--white);
  box-shadow: 0 0 0 6px rgba(91, 79, 199, 0.14);
}

.beta-form {
  box-shadow: 14px 14px 0 var(--paper-deep);
}

.case-scorecard,
.report {
  animation: rise 900ms var(--ease-out) 400ms both;
}

/* Scroll-driven reveals: only where supported and motion is welcome. */
@keyframes reveal {
  from { opacity: 0; translate: 0 36px; scale: 0.985; }
  to { opacity: 1; translate: 0 0; scale: 1; }
}

@keyframes reveal-side {
  from { opacity: 0; translate: 32px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes count-in {
  from { opacity: 0; translate: 0 0.5em; }
  to { opacity: 1; translate: 0 0; }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .section-head,
    .orientation-heading,
    .route-heading,
    .improvement-cycle-head,
    .plain-language-intro,
    .expert-intro,
    .executive-priority-lead,
    .usage-overview,
    .audience-path,
    .lane,
    .intro-item,
    .process-row,
    .selection-note,
    .buy-case,
    .home-case-card,
    .fit-gate-card,
    .boundary,
    .route-card,
    .spreadsheet-card,
    .simple-use,
    .plain-problem-card,
    .executive-priority,
    .plain-boundary,
    .orientation-callout,
    .ablation-explainer,
    .evidence-card,
    .research-path,
    .research-certificate,
    .method-notes article,
    .use-case-example,
    .use-case-output,
    .use-case-decision,
    .related-link-grid a,
    .beta-card,
    .beta-form,
    .request-aside,
    .agent-callout,
    .case-detail-block,
    .provenance-grid > *,
    .familiar-example-grid article,
    .expert-value-grid article,
    .executive-priority-grid article,
    .buy-case-reasons article,
    .prediction-journey li,
    .ml-journey article,
    .improvement-cycle-list li,
    .selection-step,
    .method-sequence article,
    .use-case-requirement,
    .case-table-wrap,
    .intro-chapter,
    .cta h2 {
      animation: reveal var(--ease-out) both;
      animation-timeline: view();
      animation-range: cover 0% cover 26vh;
    }

    .outcome-list li {
      animation: reveal-side var(--ease-out) both;
      animation-timeline: view();
      animation-range: cover 0% cover 22vh;
    }

    .home-case-result strong {
      display: inline-block;
      animation: count-in var(--ease-out) both;
      animation-timeline: view();
      animation-range: cover 0% cover 24vh;
    }

    /* Stagger siblings that enter together. */
    :is(.prediction-journey li, .ml-journey article, .improvement-cycle-list li, .selection-step, .method-sequence article, .use-case-requirement, .intro-grid > *, .lane-grid > *, .fit-gate > *, .boundary-grid > *, .route-grid > *, .audience-paths > *, .evidence-split > *, .research-paths > *, .beta-grid > *, .use-case-example-grid > *, .use-case-output-grid > *, .use-case-decision-grid > *, .related-link-grid > *, .expert-value-grid > *, .executive-priority-grid > *, .buy-case-reasons > *, .familiar-example-grid > *, .method-notes > *, .home-case-result > * strong):nth-child(2) {
      animation-range: cover 3vh cover 29vh;
    }

    :is(.prediction-journey li, .ml-journey article, .improvement-cycle-list li, .selection-step, .method-sequence article, .use-case-requirement, .intro-grid > *, .lane-grid > *, .boundary-grid > *, .use-case-decision-grid > *, .related-link-grid > *, .expert-value-grid > *, .executive-priority-grid > *, .familiar-example-grid > *, .method-notes > *):nth-child(3) {
      animation-range: cover 6vh cover 32vh;
    }

    :is(.prediction-journey li, .ml-journey article, .improvement-cycle-list li, .selection-step, .method-sequence article, .use-case-requirement, .related-link-grid > *, .expert-value-grid > *):nth-child(n + 4) {
      animation-range: cover 9vh cover 35vh;
    }

    .home-case-result > :nth-child(3) strong {
      animation-range: cover 6vh cover 30vh;
    }

    .home-case-result > :nth-child(4) strong {
      animation-range: cover 9vh cover 33vh;
    }

    .outcome-list li:nth-child(2) { animation-range: cover 3vh cover 25vh; }
    .outcome-list li:nth-child(3) { animation-range: cover 6vh cover 28vh; }
    .outcome-list li:nth-child(n + 4) { animation-range: cover 9vh cover 31vh; }

    .section-number::before {
      animation: grow-x var(--ease-out) both;
      animation-timeline: view();
      animation-range: cover 0% cover 30vh;
    }
  }
}

/* Accessibility and output fallbacks. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-delay: 0s !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }

  .hero::before,
  .hero::after,
  .beta-hero::before,
  .beta-hero::after,
  .case-hero::before,
  .case-hero::after,
  .use-case-hero::before,
  .use-case-hero::after {
    animation: none !important;
  }

  @view-transition {
    navigation: none;
  }
}

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  body::before,
  .hero-art {
    display: none;
  }

  .site-header {
    position: static;
  }
}

@media (forced-colors: active) {
  body::before,
  .hero::before,
  .hero::after,
  .hero-art,
  .beta-hero::before,
  .beta-hero::after,
  .case-hero::before,
  .case-hero::after,
  .use-case-hero::before,
  .use-case-hero::after,
  .dark-section::after {
    display: none;
  }
}

/* Home hero: a meaningful example beside the headline (generated by make_hero.py).
   The unanimated state is the finished card, so reduced motion shows it complete.
   The sequence plays once, in under five seconds. */
.hero-art {
  display: none;
}

.hero-art-svg {
  display: block;
  width: 100%;
  height: auto;
}

.hero-art-narrow {
  display: none;
}

.hero-art text {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  fill: #dce3e7;
}

.hero-art .ha-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-art .ha-soft { fill: #9aa7b8; }
.hero-art .ha-signal { fill: var(--signal); }
.hero-art .ha-strong { fill: var(--ink); font-size: 11.5px; font-weight: 700; }
.hero-art .ha-small { font-size: 11px; }
.hero-art .ha-name { font-size: 13.5px; font-weight: 650; fill: var(--white); }
.hero-art .ha-tag { font-size: 12px; font-weight: 800; fill: var(--status); }
.hero-art .ha-lucky { font-size: 12px; font-weight: 800; fill: #ff8b96; opacity: 0; }

/* Phone card: drawn near 1:1, so these sizes are close to on-screen pixels. */
.hero-art-narrow .ha-mono { font-size: 11.5px; }
.hero-art-narrow .ha-strong { font-size: 12px; }
.hero-art-narrow .ha-small { font-size: 12px; }
.hero-art-narrow .ha-name { font-size: 15px; }
.hero-art-narrow .ha-tag { font-size: 13.5px; }
.hero-art-narrow .ha-lucky { font-size: 13.5px; }

.ha-shadow { fill: var(--signal); }
.ha-panel { fill: var(--ink); }
.ha-rule { stroke: #2f3e52; }
.ha-sep { stroke: #1d2a3d; }
.ha-baseline { stroke: #8a96a8; stroke-width: 1.5; stroke-dasharray: 5 4; }
.ha-evbar-box { fill: var(--signal); }
.ha-lock { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.ha-unnamed { fill: #3a4a5e; }
.ha-range { fill: none; stroke: var(--status); stroke-width: 2.5; stroke-linecap: round; }
.ha-dot { fill: var(--status); stroke: var(--ink); stroke-width: 2; }
.ha-st-supported { --status: var(--signal); }
.ha-st-provisional { --status: #a39bff; }
.ha-st-unresolved { --status: #6f7e94; }

@keyframes ha-in {
  from { opacity: 0; translate: -10px 0; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes ha-pop {
  from { opacity: 0; scale: 0.6; }
  to { opacity: 1; scale: 1; }
}

/* Tested one way, scores bounce; evaluated together, they settle with evidence. */
@keyframes ha-dot {
  0%, 4% { opacity: 0; translate: var(--s) 0; fill: #f7f9fb; }
  12% { opacity: 1; translate: var(--s) 0; }
  24% { translate: var(--j1) 0; }
  36% { translate: var(--j2) 0; }
  50% { translate: 0 0; }
  66% { fill: #f7f9fb; }
  82%, 100% { opacity: 1; translate: 0 0; fill: var(--status); }
}

@keyframes ha-range {
  0%, 52% { opacity: 0; scale: 0.04 1; stroke: #f7f9fb; }
  70% { opacity: 1; scale: 1 1; stroke: #f7f9fb; }
  82%, 100% { opacity: 1; scale: 1 1; stroke: var(--status); }
}

@keyframes ha-tag {
  0%, 78% { opacity: 0; translate: -8px 0; }
  92%, 100% { opacity: 1; translate: 0 0; }
}

@keyframes ha-lucky {
  0%, 32% { opacity: 0; translate: 0 6px; }
  40%, 64% { opacity: 1; translate: 0 0; }
  76%, 100% { opacity: 0; translate: 0 0; }
}

@media (prefers-reduced-motion: no-preference) {
  .hero-art :is(.ha-row, .ha-evbar) {
    transform-box: fill-box;
    transform-origin: center;
    animation: ha-in 600ms var(--ease-out) both;
  }

  .hero-art .ha-evbar {
    animation-name: ha-pop;
    animation-delay: 300ms;
  }

  .hero-art .ha-dot {
    animation: ha-dot 4.2s var(--ease-out) 400ms both;
  }

  .hero-art .ha-range {
    transform-box: fill-box;
    transform-origin: center;
    animation: ha-range 4.2s var(--ease-out) 400ms both;
  }

  .hero-art .ha-tag {
    animation: ha-tag 4.2s var(--ease-out) 400ms both;
  }

  .hero-art .ha-lucky {
    animation: ha-lucky 4.2s var(--ease-out) 400ms both;
  }

  .hero-art .ha-k-0 { --s: -108px; --j1: -68px; --j2: -18px; }
  .hero-art-narrow .ha-k-0 { --s: -141.3px; --j1: -89px; --j2: -23.5px; }
  .hero-art .ha-k-0 :is(.ha-dot, .ha-range, .ha-tag) { animation-delay: 0.40s; }
  .hero-art .ha-k-1 { --s: -58px; --j1: -32px; --j2: 22px; }
  .hero-art-narrow .ha-k-1 { --s: -75.9px; --j1: -41.9px; --j2: 28.8px; }
  .hero-art .ha-k-1 :is(.ha-dot, .ha-range, .ha-tag) { animation-delay: 0.46s; }
  .hero-art .ha-k-2 { --s: -140px; --j1: -50px; --j2: 42px; }
  .hero-art-narrow .ha-k-2 { --s: -183.2px; --j1: -65.4px; --j2: 54.9px; }
  .hero-art .ha-k-2 :is(.ha-dot, .ha-range, .ha-tag) { animation-delay: 0.52s; }
  .hero-art .ha-k-3 { --s: -12px; --j1: 40px; --j2: -26px; }
  .hero-art-narrow .ha-k-3 { --s: -15.7px; --j1: 52.3px; --j2: -34px; }
  .hero-art .ha-k-3 :is(.ha-dot, .ha-range, .ha-tag) { animation-delay: 0.58s; }
  .hero-art .ha-k-4 { --s: -6px; --j1: -28px; --j2: 32px; }
  .hero-art-narrow .ha-k-4 { --s: -7.9px; --j1: -36.7px; --j2: 41.8px; }
  .hero-art .ha-k-4 :is(.ha-dot, .ha-range, .ha-tag) { animation-delay: 0.64s; }
  .hero-art .ha-row-0 { animation-delay: 80ms; }
  .hero-art .ha-row-1 { animation-delay: 140ms; }
  .hero-art .ha-row-2 { animation-delay: 200ms; }
  .hero-art .ha-row-3 { animation-delay: 260ms; }
  .hero-art .ha-row-4 { animation-delay: 320ms; }
  .hero-art .ha-row-5 { animation-delay: 380ms; }
}

@media (min-width: 1100px) {
  .hero-art {
    display: block;
  }
}

@media (max-width: 1099px) {
  .hero-art {
    display: block;
    width: min(100%, 520px);
    margin: 0 0 4.5rem;
  }
}

@media (max-width: 640px) {
  .hero-art-wide {
    display: none;
  }

  .hero-art-narrow {
    display: block;
  }
}

/* Useful-or-lucky figure (generated by scripts/make_lucky.py) and the
   explainer's illustration figures. The unanimated state is the finished
   figure; motion follows scroll only where supported and welcome. */
.intro-figure {
  margin: 2rem 0;
}

.intro-figure img,
.lucky-art {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 12px;
  box-shadow: 10px 10px 0 var(--paper-deep);
}

.lucky-art text {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  fill: var(--ink);
}

.lucky-art .lf-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--accent);
}

.lucky-art .lf-soft { fill: var(--ink-soft); }
.lucky-art .lf-title { font-size: 14px; font-weight: 650; }
.lucky-art .lf-small { font-size: 10px; fill: var(--ink-soft); }
.lucky-art .lf-tag { font-size: 11px; font-weight: 800; }
.lucky-art .lf-lucky { fill: var(--red); opacity: 0; }
.lucky-art .lf-tag-supported { fill: #385c13; }
.lucky-art .lf-tag-unresolved { fill: var(--ink-soft); }
.lucky-art .lf-phase-1 { opacity: 0; }

.lf-card { fill: var(--white); stroke: #c3ccd8; }
.lf-baseline { stroke: var(--ink); stroke-dasharray: 4 4; }
.lf-range { fill: none; stroke: var(--status); stroke-width: 1.8; stroke-linecap: round; }
.lf-dot { fill: var(--dot-fill); stroke: var(--dot-stroke); stroke-width: 1.5; }
.lf-supported { --status: #4f8a12; --dot-fill: var(--signal); --dot-stroke: #385c13; }
.lf-unresolved { --status: #9aa6b6; --dot-fill: var(--status); --dot-stroke: var(--white); }
.lf-col-9 { --status: #6f7e94; }

@keyframes lf-pop { from { opacity: 0; scale: 0.3; } to { opacity: 1; scale: 1; } }
@keyframes lf-dot-reveal { 0%, 80% { fill: var(--ink); stroke: var(--white); } 100% { fill: var(--dot-fill); stroke: var(--dot-stroke); } }
@keyframes lf-open { from { opacity: 0; scale: 1 0.05; } to { opacity: 1; scale: 1 1; } }
@keyframes lf-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lf-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes lf-blink { 0% { opacity: 0; } 25%, 70% { opacity: 1; } 100% { opacity: 0; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .lucky-figure {
      view-timeline: --lucky block;
    }

    .lucky-art :is(g, path, circle, text) {
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--ease-out);
      animation-timeline: --lucky;
      transform-box: fill-box;
      transform-origin: center;
    }

    /* Scored one way, every dot is the same ink until the evidence arrives. */
    .lucky-art .lf-dot {
      animation-name: lf-pop, lf-dot-reveal;
    }

    .lucky-art .lf-range { animation-name: lf-open; animation-range: cover 34% cover 42%; }
    .lucky-art .lf-phase-1 { animation-name: lf-blink; animation-range: cover 12% cover 40%; }
    .lucky-art .lf-phase-2 { animation-name: lf-in; animation-range: cover 36% cover 40%; }
    .lucky-art .lf-lucky { animation-name: lf-blink; animation-range: cover 22% cover 41%; }
    .lucky-art .lf-tag-unresolved,
    .lucky-art .lf-tag-supported { animation-name: lf-in; animation-range: cover 42% cover 47%; }

    .lucky-art .lf-col-0 .lf-dot { animation-range: cover 12% cover 16%, cover 14% cover 46%; }
    .lucky-art .lf-col-1 .lf-dot { animation-range: cover 12.7% cover 16.7%, cover 14% cover 46%; }
    .lucky-art .lf-col-2 .lf-dot { animation-range: cover 13.4% cover 17.4%, cover 14% cover 46%; }
    .lucky-art .lf-col-3 .lf-dot { animation-range: cover 14.1% cover 18.1%, cover 14% cover 46%; }
    .lucky-art .lf-col-4 .lf-dot { animation-range: cover 14.8% cover 18.8%, cover 14% cover 46%; }
    .lucky-art .lf-col-5 .lf-dot { animation-range: cover 15.5% cover 19.5%, cover 14% cover 46%; }
    .lucky-art .lf-col-6 .lf-dot { animation-range: cover 16.2% cover 20.2%, cover 14% cover 46%; }
    .lucky-art .lf-col-7 .lf-dot { animation-range: cover 16.9% cover 20.9%, cover 14% cover 46%; }
    .lucky-art .lf-col-8 .lf-dot { animation-range: cover 17.6% cover 21.6%, cover 14% cover 46%; }
    .lucky-art .lf-col-9 .lf-dot { animation-range: cover 18.3% cover 22.3%, cover 14% cover 46%; }
    .lucky-art .lf-col-10 .lf-dot { animation-range: cover 19% cover 23%, cover 14% cover 46%; }
    .lucky-art .lf-col-11 .lf-dot { animation-range: cover 19.7% cover 23.7%, cover 14% cover 46%; }
    .lucky-art .lf-col-12 .lf-dot { animation-range: cover 20.4% cover 24.4%, cover 14% cover 46%; }
  }
}

/* Ablation comparison (generated by scripts/make_ablation.py). */
.ablation-compare {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
  margin: 1rem 0 0;
}

.ab-art {
  display: block;
  width: 100%;
  height: auto;
}

.ab-art text {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 13px;
  fill: #dce3e7;
}

.ab-art .ab-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ab-art .ab-title,
.ab-art .ab-signal { fill: var(--signal); }
.ab-art .ab-soft { fill: #9aa7b8; }
.ab-art .ab-warn { fill: #ff8b96; }
.ab-art .ab-strong { font-weight: 700; fill: var(--white); }
.ab-art .ab-tag { font-size: 12px; font-weight: 800; fill: #ff8b96; }

.ab-card { fill: rgba(255, 255, 255, 0.03); stroke: #526073; }
.ab-feat { fill: #6f7e94; }
.ab-feat-off { fill: none; stroke: #ff8b96; stroke-dasharray: 2 2; }
.ab-score { fill: #3a4a5e; }
.ab-score-best { fill: #ff8b96; }
.ab-family { fill: rgba(183, 243, 74, 0.06); stroke: var(--signal); stroke-width: 1.5; }
.ab-chip { fill: #a39bff; }

@keyframes ab-in { from { opacity: 0; translate: -10px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes ab-grow { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes ab-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes ab-gather { from { opacity: 0; scale: 0.6; } to { opacity: 1; scale: 1; } }

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .ablation-compare {
      view-timeline: --ablation block;
    }

    .ab-art :is(g, rect, text) {
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--ease-out);
      animation-timeline: --ablation;
    }

    .ab-art .ab-score {
      transform-box: fill-box;
      transform-origin: 0 50%;
      animation-name: ab-grow;
    }

    .ab-art .ab-chips {
      transform-box: fill-box;
      transform-origin: center;
      animation-name: ab-gather;
      animation-range: cover 18% cover 30%;
    }

    .ab-art .ab-tag,
    .ab-art .ab-warn { animation-name: ab-fade; animation-range: cover 40% cover 44%; }

    .ab-art .ab-run-0 { animation-name: ab-in; animation-range: cover 12% cover 16%; }
    .ab-art .ab-run-0 .ab-score { animation-range: cover 14% cover 18%; }
    .ab-art .ab-run-1 { animation-name: ab-in; animation-range: cover 15% cover 19%; }
    .ab-art .ab-run-1 .ab-score { animation-range: cover 17% cover 21%; }
    .ab-art .ab-run-2 { animation-name: ab-in; animation-range: cover 18% cover 22%; }
    .ab-art .ab-run-2 .ab-score { animation-range: cover 20% cover 24%; }
    .ab-art .ab-run-3 { animation-name: ab-in; animation-range: cover 21% cover 25%; }
    .ab-art .ab-run-3 .ab-score { animation-range: cover 23% cover 27%; }
    .ab-art .ab-run-4 { animation-name: ab-in; animation-range: cover 24% cover 28%; }
    .ab-art .ab-run-4 .ab-score { animation-range: cover 26% cover 30%; }
    .ab-art .ab-run-5 { animation-name: ab-in; animation-range: cover 27% cover 31%; }
    .ab-art .ab-run-5 .ab-score { animation-range: cover 29% cover 33%; }
    .ab-art .ab-run-6 { animation-name: ab-in; animation-range: cover 30% cover 34%; }
    .ab-art .ab-run-6 .ab-score { animation-range: cover 32% cover 36%; }
    .ab-art .ab-run-7 { animation-name: ab-in; animation-range: cover 33% cover 37%; }
    .ab-art .ab-run-7 .ab-score { animation-range: cover 35% cover 39%; }
    .ab-art .ab-run-8 { animation-name: ab-in; animation-range: cover 36% cover 40%; }
    .ab-art .ab-run-8 .ab-score { animation-range: cover 38% cover 42%; }
  }
}

@media (max-width: 760px) {
  .ablation-compare {
    grid-template-columns: 1fr;
  }
}

/* Practitioner route map: the MCP call sequence at a glance. */
.route-map {
  margin: 2.5rem 0;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--ink);
  border-radius: 24px 24px 8px 24px;
  background: var(--white);
  box-shadow: 10px 10px 0 var(--paper-deep);
}

.rm-kicker,
.rm-lane-title,
.rm-gate span {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.rm-kicker {
  margin: 0 0 1rem;
  color: var(--accent);
}

.rm-stage {
  padding: 1rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--paper);
}

.rm-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.85rem;
  font-size: 0.92rem;
  font-weight: 700;
}

.rm-step span {
  width: 1.6rem;
  height: 1.6rem;
  display: inline-grid;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 50%;
  color: var(--white);
  background: var(--ink);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.75rem;
}

.rm-flow {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
}

.route-map code {
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  font-size: 0.78rem;
  white-space: nowrap;
}

.rm-arrow {
  color: var(--ink-soft);
}

.rm-or {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

.rm-lanes {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.75rem;
}

.rm-lane {
  padding: 0.85rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--white);
}

.rm-lane-title {
  margin: 0 0 0.7rem;
  color: var(--accent);
}

.rm-flow-stack {
  flex-direction: column;
  align-items: flex-start;
}

.rm-flow-stack .rm-arrow {
  line-height: 1;
  rotate: 90deg;
}

.rm-shards {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
}

.rm-shards code {
  box-shadow: 3px 3px 0 var(--white), 4px 4px 0 var(--line), 7px 7px 0 var(--white), 8px 8px 0 var(--line);
}

.rm-shards small {
  margin-top: 0.7rem;
  color: var(--ink-soft);
  font-size: 0.72rem;
}

.rm-gate {
  display: flex;
  justify-content: center;
  margin: 0;
  padding-block: 0.9rem;
  background: linear-gradient(var(--ink), var(--ink)) center / 2px 100% no-repeat;
}

.rm-gate span {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0.4rem 0.3rem 0.8rem;
  border: 1px solid var(--ink);
  border-radius: 999px;
  color: var(--ink-soft);
  background: var(--white);
}

.rm-gate strong {
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
  color: var(--ink);
  background: var(--signal);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 0.8rem;
  letter-spacing: 0;
  text-transform: none;
}

.rm-result {
  padding: 0.3rem 0.65rem;
  border-radius: 8px;
  background: var(--signal);
  font-size: 0.82rem;
  font-weight: 700;
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .route-map > :is(.rm-stage, .rm-gate) {
      animation: reveal var(--ease-out) both;
      animation-timeline: view();
      animation-range: cover 0% cover 22vh;
    }
  }
}

@media (max-width: 760px) {
  .rm-lanes {
    grid-template-columns: 1fr;
  }
}

/* Column roles: outcome, baseline, and candidate columns match the story colors. */
.workflow-table thead th:nth-child(2) { color: var(--ink); background: var(--signal); }
.workflow-table thead th:nth-child(3) { background: var(--ink-soft); }
.workflow-table thead th:nth-child(n + 4) { background: var(--accent); }
.workflow-table tbody td:nth-child(2) { background: rgba(183, 243, 74, 0.28); }
.workflow-table tbody td:nth-child(3) { background: var(--paper); }
.workflow-table tbody td:nth-child(n + 4) { background: rgba(91, 79, 199, 0.08); }

.workflow-table thead small {
  display: inline-block;
  margin-top: 0.3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ==========================================================================
   Scrollytelling: the prediction journey drives a pinned illustration.
   Wide, tall screens use the pinned illustration. Narrow/short viewports,
   reduced motion and browsers without scroll timelines show four paired
   text-and-picture cards in normal document flow.
   ========================================================================== */

.story-stage {
  display: none;
}

.story .prediction-journey {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.story .prediction-journey::after { content: none; }

.story .prediction-journey li {
  min-height: 0;
  padding: 0;
  border: 0;
  background: none;
  animation: none;
}

.story-card {
  height: 100%;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 24px 24px 8px 24px;
  background: var(--paper-deep);
}

.story .prediction-journey-referee .story-card {
  border-color: var(--ink);
  background: var(--signal);
}

.story .prediction-journey span {
  min-height: 0;
  margin-bottom: 1rem;
}

.story .prediction-journey strong {
  font-size: clamp(1.6rem, 3vw, 2.3rem);
}

.story .prediction-journey p { font-size: 1rem; }

.story-mobile-art {
  display: block;
  width: 100%;
  height: auto;
  margin-top: 1.25rem;
  border-radius: 12px;
}

@media (max-width: 660px) {
  .story .prediction-journey { grid-template-columns: 1fr; }
}

.story-art {
  display: block;
  width: min(100%, 540px, calc((100vh - 140px) * 480 / 530));
  height: auto;
  margin-inline: auto;
}

.story-art text {
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 12.5px;
  fill: var(--ink);
}

.story-art .sv-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  fill: var(--accent);
}

.story-art .sv-th { font-size: 11.5px; font-weight: 700; }
.story-art .sv-th-tight { font-size: 9px; }
.story-art .sv-th-new,
.story-art .sv-mono-new,
.story-art .sv-t-cand { fill: var(--accent); }
.story-art .sv-t-soft { fill: var(--ink-soft); font-size: 11px; }
.story-art .sv-t-accent { fill: var(--accent); font-weight: 700; }
.story-art .sv-t-ink { font-size: 11.5px; font-weight: 700; }
.story-art .sv-tag { font-size: 11.5px; font-weight: 800; }
.story-art .sv-lucky { fill: var(--red); }
.story-art .sv-tag-supported { fill: var(--signal-dark); }
.story-art .sv-tag-provisional { fill: var(--accent); }
.story-art .sv-tag-unresolved { fill: var(--ink-soft); }
.story-art .sv-chip-text { font-size: 11.5px; font-weight: 700; }

.sv-shadow { fill: var(--signal); }
.sv-panel { fill: var(--white); stroke: var(--ink); stroke-width: 1.5; }
.sv-rule, .sv-grid { stroke: var(--ink); }
.sv-grid-soft { stroke: var(--line); }
.sv-dot { fill: var(--line); }
.sv-answer-fill { fill: rgba(183, 243, 74, 0.45); }
.sv-head-tint { fill: transparent; }
.sv-cell { fill: #c9d2de; }
.sv-cell-answer { fill: var(--ink); }
.sv-cell-new { fill: rgba(91, 79, 199, 0.4); }
.sv-brace { fill: none; stroke: var(--ink-soft); stroke-width: 1.2; }
.sv-brace-new { stroke: var(--accent); }
.sv-axis { fill: none; stroke: var(--line); stroke-width: 1.5; }
.sv-cone { fill: rgba(91, 79, 199, 0.14); }

.sv-history {
  fill: none;
  stroke: var(--ink);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.sv-forecast {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-dasharray: 0.05 0.045;
}

.sv-pt { fill: var(--white); stroke: var(--ink); stroke-width: 2; }
.sv-baseline { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; }
.sv-bar { fill: var(--ink-soft); }
.sv-range { fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; }
.sv-cat-supported { --cat: var(--signal); --cat-line: var(--signal-dark); }
.sv-cat-provisional { --cat: var(--accent); --cat-line: var(--accent); }
.sv-cat-unresolved { --cat: #c3ccd8; --cat-line: #8a96a8; }
.sv-evbar-box { fill: var(--paper-deep); stroke: var(--ink); }
.sv-lock { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linejoin: round; }
.sv-tray { fill: var(--paper); stroke: var(--line); stroke-dasharray: 5 4; }
.sv-tray-supported { stroke: var(--signal-dark); }
.sv-tray-provisional { stroke: var(--accent); }
.sv-chip-box { fill: var(--cat); stroke: var(--ink); }
.sv-chip-box.sv-cat-provisional + .sv-chip-text { fill: var(--white); }
.sv-chip-dim { fill: #dfe5ed; stroke: #c3ccd8; }

@keyframes sv-rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0 0; } }
@keyframes sv-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sv-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes sv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes sv-pop { from { opacity: 0; scale: 0.4; } to { opacity: 1; scale: 1; } }
@keyframes sv-slide { from { opacity: 0; translate: 48px 0; } to { opacity: 1; translate: 0 0; } }
@keyframes sv-grow { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes sv-bar-color { from { fill: var(--ink-soft); } to { fill: var(--cat); } }
@keyframes sv-range-color { from { stroke: var(--ink); } to { stroke: var(--cat-line); } }
@keyframes sv-range-open { from { opacity: 0; scale: 1 0.1; } to { opacity: 1; scale: 1 1; } }
@keyframes sv-blink { 0% { opacity: 0; } 20%, 60% { opacity: 1; } 100% { opacity: 0; } }
@keyframes sv-tint-local { to { fill: rgba(91, 79, 199, 0.22); } }
@keyframes sv-tint-holiday { to { fill: rgba(183, 243, 74, 0.6); } }
@keyframes sv-dim { to { opacity: 0.3; } }
@keyframes sv-dot-on { 0%, 100% { fill: var(--line); } 20%, 80% { fill: var(--accent); } }

@keyframes step-focus {
  0%, 100% { border-color: var(--rest-border, var(--line)); box-shadow: 0 0 0 transparent; translate: 0 0; }
  35%, 65% { border-color: var(--ink); box-shadow: 10px 10px 0 var(--focus-shadow, var(--signal)); translate: -5px -5px; }
}

@supports (animation-timeline: view()) and (timeline-scope: --story) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 1000px) and (min-height: 640px) {
    .story {
      display: grid;
      grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
      gap: clamp(2rem, 5vw, 5rem);
      align-items: start;
      timeline-scope: --story;
    }

    .story-stage {
      display: block;
      grid-area: 1 / 2;
      position: sticky;
      top: max(100px, calc(50svh - 260px));
    }

    .story-mobile-art { display: none; }

    .story .prediction-journey {
      grid-area: 1 / 1;
      display: block;
      gap: 0;
      overflow: visible;
      border: 0;
      border-radius: 0;
      view-timeline: --story block;
      view-timeline-inset: 82px 0px;
    }

    .story .prediction-journey::after {
      content: none;
    }

    .story .prediction-journey li,
    .story .prediction-journey li:nth-child(2n),
    .story .prediction-journey li:nth-last-child(-n + 2) {
      min-height: max(320px, 45svh);
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0;
      border: 0;
      background: none;
      animation: none;
    }

    .story-card {
      height: auto;
      padding: clamp(1.6rem, 3vw, 2.4rem);
      border: 1px solid var(--line);
      border-radius: 28px 28px 8px 28px;
      background: var(--paper-deep);
      animation: step-focus linear both;
      animation-timeline: view(block 82px 0px);
    }

    .story .prediction-journey-referee .story-card {
      --rest-border: var(--ink);
      --focus-shadow: var(--ink);
      border-color: var(--ink);
      background: var(--signal);
    }

    .story .prediction-journey span {
      min-height: 0;
      margin-bottom: 1.6rem;
    }

    .story .prediction-journey strong {
      font-size: clamp(1.8rem, 3vw, 2.6rem);
    }

    .story .prediction-journey p {
      font-size: 1rem;
    }

    .story-art :is(g, rect, path, circle, text) {
      animation-duration: auto;
      animation-fill-mode: both;
      animation-timing-function: var(--ease-out);
      animation-timeline: --story;
      transform-box: fill-box;
      transform-origin: center;
    }

    .story-art .sv-bar {
      transform-origin: 50% 100%;
    }

    .sv-table { animation-name: sv-rise; animation-range: cover 3% cover 10%; }
    .sv-row-0 { animation-name: sv-fade; animation-range: cover 5% cover 9%; }
    .sv-row-1 { animation-name: sv-fade; animation-range: cover 6.5% cover 10.5%; }
    .sv-row-2 { animation-name: sv-fade; animation-range: cover 8% cover 12%; }
    .sv-row-3 { animation-name: sv-fade; animation-range: cover 9.5% cover 13.5%; }
    .sv-answer, .sv-label-answer { animation-name: sv-fade; animation-range: cover 10% cover 15%; }
    .sv-chart1 { animation-name: sv-fade; animation-range: cover 9% cover 14%; }
    .sv-history { animation-name: sv-draw; animation-range: cover 12% cover 21%; }
    .sv-cone, .sv-forecast, .sv-chart1 .sv-t-accent { animation-name: sv-fade; animation-range: cover 20% cover 24%; }
    .sv-pt-0 { animation-name: sv-pop; animation-range: cover 12% cover 14%; }
    .sv-pt-1 { animation-name: sv-pop; animation-range: cover 13.1% cover 15.1%; }
    .sv-pt-2 { animation-name: sv-pop; animation-range: cover 14.2% cover 16.2%; }
    .sv-pt-3 { animation-name: sv-pop; animation-range: cover 15.3% cover 17.3%; }
    .sv-pt-4 { animation-name: sv-pop; animation-range: cover 16.4% cover 18.4%; }
    .sv-pt-5 { animation-name: sv-pop; animation-range: cover 17.5% cover 19.5%; }
    .sv-pt-6 { animation-name: sv-pop; animation-range: cover 18.6% cover 20.6%; }
    .sv-pt-7 { animation-name: sv-pop; animation-range: cover 19.7% cover 21.7%; }
    .sv-newcol-0 { animation-name: sv-slide; animation-range: cover 27% cover 33%; }
    .sv-newcol-1 { animation-name: sv-slide; animation-range: cover 29.5% cover 35.5%; }
    .sv-newcol-2 { animation-name: sv-slide; animation-range: cover 32% cover 38%; }
    .sv-label-baseline { animation-name: sv-fade; animation-range: cover 32% cover 36%; }
    .sv-label-cand { animation-name: sv-fade; animation-range: cover 34% cover 38%; }
    .sv-chart1-out { animation-name: sv-out; animation-range: cover 43% cover 46%; }
    .sv-chart2 { animation-name: sv-fade; animation-range: cover 44% cover 46%; }
    .sv-evbar { animation-name: sv-pop; animation-range: cover 43.5% cover 46.5%; }
    .sv-lucky { animation-name: sv-blink; animation-range: cover 49.5% cover 58%; }
    .sv-tag-supported, .sv-tag-provisional, .sv-tag-unresolved { animation-name: sv-fade; animation-range: cover 56% cover 59.5%; }
    .sv-chart2-out, .sv-bars, .sv-tags, .sv-evbar-out { animation-name: sv-out; animation-range: cover 62% cover 65%; }
    .sv-trays { animation-name: sv-fade; animation-range: cover 63% cover 67%; }
    .sv-chip-0 { animation-name: sv-pop; animation-range: cover 65.5% cover 68.5%; }
    .sv-chip-1 { animation-name: sv-pop; animation-range: cover 66.4% cover 69.4%; }
    .sv-chip-2 { animation-name: sv-pop; animation-range: cover 67.3% cover 70.3%; }
    .sv-chip-3 { animation-name: sv-pop; animation-range: cover 68.2% cover 71.2%; }
    .sv-chip-4 { animation-name: sv-pop; animation-range: cover 69.1% cover 72.1%; }
    .sv-chip-5 { animation-name: sv-pop; animation-range: cover 70% cover 73%; }
    .sv-chip-6 { animation-name: sv-pop; animation-range: cover 70.9% cover 73.9%; }
    .sv-chip-7 { animation-name: sv-pop; animation-range: cover 71.8% cover 74.8%; }
    .sv-head-tint { animation-name: sv-tint-local; animation-range: cover 66% cover 70%; }
    .sv-newcol-2 .sv-newcol-inner { animation-name: sv-dim; animation-range: cover 66% cover 70%; }
    .sv-dot-0 { animation-name: sv-dot-on; animation-range: cover 0% cover 33%; }
    .sv-dot-1 { animation-name: sv-dot-on; animation-range: cover 29% cover 52%; }
    .sv-dot-2 { animation-name: sv-dot-on; animation-range: cover 48% cover 71%; }
    .sv-dot-3 { animation-name: sv-dot-on; animation-range: cover 67% cover 96%; }
    .sv-head-local { animation-name: sv-tint-local; }
    .sv-head-holiday { animation-name: sv-tint-holiday; }
    .sv-bar-0 { animation-name: sv-grow, sv-bar-color; animation-range: cover 46% cover 50.5%, cover 55% cover 58.5%; }
    .sv-range-0 { animation-name: sv-range-open, sv-range-color; animation-range: cover 51.5% cover 55%, cover 55% cover 58.5%; }
    .sv-bar-1 { animation-name: sv-grow, sv-bar-color; animation-range: cover 46.7% cover 51.2%, cover 55% cover 58.5%; }
    .sv-range-1 { animation-name: sv-range-open, sv-range-color; animation-range: cover 51.9% cover 55.4%, cover 55% cover 58.5%; }
    .sv-bar-2 { animation-name: sv-grow, sv-bar-color; animation-range: cover 47.4% cover 51.9%, cover 55% cover 58.5%; }
    .sv-range-2 { animation-name: sv-range-open, sv-range-color; animation-range: cover 52.3% cover 55.8%, cover 55% cover 58.5%; }
    .sv-bar-3 { animation-name: sv-grow, sv-bar-color; animation-range: cover 48.1% cover 52.6%, cover 55% cover 58.5%; }
    .sv-range-3 { animation-name: sv-range-open, sv-range-color; animation-range: cover 52.7% cover 56.2%, cover 55% cover 58.5%; }
    .sv-bar-4 { animation-name: sv-grow, sv-bar-color; animation-range: cover 45.5% cover 48.5%, cover 55% cover 58.5%; }
    .sv-range-4 { animation-name: sv-range-open, sv-range-color; animation-range: cover 53.1% cover 56.6%, cover 55% cover 58.5%; }
    .sv-bar-5 { animation-name: sv-grow, sv-bar-color; animation-range: cover 49.5% cover 54%, cover 55% cover 58.5%; }
    .sv-range-5 { animation-name: sv-range-open, sv-range-color; animation-range: cover 53.5% cover 57%, cover 55% cover 58.5%; }
    .sv-bar-6 { animation-name: sv-grow, sv-bar-color; animation-range: cover 50.2% cover 54.7%, cover 55% cover 58.5%; }
    .sv-range-6 { animation-name: sv-range-open, sv-range-color; animation-range: cover 53.9% cover 57.4%, cover 55% cover 58.5%; }
    .sv-bar-7 { animation-name: sv-grow, sv-bar-color; animation-range: cover 50.9% cover 55.4%, cover 55% cover 58.5%; }
    .sv-range-7 { animation-name: sv-range-open, sv-range-color; animation-range: cover 54.3% cover 57.8%, cover 55% cover 58.5%; }

  }
}