/* Lesson One AI. One stylesheet, no build step, no JavaScript.
   Fonts are self-hosted woff2 files in site/fonts/ (OFL).
   If a font file is missing, Georgia and system-ui take over.
   Spruce is the only accent colour.
   Motion is scroll driven only and lives in one block near the end.
   Without support, or with reduced motion, every element stays in place. */

@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("../fonts/source-serif-4-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Source Sans 3";
  src: url("../fonts/source-sans-3-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

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

:root {
  --c-paper: #F6F1E7;
  --c-paper-deep: #EEE7DA;
  --c-ink: #1A1F1C;
  --c-muted: #5C615C;
  --c-rule: #D9D1C3;
  --c-accent: #1E3A2F;
  --c-accent-hover: #142A21;
  --c-on-accent: #F6F1E7;
  --c-on-accent-muted: #C9D1C8;

  --font-serif: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-sans: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --fs-xs: 0.8125rem;
  --fs-sm: 0.9375rem;
  --fs-base: 1.125rem;
  --fs-lg: clamp(1.1875rem, 1.05rem + 0.5vw, 1.4375rem);
  --fs-h3: clamp(1.25rem, 1.15rem + 0.4vw, 1.5rem);
  --fs-h2: clamp(1.875rem, 1.4rem + 1.6vw, 2.75rem);
  --fs-h1: clamp(2.75rem, 1.4rem + 4.2vw, 5.25rem);
  --fs-numeral: clamp(3.5rem, 2.5rem + 3vw, 5.5rem);
  --fs-amount: clamp(1.75rem, 1.4rem + 1.2vw, 2.5rem);
  --fs-mark: clamp(2.5rem, 1.6rem + 3.5vw, 4.5rem);

  --lh-body: 1.6;
  --ls-label: 0.08em;

  --measure: 64ch;
  --wide: 76rem;
  --gutter: clamp(1.25rem, 0.25rem + 4vw, 3rem);
  --col-gap: clamp(1.5rem, 1rem + 2vw, 3rem);

  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --s-section: clamp(4rem, 2.5rem + 5vw, 7.5rem);

  --rule: 1px solid var(--c-rule);
  --rule-strong: 2px solid var(--c-ink);
  --radius: 2px;
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur-fast: 120ms;
  --header-h: 4.25rem;

  --stack-tab: 0.75rem;
}

/* Base */

html {
  background: var(--c-paper);
  color: var(--c-ink);
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: var(--c-accent); color: var(--c-on-accent); }
img { max-width: 100%; display: block; }

h1, h2, h3 {
  font-family: var(--font-serif);
  font-optical-sizing: auto;
  text-wrap: balance;
  margin: 0 0 var(--s-4);
  color: inherit;
}
h1 {
  font-size: var(--fs-h1);
  font-weight: 400;
  line-height: 1.02;
  letter-spacing: -0.02em;
  max-width: 16ch;
  margin-bottom: var(--s-5);
}
h2 {
  font-size: var(--fs-h2);
  font-weight: 400;
  line-height: 1.1;
  letter-spacing: -0.015em;
  max-width: 22ch;
}
h3 {
  font-size: var(--fs-h3);
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: -0.005em;
}
p, li { max-width: var(--measure); text-wrap: pretty; }
p { margin: 0 0 var(--s-4); }
ol, ul { margin: 0 0 var(--s-5); padding-left: 1.25rem; }
li + li { margin-top: var(--s-2); }

/* Plain lists in main get a small spruce square, echoing the logo */
main ul { list-style: none; padding-left: 0; }
main ul > li { position: relative; padding-left: 1.25rem; }
main ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.68em;
  width: 0.4rem;
  height: 0.4rem;
  background: var(--c-accent);
}

a {
  color: var(--c-accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
}
a:hover { color: var(--c-accent-hover); text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 3px; }

/* Skip link: off screen until it takes keyboard focus */

.skip-link {
  position: absolute;
  top: var(--s-3);
  left: -9999px;
  z-index: 60;
  font: 600 var(--fs-sm)/1.2 var(--font-sans);
  background: var(--c-accent);
  color: var(--c-on-accent);
  padding: var(--s-3) var(--s-4);
  border-radius: var(--radius);
  text-decoration: none;
}
.skip-link:focus { left: var(--gutter); }
.skip-link:hover { color: var(--c-on-accent); text-decoration: none; }

/* Text roles */

.eyebrow {
  font: 600 var(--fs-xs)/1.2 var(--font-sans);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--s-4);
}
.lede {
  font-size: var(--fs-lg);
  line-height: 1.5;
  max-width: 34em;
  margin-bottom: var(--s-6);
}
.small { font-size: var(--fs-sm); color: var(--c-muted); }

/* Buttons */

.btn {
  display: inline-block;
  font: 600 var(--fs-base)/1.25 var(--font-sans);
  background: var(--c-accent);
  color: var(--c-on-accent);
  padding: 0.95rem 1.5rem;
  border: 0;
  border-radius: var(--radius);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease);
}
.btn:hover {
  background: var(--c-accent-hover);
  color: var(--c-on-accent);
  text-decoration: none;
}
.btn-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-3) var(--s-5);
  margin-top: var(--s-6);
}
.btn-note { font-size: var(--fs-sm); color: var(--c-muted); max-width: 32ch; }

