/* Kinsake landing v4 · direction "The split stage" (seed 1162741831)
   Type: Imbue (display) / Albert Sans (text), self-hosted, SIL OFL 1.1 (see fonts/OFL-*.txt).
   Palette: Forest and lime. Light theme is derived from the palette's own white field and forest ink. */

@font-face {
  font-family: "Imbue";
  src: url("fonts/imbue-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Albert Sans";
  src: url("fonts/albert-sans-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- tokens ---------- */
:root {
  color-scheme: light;
  --bg: #ffffff;
  --surface: #eef1ea;
  --ink: #0f1f10;
  --muted: #4b574c;
  --accent: #c6f19d;
  --accent-ink: #0f1f10;
  --f1: #0f1f10;  --f1-ink: #ffffff;  --f1-muted: #a9b2a9;  --f1-step: #1a2e1b;
  --f2: #eef1ea;  --f2-ink: #0f1f10;  --f2-muted: #4b574c;
  --stage-bg: #e3e8de;
  --lv-e: #0f1f10;  --lv-i: #7c897d;  --lv-d: #c3cbc1;

  /* the product's own interface, the same in both themes */
  --ui-bg: #ffffff;
  --ui-ink: #0f1f10;
  --ui-soft: #566257;
  --ui-line: #dde3d8;
  --ui-fill: #f1f4ee;
  --ui-lime: #c6f19d;

  --font-display: "Imbue", "Didot", "Bodoni 72", Georgia, serif;
  --font-text: "Albert Sans", "Helvetica Neue", Arial, sans-serif;

  --step-small: clamp(0.8125rem, 0.79rem + 0.1vw, 0.875rem);
  --step-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
  --step-lead: clamp(1.25rem, 1.1rem + 0.5vw, 1.5rem);
  --step-head: clamp(2.25rem, 0.9rem + 3.6vw, 4.5rem);
  --step-display: clamp(6.25rem, min(28vw, 44svh), 34rem);

  --margin: clamp(1rem, 2.2vw, 2rem);
  --gutter: clamp(1rem, 2vw, 2rem);
  --pad: clamp(2rem, 4.6vw, 4.5rem);
  --field-pad: clamp(1.25rem, 4.2vw, 4rem);
  --section: clamp(6rem, 11vw, 10rem);
  --radius: 0px;

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-soft: cubic-bezier(0.33, 1, 0.68, 1);
  --t-press: 140ms;
  --t-hover: 180ms;
  --t-ui: 240ms;
  --t-reveal: 800ms;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0f1f10;
    --surface: #162a17;
    --ink: #ffffff;
    --muted: #9aa39a;
    --f1: #000000;  --f1-ink: #ffffff;  --f1-muted: #a3a8a3;  --f1-step: #141714;
    --f2: #ffffff;  --f2-ink: #0f1f10;  --f2-muted: #4b574c;
    --stage-bg: #162a17;
    --lv-e: #c6f19d;  --lv-i: #ffffff;  --lv-d: #6f7c70;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0f1f10;
  --surface: #162a17;
  --ink: #ffffff;
  --muted: #9aa39a;
  --f1: #000000;  --f1-ink: #ffffff;  --f1-muted: #a3a8a3;  --f1-step: #141714;
  --f2: #ffffff;  --f2-ink: #0f1f10;  --f2-muted: #4b574c;
  --stage-bg: #162a17;
  --lv-e: #c6f19d;  --lv-i: #ffffff;  --lv-d: #6f7c70;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-text); font-size: var(--step-body); line-height: 1.55; font-kerning: normal; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
h1, h2, h3, p, figure, ul, ol, fieldset, legend { margin: 0; padding: 0; }
ul { list-style: none; }
img, video { display: block; max-width: 100%; height: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
a { color: inherit; }
:target { scroll-margin-top: 2rem; }
::selection { background: var(--accent); color: var(--accent-ink); }
:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }
p { text-wrap: pretty; }
h1, h2, h3 { text-wrap: balance; hyphens: none; font-weight: 400; }
b { font-weight: 500; }

.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 1rem; top: -6rem; z-index: 50; background: var(--accent); color: var(--accent-ink); padding: 0.75rem 1rem; text-decoration: none; }
.skip:focus { top: 1rem; }

/* ---------- type ---------- */
.head { font-family: var(--font-display); font-size: var(--step-head); line-height: 0.95; letter-spacing: -0.005em; text-transform: uppercase; font-optical-sizing: auto; }

/* ---------- controls ---------- */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0 1.25rem; background: var(--accent); color: var(--accent-ink); border-radius: var(--radius); font-weight: 500; text-decoration: none; white-space: nowrap; transition: transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, color var(--t-hover) ease; }
.button:active { transform: scale(0.97); }
.button--small { min-height: 2.5rem; padding: 0 1rem; font-size: var(--step-small); }
.button:focus-visible { outline-color: var(--ink); }
.link { text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; transition: text-decoration-color var(--t-hover) ease; }
.link-plain { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
@media (hover: hover) and (pointer: fine) {
  .button:hover { background-color: var(--ink); color: var(--bg); }
  .link:hover { text-decoration-color: currentColor; }
}

/* level dots: Emergency, Incapacity, After death */
.dot { display: inline-block; flex: none; width: 1rem; aspect-ratio: 1; border-radius: 50%; background: var(--lv-i); vertical-align: -0.12em; }
.dot--e { background: var(--lv-e); }
.dot--i { background: var(--lv-i); }
.dot--d { background: var(--lv-d); }

/* ---------- the split stage ---------- */
.chapter { position: relative; }
.stage__frame { display: flex; flex-direction: column; }
.stage__pic { position: relative; overflow: hidden; background: var(--stage-bg); }
.stage__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms ease; }
.stage__img.is-on { opacity: 1; }
.chapter--one .stage__img { object-position: 50% 40%; }
.stage__cap { position: relative; min-height: 2.6em; padding-top: 0.6rem; font-size: var(--step-small); line-height: 1.4; color: var(--muted); }
.stage__cap .cap { position: absolute; left: 0; top: 0.6rem; opacity: 0; transition: opacity 600ms ease; }
.stage__cap .cap.is-on { opacity: 1; }
.shot { transition: opacity 700ms ease, transform 700ms var(--ease-out); }

@media (min-width: 64em) {
  .chapter { display: grid; grid-template-columns: 47% 53%; }
  .stage { position: sticky; top: 0; height: 100svh; padding: 20px 0 20px 20px; align-self: start; }
  .stage__frame { height: 100%; }
  .stage__pic { flex: 1; }
  .stage__ui { position: absolute; top: 52px; left: 52px; width: min(340px, 72%); }
  .stage__ui .shot { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(10px); pointer-events: none; }
  .stage__ui .shot.is-on { opacity: 1; transform: none; }
  .column { min-width: 0; padding: 0 var(--margin) 0 var(--pad); }
}

/* ---------- hero ---------- */
.nav { display: flex; align-items: center; gap: 1.75rem; font-size: var(--step-small); }
.nav__links { display: flex; gap: 1.75rem; }
.nav__links a { text-decoration-color: transparent; }
.nav__menu { display: none; }
/* the way home: the K monogram at the start of the bar, in the ink so it follows the theme */
.nav__home { display: inline-flex; align-items: center; color: var(--ink); text-decoration: none; }
.nav__home .mark { display: block; width: auto; height: 2rem; fill: currentColor; }
.hero__line { font-size: var(--step-lead); line-height: 1.32; }
.hero__note { margin-top: 1rem; font-size: var(--step-small); color: var(--muted); max-width: 34ch; }
.hero__name { font-family: var(--font-display); font-size: var(--step-display); line-height: 0.8; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; font-optical-sizing: auto; color: var(--ink); }
/* the wordmark's text box reaches about 80px above and below its letters (Imbue's tall ascent), so it is clipped to its own
   box, where the letters already sit, and never takes the pointer or a text selection from the button or the line beside it */
.hero__name { overflow: clip; pointer-events: none; -webkit-user-select: none; user-select: none; }

@media (min-width: 64em) {
  /* the copy and the name stay in the flow, so on a short window the hero grows instead of the name covering the button */
  .hero { position: relative; display: flex; flex-direction: column; min-height: 100svh; padding-bottom: 40px; }
  .nav--home .nav__home { margin-right: auto; }
  .hero__copy { align-self: center; width: min(26ch, 100%); margin-bottom: 2.5rem; }
  .hero__name { align-self: flex-end; margin-top: auto; position: relative; z-index: 3; transform-origin: 100% 100%; }
}
/* the bar stays in reach: on a twenty-screen page the menu and the form are always one tap away. It has the page's
   own ground and no line or shadow; on desktop it covers only the reading column, so the photograph keeps its half,
   and its items start 20px down, on the photograph's top edge. */
.nav--home { position: fixed; top: 0; z-index: 30; background: var(--bg); }
html { scroll-padding-top: 5rem; }
@media (min-width: 64em) {
  .nav--home { left: 47%; right: 0; padding: 20px var(--margin) 16px var(--pad); transition: translate 260ms var(--ease-out), visibility 0s; }
  html { scroll-padding-top: 6.5rem; }
  /* site.js: over a full-width band (the privacy showcase, the binder band, the questions, the letter, the form, the footer)
     a half-width bar would cut the band, so it steps up out of the way and comes back in the next split chapter */
  .nav--home.is-away { translate: 0 -100%; visibility: hidden; transition: translate 260ms var(--ease-out), visibility 0s 260ms; }
}
@media (prefers-reduced-motion: reduce) { .nav--home, .nav--home.is-away { transition: none; } }
/* from 1024 to about 1110px wide the five links and the button don't fit the half-width bar at the usual spacing */
@media (min-width: 64em) and (max-width: 74.99em) {
  .nav, .nav__links { gap: 1.1rem; }
}

/* ---------- the File (two-ended rows) ---------- */
.file { padding: clamp(4rem, 8vw, 7.5rem) 0 var(--section); }
.file__intro { margin-top: 1.5rem; max-width: 44ch; }
.levels { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin-top: 1.75rem; font-size: var(--step-small); color: var(--muted); }
.levels span { display: inline-flex; align-items: center; gap: 0.5rem; }
.groups { margin-top: 2.5rem; max-width: 520px; }
.group + .group { margin-top: 2.5rem; }
.group__name { color: var(--muted); margin-bottom: 0.5rem; }
.row { display: grid; grid-template-columns: 1rem minmax(0, 1fr) auto; column-gap: 0.625rem; align-items: start; padding-block: 0.4rem; }
.row .dot { margin-top: calc((1.45em - 1rem) / 2); }
.row__name { line-height: 1.45; }
.row__detail { display: block; font-size: var(--step-small); color: var(--muted); }
.row__value { padding-top: 0.2em; font-size: var(--step-small); color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---------- showcase: the live thing ---------- */
.showcase { display: grid; grid-template-columns: 1fr 1fr; }
.showcase__in { grid-area: 1 / 1; background: var(--f1); color: var(--f1-ink); min-height: 90svh; }
.showcase__out { grid-area: 1 / 2; background: var(--f2); color: var(--f2-ink); min-height: 90svh; }
.showcase__inner { padding: 24svh var(--field-pad) 9rem; }
.showcase__label { display: block; margin-bottom: 0.875rem; color: var(--f1-muted); }
.showcase__text { display: block; width: 100%; max-width: 34ch; min-height: 9em; padding: 1rem 1.125rem; background: var(--f1-step); color: var(--f1-ink); border: 0; border-radius: var(--radius); font-size: var(--step-lead); line-height: 1.4; resize: vertical; }
.showcase__text:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.showcase__note { margin-top: 1.25rem; max-width: 42ch; color: var(--f1-muted); }
.showcase__head { display: contents; }
.showcase__h { position: relative; z-index: 1; grid-row: 1; align-self: end; margin-bottom: 2rem; font-family: var(--font-display); font-size: var(--step-head); line-height: 0.95; text-transform: uppercase; font-optical-sizing: auto; }
.showcase__h--in { grid-column: 1; justify-self: start; margin-left: var(--field-pad); color: var(--f1-ink); background: var(--f1); }
.showcase__h--out { grid-column: 2; justify-self: end; margin-right: var(--field-pad); color: var(--f2-ink); background: var(--f2); }

/* ---------- the product's own interface (cropped fragments) ---------- */
[data-ui] { --lv-e: #0f1f10; --lv-i: #7c897d; --lv-d: #c3cbc1; font-family: var(--font-text); color: var(--ui-ink); font-size: 14px; line-height: 1.4; text-align: left; }
.ui[data-ui] { background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 12px; padding: 16px 18px; }
[data-ui] .ui__top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-bottom: 8px; color: var(--ui-soft); font-size: 13px; }
[data-ui] .ui__strong { color: var(--ui-ink); font-size: 15px; font-weight: 500; }
[data-ui] .ui__rows li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--ui-line); }
[data-ui] .ui__rows li > span:last-child { color: var(--ui-soft); white-space: nowrap; font-variant-numeric: tabular-nums; }
[data-ui] .ui__rows em { font-style: normal; color: var(--ui-soft); margin-left: 6px; }
[data-ui] .ui__rows .dot { width: 9px; margin-right: 4px; vertical-align: 0; }
[data-ui] .ui__step { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; padding: 12px 14px; background: var(--ui-lime); border-radius: 10px; }
[data-ui] .ui__soft { font-size: 12.5px; color: #314232; }
[data-ui] .ui__task { font-size: 16px; font-weight: 500; }
[data-ui] .ui__actions { display: flex; gap: 6px; margin-top: 4px; }
[data-ui] .ui__btn { display: inline-block; padding: 6px 12px; border-radius: 7px; background: var(--ui-ink); color: #ffffff; font-size: 13px; font-weight: 500; }
[data-ui] .ui__btn--quiet { background: transparent; color: var(--ui-ink); }
[data-ui] .ui__foot { display: flex; justify-content: space-between; gap: 12px; margin-top: 10px; font-size: 13px; color: var(--ui-soft); }
[data-ui] .ui__mailhead { display: flex; justify-content: space-between; align-items: center; color: var(--ui-soft); font-size: 13px; }
[data-ui] .ui__from { display: inline-flex; align-items: center; gap: 8px; }
[data-ui] .ui__appicon { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 6px; background: var(--ui-ink); color: var(--ui-lime); }
[data-ui] .ui__appicon .mark { width: 15px; height: auto; fill: currentColor; }
[data-ui] .ui__subject { margin-top: 8px; font-size: 17px; font-weight: 500; }
[data-ui] .ui__body { margin-top: 6px; color: var(--ui-ink); }
[data-ui] .ui__fine { display: block; margin-top: 10px; font-size: 12.5px; color: var(--ui-soft); }
[data-ui] .ui__closed { color: var(--ui-soft); }
[data-ui] .ui__sum { font-weight: 500; }
[data-ui] .ui__sum > span:last-child { color: var(--ui-ink) !important; }
[data-ui] .ui__checks .is-done > span:first-child { color: var(--ui-soft); text-decoration: line-through; text-decoration-thickness: 1px; }
[data-ui].ui--mini { width: 100%; max-width: 300px; padding: 14px 16px; }
[data-ui].ui--mini .ui__step { margin-top: 0; }
[data-ui].ui--mini.ui__step, [data-ui].ui--mini > .ui__soft:first-child { display: block; }
[data-ui].ui--sheet { border-radius: 2px; }
[data-ui].ui--sheet .ui__rows { margin-top: 8px; }

/* the live thing */
.lt[data-ui] { max-width: 500px; padding: 18px; background: var(--ui-bg); border: 1px solid var(--ui-line); border-radius: 14px; }
[data-ui] .lt__switch { border: 0; margin: 0 0 16px; padding: 0; min-width: 0; }
[data-ui] .lt__switch legend { padding: 0; margin-bottom: 8px; font-size: 13px; color: var(--ui-soft); }
[data-ui] .lt__segs { display: flex; gap: 4px; padding: 4px; background: var(--ui-fill); border-radius: 10px; }
[data-ui] .lt__seg { position: relative; flex: 1; }
[data-ui] .lt__seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
[data-ui] .lt__seg span { display: block; padding: 9px 8px; border-radius: 7px; text-align: center; font-size: 14px; font-weight: 500; color: var(--ui-soft); transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
[data-ui] .lt__seg input:checked + span { background: var(--ui-ink); color: #ffffff; }
[data-ui] .lt__seg input:focus-visible + span { outline: 2px solid var(--ui-ink); outline-offset: 2px; }
[data-ui] .lt__view { display: none; }
[data-ui].lt:has(input[value="you"]:checked) .lt__view--you,
[data-ui].lt:has(input[value="server"]:checked) .lt__view--server,
[data-ui].lt:has(input[value="maya"]:checked) .lt__view--maya { display: block; animation: lt-in 320ms var(--ease-out); }
[data-ui] .lt__meta { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-size: 13px; color: var(--ui-soft); }
[data-ui] .lt__meta b { color: var(--ui-ink); font-weight: 500; }
[data-ui] .lt__title, [data-ui] .lt__line { font-size: 22px; line-height: 1.25; font-weight: 500; overflow-wrap: anywhere; }
[data-ui] .lt__date { margin-top: 4px; font-size: 15px; color: var(--ui-soft); }
[data-ui] .lt__details { margin-top: 12px; padding: 12px 14px; background: var(--ui-fill); border-radius: 9px; font-size: 15px; line-height: 1.5; overflow-wrap: anywhere; }
[data-ui] .lt__sealed { margin-top: 12px; padding: 12px 14px; background: var(--ui-fill); border-radius: 9px; font-size: 15px; line-height: 1.5; color: var(--ui-soft); }
[data-ui] .lt__toggle { display: flex; align-items: center; gap: 10px; margin-top: 14px; font-size: 15px; cursor: pointer; }
[data-ui] .lt__toggle input { width: 20px; height: 20px; margin: 0; accent-color: var(--ui-ink); }
[data-ui] .lt__note { margin-top: 12px; font-size: 14px; color: var(--ui-soft); }
@keyframes lt-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- what we can see (table) ---------- */
.seen { margin: 20px; background: var(--f1); color: var(--f1-ink); padding: var(--section) calc(var(--field-pad) - 20px); }
.seen__head span { display: block; }
.seen__head span + span { padding-left: calc(100% / 6); }
.seen__table { width: 100%; margin-top: 4.5rem; border-collapse: collapse; font-size: var(--step-body); line-height: 1.45; }
.seen__table col.c-kind { width: 14%; }
.seen__table col.c-what { width: 32%; }
.seen__table col.c-why { width: 30%; }
.seen__table col.c-eg { width: 24%; }
.seen__table th, .seen__table td { padding: 0.875rem 0.75rem; text-align: left; vertical-align: top; font-weight: 400; }
.seen__table thead th { padding-bottom: 1rem; font-size: var(--step-small); color: var(--f1-muted); }
.seen__table td:last-child, .seen__table thead th:last-child { text-align: right; }
.seen__table tbody tr:not(.gap):nth-child(3n+2) td { background: var(--f1-step); }
.seen__table tbody td:last-child { color: var(--f1-muted); font-variant-numeric: tabular-nums; }
.seen__table .gap td { padding: 0.5rem 0; background: none; }
.seen__table .seen__sealed th, .seen__table .seen__sealed td { font-weight: 500; }
.seen__table .seen__sealed td:last-child { color: var(--accent); }
.seen__after { margin-top: 3rem; max-width: 62ch; }

/* ---------- handover (run-in column) ---------- */
.steps { padding-top: var(--section); }
.step { max-width: 600px; margin-top: 3rem; }
.step + .step { margin-top: 4.5rem; }
.step > p { color: var(--muted); line-height: 1.6; }
.step > p > b { color: var(--ink); }
.ev { margin-top: 1.25rem; width: 100%; }
.ev--film { background: var(--surface); }
.film { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; background: var(--surface); filter: grayscale(1); }
.ev--film figcaption { padding: 0.6rem 0 0; background: var(--bg); font-size: var(--step-small); color: var(--muted); }

/* ---------- features (small proof beside text) ---------- */
.features { padding-top: var(--section); }
.mod { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr); gap: 1.75rem; max-width: 720px; margin-top: 4rem; }
.mod + .mod { margin-top: 6rem; }
.mod__panel { display: grid; place-items: center; min-height: 150px; padding: 18px; background: var(--surface); }
.mod__panel--photo { padding: 0; height: 220px; overflow: hidden; }
.mod__panel--photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 18%; filter: grayscale(1); }
.mod__text h3 { font-size: var(--step-body); font-weight: 500; line-height: 1.35; }
.mod__text p { margin-top: 0.5rem; color: var(--muted); }
.features__more { margin-top: 6rem; max-width: 30ch; font-size: var(--step-lead); line-height: 1.35; }

/* ---------- pricing (a menu) ---------- */
.pricing { padding: var(--section) 0; }
.pricing__intro { margin-top: 1.5rem; max-width: 44ch; }
.menu-group { max-width: 600px; margin-top: 3rem; }
.menu-group h3 { margin-bottom: 1rem; font-size: var(--step-lead); font-weight: 500; }
.menu li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 1.5rem; }
.menu li + li { margin-top: 1.25rem; }
.menu__price { justify-self: end; font-variant-numeric: tabular-nums; }
.menu__desc { grid-column: 1; max-width: 40ch; color: var(--muted); }
.pricing__after { margin-top: 3rem; max-width: 50ch; }

/* ---------- questions (reading text) ---------- */
.faq { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding: var(--section) var(--margin); background: var(--f2); color: var(--f2-ink); }
.faq__head { grid-column: 1 / 4; align-self: start; position: sticky; top: 2rem; }
.faq__text { grid-column: 5 / 13; columns: 2; column-gap: 3.5rem; line-height: 1.55; }
.faq__text p { break-inside: avoid; margin-bottom: 1.25rem; }

/* ---------- join (a plain sentence, one action) ---------- */
.join { padding: 30svh var(--margin) 18svh; }
.join__line { max-width: 34ch; font-family: var(--font-text); font-size: var(--step-lead); line-height: 1.35; }
.join__form { max-width: 34rem; margin-top: 1.5rem; }
.join__row { display: flex; gap: 0.5rem; }
.field { flex: 1; min-width: 0; min-height: 3rem; padding: 0 1rem; background: var(--surface); color: var(--ink); border: 0; border-radius: var(--radius); font-size: max(1rem, var(--step-body)); }
.field::placeholder { color: var(--muted); }
.field:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.field--select { min-height: 2.5rem; padding: 0 2.25rem 0 0.875rem; font-size: var(--step-small); -webkit-appearance: none; appearance: none; cursor: pointer; }
.select { position: relative; display: inline-flex; align-items: center; }
.select__arrow { position: absolute; right: 0.875rem; width: 0.625rem; height: 0.375rem; color: var(--ink); pointer-events: none; }
.join__more { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 1.5rem; margin-top: 1rem; font-size: var(--step-small); color: var(--muted); }
.join__select { display: inline-flex; align-items: center; gap: 0.625rem; }
.check { display: inline-flex; align-items: center; gap: 0.625rem; cursor: pointer; }
.check input { width: 1.25rem; height: 1.25rem; margin: 0; accent-color: var(--ink); }
.join__status { min-height: 1.6em; margin-top: 1rem; }
.join__status a { text-underline-offset: 0.2em; }
.hp { position: absolute; left: -10000px; top: auto; overflow: hidden; }

@media (min-width: 64em) {
  .join { padding-left: calc(47% + var(--pad)); }
}

/* ---------- footer: columns above, the name below, on the inverted field ---------- */
/* The footer swaps ground and ink, so it redefines the page tokens and everything inside follows. */
.footer { --bg: var(--f1); --ink: var(--f1-ink); --muted: var(--f1-muted); display: grid; grid-template-rows: auto 1fr auto auto; min-height: 100svh; margin: 0 20px; padding: clamp(2.5rem, 4vw, 3.75rem) calc(var(--field-pad) - 20px) 0; overflow: clip; background: var(--bg); color: var(--ink); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .footer { --bg: var(--f2); --ink: var(--f2-ink); --muted: var(--f2-muted); }
}
:root[data-theme="dark"] .footer { --bg: var(--f2); --ink: var(--f2-ink); --muted: var(--f2-muted); }
.footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: start; }
.footer__col--contact { grid-column: 1 / 5; }
.footer__col--site { grid-column: 6 / 8; }
.footer__col--fine { grid-column: 8 / 10; }
.footer__col--credits { grid-column: 10 / 13; }
.footer__mail { font-size: var(--step-lead); line-height: 1.3; text-underline-offset: 0.18em; text-decoration-thickness: 0.06em; overflow-wrap: anywhere; transition: text-decoration-thickness var(--t-hover) ease; }
.footer__note { margin-top: 0.875rem; max-width: 30ch; color: var(--muted); }
.footer__title { margin-bottom: 1rem; font-size: var(--step-small); color: var(--muted); }
.footer__list li + li { margin-top: 0.5rem; }
.footer__list [aria-current="page"] { text-decoration-color: currentColor; }
.footer__credits { font-size: var(--step-small); line-height: 1.55; }
.footer__credits li + li { margin-top: 0.75rem; }
.footer__credits a { text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
.footer__fine { margin-top: 0.75rem; font-size: var(--step-small); color: var(--muted); }
.footer__legal { grid-row: 3; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.75rem 2rem; padding-top: 3.5rem; font-size: var(--step-small); color: var(--muted); }
.footer__end { display: flex; align-items: baseline; gap: 1.5rem; }
.footer__end .link-plain { color: var(--ink); }
.theme { font-size: var(--step-small); color: var(--ink); text-decoration: underline; text-underline-offset: 0.22em; text-decoration-thickness: 0.07em; }
.footer__name { grid-row: 4; margin: clamp(1.5rem, 3vw, 2.5rem) 0 -0.18em -0.02em; font-family: var(--font-display); font-size: var(--step-display); line-height: 0.8; letter-spacing: -0.01em; text-transform: uppercase; white-space: nowrap; font-optical-sizing: auto; transform-origin: 0 100%; }
@media (hover: hover) and (pointer: fine) {
  .footer__mail:hover { text-decoration-thickness: 0.12em; }
}

/* ---------- phone and tablet: a second composition ---------- */
@media (max-width: 63.99em) {
  .chapter { display: flex; flex-direction: column; }
  .column { display: contents; }
  .chapter--one .stage { display: contents; }
  .chapter--one .hero { display: contents; }
  .chapter--one .stage__frame { order: 1; margin: 68px 12px 0; }
  .chapter--one .stage__pic { height: 58svh; }
  .chapter--one .stage__cap { display: none; }
  .nav--home { left: 0; right: 0; padding: 12px; justify-content: space-between; }
  .nav__links { display: none; }
  .nav__menu { display: block; position: relative; }
  .nav--home { gap: 0.5rem; justify-content: flex-start; }
  .nav--home .nav__home { min-height: 2.75rem; padding: 0 0.75rem; background: var(--bg); }
  .nav--home .nav__home .mark { height: 1.375rem; }
  .nav--home .nav__menu { margin-right: auto; }
  .nav--home > .button { margin-left: auto; }
  .nav__menu summary { list-style: none; display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0 1rem; background: var(--bg); color: var(--ink); cursor: pointer; }
  .nav__menu summary::-webkit-details-marker { display: none; }
  .nav__menu ul { position: absolute; top: calc(100% + 4px); left: 0; min-width: 12rem; padding: 0.5rem 0; background: var(--surface); }
  .nav__menu li a { display: block; padding: 0.7rem 1rem; text-decoration: none; }
  .nav .button--small { min-height: 2.75rem; }
  .hero__name { order: 2; position: relative; z-index: 2; margin: -3vw var(--margin) 0; font-size: 40vw; }
  .hero__copy { order: 3; margin: 1.5rem var(--margin) 0; }
  .chapter--one .stage__ui { order: 4; margin: 2.5rem var(--margin) 0; max-width: 360px; }
  .chapter--one .stage__ui .ui--file { display: none; }
  .file { order: 5; margin: 0 var(--margin); padding-top: 5rem; }

  .chapter--two .stage { padding: 12px 12px 0; }
  .chapter--two .stage__pic { height: 60svh; }
  .chapter--two .stage__img:not(:first-child) { display: none; }
  .chapter--two .stage__img:first-child { opacity: 1; }
  .chapter--two .cap:not(:first-child) { display: none; }
  .chapter--two .cap:first-child { opacity: 1; }
  .chapter--two .stage__cap { padding-left: 0; }
  .steps, .features, .pricing { margin: 0 var(--margin); }
  .steps { padding-top: 4rem; }

  .showcase { grid-template-columns: 1fr; }
  .showcase__in { grid-area: 1 / 1; min-height: 62svh; }
  .showcase__out { grid-area: 2 / 1; min-height: 62svh; }
  .showcase__in .showcase__inner { padding: 4rem var(--margin) 6.5rem; }
  .showcase__out .showcase__inner { padding: 6rem var(--margin) 3.5rem; }
  .showcase__h { margin: 0; }
  .showcase__h--in { grid-area: 1 / 1; align-self: end; justify-self: start; margin: 0 var(--margin) 1.25rem; }
  .showcase__h--out { grid-area: 2 / 1; align-self: start; justify-self: start; margin: 1.25rem var(--margin) 0; }

  .seen { margin: 12px; padding: 5rem 1rem; }
  .seen__head span + span { padding-left: 0; }
  .seen__table, .seen__table tbody, .seen__table tr, .seen__table th, .seen__table td { display: block; width: auto; }
  .seen__table { margin-top: 3rem; }
  .seen__table thead, .seen__table colgroup { display: none; }
  .seen__table th[scope="row"] { padding: 1.75rem 0 0.5rem; font-size: var(--step-lead); }
  .seen__table td { padding: 0 0.875rem; text-align: left !important; }
  .seen__table td:nth-of-type(1) { padding-top: 0.875rem; }
  .seen__table td:last-child { padding-bottom: 0.875rem; }
  .seen__table td:nth-of-type(2), .seen__table td:nth-of-type(3) { color: var(--f1-muted); font-size: var(--step-small); }
  .seen__table .gap { display: none; }

  .mod { grid-template-columns: 1fr; gap: 1rem; margin-top: 3rem; }
  .mod + .mod { margin-top: 4rem; }
  .mod__panel { justify-items: start; }

  .faq { grid-template-columns: 1fr; }
  .faq__head, .faq__text { grid-column: 1; }
  .faq__head { position: static; }
  .faq__text { columns: 1; margin-top: 2rem; }

  .join { padding: 20svh var(--margin) 14svh; }
  .footer { min-height: 0; margin: 0 12px; padding: 2.75rem 1rem 0; }
  .footer__top { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 1.5rem; row-gap: 2.5rem; }
  .footer__col--contact, .footer__col--credits { grid-column: 1 / -1; }
  .footer__col--site { grid-column: 1; }
  .footer__col--fine { grid-column: 2; }
  .footer__legal { padding-top: 4rem; }
  .footer__name { margin: 1.5rem -1rem -0.18em; font-size: 40vw; }
}

@media (min-width: 40em) and (max-width: 63.99em) {
  .faq__text { columns: 2; column-gap: 2.5rem; }
  .mod { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 1.5rem; }
  .chapter--one .stage__pic { height: 62svh; }
  .hero__name { font-size: 34vw; }
  .footer__name { font-size: 34vw; }
  .footer__credits { columns: 2; column-gap: 2rem; }
  .footer__credits li { break-inside: avoid; }
}

@media (max-width: 26em) {
  .join__row { flex-direction: column; }
  .join__row .button { align-self: flex-start; min-height: 2.75rem; }
}

/* ---------- motion (step 9): transform, opacity and clip-path only; the reduced state is the finished state ---------- */

/* feedback under the hand */
[data-ui] .lt__seg span { transition: background-color var(--t-ui) ease, color var(--t-ui) ease, scale var(--t-press) var(--ease-out); }
[data-ui] .lt__seg:active span { scale: 0.97; }
.nav__menu summary { transition: scale var(--t-press) var(--ease-out); }
.nav__menu summary:active { scale: 0.97; }
.nav__home { transition: scale var(--t-press) var(--ease-out), opacity var(--t-hover) ease; }
.nav__home:active { scale: 0.94; }
@media (hover: hover) and (pointer: fine) { .nav__home:hover { opacity: 0.72; } }
.theme { transition: text-decoration-thickness var(--t-hover) ease; }
.showcase__text { transition: background-color var(--t-hover) ease; }
.field { transition: background-color var(--t-hover) ease; }
@media (hover: hover) and (pointer: fine) {
  [data-ui] .lt__seg:hover input:not(:checked) + span { color: var(--ui-ink); }
  .theme:hover { text-decoration-thickness: 0.14em; }
  .footer__credits a:hover { text-decoration-thickness: 0.14em; }
}

@media (prefers-reduced-motion: no-preference) {
  /* the hero arrives as one gesture: the plate opens, the name rises out of its baseline, then the words, then Today */
  .js .chapter--one .stage__pic { animation: shutter 1100ms var(--ease-in-out) both; }
  .js .chapter--one .stage__img { animation: settle 1600ms var(--ease-soft) both; }
  .js .hero__name { animation: name-rise 1000ms var(--ease-out) 260ms both; }
  .js .hero__line[data-rise] { animation: rise 800ms var(--ease-out) 520ms both; }
  .js .hero__note[data-rise] { animation: rise 800ms var(--ease-out) 600ms both; }
  .js .chapter--one .stage__ui { animation: rise 800ms var(--ease-out) 760ms both; }
  .nav__menu[open] ul { animation: menu-in var(--t-ui) var(--ease-out); transform-origin: 0 0; }

  /* the scaling wordmark: as the first screen leaves, the name settles 7% (signature move) */
  @supports (animation-timeline: view()) {
    .js .hero__name {
      animation: name-rise 1000ms var(--ease-out) 260ms both, name-settle linear both;
      animation-timeline: auto, view();
      animation-range: normal, exit 0% exit 100%;
      transform-origin: 0 100%;
    }
    .footer__name { animation: name-arrive linear both; animation-timeline: view(); animation-range: entry 0% entry 75%; }
    @media (min-width: 64em) {
      .hero { view-timeline: --hero block; }
      .js .hero__name { animation-timeline: auto, --hero; transform-origin: 100% 100%; }
    }
  }

  /* section parts: site.js marks each part and adds .is-in once it is on screen, staggered within its batch */
  .motion [data-part] { transition: opacity 640ms var(--ease-out), translate 820ms var(--ease-out), scale 820ms var(--ease-out), clip-path 900ms var(--ease-in-out); transition-delay: calc(var(--n, 0) * 70ms); }
  .motion [data-part="rise"] { opacity: 0; translate: 0 22px; }
  .motion [data-part="row"] { opacity: 0; translate: 0 12px; }
  .motion [data-part="ui"] { opacity: 0; scale: 0.96; translate: 0 14px; transform-origin: 50% 0; }
  .motion [data-part="head"] { clip-path: inset(0 -5% 100% -5%); translate: 0 0.32em; }
  .motion [data-part="pic"] { clip-path: inset(0 0 100% 0); transition-duration: 640ms, 820ms, 820ms, 760ms; }
  .motion [data-part="pic"] :is(img, video) { scale: 1.08; transition: scale 1600ms var(--ease-soft); }
  .motion [data-part="left"] { opacity: 0; translate: -36px 0; }
  .motion [data-part="right"] { opacity: 0; translate: 36px 0; }
  .motion [data-part].is-in { opacity: 1; translate: none; scale: none; }
  .motion [data-part="head"].is-in { clip-path: inset(-25% -5% -25% -5%); }
  .motion [data-part="pic"].is-in { clip-path: inset(0); }
  .motion [data-part="pic"].is-in :is(img, video) { scale: none; }

  /* the second chapter's photographs settle slowly as each one takes the stage */
  @media (min-width: 64em) {
    .chapter--two .stage__img { scale: 1.05; transition: opacity 900ms ease, scale 7s var(--ease-soft); }
    .chapter--two .stage__img.is-on { scale: none; }
  }
}
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: none; } }
@keyframes shutter { from { clip-path: inset(0 0 100% 0); } to { clip-path: inset(0); } }
@keyframes settle { from { scale: 1.08; } to { scale: none; } }
@keyframes name-rise { from { clip-path: inset(0 -5% 100% -5%); translate: 0 0.24em; } to { clip-path: inset(-25% -5% -25% -5%); translate: none; } }
@keyframes name-settle { from { scale: 1; } to { scale: 0.93; } }
@keyframes name-arrive { from { scale: 0.94; } to { scale: 1; } }
@keyframes menu-in { from { opacity: 0; scale: 0.97; translate: 0 -6px; } to { opacity: 1; scale: none; translate: none; } }

