/* Hallmark · shape: Field Guide slide sequence (draw swapped) · genre: editorial · theme: Garden (deal 3bd649) · job: listen · draw: 3bd649
 * hero: Stage · nav: edge-aligned running head · footer: letter close (last slide) · imagery: photographs, library-free: 3 supplied Wikimedia photos, natural · signature: figures in old-style numerals set huge on hairlines, one per screen
 * axes: light/roman-serif/chromatic-green · posture: committed · contrast: pass · fold: pass · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H4 E4 S4 R4 V4 · weakest: V, too many two-column splits in the first draft; moved to strips, matrices, staircases, rows and a poster */
/* Hallmark · waive 59 · slides are one screen each and part by the screen edge, not by section gaps · every slide fills the viewport */
/* Hallmark · dismissed 58 · a 34-slide deck: each slide holds 80 words or fewer, counted per slide, the page total is the speech */
/* Hallmark · dismissed 46a · 12.5% growth in 2025 is a figure from the supplied speech, INRESEARCH */
/* Hallmark · dismissed 23 · the leaf green fills are a 2px progress line and two measured bars, well under 5% of a screen */
@import url("./tokens.css?v=20261103g");
@import url("./base.css?v=20261103g");

:root {
  --font-display: "Vollkorn", "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, ui-serif, serif;
  --font-body: "Hanken Grotesk", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", sans-serif;
  --font-outlier: "Newsreader", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;
  --fit: min(1vw, 1.6dvh);
  --chrome-h: 3.5rem;
  --t-body: clamp(1rem, calc(var(--fit) * 1.45), 1.6rem);
  --t-lead: clamp(1.125rem, calc(var(--fit) * 1.9), 2.1rem);
  --t-sm: clamp(0.9375rem, calc(var(--fit) * 1.25), 1.4rem);
  --t-item: clamp(1.25rem, calc(var(--fit) * 2.4), 2.6rem);
  --t-item-l: clamp(1.5rem, calc(var(--fit) * 3.4), 3.6rem);
  --t-head: clamp(2rem, calc(var(--fit) * 5.2), 5rem);
  --t-state: clamp(2rem, calc(var(--fit) * 5.6), 5.8rem);
  --t-title: clamp(2.75rem, calc(var(--fit) * 8.6), 8.5rem);
  --on-ink-rule: color-mix(in oklab, var(--color-paper) 30%, var(--color-ink));
  --on-ink-muted: color-mix(in oklab, var(--color-paper) 76%, var(--color-ink));
  --scrim: color-mix(in oklab, var(--color-ink) 64%, transparent);
  --scrim-soft: color-mix(in oklab, var(--color-ink) 38%, transparent);
  --photo-line: color-mix(in oklab, var(--color-ink) 10%, transparent);
}

html, body { height: 100%; }
body { font-variant-numeric: oldstyle-nums; color: var(--color-ink-2); font-size: var(--t-body); line-height: 1.5; }
table, .num { font-variant-numeric: lining-nums tabular-nums; }
h1, h2, h3, h4 { color: var(--color-ink); }
h2 { font-size: var(--t-head); max-width: 22ch; line-height: 1.04; }
h3 { font-size: var(--t-item); max-width: 28ch; }
p { font-size: var(--t-body); }
.lead { font-size: var(--t-lead); max-width: 40ch; }
b { font-weight: 500; color: var(--color-ink); }
ul, ol { margin: 0; padding: 0; list-style: none; }
a:hover { text-decoration-color: var(--color-accent); }
a:active { color: var(--color-accent); }

/* running head and progress: the only fixed chrome */
.chrome { position: fixed; inset: 0 0 auto 0; z-index: var(--z-sticky-nav); height: var(--chrome-h); display: flex; align-items: center; justify-content: space-between; padding-inline: max(var(--gutter), env(safe-area-inset-left), env(safe-area-inset-right)); padding-top: env(safe-area-inset-top); background: var(--color-paper); color: var(--color-ink); }
.chrome .mark { font: 600 var(--text-xl)/1 var(--font-display); letter-spacing: var(--tracking-display); text-decoration: none; }
.chrome .count { font: 500 var(--text-sm)/1 var(--font-body); color: var(--color-muted); font-variant-numeric: lining-nums tabular-nums; }
html[data-tone="ink"] .chrome { background: var(--color-ink); color: var(--color-paper); }
html[data-tone="ink"] .chrome .count { color: var(--on-ink-muted); }
html[data-tone="poster"] .chrome { background: transparent; color: var(--color-paper); }
html[data-tone="poster"] .chrome .count { color: var(--color-paper); }
.prog { position: fixed; inset: auto 0 0 0; z-index: var(--z-sticky-nav); height: 2px; background: var(--color-rule); }
.prog i { display: block; height: 100%; background: var(--color-accent); transform-origin: left; transform: scaleX(var(--p, 0)); }
html[data-tone="ink"] .prog { background: var(--on-ink-rule); }
html[data-tone="ink"] .prog i, html[data-tone="poster"] .prog i { background: var(--color-accent-2); }
html[data-tone="poster"] .prog { background: transparent; }

