/* Generated by .build/assemble.py from .build/foundation/site.base.css (the foundation, shared by every page).
   The homepage section styles are in home.css. Edit the sources and re-run it; edits here are overwritten. */
/* ==========================================================================
   Gravitas site stylesheet
   Foundation first: fonts, tokens, reset, type, layout, components, reveal
   utilities, paper long-form, view transitions. Section blocks are appended
   after the "SECTIONS" marker at the end of this file by the integrator.
   Contract and markup snippets: FOUNDATION.md (build scratch).
   ========================================================================== */

/* ---------- 1. Fonts (self-hosted WOFF2) ---------- */
@font-face {
  font-family: "Gravitas Display";
  src: url("../fonts/gravitas-display-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Geist";
  src: url("../fonts/geist-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* ---------- 2. Tokens ---------- */
:root {
  color-scheme: dark;

  /* Ink (the dark theater) */
  --ink-0: #0A0908;
  --ink-1: #12100F;
  --ink-2: #1A1816;
  --ink-3: #26231F;
  --line-dark: rgba(245, 238, 228, 0.10);
  --line-dark-2: rgba(245, 238, 228, 0.18);
  --fg-dark: #F3EFE9;
  --fg-dark-2: #ABA49B;
  --fg-dark-3: #8A847B;

  /* Paper (subpages, and the homepage from the app tour on: the app's light page).
     The app's DESIGN.md: warm white page #FDFDFC, #F5F5F3 surfaces, #EBEBEA edges, charcoal text. */
  --paper: #FDFDFC;
  --paper-2: #F5F5F3;
  --paper-line: #EBEBEA;
  --charcoal: #262626;
  --charcoal-2: #62625F;
  /* The quiet half of a two-tone title on paper: the App Store set's warm grey (#9C948C, 2.9:1)
     taken down just enough for AA large text. 3.57:1 on #FDFDFC, 3.33:1 on #F5F5F3. Display
     sizes only (24px and up), never body copy. */
  --paper-quiet: #8C857E;
  /* The dark panel a phone stands on (the App Store set's charcoal panel, frames 1 and 4). */
  --plinth: #1A140F;

  /* Orange: primary action and the one signal moment per viewport */
  --orange: #FF5C00;
  --orange-hover: #FF6D1A;
  --orange-soft: #FF8F4D;
  --orange-deep: #CC4A00;
  --on-orange: #140F0B;

  /* Score ring (from the app) */
  --ring-1: #FF8F4D;
  --ring-2: #FF5C00;
  --ring-3: #CC4A00;
  --ring-track: #EBEBEA;

  /* Semantic tokens. These flip inside .theme-paper; build on these. */
  --bg: var(--ink-0);
  --fg: var(--fg-dark);
  --fg-2: var(--fg-dark-2);
  --fg-3: var(--fg-dark-3);
  --line: var(--line-dark);
  --line-2: var(--line-dark-2);
  --accent-text: var(--orange-soft);
  --focus: var(--fg-dark);
  --surface-1: var(--ink-1);
  --surface-2: var(--ink-2);

  /* Type */
  --font-display: "Gravitas Display", "Iowan Old Style", Georgia, serif;
  --font-text: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --display-xl: clamp(52px, 8.2vw, 128px);
  --display-l: clamp(40px, 5.4vw, 84px);
  --display-m: clamp(32px, 3.6vw, 56px);
  --display-s: clamp(24px, 2.2vw, 34px);
  --text-lead: 19px;
  --text-body: 17px;
  --text-small: 14px;
  --text-label: 13px;
  --measure: 62ch;

  /* Layout */
  --container: 1320px;
  --gutter: clamp(16px, 4vw, 40px);
  --section-y: clamp(96px, 14vh, 176px);
  --frame-inset: 10px;
  --frame-radius: 22px;
  --r-1: 8px;
  --r-2: 12px;
  --r-3: 16px;
  --r-4: 22px;
  --r-5: 28px;
  --r-pill: 999px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* Nav geometry (sections use --nav-space to keep content clear of it) */
  --nav-top: 14px;
  --nav-h: 56px;
  --nav-pill: 1000px;
  --nav-radius: 16px;
  --nav-space: calc(var(--safe-top) + var(--nav-top) + var(--nav-h));

  /* Motion */
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-pop: cubic-bezier(0.34, 1.36, 0.64, 1);
  --ease-reel: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-1: 150ms;
  --dur-2: 250ms;
  --dur-3: 350ms;
  --dur-4: 500ms;
  --dur-5: 700ms;
  --dur-6: 900ms;
  --dur-7: 1200ms;
  --stagger: 40ms;
  --stagger-cine: 80ms;

  /* Depth */
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25), 0 8px 24px -12px rgba(0, 0, 0, 0.45);
  --shadow-lift: 0 2px 4px rgba(0, 0, 0, 0.3), 0 16px 32px -12px rgba(0, 0, 0, 0.5), 0 48px 96px -32px rgba(0, 0, 0, 0.55);
  --shadow-paper: 0 1px 2px rgba(38, 30, 20, 0.06), 0 12px 32px -16px rgba(38, 30, 20, 0.18);

  /* Grain */
  --grain-opacity: 0.045;
  --grain-size: 256px;
}

@media (max-width: 599px) {
  :root {
    --frame-inset: 8px;
    --frame-radius: 16px;
    --text-body: 16px;
    --text-lead: 17px;
    --nav-top: 10px;
  }
}

/* Paper theme: flips the semantic tokens. Used on subpages (body) and on the homepage from
   the app tour on (#app, #coaches, #situation, #faq, #get): the house lights are up there. */
.theme-paper {
  color-scheme: light;
  --bg: var(--paper);
  --fg: var(--charcoal);
  --fg-2: var(--charcoal-2);
  --fg-3: #6D6D68;
  --line: var(--paper-line);
  --line-2: #DCDCD9;
  --accent-text: var(--orange-deep);
  --focus: var(--charcoal);
  --surface-1: var(--paper-2);
  --surface-2: #EFEFEC;
  background-color: var(--bg);
  color: var(--fg);
}
/* A dark room inside a paper section (a stage frame, a phone's plinth): the ink tokens come
   back, so focus rings, tags and token-built text stay light on the dark ground. */
.theme-paper .stage,
.theme-ink {
  color-scheme: dark;
  --bg: var(--ink-0);
  --fg: var(--fg-dark);
  --fg-2: var(--fg-dark-2);
  --fg-3: var(--fg-dark-3);
  --line: var(--line-dark);
  --line-2: var(--line-dark-2);
  --accent-text: var(--orange-soft);
  --focus: var(--fg-dark);
  --surface-1: var(--ink-1);
  --surface-2: var(--ink-2);
}

/* ---------- 3. Reset ---------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}
* {
  margin: 0;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-space) + 12px);
}
body {
  min-height: 100svh;
  background-color: var(--bg);
  color: var(--fg);
  font-family: var(--font-text);
  font-size: var(--text-body);
  font-weight: 400;
  line-height: 1.55;
  font-synthesis: none;
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  -webkit-tap-highlight-color: transparent;
  overflow-x: clip;
}
/* Homepage: while the light page sits under the nav (core.js, with .is-over-paper), the body
   is paper too. iOS 26 Safari tints its bottom toolbar from the body's background (it ignores
   theme-color), so the bar goes light over the light page and back to ink over the dark one. */
html.paper-under-nav body {
  background-color: var(--paper);
}
img,
picture,
video,
canvas,
svg {
  display: block;
  max-width: 100%;
}
img,
video {
  height: auto;
}
input,
button,
textarea,
select {
  font: inherit;
  color: inherit;
}
button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
a {
  color: inherit;
  text-decoration: none;
}
a,
button,
[role="tab"] {
  touch-action: manipulation;
}
ul[role="list"],
ol[role="list"] {
  list-style: none;
  padding: 0;
}
h1,
h2,
h3,
h4,
h5,
h6 {
  font-size: inherit;
  font-weight: inherit;
  text-wrap: balance;
}
p,
li,
figcaption,
blockquote {
  text-wrap: pretty;
}
/* The display face is upright only. Emphasis never goes italic. */
em,
i,
cite,
address,
dfn,
var {
  font-style: normal;
}
::selection {
  background: var(--fg-dark);
  color: var(--ink-0);
}
.theme-paper ::selection {
  background: var(--charcoal);
  color: var(--paper);
}
:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}
:focus:not(:focus-visible) {
  outline: none;
}
[hidden] {
  display: none !important;
}
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* ---------- 4. Typography ---------- */
.display-xl,
.display-l,
.display-m {
  font-family: var(--font-display);
  font-weight: 500;
  font-style: normal;
  text-wrap: balance;
}
.display-xl {
  font-size: var(--display-xl);
  line-height: 0.95;
  letter-spacing: -0.01em;
}
.display-l {
  font-size: var(--display-l);
  line-height: 1;
  letter-spacing: -0.005em;
}
.display-m {
  font-size: var(--display-m);
  line-height: 1.05;
  letter-spacing: 0;
}
.lead {
  font-size: var(--text-lead);
  line-height: 1.5;
  color: var(--fg-2);
  max-width: var(--measure);
}
.small {
  font-size: var(--text-small);
  line-height: 1.5;
}
.label {
  font-size: var(--text-label);
  line-height: 1.35;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.eyebrow {
  display: block;
  font-family: var(--font-text);
  font-size: 14px;
  line-height: 1.3;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: var(--fg-2);
}
/* Kept on purpose: no user since the app tour eyebrow went grey (2026-10-09); FOUNDATION.md 3. */
.eyebrow--accent {
  color: var(--accent-text);
}
.muted {
  color: var(--fg-2);
}
.tnum {
  font-variant-numeric: tabular-nums;
}
/* Two-tone line (Vercel chapter style): the first span in --fg, the rest in --fg-2. */
.two-tone {
  color: var(--fg);
  text-wrap: balance;
}
.two-tone__muted {
  color: var(--fg-2);
}
/* On paper the quiet half is the App Store set's warm grey (large text only, see --paper-quiet). */
.theme-paper .two-tone__muted {
  color: var(--paper-quiet);
}
.theme-paper :is(.stage, .theme-ink) .two-tone__muted {
  color: var(--fg-2);
}
/* A block-level line for per-line reveals: <span class="line" data-reveal="blur-rise" style="--i:1"> */
.line {
  display: block;
}
.microline {
  font-size: var(--text-small);
  line-height: 1.4;
  color: var(--fg-3);
}
.sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ---------- 5. Layout ---------- */
.container {
  width: 100%;
  max-width: calc(var(--container) + var(--gutter) * 2);
  margin-inline: auto;
  padding-left: max(var(--gutter), var(--safe-left));
  padding-right: max(var(--gutter), var(--safe-right));
}
.section {
  position: relative;
  padding-block: var(--section-y);
}
main:focus {
  outline: none;
}

/* Skip link */
.skip-link {
  position: fixed;
  top: calc(var(--safe-top) + 12px);
  left: 12px;
  z-index: 200;
  display: inline-flex;
  align-items: center;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--r-pill);
  background: var(--fg-dark);
  color: var(--ink-0);
  font-size: 15px;
  font-weight: 500;
  transform: translateY(calc(-100% - 24px));
  transition: transform var(--dur-2) var(--ease-out);
}
.skip-link:focus-visible {
  transform: none;
  outline-color: var(--orange-soft);
}

/* ---------- 6. Brand mark ---------- */
.mark {
  width: auto;
  height: 1em;
  aspect-ratio: 35.2 / 37.2;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  overflow: visible;
}

/* ---------- 7. Nav ---------- */
/*
  Home: transparent over the hero; after 24px of scroll (html.js + .is-scrolled)
  a dark glass pill fades in and the brand and CTA glide inward to sit in it.
  Without JS the pill is always shown. Subpages use .nav--paper (always solid).
*/
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: calc(var(--safe-top) + var(--nav-top));
  pointer-events: none;
}
.nav__inner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--nav-h);
  width: min(100% - 2 * max(var(--gutter), var(--safe-left), var(--safe-right)), var(--container));
  margin-inline: auto;
  --pill-w: 100%;
  --shift: 0px;
}
@supports (width: 1cqw) {
  .nav__inner {
    container-type: inline-size;
  }
  .nav__inner > * {
    --pill-w: min(100cqw, var(--nav-pill));
    --shift: calc((100cqw - min(100cqw, var(--nav-pill))) / 2);
  }
}
.nav__glass {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--pill-w);
  border-radius: var(--nav-radius);
  /* .88 keeps the inactive links (--fg-dark-2) at 5.4:1 even over a white phone screen or a
     paper panel, and saturate(0) turns whatever shows through into neutral grey, so the pill
     never tints orange over the orange card (or any colored image). */
  background: rgba(20, 18, 16, 0.88);
  box-shadow:
    inset 0 0 0 1px rgba(245, 238, 228, 0.08),
    inset 0 1px 0 rgba(245, 238, 228, 0.07),
    0 12px 32px -14px rgba(0, 0, 0, 0.6);
  -webkit-backdrop-filter: blur(20px) saturate(0);
  backdrop-filter: blur(20px) saturate(0);
  transform: translateX(-50%);
  opacity: 1;
  pointer-events: auto;
  transition:
    opacity var(--dur-3) var(--ease-out),
    transform var(--dur-4) var(--ease-out),
    background-color var(--dur-3) var(--ease-out),
    box-shadow var(--dur-3) var(--ease-out);
}
.nav__brand {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding-inline: 2px 6px;
  border-radius: var(--r-pill);
  color: var(--fg-dark);
  pointer-events: auto;
  transform: translateX(calc(var(--shift) + 14px));
  border-radius: 10px;
  transition:
    transform var(--dur-4) var(--ease-out),
    color var(--dur-3) var(--ease-out);
}
.nav__brand .mark {
  height: 24px;
}
.nav__word {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 21px;
  line-height: 1;
  letter-spacing: 0;
  transform: translateY(-1px);
}
.nav__links {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  display: none;
  align-items: center;
  gap: 2px;
  padding: 4px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.nav__link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: var(--fg-dark-2);
  white-space: nowrap;
  transition: color var(--dur-2) var(--ease-out);
}
.nav__link:hover,
.nav__link[aria-current] {
  color: var(--fg-dark);
}
.nav__indicator {
  position: absolute;
  top: 4px;
  left: 0;
  z-index: 0;
  width: var(--ind-w, 0px);
  height: 36px;
  border-radius: 9px;
  background: rgba(245, 238, 228, 0.1);
  opacity: 0;
  transform: translateX(var(--ind-x, 0px));
  pointer-events: none;
  transition:
    transform var(--dur-3) var(--ease-out),
    width var(--dur-3) var(--ease-out),
    opacity var(--dur-2) var(--ease-out),
    background-color var(--dur-3) var(--ease-out);
}
.nav__indicator.is-on {
  opacity: 1;
}
.nav__indicator.is-snap {
  transition: none;
}
/* Right slot: the quiet CTA on home; "Back to home" on subpages. */
.nav__end {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  transform: translateX(calc(var(--shift) * -1 - 8px));
  transition: transform var(--dur-4) var(--ease-out);
}
.nav__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 14px 0 10px;
  border-radius: var(--r-1);
  font-size: 14px;
  font-weight: 500;
  color: var(--fg-2);
  transition:
    color var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out);
}
.nav__back svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-3) var(--ease-out);
}
@media (hover: hover) {
  .nav__back:hover svg {
    transform: translateX(-2px);
  }
}
/* Nav CTA: quiet and never orange. Orange belongs to the sections (the hero and closer
   buttons, the orange card, markers, ring, the one progress value), so the bar that follows
   the visitor everywhere uses a neutral fill: label only, no arrow tile. Hover fills it light. */