/* Layout */

.container {
  max-width: var(--wide);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--s-section); border-top: var(--rule); }
.section--flush {
  border-top: 0;
  padding-top: clamp(3rem, 2rem + 4vw, 6rem);
}
.band { background: var(--c-paper-deep); border-top: 0; }

.band--accent {
  background: var(--c-accent);
  color: var(--c-on-accent);
}
.band--accent .eyebrow { color: var(--c-on-accent-muted); }
.band--accent a:not(.btn) { color: var(--c-on-accent); }
.band--accent .btn { background: var(--c-paper); color: var(--c-accent); }
.band--accent .btn:hover { background: var(--c-paper-deep); color: var(--c-accent-hover); }
.band--accent :focus-visible { outline-color: var(--c-on-accent); }

/* Closing band: the last word on a page, so it gets more air than a section */
.band--accent { padding-block: calc(var(--s-section) * 1.25); }
.band--accent h2 { font-size: var(--fs-h2); max-width: 18ch; margin-bottom: var(--s-6); }
.band--accent .lede { margin-bottom: 0; }

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--c-paper);
  border-bottom: var(--rule);
}
.site-header__inner {
  min-height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.logo {
  font: 600 1.25rem/1 var(--font-serif);
  letter-spacing: -0.01em;
  color: var(--c-ink);
  text-decoration: none;
  white-space: nowrap;
}
.logo::before {
  content: "";
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin-right: 0.55em;
  background: var(--c-accent);
}
.logo:hover { color: var(--c-ink); text-decoration: none; }
.logo span { color: var(--c-muted); font-weight: 400; }

.nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-2) var(--s-5);
}
.nav a {
  font: 400 var(--fs-sm)/1.2 var(--font-sans);
  color: var(--c-ink);
  text-decoration: none;
  padding-block: 0.35rem;
}
.nav a:not(.btn):hover {
  color: var(--c-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.45em;
}
.nav a[aria-current="page"]:not(.btn) {
  text-decoration: underline;
  text-decoration-color: var(--c-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.45em;
}
.nav .btn {
  font-weight: 600;
  color: var(--c-on-accent);
  padding: 0.6rem 1rem;
}
/* Current page on the button: keep the spruce fill, add a paper underline */
.nav .btn[aria-current="page"],
.nav .btn[aria-current="page"]:hover {
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
}

/* Hero */

.lesson-card {
  margin-top: var(--s-7);
  background: var(--c-paper-deep);
  border-top: var(--rule-strong);
  padding: var(--s-5) var(--s-5) var(--s-4);
  max-width: 26rem;
}
.lesson-card__title {
  font: 600 var(--fs-xs)/1.2 var(--font-sans);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--c-muted);
  margin: 0 0 var(--s-3);
}
.lesson-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  counter-reset: card;
}
.lesson-card__list > li {
  counter-increment: card;
  display: grid;
  grid-template-columns: 2.25rem 1fr;
  align-items: baseline;
  padding-block: var(--s-3);
  border-top: var(--rule);
  font: 400 var(--fs-h3)/1.25 var(--font-serif);
  margin: 0;
}
.lesson-card__list > li:first-child { border-top: 0; }
.lesson-card__list > li::before {
  content: counter(card, decimal-leading-zero);
  font: 600 var(--fs-xs)/1 var(--font-sans);
  font-variant-numeric: tabular-nums;
  color: var(--c-muted);
}

/* Steps */

.steps {
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  counter-reset: step;
  border-top: var(--rule-strong);
}
.steps > li {
  counter-increment: step;
  padding-block: var(--s-5) var(--s-6);
  border-top: var(--rule);
  max-width: var(--measure);
  margin: 0;
}
.steps > li:first-child { border-top: 0; }
.steps > li::before {
  content: counter(step);
  display: block;
  font: 400 var(--fs-numeral)/0.9 var(--font-serif);
  font-variant-numeric: lining-nums;
  color: var(--c-accent);
  margin-bottom: var(--s-4);
}
.steps h3 { margin-bottom: var(--s-2); }
.steps p:last-child, .steps ul:last-child { margin-bottom: 0; }