/* the deck: one slide a screen; without script they stack */
.deck { display: block; outline: none; }
.slide { position: relative; display: flex; flex-direction: column; min-height: 100dvh; background: var(--color-paper); color: var(--color-ink-2); }
.js .slide { height: 100dvh; overflow-y: auto; overflow-x: clip; }
/* auto-fit (deck-fit.js): --fit-k scales the slide content so the whole frame is always visible; above 600px the slide never scrolls */
.slide > .in { zoom: var(--fit-k, 1); }
.js .slide[data-fit-clip] { overflow-y: hidden; }
.in { width: 100%; max-width: var(--container); margin-block: auto; margin-inline: auto; padding-top: calc(var(--chrome-h) + var(--space-lg) + env(safe-area-inset-top)); padding-bottom: max(var(--space-xl), calc(env(safe-area-inset-bottom) + 28px)); padding-inline: var(--gutter); display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); row-gap: var(--space-xl); align-items: start; }
.in > * { grid-column: var(--c, 1 / -1); grid-row: var(--r, auto); min-width: 0; }
.slide.is-ink { background: var(--color-ink); color: var(--color-paper); --color-rule: var(--on-ink-rule); --color-rule-2: var(--on-ink-muted); --color-muted: var(--on-ink-muted); --color-ink-2: var(--color-paper); }
.is-ink h1, .is-ink h2, .is-ink h3, .is-ink b { color: var(--color-paper); }
.is-ink a { color: var(--color-accent-2); }
.pale { color: var(--color-accent-2); }

.fig { font: 600 var(--fs, var(--t-title))/0.88 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); font-variant-numeric: oldstyle-nums proportional-nums; overflow-wrap: break-word; min-width: 0; }
.is-ink .fig { color: var(--color-accent-2); }
.fig small { font: 500 0.22em/1 var(--font-body); letter-spacing: 0; color: var(--color-muted); padding-inline: 0.18em; }
.note { font: 400 var(--t-sm)/1.45 var(--font-body); color: var(--color-muted); max-width: 52ch; }
.cap { font: 400 var(--t-sm)/1.4 var(--font-outlier); color: var(--color-muted); }
.rule { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); }
.well { background: var(--tint-moss); border-radius: var(--radius-card); padding: var(--space-xl); }
.well--clay { background: var(--tint-clay); }
.well--paper { background: var(--color-paper-2); }
.well--leaf { background: var(--color-accent-2); color: var(--color-ink); }
.well p { max-width: 45ch; }

.ph { position: relative; margin: 0; border-radius: var(--radius-card); outline: var(--rule-hair) solid var(--photo-line); outline-offset: -1px; }
.ph[data-slot] { min-height: 16rem; }

/* 1 title */
.s-title .in { align-content: center; row-gap: var(--space-2xl); }
.s-title h1 { --c: 1 / 11; font-size: var(--t-title); max-width: 13ch; line-height: 0.98; }
.s-title .lead { --c: 1 / 6; border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); }
.names { --c: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--gap-columns); border-top: var(--rule-hair) solid var(--color-rule-2); }
.names li { font: 500 var(--t-body)/1.3 var(--font-body); color: var(--color-ink); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule); }

/* 2 hook: stage, photograph bleeds off the right edge */
.s-hook .in { align-content: center; min-height: 100%; }
.s-hook h2 { --c: 1 / 8; font-size: var(--t-state); max-width: 15ch; line-height: 1.04; }
.s-hook .lead { --c: 1 / 7; }
.s-hook .stage { position: absolute; top: calc(var(--chrome-h) + var(--space-md)); right: 0; bottom: var(--space-2xl); width: 42%; display: flex; flex-direction: column; gap: var(--space-xs); }
.s-hook .stage .ph { flex: 1; min-height: 0; border-radius: var(--radius-card) 0 0 var(--radius-card); }

/* 3 four fixed things */
.s-three h2 { --c: 1 / 9; }
.cols4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cols4 > div { padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule-2); display: grid; gap: var(--space-md); align-content: start; }
.cols4 > div:first-child { padding-left: 0; border-left: 0; }
.cols4 > div:last-child { padding-right: 0; }
.cols4 .fig { --fs: calc(var(--fit) * 7.2); }

/* 7 measured strips */
.s-moscow h2 { --c: 1 / 9; }
.strips { --c: 1 / 12; display: grid; gap: var(--space-xl); }
.strip { display: grid; gap: var(--space-sm); }
.strip .lab { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-lg); flex-wrap: wrap; }
.strip .lab b { font: 600 var(--t-item-l)/1.1 var(--font-display); color: var(--color-ink); }
.strip .lab span { font: 400 var(--t-lead)/1.3 var(--font-body); color: var(--color-ink-2); }
.strip .track { position: relative; height: calc(var(--fit) * 6); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); overflow: hidden; background: var(--color-paper-2); }
.strip .fill { position: absolute; inset: 0 auto 0 0; width: var(--w); background: var(--color-accent-2); border-right: 2px solid var(--color-accent); }
.axis { display: flex; justify-content: space-between; font: 400 var(--t-sm)/1 var(--font-body); color: var(--color-muted); }
.s-moscow .note { --c: 1 / 12; }

/* 15 family doctor, ink */
.s-doc .in { align-content: end; min-height: 100%; row-gap: var(--space-xl); padding-bottom: var(--space-3xl); }
.s-doc h2 { --c: 1 / 11; font-size: calc(var(--fit) * 7); max-width: 17ch; line-height: 1.02; }
.s-doc .lead { --c: 1 / 7; color: var(--color-accent-2); border-top: var(--rule-hair) solid var(--color-rule); padding-top: var(--space-md); }