.nav__cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 16px;
  border-radius: 9px;
  background-color: rgba(243, 239, 233, 0.1);
  box-shadow: inset 0 0 0 1px rgba(245, 238, 228, 0.12);
  color: var(--fg-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  -webkit-user-select: none;
  user-select: none;
  transition:
    background-color var(--dur-2) var(--ease-out),
    color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .nav__cta:hover {
    background-color: var(--fg-dark);
    box-shadow: inset 0 0 0 1px var(--fg-dark);
    color: var(--ink-0);
  }
}
.nav__cta:active {
  transform: scale(0.97);
}
.nav__cta:focus-visible {
  outline: 2px solid var(--fg-dark);
  outline-offset: 3px;
}

.nav.is-instant .nav__glass,
.nav.is-instant .nav__brand,
.nav.is-instant .nav__end {
  transition: none;
}

/* Transparent state over the hero (only when JS manages the scroll state). */
html.js .nav:not(.is-scrolled):not(.nav--paper) .nav__glass {
  opacity: 0;
  transform: translateX(-50%) scale(0.98);
  pointer-events: none;
}
html.js .nav:not(.is-scrolled):not(.nav--paper) .nav__brand {
  transform: none;
}
html.js .nav:not(.is-scrolled):not(.nav--paper) .nav__end {
  transform: none;
}
html.js .nav:not(.is-scrolled):not(.nav--paper) .nav__link,
html.js .nav:not(.is-scrolled):not(.nav--paper) .nav__brand {
  text-shadow: 0 1px 14px rgba(10, 9, 8, 0.45);
}
html.js .nav:not(.is-scrolled):not(.nav--paper) .nav__link {
  color: rgba(243, 239, 233, 0.8);
}
html.js .nav:not(.is-scrolled):not(.nav--paper) .nav__link:hover {
  color: var(--fg-dark);
}
/* Over the hero picture (no glass yet) the CTA carries its own small frosted ground. */
html.js .nav:not(.is-scrolled):not(.nav--paper) .nav__cta:not(:hover) {
  background-color: rgba(20, 18, 16, 0.42);
  box-shadow: inset 0 0 0 1px rgba(245, 238, 228, 0.2);
  -webkit-backdrop-filter: blur(14px) saturate(0);
  backdrop-filter: blur(14px) saturate(0);
}

