:root {
  /* --world-blue and --deep-field keep their v3.1 names so the ~40 usages below
     stay untouched, but they are no longer blue: the field is charcoal and the
     deep field is a darker charcoal. They are held apart in luminance on purpose
     so panels and dark sections still read as different surfaces. */
  --world-blue: #434a54;
  --deep-field: #23272e;
  --cold-paper: #f2f4f8;
  --white: #ffffff;
  --ink: #17191f;
  --graphite: #646978;
  --line: #cdd2dc;
  --signal: #ff6a4d;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Manrope", "Segoe UI", sans-serif;
  --gutter: clamp(1.25rem, 4vw, 4.75rem);
  --header-h: 5.5rem;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  background: var(--cold-paper);
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--cold-paper);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

.skip-link {
  position: fixed;
  z-index: 100;
  top: 0.75rem;
  left: 0.75rem;
  padding: 0.65rem 0.9rem;
  color: var(--ink);
  background: var(--white);
  transform: translateY(-160%);
  transition: transform 160ms ease;
}

.skip-link:focus {
  transform: translateY(0);
}

.site-header {
  position: absolute;
  z-index: 20;
  top: 0;
  left: 0;
  display: flex;
  width: 100%;
  height: var(--header-h);
  align-items: center;
  justify-content: space-between;
  padding: 0 var(--gutter);
  color: var(--white);
}

.header-paper {
  color: var(--ink);
}

.wordmark {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.12rem;
  line-height: 1;
  text-decoration: none;
}

.wordmark-name {
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
}

.wordmark-tagline {
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.05;
  opacity: 0.52;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 3.4rem);
  font-size: 0.86rem;
}

.site-nav a {
  position: relative;
  text-decoration: none;
}

.site-nav a::after {
  position: absolute;
  right: 0;
  bottom: -0.35rem;
  left: 0;
  height: 1px;
  content: "";
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 180ms ease;
}

.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: left;
}


.home-hero {
  display: grid;
  min-height: max(46rem, 100svh);
  grid-template-columns: minmax(0, 2.05fr) minmax(20rem, 0.95fr);
  color: var(--white);
  background: var(--world-blue);
}

.hero-statement {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: flex-end;
  padding: calc(var(--header-h) + 4rem) var(--gutter) clamp(4rem, 9vh, 7rem);
}

.context-line,
.section-index {
  margin: 0 0 2rem;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}

.context-line {
  max-width: 27rem;
  color: rgba(255, 255, 255, 0.72);
}

.hero-statement h1 {
  max-width: 11.5ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4.2rem, 8.4vw, 9.4rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.hero-intro {
  max-width: 43rem;
  margin: clamp(2.5rem, 6vh, 4.8rem) 0 0;
  color: rgba(255, 255, 255, 0.84);
  font-size: clamp(1.05rem, 1.4vw, 1.33rem);
  line-height: 1.55;
}

.hero-links,
.closing-links {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem 2.5rem;
  margin-top: 2.4rem;
}

.text-link {
  display: inline-flex;
  width: fit-content;
  align-items: center;
  gap: 0.75rem;
  padding: 0 0 0.38rem;
  border-bottom: 1px solid currentColor;
  font-size: 0.88rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 180ms ease, opacity 180ms ease;
}

.text-link:hover {
  gap: 1rem;
}

.text-link-light {
  color: var(--white);
}

.muted-link {
  opacity: 0.62;
}

.learning-margin {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--deep-field);
}

.hero-learning {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: calc(var(--header-h) + 2rem) clamp(1.6rem, 3vw, 3.4rem) clamp(2rem, 5vh, 3.5rem);
}

.learning-caption {
  display: flex;
  justify-content: space-between;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.7rem;
}

.worldline {
  width: 100%;
  max-height: 60vh;
  margin: auto 0;
  overflow: visible;
}

.worldline-guide,
.worldline-active {
  fill: none;
  stroke-width: 1.5;
}

.worldline-guide {
  stroke: rgba(255, 255, 255, 0.14);
}

.worldline-active {
  stroke: var(--white);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: resolve-line 2.2s cubic-bezier(0.65, 0, 0.2, 1) 300ms forwards;
}

.world-state {
  fill: var(--white);
  font-family: var(--sans);
  font-size: 12px;
  opacity: 0;
  animation: reveal-state 500ms ease forwards;
}

.world-state circle {
  fill: var(--deep-field);
  stroke: var(--white);
  stroke-width: 1.5;
}

.world-state .signal-node {
  fill: var(--signal);
  stroke: var(--signal);
}

.world-state .state-note {
  fill: rgba(255, 255, 255, 0.45);
  font-size: 10px;
}

.state-one { animation-delay: 450ms; }
.state-two { animation-delay: 900ms; }
.state-three { animation-delay: 1.35s; }
.state-four { animation-delay: 1.85s; }

.margin-thesis {
  max-width: 25rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--serif);
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1.25;
}

.paper-section {
  display: grid;
  padding: clamp(6rem, 12vw, 12rem) var(--gutter);
  border-bottom: 1px solid var(--line);
  grid-template-columns: minmax(8rem, 0.48fr) minmax(0, 1.45fr) minmax(15rem, 0.62fr);
  gap: clamp(2rem, 6vw, 7rem);
}

.section-index {
  color: var(--graphite);
}

.belief-copy h2,
.product-intro-main h2,
.proof-main h2,
.horizon-intro h2 {
  max-width: 14ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.1rem, 5.6vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.05em;
  line-height: 0.95;
}

.belief-copy > p,
.product-intro-main > p:not(.product-name),
.proof-main > .proof-lede,
.horizon-intro > p {
  max-width: 40rem;
  margin: 2.5rem 0 0;
  color: var(--graphite);
  font-size: clamp(1.05rem, 1.45vw, 1.3rem);
}

.belief-copy > p + p {
  margin-top: 1rem;
}

.margin-note {
  align-self: end;
  padding-top: 1.2rem;
  border-top: 1px solid var(--ink);
}

.margin-note p {
  max-width: 23rem;
  margin: 1.5rem 0 0;
  color: var(--graphite);
  font-size: 0.88rem;
}

.annotation-dot {
  display: block;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--signal);
}

/* Home folds alternate paper / white / paper / dark / paper / dark by position.
   Fold 2 is the product intro and fold 5 is the premise, so the product intro
   carries the lighter surface and the premise sits back on paper. */
.product-intro {
  background: var(--white);
}

.belief-section {
  background: var(--cold-paper);
}

.product-name {
  margin: 0 0 2rem;
  color: var(--world-blue);
  font-size: 0.88rem;
  font-weight: 600;
}

.product-intro-main > .product-intro-close {
  margin-top: 1.25rem;
}

.product-intro-main .text-link {
  margin-top: 2.5rem;
}

.change-surfaces {
  align-self: end;
}

.change-surfaces > p {
  margin: 0 0 1.2rem;
  color: var(--graphite);
  font-size: 0.72rem;
}

.change-surfaces ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.change-surfaces li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.72rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.78rem;
}

.change-surfaces li:last-child {
  border-bottom: 1px solid var(--line);
}

.change-surfaces i {
  display: block;
  width: 0.4rem;
  height: 0.4rem;
  border: 1px solid var(--graphite);
  border-radius: 50%;
}

.change-surfaces i.active {
  border-color: var(--signal);
  background: var(--signal);
}

.research-field {
  display: grid;
  min-height: 47rem;
  color: var(--white);
  background: var(--ink);
  grid-template-columns: 1fr 1fr;
}

.research-field-copy,
.recursive-statement {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(5rem, 10vw, 10rem) var(--gutter);
}

.research-field-copy {
  border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.research-field .section-index {
  color: rgba(255, 255, 255, 0.48);
}

.research-field h2 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 7vw, 8.3rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.88;
}

.research-field-copy > p:not(.section-index) {
  max-width: 37rem;
  margin: 3rem 0 0;
  color: rgba(255, 255, 255, 0.66);
  font-size: 1.04rem;
}

.research-field-copy .text-link {
  margin-top: 2.5rem;
}

.recursive-statement {
  gap: 0.8rem;
  color: rgba(255, 255, 255, 0.42);
  font-family: var(--serif);
  font-size: clamp(2.6rem, 4.7vw, 6rem);
  letter-spacing: -0.04em;
  line-height: 0.95;
}

.recursive-statement p {
  max-width: 12ch;
  margin: 0;
}

.recursive-statement p:last-child {
  color: var(--white);
}

.horizon-section {
  grid-template-columns: minmax(8rem, 0.48fr) minmax(0, 0.82fr) minmax(20rem, 1.25fr);
}

