/* Geist normal 300-800 latin-ext */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/static/fonts/geist-normal-300-800-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist normal 300-800 latin */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 800;
  font-display: swap;
  src: url(/static/fonts/geist-normal-300-800-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Geist Mono normal 400-600 latin-ext */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/static/fonts/geist-mono-normal-400-600-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Geist Mono normal 400-600 latin */
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(/static/fonts/geist-mono-normal-400-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Serif italic 400 latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/instrument-serif-italic-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Serif italic 400 latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/instrument-serif-italic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Instrument Serif normal 400 latin-ext */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/instrument-serif-normal-400-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Instrument Serif normal 400 latin */
@font-face {
  font-family: 'Instrument Serif';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/static/fonts/instrument-serif-normal-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Metric-matched fallbacks: what paints until the files above arrive (font-display: swap), sized so a line set in it
   breaks where the real face will. size-adjust is the width of the site's own copy in the real face over the local
   face, measured in Chromium (/, /proofs and a proof page, about 8,500 characters); ascent and descent are the real
   face's hhea metrics (fontTools) divided by that size-adjust, so the baseline sits where it will sit. Geist gets one
   face per weight band: its 500 is wider against Arial than its 400, and the 500 band is matched on the headlines
   alone (every .display, .h2, h1 and h2 on the pages: 1.051, single headlines 1.007 to 1.086), since they set in it. */
@font-face {
  font-family: 'Geist Fallback';
  font-weight: 300 449;
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 101.62%;
  ascent-override: 98.9%;
  descent-override: 29.03%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  font-weight: 450 549;
  src: local('Arial'), local('ArialMT'), local('Helvetica');
  size-adjust: 105.1%;
  ascent-override: 95.62%;
  descent-override: 28.07%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  font-weight: 550 800;
  src: local('Arial Bold'), local('Arial-BoldMT'), local('Helvetica Bold');
  size-adjust: 99.28%;
  ascent-override: 101.23%;
  descent-override: 29.71%;
  line-gap-override: 0%;
}
/* Monospaced: the advance alone decides the width (Geist Mono 0.600em, Menlo 0.602em). */
@font-face {
  font-family: 'Geist Mono Fallback';
  font-weight: 400 600;
  src: local('Menlo Regular'), local('Menlo-Regular'), local('Courier New');
  size-adjust: 99.66%;
  ascent-override: 100.84%;
  descent-override: 29.6%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: italic;
  font-weight: 400;
  src: local('Georgia Italic'), local('Georgia-Italic'), local('Times New Roman Italic');
  size-adjust: 77.53%;
  ascent-override: 127.69%;
  descent-override: 39.98%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Instrument Serif Fallback';
  font-style: normal;
  font-weight: 400;
  src: local('Georgia'), local('Times New Roman');
  size-adjust: 75.33%;
  ascent-override: 131.42%;
  descent-override: 41.15%;
  line-gap-override: 0%;
}
/* Overnight: tokens, reset, type, layout and the shared components. Section styles live in their own files. */

:root {
  --ink: #0a0a0b;
  --bone: #f3efe6;
  --dawn: #ff5a2d;
  --night-muted: rgba(243, 239, 230, 0.6);
  --morning-muted: rgba(10, 10, 11, 0.6);
  --night-line: rgba(243, 239, 230, 0.16);
  --morning-line: rgba(10, 10, 11, 0.14);
  --bg: var(--ink);
  --fg: var(--bone);
  --muted: var(--night-muted);
  --line: var(--night-line);
  --font-sans: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-serif: "Instrument Serif", "Instrument Serif Fallback", Georgia, "Times New Roman", serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", ui-monospace, SFMono-Regular, Menlo, monospace;
  --margin: clamp(20px, 4vw, 64px);
  --gutter: clamp(16px, 2vw, 32px);
  --section: clamp(96px, 14vw, 200px);
  --nav-height: 72px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --t-fast: 0.35s;
  --t-theme: 0.6s;
  color-scheme: dark;
}

html[data-theme="morning"] {
  --bg: var(--bone);
  --fg: var(--ink);
  --muted: var(--morning-muted);
  --line: var(--morning-line);
  color-scheme: light;
}

/* Reset */
*, *::before, *::after { box-sizing: border-box; margin: 0; }
html {
  background: var(--bg);
  color: var(--fg);
  transition: background-color var(--t-theme) ease, color var(--t-theme) ease;
  -webkit-text-size-adjust: 100%;
}
body {
  font-family: var(--font-sans);
  font-size: 1.0625rem;
  line-height: 1.5;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  min-height: 100vh;
  overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--dawn); color: var(--ink); }
:focus-visible { outline: 2px solid var(--dawn); outline-offset: 4px; }
/* Dawn on bone is 2.7:1, under the 3:1 a focus ring needs; in the morning the ring takes the text colour. */
html[data-theme="morning"] :focus-visible,
[data-theme="morning"] :focus-visible { outline-color: var(--fg); }
/* Nothing the page scrolls to lands under the fixed bar: anchors (the browser, Lenis, the skip link, a link from another
   page) and keyboard focus alike. Lenis reads this offset; keep it the only one, or anchors get it twice. */
html { scroll-padding-top: calc(var(--nav-height) + 16px); }

/* Lenis */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* Type */
/* Big headlines hang 0.03em left, so their first letter's ink, not its side bearing, meets the page edge the labels
   and hairlines start on (the footer wordmark does the same). One value for every letter, and it is a compromise:
   round and stem capitals (S, B, P, H, F, K) still sit 3 to 6.5 px inside the edge at display sizes and a T about
   3 px past it. A per-letter hang needs the letter in the markup; CSS cannot select on it, and ::first-letter does
   not reach into the masks the split reveals wrap the first line in. */
.display {
  font-weight: 500;
  font-size: clamp(2.75rem, 8.5vw, 10.5rem);
  line-height: 1;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-inline-start: -0.03em;
}
.h2 {
  font-weight: 500;
  font-size: clamp(2rem, 5vw, 5rem);
  line-height: 0.98;
  letter-spacing: -0.03em;
  text-wrap: balance;
  margin-inline-start: -0.03em;
}
/* The kit's split reveals wrap every line (word, character) in a mask that clips at its line box. Geist's g reaches
   0.162em below the baseline and the serif p 0.205em; at line-height 1 the box ends 0.145em (Geist) and 0.16em (serif)
   below it, at 0.98 0.135em. 0.16em of room under every mask keeps each descender whole at every size and leading;
   the negative margin cancels it, so the layout does not move. */
.line-mask,
.word-mask,
.char-mask {
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.h3 {
  font-weight: 500;
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.lede {
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  max-width: 34ch;
  text-wrap: pretty;
}
.serif {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -0.01em;
}
.label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.mono { font-family: var(--font-mono); font-feature-settings: "tnum"; }
.muted { color: var(--muted); }
.measure { max-width: 62ch; text-wrap: pretty; }
.small { font-size: 0.9375rem; }
strong { font-weight: 600; }

/* Layout */
.wrap { padding-inline: var(--margin); }
.grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--gutter);
}
.section { padding-block: var(--section); }
/* One gap between scenes, not two. */
.section + .section { padding-top: 0; }
.rule { border-top: 1px solid var(--line); }
.sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Buttons and links */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.75em;
  height: 3.25rem;
  padding: 0 1.5rem;
  border-radius: 999px;
  background: var(--fg);
  color: var(--bg);
  font-weight: 500;
  font-size: 1rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: background-color var(--t-theme) ease, color var(--t-theme) ease;
  will-change: transform;
}
.button::after {
  content: "";
  width: 0.5em;
  height: 0.5em;
  border-radius: 50%;
  background: var(--dawn);
  transition: transform var(--t-fast) var(--ease-out);
}
.button:hover::after { transform: scale(1.7); }
.button-ghost {
  background: transparent;
  color: var(--fg);
  box-shadow: inset 0 0 0 1px var(--line);
}
.button-ghost::after { display: none; }
.link {
  position: relative;
  display: inline-block;
  padding-bottom: 0.1em;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-fast) var(--ease-out);
}
.link:hover { background-size: 0 1px; }
.or-email { color: var(--muted); }
.or-email a { color: var(--fg); }