@media (min-width: 900px) {
  .nav__links {
    display: flex;
  }
}
@media (max-width: 899px), (pointer: coarse) {
  .nav__end {
    transform: translateX(calc(var(--shift) * -1 - 6px));
  }
  /* Touch at 900px and up (large phones sideways, tablets): the section links show, so they
     get the 44px target too, and the indicator follows their height. */
  .nav__link,
  .nav__indicator {
    height: 44px;
  }
  .nav__back {
    height: 44px;
  }
  .nav__cta {
    height: 44px;
    padding: 0 16px;
  }
}

/* Paper variant for subpages: always a solid paper pill. */
.nav--paper .nav__glass {
  background: rgba(253, 253, 252, 0.9);
  box-shadow:
    inset 0 0 0 1px var(--paper-line),
    0 10px 30px -16px rgba(38, 30, 20, 0.22);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
}
.nav--paper .nav__brand {
  color: var(--charcoal);
}
.nav--paper .nav__back {
  color: var(--charcoal-2);
}
@media (hover: hover) {
  .nav--paper .nav__back:hover {
    color: var(--charcoal);
    background-color: var(--paper-2);
  }
}
.nav--paper :focus-visible {
  outline-color: var(--charcoal);
}

/* Home, over the light page (#app onward): core.js sets .is-over-paper while a .theme-paper
   section sits under the pill, and the pill turns light like the app's own bars and the subpage
   nav: warm white glass, charcoal brand and links, a charcoal-tinted indicator, and the quiet CTA
   mirrored (a faint charcoal fill, charcoal on hover). Never orange. Over the dark panels inside
   the light page (the app's plinth, the situation photos, the closer's sky) the glass stays at
   0.9, so the inactive links keep 4.85:1 even over black (#E5E5E4 behind #62625F). */