/* 20 predictable */
.s-pred h2 { --c: 1 / 10; }
.pillars { --c: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.pillars > div { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); display: grid; gap: var(--space-sm); align-content: start; }
.pillars h3 { font-size: var(--t-item-l); line-height: 1.1; }
.s-pred .lead { --c: 1 / 6; font-size: var(--t-body); }
.plans { --c: 7 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-pill); }
.plans > div { text-align: center; padding: var(--space-md) var(--space-sm); font: 600 var(--t-item)/1.1 var(--font-display); color: var(--color-ink); border-left: var(--rule-hair) solid var(--color-rule-2); }
.plans > div:first-child { border-left: 0; }

/* 21 capabilities */
.s-cap .l { --c: 1 / 6; display: grid; gap: var(--space-xl); align-content: start; }
.s-cap h2 { max-width: 14ch; }
.caps { --c: 7 / 13; border-top: var(--rule-hair) solid var(--color-rule-2); }
.caps li { font: 600 var(--t-item-l)/1.15 var(--font-display); color: var(--color-ink); padding-block: var(--space-lg); border-bottom: var(--rule-hair) solid var(--color-rule); }

/* 23 CSR staircase */
.s-csr .l { --c: 1 / 6; display: grid; gap: var(--space-lg); align-content: start; }
.stairs { --c: 6 / 13; display: grid; gap: var(--space-sm); align-self: end; }
.stairs > div { display: grid; gap: var(--space-xs); padding: var(--space-lg); border-radius: var(--radius-card); }
.stairs > div:nth-child(1) { background: var(--color-paper-2); margin-right: var(--space-3xl); }
.stairs > div:nth-child(2) { background: var(--tint-moss); margin-right: var(--space-xl); }
.stairs > div:nth-child(3) { background: var(--color-accent-2); color: var(--color-ink); margin-right: 0; }
.stairs h3 { font-size: var(--t-item); }
.stairs > div:nth-child(3) p { color: var(--color-ink); }

/* 24 four areas, a ruled cross */
.s-areas h2 { --c: 1 / 9; }
.quad { --c: 1 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.quad > div { padding: var(--space-lg) var(--space-xl) var(--space-lg) 0; border-top: var(--rule-hair) solid var(--color-rule-2); display: grid; gap: var(--space-xs); align-content: start; }
.quad > div:nth-child(even) { padding-left: var(--space-xl); padding-right: 0; border-left: var(--rule-hair) solid var(--color-rule); }
.quad h3 { font-size: var(--t-item-l); line-height: 1.1; }

/* 28 Maslow and Vroom */
.s-theory h2 { --c: 1 / 11; }
.s-theory .m { --c: 1 / 7; display: grid; gap: var(--space-md); }
.s-theory .v { --c: 8 / 13; display: grid; gap: var(--space-md); border-left: var(--rule-hair) solid var(--color-rule-2); padding-left: var(--space-xl); }
.pyr { display: grid; gap: var(--space-2xs); justify-items: start; }
.pyr div { padding: var(--space-sm) var(--space-md); background: var(--color-paper-2); border-radius: var(--radius-card); font: 600 var(--t-item)/1.1 var(--font-display); color: var(--color-ink); }
.pyr div:nth-child(1) { width: 58%; }
.pyr div:nth-child(2) { width: 72%; }
.pyr div:nth-child(3) { width: 86%; }
.pyr div:nth-child(4) { width: 100%; background: var(--tint-moss); }
.vroom { display: grid; gap: var(--space-xs); background: none; border: 0; }
.vroom .f { font: 600 var(--t-item)/1.2 var(--font-display); color: var(--color-ink); padding: 0; background: none; }
.vroom .f:nth-of-type(3) { background: none; }
.vroom .f:nth-of-type(5) { background: none; }
.vroom .x { display: block; font: 600 var(--t-body)/1 var(--font-display); color: var(--color-accent); background: none; padding: 0; }
.vroom .z { border-top: var(--rule-hair) solid var(--color-rule-2); padding: var(--space-sm) 0 0; font: 500 var(--t-body)/1.3 var(--font-body); color: var(--color-ink); background: none; }
.s-theory h3 { font-size: var(--t-item); }
.s-theory .nm { font-size: var(--t-body); }

/* 31 cycle */
.s-cyc h2 { --c: 1 / 10; }
.s-cyc figure { --c: 1 / 9; margin: 0; }
.s-cyc svg { width: 100%; height: auto; max-height: 58dvh; }
.cyc-n { fill: var(--color-paper-2); stroke: var(--color-rule-2); stroke-width: 1; }
.cyc-n.p { fill: var(--color-accent-2); stroke: var(--color-accent); }
.cyc-a { fill: none; stroke: var(--color-ink-2); stroke-width: 2; stroke-linecap: round; }
.cyc-h { fill: var(--color-ink-2); }
.cyc-t { font: 600 30px var(--font-display); fill: var(--color-ink); }
.s-cyc .r { --c: 10 / 13; display: grid; gap: var(--space-lg); align-self: center; }
.s-cyc .r p:not(.lead) { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); }

