@import url('fonts.css');

:root {
  /* Three sticky layers, stacked in this order. Each offset derives from the
     one above so a change to any of them cannot silently overlap the next. */
  --promo-h: 2.2rem;      /* 1. the training strip */
  --stepnav-h: 3.1rem;    /* 2. the demo step navigation */
  --paper: #f5f3ee;
  --paper-2: #edeae3;
  --card: #fdfcf8;
  --ink: #1c2620;
  --ink-2: #2b332c;
  --ink-3: #3a453c;
  --ink-4: #4a544c;
  --muted: #59645b;
  --green-900: #1f3d2f;
  --green-700: #2f5a44;
  --green-300: #8fb79c;
  --on-dark: #f2f0e9;
  --on-dark-2: #dfe4da;
  --on-dark-3: #cfdbd0;
  --rule: #d1d6ce;
  --rule-2: #e4e2da;
  --rule-3: #748078;
  --rule-dark: #4d6c5b;
  --wrap: 76rem;
  --serif: "Newsreader", Georgia, serif;
  --sans: "Public Sans", system-ui, -apple-system, sans-serif;
  color-scheme: light;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 4rem;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-optical-sizing: auto;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

a {
  color: var(--green-700);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

a:hover { color: var(--ink); text-decoration-color: var(--ink); }
::selection { background: #dfe6de; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 3px solid var(--green-700); outline-offset: 3px; }
.masthead a:focus-visible { outline-color: var(--on-dark); }
table { border-collapse: collapse; }
img, video { max-width: 100%; }
section[id] { scroll-margin-top: 4rem; }

.n { font-variant-numeric: tabular-nums; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }
.rule, .hairline { position: relative; }
.rule::before, .hairline::before {
  content: ""; position: absolute; top: 0; left: 50%;
  width: 100vw; margin-left: -50vw; border-top: 1px solid var(--rule);
}
.rule::before { border-top-color: var(--ink); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.skip-link {
  position: absolute;
  left: 1rem;
  top: -5rem;
  z-index: 20;
  background: var(--green-900);
  color: var(--on-dark);
  font-size: 1rem;
  padding: 0.75rem 1.1rem;
  text-decoration: none;
}

.skip-link:focus { top: 1rem; color: var(--on-dark); }

/* Masthead */
.masthead { background: var(--green-900); color: var(--on-dark); }
.masthead .wrap {
  min-height: 4.6rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem 2rem;
}

.wordmark {
  font-family: var(--serif);
  font-size: 2.05rem;
  line-height: 1;
  font-weight: 500;
  letter-spacing: -0.035em;
  text-decoration: none;
  color: var(--on-dark);
}

.masthead .wordmark:hover { color: var(--on-dark); }
footer .wordmark:hover { color: var(--green-700); }
.wordmark { display: inline-flex; align-items: center; gap: 0.32em; }
.claw-mark {
  flex: 0 0 auto;
  width: 1.05em;
  height: 1.42em;
  background-color: currentColor;
  -webkit-mask: url('claw-mark.svg') no-repeat center / contain;
  mask: url('claw-mark.svg') no-repeat center / contain;
}
.wordmark .claw { position: relative; }
.wordmark .claw::before, .wordmark .claw::after {
  content: ""; position: absolute; top: 0.38em;
  border-top: 1.5px solid currentColor;
  transform: scaleX(0); transform-origin: left center;
  transition: transform 220ms ease;
}
.wordmark .claw::before { left: 0; right: 62%; }
.wordmark .claw::after { left: 72%; right: -0.05em; transition-delay: 70ms; }
.wordmark:hover .claw::before, .wordmark:hover .claw::after,
.wordmark:focus-visible .claw::before, .wordmark:focus-visible .claw::after {
  transform: scaleX(1);
}
.masthead nav { margin-left: auto; display: flex; flex-wrap: wrap; gap: 0 0.5rem; }
.masthead nav a {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 0 0.65rem;
  color: var(--on-dark-3);
  font-size: 1rem;
  text-decoration-color: var(--rule-dark);
}

.masthead nav a[aria-current] { color: var(--on-dark); text-decoration-color: var(--on-dark); }

.banner { background: var(--paper-2); border-bottom: 1px solid var(--ink); }
.banner p { margin: 0; padding: 0.65rem 0; font-size: 1rem; line-height: 1.45; color: var(--ink-2); }

/* Layout and type */
.row { display: flex; flex-wrap: wrap; gap: 2rem 3rem; padding: 3rem 0; }
.section-compact { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.rail { flex: 0 0 9rem; min-width: 0; }
.rail .sticky { position: sticky; top: calc(var(--promo-h) + 2.3rem); z-index: 1; font-size: 1rem; color: var(--muted); }
.rail .num {
  position: sticky;
  top: calc(var(--promo-h) + 2.05rem);
  z-index: 1;
  font-family: var(--serif);
  font-size: 3.4rem;
  line-height: 0.9;
  color: var(--green-700);
  letter-spacing: -0.04em;
  font-variant-numeric: tabular-nums;
}

.col { flex: 1 1 40rem; min-width: 0; }
h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: -0.02em;
  text-wrap: pretty;
}

h1 { font-size: clamp(2.7rem, 6.2vw, 4.5rem); line-height: 1.02; letter-spacing: -0.034em; margin: 0 0 1.4rem; }
h2 { font-size: clamp(2rem, 4vw, 2.7rem); line-height: 1.08; margin: 0 0 1.25rem; }
h3 { font-size: clamp(1.6rem, 3vw, 2rem); line-height: 1.14; margin: 0 0 1rem; }
h4 { font-size: 1.25rem; line-height: 1.25; margin: 0 0 0.65rem; }
.prose, .lead, .pull { max-width: none; }
.prose { font-size: 1.08rem; line-height: 1.65; }
.prose p { margin: 0 0 1rem; }
.prose p:last-child { margin-bottom: 0; }
.lead { font-size: 1.18rem; line-height: 1.6; }
.lead p { margin: 0 0 0.9rem; }
.lead p:last-child { margin-bottom: 0; }
.pull { margin: 0; font-size: 1.12rem; line-height: 1.6; border-left: 2px solid var(--green-700); padding-left: 1.1rem; }

/* Hero and navigation */
.hero { position: relative; min-height: 38rem; padding: clamp(2.25rem, 5vw, 3.75rem) 0 2.75rem; }
.hero-bleed {
  position: absolute;
  inset-block: 0;
  left: 50%;
  width: 100vw;
  margin-left: -50vw;
  overflow: hidden;
  pointer-events: none;
}
.hero-vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 72% 22%; opacity: 0.64; filter: contrast(1.03); }
.hero-wash { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(245,243,238,0.97) 0%, rgba(245,243,238,0.91) 42%, rgba(245,243,238,0.7) 68%, rgba(245,243,238,0.6) 100%); }
/* The hero is the one place a full-width measure fights the backdrop: the
   wash is heaviest on the left, so the text stays there. Every other section
   keeps the full width. */
.hero .col { position: relative; max-width: 46rem; }
@media (max-width: 900px) { .hero .col { max-width: none; } }
.hero h1 { margin-bottom: 1.25rem; }
.hero-copy { font-family: var(--serif); font-size: 1.22rem; line-height: 1.55; }
.hero-scope { max-width: none; margin: 1.25rem 0 0; font-size: 1rem; line-height: 1.55; color: var(--ink-3); }
.actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.4rem; }
.btn { text-align: center;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.3rem;
  border: 1px solid var(--green-900);
  font-size: 1rem;
  line-height: 1.3;
  text-decoration: none;
}

.btn-solid { background: var(--green-900); color: var(--paper); }
.btn-solid:hover { background: var(--green-700); border-color: var(--green-700); color: var(--paper); }
.btn-ghost { color: var(--ink); border-color: var(--rule-3); background: transparent; }
.btn-ghost:hover { border-color: var(--ink); background: var(--paper-2); color: var(--ink); }
.result-key { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-top: 1.4rem; }

.step-nav {
  position: sticky;
  top: var(--promo-h);
  z-index: 5;
  overflow-x: auto;
  background: rgba(245, 243, 238, 0.98);
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}

.step-nav ol { display: flex; width: max-content; min-width: 100%; margin: 0; padding: 0; list-style: none; }
.step-nav li { flex: 1 0 auto; }
.step-nav a {
  min-height: 48px;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0 1rem;
  color: var(--ink-2);
  font-size: 1rem;
  white-space: nowrap;
  text-decoration: none;
}

.step-nav a:hover { background: var(--paper-2); color: var(--ink); }
.step-nav a span { color: var(--green-700); font-weight: 700; }
.demo-intro { padding-bottom: 2.25rem; }
.demo-step { scroll-margin-top: 4rem; }
.step-copy { margin-bottom: 1.65rem; }

/* Disclosures and definitions */
.disclosure { margin-top: 1rem; border-top: 1px solid var(--rule); }
.disclosure > summary {
  min-height: 44px;
  display: list-item;
  padding: 0.75rem 0;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 600;
}

.disclosure[open] > summary { margin-bottom: 0.65rem; }
.detail-copy { margin: 0.4rem 0 1rem; }
.detail-gap { margin-top: 1rem !important; }
.tech-facts { max-width: none; margin: 0.25rem 0 1rem; }
.tech-facts > div { display: grid; grid-template-columns: minmax(9rem, 0.4fr) minmax(0, 1fr); gap: 0.5rem 1rem; padding: 0.6rem 0; border-bottom: 1px solid var(--rule-2); }
.tech-facts dt { color: var(--ink-4); }
.tech-facts dd { margin: 0; font-weight: 600; }
.long-value { overflow-wrap: anywhere; }

dl.defs { margin: 1.7rem 0 0; border-top: 1px solid var(--rule); max-width: none; }
dl.defs > div { display: flex; flex-wrap: wrap; gap: 0.4rem 1.5rem; padding: 0.95rem 0; border-bottom: 1px solid var(--rule); }
dl.defs dt { flex: 0 0 12rem; font-size: 1rem; font-weight: 600; }
dl.defs dd { flex: 1 1 16rem; margin: 0; font-size: 1.05rem; line-height: 1.5; }

/* Demo cards */
.pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.card { min-width: 0; background: var(--card); padding: 1.25rem; }
.card.marked { box-shadow: inset 3px 0 0 var(--green-900); }
.card-head { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; border-bottom: 1px solid var(--rule); padding-bottom: 0.7rem; margin-bottom: 0.85rem; }
.card-head .label { font-size: 1rem; font-weight: 700; }
.card-head .id { font-size: 1rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.passage { font-family: var(--serif); font-size: 1.08rem; line-height: 1.6; color: var(--ink-2); }
.excerpt { margin: 1.15rem 0 0; }
.full-passage { margin: 0 0 1rem; }
.card-detail { margin-top: 1rem; padding-top: 0.85rem; border-top: 1px solid var(--rule); }
.word-change, .change-mark { background: #dfe8d9; color: var(--ink); padding: 0 0.12em; }
.zero-width { font-family: var(--sans); font-size: 0.88em; white-space: nowrap; }

dl.readout { margin: 0; border-bottom: 1px solid var(--rule); font-size: 1rem; font-variant-numeric: tabular-nums; }
dl.readout > div { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--rule-2); }
dl.readout > div:last-child { border-bottom: 0; }
dl.readout dt { color: var(--ink-4); }
dl.readout dd { margin: 0; font-weight: 700; }

.tag { border: 1px solid var(--ink); padding: 0.25rem 0.55rem; font-size: 1rem; font-weight: 500; display: inline-block; }
.tag-on { background: var(--green-900); color: var(--paper); border-color: var(--green-900); }

/* Character controls */
.controls { border-top: 1px solid var(--ink); padding-top: 1.1rem; margin-bottom: 1rem; }
.controls .hint { margin: 0 0 0.8rem; font-size: 1rem; color: var(--muted); }
.control-set { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.control {
  min-height: 48px;
  flex: 1 1 12rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--ink);
  background: var(--card);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

.control[aria-pressed="true"] { background: var(--green-900); color: var(--paper); }
.reset-control { flex-grow: 0; border-color: var(--rule-3); }
.panel { border: 1px solid var(--rule); background: var(--card); }
.state-block { margin-top: 1rem; }
#act2-states.js { min-block-size: 17rem; }
#act2-states.js .state-block { display: none; }
#act2-states.js .state-block.active { display: block; }
.state-panel > div, .state-panel > output, .state-panel > details { display: block; padding: 1rem 1.2rem; border-bottom: 1px solid var(--rule); }
.state-panel > :last-child { border-bottom: 0; }
.state-outcome { display: flex !important; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1rem; }
.score-change { font-size: 1.15rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.state-summary { margin: 0 0 0.75rem; font-size: 1.05rem; line-height: 1.55; }
.state-panel .excerpt { margin-top: 0; }
.repair p { margin: 0; font-size: 1.05rem; line-height: 1.55; }
.report { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--ink-2); overflow-wrap: break-word; font-variant-numeric: tabular-nums; }
.limitation, .no-script { margin: 1rem 0 0; padding: 1rem 1.1rem; border-left: 3px solid var(--green-700); background: var(--paper-2); font-size: 1rem; line-height: 1.55; }
.no-script p { margin: 0 0 0.8rem; }

/* Tables */
.scroll { max-width: 100%; overflow-x: auto; }
table.data { width: 100%; min-width: 36rem; font-size: 1rem; line-height: 1.45; font-variant-numeric: tabular-nums; }
table.data th { text-align: left; font-weight: 600; color: var(--ink-4); }
table.data thead th { padding: 0.55rem 0.9rem 0.55rem 0; border-bottom: 1px solid var(--ink); }
table.data td { padding: 0.7rem 0.9rem 0.7rem 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; }
table.data td.reason { color: var(--ink-4); }
table.kv { min-width: 0; }
table.kv th { width: 13rem; padding: 0.65rem 1rem 0.65rem 0; border-bottom: 1px solid var(--rule-2); vertical-align: top; font-weight: 400; font-variant-numeric: normal; }
table.kv td { padding: 0.65rem 0; border-bottom: 1px solid var(--rule-2); font-weight: 600; }

/* Human passage results */
.count-lead { margin: 0 0 0.75rem; font-family: var(--serif); font-size: clamp(3rem, 8vw, 5rem); line-height: 0.95; letter-spacing: -0.04em; color: var(--green-700); }
.metric-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; max-width: none; margin: 1.7rem 0; background: var(--rule); border: 1px solid var(--rule); }
.metric-grid > div { background: var(--card); padding: 1rem; }
.metric-grid dt { font-size: 1rem; color: var(--ink-4); }
.metric-grid dd { margin: 0.35rem 0 0; font-family: var(--serif); font-size: 2rem; }
.case-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.8rem; margin: 1.7rem 0; }
.case { margin: 0; border: 1px solid var(--rule-3); background: var(--card); padding: 1.1rem; }
.case p { margin: 0; font-family: var(--serif); font-size: 1.05rem; line-height: 1.55; color: var(--ink-3); }
.case .case-source { margin-top: 0.9rem; padding-top: 0.8rem; border-top: 1px solid var(--rule); font-family: var(--sans); font-size: 1rem; line-height: 1.5; color: var(--muted); }

figure.plot { margin: 0 0 1.5rem; border: 1px solid var(--rule); background: var(--card); padding: 1.2rem; }
figure.plot figcaption { font-size: 1rem; font-weight: 700; margin-bottom: 0.8rem; }
.plot-scroll { overflow-x: auto; }
.plot-svg { display: block; width: 100%; min-width: 38rem; height: auto; }
.plot-dot { fill: var(--card); stroke: var(--green-900); stroke-width: 1.5; }
.plot-dot.over { fill: var(--green-900); }
.plot-axis-line { stroke: var(--rule-3); stroke-width: 1; }
.plot-threshold { stroke: var(--green-900); stroke-width: 1.5; stroke-dasharray: 5 4; }
.plot-label { fill: var(--muted); font-family: var(--sans); font-size: 14px; text-anchor: start; }
.plot-label-centre { text-anchor: middle; }
.plot-label-end { text-anchor: end; }
.plot-threshold-label { fill: var(--green-900); font-weight: 700; }
.legend { display: flex; flex-wrap: wrap; gap: 0.6rem 1.5rem; margin-top: 0.9rem; font-size: 1rem; color: var(--ink-4); }
.legend span { display: flex; align-items: center; gap: 0.45rem; }
.swatch { width: 9px; height: 9px; border: 1px solid var(--green-900); display: block; background: var(--card); }
.swatch.on { background: var(--green-900); }
.dash { width: 16px; height: 0; border-top: 1.5px dashed var(--green-900); display: block; }

/* Work history and assessment */
.part-two { border-top: 5px solid var(--green-900); background: var(--paper-2); }
.history-intro { max-width: none; padding: clamp(3rem, 7vw, 5rem) 0 2.5rem; }
.big-h { font-size: clamp(2.4rem, 5vw, 3.5rem); line-height: 1.05; letter-spacing: -0.03em; margin: 0 0 1.3rem; }
.history-copy { font-family: var(--serif); font-size: 1.22rem; }
.question-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; background: var(--rule-3); border: 1px solid var(--rule-3); }
.question-card { position: relative; min-height: 14rem; padding: 1.4rem; background: var(--card); }
.question-number { display: block; margin-bottom: 1.5rem; font-family: var(--serif); font-size: 2.5rem; line-height: 1; color: var(--green-700); }
.question-card h3 { font-size: 1.6rem; }
.question-card p { margin: 0; font-size: 1.05rem; line-height: 1.6; color: var(--ink-2); }
.keep-matters { padding: 3rem 0 3.5rem; }
.signed-note { max-width: none; margin: 1.5rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--rule-3); font-size: 1rem; line-height: 1.6; }
.assessment { padding: clamp(3rem, 7vw, 5rem) 0; }
.assessment .prose { margin-bottom: 1.5rem; }
.assessment-list { max-width: none; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.assessment-list li { padding: 0.9rem 0; border-bottom: 1px solid var(--rule); font-family: var(--serif); font-size: 1.3rem; }
.end-links { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 2rem; }

/* Method and sources */
.page-intro { max-width: none; padding: clamp(2.5rem, 6vw, 4rem) 0 2.5rem; }
.back-link, .back-after, .source-link { font-size: 1rem; line-height: 1.6; }
.back-link { display: inline-block; min-height: 44px; margin-bottom: 1rem; }
.back-after { margin: 1.5rem 0 0; }
.section-nav { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 2rem; }
.section-nav a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 0.9rem; border: 1px solid var(--rule-3); color: var(--ink); text-decoration: none; }
.section-nav a:hover { border-color: var(--ink); background: var(--paper-2); }
.reference-section { padding-top: 2.75rem; padding-bottom: 3rem; }
.notice { max-width: none; padding: 1.1rem 1.2rem; border: 2px solid var(--green-900); background: var(--card); }
.notice p { margin: 0 0 0.55rem; font-size: 1.05rem; line-height: 1.55; }
.notice p:last-child { margin-bottom: 0; }
.disclaimer-copy { margin-top: 1.5rem; }
.limit-list { max-width: none; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ink); }
.limit-list li { padding: 0.9rem 0 0.9rem 1.5rem; border-bottom: 1px solid var(--rule); font-size: 1.05rem; line-height: 1.55; }
.limit-list li::before { content: "✓"; margin-left: -1.5rem; margin-right: 0.65rem; color: var(--green-700); }
.source-link { margin: 1rem 0 0; }
.source-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--rule); border: 1px solid var(--rule); }
.source-card { min-width: 0; background: var(--card); padding: 1.2rem; }
.source-card h3 { font-size: 1.45rem; }
.source-card p { margin: 0 0 1rem; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
.source-card a { overflow-wrap: anywhere; }
.source-list { max-width: none; margin: 1.2rem 0 0; padding-left: 1.25rem; }
.source-list li { margin-bottom: 0.65rem; font-size: 1rem; line-height: 1.55; }
.corpus-table { margin-top: 1.3rem; }

/* Footer */
footer { border-top: 1px solid var(--ink); background: var(--paper); }
footer .wrap { padding-top: 2.25rem; padding-bottom: 2.5rem; display: flex; flex-wrap: wrap; gap: 2rem 3rem; }
footer p { margin: 0 0 0.45rem; font-size: 1rem; line-height: 1.55; color: var(--ink-2); }
footer .footer-primary { flex: 1 1 24rem; min-width: 0; }
footer .footer-mark { margin-bottom: 0.8rem; }
footer .wordmark { font-size: 1.5rem; color: var(--ink); }
footer .wordmark .claw::before, footer .wordmark .claw::after { border-top-width: 1px; }
footer nav { flex: 1 1 10rem; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
footer nav a { min-height: 44px; display: flex; align-items: center; font-size: 1rem; }
.colophon { flex: 1 1 100%; margin: 0; color: var(--muted); }

@media (max-width: 900px) {
  .rail { flex-basis: 100%; }
  .rail .num, .rail .sticky { position: static; }
  .case-grid, .source-grid { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero-vid { object-position: 62% 14%; opacity: 0.5; }
  .hero-wash { background: linear-gradient(180deg, rgba(245,243,238,0.87) 0%, rgba(245,243,238,0.94) 44%, rgba(245,243,238,0.98) 100%); }
}

@media (max-width: 700px) {
  .masthead .wrap { min-height: 4.25rem; }
  .masthead nav { gap: 0; }
  .masthead nav a { padding: 0 0.45rem; }
  .banner p { font-size: 0.98rem; }
  .step-nav ol { width: 100%; min-width: 0; }
  .step-nav li { flex: 1 1 25%; min-width: 0; }
  .step-nav a { min-height: 58px; justify-content: center; flex-direction: column; gap: 0.1rem; padding: 0.35rem 0.2rem; white-space: normal; text-align: center; line-height: 1.15; }
  .hero { padding-top: 2rem; }
  .hero-vid { opacity: 0.38; }
  .hero-wash { background: rgba(245,243,238,0.93); }
  .hero-copy { font-size: 1.08rem; line-height: 1.48; }
  .hero-scope { line-height: 1.45; }
  .row { gap: 1.25rem; padding: 2.5rem 0; }
  .actions { flex-direction: column; }
  .actions .btn { text-align: center; width: 100%; text-align: center; }
  .pair, .question-grid, .metric-grid { grid-template-columns: minmax(0, 1fr); }
  .question-card { min-height: 0; }
  .control { flex: 1 1 100%; width: 100%; text-align: center; }
  .reset-control { flex-grow: 1; }
  .state-panel > div, .state-panel > output, .state-panel > details { padding: 1rem; min-width: 0; }
  .state-outcome { align-items: flex-start; flex-direction: column; }
  .tech-facts > div { grid-template-columns: 1fr; }
  table.kv th { width: 9rem; }
  .long-value, .report, .n { overflow-wrap: anywhere; }
  .section-nav { flex-direction: column; }
  .section-nav a { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .hero-vid { display: none; }
}

@media print {
  .masthead, .banner, .step-nav, .controls, .end-links { display: none; }
  body { background: #fff; }
  .disclosure > * { display: block; }
}


/* Promotion for the training the demo came out of. The strip is sticky and
   deliberately thin; the masthead below it is darker, so the two read as
   separate bands rather than one heavy block. */
.promo-bar {
  position: sticky; top: 0; z-index: 8;
  background: var(--green-700); color: var(--on-dark);
  border-bottom: 1px solid var(--green-900);
}
.promo-bar p {
  margin: 0; padding: 0.45rem 0;
  font-family: var(--sans); font-size: 0.86rem; line-height: 1.5;
  display: flex; flex-wrap: wrap; align-items: baseline;
  justify-content: center; text-align: center; gap: 0.25rem 0.9rem;
}
.promo-bar a { color: var(--on-dark); text-decoration-color: rgba(242, 240, 233, 0.55); }
.promo-bar a:hover { color: #fff; text-decoration-color: #fff; }
.promo-bar a:focus-visible { outline: 3px solid var(--on-dark); outline-offset: 3px; }
.promo-short { display: none; }
@media (max-width: 700px) {
  /* Swap the sentence for a shorter one rather than dropping it. A bare
     link with no context reads as nothing on a phone. */
  .promo-lead { display: none; }
  .promo-short { display: inline; }
}
@media (max-width: 420px) {
  .promo-bar p { font-size: 0.82rem; gap: 0.15rem 0.6rem; }
}

.training dl.defs dt { flex-basis: 16rem; }


/* The training section runs the full width of the page rather than sitting in
   the narrow body column, so it reads as a footer note to the argument. */
.training .col { flex: 1 1 100%; }
.training .side { display: none; }


/* Layer 3: the big step numerals. Inside the demo they must clear the step
   navigation above them, and pass behind it rather than through it. */
.demo-step .rail .num {
  top: calc(var(--promo-h) + var(--stepnav-h) + 1.1rem);
  z-index: 1;
}

/* Full-bleed treatment for the sections that carry the results. A background
   and the mark separate them from the reading column without a heading. */
/* The band sits inside the width-constrained wrapper, so it paints its
   background past the wrapper edges to the viewport instead of stopping short
   of them. The clip keeps that paint from adding a scrollbar. */
.band {
  position: relative;
  background: var(--paper-2);
  box-shadow: 0 0 0 100vmax var(--paper-2);
  clip-path: inset(0 -100vmax);
}
.band + .band { margin-top: 0; }
.band::before {
  content: ""; position: absolute; right: -8%; top: 50%; transform: translateY(-50%);
  width: min(26rem, 38vw); aspect-ratio: 100 / 134;
  background-color: var(--green-900); opacity: 0.05; pointer-events: none;
  -webkit-mask: url('claw.svg') no-repeat center / contain;
  mask: url('claw.svg') no-repeat center / contain;
}
@media (max-width: 900px) { .band::before { display: none; } }
.band .col, .band .rail { position: relative; }
.band .metric-grid, .band .scroll, .band .case { max-width: none; }


/* Course cards, following the pattern the training site already uses. */
.course-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr));
  gap: 2rem 3rem; margin: 2rem 0 0;
}
.course { border-left: 1px solid var(--rule-3); padding-left: 1.4rem; }
.course h3 { font-size: 1.45rem; margin: 0 0 0.7rem; }
.course p { margin: 0 0 0.8rem; font-size: 1.05rem; line-height: 1.55; }
.course .course-audience { color: var(--ink-4); }
.course .course-actions { margin: 1.1rem 0 0; }
.training .col { flex: 1 1 100%; }


/* The live checker. */
.checker-field { margin: 1.6rem 0 1.2rem; }
.checker-field label {
  display: block; font-family: var(--sans); font-size: 0.95rem;
  font-weight: 500; margin-bottom: 0.5rem;
}
#checker-input {
  width: 100%; max-width: 52rem; padding: 0.9rem 1rem;
  font-family: var(--sans); font-size: 1rem; line-height: 1.55;
  color: var(--ink); background: var(--card);
  border: 1px solid var(--ink); border-radius: 0; resize: vertical;
}
#checker-input:focus-visible { outline: 3px solid var(--green-700); outline-offset: 2px; }
#checker-run[disabled] { opacity: 0.6; cursor: progress; }


/* Spacing. Sections were carrying their own ad hoc padding, so the rhythm
   changed depending on which utility happened to be applied. */
.row { padding: clamp(2.75rem, 5vw, 4rem) 0; }
.row + .row { padding-top: clamp(2.75rem, 5vw, 4rem); }
.band { padding-top: clamp(3rem, 5.5vw, 4.5rem); padding-bottom: clamp(3rem, 5.5vw, 4.5rem); }
.band + .band { border-top: 1px solid var(--rule-3); }
.training .course-grid { margin-bottom: 0; }
.training .course-grid + * { margin-top: clamp(2rem, 3.5vw, 3rem); }
.training .col > :last-child { margin-bottom: 0; }

/* Footer. */
footer .wrap { display: block; padding-top: 3rem; padding-bottom: 2.5rem; }
.footer-top { display: flex; flex-wrap: wrap; gap: 2.5rem 4rem; align-items: flex-start; }
.footer-primary { flex: 1 1 28rem; min-width: 0; }
.footer-primary .wordmark { margin-bottom: 1rem; }
.footer-primary p { max-width: 34rem; }
.footer-links { flex: 1 1 20rem; display: flex; flex-wrap: wrap; gap: 2rem 3.5rem; }
.footer-links nav { display: flex; flex-direction: column; gap: 0.1rem; min-width: 9rem; }
.footer-links h2 {
  font-family: var(--sans); font-size: 0.86rem; font-weight: 500;
  color: var(--muted); margin: 0 0 0.6rem; letter-spacing: 0;
}
.footer-links a { min-height: 2.1rem; display: flex; align-items: center; font-size: 1rem; }
footer .colophon {
  margin: 2.5rem 0 0; padding-top: 1.2rem;
  border-top: 1px solid var(--rule); color: var(--muted);
  font-family: var(--sans); font-size: 0.84rem;
}


/* The training section is the one place the page asks for something, so it
   carries the dark green rather than another tint. The mark sits behind it in
   the light on dark direction. */
.band-green {
  background: var(--green-900);
  box-shadow: 0 0 0 100vmax var(--green-900);
  color: var(--on-dark);
}
.band-green h2, .band-green h3 { color: var(--on-dark); }
.band-green .prose, .band-green p { color: var(--on-dark-2); }
.band-green .course { border-left-color: var(--rule-dark); }
.band-green .course-audience { color: var(--on-dark-3); }
.band-green a { color: var(--on-dark); text-decoration-color: rgba(242, 240, 233, 0.5); }
.band-green a:hover { color: #fff; text-decoration-color: #fff; }
.band-green .btn-solid {
  background: var(--on-dark); color: var(--green-900); border-color: var(--on-dark);
}
.band-green .btn-solid:hover { background: #fff; border-color: #fff; color: var(--green-900); }
.band-green .btn-ghost { color: var(--on-dark); border-color: var(--rule-dark); }
.band-green .btn-ghost:hover { border-color: var(--on-dark); background: rgba(255,255,255,0.06); color: var(--on-dark); }
.band-green::before { background-color: var(--on-dark); opacity: 0.06; }
.band-green a:focus-visible, .band-green button:focus-visible { outline-color: var(--on-dark); }