.nav.is-over-paper .nav__glass {
  background-color: rgba(253, 253, 252, 0.9);
  box-shadow:
    inset 0 0 0 1px rgba(38, 38, 38, 0.08),
    0 10px 30px -16px rgba(38, 30, 20, 0.24);
}
.nav.is-over-paper .nav__brand {
  color: var(--charcoal);
}
.nav.is-over-paper .nav__link {
  color: var(--charcoal-2);
}
.nav.is-over-paper .nav__link:hover,
.nav.is-over-paper .nav__link[aria-current] {
  color: var(--charcoal);
}
.nav.is-over-paper .nav__indicator {
  background-color: rgba(38, 38, 38, 0.07);
}
.nav.is-over-paper .nav__cta {
  background-color: rgba(38, 38, 38, 0.06);
  box-shadow: inset 0 0 0 1px rgba(38, 38, 38, 0.14);
  color: var(--charcoal);
}
@media (hover: hover) {
  .nav.is-over-paper .nav__cta:hover {
    background-color: var(--charcoal);
    box-shadow: inset 0 0 0 1px var(--charcoal);
    color: var(--paper);
  }
}
.nav.is-over-paper :focus-visible,
.nav.is-over-paper .nav__cta:focus-visible {
  outline-color: var(--charcoal);
}

/* ---------- 8. Buttons ---------- */
/* Orange split button: label block + detached square arrow tile (Performance Lab). */
.btn-get {
  --h: 48px;
  --r: 8px;
  --gap: 3px;
  position: relative;
  display: inline-flex;
  align-items: stretch;
  gap: var(--gap);
  height: var(--h);
  border-radius: var(--r);
  color: var(--on-orange);
  font-family: var(--font-text);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
  text-decoration: none;
  -webkit-user-select: none;
  user-select: none;
  transition: transform var(--dur-1) var(--ease-out);
}
.btn-get__label {
  display: inline-flex;
  align-items: center;
  padding: 0 20px;
  border-radius: var(--r);
  background-color: var(--orange);
  transition: background-color var(--dur-2) var(--ease-out);
}
.btn-get__tile {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--h);
  border-radius: var(--r);
  background-color: var(--orange);
  overflow: hidden;
  transition:
    transform var(--dur-3) var(--ease-out),
    background-color var(--dur-2) var(--ease-out);
}
.btn-get__arrow {
  grid-area: 1 / 1;
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform var(--dur-3) var(--ease-out);
}
.btn-get__arrow + .btn-get__arrow {
  transform: translateX(-180%);
}
@media (hover: hover) {
  .btn-get:hover .btn-get__label,
  .btn-get:hover .btn-get__tile {
    background-color: var(--orange-hover);
  }
  .btn-get:hover .btn-get__tile {
    transform: translateX(2px);
  }
  .btn-get:hover .btn-get__arrow {
    transform: translateX(180%);
  }
  .btn-get:hover .btn-get__arrow + .btn-get__arrow {
    transform: translateX(0);
  }
}
.btn-get:active {
  transform: scale(0.97);
}
.btn-get:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
}

/* Quiet secondary button */
.btn-quiet {
  --h: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: var(--h);
  padding: 0 20px;
  border-radius: var(--r-1);
  background-color: rgba(245, 238, 228, 0.06);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--fg);
  font-size: 15px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition:
    background-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .btn-quiet:hover {
    background-color: rgba(245, 238, 228, 0.11);
    box-shadow: inset 0 0 0 1px rgba(245, 238, 228, 0.26);
  }
}
.btn-quiet:active {
  transform: scale(0.97);
}
.theme-paper .btn-quiet {
  background-color: transparent;
  box-shadow: inset 0 0 0 1px rgba(38, 38, 38, 0.18);
}
@media (hover: hover) {
  .theme-paper .btn-quiet:hover {
    background-color: var(--paper-2);
    box-shadow: inset 0 0 0 1px rgba(38, 38, 38, 0.28);
  }
}
.btn-quiet svg {
  width: 16px;
  height: 16px;
}

/* Inline text link inside running copy */
.link {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: var(--line-2);
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}
.link:hover {
  text-decoration-color: currentColor;
}
.theme-paper .link {
  color: var(--orange-deep);
  text-decoration-color: rgba(204, 74, 0, 0.35);
}

/* CTA row: primary button + App Store badge. The gap keeps Apple's clear space. */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