/* Step index: the step numerals as a column beside the steps.
   Decorative (aria-hidden), numbered by counter, shown only by the motion block. */

.step-index {
  display: none;
  list-style: none;
  padding: 0;
  margin: var(--s-6) 0 0;
  counter-reset: index;
  border-top: var(--rule-strong);
}
.step-index > li {
  counter-increment: index;
  padding-block: var(--s-3);
  border-top: var(--rule);
  margin: 0;
  font: 400 var(--fs-h2)/1 var(--font-serif);
  font-variant-numeric: lining-nums tabular-nums;
  color: var(--c-muted);
}
.step-index > li:first-child { border-top: 0; }
.step-index > li::before { content: counter(index, decimal-leading-zero); }

/* Ledger */

.prices {
  margin: var(--s-6) 0 0;
  border-top: var(--rule-strong);
}
.price {
  position: relative;
  padding-block: var(--s-5);
  border-top: var(--rule);
}
.price:first-child { border-top: 0; }
.price p:last-child { margin-bottom: 0; }
.price__label {
  font: 600 var(--fs-base)/1.3 var(--font-sans);
  color: var(--c-ink);
  margin: 0 0 var(--s-2);
}
.price__amount {
  font: 600 var(--fs-amount)/1.05 var(--font-serif);
  font-variant-numeric: lining-nums;
  letter-spacing: -0.01em;
  margin: 0 0 var(--s-3);
}
.price__amount span {
  display: block;
  font: 400 var(--fs-sm)/1.4 var(--font-sans);
  letter-spacing: 0;
  color: var(--c-muted);
  margin-top: var(--s-2);
}
.price--separate {
  margin-top: var(--s-7);
  border-top: var(--rule-strong);
}
.prices + .small {
  margin-top: 0;
  padding-top: var(--s-4);
  border-top: var(--rule);
}
/* The workflow row is a single sentence, so it is set as a statement */
.price--separate > p:last-child {
  font: 400 var(--fs-lg)/1.4 var(--font-serif);
  letter-spacing: -0.005em;
  max-width: 30em;
}
/* The ledger is the last thing before a closing band, so it ends on a full section */
.section:has(+ .band--accent) { padding-bottom: calc(var(--s-section) * 1.25); }

/* Fit lists, examples, questions */

.split {
  display: grid;
  gap: var(--s-7) var(--col-gap);
}
.split > div { border-top: var(--rule-strong); padding-top: var(--s-5); }
.split h2 { font-size: var(--fs-h3); font-weight: 600; letter-spacing: -0.005em; }

.examples { margin-top: var(--s-6); display: grid; column-gap: var(--col-gap); }
.example { padding-block: var(--s-5); border-top: var(--rule); }
.example h3 { margin-bottom: var(--s-2); }
.example p { margin-bottom: 0; }

.faq { margin-top: var(--s-6); border-top: var(--rule-strong); }
.faq__item { padding-block: var(--s-5); border-top: var(--rule); }
.faq__item:first-child { border-top: 0; }
.faq__item h3 { margin-bottom: var(--s-2); }
.faq__item p:last-child { margin-bottom: 0; }

/* A short list set as ruled rows, so three items read as a complete set */
main ul.list--ruled { margin: 0; border-top: var(--rule-strong); }
main ul.list--ruled > li {
  font-size: var(--fs-lg);
  line-height: 1.45;
  padding-block: var(--s-4);
  border-top: var(--rule);
  margin: 0;
}
main ul.list--ruled > li:first-child { border-top: 0; }
main ul.list--ruled > li::before { top: calc(var(--s-4) + 0.62em); }

/* The page's last button closes the question list like a ledger total */
.btn-row--close {
  margin-top: 0;
  padding-top: var(--s-6);
  border-top: var(--rule-strong);
}

/* Title page: a short page that holds the viewport on purpose */
.title-page__inner {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--s-8);
  min-height: max(22rem, calc(62svh - var(--header-h)));
}
.title-page { padding-bottom: var(--s-7); }
.title-page h1 { font-size: clamp(3.25rem, 1.6rem + 6vw, 7.5rem); margin-bottom: 0; }
.title-page__foot { border-top: var(--rule-strong); padding-top: var(--s-5); }
.title-page__foot .lede { margin-bottom: var(--s-4); }
.title-page__contact { margin-bottom: 0; color: var(--c-muted); }