/* 33 closing, poster over the photograph */
.s-end { color: var(--color-paper); background: var(--color-ink); }
.s-end .bg { position: absolute; inset: 0; border-radius: 0; outline: 0; }
.s-end .bg img { object-position: 40% 50%; }
.s-end .scrim { position: absolute; inset: 0; z-index: 2; background: linear-gradient(90deg, var(--scrim) 0, var(--scrim) 48%, var(--scrim-soft) 100%); }
.s-end .in { position: relative; z-index: 3; min-height: 100%; align-content: center; }
.s-end h2 { --c: 1 / 9; color: var(--color-paper); font-size: var(--t-title); max-width: 10ch; line-height: 0.98; }
.s-end .lead { --c: 1 / 7; color: var(--color-paper); }
.s-end .in { row-gap: var(--space-xl); }


/* 4 team: a growth well, eight against sixty */
.s-team h2 { --c: 1 / 10; }
.grow { --c: 1 / 13; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); column-gap: var(--space-2xl); align-items: end; padding: var(--space-lg) var(--space-xl); }
.grow > div { display: grid; gap: var(--space-sm); }
.grow .a .fig { --fs: calc(var(--fit) * 11); }
.grow .b { border-left: var(--rule-hair) solid var(--color-rule-2); padding-left: var(--space-2xl); }
.grow .b .fig { --fs: calc(var(--fit) * 19); }
.s-team .lead { --c: 1 / 6; }
.s-team .depts { --c: 7 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-lg); }
.s-team .depts li { font: 600 var(--t-item)/1.15 var(--font-display); color: var(--color-ink); padding-block: var(--space-sm); border-top: var(--rule-hair) solid var(--color-rule); }

/* 5 five points: a descending cascade */
.s-five h2 { --c: 1 / 8; }
.five { --c: 1 / 13; counter-reset: p; display: grid; gap: var(--space-xs); }
.five li { counter-increment: p; display: flex; align-items: baseline; gap: var(--space-lg); font: 600 var(--t-item-l)/1.1 var(--font-display); color: var(--color-ink); }
.five li::before { content: counter(p); flex: none; min-width: 1.2em; font: 600 calc(var(--fit) * 6)/0.9 var(--font-display); letter-spacing: -0.02em; color: var(--color-muted); font-variant-numeric: oldstyle-nums proportional-nums; }
.five li:nth-child(2) { margin-left: 10%; } .five li:nth-child(3) { margin-left: 20%; } .five li:nth-child(4) { margin-left: 30%; }
.five li:nth-child(5) { margin-left: 40%; background: var(--tint-moss); padding: var(--space-sm) var(--space-lg); border-radius: var(--radius-card); }
.five li:nth-child(5)::before { color: var(--color-ink); }

/* 6 market: a leaf well, the figure over two measures */
.s-market h2 { --c: 1 / 10; }
.s-market .big { --c: 1 / 13; display: grid; gap: var(--space-lg); padding: var(--space-lg) var(--space-2xl); }
.s-market .top { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-2xl); align-items: end; }
.s-market .top .fig { --fs: calc(var(--fit) * 16); }
.s-market .top .lead { max-width: 28ch; }
.s-market .side { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-ink); }
.s-market .side > div { padding: var(--space-lg) var(--space-lg) 0 0; display: grid; gap: var(--space-xs); }
.s-market .side > div + div { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-ink); }
.s-market .side .fig { --fs: calc(var(--fit) * 7); }
.s-market .big p { color: var(--color-ink); }
.s-market .note { --c: 1 / 13; }

/* 8 small jobs: a quotation set as a poster */
.s-small h2 { --c: 1 / 9; }
.quote { --c: 1 / 11; margin: 0; display: grid; gap: var(--space-md); }
.quote .qm { font: 600 calc(var(--fit) * 10)/0.5 var(--font-display); color: var(--color-accent); height: 0.3em; }
.quote blockquote { margin: 0; font: 600 calc(var(--fit) * 4.2)/1.08 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: 20ch; text-wrap: balance; }
.stat { --c: 1 / 13; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-2xl); align-items: end; border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.stat .fig { --fs: calc(var(--fit) * 6.2); white-space: nowrap; line-height: 1; }
.stat > div { display: grid; gap: var(--space-sm); }