/* ---------- 9. App Store badge (official, hotlinked, never recolored or cropped) ---------- */
.appstore {
  display: inline-flex;
  flex: none;
  border-radius: 9px;
  transition: transform var(--dur-1) var(--ease-out), opacity var(--dur-2) var(--ease-out);
}
.appstore img {
  display: block;
  width: auto;
  height: 48px;
  max-width: none;
}
@media (hover: hover) {
  .appstore:hover {
    opacity: 0.86;
  }
}
.appstore:active {
  transform: scale(0.97);
}

/* ---------- 10. Stage frame (Daylight): big media in an inset rounded frame ---------- */
.stage {
  position: relative;
  isolation: isolate;
  margin-inline: var(--frame-inset);
  border-radius: var(--frame-radius);
  overflow: hidden;
  background-color: var(--ink-1);
  color: var(--fg-dark);
}
.stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(245, 238, 228, 0.06);
  pointer-events: none;
}
.stage__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.stage__media > img,
.stage__media > video,
.stage__media > canvas,
.stage__media > picture,
.stage__media > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.stage__scrim {
  position: absolute;
  inset: auto 0 0 0;
  z-index: 1;
  height: 60%;
  background: linear-gradient(to top, rgba(10, 9, 8, 0.72), rgba(10, 9, 8, 0.38) 45%, rgba(10, 9, 8, 0));
  pointer-events: none;
}
.stage__content {
  position: relative;
  z-index: 3;
}

/* ---------- 10b. House lights up: the seam from the dark half into the light page ---------- */
/*
  The hero and How it works are the performance, on ink. From the app tour on, the page is the
  app's light page. The first light section carries .lights-up (with .theme-paper). Its ::before
  reaches up behind the end of the section above (the How it works room) and shows only where
  that section shows the page: the frame gutters beside the room and the gap under it. Beside
  the room the gutters stay ink; only over its last --lights-run (64 to 140px, the strip under
  the phone's cut) do they warm from ink to paper, on an eased oklab ramp (slow start, soft
  landing, never a muddy grey), and the last --lights-land is plain paper, so the room's rounded
  bottom corners stand on paper and the room ends as a dark frame on a light floor. (Round 1:
  the first ramp ran over 72svh, which lit 10px strips beside the verdict and the second take
  and read as a rendering leak.) Contract with the room: the gap under it stays well under
  --lights-land minus its corner radius (it is 24 to 48px against 80 - 22), so the corners always
  land on paper.
  Static: nothing scrolls, animates or runs, so it is identical under reduced motion, Pause
  motion and without JS, and scrolling back up simply reverses it.
  z-index -1 with no stacking context on the section: it paints in the root stacking context,
  above the body's ink and under every box of the section above. Contract for the section
  above: keep its own background transparent around the room (a painted section background
  would hide the ramp and the seam would fall back to that section's bottom edge).
*/
.lights-up {
  /* 140px on a desktop or a tall phone, down to 64px on a phone held sideways (390px tall),
     where 140px would light the gutters beside the proof text. */
  --lights-run: clamp(64px, 16svh, 140px);
  --lights-land: 80px;
}
.lights-up::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  bottom: 100%;
  height: calc(var(--lights-run) + var(--lights-land));
  /* Smoothstep stops (0, 16, 50, 84, 100% of the way) over the run; plain stops as a fallback. */
  background: linear-gradient(to bottom, var(--ink-0), #292827 calc(var(--lights-run) * 0.25), #777675 calc(var(--lights-run) * 0.5), #D0D0CF calc(var(--lights-run) * 0.75), var(--paper) var(--lights-run));
  background: linear-gradient(to bottom in oklab,
    var(--ink-0),
    color-mix(in oklab, var(--ink-0) 84%, var(--paper)) calc(var(--lights-run) * 0.25),
    color-mix(in oklab, var(--ink-0) 50%, var(--paper)) calc(var(--lights-run) * 0.5),
    color-mix(in oklab, var(--ink-0) 16%, var(--paper)) calc(var(--lights-run) * 0.75),
    var(--paper) var(--lights-run));
  pointer-events: none;
}

/* ---------- 11. Grain overlay (baked 256px tile; add as its own element) ---------- */
.grain {
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background-image: url("../media/texture/grain.png");
  background-repeat: repeat;
  background-size: var(--grain-size) var(--grain-size);
  opacity: var(--grain-opacity);
  pointer-events: none;
}
@media (min-resolution: 2dppx) {
  .grain {
    --grain-size: 160px;
  }
}