/* Form controls */
/* The resting underline is a 3:1 mix of text and page colour; focus makes it a 2px line in the text colour. */
input, textarea {
  font: inherit;
  color: var(--fg);
  background: transparent;
  border: 0;
  border-bottom: 1px solid color-mix(in srgb, var(--fg) 48%, var(--bg));
  border-radius: 0;
  padding: 0.9em 0;
  width: 100%;
  transition: border-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}
input::placeholder, textarea::placeholder { color: var(--muted); }
input:focus, textarea:focus { outline: none; border-bottom-color: var(--fg); box-shadow: 0 1px 0 var(--fg); }
textarea { resize: vertical; min-height: 9rem; }
label { display: block; }

/* Details */
details { border-top: 1px solid var(--line); }
details:last-child { border-bottom: 1px solid var(--line); }
summary { cursor: pointer; list-style: none; }
summary::-webkit-details-marker { display: none; }

/* Top bar: the page colour behind it, so nothing scrolls through it. The kit hides it while you scroll down,
   brings it back when you scroll up, and draws the hairline once the page has moved. */
.top {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gutter);
  height: var(--nav-height);
  padding-inline: var(--margin);
  background: var(--bg);
  color: var(--fg);
  transition: transform 0.5s var(--ease-out), background-color var(--t-theme) ease, color var(--t-theme) ease, box-shadow var(--t-fast) ease;
}
.top.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.top.is-hidden { transform: translateY(-110%); }
.top-left, .top-right { display: flex; align-items: center; gap: clamp(16px, 2.5vw, 40px); }
.wordmark { font-weight: 600; letter-spacing: -0.03em; font-size: 1.125rem; }
.top .label { color: var(--muted); }
.top-nav { display: flex; gap: clamp(16px, 2vw, 32px); }
.top-nav a { font-size: 0.9375rem; }
.top .button { height: 2.5rem; padding: 0 1.125rem; font-size: 0.9375rem; }
/* The accent dot belongs to the hero button and the form's send button, not to the bar. */
.top .button::after { display: none; }
/* While the form is on screen the bar's button would only repeat its send button. */
.top.is-quiet .button { visibility: hidden; }
/* While the kit scrubs the night-to-morning colours, the bar follows them frame by frame. */
html.theme-scrub { transition: none; }
html.theme-scrub .top { transition: transform 0.5s var(--ease-out), box-shadow var(--t-fast) ease; }
@media (max-width: 720px) {
  .top-nav, .top-time { display: none; }
}

/* Skip link */
.skip {
  position: fixed;
  top: 8px;
  left: 8px;
  z-index: 100;
  padding: 0.5em 1em;
  background: var(--dawn);
  color: var(--ink);
  transform: translateY(-200%);
}
.skip:focus { transform: none; }

/* Footer */
/* The last scene's own bottom space comes first; the footer starts at a hairline. */
.foot {
  padding: 0 var(--margin);
  overflow: hidden;
  container-type: inline-size;
}
.foot-row {
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: var(--gutter);
  align-items: start;
}
.foot-col { grid-column: span 12; }
.foot-col p { text-wrap: pretty; }
@media (min-width: 720px) {
  .foot-col { grid-column: span 4; }
  .foot-col:last-child { text-align: right; }
}
/* The wordmark spans the measure exactly: in Geist 600 at -0.035em the ink of "Overnight" is 4.362em wide and starts
   0.043em in (measured in the browser). At line-height 0.8 the baseline sits 0.045em above the page floor, so every
   letter is whole and only the descender of the g runs off the page. */
.foot-mark {
  font-weight: 600;
  font-size: calc((100vw - 2 * var(--margin)) / 6.773);
  font-size: calc(100cqi / 6.773);
  line-height: 0.8;
  letter-spacing: -0.035em;
  margin: clamp(32px, 6vw, 96px) 0 0 -0.039em;
  white-space: nowrap;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { transition: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
/* A question opening is motion too, and * does not reach ::details-content. Its own rule: a browser without the
   pseudo-element drops only this one. */
@supports selector(::details-content) {
  @media (prefers-reduced-motion: reduce) {
    details::details-content { transition-duration: 0.01ms !important; }
  }
}

/* Print: the morning colours on paper, no bar, and every reveal at rest. Scripts write their hidden start states
   inline (the markup itself carries no style attribute), so a row not yet scrolled to would otherwise print blank. */
@media print {
  html,
  [data-theme] {
    --bg: #fff !important;
    --fg: var(--ink) !important;
    --muted: var(--morning-muted) !important;
    --line: var(--morning-line) !important;
    color-scheme: light;
  }
  .top,
  .skip { display: none; }
  main [style] {
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    translate: none !important;
    clip-path: none !important;
  }
}

/* While the night-to-morning turn is scrubbed, the painted colours are the truth: no colour fades on buttons, links
   or the proof titles (.proof-list a, 30-log.css), or at the jump they trail it at about 1:1. The bar's own button is
   a .button and goes with it. */
html.theme-scrub .button, html.theme-scrub .top .button, html.theme-scrub .proof-list a, html.theme-scrub .link { transition-property: transform; }
/* Hero: the opening scene, night. A stage (headline on the grid, lede and actions on the column 7 axis, a mono meta
   row on its floor), then the demo full-bleed. The stage is one viewport less a peek, so the top of the demo frame
   shows under the meta row in the first viewport and rises into full view with the scroll. Mobile first. */
.hero { --hero-peek: 64px; }

/* Stage: rows are top space, headline, lede, actions, breathing room, meta row. The two space rows have no minimum,
   so on a short screen they collapse instead of pushing the meta row below the fold. */
.hero-stage {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  grid-template-rows: minmax(0, 2fr) auto auto auto minmax(0, 1fr) auto;
  column-gap: var(--gutter);
  min-height: calc(100vh - var(--hero-peek));
  min-height: calc(100svh - var(--hero-peek));
  padding-top: calc(var(--nav-height) + clamp(16px, 3vw, 48px));
  padding-bottom: clamp(20px, 2.5vw, 36px);
}

/* Larger than .display: three lines on a phone, two lines reaching column 11 from 900 px. Capped by the viewport
   height so a short laptop keeps the meta row in view. */
.hero-title {
  grid-row: 2;
  grid-column: 1 / -1;
  font-size: clamp(2.75rem, min(14.5vw, 18vh), 10.5rem);
}
.hero-title .serif { padding-right: 0.03em; }

.hero-lede {
  grid-row: 3;
  grid-column: 1 / -1;
  margin-top: clamp(24px, 3vw, 48px);
}

.hero-actions {
  grid-row: 4;
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
  margin-top: clamp(24px, 3vw, 40px);
}
.hero-cta { display: inline-flex; }
.hero-actions .or-email { font-size: 0.9375rem; }
.hero-actions .or-email a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: var(--line);
  text-underline-offset: 0.3em;
  transition: text-decoration-color var(--t-fast) ease;
}
.hero-actions .or-email a:hover { text-decoration-color: currentColor; }

/* Meta row: a hairline, then three mono labels. */
.hero-foot { grid-row: 6; grid-column: 1 / -1; margin-top: clamp(28px, 3vw, 40px); }
.hero-rule { display: block; height: 1px; background: var(--line); }
.hero-meta {
  display: grid;
  gap: 6px;
  padding-top: 14px;
}
.hero-meta li { line-height: 1.4; }
.hero-index { color: var(--fg); }

/* Demo: edge to edge. */
.hero-frame {
  position: relative;
  overflow: hidden;
  background: var(--ink);
}
@supports (overflow: clip) {
  .hero-frame { overflow: clip; }
}
.hero-media a { display: block; position: relative; }
/* The filtered picture paints over its link's own outline, so the ring is a layer above it, on the picture's edges. */
.hero-media a:focus-visible { outline: none; }
.hero-media a:focus-visible::after {
  content: "";
  position: absolute;
  inset: 0 var(--hero-edge, 0px);
  z-index: 1;
  outline: 2px solid var(--dawn);
  outline-offset: -6px;
  pointer-events: none;
}
.hero-media img,
.hero-media video { width: 100%; height: auto; }
.hero-media video { aspect-ratio: 1200 / 750; object-fit: cover; }
/* The capture is the agent's light screen. Inverted and turned back round the colour wheel it is the same screen in
   night colours (the orange stays orange), so the night scene stays night. */
.hero-media img { filter: invert(1) hue-rotate(180deg); }

/* Phones: the whole report at 375 px is 4 px text. Show its top left corner (the shift summary, the counts and the
   handover) at 0.75 of its size instead, where it can be read. */
@media (max-width: 599px) {
  .hero-media {
    height: 125vw;
    max-height: 562px;
    overflow: hidden;
  }
  .hero-media a { height: 100%; }
  .hero-media img {
    width: 900px;
    max-width: none;
  }
}

.hero-caption {
  padding-top: 16px;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--muted);
  text-wrap: pretty;
}