/* 9 price table */
.s-price h2 { --c: 1 / 8; }
.s-price .lead { --c: 9 / 13; align-self: end; font: 600 var(--t-item-l)/1.12 var(--font-display); color: var(--color-muted); }
.tbl { --c: 1 / 13; width: 100%; border-collapse: collapse; }
.tbl th { font: 500 var(--t-sm)/1.3 var(--font-body); color: var(--color-muted); text-align: left; padding: var(--space-sm) var(--space-md) var(--space-sm) 0; border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.tbl th:last-child, .tbl td.num { text-align: right; }
.tbl td { padding: var(--space-lg) var(--space-md) var(--space-lg) 0; border-bottom: var(--rule-hair) solid var(--color-rule); vertical-align: baseline; }
.tbl td.k { font: 600 var(--t-item-l)/1.1 var(--font-display); color: var(--color-ink); }
.tbl td.num { font: 600 var(--t-state)/1.1 var(--font-display); color: var(--color-ink); font-variant-numeric: lining-nums tabular-nums; padding-right: 0; }
.tbl td.num span { font: 400 var(--t-body)/1 var(--font-body); color: var(--color-muted); }
.tbl tr.hot td { background: var(--tint-clay); }
.tbl tr.hot td:first-child { padding-left: var(--space-md); }
.tbl tr.hot td:last-child { padding-right: var(--space-md); }
.s-price .note { --c: 1 / 13; }

/* 10 crowded: three figures of unequal weight under a clay band */
.s-crowd h2 { --c: 1 / 7; }
.s-crowd .ask { --c: 8 / 13; font: 600 var(--t-item-l)/1.12 var(--font-display); color: var(--color-muted); align-self: end; max-width: 16ch; }
.three { --c: 1 / 13; display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr) minmax(0, 1fr); align-items: end; }
.three > div { padding-inline: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule-2); display: grid; gap: var(--space-md); align-content: start; }
.three > div:first-child { padding-left: 0; border-left: 0; }
.three .fig { --fs: calc(var(--fit) * 7); }
.three > div:first-child .fig { --fs: calc(var(--fit) * 12); }
.s-crowd .well { --c: 1 / 13; padding: var(--space-lg) var(--space-xl); }
.s-crowd .well p { max-width: 70ch; font-size: var(--t-lead); line-height: 1.4; color: var(--color-ink); }

/* 11 reviews: two voices, staggered */
.s-reviews h2 { --c: 1 / 11; }
.s-reviews article { display: grid; gap: var(--space-md); align-content: start; }
.s-reviews .r1 { --c: 1 / 8; --r: 2; border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); }
.s-reviews .r2 { --c: 8 / 13; --r: 2; margin-top: calc(var(--fit) * 4); }
.s-reviews .qm { font: 600 calc(var(--fit) * 9)/0.6 var(--font-display); color: var(--color-accent); height: 0.42em; }
.s-reviews p { font: 500 var(--t-item-l)/1.2 var(--font-display); color: var(--color-ink); letter-spacing: var(--tracking-display); max-width: 28ch; }
.s-reviews .r1 p { font-size: var(--t-item-l); line-height: 1.12; max-width: 28ch; }
.s-reviews h3 { font: 500 var(--t-body)/1.3 var(--font-body); color: var(--color-ink); }
.s-reviews .when { font: 400 var(--t-sm)/1.3 var(--font-body); color: var(--color-muted); }

/* 12 where: type and a two-district diagram, no photograph */
.s-where h2 { --c: 1 / 9; }
.map { --c: 1 / 8; margin: 0; display: grid; gap: var(--space-md); }
.map .city { font: 600 calc(var(--fit) * 11)/0.9 var(--font-display); letter-spacing: -0.02em; color: var(--color-ink); }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); height: calc(var(--fit) * 17); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); overflow: hidden; }
.d { display: flex; align-items: end; padding: var(--space-md); font: 500 var(--t-sm)/1 var(--font-body); color: var(--color-ink); background-color: var(--tint-moss); background-image: linear-gradient(var(--color-rule) 1px, transparent 1px), linear-gradient(90deg, var(--color-rule) 1px, transparent 1px); background-size: calc(var(--fit) * 2.2) calc(var(--fit) * 2.2); }
.d2 { background-color: var(--color-accent-2); border-left: 2px solid var(--color-accent); }
.s-where .t { --c: 9 / 13; align-self: end; display: grid; gap: var(--space-lg); }
.s-where .stmt { font: 600 var(--t-item-l)/1.15 var(--font-display); color: var(--color-ink); max-width: 18ch; border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); }

/* 13 Olga: four lines, each larger than the last */
.s-olga h2 { --c: 1 / 9; }
.olga { --c: 1 / 13; counter-reset: o; display: grid; gap: var(--space-md); }
.olga li { counter-increment: o; display: grid; grid-template-columns: calc(var(--fit) * 5) minmax(0, 1fr); column-gap: var(--space-lg); align-items: baseline; }
.olga li::before { content: counter(o); font: 600 var(--t-item-l)/1 var(--font-display); color: var(--color-muted); font-variant-numeric: oldstyle-nums proportional-nums; }
.olga p { font: 600 var(--t-item)/1.12 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: none; }
.olga li:nth-child(2) p { font-size: var(--t-item-l); }
.olga li:nth-child(3) p { font-size: calc(var(--fit) * 4.2); }
.olga li:last-child { background: var(--tint-moss); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-card); margin-top: var(--space-sm); }
.olga li:last-child p { font-size: var(--t-state); line-height: 1.04; max-width: 28ch; }

/* 14 customer: the figure, and three pains in their own tints */
.s-cust h2 { --c: 1 / 9; }
.s-cust .l { --c: 1 / 7; display: grid; gap: var(--space-lg); align-content: start; }
.s-cust .l .fig { --fs: calc(var(--fit) * 15); }
.pains { --c: 8 / 13; display: grid; gap: var(--space-sm); align-self: stretch; }
.pains li { font: 600 var(--t-item)/1.2 var(--font-display); color: var(--color-ink); padding: var(--space-lg); border-radius: var(--radius-card); display: flex; align-items: center; background: var(--color-paper-2); }
.pains li:nth-child(2) { background: var(--tint-moss); margin-left: var(--space-xl); }
.pains li:nth-child(3) { background: var(--tint-clay); margin-left: calc(var(--space-xl) * 2); }