/* ---------- 12. Device frame: CSS iPhone with concentric radii ---------- */
.device {
  --device-w: clamp(240px, 24vw, 340px);
  --bezel: calc(var(--device-w) * 0.036);
  --r-out: calc(var(--device-w) * 0.15);
  --metal: #34302C;
  position: relative;
  flex: none;
  width: var(--device-w);
  padding: var(--bezel);
  border-radius: var(--r-out);
  background-color: #060505;
  box-shadow:
    inset 0 0 0 calc(var(--device-w) * 0.009) var(--metal),
    inset 0 1px 1px calc(var(--device-w) * 0.009) rgba(255, 246, 235, 0.16),
    0 1px 1px rgba(0, 0, 0, 0.5),
    0 10px 24px -8px rgba(0, 0, 0, 0.55),
    0 40px 90px -24px rgba(0, 0, 0, 0.7);
}
/* Side buttons: power on the right, action + volume on the left. */
.device::before,
.device::after {
  content: "";
  position: absolute;
  width: calc(var(--device-w) * 0.011);
  border-radius: 2px;
  background-color: var(--metal);
}
.device::before {
  right: calc(var(--device-w) * -0.009);
  top: 27%;
  height: 13%;
  border-radius: 0 2px 2px 0;
}
.device::after {
  left: calc(var(--device-w) * -0.009);
  top: 18%;
  height: 4%;
  border-radius: 2px 0 0 2px;
  box-shadow:
    0 calc(var(--device-w) * 0.13) 0 0 var(--metal),
    0 calc(var(--device-w) * 0.26) 0 0 var(--metal);
}
.device__screen {
  position: relative;
  isolation: isolate;
  aspect-ratio: 800 / 1740;
  border-radius: calc(var(--r-out) - var(--bezel));
  overflow: hidden;
  background-color: #000;
  /* iOS Safari ignores overflow + border-radius for composited children (video, layers with
     filter/opacity transitions), so their square corners poke out of the screen. A mask
     forces WebKit to clip everything inside to the rounded screen. */
  -webkit-mask-image: linear-gradient(#000, #000);
  mask-image: linear-gradient(#000, #000);
}
.device__screen > img,
.device__screen > video,
.device__screen > canvas,
.device__screen > picture,
.device__screen > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Kept on purpose: no user since the How it works phone dropped its island (2026-10-09), for a
   capture without a baked-in island; FOUNDATION.md 5. */
.device__island {
  position: absolute;
  top: calc(var(--bezel) + var(--device-w) * 0.028);
  left: 50%;
  z-index: 3;
  width: calc(var(--device-w) * 0.29);
  height: calc(var(--device-w) * 0.085);
  border-radius: var(--r-pill);
  background-color: #000;
  transform: translateX(-50%);
  pointer-events: none;
}

/* ---------- 13. Tag ("Example"), anchored to a frame corner ---------- */
.tag {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 9px;
  border-radius: 6px;
  background-color: rgba(10, 9, 8, 0.62);
  box-shadow: inset 0 0 0 1px rgba(245, 238, 228, 0.12);
  color: var(--fg-dark-2);
  font-family: var(--font-text);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.theme-paper .tag {
  background-color: var(--paper-2);
  box-shadow: inset 0 0 0 1px var(--paper-line);
  color: var(--charcoal-2);
}
/* A dark room inside a paper section keeps the dark tag. */
.theme-paper :is(.stage, .theme-ink) .tag {
  background-color: rgba(10, 9, 8, 0.62);
  box-shadow: inset 0 0 0 1px rgba(245, 238, 228, 0.12);
  color: var(--fg-dark-2);
}
/* Kept on purpose: the only corner anchor in use before the simplify pass (07-progress, now in
   .build/cut/). The other corners were removed as unused. */
.tag--tr {
  position: absolute;
  z-index: 5;
  top: 12px;
  right: 12px;
}

/* ---------- 14. Sound pill (play/stop with a thin linear progress bar) ---------- */
.sound-pill {
  --p: 0;
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 44px;
  padding: 0 16px 0 6px;
  border-radius: var(--r-pill);
  background-color: rgba(20, 18, 16, 0.56);
  box-shadow: inset 0 0 0 1px rgba(245, 238, 228, 0.12);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  color: var(--fg-dark);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  transition:
    background-color var(--dur-2) var(--ease-out),
    transform var(--dur-1) var(--ease-out);
}
@media (hover: hover) {
  .sound-pill:hover {
    background-color: rgba(34, 31, 28, 0.66);
  }
}
.sound-pill:active {
  transform: scale(0.97);
}
.sound-pill__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: var(--fg-dark);
  color: var(--ink-0);
  flex: none;
}
.sound-pill__icon svg {
  grid-area: 1 / 1;
  width: 14px;
  height: 14px;
  fill: currentColor;
  transition:
    opacity var(--dur-2) var(--ease-out),
    transform var(--dur-2) var(--ease-out);
}
.sound-pill__icon .i-play {
  transform: translateX(1px);
}
.sound-pill__icon .i-stop {
  opacity: 0;
  transform: scale(0.6);
}
.sound-pill[aria-pressed="true"] .i-play {
  opacity: 0;
  transform: scale(0.6);
}
.sound-pill[aria-pressed="true"] .i-stop {
  opacity: 1;
  transform: none;
}
.sound-pill__meta {
  color: var(--fg-dark-3);
  font-weight: 400;
}
.sound-pill__meta::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin: 0 8px 0 0;
  border-radius: 50%;
  background-color: currentColor;
  vertical-align: middle;
  transform: translateY(-1px);
}
.sound-pill__bar {
  position: absolute;
  left: 48px;
  right: 16px;
  bottom: 7px;
  height: 2px;
  border-radius: 2px;
  background-color: rgba(245, 238, 228, 0.16);
  overflow: hidden;
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease-out);
}
.sound-pill__fill {
  display: block;
  width: 100%;
  height: 100%;
  background-color: var(--fg-dark);
  transform: scaleX(var(--p));
  transform-origin: 0 50%;
}
.sound-pill[aria-pressed="true"] .sound-pill__bar {
  opacity: 1;
}

/* ---------- 15. Pause motion toggle ---------- */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px 0 10px;
  border-radius: var(--r-pill);
  box-shadow: inset 0 0 0 1px var(--line-2);
  color: var(--fg-2);
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1;
  transition:
    color var(--dur-2) var(--ease-out),
    background-color var(--dur-2) var(--ease-out),
    box-shadow var(--dur-2) var(--ease-out);
}
.motion-toggle svg {
  width: 14px;
  height: 14px;
  fill: currentColor;
}
.motion-toggle .i-resume {
  display: none;
}
/* .is-paused is set by core.js while motion is paused (the label then reads "Play motion"). */
.motion-toggle.is-paused {
  color: var(--ink-0);
  background-color: var(--fg-dark);
  box-shadow: none;
}
.motion-toggle.is-paused .i-pause {
  display: none;
}
.motion-toggle.is-paused .i-resume {
  display: block;
}
@media (hover: hover) {
  .motion-toggle:not(.is-paused):hover {
    color: var(--fg);
    box-shadow: inset 0 0 0 1px rgba(245, 238, 228, 0.3);
  }
}
@media (pointer: coarse) {
  .motion-toggle {
    height: 44px;
  }
}