@media (min-width: 900px) {
  /* The share of the first viewport the demo frame takes. The headline's height cap and the stage's vertical spaces
     follow the viewport height, so the stage fits above the peek down to a 1440 x 760 laptop. */
  .hero { --hero-peek: clamp(64px, 12svh, 128px); }
  .hero-stage {
    min-height: calc(100vh - var(--hero-peek));
    min-height: calc(100svh - var(--hero-peek));
    padding-top: calc(var(--nav-height) + clamp(16px, min(3vw, 3svh), 48px));
    padding-bottom: clamp(16px, min(2.5vw, 3svh), 36px);
  }
  .hero-title { grid-column: 1 / 12; font-size: clamp(2.75rem, min(11.5vw, 17svh), 10.5rem); }
  /* Shown whole (reduced motion, no script) the demo link is taller than the screen under the bar, which would centre
     it with its top under the bar; the focus scroll treats it as one screen tall, so its top lands under the bar. */
  .hero-media a { scroll-margin-bottom: min(0px, calc(100svh - var(--nav-height) - 16px - 62.5vw)); }
  .hero-lede { grid-column: 7 / 12; margin-top: clamp(16px, min(3vw, 4svh), 48px); }
  .hero-actions { grid-column: 7 / 13; margin-top: clamp(16px, min(3vw, 4svh), 40px); }
  .hero-foot { margin-top: clamp(20px, min(3vw, 4svh), 40px); }

  /* Column 7 of the page grid starts at half the width plus half a gutter; the text stops at the 62ch measure. */
  .hero-caption {
    padding-left: calc(50% + var(--gutter) / 2);
    padding-right: max(var(--margin), calc(50% - var(--gutter) / 2 - 62ch));
  }
  /* Meta row on the page grid: the scene label left, the facts on the lede's column 7 axis. */
  .hero-meta {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .hero-meta li:nth-child(1) { grid-column: 1 / 7; grid-row: 1; }
  .hero-meta li:nth-child(2),
  .hero-meta li:nth-child(3) { grid-column: 7 / 13; }
}

/* The picture moment, from 900 px while 10-hero.js scrubs it (motion allowed, scripting on; the script marks the page
   .hero-still when it cannot run). The frame is one viewport less the bar and the peek, so when it meets the bar the
   frame and its caption fit on the screen; the link inside it has the same box, so a keyboard visitor's focus scroll
   fits it under the bar. --hero-p (0 to 1) follows the scroll from the top of the page to the frame meeting the bar:
   over the first half the whole demo widens from the page margins to full bleed, a hairline on its edge; over the
   second half it moves up inside the frame by --hero-travel (how far it is taller than the frame). So the peek and the
   opened frame both show the demo's top whole, label and title. The script measures --hero-travel and --hero-shrink
   (both margins over the frame width; 0.08 is the 4vw margin) and sets --hero-p from the scroll before the kit starts,
   so the painted state is the scrub's state. With reduced motion or without the script none of this applies: the
   picture is shown whole. */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
  html:not(.hero-still) .hero {
    --hero-open: min(1, calc(var(--hero-p, 0) * 2));
    --hero-pan: max(0, calc(var(--hero-p, 0) * 2 - 1));
    --hero-edge: calc(var(--margin) * (1 - var(--hero-open)));
  }
  html:not(.hero-still) .hero-frame,
  html:not(.hero-still) .hero-media a {
    max-height: calc(100vh - var(--nav-height) - var(--hero-peek));
    max-height: calc(100svh - var(--nav-height) - var(--hero-peek));
  }
  html:not(.hero-still) .hero-media a { overflow: hidden; scroll-margin-bottom: 0; }
  html:not(.hero-still) .hero-media img,
  html:not(.hero-still) .hero-media video {
    transform-origin: 50% 0;
    transform: translateY(calc(var(--hero-travel, 0px) * var(--hero-pan) * -1))
      scale(calc(1 - var(--hero-shrink, 0.08) * (1 - var(--hero-open))));
  }
  html:not(.hero-still) .hero-frame::after {
    content: "";
    position: absolute;
    inset: 0 var(--hero-edge);
    z-index: 1;
    border: 1px solid var(--line);
    pointer-events: none;
  }
}

/* Before the deferred script runs (a reload part way down the page), the browser drives --hero-p from the scroll
   itself, on the same mapping: 0 at the top, 1 when the frame (one stage below the top) meets the bar; --hero-travel is
   the demo's height (1200 x 750) less the frame's. So the first paint is already the scrub's state. The script marks
   the page .hero-live the moment it sets --hero-p itself, and from then on its value rules. */
@property --hero-p { syntax: "<number>"; inherits: true; initial-value: 0; }
@keyframes hero-follow { from { --hero-p: 0; } to { --hero-p: 1; } }
@supports (animation-timeline: scroll()) {
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) and (scripting: enabled) {
    html:not(.hero-still):not(.hero-live) .hero {
      --hero-travel: max(0px, calc(100vw * 0.625 - (100svh - var(--nav-height) - var(--hero-peek))));
      animation: hero-follow linear both;
      animation-timeline: scroll(root block);
      animation-range: 0px calc(100svh - var(--hero-peek) - var(--nav-height));
    }
  }
}

/* A short laptop (1366 x 657) keeps the peek at its 64 px floor: a smaller headline cap. */
@media (min-width: 900px) and (max-height: 720px) {
  .hero-title { font-size: clamp(2.75rem, min(11.5vw, 15svh), 10.5rem); }
}

/* Wide enough for all three labels on one line. */
@media (min-width: 1100px) {
  .hero-meta li:nth-child(2) { grid-column: 7 / 10; grid-row: 1; }
  .hero-meta li:nth-child(3) { grid-column: 10 / 13; grid-row: 1; text-align: right; }
}
/* 20: the three checks. Night theme. Mobile first: three stacked scenes, label above each.
   From 900 px: each scene is a row (title left, body right); with the script the left column
   becomes one sticky stage that swaps the active numeral and title (.checks.is-staged). The stage's
   numeral is then the only counter on screen, and it stays smaller than the page's h1. */