/* ---------- story session (2026-10-15): hero line in the H1, the problem, how-tos, your own voice,
   the binder band, three ways in, the one-week test, the founder's note ---------- */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.hero__line { font-size: clamp(1.5rem, 1.15rem + 1.1vw, 2.125rem); line-height: 1.2; letter-spacing: -0.01em; max-width: 21em; }
/* two lines from 1024px up: the line takes the column's width and eases its size on narrower laptops */
@media (min-width: 64em) { .hero__line { font-size: min(2.125rem, 2.4vw); } }
.hero__sub { margin-top: 1.25rem; max-width: 40ch; line-height: 1.5; }
.hero__cta { margin-top: 1.75rem; }
.hero__cta + .hero__note { margin-top: 0.875rem; }

/* the problem: a short paragraph, then the chat that resolves into one card */
.problem { padding-top: clamp(4rem, 8vw, 7.5rem); }
.problem__text { margin-top: 1.5rem; max-width: 46ch; }
.problem__turn { margin-top: 1.25rem; max-width: 30ch; font-size: var(--step-lead); line-height: 1.35; }
.chat { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: end; max-width: 640px; margin-top: 2.5rem; }
.chat .ev { margin-top: 0; }
[data-ui] .bubble { width: fit-content; max-width: 86%; margin-top: 6px; padding: 8px 12px; border-radius: 14px 14px 14px 4px; background: var(--ui-fill); font-size: 14px; line-height: 1.35; }
[data-ui] .bubble--me { margin-left: auto; border-radius: 14px 14px 4px 14px; background: var(--ui-ink); color: #ffffff; }
[data-ui] .bubble__who { display: block; margin-bottom: 2px; font-size: 12px; color: var(--ui-soft); }
[data-ui] .ui__top b { color: var(--ui-ink); font-weight: 500; }
[data-ui] .ui__media { display: flex; gap: 8px; margin-top: 12px; }
[data-ui] .ui__photo { flex: 1; position: relative; display: flex; align-items: flex-end; aspect-ratio: 4 / 3; padding: 8px; overflow: hidden; border-radius: 8px; background: var(--ui-fill); font-size: 12.5px; }
[data-ui] .ui__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.8); transform-origin: 44% 40%; }
[data-ui] .ui__photo--video img { transform: scale(1.2); transform-origin: 40% 45%; filter: brightness(0.75); }
[data-ui] .ui__play { position: relative; padding: 2px 6px; border-radius: 4px; background: var(--ui-ink); color: #ffffff; }
[data-ui] .ui__media + .ui__rows { margin-top: 12px; }
[data-ui] .ui__wrap > span:last-child { white-space: normal !important; text-align: right; }

/* how-tos */
.howto { padding-top: var(--section); }
.howto__lead { margin-top: 1.5rem; max-width: 34ch; font-size: var(--step-lead); line-height: 1.35; }
.howto__text { margin-top: 1rem; max-width: 46ch; color: var(--muted); }
.ui--howto[data-ui] { max-width: 380px; margin-top: 2.5rem; }

/* handover opens with the reason it isn't only about dying */
.steps__intro { margin-top: 1.5rem; max-width: 36ch; font-size: var(--step-lead); line-height: 1.35; }

/* your own voice */
.voice { padding: var(--section) 0; }
.voice__lead { margin-top: 1.5rem; max-width: 30ch; font-size: var(--step-lead); line-height: 1.35; }
.voice__text { margin-top: 1rem; max-width: 46ch; color: var(--muted); }
.ui--voice[data-ui] { max-width: 380px; margin-top: 2.5rem; }

/* the binder band: a whole field, four short lines */
.snapshot { margin: 20px; padding: var(--section) calc(var(--field-pad) - 20px); background: var(--f1); color: var(--f1-ink); }
.snapshot__head span { display: block; }
.snapshot__head span + span { padding-left: calc(100% / 6); }
.snapshot__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gutter); margin-top: 4.5rem; font-size: var(--step-lead); line-height: 1.35; }
.snapshot__list li { max-width: 18ch; }