/* ---------- 16. Footer (dark translucent sheet + giant cropped wordmark) ---------- */
.footer {
  position: relative;
  z-index: 2;
  padding: 0 var(--frame-inset) calc(var(--frame-inset) + var(--safe-bottom));
  color: var(--fg-dark);
}
.footer__sheet {
  position: relative;
  container-type: inline-size;
  overflow: hidden;
  border-radius: var(--frame-radius);
  background-color: rgba(20, 18, 16, 0.84);
  box-shadow:
    inset 0 0 0 1px rgba(245, 238, 228, 0.07),
    inset 0 1px 0 rgba(245, 238, 228, 0.06);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  backdrop-filter: blur(20px) saturate(1.2);
  --fg: var(--fg-dark);
  --fg-2: var(--fg-dark-2);
  --fg-3: var(--fg-dark-3);
  --line: var(--line-dark);
  --line-2: var(--line-dark-2);
  --focus: var(--fg-dark);
}
.footer__body {
  display: grid;
  gap: 40px;
  padding: clamp(32px, 5vw, 64px) clamp(20px, 4.4vw, 64px) 0;
  /* Notched phones held sideways: keep the copy 16px clear of the safe area. The sheet already
     sits --frame-inset in from the page edge, so that part of the inset is subtracted. */
  padding-left: max(clamp(20px, 4.4vw, 64px), calc(var(--safe-left) - var(--frame-inset) + 16px));
  padding-right: max(clamp(20px, 4.4vw, 64px), calc(var(--safe-right) - var(--frame-inset) + 16px));
}
.footer__top {
  display: grid;
  gap: 40px;
}
.footer__brand {
  display: grid;
  gap: 18px;
  align-content: start;
  max-width: 420px;
}
.footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  min-height: 44px;
  color: var(--fg-dark);
}
.footer__logo .mark {
  height: 26px;
}
.footer__logo span {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 24px;
  line-height: 1;
}
.footer__line {
  font-size: var(--text-lead);
  line-height: 1.45;
  color: var(--fg-dark-2);
  text-wrap: pretty;
}
.footer__cols {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 28px 24px;
}
.footer__col:last-child {
  grid-column: 1 / -1;
}
.footer__head {
  margin-bottom: 10px;
  font-size: var(--text-label);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--fg-dark-3);
}
.footer__list {
  display: grid;
  justify-items: start;
  gap: 0;
  list-style: none;
  padding: 0;
}
.footer__list a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  font-size: 15px;
  line-height: 1.3;
  color: var(--fg-dark-2);
  transition: color var(--dur-2) var(--ease-out);
}
.footer__list a:hover {
  color: var(--fg-dark);
}
.footer__list a[aria-current="page"] {
  color: var(--fg-dark);
}
/* Touch: 44px targets with a little air between them (short words get a 44px width too). */
@media (max-width: 899px), (pointer: coarse) {
  .footer__list {
    gap: 4px;
  }
  .footer__list a {
    min-height: 44px;
    min-width: 44px;
  }
}
.footer__list svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
}
.footer__bottom {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid var(--line-dark);
}
.footer__copy {
  font-size: var(--text-small);
  color: var(--fg-dark-3);
}
/* Giant wordmark, cropped by the bottom edge of the sheet. */
.footer__word {
  display: flex;
  justify-content: center;
  height: 0.7em;
  margin-top: clamp(8px, 1.6vw, 24px);
  overflow: hidden;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 30.5vw;
  font-size: 30.5cqw;
  line-height: 0.9;
  letter-spacing: -0.01em;
  color: #2B2825;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: none;
}
.footer__word span {
  display: inline-block;
}
html.js .footer__word span {
  transform: translateY(0.34em);
  transition: transform var(--dur-6) var(--ease-out);
  transition-delay: calc(var(--i, 0) * var(--stagger));
}
html.js .footer__word.is-in span {
  transform: none;
}

@media (min-width: 720px) {
  .footer__cols {
    grid-template-columns: repeat(3, auto);
    justify-content: space-between;
    column-gap: 40px;
  }
  .footer__col:last-child {
    grid-column: auto;
  }
}
@media (min-width: 1024px) {
  .footer__top {
    grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
    gap: 48px;
  }
  .footer__cols {
    justify-self: end;
    width: min(100%, 620px);
  }
}
.theme-paper .footer__sheet {
  background-color: var(--ink-1);
}
/* Homepage: the light page runs into the footer. While the closer's stage pins (get.js), the
   sheet scrolls up over it and the footer's gutters sit over the closer's own paper. Where it
   does not pin (no JS, reduced motion, windows 620px tall or less; 09-get.css), the footer
   simply follows the closer, so it carries the paper itself, keeps the frame gutter between the
   sky and the sheet (the two rounded panels would touch with paper notches between their
   corners) and the sheet turns solid ink, as on the subpages (a translucent sheet over plain
   paper reads as a muddy grey). Never while
   pinned: the sheet's backdrop blur would sample the footer's own paper instead of the sky.
   Scoped to the homepage (the page whose main ends in #get); subpages are untouched. */