/* 16 competitors: the main rival as a band, three more beneath */
.s-rival h2 { --c: 1 / 10; }
.s-rival .lead-t { --c: 1 / 13; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--space-2xl); align-items: center; padding: var(--space-xl) var(--space-2xl); }
.s-rival .lead-t h3 { font-size: var(--t-state); max-width: 12ch; line-height: 1.04; }
.s-rival .lead-t p { font-size: var(--t-lead); max-width: 34ch; }
.s-rival .t { display: grid; gap: var(--space-xs); border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); align-content: start; }
.s-rival .t:nth-child(3) { --c: 1 / 6; } .s-rival .t:nth-child(4) { --c: 6 / 9; } .s-rival .t:nth-child(5) { --c: 9 / 13; }

/* 17 strong brand: one figure, very large */
.s-brand h2 { --c: 1 / 9; }
.s-brand .fig { --c: 1 / 8; --fs: calc(var(--fit) * 26); color: var(--color-accent); border-bottom: var(--rule-hair) solid var(--color-rule-2); padding-bottom: var(--space-md); }
.s-brand .t { --c: 8 / 13; align-self: end; display: grid; gap: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); padding-bottom: var(--space-md); }
.s-brand .in { align-items: end; }
.s-brand h2 { align-self: start; }

/* 18 porter: the matrix carries the slide */
.s-porter h2 { --c: 1 / 11; }
.porter { --c: 1 / 9; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); }
.porter > div { min-height: calc(var(--fit) * 15); padding: var(--space-lg); display: grid; align-content: space-between; gap: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.porter > div:nth-child(odd) { border-right: var(--rule-hair) solid var(--color-rule-2); }
.porter > div:nth-last-child(-n+2) { border-bottom: 0; }
.porter h3 { font-size: var(--t-item-l); line-height: 1.1; overflow-wrap: normal; hyphens: none; }
.porter .pick { background: var(--tint-moss); }
.porter .pick p { font: 500 var(--t-body)/1.2 var(--font-body); color: var(--color-accent); }
.s-porter .l { --c: 9 / 13; display: grid; gap: var(--space-lg); align-self: end; }
.s-porter .lead { font-size: var(--t-body); max-width: 44ch; }
.s-porter .trap { font: 600 var(--t-item-l)/1.15 var(--font-display); color: var(--color-ink); border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); max-width: 20ch; }

/* 19 why: the statement in a well, three terms under it */
.s-why h2 { --c: 1 / 10; }
.s-why .stmt { --c: 1 / 13; font: 600 var(--t-state)/1.06 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: none; padding: var(--space-lg) var(--space-xl); }
.s-why .row3 { --c: 1 / 13; display: grid; }
.row3 > div { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: var(--gap-columns); align-items: baseline; padding-block: var(--space-md); border-top: var(--rule-hair) solid var(--color-rule); }
.row3 > div:first-child { border-top: var(--rule-hair) solid var(--color-rule-2); }
.row3 b { font: 600 var(--t-item)/1.15 var(--font-display); }
.s-why .row3 p { max-width: 52ch; }

/* 22 resources: the sum, then the plan as a wide table */
.s-res h2 { --c: 1 / 9; }
.gap { --c: 1 / 13; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-2xl); align-items: end; border-bottom: var(--rule-hair) solid var(--color-rule-2); padding-bottom: var(--space-lg); }
.gap .fig { --fs: calc(var(--fit) * 14); white-space: nowrap; }
.gap .lead { max-width: 34ch; }
.s-res .tbl td { font: 600 var(--t-item)/1.2 var(--font-display); color: var(--color-ink); padding: var(--space-md) var(--space-lg) var(--space-md) 0; vertical-align: top; border-bottom: 0; }
.s-res .tbl { table-layout: fixed; }
.s-res .tbl th { padding-right: var(--space-lg); }
.s-res .tbl th:last-child { text-align: left; }

/* 23 management: three words as a poster */
.s-sys h2 { --c: 1 / 8; }
.s-sys > .in > .lead, .s-sys .in > .lead { --c: 8 / 13; }
.words { --c: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: var(--rule-hair) solid var(--color-rule-2); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.words span { font: 600 calc(var(--fit) * 5.6)/1.1 var(--font-display); color: var(--color-ink); padding: var(--space-lg) 0; letter-spacing: var(--tracking-display); overflow-wrap: normal; }
.words span + span { padding-left: var(--space-lg); border-left: var(--rule-hair) solid var(--color-rule); }
.s-sys .every { --c: 1 / 7; font: 600 var(--t-item-l)/1.15 var(--font-display); color: var(--color-ink); align-self: center; }
.stand { --c: 8 / 13; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--space-lg); align-items: end; padding: var(--space-lg) var(--space-xl); }
.stand .fig { --fs: calc(var(--fit) * 11); }

/* 26 pays back: the figure large, the reasons as plain prose */
.s-pay h2 { --c: 1 / 9; }
.s-pay .st { --c: 1 / 7; display: grid; gap: var(--space-lg); align-content: start; }
.s-pay .st .fig { --fs: calc(var(--fit) * 17); white-space: nowrap; color: var(--color-accent); }
.s-pay .pr { --c: 8 / 13; display: grid; gap: var(--space-lg); align-content: center; align-self: stretch; }
.s-pay .pr p { font-size: var(--t-lead); line-height: 1.4; max-width: 36ch; color: var(--color-ink); }