.horizon-flow {
  position: relative;
  display: grid;
  align-self: end;
  padding-top: 2rem;
  border-top: 1px solid var(--ink);
  grid-template-columns: repeat(3, 1fr);
}

.horizon-flow::before {
  position: absolute;
  top: -0.27rem;
  left: 0;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  content: "";
  background: var(--signal);
}

.horizon-item {
  min-height: 15rem;
  padding: 0 0.9rem;
  border-left: 1px solid var(--line);
}

.horizon-item:first-child {
  padding-left: 0;
  border-left: 0;
}

.horizon-state {
  margin: 0 0 3rem;
  color: var(--world-blue);
  font-size: 0.72rem;
  font-weight: 600;
}

.horizon-item h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 1.9rem;
  font-weight: 400;
  letter-spacing: -0.03em;
}

/* The proof protocol borrows the horizon's three-column rail: same rule above,
   same hairline dividers, same kicker treatment. */
.proof-protocol {
  display: grid;
  margin-top: clamp(3rem, 5vw, 4.5rem);
  padding-top: 2rem;
  border-top: 1px solid var(--ink);
  grid-template-columns: repeat(3, 1fr);
}

.proof-step {
  padding: 0 1.2rem;
  border-left: 1px solid var(--line);
}

.proof-state {
  margin: 0 0 1.6rem;
  color: var(--world-blue);
  font-size: 0.72rem;
  font-weight: 600;
}

.proof-step > p:last-child {
  margin: 0;
  color: var(--graphite);
  font-size: 0.82rem;
  line-height: 1.5;
}

.horizon-item > p:last-child {
  margin: 1rem 0 0;
  color: var(--graphite);
  font-size: 0.82rem;
}

.closing-field {
  min-height: 65vh;
  padding: clamp(6rem, 11vw, 11rem) var(--gutter);
  color: var(--white);
  background: var(--world-blue);
}

.closing-field > p {
  margin: 0 0 4rem;
  font-size: 0.78rem;
}

.closing-field h2 {
  max-width: 17ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.7rem, 7vw, 8.6rem);
  font-weight: 400;
  letter-spacing: -0.055em;
  line-height: 0.9;
}

.site-footer {
  display: grid;
  min-height: 8rem;
  align-items: end;
  padding: 2.5rem var(--gutter);
  grid-template-columns: 1fr 1fr auto;
  gap: 2rem;
  font-size: 0.72rem;
}

.footer-blue {
  color: rgba(255, 255, 255, 0.7);
  background: var(--deep-field);
}

.site-footer p {
  margin: 0;
}

/* Product */

.product-hero {
  display: grid;
  min-height: max(48rem, 100svh);
  padding-top: var(--header-h);
  grid-template-columns: minmax(0, 1.8fr) minmax(22rem, 0.8fr);
}

.product-hero-copy {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 5rem var(--gutter) clamp(4rem, 8vh, 7rem);
}

.context-dark {
  color: var(--world-blue);
}

.product-hero h1 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 7.8vw, 9rem);
  font-weight: 400;
  letter-spacing: -0.058em;
  line-height: 0.89;
}

.product-state {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: space-between;
  padding: 3rem clamp(1.6rem, 3vw, 3.2rem);
  color: var(--white);
  background: var(--deep-field);
}

.state-title,
.state-foot {
  max-width: 23rem;
  margin: 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 0.74rem;
}

.state-sequence {
  position: relative;
  display: grid;
  min-height: 28rem;
  align-content: space-between;
  margin: 3rem 0;
}

.state-row {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 4rem;
  align-items: center;
  padding-left: 4.5rem;
  grid-template-columns: 5.5rem 1fr;
  gap: 1rem;
}

.state-row > span {
  font-size: 0.72rem;
  font-weight: 600;
}

.state-row > p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
}

.state-row-active > span,
.state-row-active > p {
  color: var(--white);
}

.state-row .node {
  position: absolute;
  top: 50%;
  left: 1.55rem;
  width: 0.65rem;
  height: 0.65rem;
  border: 1px solid var(--white);
  border-radius: 50%;
  background: var(--deep-field);
  transform: translate(-50%, -50%);
}

.state-row .node-open {
  background: var(--world-blue);
}

.state-row-active .node {
  border-color: var(--signal);
  background: var(--signal);
}

.state-path {
  position: absolute;
  z-index: 1;
  top: 2rem;
  bottom: 2rem;
  left: 0;
  width: 3.1rem;
  height: calc(100% - 4rem);
  overflow: visible;
}

.state-path path {
  fill: none;
  stroke: rgba(255, 255, 255, 0.45);
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  stroke-width: 1.5;
  animation: resolve-line 1.8s cubic-bezier(0.65, 0, 0.2, 1) 250ms forwards;
}

.loss-field {
  display: grid;
  padding: clamp(6rem, 11vw, 11rem) var(--gutter);
  color: var(--white);
  background: var(--ink);
  grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 1.2fr) minmax(16rem, 0.58fr);
  gap: clamp(2rem, 6vw, 7rem);
}

.loss-field .section-index {
  color: rgba(255, 255, 255, 0.42);
}

.loss-field h2,
.system-heading h2,
.depth-statement h2,
.methods-title h2,
.ownership-copy h2,
.scale-section header h2,
.faq-section h2 {
  max-width: 15ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(3.3rem, 5.8vw, 7rem);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.93;
}

/* Narrower than the other folds so the ledger beside it has room. The fold
   grows taller instead of wider. Scoped away from .ledger, which is also a
   direct child div and was inheriting this size and max-width. */
.loss-field > div:not(.ledger) > p {
  max-width: 30rem;
  margin: 2.5rem 0 0;
  color: rgba(255, 255, 255, 0.6);
  font-size: 1.05rem;
}

.loss-field > div:not(.ledger) > p + p {
  margin-top: 1.25rem;
}

/* The record of changes, on the fold that says changes get lost. */
.ledger {
  align-self: end;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.74rem;
  line-height: 1.4;
}

.ledger-head {
  display: flex;
  justify-content: space-between;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.28);
  color: rgba(255, 255, 255, 0.48);
  gap: 1rem;
}

.ledger-rows {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Fixed leading columns, not auto: each row is its own grid, so auto sizing
   let "memory" and "skill" push their row's description to a different x than
   the others. A ledger has to line up. */
.ledger-rows li {
  display: grid;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  column-gap: 0.9rem;
  grid-template-columns: 3.6rem 3.6rem minmax(0, 1fr) auto;
}

.ledger-date {
  color: rgba(255, 255, 255, 0.4);
}

.ledger-kind {
  color: rgba(255, 255, 255, 0.62);
}

.ledger-what {
  color: rgba(255, 255, 255, 0.92);
}

.ledger-state {
  color: var(--signal);
  text-align: right;
  white-space: nowrap;
}

.ledger-was {
  color: rgba(255, 255, 255, 0.32);
  text-decoration: line-through;
}

.ledger-total {
  margin: 1rem 0 0;
  color: rgba(255, 255, 255, 0.48);
}

.ledger-total span {
  color: rgba(255, 255, 255, 0.86);
}

.loss-field blockquote {
  align-self: end;
  margin: 0;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.38);
  color: rgba(255, 255, 255, 0.86);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.1vw, 2rem);
  line-height: 1.18;
}

.system-section {
  padding: clamp(6rem, 11vw, 11rem) var(--gutter);
  background: var(--white);
}

.system-heading {
  display: grid;
  align-items: end;
  grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 1.2fr) minmax(16rem, 0.58fr);
  gap: clamp(2rem, 6vw, 7rem);
}

.system-heading .section-index {
  align-self: start;
}

.system-heading > p:last-child {
  max-width: 30rem;
  margin: 0;
  color: var(--graphite);
  font-size: 1.02rem;
}