.pair { display: grid; gap: var(--s-5) var(--col-gap); }
.pair > * > :last-child { margin-bottom: 0; }

.narrow > * { max-width: var(--measure); }


/* Editorial figure: one per page at most, after the steps, never in the ledger.
   It sits outside the sticky steps and the step index, so neither one changes. */
figure.editorial {
  margin: var(--s-7) 0 0;
  padding-top: var(--s-5);
  border-top: var(--rule);
}
figure.editorial img {
  width: 100%;
  height: auto;
  background: var(--c-paper-deep);
}
figure.editorial figcaption {
  margin-top: var(--s-3);
  font-size: var(--fs-sm);
  color: var(--c-muted);
  max-width: var(--measure);
}
@media (min-width: 960px) {
  /* Lines up with the step text column */
  figure.editorial {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  figure.editorial > * { grid-column: 4 / span 8; }
}


/* Footer */

.site-footer {
  border-top: var(--rule);
  padding-block: var(--s-8) var(--s-6);
  font-size: var(--fs-sm);
  color: var(--c-muted);
}
.site-footer p { margin: 0; }
.site-footer__mark {
  font: 400 var(--fs-mark)/1 var(--font-serif);
  letter-spacing: -0.02em;
  color: var(--c-ink);
  margin-bottom: var(--s-7) !important;
}
/* The same spruce square as the header logo, scaled with the wordmark */
.site-footer__mark::before {
  content: "";
  display: inline-block;
  width: 0.42em;
  height: 0.42em;
  margin-right: 0.32em;
  background: var(--c-accent);
}
.site-footer__mark span { color: var(--c-muted); }
.site-footer__row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--s-3) var(--s-6);
  border-top: var(--rule-strong);
  padding-top: var(--s-5);
}
.site-footer nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.site-footer a { color: var(--c-ink); }

/* Breakpoints */

@media (max-width: 639px) {
  .site-header { position: static; }
  .site-header__inner {
    flex-wrap: wrap;
    padding-block: var(--s-3);
    row-gap: var(--s-2);
  }
  .nav {
    width: 100%;
    justify-content: flex-start;
    column-gap: var(--s-4);
  }
  h1 { max-width: none; }
}

@media (min-width: 760px) {
  .split { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split p, .split li { max-width: none; }

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

  .price {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: baseline;
  }
  .price > * { grid-column: 7 / span 6; }
  .price > .price__label { grid-column: 1 / span 3; grid-row: 1; margin: 0; }
  .price > .price__amount { grid-column: 4 / span 3; grid-row: 1; margin: 0; }

  /* The note sits under the descriptions, in the ledger's right-hand column */
  .prices + .small { margin-left: calc(50% + var(--col-gap) / 2); max-width: none; }
}

@media (min-width: 960px) {
  .hero__grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .hero__main { grid-column: 1 / span 8; }
  .hero__grid .lesson-card { grid-column: 9 / span 4; margin-top: 0; max-width: none; }

  .steps > li {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    max-width: none;
  }
  .steps > li::before {
    grid-column: 1 / span 3;
    grid-row: 1 / span 20;
    margin: 0;
  }
  .steps > li > * { grid-column: 4 / span 8; max-width: var(--measure); }

  .pair, .faq__item {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
  }
  .faq__item { display: grid; align-items: baseline; }
  .pair > :first-child, .faq__item > h3 { grid-column: 1 / span 5; }
  .pair > :last-child, .faq__item > :not(h3) { grid-column: 7 / span 6; }
  .faq__item > h3 { margin: 0; }

  /* Closing band and FAQ button share the ledger's columns */
  .band--accent > .container,
  .btn-row--close {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: end;
  }
  .band--accent h2 { grid-column: 1 / span 6; grid-row: 1 / span 2; margin: 0; }
  .band--accent .lede,
  .band--accent .btn-row { grid-column: 7 / span 6; }
  .btn-row--close > .btn { grid-column: 7 / span 6; justify-self: start; }

  .title-page__foot {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--col-gap);
    align-items: baseline;
  }
  .title-page__foot .lede { grid-column: 1 / span 7; margin: 0; }
  .title-page__contact { grid-column: 9 / span 4; }
}