/* 27 democratic style: two wells, side by side */
.s-style .hd { --c: 1 / 11; display: grid; gap: var(--space-lg); }
.s-style .hd h2 { max-width: none; font-size: var(--t-state); }
.s-style .l { --c: 1 / 8; align-self: stretch; display: grid; align-content: center; padding: var(--space-xl); }
.s-style .l li { font: 600 var(--t-item)/1.2 var(--font-display); color: var(--color-ink); padding-block: var(--space-md); border-bottom: var(--rule-hair) solid var(--color-rule-2); }
.s-style .l li:last-child { border-bottom: 0; }
.s-style .cost { --c: 8 / 13; align-self: stretch; display: grid; gap: var(--space-sm); align-content: center; }
.s-style .cost h3 { font-size: var(--t-item-l); }

/* 28 conversation: a long statement, two reasons stepped */
.s-conv .in { align-content: center; min-height: 100%; row-gap: var(--space-2xl); }
.s-conv h2 { --c: 1 / 12; font-size: var(--t-state); max-width: 26ch; line-height: 1.06; }
.facts { --c: 1 / 13; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gap-columns); }
.facts { align-items: stretch; }
.facts > div { border-radius: var(--radius-card); padding: var(--space-lg) var(--space-xl); display: grid; gap: var(--space-xs); align-content: start; }
.facts .f1 { grid-column: 1 / 7; background: var(--tint-moss); }
.facts .f2 { grid-column: 7 / 13; background: var(--tint-clay, var(--color-paper-2)); }
.facts b { font: 600 var(--t-item)/1.15 var(--font-display); color: var(--color-ink); }

/* 30 effort into pay: one large tile and two small */
.s-payx h2 { --c: 1 / 9; }
.bento { --c: 1 / 13; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-rows: auto auto; gap: var(--space-md); }
.bento .t1 { grid-row: 1 / span 2; display: grid; align-content: center; gap: var(--space-md); padding: var(--space-xl) var(--space-2xl); }
.bento .t1 h3 { font-size: var(--t-state); line-height: 1.04; max-width: 14ch; }
.bento .t1 p { font-size: var(--t-lead); max-width: 34ch; }
.bento .t2, .bento .t3 { display: grid; gap: var(--space-xs); align-content: center; }
.bento h3 { font-size: var(--t-item-l); line-height: 1.1; }

/* 31 growth: the working week as a wide band */
.s-grow h2 { --c: 1 / 10; }
.week { --c: 1 / 13; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--space-2xl); row-gap: var(--space-sm); align-items: baseline; }
.week ol { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border: var(--rule-hair) solid var(--color-rule-2); border-radius: var(--radius-card); overflow: hidden; }
.week li { height: calc(var(--fit) * 10); display: flex; align-items: end; padding: var(--space-sm) var(--space-md); font: 500 var(--t-sm)/1 var(--font-body); color: var(--color-muted); border-left: var(--rule-hair) solid var(--color-rule-2); }
.week li:first-child { border-left: 0; }
.week li.on { background: var(--color-accent-2); color: var(--color-ink); }
.week h3 { font-size: var(--t-item-l); margin-top: var(--space-sm); }
.s-grow .l { --c: 1 / 13; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-2xl); }
.s-grow .l > div { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); display: grid; gap: var(--space-xs); align-content: start; }
.s-grow .l h3 { font-size: var(--t-item-l); line-height: 1.1; }

/* 33 summary: three terms, then the line in a leaf well */
.s-sum h2 { --c: 1 / 10; }
.rows2 { --c: 1 / 13; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--space-xl); }
.rows2 li { border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); display: grid; gap: var(--space-xs); align-content: start; }
.rows2 b { font: 600 var(--t-item)/1.15 var(--font-display); }
.s-sum .stmt { --c: 1 / 13; font: 600 var(--t-state)/1.06 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); max-width: none; padding: var(--space-xl); }
.s-sum .stmt p { font: inherit; }