.learning-loop {
  position: relative;
  display: grid;
  max-width: 82rem;
  min-height: 46rem;
  margin: 8rem auto 0;
  place-items: center;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.learning-loop::before,
.learning-loop::after {
  position: absolute;
  content: "";
  border-radius: 50%;
}

.learning-loop::before {
  width: min(44vw, 35rem);
  height: min(44vw, 35rem);
  border: 1px solid var(--ink);
}

.learning-loop::after {
  width: min(32vw, 24rem);
  height: min(32vw, 24rem);
  border: 1px dashed var(--line);
}

.learning-loop article {
  position: relative;
  z-index: 2;
  width: min(100%, 19rem);
  padding: 1.5rem;
  background: var(--white);
}

.learning-loop article:nth-child(1),
.learning-loop article:nth-child(3) {
  justify-self: start;
}

.learning-loop article:nth-child(2),
.learning-loop article:nth-child(4) {
  justify-self: end;
}

.learning-loop article > span {
  display: block;
  margin-bottom: 1rem;
  font-size: 0.78rem;
  font-weight: 600;
}

.learning-loop article > p {
  margin: 0;
  color: var(--graphite);
  font-size: 0.82rem;
}

.loop-center {
  position: absolute;
  z-index: 3;
  display: grid;
  align-items: center;
  justify-items: center;
  color: var(--graphite);
  font-size: 0.67rem;
  grid-template-columns: auto 5rem auto;
  gap: 1rem;
}

.loop-center i {
  position: relative;
  width: 5rem;
  height: 1px;
  background: var(--world-blue);
}

.loop-center i::after {
  position: absolute;
  top: 50%;
  right: -0.2rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  content: "";
  background: var(--signal);
  transform: translateY(-50%);
}

.learning-depth {
  display: grid;
  padding: clamp(6rem, 11vw, 11rem) var(--gutter);
  border-top: 1px solid var(--line);
  grid-template-columns: minmax(0, 0.85fr) minmax(28rem, 1.15fr);
  gap: clamp(4rem, 10vw, 11rem);
}

.depth-statement > p:last-child {
  max-width: 36rem;
  margin: 2.8rem 0 0;
  color: var(--graphite);
  font-size: 1.05rem;
}

.two-clocks {
  display: grid;
  align-self: end;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
}

.two-clocks article {
  min-height: 30rem;
  padding: 2rem;
  background: var(--white);
}

.clock-visual {
  position: relative;
  width: 10rem;
  height: 10rem;
  margin-bottom: 6rem;
  border: 1px solid var(--line);
  border-radius: 50%;
}

.clock-visual span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0.55rem;
  height: 0.55rem;
  border-radius: 50%;
  background: var(--world-blue);
  transform-origin: 0 0;
}

.clock-visual span:nth-child(1) { transform: rotate(0deg) translateX(4.9rem); }
.clock-visual span:nth-child(2) { transform: rotate(90deg) translateX(4.9rem); }
.clock-visual span:nth-child(3) { transform: rotate(180deg) translateX(4.9rem); }
.clock-visual span:nth-child(4) { transform: rotate(270deg) translateX(4.9rem); }

.clock-visual::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 1px;
  height: 4.2rem;
  content: "";
  background: var(--ink);
  transform: rotate(32deg);
  transform-origin: top;
}

.clock-visual-slow {
  border-style: dashed;
}

.clock-visual-slow span {
  background: var(--signal);
}

.clock-name {
  margin: 0 0 0.8rem;
  color: var(--world-blue);
  font-size: 0.7rem;
}

.two-clocks h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 400;
  letter-spacing: -0.035em;
}

.two-clocks article > p:last-child {
  margin: 1.3rem 0 0;
  color: var(--graphite);
  font-size: 0.82rem;
}

/* Full-bleed fold, so --ink like the others. */
.methods-section {
  display: grid;
  padding: clamp(6rem, 11vw, 11rem) var(--gutter);
  color: var(--white);
  background: var(--ink);
  grid-template-columns: 1fr 1fr;
  gap: clamp(4rem, 10vw, 11rem);
}

.methods-section .section-index {
  color: rgba(255, 255, 255, 0.45);
}

.methods-copy {
  align-self: end;
}

.methods-lede {
  max-width: 35rem;
  margin: 0 0 2rem;
  font-family: var(--serif);
  font-size: clamp(1.9rem, 3vw, 3.2rem);
  letter-spacing: -0.035em;
  line-height: 1.05;
}

.methods-copy > p:not(.methods-lede) {
  max-width: 36rem;
  color: rgba(255, 255, 255, 0.6);
}

.methods-copy dl {
  margin: 4rem 0 0;
}

.methods-copy dl div {
  display: grid;
  padding: 1.3rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  grid-template-columns: 11rem 1fr;
  gap: 2rem;
}

.methods-copy dl div:last-child {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.methods-copy dt {
  font-size: 0.76rem;
}

.methods-copy dd {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.76rem;
}

.ownership-section {
  display: grid;
  min-height: 55rem;
  padding: clamp(6rem, 11vw, 11rem) var(--gutter);
  overflow: hidden;
  background: var(--white);
  grid-template-columns: 1fr 1fr;
  gap: clamp(4rem, 10vw, 11rem);
}

.ownership-copy {
  align-self: center;
}

.ownership-copy > p:last-child {
  max-width: 37rem;
  margin: 2.8rem 0 0;
  color: var(--graphite);
}

.boundary-figure {
  position: relative;
  min-height: 34rem;
  align-self: center;
}

.boundary-core,
.boundary-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.boundary-core {
  z-index: 2;
  display: flex;
  width: min(20rem, 48vw);
  height: min(20rem, 48vw);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--white);
  background: var(--world-blue);
}

.boundary-core > span {
  font-family: var(--serif);
  font-size: 2.2rem;
}

.boundary-core p {
  margin: 1.5rem 0 0;
  color: rgba(255, 255, 255, 0.6);
  text-align: center;
  font-size: 0.72rem;
}

.boundary-ring {
  width: min(32rem, 68vw);
  height: min(32rem, 68vw);
  border: 1px solid var(--ink);
}

.boundary-ring span {
  position: absolute;
  top: 10%;
  left: 78%;
  width: 8rem;
  color: var(--graphite);
  font-size: 0.68rem;
}

.boundary-signal {
  position: absolute;
  right: -2rem;
  bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.boundary-signal i {
  width: 2.2rem;
  height: 1px;
  background: var(--signal);
}

.boundary-signal p {
  margin: 0;
  color: var(--graphite);
  font-size: 0.68rem;
}

.scale-section {
  padding: clamp(6rem, 11vw, 11rem) var(--gutter);
  border-top: 1px solid var(--line);
}

.scale-section header {
  display: grid;
  grid-template-columns: minmax(8rem, 0.42fr) 1.78fr;
  gap: clamp(2rem, 6vw, 7rem);
}

.scale-states {
  display: grid;
  margin-top: 6rem;
  border-top: 1px solid var(--ink);
  grid-template-columns: repeat(3, 1fr);
}

.scale-state {
  min-height: 23rem;
  padding: 2rem;
  border-left: 1px solid var(--line);
}

.scale-state:first-child {
  padding-left: 0;
  border-left: 0;
}

.scale-state > p:first-child {
  margin: 0 0 6rem;
  color: var(--graphite);
  font-size: 0.7rem;
}

.scale-now > p:first-child {
  color: var(--world-blue);
}

.scale-state h3 {
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 3.1vw, 3.7rem);
  font-weight: 400;
  letter-spacing: -0.04em;
}

.scale-state > p:last-child {
  max-width: 21rem;
  margin: 1.5rem 0 0;
  color: var(--graphite);
  font-size: 0.82rem;
}

.scale-later {
  opacity: 0.62;
}

/* Full-bleed dark folds all use --ink; --deep-field and --world-blue are for
   panels and boxes sitting on top of a fold, not for the fold itself. */
.product-rsi {
  min-height: 80vh;
  padding: clamp(6rem, 11vw, 11rem) var(--gutter);
  color: var(--white);
  background: var(--ink);
}

.product-rsi .section-index {
  color: rgba(255, 255, 255, 0.55);
}

.product-rsi h2 {
  max-width: 15ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(4rem, 8vw, 9.5rem);
  font-weight: 400;
  letter-spacing: -0.058em;
  line-height: 0.88;
}

.product-rsi > p:not(.section-index) {
  max-width: 37rem;
  margin: 3rem 0 0;
  color: rgba(255, 255, 255, 0.68);
  font-size: 1.05rem;
}

.product-rsi .text-link {
  margin-top: 2.6rem;
}

.footer-paper {
  color: var(--graphite);
  background: var(--cold-paper);
}

/* Research */

.research-hero {
  display: grid;
  min-height: max(48rem, 100svh);
  padding: calc(var(--header-h) + 4rem) var(--gutter) 4rem;
  color: var(--white);
  background: var(--ink);
  grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 1.2fr) minmax(16rem, 0.58fr);
  gap: clamp(2rem, 6vw, 7rem);
}

.research-meta {
  align-self: end;
  color: rgba(255, 255, 255, 0.42);
  font-size: 0.72rem;
}

.research-meta p {
  margin: 0.3rem 0;
}

.research-title {
  align-self: end;
}

.research-title > p:first-child {
  margin: 0 0 2rem;
  color: var(--signal);
  font-size: 0.74rem;
}