/* Motion

   One system, tied to scroll position, nothing on a timer:
   1. A 2px spruce progress rule across the top of the viewport.
   2. Home steps stack: each step sticks under the header and the next covers it,
      leaving a hairline tab for each step already read. Position only, no animation.
   3. Step index on Approach, Book and Who: the numerals move into a sticky
      column beside the steps, and the numeral for the step in the reading band turns spruce.
   4. Price rows: a 2px spruce line draws across each row's top rule as the row enters.
   5. Who fit columns: sticky headings, under the same guard as the home stack.
   The hero never moves, so nothing reads as a loading effect.
   Nothing here runs without support or with reduced motion. Those visitors get the
   static page, with numerals inside the steps and no index. */

body::before {
  content: "";
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  height: 2px;
  background: var(--c-accent);
  transform-origin: 0 50%;
  pointer-events: none;
}

.price::before {
  content: "";
  display: none;
  position: absolute;
  top: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--c-accent);
  transform-origin: 0 50%;
  pointer-events: none;
}
/* These rows sit under a 2px ink rule, so the line covers that rule instead */
.price:first-child::before,
.price--separate::before { top: -2px; }

@keyframes lo-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes lo-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes lo-index {
  0%, 65%, 100% { color: var(--c-muted); }
  35% { color: var(--c-accent); }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 960px) and (min-height: 640px) {
    .steps--stack { --stack-top: calc(var(--header-h) + var(--s-5)); }
    .steps--stack > li {
      position: sticky;
      top: calc(var(--stack-top) + var(--stack-i, 0) * var(--stack-tab));
      min-height: 15rem;
      padding-block: var(--s-6) var(--s-7);
      background: var(--c-paper);
    }
    .steps--stack > li:nth-child(2) { --stack-i: 1; }
    .steps--stack > li:nth-child(3) { --stack-i: 2; }
    .steps--stack > li:nth-child(4) { --stack-i: 3; }
  }

  @media (prefers-reduced-motion: no-preference) {
    body::before {
      display: block;
      animation-name: lo-progress;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: scroll(root block);
    }

    .price { view-timeline: --lo-price block; }
    .price::before {
      display: block;
      animation-name: lo-draw;
      animation-duration: auto;
      animation-timing-function: linear;
      animation-fill-mode: both;
      animation-timeline: --lo-price;
      animation-range: entry 0% cover 35%;
    }
  }
}

/* The index reads step timelines from a sibling list, so it also needs timeline-scope */
@supports (animation-timeline: view()) and (timeline-scope: none) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 960px) and (min-height: 640px) {
    .indexed {
      display: grid;
      grid-template-columns: repeat(12, minmax(0, 1fr));
      column-gap: var(--col-gap);
      align-items: start;
      timeline-scope: --lo-step-1, --lo-step-2, --lo-step-3, --lo-step-4;
    }
    .indexed > .step-index {
      display: block;
      grid-column: 1 / span 2;
      position: sticky;
      top: calc(var(--header-h) + var(--s-6));
    }
    .indexed > .steps { grid-column: 4 / span 9; }

    /* The index carries the numerals now, so each step drops its own */
    .indexed > .steps > li { display: block; }
    .indexed > .steps > li::before { display: none; }

    /* A centred reading band gives each step room to reach full spruce */
    .indexed > .steps > li { view-timeline-inset: 25% 25%; }
    .indexed > .steps > li:nth-child(1) { view-timeline-name: --lo-step-1; }
    .indexed > .steps > li:nth-child(2) { view-timeline-name: --lo-step-2; }
    .indexed > .steps > li:nth-child(3) { view-timeline-name: --lo-step-3; }
    .indexed > .steps > li:nth-child(4) { view-timeline-name: --lo-step-4; }

    .step-index > li {
      animation-name: lo-index;
      animation-duration: auto;
      animation-timing-function: steps(1, end);
      animation-fill-mode: none;
    }
    .step-index > li:nth-child(1) { animation-timeline: --lo-step-1; }
    .step-index > li:nth-child(2) { animation-timeline: --lo-step-2; }
    .step-index > li:nth-child(3) { animation-timeline: --lo-step-3; }
    .step-index > li:nth-child(4) { animation-timeline: --lo-step-4; }
  }
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
  body::before,
  .price::before,
  .step-index { display: none; }
  .steps--stack > li { position: static; }
}

/* Fit columns retain their strong top rules and gain sticky headings
   only with support and when motion is allowed, like the home stack */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 960px) and (min-height: 640px) {
    .split--ledger > div { align-self: stretch; }
    .split--ledger > div > h2 {
      position: sticky;
      top: var(--header-h);
      z-index: 1;
      max-width: none;
      padding-block: var(--s-3);
      background: var(--c-paper);
      border-bottom: var(--rule);
    }
  }
}