@media (max-height: 780px) and (min-width: 60.01rem) {
  .in { row-gap: var(--space-md); padding-bottom: var(--space-md); }
  .s-why .stmt, .s-sum .stmt { padding-block: var(--space-md); }
  .grow { padding-block: var(--space-md); }
  .tbl td { padding-block: var(--space-md); }
}
@media (max-width: 60rem) {
  :root { --fit: min(1.35vw, 1.6dvh); --chrome-h: 3rem; }
  .in { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); padding-bottom: max(var(--space-xl), calc(env(safe-area-inset-bottom) + 28px)); padding-inline: var(--gutter); }
  .in > * { grid-column: 1 / -1; grid-row: auto; }
  .s-hook .stage { position: static; width: auto; grid-column: 1 / -1; min-height: 36dvh; height: 40dvh; padding: 0; }
  .s-hook .in { padding-bottom: var(--space-md); min-height: 0; margin-block: 0; }
  .s-hook .stage { padding-inline: var(--gutter); padding-bottom: var(--space-lg); }
  .s-hook { overflow-y: auto; }
    .s-hook .stage .ph { border-radius: var(--radius-card); }
  .dl { position: static; justify-self: start; margin-left: 4px; }
  .cols4 { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-lg); }
  .cols4 > div:nth-child(3) { padding-left: 0; border-left: 0; }
  .grow { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); padding: var(--space-lg); }
  .grow .b { border-left: 0; padding-left: 0; border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); }
  .s-team .depts { grid-template-columns: minmax(0, 1fr); }
  .five li:nth-child(n) { margin-left: 0; }
  .five li:nth-child(n+2) { margin-left: 6%; } .five li:nth-child(n+3) { margin-left: 12%; } .five li:nth-child(n+4) { margin-left: 18%; } .five li:nth-child(n+5) { margin-left: 24%; }
  .five li:nth-child(5) { padding: var(--space-sm) var(--space-md); }
  .s-market .big { padding: var(--space-lg); gap: var(--space-lg); }
  .s-market .top { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .stat { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); margin-right: 0; }
  .stat .fig { white-space: normal; overflow-wrap: break-word; }
  .s-price .lead { font-size: var(--t-lead); }
  .three, .s-sum .rows2 { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .three > div { padding-left: 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); }
  .pillars { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .s-reviews .r2 { margin-top: 0; }
  .duo { height: calc(var(--fit) * 20); }
  .olga li { grid-template-columns: 2.25rem minmax(0, 1fr); }
  .olga li:last-child p { font-size: var(--t-state); }
  .pains li:nth-child(n) { margin-left: 0; }
  .s-rival .lead-t { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); padding: var(--space-lg); }
  .s-rival .t:nth-child(n+3) { --c: 1 / -1; }
  .s-brand .fig { --fs: calc(var(--fit) * 22); }
  .s-why .stmt { padding: var(--space-lg); }
  .row3 > div { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-2xs); }
  .gap { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-md); }
  .s-res .tbl, .s-res .tbl tbody, .s-res .tbl thead, .s-res .tbl tr, .s-res .tbl th, .s-res .tbl td { display: block; }
  .s-res .tbl tr { display: grid; grid-template-columns: minmax(0, 1fr); }
  .s-res .tbl thead { display: none; }
  .s-res .tbl td { border-top: var(--rule-hair) solid var(--color-rule); padding-block: var(--space-sm); }
  .s-res .tbl td::before { content: attr(data-l); display: block; font: 500 var(--t-sm)/1.3 var(--font-body); color: var(--color-muted); }
  .words { grid-template-columns: minmax(0, 1fr); }
  .words span + span { padding-left: 0; border-left: 0; border-top: var(--rule-hair) solid var(--color-rule); }
  .stand { padding: var(--space-lg); }
  .stand { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-sm); }
  .s-style .l { padding: var(--space-lg); }
  .facts { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .facts .f1, .facts .f2 { grid-column: 1 / -1; margin-top: 0; }
  .bento { grid-template-columns: minmax(0, 1fr); }
  .bento .t1 { grid-row: auto; padding: var(--space-lg); }
  .week { grid-template-columns: minmax(0, 1fr); }
  .s-grow .l { grid-template-columns: minmax(0, 1fr); row-gap: var(--space-lg); }
  .s-sum .stmt { padding: var(--space-lg); }
  .s-porter .porter, .porter { grid-column: 1 / -1; }
  .stairs > div:nth-child(n) { margin-right: 0; }
  .quad { grid-template-columns: minmax(0, 1fr); }
  .quad > div:nth-child(even) { padding-left: 0; border-left: 0; }
  .quad > div { padding-right: 0; }
  .s-theory .v { border-left: 0; padding-left: 0; border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-lg); }
  .plans { border-radius: var(--radius-card); }
  .s-end .scrim { background: var(--scrim); }
  .s-doc h2 { font-size: var(--t-state); }
  .strip .track { height: 3rem; }
}
@media (max-width: 40rem) {
  .week li { height: 3.5rem; padding-inline: var(--space-2xs); }
  .names { grid-template-columns: minmax(0, 1fr); }
  .porter { grid-template-columns: minmax(0, 1fr); }
  .porter > div:nth-child(odd) { border-right: 0; }
  .porter > div:nth-last-child(-n+2) { border-bottom: var(--rule-hair) solid var(--color-rule-2); }
  .porter > div:last-child { border-bottom: 0; }
  .plans { grid-template-columns: minmax(0, 1fr); border-radius: var(--radius-card); }
  .plans > div { border-left: 0; border-top: var(--rule-hair) solid var(--color-rule-2); }
  .plans > div:first-child { border-top: 0; }
  .cols4 { grid-template-columns: minmax(0, 1fr); }
  .cols4 > div { border-left: 0; padding-left: 0; border-top: var(--rule-hair) solid var(--color-rule-2); padding-top: var(--space-md); }
  .cols4 > div:first-child { border-top: 0; padding-top: 0; }
}
@media (prefers-reduced-motion: reduce) { a { transition: none; } }

/* download button (slide 1) */
.dl { position: absolute; top: calc(var(--chrome-h) + var(--space-md)); right: calc(max(0px, (100% - var(--container)) / 2) + var(--gutter)); z-index: 2; display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--space-lg); font: 600 var(--text-md)/1 var(--font-body); color: var(--color-accent-ink); background: var(--color-accent); border: 1px solid var(--color-accent); border-radius: var(--radius-card); text-decoration: none; }
.dl:hover { background: var(--color-accent-2); color: var(--color-ink); }
.dl:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 3px; }
@media (max-width: 40rem) { .dl { position: static; justify-self: start; } }