.checks-head {
  row-gap: clamp(20px, 3vw, 32px);
  margin-bottom: clamp(56px, 9vw, 144px);
}
.checks-index,
.checks-title { grid-column: 1 / -1; }

/* Scenes */
.checks-scene { padding-block: clamp(40px, 10vw, 72px); }
.checks-scene:last-child { padding-bottom: 0; }

.checks-label {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 0.5rem var(--gutter);
  margin-bottom: clamp(20px, 5vw, 32px);
}
.checks-label-num { color: var(--fg); }

/* The titles break after their first sentence (a <br> in the markup), so no measure here: "It checks its own work."
   needs the full width of a phone. */
.checks-scene-title { margin-bottom: clamp(24px, 6vw, 40px); }

.checks-text {
  font-size: clamp(1.0625rem, 1.35vw, 1.3125rem);
  line-height: 1.5;
  letter-spacing: -0.005em;
  max-width: 52ch;
  text-wrap: pretty;
}
.checks-go {
  margin-top: clamp(24px, 5vw, 36px);
  font-size: 1.0625rem;
  font-weight: 500;
}
.checks-note { margin-top: 0.75rem; }

/* Scene 03: the three numbers from the sentence, label under each. */
.checks-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: var(--gutter);
  margin-top: clamp(36px, 8vw, 64px);
}
.checks-stat {
  display: flex;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 0.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.checks-stat-num {
  font-weight: 500;
  font-size: clamp(2.5rem, 11vw, 4.5rem);
  line-height: 0.9;
  letter-spacing: -0.045em;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* The stage is built by the script and only shown from 900 px. */
.checks-stage { display: none; }

@media (min-width: 720px) {
  .checks-scene { padding-block: clamp(56px, 8vw, 96px); }
  .checks-scene:last-child { padding-bottom: 0; }
}

@media (min-width: 900px) {
  /* Label above the title, both on column 1, like every other scene head. */
  .checks-index,
  .checks-title { grid-column: 1 / -1; }

  .checks-scroller,
  .checks-article {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .checks-list { grid-column: 1 / -1; }
  .checks-scene { padding-block: clamp(64px, 8vw, 128px); }
  .checks-scene:last-child { padding-bottom: 0; }

  /* Without the script: each title on the left of its own scene (nothing in it changes, so it does not stick). */
  .checks-scene-head {
    grid-column: 1 / span 5;
    align-self: start;
  }
  .checks-scene-body { grid-column: 7 / -1; }
  /* The .h2 step, not a size of its own 4% away from it. */
  .checks-stat-num { font-size: clamp(2rem, 5vw, 5rem); }

  /* With the script: one stage on the left, the bodies scroll on the right. */
  .checks.is-staged .checks-list {
    grid-column: 7 / -1;
    grid-row: 1;
  }
  .checks.is-staged .checks-article { display: block; }
  .checks.is-staged .checks-scene {
    min-height: 70vh;
    min-height: 70svh;
  }
  /* The last scene ends where its content ends, so the gap to the build log is the section's own. */
  .checks.is-staged .checks-scene:last-child { min-height: 0; }
  /* The stage's numeral counts the scenes; each scene's own number stays for screen readers only. */
  .checks.is-staged .checks-label-num,
  .checks.is-staged .checks-scene-title {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
  }

  /* Six columns, so the longest first sentence ("It checks its own work.") holds one line. */
  .checks.is-staged .checks-stage {
    grid-column: 1 / span 6;
    grid-row: 1;
    align-self: start;
    position: sticky;
    top: var(--nav-height);
    height: calc(100vh - var(--nav-height));
    height: calc(100svh - var(--nav-height));
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .checks-nums {
    display: grid;
    overflow: hidden;
  }
  /* Under the hero h1 at every size (min(11.5vw, 17svh) there): about 0.65 of it. */
  .checks-num {
    grid-area: 1 / 1;
    font-weight: 500;
    font-size: clamp(3rem, min(7.5vw, 11svh), 7rem);
    line-height: 0.86;
    letter-spacing: -0.03em;
    font-feature-settings: "tnum";
    will-change: transform;
  }
  .checks-titles {
    display: grid;
    margin-top: clamp(16px, 2.5vw, 40px);
  }
  /* A step under .h2: the longest sentence is 9.9em wide, six columns are 45vw. */
  .checks-stage-title {
    grid-area: 1 / 1;
    font-size: clamp(2rem, 4.25vw, 4.25rem);
  }
  .checks-progress {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-top: clamp(32px, 6vh, 72px);
    max-width: 28rem;
  }
  .checks-track {
    position: relative;
    flex: 1;
    height: 2px;
    background: var(--line);
    overflow: hidden;
  }
  .checks-fill {
    position: absolute;
    inset: 0;
    background: var(--dawn);
    transform-origin: 0 50%;
  }
}
/* 30: build log (a dated index; from 900 px a strip that moves sideways with the scroll) and the write-ups teaser
   (numbered index). Night theme. */

/* Hairline per row. JS may draw it in through --log-rule; without JS it is simply there. */
.log-row,
.proof-row {
  --log-rule: 1;
  position: relative;
}
.log-row::before,
.proof-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
  transform-origin: 0 50%;
  transform: scaleX(var(--log-rule));
  transition: background-color var(--t-theme) ease;
}
.log-list,
.proof-list { border-bottom: 1px solid var(--line); }

/* Build log */
.log-scene { padding-top: 0; }

.log-head {
  align-items: end;
  margin-bottom: clamp(40px, 6vw, 96px);
}
.log-index,
.log-title,
.log-counter { grid-column: 1 / -1; }
.log-counter {
  color: var(--muted);
  font-size: 0.9375rem;
  letter-spacing: -0.01em;
}

.log-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  row-gap: 0.75rem;
  padding-block: clamp(24px, 3vw, 44px);
}
.log-row .date {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-size: clamp(1.5rem, 3vw, 2.75rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.04em;
}
.log-text {
  max-width: 52ch;
  color: var(--muted);
  text-wrap: pretty;
  transition: color var(--t-fast) ease;
}
.log-go { justify-self: start; }

/* Write-ups teaser */
.proofs-head { margin-bottom: clamp(40px, 6vw, 96px); }
.proofs-index,
.proofs-title { grid-column: 1 / -1; }

.proof-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--gutter);
  row-gap: 0.75rem;
  align-items: baseline;
  padding-block: clamp(20px, 2.6vw, 36px);
}
.proof-num { grid-column: 1; grid-row: 1; }
.proof-seg { grid-column: 2; grid-row: 1; }
.proof-name { grid-column: 1 / -1; grid-row: 2; }

.proof-list a {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gutter);
  text-wrap: pretty;
  transition: color var(--t-fast) ease;
}
/* The whole row is the link's hit area. */
.proof-list a::before {
  content: "";
  position: absolute;
  inset: 0;
}
.proof-list a::after {
  content: "";
  flex: none;
  width: 0.8em;
  height: 0.8em;
  margin-top: 0.15em;
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5'%3E%3Cpath d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
  transform: translateX(0) rotate(-45deg);
  transition: transform var(--t-fast) var(--ease-out), background-color var(--t-fast) ease;
}
.proof-list a:focus-visible::after { transform: translateX(0.25em) rotate(0deg); }

.proofs-all { margin-top: clamp(28px, 4vw, 56px); }

@media (min-width: 720px) {
  .log-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: baseline;
  }
  .log-row .date { grid-column: 1 / span 4; }
  .log-text,
  .log-go { grid-column: 5 / span 8; }
}