.research-title h1 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(5rem, 9vw, 10.5rem);
  font-weight: 400;
  letter-spacing: -0.06em;
  line-height: 0.84;
}

.research-deck {
  max-width: 42rem;
  margin: 3.5rem 0 0;
  color: rgba(255, 255, 255, 0.64);
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
}

.research-mark {
  display: flex;
  align-self: end;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem 0;
  border-top: 1px solid rgba(255, 255, 255, 0.35);
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--serif);
  font-size: 1.5rem;
}

.research-mark i {
  position: relative;
  width: 100%;
  height: 1px;
  background: rgba(255, 255, 255, 0.2);
}

.research-mark i::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  content: "";
  background: var(--signal);
  transform: translateY(-50%);
}

.research-mark sup {
  color: var(--signal);
  font-family: var(--sans);
  font-size: 0.65rem;
}

.article-body {
  display: grid;
  padding: clamp(6rem, 10vw, 10rem) var(--gutter);
  background: var(--cold-paper);
  grid-template-columns: minmax(8rem, 0.42fr) minmax(0, 1.2fr) minmax(16rem, 0.58fr);
  gap: 0 clamp(2rem, 6vw, 7rem);
}

.article-rail {
  position: sticky;
  top: 3rem;
  height: fit-content;
  grid-column: 1;
  grid-row: 1 / span 9;
}

.article-rail p {
  max-width: 12rem;
  margin: 0;
  color: var(--graphite);
  font-size: 0.72rem;
}

.article-rail p + p {
  margin-top: 1.2rem;
  color: var(--ink);
}

.article-section,
.article-conclusion {
  padding: 0 0 clamp(6rem, 10vw, 10rem);
  grid-column: 2;
}

.article-section h2,
.article-conclusion h2 {
  max-width: 14ch;
  margin: 0 0 2.4rem;
  font-family: var(--serif);
  font-size: clamp(3rem, 5.2vw, 6rem);
  font-weight: 400;
  letter-spacing: -0.052em;
  line-height: 0.95;
}

.article-section > p,
.article-conclusion > p {
  max-width: 43rem;
  margin: 0 0 1.5rem;
  color: #414550;
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.7vw, 1.48rem);
  line-height: 1.58;
}

.article-opening .article-lede {
  color: var(--ink);
  font-size: clamp(1.8rem, 3vw, 3rem);
  letter-spacing: -0.032em;
  line-height: 1.22;
}

.article-section blockquote {
  max-width: 40rem;
  margin: 4rem 0 0;
  padding: 2rem 0 0;
  border-top: 1px solid var(--ink);
  color: var(--world-blue);
  font-family: var(--serif);
  font-size: clamp(2rem, 3.4vw, 3.8rem);
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.system-figure,
.clock-figure {
  margin: 0 0 clamp(7rem, 12vw, 12rem);
  padding: 2rem;
  color: var(--white);
  background: var(--deep-field);
  grid-column: 2 / 4;
}

.system-figure figcaption,
.clock-figure figcaption {
  margin-bottom: 5rem;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.7rem;
}

.system-layers {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}

.system-layers div {
  display: grid;
  align-items: center;
  min-height: 4.5rem;
  padding: 1rem 1.3rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  grid-template-columns: minmax(9rem, 0.6fr) 1.4fr;
  gap: 2rem;
}

.system-layers div:first-child {
  border-color: var(--signal);
}

.system-layers span {
  font-size: 0.75rem;
}

.system-layers p {
  margin: 0;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.7rem;
}

.figure-note {
  max-width: 31rem;
  margin: 3rem 0 0 auto;
  color: rgba(255, 255, 255, 0.55);
  font-size: 0.72rem;
}

.recursion-test {
  display: grid;
  margin-top: 4rem;
  border-top: 1px solid var(--ink);
  grid-template-columns: 1fr auto;
}

.recursion-test p,
.recursion-test span {
  margin: 0;
  padding: 1rem 0;
  border-bottom: 1px solid var(--line);
  font-family: var(--sans);
  font-size: 0.72rem;
}

.recursion-test span {
  color: var(--world-blue);
  text-align: right;
}

.clock-figure {
  display: grid;
  background: var(--world-blue);
  grid-template-columns: auto 1fr 1fr;
  gap: 1px;
}

.clock-figure figcaption {
  width: 8rem;
}

.clock-figure > div {
  min-height: 24rem;
  padding: 1.5rem 2rem;
  border-left: 1px solid rgba(255, 255, 255, 0.24);
}

.clock-figure div > p {
  margin: 0 0 7rem;
  color: rgba(255, 255, 255, 0.48);
  font-size: 0.7rem;
}

.clock-figure h3 {
  max-width: 11ch;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(2rem, 3vw, 3.5rem);
  font-weight: 400;
  letter-spacing: -0.04em;
  line-height: 1;
}

.clock-figure div > span {
  display: block;
  max-width: 22rem;
  margin-top: 1.5rem;
  color: rgba(255, 255, 255, 0.58);
  font-size: 0.72rem;
}

.research-agenda dl {
  margin: 4rem 0 0;
}

.research-agenda dl div {
  display: grid;
  padding: 1.6rem 0;
  border-top: 1px solid var(--line);
  grid-template-columns: 13rem 1fr;
  gap: 3rem;
}

.research-agenda dl div:last-child {
  border-bottom: 1px solid var(--line);
}

.research-agenda dt {
  font-size: 0.78rem;
  font-weight: 600;
}

.research-agenda dd {
  margin: 0;
  color: var(--graphite);
  font-size: 0.78rem;
}

.article-conclusion {
  padding-top: clamp(5rem, 8vw, 8rem);
  border-top: 1px solid var(--ink);
}

.article-conclusion > p:first-child {
  font-family: var(--sans);
  font-size: 0.8rem;
}

.article-conclusion .text-link {
  margin-top: 2rem;
}

.research-sources {
  padding: 2rem 0 0;
  border-top: 1px solid var(--line);
  grid-column: 3;
  align-self: end;
}

.research-sources h2 {
  margin: 0;
  font-size: 0.72rem;
  font-weight: 600;
}

.research-sources > p {
  color: var(--graphite);
  font-size: 0.7rem;
}

.research-sources ul {
  margin: 1.8rem 0 0;
  padding: 0;
  list-style: none;
}

.research-sources li {
  padding: 0.65rem 0;
  border-top: 1px solid var(--line);
  font-size: 0.68rem;
}

.research-sources a {
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25rem;
}

/* Every page ends on the same footer. The hairline keeps it distinct from the
   dark fold above it, which is now also --ink. */
.footer-ink {
  color: rgba(255, 255, 255, 0.55);
  background: var(--ink);
  border-top: 1px solid rgba(255, 255, 255, 0.18);
}

@keyframes resolve-line {
  to { stroke-dashoffset: 0; }
}

@keyframes reveal-state {
  to { opacity: 1; }
}

@media (max-width: 1050px) {
  .home-hero {
    grid-template-columns: minmax(0, 1.55fr) minmax(18rem, 0.75fr);
  }

  .paper-section,
  .horizon-section {
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .margin-note,
  .change-surfaces,
  .horizon-flow {
    grid-column: 2;
    margin-top: 2rem;
  }

  .product-hero {
    grid-template-columns: minmax(0, 1.3fr) minmax(20rem, 0.7fr);
  }

  .loss-field,
  .system-heading,
  .research-hero,
  .article-body {
    grid-template-columns: 8rem minmax(0, 1fr);
  }

  .loss-field blockquote,
  .system-heading > p:last-child,
  .research-mark,
  .research-sources {
    grid-column: 2;
    margin-top: 3rem;
  }

  .article-rail {
    grid-column: 1;
  }

  .article-section,
  .article-conclusion {
    grid-column: 2;
  }

  .system-figure,
  .clock-figure {
    grid-column: 2;
  }

  .research-sources {
    grid-column: 2;
  }
}

@media (max-width: 760px) {
  :root {
    --header-h: 4.8rem;
  }

  /* Two links is not enough to earn a menu, so they stay in the bar at every
     width and there is no overlay to open. */
  .site-nav {
    gap: 1.25rem;
    font-size: 0.78rem;
  }

  .home-hero {
    min-height: auto;
    grid-template-columns: 1fr;
  }

  .hero-statement {
    min-height: 92svh;
    padding-top: calc(var(--header-h) + 3rem);
  }

  .hero-statement h1 {
    max-width: 9ch;
    font-size: clamp(4.3rem, 20vw, 7rem);
  }

  .hero-learning {
    min-height: 44rem;
    padding-top: 3rem;
  }

  .worldline {
    max-height: 33rem;
  }

  .paper-section,
  .horizon-section {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .margin-note,
  .change-surfaces,
  .horizon-flow {
    grid-column: 1;
  }

  .belief-copy h2,
  .product-intro-main h2,
  .horizon-intro h2 {
    font-size: clamp(3.3rem, 14vw, 5.5rem);
  }

  .research-field {
    grid-template-columns: 1fr;
  }

  .research-field-copy {
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18);
  }

  .recursive-statement {
    min-height: 32rem;
  }

  .horizon-flow {
    grid-template-columns: 1fr;
  }

  .horizon-item,
  .horizon-item:first-child {
    min-height: 0;
    padding: 2rem 0;
    border: 0;
    border-top: 1px solid var(--line);
  }

  .horizon-item:first-child {
    border-top: 0;
  }

  /* The proof protocol is the same three-column rail, so it stacks the same
     way: dividers become rules between rows instead of between columns. */
  .proof-protocol {
    grid-template-columns: 1fr;
  }

  .proof-step,
  .proof-step:first-child {
    padding: 1.75rem 0 0;
    border: 0;
    border-top: 1px solid var(--line);
  }

  .proof-step:first-child {
    padding-top: 0;
    border-top: 0;
  }

  .horizon-state {
    margin-bottom: 1rem;
  }

  .closing-field h2 {
    font-size: clamp(3.2rem, 14vw, 6rem);
  }

  .site-footer {
    grid-template-columns: 1fr;
  }

  .product-hero {
    grid-template-columns: 1fr;
  }

  .product-hero-copy {
    min-height: 92svh;
    padding-top: calc(var(--header-h) + 3rem);
  }

  .product-hero h1 {
    font-size: clamp(4rem, 18vw, 6.8rem);
  }

  .product-state {
    min-height: 43rem;
  }

  .loss-field,
  .system-heading,
  .learning-depth,
  .methods-section,
  .ownership-section,
  .scale-section header,
  .research-hero,
  .article-body {
    grid-template-columns: 1fr;
  }

  .loss-field blockquote,
  .system-heading > p:last-child,
  .research-mark,
  .research-sources,
  .article-section,
  .article-conclusion,
  .system-figure,
  .clock-figure {
    grid-column: 1;
  }

  .learning-loop {
    min-height: 56rem;
    margin-top: 5rem;
    grid-template-columns: 1fr;
    grid-template-rows: repeat(4, 1fr);
  }

  .learning-loop::before {
    width: 18rem;
    height: 38rem;
    border-radius: 50%;
  }

  .learning-loop::after {
    width: 12rem;
    height: 31rem;
    border-radius: 50%;
  }

  .learning-loop article:nth-child(n) {
    width: min(80%, 19rem);
  }

  .learning-loop article:nth-child(odd) {
    justify-self: start;
  }

  .learning-loop article:nth-child(even) {
    justify-self: end;
  }

  .loop-center {
    grid-template-columns: auto;
  }

  .loop-center i {
    width: 1px;
    height: 4rem;
  }

  .loop-center i::after {
    top: auto;
    right: auto;
    bottom: -0.2rem;
    left: 50%;
    transform: translateX(-50%);
  }

  .two-clocks {
    grid-template-columns: 1fr;
  }

  .two-clocks article {
    min-height: 26rem;
  }

  .clock-visual {
    margin-bottom: 3rem;
  }

  .methods-copy dl div,
  .research-agenda dl div {
    grid-template-columns: 1fr;
    gap: 0.7rem;
  }

  .boundary-figure {
    min-height: 32rem;
  }

  .boundary-core {
    width: 14rem;
    height: 14rem;
  }

  .boundary-ring {
    width: 22rem;
    height: 22rem;
  }

  .boundary-signal {
    right: 0;
  }

  .scale-states {
    grid-template-columns: 1fr;
  }

  .scale-state,
  .scale-state:first-child {
    min-height: 18rem;
    padding: 2rem 0;
    border: 0;
    border-top: 1px solid var(--line);
  }

  .scale-state > p:first-child {
    margin-bottom: 3rem;
  }

  .research-hero {
    min-height: auto;
    padding-top: calc(var(--header-h) + 5rem);
  }

  .research-meta {
    order: 3;
    margin-top: 4rem;
  }

  .research-title h1 {
    font-size: clamp(5rem, 22vw, 8rem);
  }

  .research-mark {
    min-height: 17rem;
    margin-top: 2rem;
  }

  .article-rail {
    position: static;
    grid-column: 1;
    grid-row: auto;
    margin-bottom: 6rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--ink);
  }

  .article-section > p,
  .article-conclusion > p {
    font-size: 1.18rem;
  }

  .system-figure,
  .clock-figure {
    margin-right: calc(var(--gutter) * -1);
    margin-left: calc(var(--gutter) * -1);
  }

  .system-layers div {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }

  .clock-figure {
    grid-template-columns: 1fr;
  }

  .clock-figure figcaption {
    width: auto;
    margin-bottom: 2rem;
  }

  .clock-figure > div {
    min-height: 21rem;
    padding: 2rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.24);
    border-left: 0;
  }

  .clock-figure div > p {
    margin-bottom: 5rem;
  }
}

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

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .worldline-active {
    stroke-dashoffset: 0;
  }

  .world-state {
    opacity: 1;
  }
}