html:not(.js) main:has(> #get) + .footer,
html.reduced main:has(> #get) + .footer {
  padding-top: var(--frame-inset);
  background-color: var(--paper);
}
html:not(.js) main:has(> #get) + .footer .footer__sheet,
html.reduced main:has(> #get) + .footer .footer__sheet {
  background-color: var(--ink-1);
}
@media (prefers-reduced-motion: reduce), (max-height: 620px) {
  main:has(> #get) + .footer {
    padding-top: var(--frame-inset);
    background-color: var(--paper);
  }
  main:has(> #get) + .footer .footer__sheet {
    background-color: var(--ink-1);
  }
}
@media (max-width: 599px) {
  .footer__sheet {
    background-color: rgba(20, 18, 16, 0.96);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .footer__bottom {
    flex-direction: column-reverse;
    align-items: flex-start;
  }
}

/* ---------- 17. Reveal utilities ---------- */
/*
  data-reveal="fade" | "fade-rise" | "blur-rise" | "rise"
  Start states apply only under html.js; core.js adds .is-in when the element
  (or its [data-reveal-group]) scrolls into view. Stagger with --i (index),
  --reveal-stagger (default 80ms) and --reveal-delay. Never on the hero h1.
*/
html.js [data-reveal] {
  transition-property: opacity, transform, filter;
  transition-duration: var(--reveal-dur, var(--dur-5));
  transition-timing-function: var(--ease-out);
  transition-delay: calc(var(--reveal-delay, 0ms) + var(--i, 0) * var(--reveal-stagger, var(--stagger-cine)));
}
html.js [data-reveal]:not(.is-in) {
  opacity: 0;
}
html.js [data-reveal="fade-rise"]:not(.is-in) {
  transform: translateY(18px);
}
html.js [data-reveal="rise"]:not(.is-in) {
  transform: translateY(0.34em);
}
html.js [data-reveal="blur-rise"]:not(.is-in) {
  transform: translateY(0.12em);
  filter: blur(8px);
}
html.js [data-reveal="blur-rise"] {
  --reveal-dur: var(--dur-6);
}
html.js [data-reveal="fade"] {
  --reveal-dur: var(--dur-4);
}

/* ---------- 18. Paper long-form (subpages) ---------- */
.longform {
  width: 100%;
  max-width: calc(680px + var(--gutter) * 2);
  margin-inline: auto;
  padding: calc(var(--nav-space) + clamp(48px, 9vh, 96px)) var(--gutter) clamp(80px, 12vh, 140px);
  color: var(--fg);
  font-size: var(--text-body);
  line-height: 1.65;
}
.longform__head {
  display: grid;
  gap: 14px;
  margin-bottom: clamp(32px, 5vh, 48px);
  padding-bottom: clamp(24px, 3vh, 32px);
  border-bottom: 1px solid var(--line);
}
.longform__head h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-l);
  line-height: 1;
  letter-spacing: -0.01em;
}
.longform__meta {
  font-size: var(--text-small);
  color: var(--fg-3);
}
.longform h2 {
  margin: 2.2em 0 0.6em;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--display-s);
  line-height: 1.15;
  scroll-margin-top: calc(var(--nav-space) + 24px);
}
.longform h3 {
  margin: 1.8em 0 0.5em;
  font-size: 18px;
  font-weight: 600;
  line-height: 1.35;
  scroll-margin-top: calc(var(--nav-space) + 24px);
}
.longform h2 + h3 {
  margin-top: 0.8em;
}
.longform p,
.longform ul,
.longform ol,
.longform table,
.longform address,
.longform blockquote {
  margin: 0 0 1.05em;
}
.longform ul,
.longform ol {
  padding-left: 1.3em;
}
.longform li {
  margin: 0 0 0.45em;
  padding-left: 0.2em;
}
.longform li::marker {
  color: var(--fg-3);
}
.longform strong,
.longform b {
  font-weight: 600;
}
.longform a:not([class]) {
  color: var(--orange-deep);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.2em;
  text-decoration-color: rgba(204, 74, 0, 0.35);
  overflow-wrap: anywhere;
  transition: text-decoration-color var(--dur-2) var(--ease-out);
}
.longform a:not([class]):hover {
  text-decoration-color: currentColor;
}
.longform hr {
  height: 1px;
  margin: 2.4em 0;
  border: 0;
  background-color: var(--line);
}
.longform blockquote {
  padding-left: 18px;
  border-left: 2px solid var(--line-2);
  color: var(--fg-2);
}
.longform table {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
  line-height: 1.5;
}
.longform th,
.longform td {
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.longform th {
  font-size: var(--text-label);
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--fg-2);
  border-bottom-color: var(--line-2);
}
.longform tr:last-child td {
  border-bottom: 0;
}
/* The imprint's address block */
.address {
  display: block;
  padding: 20px 24px;
  border-radius: var(--r-3);
  background-color: var(--surface-1);
  box-shadow: inset 0 0 0 1px var(--line);
  font-style: normal;
  line-height: 1.6;
}
.address strong {
  font-weight: 600;
}

/* ---------- 19. Cross-document view transitions ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition {
    navigation: auto;
  }
  ::view-transition-old(root) {
    animation: grv-vt-out var(--dur-2) var(--ease-out) both;
  }
  ::view-transition-new(root) {
    animation: grv-vt-in var(--dur-4) var(--ease-out) both;
  }
}
@keyframes grv-vt-out {
  to {
    opacity: 0;
  }
}
@keyframes grv-vt-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

/* ---------- 20. Reduced motion and Pause motion ---------- */
/* Reduced motion: every foundation start state resolves to its final, readable state. */
@media (prefers-reduced-motion: reduce) {
  html.js [data-reveal],
  html.js [data-reveal]:not(.is-in) {
    opacity: 1;
    transform: none;
    filter: none;
    transition: none;
  }
  html.js .footer__word span {
    transform: none;
    transition: none;
  }
  .nav__glass,
  .nav__brand,
  .nav__end,
  .nav__indicator,
  .btn-get,
  .btn-get__tile,
  .btn-get__arrow,
  .sound-pill,
  .skip-link {
    transition-duration: 0.01ms;
  }
}
/* html.reduced mirrors the media query (set by the head snippet and core.js). */
html.reduced [data-reveal],
html.reduced [data-reveal]:not(.is-in) {
  opacity: 1;
  transform: none;
  filter: none;
  transition: none;
}
html.reduced .footer__word span {
  transform: none;
  transition: none;
}
/* Pause motion: reveals still happen, instantly. Long-running motion is each section's job. */
html.motion-paused [data-reveal],
html.motion-paused .footer__word span {
  transition: none;
}

/*
  Global freeze (integrator). While html.still is set (Pause motion or reduced motion), every
  CSS animation on the page holds its current frame: loops (marquee, cloud drift, still drift,
  shimmers) stop in place instead of snapping back. It is !important and keyed on the root
  class so no section motion rule can outrank it (section rules like
  `html.js:not(.reduced) .s-x__y { animation: ... }` used to win over `html.still .s-x__y`).
  JS-driven motion (videos, the Medallion, rAF loops, timers) stops through GRV.still and the
  'grv:motion' event in each script.
  Rules for section CSS:
  - Gate entrance keyframes with :not(.still) (see .s-top), or they freeze at their first frame.
  - An element the visitor explicitly restarts while paused (the closer's local play) carries
    [data-motion-allow] on an ancestor and is exempt.
*/
html.still body *:not([data-motion-allow], [data-motion-allow] *),
html.still body *:not([data-motion-allow], [data-motion-allow] *)::before,
html.still body *:not([data-motion-allow], [data-motion-allow] *)::after {
  animation-play-state: paused !important;
}
/* Reveals resolve instantly while still, whatever a section rule says about their transition. */
html.still [data-reveal],
html.still .footer__word span {
  transition-duration: 0s !important;
  transition-delay: 0s !important;
}