@media (min-width: 900px) {
  .log-title { grid-column: 1 / span 8; }
  .log-counter {
    grid-column: 9 / span 4;
    justify-self: end;
    text-align: right;
    padding-bottom: 0.6em;
  }
  .log-text {
    grid-column: 5 / span 5;
    font-size: 1.125rem;
  }
  .log-go {
    grid-column: 11 / span 2;
    justify-self: end;
    white-space: nowrap;
  }

  .proofs-title { grid-column: 1 / span 9; }
  .proof-row { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .proof-num { grid-column: 1 / span 1; }
  .proof-seg { grid-column: 2 / span 3; }
  .proof-name { grid-column: 5 / span 8; grid-row: 1; }
  .proofs-all {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .proofs-all a { grid-column: 5 / span 8; justify-self: start; }
}

@media (hover: hover) and (pointer: fine) {
  .log-row:hover .log-text { color: var(--fg); }
  .proof-list:hover .proof-row:not(:hover) a { color: var(--muted); }
  .proof-row:hover a::after {
    transform: translateX(0.25em) rotate(0deg);
    background-color: var(--dawn);
  }
}

/* From 900 px, with the script (.is-strip): the stage holds while the dates slide in from the right, as far as the
   vertical scroll goes (--log-travel, measured by 30-log.js). The stage sticks where its height (--log-h, measured too)
   sits centred under the bar, but never more than --log-band from the top of the screen; on a tall screen it grows to
   leave the same --log-band under it, the dates sitting at its foot. The band is counted from the screen's top, not
   the bar's foot: the bar hides while you scroll down, so the checks' last line scrolls on up to the top while the
   stage holds, and the empty band it leaves is the stick offset itself. So while it holds, the band above and below it
   stays near the --section every other scene boundary has (from 1080 px tall it used to reach 1.6 to 1.9 times the
   smallest boundary). One hairline runs along the top. */
@media (min-width: 900px) {
  .log-scene.is-strip {
    --log-band: calc(var(--section) * 1.25);
    padding-top: 0;
    padding-bottom: var(--section);
    height: calc(var(--log-h, 100svh) + var(--log-travel, 0px) + var(--section));
  }
  .log-scene.is-strip .log-stage {
    position: sticky;
    top: max(calc(var(--nav-height) + var(--gutter)),
      min(calc((100vh + var(--nav-height) - var(--log-h, 100vh)) / 2), var(--log-band)));
    top: max(calc(var(--nav-height) + var(--gutter)),
      min(calc((100svh + var(--nav-height) - var(--log-h, 100svh)) / 2), var(--log-band)));
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 2 * var(--log-band));
    min-height: calc(100svh - 2 * var(--log-band));
    overflow: clip;
  }
  .log-scene.is-strip .log-list { margin-top: auto; }
  .log-scene.is-strip .log-head { margin-bottom: clamp(40px, 8vh, 96px); }
  .log-scene.is-strip .log-list {
    flex: none;
    display: flex;
    width: max-content;
    border-bottom: 0;
    will-change: transform;
  }
  .log-scene.is-strip .log-row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex: none;
    width: clamp(400px, 38vw, 620px);
    row-gap: 0;
    padding: clamp(24px, 4vh, 40px) clamp(32px, 4vw, 64px) 0 0;
  }
  /* The .h2 step, not a size of its own 4% away from it. */
  .log-scene.is-strip .log-row .date { font-size: clamp(2.75rem, 5vw, 5rem); }
  .log-scene.is-strip .log-text {
    max-width: 34ch;
    margin-top: clamp(20px, 3vh, 32px);
    font-size: 1.125rem;
  }
  .log-scene.is-strip .log-go { margin-top: 1.25rem; }
}
/* Prices, how it works and the guarantee. The page turns from night to morning here. Mobile first. */

/* Scene headlines take the shared type (.display for Prices, .h2 for How); the masks the split reveals add get their
   room for descenders from 01-tokens.css. */

/* Offers: the price table. The page turns from night to morning as it rises (the kit scrubs it); the gap above it is
   the same --section as every other scene boundary. */