/* three ways in: each row goes to the form with its choice made */
.ways { padding-top: var(--section); }
.ways__list { max-width: 600px; margin-top: 2.5rem; }
.way { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1.5rem; align-items: baseline; padding: 1.25rem 0; text-decoration: none; }
.way__text { color: var(--muted); }
.way__text b { color: var(--ink); }
.way__arrow { font-size: var(--step-lead); transition: translate var(--t-hover) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .way:hover .way__arrow { translate: 6px 0; } .way:hover .way__text b { text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; } }

/* the one-week test */
.test { padding-top: var(--section); }
.test__intro { margin-top: 1.5rem; max-width: 30ch; font-size: var(--step-lead); line-height: 1.35; }
.test__list { max-width: 600px; margin: 2rem 0 0; padding: 0; list-style: none; counter-reset: q; }
.test__list li { counter-increment: q; }
.test__q { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; gap: 1rem; align-items: center; min-width: 0; padding: 0.75rem 0; border: 0; }
.test__q::before { content: counter(q); font-size: var(--step-small); color: var(--muted); font-variant-numeric: tabular-nums; }
.test__q legend { display: contents; }
.test__seg { display: inline-flex; gap: 4px; padding: 4px; background: var(--surface); }
.test__seg label { position: relative; }
.test__seg input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.test__seg span { display: block; min-width: 3.25rem; padding: 0.4rem 0.75rem; text-align: center; font-size: var(--step-small); color: var(--muted); transition: background-color var(--t-ui) ease, color var(--t-ui) ease; }
.test__seg input:checked + span { background: var(--ink); color: var(--bg); }
.test__seg input[value="yes"]:checked + span { background: var(--accent); color: var(--accent-ink); }
.test__seg input:focus-visible + span { outline: 2px solid var(--ink); outline-offset: 2px; }
.test__result { max-width: 600px; margin-top: 3.5rem; }
.test__count { font-family: var(--font-display); font-size: var(--step-head); line-height: 0.95; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.test__unit { font-size: 0.5em; color: var(--muted); }
.test__line { margin-top: 0.75rem; max-width: 40ch; min-height: 3em; }
.test__cta { margin-top: 1.25rem; }
.test__fine { margin-top: 1.25rem; font-size: var(--step-small); color: var(--muted); }

/* the founder's note: read like a letter, one narrow column in the middle of the page; a photo can be added later as .founder__photo */
.founder { padding: var(--section) var(--margin) 0; }
.founder__text { max-width: 36rem; margin-inline: auto; }
.founder__head { font-family: var(--font-display); font-size: var(--step-head); line-height: 0.95; text-transform: uppercase; }
.founder__text p { margin-top: 1.25rem; line-height: 1.65; }
.founder__head + p { margin-top: 2rem; }
.founder__sign { color: var(--muted); }
.founder__photo { max-width: 360px; margin-bottom: 2.5rem; }
.founder__photo img { width: 100%; filter: grayscale(1); }
.founder + .join { padding-top: 14svh; }

/* the consent line and the bot check under the form */
.join__legal { margin-top: 1rem; font-size: var(--step-small); color: var(--muted); }
.join__legal a { text-underline-offset: 0.2em; text-decoration-thickness: 0.07em; }
.join__check:empty { display: none; }
.join__check { margin-top: 1rem; }

@media (min-width: 64em) {
  .hero__copy { margin-top: max(7.5rem, 13svh); width: min(42rem, 100%); }
  .stage__ui .ui--howtos { width: 100%; }
}

@media (max-width: 63.99em) {
  .hero__copy { order: 3; }
  .problem { order: 4; margin: 0 var(--margin); padding-top: 4.5rem; }
  .howto { order: 5; margin: 0 var(--margin); padding-top: 5rem; }
  .chapter--one .stage__ui { order: 6; }
  .chapter--one .stage__ui .ui--howtos { display: none; }
  .features { order: 7; }
  .file { order: 8; }
  .chat { grid-template-columns: 1fr; max-width: 380px; }
  .voice, .ways, .test { margin: 0 var(--margin); }
  .voice { padding: 5rem 0 2rem; }
  .ways { padding-top: 4rem; }
  .test { padding-top: 5rem; }
  .chapter--three .stage { padding: 12px 12px 0; }
  .chapter--three .stage__pic { height: 50svh; }
  .chapter--three .stage__img { opacity: 1; }
  .chapter--two .stage__img[data-shot="album"], .chapter--two .cap[data-shot="album"] { display: none; }
  .snapshot { margin: 12px; padding: 5rem 1rem; }
  .snapshot__head span + span { padding-left: 0; }
  .snapshot__list { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 3rem; }
  .founder { padding-top: 6rem; }
}
@media (max-width: 26em) {
  .snapshot__list { grid-template-columns: 1fr; }
  .test__q { grid-template-columns: 1.25rem minmax(0, 1fr) auto; gap: 0.75rem; }
  .test__seg span { min-width: 2.75rem; padding-inline: 0.5rem; }
}

@media (prefers-reduced-motion: no-preference) {
  .js .hero__sub[data-rise] { animation: rise 800ms var(--ease-out) 580ms both; }
  .js .hero__cta[data-rise] { animation: rise 800ms var(--ease-out) 640ms both; }
  .js .hero__cta + .hero__note[data-rise] { animation: rise 800ms var(--ease-out) 700ms both; }
}