/* Home V3.1 — paper, ink, and one restrained blue signal. */
.page-home .site-header {
  border-bottom: 1px solid rgba(23, 25, 31, 0.12);
}

.page-home .home-hero {
  position: relative;
  display: block;
  min-height: max(46rem, 100svh);
  color: var(--ink);
  background: var(--cold-paper);
}

.page-home .home-hero::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 0.35rem;
  content: "";
  background: var(--world-blue);
}

.page-home .hero-statement {
  display: grid;
  min-height: max(46rem, 100svh);
  align-content: end;
  padding: calc(var(--header-h) + 4rem) var(--gutter) clamp(3rem, 6vh, 5rem);
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 1.8vw, 2.25rem);
}

.page-home .context-line {
  position: relative;
  max-width: none;
  margin: 0 0 clamp(2.6rem, 5vh, 4.5rem);
  padding-left: 1.1rem;
  color: var(--graphite);
  grid-column: 1 / 6;
}

.page-home .context-line::before {
  position: absolute;
  top: 0.38em;
  left: 0;
  width: 0.38rem;
  height: 0.38rem;
  content: "";
  background: var(--world-blue);
}

/* Shares the headline's row rather than adding one, so the hero keeps its
   original height. It sits in .hero-detail, below the rule, where the
   supporting paragraph used to be. */
.page-home .hero-install {
  gap: 0.4rem;
  margin-top: 0;
}

/* The hero box carries no label, so the line below it is the only text in the
   block and is set larger than the utility label used elsewhere. */
.page-home .hero-install .install-command-note {
  font-size: 0.8rem;
}

.page-home .hero-install .install-command-box {
  min-height: 2.9rem;
  padding: 0 0.85rem;
}

.page-home .hero-install code {
  font-size: clamp(0.72rem, 0.82vw, 0.82rem);
}

.closing-field .install-command {
  --install-line: rgba(255, 255, 255, 0.3);
  --install-muted: rgba(255, 255, 255, 0.62);
}

.page-home .hero-statement h1 {
  max-width: 14.5ch;
  color: var(--ink);
  font-size: clamp(4.5rem, 8.35vw, 9.5rem);
  line-height: 0.87;
  grid-column: 1 / 12;
}

.page-home .hero-lower {
  display: grid;
  align-items: start;
  margin-top: clamp(3rem, 6vh, 5rem);
  padding-top: 1.4rem;
  border-top: 1px solid var(--ink);
  grid-column: 1 / -1;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: clamp(1rem, 1.8vw, 2.25rem);
}

.page-home .hero-thesis {
  max-width: 29rem;
  margin: 0;
  font-family: var(--serif);
  font-size: clamp(1.55rem, 2.2vw, 2.45rem);
  letter-spacing: -0.025em;
  line-height: 1.08;
  grid-column: 1 / 6;
}

.page-home .hero-detail {
  grid-column: 7 / 12;
}

.page-home .hero-intro {
  max-width: 43rem;
  margin: 0;
  color: var(--graphite);
  font-size: clamp(1rem, 1.25vw, 1.18rem);
  line-height: 1.55;
}

.page-home .hero-links {
  margin-top: 2rem;
}

.page-home .product-intro {
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.45fr);
  gap: clamp(3rem, 8vw, 10rem);
}