.buy-kicker {
  display: flex;
  justify-content: space-between;
  gap: var(--gutter);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
}
.buy-title { margin-top: clamp(48px, 7vw, 112px); }
.buy-list {
  margin-top: clamp(56px, 9vw, 144px);
  border-bottom: 1px solid var(--line);
}
.buy-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--gutter);
  row-gap: 0.75rem;
  align-items: baseline;
  padding-block: 1.5rem 2.25rem;
}
.buy-row::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 1px;
  background: var(--line);
  transform: scaleX(var(--draw, 1));
  transform-origin: 0 50%;
  transition: background-color var(--t-fast) ease;
}
.buy-num { grid-column: 1; grid-row: 1; }
.buy-row .time {
  grid-column: 2;
  grid-row: 1;
  text-align: right;
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.buy-name { grid-column: 1 / -1; grid-row: 2; margin-top: 1rem; }
.buy-row.is-first .buy-name::after {
  content: "";
  display: inline-block;
  width: 0.3em;
  height: 0.3em;
  margin-left: 0.3em;
  border-radius: 50%;
  background: var(--dawn);
  vertical-align: 0.15em;
}
.buy-row .price {
  grid-column: 1 / -1;
  grid-row: 3;
  font-weight: 500;
  font-size: clamp(2.25rem, 9vw, 3rem);
  line-height: 0.98;
  letter-spacing: -0.035em;
  font-feature-settings: "tnum";
  text-wrap: balance;
}
.buy-gets { grid-column: 1 / -1; grid-row: 4; max-width: 62ch; margin-top: 0.5rem; text-wrap: pretty; }
.buy-excluded { grid-column: 1 / -1; grid-row: 5; max-width: 62ch; text-wrap: pretty; }
.buy-note { margin-top: 1.5rem; max-width: 62ch; }

@media (hover: hover) and (pointer: fine) {
  .buy-row:hover::before { background: var(--fg); }
}

/* How it works: a vertical timeline. Under 900 px the line is static. */
.how-kicker {
  display: flex;
  justify-content: space-between;
  gap: var(--gutter);
  margin-bottom: 1.5rem;
}
.how-timeline {
  --how-pad: 2rem;
  position: relative;
  margin-top: clamp(56px, 9vw, 120px);
  padding-left: var(--how-pad);
}
.how-track {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 1px;
  background: var(--line);
}
.how-fill {
  display: none;
  position: absolute;
  inset: 0;
  background: var(--fg);
  transform-origin: 50% 0;
  transition: background-color var(--t-theme) ease;
}
.how-dot {
  display: none;
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  width: 11px;
  height: 11px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: var(--dawn);
}
.how-step {
  position: relative;
  display: grid;
  row-gap: 0.875rem;
  padding-bottom: clamp(48px, 9vw, 96px);
  max-width: 34ch;
  font-size: clamp(1.125rem, 1.6vw, 1.5rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: pretty;
  transition: color var(--t-fast) ease;
}
.how-step:last-child { padding-bottom: 0; }
.how-step > strong {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.how-step::before {
  content: "";
  position: absolute;
  top: 0.28125rem;
  left: calc(-1 * var(--how-pad) - 4px);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--fg);
  transition: background-color var(--t-fast) ease, box-shadow var(--t-fast) ease;
}

/* The guarantee: one sentence on the grid. */
.guarantee-scene { padding-top: 0; }
.guarantee-scene::before {
  content: "";
  display: block;
  border-top: 1px solid var(--line);
  margin-bottom: 1rem;
}
.guarantee-label { margin-bottom: clamp(32px, 5vw, 64px); }
.guarantee.h2 {
  line-height: 1.02;
  max-width: 26ch;
  text-wrap: pretty;
}

@media (min-width: 720px) {
  .buy-row {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    row-gap: 1rem;
    padding-block: 2rem 2.75rem;
  }
  .buy-num { grid-column: 1 / span 1; grid-row: 1; }
  .buy-name { grid-column: 2 / span 4; grid-row: 1; margin-top: 0; }
  .buy-row .time { grid-column: 2 / span 4; grid-row: 2; text-align: left; }
  .buy-row .price { grid-column: 6 / span 7; grid-row: 1; font-size: clamp(2.25rem, 5vw, 5rem); }
  .buy-gets { grid-column: 6 / span 7; grid-row: 2; margin-top: 0.75rem; }
  .buy-excluded { grid-column: 6 / span 7; grid-row: 3; }
  .buy-note { margin-left: calc((100% + var(--gutter)) * 5 / 12); }
  .how-timeline { --how-pad: 3rem; margin-left: calc((100% + var(--gutter)) * 3 / 12); }
}

/* From 900 px: the compact table, at every height. All five offers in reading order, one row each: name and time, then
   the price with what it leaves out under it, then what you get. The headline scales with the screen height too, so a
   1366x768 screen holds all five prices under the bar and they can be compared. */
@media (min-width: 900px) {
  .buy-title { margin-top: clamp(16px, 2vh, 32px); font-size: clamp(2.75rem, min(8.5vw, 11vh), 10.5rem); }
  .buy-list { margin-top: clamp(24px, 3vh, 40px); }
  .buy-row { row-gap: 0.125rem; padding-block: 0.375rem 0.5rem; }
  /* The price spans the name and time rows, so the time stays under the name when a price takes two lines. */
  .buy-name { grid-column: 2 / span 3; grid-row: 1; }
  .buy-row .time { grid-column: 2 / span 3; grid-row: 2; align-self: start; }
  .buy-row .price {
    grid-column: 5 / span 4;
    grid-row: 1 / span 2;
    font-size: clamp(1.75rem, 2.5vw, 2.75rem);
    line-height: 1.05;
  }
  .buy-excluded { grid-column: 5 / span 4; grid-row: 3; font-size: 0.875rem; }
  .buy-gets { grid-column: 9 / span 4; grid-row: 1 / span 3; margin-top: 0; font-size: 0.9375rem; }
  .buy-note { margin-left: calc((100% + var(--gutter)) * 4 / 12); }

  .how-scene {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }
  .how-head {
    grid-column: 1 / span 5;
    position: sticky;
    top: calc(var(--nav-height) + var(--gutter));
  }
  .how-timeline {
    --how-pad: clamp(40px, 4vw, 72px);
    grid-column: 7 / span 6;
    margin-top: 0;
    margin-left: 0;
  }
  .how-step { padding-bottom: clamp(96px, 11vw, 176px); }
  .how-timeline.is-live .how-fill,
  .how-timeline.is-live .how-dot { display: block; }
  .how-timeline.is-live .how-step { color: var(--muted); }
  .how-timeline.is-live .how-step.is-on { color: var(--fg); }
  .how-timeline.is-live .how-step::before { background: var(--bg); box-shadow: inset 0 0 0 1px var(--fg); }
  .how-timeline.is-live .how-step.is-on::before { background: var(--fg); }

  .guarantee-scene {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: baseline;
  }
  /* Label above the statement, both on column 1, like every other scene head. */
  .guarantee-scene::before { grid-column: 1 / -1; margin-bottom: 1rem; }
  .guarantee-label { grid-column: 1 / -1; margin-bottom: clamp(32px, 4vw, 64px); }
  .guarantee.h2 { grid-column: 1 / span 9; max-width: none; }
}
/* Morning scenes: fit, questions, the closing call and the problem form. Mobile first; from 900 px the headings sit in
   a left rail and the lists on column 5. The fit list and the questions share one marker column (the number, then a
   0.75rem gap), so their text starts on one edge. The split reveals' masks get their room below from 01-tokens.css. */

/* ---------- Fit ---------- */
.fit-layout {
  display: grid;
  row-gap: clamp(40px, 6vw, 96px);
}
.fit-head {
  display: grid;
  row-gap: clamp(16px, 2vw, 24px);
  align-content: start;
}
.fit-cols {
  display: grid;
  row-gap: clamp(56px, 9vw, 96px);
}
.fit-col-head,
.fit .ticks li,
.fit .crosses li {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  column-gap: 0.75rem;
  align-items: baseline;
}
.fit-col-head {
  padding-bottom: clamp(20px, 2.4vw, 32px);
}
.fit .ticks,
.fit .crosses {
  border-bottom: 1px solid var(--line);
}
.fit .ticks li,
.fit .crosses li {
  padding-block: clamp(18px, 2vw, 26px);
  border-top: 1px solid var(--line);
  font-size: clamp(1.0625rem, 1.3vw, 1.25rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}
.fit .ticks li::before,
.fit .crosses li::before {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
}
.fit .ticks li::before {
  content: "\2022";
  content: "\2022" / "";
  color: var(--fg);
}
.fit .crosses li::before {
  content: "\2013";
  content: "\2013" / "";
  color: var(--muted);
}

/* ---------- Questions ---------- */
.faq-layout {
  display: grid;
  row-gap: clamp(40px, 6vw, 80px);
}
.faq-head {
  display: grid;
  row-gap: clamp(16px, 2vw, 24px);
  align-content: start;
}
.faq-mail .or-email a,
.final-scene .or-email a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: background-size var(--t-fast) var(--ease-out);
}
.faq-mail .or-email a:hover,
.final-scene .or-email a:hover { background-size: 0 1px; }

.faq { counter-reset: faq; }
.faq details { counter-increment: faq; }
.faq summary {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem;
  column-gap: 0.75rem;
  align-items: baseline;
  padding-block: clamp(20px, 2.2vw, 30px);
  font-size: clamp(1.375rem, 2.2vw, 1.875rem);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.faq summary::before {
  content: counter(faq, decimal-leading-zero);
  content: counter(faq, decimal-leading-zero) / "";
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-feature-settings: "tnum";
  color: var(--muted);
}
.faq summary::after {
  content: "+";
  content: "+" / "";
  justify-self: end;
  font-family: var(--font-mono);
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  transition: transform var(--t-fast) var(--ease-out);
}
.faq details[open] > summary::after { transform: rotate(45deg); }
@media (hover: hover) {
  .faq details:not([open]) > summary:hover::after { transform: rotate(90deg); }
}
.faq details > p {
  max-width: 62ch;
  margin-left: calc(2.5rem + 0.75rem);
  padding-bottom: clamp(24px, 3vw, 40px);
  text-wrap: pretty;
}

/* Open and close with a short height change where the browser can animate details. */
@supports selector(::details-content) {
  .faq { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow-y: clip;
    transition: block-size 0.45s var(--ease-out), content-visibility 0.45s allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
}

/* ---------- The closing call ---------- */
.final-close {
  /* The last statement on the page, at the hero headline's desktop size and never above it. */
  font-size: clamp(2.75rem, min(11.5vw, 17svh), 10.5rem);
}
.final-row {
  display: grid;
  row-gap: 1.25rem;
  align-content: start;
  margin-top: clamp(56px, 9vw, 144px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.final-scene .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.final-cta { display: inline-block; }
.final-scene .final-cta .button {
  height: 3.75rem;
  padding: 0 1.75rem;
  font-size: 1.0625rem;
}
.final-clock .mono { color: var(--fg); }

/* ---------- The problem form (home and proof pages) ---------- */
.form-wrap {
  position: relative;
  max-width: 44rem;
  margin-top: clamp(48px, 6vw, 96px);
}
.final-scene > .form-wrap {
  margin-top: clamp(56px, 9vw, 144px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--line);
}
.form-wrap form {
  display: grid;
  row-gap: clamp(32px, 3.6vw, 48px);
}
.form-field {
  display: grid;
  row-gap: 0.25rem;
}
.form-field label {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  transition: color var(--t-fast) ease;
}
.form-field:focus-within label { color: var(--fg); }
.form-wrap input,
.form-wrap textarea {
  font-size: clamp(1.125rem, 1.6vw, 1.375rem);
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.form-wrap textarea {
  min-height: 7rem;
  max-height: 24rem;
  field-sizing: content;
}
@supports (field-sizing: content) {
  .form-wrap textarea { resize: none; }
}
/* The accent deepened towards the text colour, as the error line below uses it: 5.4:1 on bone, where plain dawn is 2.7:1
   and under the 3:1 a field's boundary needs. */
.form-wrap [aria-invalid="true"],
.form-wrap [aria-invalid="true"]:focus { border-bottom-color: color-mix(in srgb, var(--dawn) 65%, var(--fg)); }
.form-wrap [aria-invalid="true"]:focus { box-shadow: 0 1px 0 color-mix(in srgb, var(--dawn) 65%, var(--fg)); }
.form-wrap input:-webkit-autofill,
.form-wrap textarea:-webkit-autofill {
  -webkit-text-fill-color: var(--fg);
  caret-color: var(--fg);
  transition: background-color 0s 600000s, color 0s 600000s;
}

.form-wrap .error {
  margin-top: 0.75rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--fg);
  /* The accent, deepened towards the text colour so it passes AA on bone (5.4:1) and on ink. */
  color: color-mix(in srgb, var(--dawn) 65%, var(--fg));
}
.form-wrap .error::before {
  content: "";
  display: inline-block;
  width: 0.5em;
  height: 0.5em;
  margin-right: 0.5em;
  border-radius: 50%;
  background: var(--dawn);
}

.form-send {
  display: grid;
  justify-items: start;
  row-gap: 1rem;
}
.form-send .small {
  max-width: 34ch;
  color: var(--muted);
}
.form-wrap button:disabled { cursor: progress; opacity: 0.7; }

.form-thanks {
  padding-block: clamp(8px, 1vw, 16px);
}

.form-wrap .hp {
  position: absolute;
  left: -9999px;
  top: 0;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---------- 720 px: two columns for fit, the send row on one line ---------- */
/* The two fit columns sit on the page grid: a gutter between them, the divider in its middle. */
@media (min-width: 720px) {
  .fit-cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .fit-col + .fit-col { position: relative; }
  .fit-col + .fit-col::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: calc(var(--gutter) / -2);
    width: 1px;
    background: var(--line);
  }
  .form-send {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    column-gap: var(--gutter);
  }
}

/* ---------- 900 px: headings in a left rail; nothing in them changes, so nothing sticks ---------- */
@media (min-width: 900px) {
  .fit-layout,
  .faq-layout,
  .final-scene {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
    align-items: start;
  }
  .fit-head { grid-column: 1 / span 4; }
  .fit-cols { grid-column: 5 / -1; }
  .fit-col-head,
  .fit .ticks li,
  .fit .crosses li { grid-template-columns: 4rem minmax(0, 1fr); }

  .faq-head { grid-column: 1 / span 4; }
  .faq { grid-column: 5 / -1; }
  .faq summary { grid-template-columns: 4rem minmax(0, 1fr) 1.5rem; }
  .faq details > p {
    margin-left: calc(4rem + 0.75rem);
    font-size: 1.125rem;
  }

  .final-scene { display: grid; }
  .final-close { grid-column: 1 / -1; }
  .final-row { grid-column: 1 / span 5; }
  .final-scene:not(:has(.form-wrap)) .final-row { grid-column: 1 / -1; }
  .final-scene > .form-wrap {
    grid-column: 7 / -1;
    max-width: none;
  }
}
/* Secondary pages: proof write-ups, the proof index, plain pages and the 404. Morning, editorial, on the 12-column grid. */

/* Morning from the first paint: the section carries the morning values of the theme, so it reads light before and without JS. */
.pg[data-theme="morning"] {
  --bg: var(--bone);
  --fg: var(--ink);
  --muted: var(--morning-muted);
  --line: var(--morning-line);
  color-scheme: light;
  background: var(--bg);
  color: var(--fg);
}

/* The bottom space is the --section every scene ends with; the footer starts at its hairline. */
.pg {
  display: block;
  padding-top: calc(var(--nav-height) + clamp(40px, 9vw, 152px));
  padding-bottom: var(--section);
}

/* Head: meta row, title, lede */
.pg-head { row-gap: 0; }
.pg-head > * { grid-column: 1 / -1; }

.pg-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--line);
}
.pg-back { margin-left: auto; }
.pg-back::before {
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1px;
  margin-right: 0.6em;
  vertical-align: middle;
  background: currentColor;
}
.pg-back a { color: var(--fg); }
/* A 12 px label is a 19 px target; the link's own box stays (its underline is drawn on it), the hit area grows to 45 px. */
.pg-back a::after {
  content: "";
  position: absolute;
  inset: -13px -8px;
}

.pg-head > .pg-title,
.pg-head > h1 { margin-top: clamp(40px, 7vw, 112px); }
/* Write-ups and plain pages: a statement between the two tiers (the titles are 52 to 68 character sentences, which
   .display would set in four lines), so the page headline is not dwarfed by the footer wordmark. */
.pg-head > .pg-title { font-size: clamp(2.75rem, 7vw, 8rem); }
.pg-title h1 { font-size: inherit; font-weight: inherit; }
.pg-head > .lede { margin-top: clamp(24px, 3vw, 48px); }

.pg-demo { margin-top: clamp(24px, 3vw, 40px); }
.pg-demo-link {
  display: inline-flex;
  align-items: center;
  gap: 0.65em;
  padding-bottom: 0.25em;
  border-bottom: 1px solid var(--fg);
  font-size: 1.125rem;
  font-weight: 500;
  letter-spacing: -0.01em;
}
.pg-demo-link::after {
  content: "";
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background: var(--dawn);
  transition: scale var(--t-fast) var(--ease-out);
}
.pg-demo-link:hover::after { scale: 1.7; }

/* The box is reserved at the size in the markup (1200 by 750), so a write-up image cannot shift the page. */
.pg-head > .pg-image {
  margin-top: clamp(40px, 6vw, 96px);
  width: 100%;
  aspect-ratio: 1200 / 750;
  object-fit: cover;
}

/* Body: the rendered markdown */
.pg-body { margin-top: clamp(72px, 11vw, 176px); }
.pg-body > * { grid-column: 1 / -1; }

.article {
  --pg-h2-space: clamp(56px, 6vw, 88px);
  counter-reset: pg-section;
  font-size: 1.0625rem;
  line-height: 1.6;
}
.article > * + * { margin-top: 1.25em; }
.article p { max-width: 62ch; text-wrap: pretty; }
.article h2 {
  counter-increment: pg-section;
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-top: var(--pg-h2-space);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
  font-weight: 500;
  line-height: 1.08;
  letter-spacing: -0.025em;
  text-wrap: balance;
}
.article h2::before {
  content: counter(pg-section, decimal-leading-zero);
  content: counter(pg-section, decimal-leading-zero) / "";
  flex: none;
  min-width: 2.5ch;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  font-feature-settings: "tnum";
  color: var(--muted);
}
.article > h2:first-child { margin-top: 0; }
.article > h2 + * { margin-top: 1.5rem; }
.article h3 {
  margin-top: 2.5rem;
  font-size: 1.1875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.article strong { font-weight: 600; }
.article a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  transition: background-size var(--t-fast) var(--ease-out);
}
.article a:hover { background-size: 0 1px; }
.article code {
  font-family: var(--font-mono);
  font-size: 0.875em;
  padding: 0.1em 0.35em;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px var(--line);
}

/* Lists: hairline rows, no bullets */
.article ul { border-top: 1px solid var(--line); }
.article li {
  padding-block: 1rem;
  border-bottom: 1px solid var(--line);
  text-wrap: pretty;
}

/* Tables: hairlines, the last column in large tabular mono */
.article .table-wrap { overflow-x: auto; margin-top: 2rem; }
.article table { width: 100%; border-collapse: collapse; }
.article th {
  padding: 0 1rem 0.75rem 0;
  border-bottom: 1px solid var(--fg);
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.article td {
  padding: 1.25rem 1rem 1.25rem 0;
  border-bottom: 1px solid var(--line);
  vertical-align: baseline;
  line-height: 1.4;
}
.article th:last-child,
.article td:last-child { padding-right: 0; text-align: right; }
.article td:last-child {
  font-family: var(--font-mono);
  font-feature-settings: "tnum";
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  line-height: 1;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* Aside: what you get */
.pg-aside {
  margin-top: clamp(64px, 10vw, 120px);
  padding-top: 1rem;
  border-top: 1px solid var(--fg);
}
.pg-price {
  margin-top: 1.5rem;
  font-size: clamp(2rem, 3vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.04em;
  font-feature-settings: "tnum";
}
.pg-days { margin-top: 0.75rem; font-size: 0.9375rem; }
.pg-guarantee {
  margin-top: 1.75rem;
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  max-width: 42ch;
}
.pg-aside .small { margin-top: 1rem; max-width: 42ch; }

/* Contact: the closing scene */
.pg-call {
  margin-top: var(--section);
  padding-top: 1rem;
  border-top: 1px solid var(--line);
  row-gap: clamp(24px, 4vw, 48px);
}
.pg-call > * { grid-column: 1 / -1; }
.pg-call-line { max-width: 18ch; }
.pg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
}
.pg-call-line + .pg-actions { margin-top: clamp(32px, 4vw, 56px); }

/* The form itself is styled by 50-final.css; here only the email link matches the closing scene. */
.pg-actions .or-email a {
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 100% 1px;
  background-repeat: no-repeat;
  background-position: 0 100%;
  padding-bottom: 0.1em;
  transition: background-size var(--t-fast) var(--ease-out);
}
.pg-actions .or-email a:hover { background-size: 0 1px; }
.pg-cta { display: inline-block; }

/* Proof index: a numbered list of write-ups. Close enough under the lede that a laptop's first viewport shows the first
   write-up. */
.pg-index {
  margin-top: clamp(48px, 4.5vw, 80px);
  border-top: 1px solid var(--fg);
}
.pg-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--gutter);
  row-gap: 0.75rem;
  padding-block: clamp(24px, 3vw, 40px);
  border-bottom: 1px solid var(--line);
}
.pg-row > * { grid-column: 1 / -1; }
.pg-row > .pg-num { grid-column: 1 / span 2; }
.pg-row > .pg-seg { grid-column: 3 / span 10; }
.pg-row-title {
  font-size: clamp(1.5rem, 2.8vw, 2.75rem);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-wrap: balance;
}
.pg-row-title a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.pg-row-title::after {
  content: "";
  display: inline-block;
  width: 0.28em;
  height: 0.28em;
  margin-left: 0.3em;
  border-radius: 50%;
  background: var(--dawn);
  vertical-align: 0.1em;
  scale: 0;
  transition: scale var(--t-fast) var(--ease-out);
}
.pg-sum { max-width: 46ch; color: var(--muted); text-wrap: pretty; }
/* Hover and focus move the number, never the title: a shifted title would become the box the row link fills. */
.pg-num { transition: color var(--t-fast) ease, translate var(--t-fast) var(--ease-out); }
.pg-row:focus-within .pg-num { color: var(--fg); translate: 0.5em 0; }
.pg-row:focus-within .pg-row-title::after { scale: 1; }
@media (hover: hover) {
  .pg-row:hover .pg-num { color: var(--fg); translate: 0.5em 0; }
  .pg-row:hover .pg-row-title::after { scale: 1; }
}

/* 404: one statement at the foot of the screen. Its bottom space is the --section of every other page (.pg), so the
   gap to the footer's hairline is the same everywhere. */
.pg-404 {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100vh;
  min-height: 100svh;
}
.pg-404-label { margin-bottom: auto; padding-bottom: clamp(48px, 8vw, 120px); }
.pg-404-foot {
  margin-top: clamp(32px, 4vw, 56px);
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  align-items: center;
}
.pg-404-foot > * { grid-column: 1 / -1; }

@media (min-width: 720px) {
  .pg-head > .lede { grid-column: 5 / span 8; }
  .pg-head > .pg-demo { grid-column: 5 / span 8; }
  .pg-aside { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gutter); }
  .pg-aside > * { grid-column: 1; }
  .pg-aside > .pg-guarantee,
  .pg-aside > .small { grid-column: 2; }
  .pg-aside > .pg-guarantee { grid-row: 1 / span 2; margin-top: 0; padding-top: 0; border-top: 0; }
  .pg-aside > .small { grid-row: 3; }
  .pg-404-foot > .lede { grid-column: 1 / span 7; }
  .pg-404-foot > .pg-404-go { grid-column: 8 / span 5; justify-self: end; }
}

@media (min-width: 900px) {
  .pg-meta {
    display: grid;
    grid-template-columns: subgrid;
    row-gap: 0;
    column-gap: normal;
  }
  .pg-meta > * { grid-column: 1 / span 6; }
  .pg-meta > * + * { grid-column: 7 / span 3; }
  .pg-meta > .pg-back { grid-column: 10 / span 3; margin-left: 0; text-align: right; }

  .pg-head > .pg-title { grid-column: 1 / span 10; }
  .pg-head > .lede,
  .pg-head > .pg-demo { grid-column: 7 / span 5; }

  /* Proof: the article on the left, what you get beside its top on the right (nothing in it changes, so it does not
     stick). */
  .pg-body > .article { grid-column: 1 / span 7; grid-row: 1; }
  .pg-body > .pg-aside {
    display: block;
    grid-column: 9 / span 4;
    grid-row: 1;
    align-self: start;
    margin-top: 0;
  }
  .pg-aside > .pg-guarantee { margin-top: 1.75rem; padding-top: 1rem; border-top: 1px solid var(--line); }

  /* Plain page: headings on the left, text on the right */
  .pg-doc .pg-body > .article {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    column-gap: var(--gutter);
  }
  .pg-doc .article > * { grid-column: 7 / span 6; }
  .pg-doc .article > h2 { grid-column: 1 / span 5; }
  .pg-doc .article > h2 + * {
    margin-top: var(--pg-h2-space);
    padding-top: 1rem;
    border-top: 1px solid var(--line);
  }
  .pg-doc .article > h2 + ul { padding-top: 0; }

  .pg-call > .pg-call-label { grid-column: 1 / span 3; }
  .pg-call > .pg-call-main { grid-column: 4 / span 9; }
  .pg-doc .pg-call > .pg-call-main { grid-column: 7 / span 6; }

  .pg-row { align-items: baseline; }
  .pg-row > .pg-num { grid-column: 1 / span 1; }
  .pg-row > .pg-seg { grid-column: 2 / span 3; }
  .pg-row > .pg-row-title { grid-column: 5 / span 5; }
  .pg-row > .pg-sum { grid-column: 10 / span 3; font-size: 0.9375rem; }
}