/* Align the list with the first line of the headline rather than the foot of
   the column. The offset is the height of the kicker above it. */
.page-home .product-intro .change-surfaces {
  align-self: start;
  padding-top: calc(0.88rem * 1.55 + 2rem);
}

.page-home .product-intro-main h2 {
  max-width: 17.5ch;
}

/* Never let the hyphen in self-improving strand a lone word on its own line. */
.page-home .product-intro-main h2 .keep {
  white-space: nowrap;
}

/* Below the desktop layout the forced line breaks come out and the headline
   wraps on its own: the column is too narrow for the desktop lines, and a
   forced break there strands a single word. */
@media (max-width: 1050px) {
  .page-home .product-intro-main h2 br {
    display: none;
  }
}

/* On phones, one step down from the shared 14vw keeps it to four lines. */
@media (max-width: 760px) {
  .page-home .product-intro-main h2 {
    max-width: none;
    font-size: clamp(2.75rem, 12vw, 5.5rem);
  }
}

.page-home .product-name {
  margin: 0 0 2rem;
  color: var(--world-blue);
}

/* The three column headings must each hold one line: "The organization" is the
   longest and was landing exactly at its column width. The flow takes the room
   from the gap and a small share of the intro rather than from smaller type. */
.page-home .horizon-section {
  grid-template-columns: minmax(18rem, 0.68fr) minmax(0, 1.32fr);
  gap: clamp(2.5rem, 5vw, 6rem);
}

/* Fold 4 in the seven-fold order, so it carries the lighter surface. */
.page-home .horizon-section {
  background: var(--white);
}

.page-home .proof-section {
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.45fr);
  gap: clamp(3rem, 8vw, 10rem);
}

.page-home .proof-main h2 {
  max-width: 13.5ch;
}

/* Graph stacked directly on the margin note. The note's own top rule then reads
   as the graph's baseline, with no measured offset to drift when it rewraps.
   The stacking holds at every width; only the placement is desktop-only. */
.page-home .belief-aside {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

/* Guarded by min-width rather than undone by a mobile counter-rule: a bare
   .page-home rule outranks the .belief-section reset in the max-width block on
   specificity, so it would survive onto phones and keep the fold two-column.
   Any desktop-only grid override belongs in here for the same reason. */
@media (min-width: 761px) {
  /* Deliberately narrow copy: the headline wraps and leaves the right of the
     fold open for the capability graph, which takes a column of its own. */
  .page-home .belief-section {
    column-gap: clamp(2.5rem, 4.5vw, 5rem);
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.62fr);
  }

  .page-home .belief-aside {
    justify-content: flex-end;
    grid-column: 2;
    grid-row: 2;
  }
}

.page-home .belief-aside .margin-note {
  align-self: stretch;
}

.belief-figure {
  margin: 0;
}

.belief-figure svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* Sized in viewBox units: the figure scales down to roughly two thirds, so this
   lands near 12px on screen. */
.belief-figure text {
  fill: var(--graphite);
  font-family: var(--sans);
  font-size: 18px;
}

.fig-axis {
  stroke: var(--line);
  stroke-width: 1;
}

.fig-off,
.fig-on {
  fill: none;
  stroke-linecap: round;
}

.fig-off {
  stroke: var(--graphite);
  stroke-dasharray: 5 6;
  stroke-width: 2;
}

.fig-on {
  stroke: var(--ink);
  stroke-width: 2.5;
}

.fig-delta {
  stroke: var(--signal);
  stroke-width: 2;
}

.belief-figure .fig-on-label {
  fill: var(--ink);
}

.belief-figure .fig-delta-label {
  fill: var(--signal);
}

.page-home .horizon-intro h2 {
  max-width: 11ch;
}

.page-home .horizon-flow {
  align-self: end;
}

.page-home .closing-field {
  background: var(--ink);
}


@media (max-width: 1050px) {
  .page-home .hero-statement h1 {
    grid-column: 1 / -1;
  }

  .page-home .hero-thesis {
    grid-column: 1 / 7;
  }

  .page-home .hero-detail {
    grid-column: 8 / -1;
  }

  .page-home .product-intro,
  .page-home .proof-section,
  .page-home .horizon-section {
    grid-template-columns: minmax(0, 1fr) minmax(17rem, 0.52fr);
  }

  .page-home .product-intro .change-surfaces,
  .page-home .proof-section .change-surfaces,
  .page-home .horizon-section .horizon-flow {
    grid-column: 2;
    margin-top: 0;
  }
}

@media (max-width: 760px) {
  .page-home .home-hero,
  .page-home .hero-statement {
    min-height: 100svh;
  }

  .page-home .hero-statement {
    display: block;
    padding-top: calc(var(--header-h) + 4rem);
  }

  .page-home .context-line {
    margin-bottom: 3.2rem;
  }

  .page-home .hero-statement h1 {
    max-width: 9ch;
    font-size: clamp(4rem, 18.4vw, 6.8rem);
  }

  .page-home .hero-lower {
    display: block;
    margin-top: 3.5rem;
  }

  .page-home .hero-thesis {
    max-width: 24rem;
  }

  .page-home .hero-detail {
    margin-top: 2rem;
  }

  .page-home .product-intro,
  .page-home .proof-section,
  .page-home .horizon-section {
    grid-template-columns: 1fr;
    gap: 4rem;
  }

  .page-home .product-intro .change-surfaces,
  .page-home .proof-section .change-surfaces,
  .page-home .horizon-section .horizon-flow {
    grid-column: 1;
  }

  /* Single column here, so the headline-alignment offset has nothing to align to. */
  .page-home .product-intro .change-surfaces {
    padding-top: 0;
  }
}

/* Viewport-fit rhythm: keep each editorial section legible as one desktop fold. */
@media (min-width: 761px) {
  :root {
    --header-h: 4.5rem;
  }

  .paper-section,
  .loss-field,
  .system-section,
  .learning-depth,
  .methods-section,
  .ownership-section,
  .scale-section,
  .faq-section,
  .product-rsi,
  .article-body {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .belief-copy h2,
  .product-intro-main h2,
  .horizon-intro h2,
  .loss-field h2,
  .system-heading h2,
  .depth-statement h2,
  .methods-title h2,
  .ownership-copy h2,
  .scale-section header h2,
  .faq-section h2 {
    font-size: clamp(3rem, 4.6vw, 5rem);
  }

  .belief-copy > p,
  .product-intro-main > p:not(.product-name),
  .horizon-intro > p,
  .loss-field div > p,
  .depth-statement > p:last-child,
  .ownership-copy > p:last-child {
    margin-top: 1.75rem;
  }

  .page-home .home-hero,
  .page-home .hero-statement {
    min-height: 100svh;
  }

  .page-home .hero-statement {
    padding-top: calc(var(--header-h) + 2.25rem);
    padding-bottom: 2.5rem;
  }

  .page-home .context-line {
    margin-bottom: 1.75rem;
  }

  .page-home .hero-statement h1 {
    font-size: clamp(4.5rem, 7vw, 8.25rem);
  }

  .page-home .hero-lower {
    margin-top: 2.25rem;
    padding-top: 1rem;
  }

  .page-home .hero-thesis {
    font-size: clamp(1.4rem, 1.8vw, 2rem);
  }

  .page-home .hero-intro {
    font-size: clamp(0.96rem, 1.08vw, 1.1rem);
    line-height: 1.45;
  }

  .page-home .hero-links {
    margin-top: 1.35rem;
  }

  .research-field {
    min-height: min(100svh, 47rem);
  }

  .research-field-copy,
  .recursive-statement {
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .research-field h2 {
    font-size: clamp(3.8rem, 6vw, 6.75rem);
  }

  .research-field-copy > p:not(.section-index) {
    margin-top: 2rem;
  }

  .research-field-copy .text-link {
    margin-top: 1.75rem;
  }

  .closing-field {
    min-height: 60vh;
    padding-top: 4rem;
    padding-bottom: 4rem;
  }

  .closing-field > p {
    margin-bottom: 2rem;
  }

  .closing-field h2 {
    font-size: clamp(3.5rem, 5.2vw, 5.75rem);
  }

  .product-hero {
    min-height: 100svh;
  }

  .product-hero-copy {
    padding-top: 2rem;
    padding-bottom: 2.5rem;
  }

  .product-hero h1 {
    max-width: 14ch;
    font-size: clamp(3.8rem, 5.25vw, 6rem);
  }

  .product-hero-copy .hero-links {
    margin-top: 1.25rem;
  }

  .product-state {
    padding-top: 2rem;
    padding-bottom: 2rem;
  }

  .state-sequence {
    min-height: 20rem;
    margin: 2rem 0;
  }

  .learning-loop {
    min-height: 27rem;
    margin-top: 1.75rem;
  }

  .learning-loop::before {
    width: min(35vw, 27rem);
    height: min(35vw, 27rem);
  }

  .learning-loop::after {
    width: min(24vw, 19rem);
    height: min(24vw, 19rem);
  }

  .two-clocks article {
    min-height: 22rem;
  }

  .clock-visual {
    width: 8rem;
    height: 8rem;
    margin-bottom: 2.5rem;
  }

  .clock-visual span:nth-child(1) { transform: rotate(0deg) translateX(3.9rem); }
  .clock-visual span:nth-child(2) { transform: rotate(90deg) translateX(3.9rem); }
  .clock-visual span:nth-child(3) { transform: rotate(180deg) translateX(3.9rem); }
  .clock-visual span:nth-child(4) { transform: rotate(270deg) translateX(3.9rem); }

  .clock-visual::before {
    height: 3.2rem;
  }

  .methods-copy dl {
    margin-top: 2rem;
  }

  .methods-copy dl div {
    padding: 1rem 0;
  }

  .ownership-section {
    min-height: auto;
  }

  .boundary-figure {
    min-height: 30rem;
  }

  .scale-states {
    margin-top: 3rem;
  }

  .scale-state {
    min-height: 16rem;
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
  }

  .scale-state > p:first-child {
    margin-bottom: 3rem;
  }

  .product-rsi {
    min-height: auto;
  }

  .product-rsi h2 {
    font-size: clamp(3.8rem, 5.75vw, 6.75rem);
  }

  .product-rsi > p:not(.section-index) {
    margin-top: 2rem;
  }

  .product-rsi .text-link {
    margin-top: 1.75rem;
  }

  .research-hero {
    min-height: 100svh;
    padding-top: calc(var(--header-h) + 2.5rem);
    padding-bottom: 3rem;
  }

  .research-title {
    align-self: start;
  }

  .research-title > p:first-child {
    margin-bottom: 1.5rem;
  }

  .research-title h1 {
    font-size: clamp(4.75rem, 6.4vw, 7.5rem);
  }

  .research-deck {
    margin-top: 2rem;
  }

  .article-rail {
    top: 2rem;
  }

  .article-section,
  .article-conclusion {
    padding-bottom: 4rem;
  }

  .article-section h2,
  .article-conclusion h2 {
    max-width: 16ch;
    margin-bottom: 1.75rem;
    font-size: clamp(2.75rem, 3.6vw, 4.25rem);
  }

  .article-section > p,
  .article-conclusion > p {
    max-width: 50rem;
    margin-bottom: 1.15rem;
    font-size: clamp(1.1rem, 1.2vw, 1.2rem);
    line-height: 1.45;
  }

  .article-opening .article-lede {
    max-width: 50rem;
    font-size: clamp(1.65rem, 2vw, 2.15rem);
    line-height: 1.18;
  }

  .article-section blockquote {
    max-width: 50rem;
    margin-top: 2.25rem;
    padding-top: 1.25rem;
    font-size: clamp(1.8rem, 2.3vw, 2.6rem);
  }

  .system-figure,
  .clock-figure {
    margin-bottom: 4rem;
    padding: 1.5rem;
  }

  .system-figure figcaption,
  .clock-figure figcaption {
    margin-bottom: 2.5rem;
  }

  .system-layers div {
    min-height: 3.5rem;
    padding: 0.75rem 1rem;
  }

  .figure-note {
    margin-top: 2rem;
  }

  .recursion-test {
    margin-top: 2rem;
  }

  .clock-figure > div {
    min-height: 18rem;
    padding-top: 1.25rem;
    padding-bottom: 1.25rem;
  }

  .clock-figure div > p {
    margin-bottom: 4rem;
  }

  .clock-figure h3 {
    font-size: clamp(2rem, 2.5vw, 2.75rem);
  }

  .research-agenda dl {
    margin-top: 2rem;
  }

  .research-agenda dl div {
    padding: 1rem 0;
  }

  .article-conclusion {
    padding-top: 4rem;
  }
}

@media (max-width: 760px) {
  :root {
    --header-h: 4.25rem;
  }

  .paper-section,
  .loss-field,
  .system-section,
  .learning-depth,
  .methods-section,
  .ownership-section,
  .scale-section,
  .faq-section,
  .product-rsi,
  .article-body,
  .closing-field {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .page-home .home-hero,
  .page-home .hero-statement,
  .product-hero,
  .product-hero-copy {
    min-height: auto;
  }

  .page-home .hero-statement,
  .product-hero-copy,
  .research-hero {
    padding-top: calc(var(--header-h) + 1.5rem);
    padding-bottom: 2.5rem;
  }

  .page-home .context-line {
    margin-bottom: 1.5rem;
  }

  .page-home .hero-statement h1 {
    font-size: clamp(3.6rem, 16vw, 5.75rem);
  }

  .page-home .hero-lower {
    margin-top: 2rem;
  }

  .page-home .hero-thesis {
    font-size: 1.35rem;
  }

  .page-home .hero-detail {
    margin-top: 1.25rem;
  }

  .page-home .hero-intro {
    font-size: 0.94rem;
    line-height: 1.45;
  }

  .page-home .hero-links {
    margin-top: 1.25rem;
  }

  .product-hero h1 {
    font-size: clamp(3.3rem, 14vw, 5rem);
  }

  .product-hero-copy .hero-links {
    margin-top: 1.5rem;
  }

  .research-field-copy,
  .recursive-statement {
    padding-top: 3.5rem;
    padding-bottom: 3.5rem;
  }

  .recursive-statement {
    min-height: 24rem;
  }

  .product-state {
    min-height: 34rem;
  }

  .state-sequence {
    min-height: 22rem;
    margin: 2rem 0;
  }

  .learning-loop {
    min-height: 44rem;
    margin-top: 3rem;
  }

  .two-clocks article,
  .scale-state,
  .scale-state:first-child {
    min-height: 0;
  }

  .clock-visual {
    margin-bottom: 2.5rem;
  }

  .boundary-figure {
    min-height: 29rem;
  }

  .boundary-ring span {
    left: 55%;
    width: 7rem;
  }

  .scale-states {
    margin-top: 3rem;
  }

  .scale-state > p:first-child {
    margin-bottom: 2rem;
  }

  .research-meta {
    margin-top: 1.5rem;
  }

  .research-title > p:first-child {
    margin-bottom: 1.5rem;
  }

  .research-title h1 {
    font-size: clamp(4rem, 18vw, 6rem);
  }

  .research-deck {
    margin-top: 1.75rem;
  }

  .research-mark {
    min-height: 0;
    gap: 0.65rem;
    padding: 1rem 0;
    font-size: 1.2rem;
  }

  .article-rail {
    margin-bottom: 3.5rem;
  }

  .article-section,
  .article-conclusion {
    padding-bottom: 4rem;
  }

  .article-section blockquote,
  .recursion-test,
  .research-agenda dl {
    margin-top: 2.5rem;
  }

  .system-figure,
  .clock-figure {
    margin-bottom: 4rem;
  }

  .system-figure figcaption {
    margin-bottom: 2.5rem;
  }

  .article-conclusion {
    padding-top: 4rem;
  }
}

/* Content-first rails: labels support the section instead of offsetting it. */
.belief-section,
.loss-field,
.system-heading,
.research-hero,
.article-body {
  grid-template-columns: minmax(0, 1.55fr) minmax(17rem, 0.45fr);
  column-gap: clamp(3rem, 8vw, 10rem);
}

.belief-section,
.loss-field,
.system-heading,
.research-hero {
  row-gap: 2rem;
}

/* The copy column gives width back to the ledger rather than the fold getting
   wider; the fold gets taller instead. */
.loss-field {
  grid-template-columns: minmax(0, 1fr) minmax(22rem, 0.82fr);
}

.loss-field > .ledger {
  grid-column: 2;
  grid-row: 2;
}

.belief-section > .section-index,
.loss-field > .section-index,
.system-heading > .section-index {
  grid-column: 1;
  grid-row: 1;
}

.belief-section > .belief-copy,
.loss-field > div,
.system-heading > h2 {
  grid-column: 1;
  grid-row: 2;
}

.belief-section > .margin-note,
.loss-field > blockquote,
.system-heading > p:last-child {
  grid-column: 2;
  grid-row: 2;
}

.system-heading > p:last-child {
  align-self: end;
}

.scale-section header {
  grid-template-columns: 1fr;
  row-gap: 2rem;
}

.scale-section header > .section-index {
  grid-row: 1;
}

.scale-section header > h2 {
  grid-row: 2;
}

.research-title {
  grid-column: 1;
  grid-row: 1 / span 2;
}

.research-meta {
  grid-column: 2;
  grid-row: 1;
}

.research-mark {
  grid-column: 2;
  grid-row: 2;
}

.article-body > .article-rail {
  grid-column: 2;
  grid-row: 1 / span 8;
}

.article-body > .article-section,
.article-body > .article-conclusion,
.article-body > .system-figure,
.article-body > .clock-figure {
  grid-column: 1;
}

.article-body > .research-sources {
  grid-column: 2;
  grid-row: 9;
}

@media (max-width: 760px) {
  .belief-section,
  .loss-field,
  .system-heading,
  .research-hero,
  .article-body {
    grid-template-columns: 1fr;
    column-gap: 0;
  }

  .belief-section > .section-index,
  .belief-section > .belief-copy,
  .belief-section > .margin-note,
  .loss-field > .section-index,
  .loss-field > div,
  .loss-field > .ledger,
  .system-heading > .section-index,
  .system-heading > h2,
  .system-heading > p:last-child,
  .research-meta,
  .research-title,
  .research-mark,
  .article-body > .article-rail,
  .article-body > .article-section,
  .article-body > .article-conclusion,
  .article-body > .system-figure,
  .article-body > .clock-figure,
  .article-body > .research-sources {
    grid-column: 1;
    grid-row: auto;
  }
}

@media (min-width: 761px) and (max-width: 1050px) {
  .system-section {
    padding-top: 3rem;
    padding-bottom: 3rem;
  }

  .system-heading {
    grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
    column-gap: 3rem;
  }

  .system-heading > p:last-child {
    margin-top: 0;
  }
}

/* Keep section eyebrows visually attached to the heading they introduce. */
.belief-section,
.system-heading {
  row-gap: 1rem;
}

.belief-section > .section-index,
.system-heading > .section-index {
  margin-bottom: 0;
}

.system-heading > h2 {
  align-self: start;
}

/* A focused terminal surface at the product's two decision points. */
.install-command {
  --install-line: rgba(255, 255, 255, 0.28);
  --install-muted: var(--graphite);
  /* Matches the dark panels it sits beside (.product-state, .methods-section)
     rather than the deeper --ink used for full-bleed sections. */
  --install-surface: var(--deep-field);
  display: flex;
  width: min(100%, 45rem);
  max-width: 43rem;
  flex-direction: column;
  gap: 0.55rem;
  margin-top: clamp(1.5rem, 3vh, 2.35rem);
  scroll-margin-top: 1rem;
}

.install-command-label,
.install-command-note {
  color: var(--install-muted);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}

.install-command-note {
  margin: 0;
}

.install-command-box {
  display: grid;
  min-height: 3.55rem;
  align-items: center;
  padding: 0 1rem;
  border: 1px solid var(--install-line);
  color: var(--white);
  background: var(--install-surface);
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.install-command-prompt {
  margin-right: 0.8rem;
  color: var(--signal);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.86rem;
  font-weight: 600;
  user-select: none;
}

.install-command code {
  min-width: 0;
  overflow-x: auto;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: clamp(0.76rem, 0.9vw, 0.9rem);
  line-height: 1.3;
  scrollbar-width: none;
  white-space: nowrap;
}

.install-command code::-webkit-scrollbar {
  display: none;
}

.copy-command {
  min-width: 3.5rem;
  align-self: stretch;
  padding: 0 0 0 1rem;
  border: 0;
  border-left: 1px solid var(--install-line);
  color: inherit;
  background: transparent;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 0.7rem;
  font-weight: 600;
  text-align: right;
  opacity: 0.68;
  transition: opacity 160ms ease;
}

.copy-command:hover {
  opacity: 1;
}

.product-rsi .install-command {
  --install-line: rgba(255, 255, 255, 0.3);
  --install-muted: rgba(255, 255, 255, 0.62);
  max-width: 48rem;
}

@media (max-width: 760px) {
  .install-command-box {
    padding-left: 0.85rem;
    padding-right: 0.8rem;
  }
}

/* FAQ: home page, between the premise and the closing install fold. White so
   it separates from the paper .belief-section above it. */
.faq-section {
  display: grid;
  /* Vertical padding comes from the shared fold rhythm (4rem desktop,
     3.5rem phones), declared earlier alongside .scale-section. */
  padding-right: var(--gutter);
  padding-left: var(--gutter);
  background: var(--white);
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr);
  gap: clamp(2rem, 6vw, 7rem);
  align-items: start;
  scroll-margin-top: 1rem;
}

.faq-section h2 {
  position: sticky;
  top: 2rem;
}

.faq-list {
  border-top: 1px solid var(--ink);
}

.faq-item {
  border-bottom: 1px solid var(--line);
  scroll-margin-top: 1rem;
}

.faq-item summary {
  display: grid;
  padding: 1.45rem 0;
  align-items: baseline;
  cursor: pointer;
  grid-template-columns: 3rem minmax(0, 1fr) 1rem;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary::after {
  width: 0.8rem;
  height: 0.8rem;
  /* Level with the question's first line, not the middle of a wrapped one:
     half the h3 line box (font-size x 1.15 / 2) less half the icon. */
  margin-top: calc(clamp(1.35rem, 1.9vw, 1.9rem) * 0.575 - 0.4rem);
  align-self: start;
  justify-self: end;
  content: "";
  background:
    linear-gradient(currentColor, currentColor) center / 100% 1px no-repeat,
    linear-gradient(currentColor, currentColor) center / 1px 100% no-repeat;
  transition: transform 160ms ease;
}

.faq-item[open] summary::after {
  color: var(--signal);
  transform: rotate(45deg);
}

.faq-number {
  color: var(--graphite);
  font-size: 0.7rem;
  font-weight: 500;
}

.faq-item h3 {
  margin: 0;
  /* Keeps a wrapped question clear of the open/close mark. */
  padding-right: 1rem;
  font-family: var(--serif);
  font-size: clamp(1.35rem, 1.9vw, 1.9rem);
  font-weight: 400;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.faq-answer {
  padding: 0 1rem 1.75rem 3rem;
}

.faq-answer p {
  max-width: 40rem;
  margin: 0;
  color: var(--graphite);
  font-size: 0.95rem;
}

.faq-answer p + p {
  margin-top: 0.9rem;
}

.faq-answer code {
  padding: 0.1em 0.35em;
  color: var(--ink);
  background: var(--cold-paper);
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", monospace;
  font-size: 0.85em;
}

.faq-answer a {
  color: var(--ink);
}

/* Emphasis in an answer is italic and underlined. */
.faq-answer em {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
}

@media (prefers-reduced-motion: reduce) {
  .faq-item summary::after {
    transition: none;
  }
}

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

  .faq-section h2 {
    position: static;
  }

  .faq-item summary {
    grid-template-columns: 2.25rem minmax(0, 1fr) 1rem;
  }

  .faq-answer {
    padding-left: 2.25rem;
    padding-right: 0;
  }
}

/* "Try Qova" CTA: replaces the install panels at the same four conversion
   points (home hero and closing, product hero and closing). Each one leads to
   the pricing page (pricing.html), so the site no longer shows the install
   command. Ink on paper folds, white on the dark folds. */
.cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.55rem;
  margin-top: clamp(1.5rem, 3vh, 2.35rem);
  scroll-margin-top: 1rem;
}

.page-home .hero-cta {
  gap: 0.6rem;
  margin-top: 0;
}

/* On desktop the hero CTA sits flush right, ending on the rule's right edge,
   with its note right-aligned beneath it. Phones keep it left-aligned under
   the thesis. */
@media (min-width: 761px) {
  .page-home .hero-detail {
    grid-column: 7 / -1;
  }

  .page-home .hero-cta {
    align-items: flex-end;
    text-align: right;
  }
}

.cta-button {
  display: inline-flex;
  min-height: 3.2rem;
  align-items: center;
  gap: 1.1rem;
  padding: 0 1.4rem;
  color: var(--white);
  background: var(--ink);
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  transition: gap 180ms ease, opacity 180ms ease;
}

.cta-button::after {
  content: "\2192";
  font-weight: 500;
}

.cta-button:hover {
  gap: 1.4rem;
}

.closing-field .cta-button,
.product-rsi .cta-button {
  color: var(--ink);
  background: var(--white);
}

.cta-note {
  margin: 0;
  color: var(--graphite);
  font-size: 0.8rem;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .cta-button {
    transition: none;
  }
}