@font-face {
  font-family: InnerNotePlayfairDisplay;
  font-style: normal;
  font-weight: 500;
  font-display: block;
  src: url(/assets/fonts/PlayfairDisplay_500Medium.ce154cc670.woff2) format('woff2');
}
@font-face {
  font-family: InnerNoteFigtree;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Figtree_400Regular.2acd8ba6b5.woff2) format('woff2');
}
@font-face {
  font-family: InnerNoteFigtreeMedium;
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/assets/fonts/Figtree_500Medium.f60f59ed88.woff2) format('woff2');
}
@font-face {
  font-family: InnerNoteIBMPlexMono;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/IBMPlexMono_400Regular.2b6c3881a0.woff2) format('woff2');
}
@font-face {
  font-family: InnerNoteSpectral;
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/assets/fonts/Spectral_400Regular.78612dcd4c.woff2) format('woff2');
}
@font-face {
  font-family: InnerNoteMarcellus;
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(/assets/fonts/Marcellus_400Regular.f111264ab0.woff2) format('woff2');
}
:root {
  color-scheme: dark;
  --ground: #0B2837;
  --surface: #14374A;
  --ink: #F4F5F7;
  --ink-secondary: rgba(244, 245, 247, 0.62);
  --rule: rgba(244, 245, 247, 0.14);
  --control-edge: rgba(244, 245, 247, 0.45);
  --card-edge: rgba(230, 138, 112, 0.70);
  --accent-text: #E68A70;
  --focus: #E68A70;
  --error: #F08A80;
  --secondary: #F4F5F7;
  --on-secondary: #0B2837;
  --apple: #FFFFFF;
  --on-apple: #000000;
  --highlight: color-mix(in srgb, var(--ink) 7%, transparent);
  --shade: color-mix(in oklab, var(--ground), black 70%);
  --lift: inset 0 1px 0 var(--highlight), 0 1px 2px color-mix(in srgb, var(--shade) 50%, transparent), 0 12px 32px -14px color-mix(in srgb, var(--shade) 70%, transparent);
  --lift-raised: inset 0 1px 0 var(--highlight), 0 2px 4px color-mix(in srgb, var(--shade) 50%, transparent), 0 22px 48px -18px color-mix(in srgb, var(--shade) 80%, transparent);
  --accent: #B4472E;
  --on-accent: #FBF7EF;
  --paper: #F6F2EA;
  --paper-ink: #2A2620;
  --paper-ink-secondary: #6E665A;
  --paper-rule: rgba(42, 38, 32, 0.10);
  --gutter: 20px;
  --hit: 44px;
  --reading: 640px;
  --column: 680px;
  --measure: 640px;
  --site: 1120px;
  --edges: max(var(--gutter), calc((100% - var(--site)) / 2));
  --answer: 200ms;
  --arrive: 600ms;
  --ease: cubic-bezier(0.2, 0.8, 0.3, 1);
  --breath: 6000ms;
  /* A paper sheet's margin round its words. */
  --sheet-pad: clamp(20px, 1rem + 3vw, 56px);
}
/* Paper on the marine desk: a sheet of the cream with rounded corners, its
   own hairline edge and the deep ground's shadow under it. The same roles,
   redefined, so every component reads right on it. */
.paper {
  color-scheme: light;
  --ground: #F6F2EA;
  --surface: #FBF7EF;
  --ink: #2A2620;
  --ink-secondary: #6E665A;
  --rule: rgba(42, 38, 32, 0.10);
  --control-edge: rgba(42, 38, 32, 0.55);
  --card-edge: color-mix(in srgb, #9E452F 55%, transparent);
  --accent-text: #9E452F;
  --focus: #9E452F;
  --error: #9E452F;
  --secondary: #0B2837;
  --on-secondary: #F4F5F7;
  --apple: #000000;
  --on-apple: #FFFFFF;
  --highlight: color-mix(in srgb, white 70%, transparent);
  --shade: color-mix(in srgb, #2A2620 60%, transparent);
  --lift: inset 0 1px 0 var(--highlight), 0 1px 2px color-mix(in srgb, #2A2620 6%, transparent), 0 14px 32px -18px color-mix(in srgb, #2A2620 28%, transparent);
  --lift-raised: inset 0 1px 0 var(--highlight), 0 2px 4px color-mix(in srgb, #2A2620 7%, transparent), 0 24px 48px -20px color-mix(in srgb, #2A2620 34%, transparent);
  background: var(--ground);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: 24px;
  box-shadow: 0 2px 4px color-mix(in srgb, #041016 35%, transparent), 0 22px 32px -12px color-mix(in srgb, #041016 70%, transparent), 0 48px 96px -40px color-mix(in srgb, #041016 60%, transparent);
}
/* A sheet: paper with a margin round its words. */
.sheet { padding: calc(var(--sheet-pad) + 8px) var(--sheet-pad); }
.paper.sheet > :first-child, .paper.sheet > .prose:first-child > :first-child { margin-top: 0; }
.paper.sheet > :last-child { margin-bottom: 0; }
/* The sheet's own edge closes the last question; no rule doubles it. */
.paper.sheet > .faq:last-child > div:last-child { border-bottom: 0; padding-bottom: 0; }
@media (prefers-contrast: more) {
  :root { --ink-secondary: #F4F5F7; }
  .paper { --ink-secondary: #2A2620; }
}
*, *::before, *::after { box-sizing: border-box; }
/* What a page hides stays hidden, whatever else sets its display. */
[hidden] { display: none !important; }
html {
  background: var(--ground);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  display: flex; flex-direction: column;
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--ground);
  /* The film grain over the marine. */
  background-image: url(/assets/grain.9f249688d5.svg);
  background-size: 180px 180px;
  color: var(--ink);
  font: 1rem/1.5rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-kerning: normal;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
/* The page fills the window between the bar and the foot. */
body > main { flex: 1 0 auto; width: 100%; }
/* Links are words, never orange: the ink, underlined. */
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
a:focus-visible, .skip:focus {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
  border-radius: 12px;
}
/* The ember full stop: the hero's line alone keeps it. Its halo stays
   unseen until the motion section lets it breathe. */
.stop { color: var(--accent-text); }
h1 .stop { position: relative; isolation: isolate; }
h1 .stop::after {
  content: ''; position: absolute; z-index: -1; left: 50%; top: 74%; width: 0.75em; height: 0.75em; translate: -50% -50%;
  border-radius: 999px; pointer-events: none; opacity: 0;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent-text) 32%, transparent), transparent);
}
.nowrap { white-space: nowrap; }
/* A label: small, calm, in the secondary ink. */
.label {
  margin: 0;
  color: var(--ink-secondary);
  font: 500 0.875rem/1.25rem InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.01em;
}
.label svg { flex: none; }
/* A section's label above its title, in the accent, a short ember rule over it. */
.label.kicker { color: var(--accent-text); }
.label.kicker::before { content: ''; display: block; width: 24px; height: 2px; margin-bottom: 12px; background: var(--accent-text); }
/* The way past the bar for a keyboard: shown only when it has focus. */
.skip {
  position: absolute; left: var(--gutter); top: -100%;
  display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 16px;
  background: var(--ground); color: var(--ink); border: 1px solid var(--control-edge); border-radius: 12px;
  text-decoration: none;
}
.skip:focus { top: var(--gutter); z-index: 5; }
/* Titles set their lines evenly. */
h1, h2, h3 { text-wrap: balance; }

/* The privacy line, as on sign-in: the small lock, then the sentence, both
   in the secondary style. */
.promise {
  display: flex; align-items: flex-start; gap: 8px;
  margin: 0;
  color: var(--ink-secondary);
  font: 0.9375rem/1.25rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-wrap: pretty;
}
.promise .lock {
  flex: none; margin-top: 2px;
  width: 16px; height: 16px;
  color: var(--accent-text);
}
.check { flex: none; width: 18px; height: 18px; color: var(--accent-text); }

/* The bar: the wordmark, the nav and Get InnerNote, full width, the words
   kept to the page; always the marine. */
.topbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px;
  padding: max(10px, env(safe-area-inset-top)) var(--edges) 10px;
  border-bottom: 1px solid var(--rule);
  background: var(--ground);
  position: relative; z-index: 3;
}
.wordmark {
  display: inline-flex; align-items: center; min-height: var(--hit); margin-right: auto;
  color: var(--ink); font: 0.9375rem/1.25rem InnerNoteMarcellus, Georgia, serif;
  letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none;
}
/* The wordmark's ember full stop, as the brand sets it ("InnerNote."); the
   name read aloud stays "InnerNote". */
.wordmark::after { content: '.'; content: '.' / ''; color: var(--accent-text); }
.topbar nav ul { display: flex; flex-wrap: wrap; gap: 0 4px; margin: 0; padding: 0; list-style: none; }
/* Under each item, a line kept at nothing until the item is under the
   pointer or is the page you are on; then it grows from the centre, in the
   orange for the page you are on. */
.topbar nav a {
  display: inline-flex; align-items: center; min-height: var(--hit); padding: 0 12px;
  color: var(--ink-secondary); font: 500 0.9375rem/1.25rem InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: none;
  background: linear-gradient(currentColor, currentColor) no-repeat 50% calc(50% + 0.95em) / 0 2px;
  background-origin: content-box;
}
.topbar nav a:hover { color: var(--ink); background-size: 100% 2px; }
.topbar nav a[aria-current] { color: var(--ink); background-image: linear-gradient(var(--accent-text), var(--accent-text)); background-size: 100% 2px; }
/* Get InnerNote: the primary button, a size down for the bar. */
.bar-cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 14px;
  font: 500 1.0625rem/1.5rem InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  min-height: var(--hit); padding: 0 18px; border-radius: 12px;
  background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), 0 1px 2px color-mix(in srgb, black 22%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--accent) 55%, transparent);
  font-size: 0.9375rem;
}
.bar-cta:active { background: color-mix(in srgb, var(--accent), black 14%); }
/* At a desk the bar stays at the top, the marine thinned under a blur. */
@media (min-width: 721px) {
  html { scroll-padding-top: calc(var(--hit) + 40px); }
  body:not(.write-page) .topbar { position: sticky; top: 0; view-transition-name: topbar; }
}
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  @media (min-width: 721px) {
    body:not(.write-page) .topbar {
      background: color-mix(in srgb, var(--ground) 82%, transparent);
      -webkit-backdrop-filter: blur(18px) saturate(1.2);
      backdrop-filter: blur(18px) saturate(1.2);
    }
  }
}
@media (min-width: 721px) and (prefers-reduced-transparency: reduce) {
  body:not(.write-page) .topbar { background: var(--ground); -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* The foot of every page: the wordmark, one row of plain links (the
   Privacy Policy and the Terms named in full), then the company. Always
   the marine. */
.foot {
  padding: 64px var(--edges) max(40px, env(safe-area-inset-bottom));
  border-top: 1px solid var(--rule);
}
.foot-mark { margin: 0; color: var(--ink); font: 0.9375rem/1.25rem InnerNoteMarcellus, Georgia, serif; letter-spacing: 0.2em; text-transform: uppercase; }
.foot-mark::after { content: '.'; content: '.' / ''; color: var(--accent-text); }
.foot-nav { margin: 16px 0 0; }
.foot ul { display: flex; flex-wrap: wrap; gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.foot a {
  display: inline-flex; align-items: center; min-height: var(--hit);
  color: var(--ink-secondary); font: 0.9375rem/1.4rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: none;
}
.foot a[aria-current='page'] { color: var(--ink); }
.foot a:hover { color: var(--ink); text-decoration: underline; }
.foot .imprint { margin: 48px 0 0; padding-top: 24px; border-top: 1px solid var(--rule); color: var(--ink-secondary); font: 0.8125rem/1.25rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }

/* The primary button: filled orange, the thing to press. A link on the
   content pages, a button on the checkout pages, the same shape. */
.store { margin: 0; }
.store-link, .btn-primary {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 14px;
  font: 500 1.0625rem/1.5rem InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  background: var(--accent); color: var(--on-accent); box-shadow: inset 0 1px 0 color-mix(in srgb, white 22%, transparent), 0 1px 2px color-mix(in srgb, black 22%, transparent), 0 10px 24px -10px color-mix(in srgb, var(--accent) 55%, transparent);
}
/* Pressed: a little deeper. */
.store-link:active, .btn-primary:active { background: color-mix(in srgb, var(--accent), black 14%); box-shadow: inset 0 1px 0 color-mix(in srgb, white 12%, transparent), 0 4px 10px -4px color-mix(in srgb, var(--accent) 45%, transparent); }
/* Under the pointer it rises into a deeper shadow (the lift is in the motion section). */
.store-link:not(.store-badge):hover, .btn-primary:not(:disabled):hover, .bar-cta:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, white 26%, transparent), 0 2px 4px color-mix(in srgb, black 22%, transparent), 0 16px 32px -13px color-mix(in srgb, var(--accent) 65%, transparent); }
.store-link img { display: block; height: 56px; width: auto; }
.store-badge { padding: 0; background: none; box-shadow: none; }
/* The secondary button: solid, never a faint outline. White with the marine
   label on the marine; the marine with a white label on the paper. */
.btn-secondary, .btn-quiet, .play-link {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 14px;
  font: 500 1.0625rem/1.5rem InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  background: var(--secondary); color: var(--on-secondary); box-shadow: inset 0 1px 0 color-mix(in srgb, white 14%, transparent), 0 1px 2px color-mix(in srgb, black 18%, transparent), 0 10px 22px -12px var(--shade);
}
.btn-secondary:active, .btn-quiet:active, .play-link:active { background: color-mix(in srgb, var(--secondary), var(--ground) 12%); }
.btn-secondary:hover, .btn-quiet:not(:disabled):not(.btn-danger):hover, .play-link:hover { box-shadow: inset 0 1px 0 color-mix(in srgb, white 14%, transparent), 0 1px 2px color-mix(in srgb, black 18%, transparent), 0 10px 22px -12px var(--shade), 0 0 0 4px color-mix(in srgb, var(--secondary) 14%, transparent); }
button:focus-visible, input:focus-visible, .link-button:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
button:disabled { opacity: 0.4; cursor: default; }
/* Delete: a strong outline in the error ink, never orange, never filled. */
.btn-quiet.btn-danger { background: none; color: var(--error); box-shadow: inset 0 0 0 1.5px var(--error); }
/* A link set as a button, for a choice that changes the page, not the address. */
.link-button {
  padding: 0; min-height: var(--hit); border: 0; background: none; cursor: pointer;
  color: var(--ink); font: 1.0625rem/1.55 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: underline; text-underline-offset: 0.2em;
}
/* The way in: the primary button, and the plain line beside or under it. */
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 32px 0 0; }
.actions { margin: 32px 0 0; }

/* The checkout pages: fields as the app's text fields, on their own fill;
   the error under its field in the error ink; the status line. */
.field { margin: 24px 0 0; }
.field input {
  display: block; width: 100%; min-height: 56px; margin-top: 8px; padding: 0 16px;
  border: 1px solid var(--control-edge); border-radius: 14px;
  background: var(--surface); color: var(--ink); font: 1.0625rem/1.55 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.field input[aria-invalid='true'] { border-color: var(--error); }
.field input::placeholder { color: var(--ink-secondary); }
.field-error, .status { margin: 8px 0 0; color: var(--error); font: 0.9375rem/1.4rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.status { color: var(--ink-secondary); margin-top: 16px; }
.doc .go { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.doc .go:empty, .doc .go:not(:has(:not([hidden]))) { display: none; }
.doc .more { margin: 16px 0 0; font: 1.0625rem/1.55 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.doc .sent { margin: 24px 0 0; color: var(--ink); font: 1.0625rem/1.55 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* What signing in or subscribing agrees to: plain, with both documents linked. */
.consent { margin: 24px 0 0; color: var(--ink-secondary); font: 0.9375rem/1.4rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.consent a { color: var(--ink); font-family: InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration-thickness: 1px; }
.signin h2, .account h2, .deleted h2 { margin: 40px 0 0; color: var(--ink); font: 500 1.625rem/2rem InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.signin .promise { margin-top: 24px; }
.turnstile { margin: 24px 0 0; min-height: 65px; }
/* "or", on the rule between the email and the other sign-ins. */
.or { display: flex; align-items: center; gap: 16px; margin: 32px 0 0; }
.or::before, .or::after { content: ''; flex: 1; border-top: 1px solid var(--rule); }
.google-button { margin: 24px 0 0; min-height: 52px; max-width: 400px; }
/* Sign in with Apple, as Apple draws it: white on the marine, black on the paper. */
.btn-apple {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 28px; border: 0; border-radius: 14px;
  font: 500 1.0625rem/1.5rem InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.005em; text-decoration: none; white-space: nowrap;
  cursor: pointer;
  margin-top: 24px;
  background: var(--apple); color: var(--on-apple);
}
.btn-apple:active { opacity: 0.85; }
.account .facts { margin-top: 24px; }
.account .facts dd { color: var(--ink); }
/* Stripe's reference, as Stripe writes it. */
.doc .reference { margin-top: 16px; }
.steps { margin: 16px 0 0; padding-left: 1.4rem; }
.steps li { margin: 8px 0 0; color: var(--ink); font: 1.1875rem/1.65 InnerNoteSpectral, Georgia, 'Times New Roman', serif; }
.welcome .store, .standing .store { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-top: 24px; }
/* "Open InnerNote" as a QR code, on a computer (founder, 28 October): the
   same tile as the type-only page's. */
.standing .qr { width: 172px; height: 172px; margin-top: 24px; padding: 8px; background: #FBF7EF; color: #2A2620; border-radius: 16px; }
.standing .qr svg { display: block; width: 100%; height: 100%; fill: currentColor; }

/* The home page: sections on the one marine ground, from the bar to the foot,
   set apart by the room between them; the cream only as paper cards on it. */
.band { padding: clamp(48px, 1.5rem + 4vw, 96px) var(--edges); }
.band > h2, .band h2 { margin: 0; color: var(--ink); font: 500 clamp(2rem, 1.3rem + 2.4vw, 3rem)/1.12 InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.band .lead { margin: 16px 0 0; max-width: 34rem; color: var(--ink-secondary); font: 1.25rem/1.75rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; text-wrap: pretty; }
/* The hero: the line and the way in, beside two of the app's own screens. */
.hero.band {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px 64px; align-items: center;
  padding-top: clamp(48px, 1rem + 5vw, 104px); padding-bottom: clamp(56px, 1.5rem + 5vw, 112px);
  position: relative; isolation: isolate; overflow: hidden;
}
/* A faint ember glow behind the line, kept inside the hero, so it can never
   push the page sideways. */
.hero.band::before {
  content: ''; position: absolute; z-index: -1; inset: -10% 40% 10% -10%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--accent) 22%, transparent), color-mix(in srgb, var(--accent) 7%, transparent) 58%, transparent);
}
.hero h1 { margin: 20px 0 0; color: var(--ink); font: 500 clamp(2.75rem, 1.4rem + 4vw, 4.5rem)/1.04 InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.hero .offer { margin: 24px 0 0; max-width: 30rem; color: var(--ink); font: 1.375rem/1.45 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; text-wrap: pretty; }
.safe { display: flex; align-items: center; gap: 8px; margin: 24px 0 0; color: var(--ink-secondary); font: 0.9375rem/1.25rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.safe .lock { flex: none; width: 16px; height: 16px; color: var(--accent-text); }
.free { margin: 16px 0 0; color: var(--accent-text); font: 500 1.0625rem/1.55 InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* A phone: the screen in a dark bezel, with the card's shadow. */
.phone {
  aspect-ratio: 1 / 2; padding: 6px; border-radius: 30px;
  background: color-mix(in oklab, #0B2837, black 55%);
  border: 1px solid rgba(244, 245, 247, 0.14); box-shadow: var(--lift-raised);
}
.phone img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top; border-radius: 24px; }
.hero-phones { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; width: 100%; max-width: 30rem; justify-self: end; }
.hero-phones .back { margin-top: 64px; }
/* How it works: three steps on one sheet of paper, a big ember number each,
   a hairline of the paper between them. */
.steps-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 48px 0 0; padding: calc(var(--sheet-pad) + 8px) 0; list-style: none; }
.steps-grid li { padding: 0 var(--sheet-pad); }
.steps-grid li + li { border-left: 1px solid var(--rule); }
.steps-grid .n { margin: 0; color: var(--accent-text); font: 500 3rem/1 InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.steps-grid h3 { margin: 16px 0 0; color: var(--ink); font: 500 1.625rem/2rem InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.steps-grid p:not(.n) { margin: 8px 0 0; color: var(--ink-secondary); font: 1.0625rem/1.55 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* Built private: a card of paper, the claim beside the sentence that proves it. */
.privacy-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px 64px; align-items: center; }
.privacy-grid.sheet { padding: calc(var(--sheet-pad) + 16px) var(--sheet-pad); }
.privacy .promise { max-width: 30rem; }
.privacy .actions { margin-top: 24px; }
/* InnerWork: on the marine, its own label, the player beside. */
.innerwork-head { display: grid; grid-template-columns: minmax(0, 1fr) 9rem; gap: 32px 64px; align-items: center; }
.innerwork-head .phone { transform: rotate(3deg); }
/* The pricing teaser: a card of paper, the line, and the way to the plans beside it. */
.price-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px 48px; }
.price .actions { margin: 0; }
/* The questions sit on the marine itself, under a hairline. */
.questions.band { border-top: 1px solid var(--rule); margin-inline: var(--edges); padding-inline: 0; }
/* The questions, two by two at a desk. */
.questions .faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 64px; margin-top: 32px; }

/* The five courses as cards, and the sixth for the ones to come: three by
   two at a desk. Each is a card: the surface thinning downward, a hairline
   edge, a soft layered shadow. Under the pointer it lifts, its edge turns
   ember and an ember glow rises from its corner. */
.courses { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 48px 0 0; padding: 0; list-style: none; }
.courses li { display: flex; }
.courses > li > a {
  position: relative; isolation: isolate; flex: 1;
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr auto; grid-template-areas: 'num chev' 'name name' 'meta meta';
  gap: 8px 16px; min-height: 176px; padding: 22px 24px 24px;
  border: 1px solid var(--rule); border-radius: 24px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--surface) 34%, transparent)); box-shadow: var(--lift);
  color: var(--ink); text-decoration: none;
}
.courses > li > a::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent-text) 16%, transparent), transparent 62%);
}
.courses .num { grid-area: num; color: var(--accent-text); font: 0.75rem/1rem InnerNoteIBMPlexMono, ui-monospace, Menlo, Consolas, monospace; letter-spacing: 0.0833em; }
.courses .name { grid-area: name; align-self: end; font: 500 1.75rem/2.1rem InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.courses .meta { grid-area: meta; color: var(--ink-secondary); font: 500 0.875rem/1.25rem InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.01em; }
.courses .chev { grid-area: chev; color: var(--accent-text); font: 1.25rem/1.75rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.courses > li > a:hover { border-color: var(--card-edge); box-shadow: var(--lift-raised); }
.courses > li > a:hover::before { opacity: 1; }
/* The sixth card: an open card, and the way to ask for a course. */
.courses .more-courses {
  flex-direction: column; justify-content: flex-end; gap: 16px; min-height: 176px; padding: 22px 24px 18px;
  border: 1px dashed var(--control-edge); border-radius: 24px;
}
.more-courses p { margin: 0; }
.more-courses a { display: inline-flex; align-items: center; min-height: var(--hit); color: var(--ink); font: 500 1.0625rem/1.55 InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.more-courses a::after { content: ' →'; content: ' →' / ''; margin-left: 6px; color: var(--accent-text); }
.doc .courses { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }

/* A course, a guide, pricing, the checkout and the content pages: one
   column on the marine, its head on the desk, its long reading on one sheet
   of paper. The sheet reaches past the column by its own margin, so the
   reading keeps the column's measure and lines up with the title. */
.doc { padding: 64px max(calc(12px + var(--sheet-pad)), calc((100% - var(--measure)) / 2)) 112px; }
.doc .sheet { margin: 48px calc(-1 * var(--sheet-pad)) 0; }
.doc h1 { margin: 8px 0 0; color: var(--ink); font: 500 clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem)/1.1 InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.doc .lead { margin: 16px 0 0; color: var(--ink); font: 1.25rem/1.75rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; text-wrap: pretty; }
.doc .read, .prose p, .prose li { margin: 16px 0 0; color: var(--ink); font: 1.1875rem/1.65 InnerNoteSpectral, Georgia, 'Times New Roman', serif; overflow-wrap: break-word; }
.doc h2, .prose h2 { margin: 56px 0 0; color: var(--ink); font: 500 1.625rem/2rem InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.prose h3 { margin: 32px 0 0; color: var(--ink); font: 500 1.3125rem/1.7rem InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.prose h4, .prose h5, .prose h6 { margin: 24px 0 0; color: var(--ink); font: 500 1.0625rem/1.55 InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.prose ul, .prose ol, .doc .builds { margin: 16px 0 0; padding-left: 1.2rem; }
.prose li, .doc .builds li { margin: 8px 0 0; color: var(--ink); font: 1.1875rem/1.65 InnerNoteSpectral, Georgia, 'Times New Roman', serif; }
.doc .builds li::marker, .prose li::marker { color: var(--accent-text); }
.prose blockquote { margin: 24px 0 0; padding-left: 18px; border-left: 3px solid var(--accent-text); }
.prose blockquote p { color: var(--ink-secondary); }
.prose hr { margin: 48px 0 0; border: 0; border-top: 1px solid var(--rule); }
.prose code { font: 0.9375rem/1.4rem InnerNoteIBMPlexMono, ui-monospace, Menlo, Consolas, monospace; }
.doc .promise { margin-top: 24px; }
.tracks { margin: 16px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.tracks li { padding: 20px 0; border-bottom: 1px solid var(--rule); }
.tracks .label { color: var(--ink); }
.tracks p:not(.label) { margin: 6px 0 0; color: var(--ink-secondary); font: 1.0625rem/1.55 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* The twenty-one days: a mark for each, today's in the accent. */
.strip { display: flex; gap: 6px; margin: 24px 0 0; }
.strip i { flex: 1; height: 6px; border-radius: 999px; background: var(--rule); }
.paper .strip i { background: color-mix(in srgb, var(--ink) 14%, transparent); }
.strip i.today { background: var(--accent-text); }
.strip i.kept { background: var(--ink); }
.strip + .label { margin-top: 8px; }
.review {
  display: flex; gap: 16px; align-items: flex-start;
  margin: 48px 0 0; padding: 20px 22px;
  border: 1px solid var(--rule); border-radius: 16px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--surface) 78%, transparent), color-mix(in srgb, var(--surface) 34%, transparent)); box-shadow: var(--lift);
}
.review .avatar { flex: none; width: var(--hit); height: var(--hit); border-radius: 999px; background: var(--rule); }
.review p:not(.label) { margin: 4px 0 0; color: var(--ink-secondary); font: 1rem/1.5rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.review .who { color: var(--ink); font-family: InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* The way in at the end of a course, or under the plans, on the marine. */
.cta { margin: 64px 0 0; }
.cta .note { margin: 8px 0 0; color: var(--ink-secondary); font: 1.0625rem/1.55 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.cta .cta-row { margin-top: 24px; }
/* At the end of a course, past the sheet: the one thing to press, on the desk. */
.doc .sheet + .cta { margin-top: 72px; }
.doc .cta h2 { margin: 0; }
.faq { margin: 0; }
.faq > div { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.faq dt { margin: 0; color: var(--ink); font: 500 1.1875rem/1.6rem InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.faq dd { margin: 8px 0 0; color: var(--ink-secondary); font: 1.0625rem/1.55 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.doc .faq { margin-top: 8px; }
.sources { margin: 12px 0 0; padding-left: 1.1rem; }
.sources li { margin: 6px 0 0; color: var(--ink-secondary); font: 1rem/1.5rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; overflow-wrap: break-word; }
/* The guides' list, and any list of pages: rows as the app's. */
.rows { margin: 32px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.rows li { padding: 24px 0; border-bottom: 1px solid var(--rule); }
.rows a { display: block; color: var(--ink); text-decoration: none; }
.rows .name { display: block; font: 500 1.3125rem/1.7rem InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.rows a:hover .name { text-decoration: underline; text-underline-offset: 0.2em; }
.rows .about { display: block; margin: 4px 0 0; color: var(--ink-secondary); font: 1.0625rem/1.55 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.rows .label { margin-top: 8px; }
.facts { margin: 16px 0 0; }
.facts div { display: grid; grid-template-columns: 12.5rem 1fr; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--rule); }
.facts dt { padding-top: 2px; }
.facts dd { margin: 0; color: var(--ink); font: 1.0625rem/1.55 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; overflow-wrap: break-word; }

/* Pricing: the two plans side by side, each a card of paper on the marine,
   the year marked with the accent's edge; what both include on the marine. */
.plans { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 48px 0 0; }
.plan { display: flex; flex-direction: column; gap: 8px; padding: 32px; }
.plan.chosen { border: 2px solid var(--accent); }
.plan p { margin: 0; }
.plan-name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; color: var(--ink); font: 500 1.0625rem/1.55 InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* The yearly saving, a filled orange pill. */
.save { display: inline-block; padding: 3px 10px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font: 500 0.875rem/1.25rem InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: 0.01em; }
.plan .price { margin-top: 16px; color: var(--ink); font: 500 3rem/1 InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.plan .per { color: var(--ink-secondary); font: 1rem/1.5rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* The year in context, under the plans: a price comparison, quietly. */
.value { margin: 24px 0 0; color: var(--ink); font: 1rem/1.5rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.included { margin: 56px 0 0; }
.included h2 { margin: 0; font: 500 1.3125rem/1.7rem InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.chips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 24px; margin: 16px 0 0; padding: 0; list-style: none; }
.chip { display: flex; align-items: center; gap: 10px; min-height: 32px; color: var(--ink); font: 1.0625rem/1.55 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.fine { margin: 16px 0 0; color: var(--ink-secondary); font: 0.9375rem/1.4rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.fine a { color: var(--ink); }
.pricing .fine:first-of-type { margin-top: 40px; }

/* Privacy, Terms, Terms & Privacy and Support: the app's text, word for
   word: the title and the date on the marine, the contents beside, the text
   on one sheet of paper, one column. */
.document { padding: 64px var(--edges) 112px; }
.document > * { max-width: var(--measure); margin-inline: auto; }
.document > .sheet { max-width: calc(var(--measure) + 2 * var(--sheet-pad)); }
.doc-head h1 { margin: 8px 0 0; color: var(--ink); font: 500 clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem)/1.1 InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.doc-head .label.kicker { margin-bottom: 0; }
.updated { margin: 12px 0 0; color: var(--ink-secondary); font: 0.9375rem/1.4rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* The contents: every section, linked. */
.toc { margin-top: 40px; padding: 24px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); }
.toc h2 { margin: 0; color: var(--ink); font: 500 0.9375rem/1.4rem InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.toc ul { margin: 8px 0 0; padding: 0; list-style: none; columns: 2 14rem; column-gap: 24px; }
.toc li { break-inside: avoid; }
.toc a { display: flex; align-items: center; min-height: var(--hit); color: var(--ink-secondary); font: 0.9375rem/1.4rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; text-decoration: none; }
.toc a:hover { color: var(--ink); text-decoration: underline; }
.legal-text { margin-top: 48px; }
.legal-text > .promise { margin: 0 0 24px; }
/* Long reading in Figtree, at a comfortable size; a long address breaks
   rather than pushing the page sideways. */
.document p:not(.label):not(.promise):not(.updated), .document li { color: var(--ink); font: 1.0625rem/1.75 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; overflow-wrap: break-word; }
.document .toc li, .document .toc a { font: 0.9375rem/1.4rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.document .lead { margin: 0; }
.document section { margin-top: 48px; }
.document section h2 { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--ink); font: 500 1.25rem/1.75rem InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; scroll-margin-top: 96px; }
.document section h2 .mark { width: 18px; height: 18px; color: var(--accent-text); }
.document section p { margin: 12px 0 0; }
.document section p + p { margin-top: 16px; }
/* Terms & Privacy's way to the full text: two rows to press. */
.document nav:not(.toc) > h2 { margin: 56px 0 0; color: var(--ink); font: 500 1.25rem/1.75rem InnerNoteFigtreeMedium, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.document .rows { margin-top: 16px; }
.document .rows li { padding: 0; }
.document .rows a {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  min-height: 60px; font: 500 1.3125rem/1.7rem InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif;
}
.document .rows a::after { content: '›'; color: var(--accent-text); font: 1.25rem/1.75rem InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
/* Support: the app's help centre, a group a section, each question over its
   answer in the reading face. */
.support .faq > div { padding: 16px 0; }
.support .faq > div:last-child { border-bottom: 0; }
.support .faq dt { font: 500 1.3125rem/1.7rem InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
.support .faq dd { margin: 8px 0 0; color: var(--ink); font: 1.0625rem/1.75 InnerNoteFigtree, system-ui, -apple-system, 'Segoe UI', sans-serif; }
.support .faq dd + dd { margin-top: 12px; }
/* The checkout's eyebrow, "Checkout · Yearly plan", once the script names the plan. */
.checkout #plan-label:not(:empty)::before { content: ' · '; }
@media (min-width: 1024px) {
  /* At a desk the contents stay beside the text as it scrolls. */
  .document.with-toc { display: grid; grid-template-columns: 15rem minmax(0, calc(var(--measure) + 2 * var(--sheet-pad))); column-gap: 48px; justify-content: center; align-items: start; }
  .document.with-toc > * { max-width: none; margin-inline: 0; }
  .with-toc .doc-head, .with-toc .legal-text { grid-column: 2; }
  .with-toc .doc-head { padding-inline: var(--sheet-pad); }
  .with-toc .toc { grid-column: 1; grid-row: 1 / span 2; position: sticky; top: 104px; margin-top: 0; padding: 0; border: 0; background: none; }
  .with-toc .toc ul { columns: auto; }
  .with-toc .toc a { min-height: 0; padding: 7px 0; line-height: 1.35; }
}

/* The 404: one line and the way home. */
.lost main.hero { max-width: calc(var(--reading) + 2 * var(--gutter)); margin: 0 auto; padding: 64px var(--gutter) 32px; }
.lost h1 { margin: 0; color: var(--ink); font: 500 clamp(2.25rem, 1.6rem + 2.4vw, 3.25rem)/1.1 InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }

/* Narrower than a desk: the line first, the phones under it. */
@media (max-width: 1023px) {
  .hero.band { grid-template-columns: minmax(0, 1fr); }
  .hero.band::before { inset: -10% 20% 45% -20%; }
  .hero-phones { justify-self: start; max-width: 26rem; }
}
@media (max-width: 720px) {
  :root { --gutter: 20px; --sheet-pad: 20px; }
  /* A reading page's sheet runs nearly to the window's edges; its head and
     contents line up with the sheet. */
  .document { padding-inline: 12px; }
  .document > .doc-head { padding-inline: var(--sheet-pad); }
  .topbar nav { order: 3; width: 100%; margin: 0 -10px; }
  .topbar nav a { padding: 0 10px; }
  .hero .offer { font-size: 1.1875rem; }
  .hero-phones { max-width: 20rem; gap: 16px; }
  .hero-phones .back { margin-top: 40px; }
  .steps-grid, .privacy-grid, .questions .faq, .plans, .chips { grid-template-columns: minmax(0, 1fr); }
  /* On a phone a step is a row: its number, then its line. */
  .steps-grid { margin-top: 32px; padding: 8px 0; }
  .steps-grid li { display: grid; grid-template-columns: 3rem minmax(0, 1fr); padding: 20px var(--sheet-pad); }
  .steps-grid li + li { border-left: 0; border-top: 1px solid var(--rule); }
  .steps-grid .n { grid-row: span 2; font-size: 2.25rem; }
  .steps-grid h3 { margin: 0; }
  .innerwork-head { grid-template-columns: minmax(0, 1fr) 6.5rem; gap: 16px; align-items: end; }
  .innerwork-head .phone { padding: 3px; border-radius: 16px; }
  .innerwork-head .phone img { border-radius: 13px; }
  /* On a phone the courses stack: a card each, as a row. */
  .courses, .doc .courses { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 32px; }
  .courses > li > a {
    grid-template-columns: 2.5rem minmax(0, 1fr) auto; grid-template-rows: auto; grid-template-areas: 'num name chev';
    align-items: center; min-height: 68px; padding: 10px 16px; border-radius: 16px;
  }
  .courses .name { align-self: center; font: 500 1.3125rem/1.7rem InnerNotePlayfairDisplay, Georgia, 'Times New Roman', serif; }
  .courses .meta { display: none; }
  .courses .more-courses { flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; min-height: 68px; padding: 10px 16px; border-radius: 16px; }
  .tracks li, .facts div { grid-template-columns: 1fr; gap: 6px; }
  .store-link, .btn-primary, .play-link { width: 100%; }
  .cta-row .store { width: 100%; }
}

/* Motion: see webMotion in scripts/site-theme.ts and docs/WEBSITE.md. */
@keyframes rise { from { opacity: 0; translate: 0 14px; } }
@keyframes rule-draw { from { transform: scaleX(0); } }
@keyframes ember-breath { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }
@keyframes ember-glow { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes save-pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent-text) 55%, transparent); scale: 1; }
  35% { scale: 1.06; }
  100% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent-text) 0%, transparent); scale: 1; }
}
@keyframes underline-in { from { background-size: 0 1px; } }
@keyframes bar-edge { from { border-bottom-color: transparent; } }
@keyframes reading-line { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: no-preference) {
  /* A same-site page change crossfades; at a desk the bar holds still over it. */
  @view-transition { navigation: auto; }
  /* An in-page link glides to its place (the live pages keep the plain jump). */
  html:has(> body:not(.checkout, .account, .welcome, .write-page)) { scroll-behavior: smooth; }

  /* Answers to the pointer and the keyboard: colour, edge and shadow ease in
     over 200ms; a course card lifts 2px, a button 1px. */
  a, button, .wordmark { transition: color var(--answer) ease, background-color var(--answer) ease, border-color var(--answer) ease, box-shadow var(--answer) ease, translate var(--answer) var(--ease); }
  .topbar nav a { transition: color var(--answer) ease, background-size 240ms var(--ease); }
  .courses > li > a::before { transition: opacity 240ms ease; }
  @media (hover: hover) {
    .courses > li > a:hover { translate: 0 -2px; }
    .store-link:not(.store-badge):hover, .btn-primary:not(:disabled):hover, .bar-cta:hover, .btn-secondary:hover, .btn-quiet:not(:disabled):hover { translate: 0 -1px; }
    .store-link:active, .btn-primary:active, .bar-cta:active, .btn-secondary:active, .btn-quiet:active { translate: 0 0; }
  }
  /* The page you are on: its line grows from the centre as the page opens. */
  .topbar nav a[aria-current] { animation: underline-in 600ms var(--ease) 210ms both; }

  /* The ember breathes: the wordmark's full stop dims and returns, a title's
     stop gathers a halo and lets it go, once every 6s. Never on /write,
     where someone is typing. */
  body:not(.write-page) .wordmark::after { animation: ember-breath var(--breath) ease-in-out infinite; }
  h1 .stop::after { animation: ember-glow var(--breath) ease-in-out infinite; }

  /* A page's head arrives in stages: each part rises 14px and settles. */
  :is(.doc, .doc > article) > .label:first-child, .doc-head > .kicker { animation: rise 600ms var(--ease) 0ms both; }
  .hero h1, :is(.doc, .doc > article, .doc-head) > h1 { animation: rise 600ms var(--ease) 70ms both; }
  :is(.doc, .doc > article) > .lead, .doc-head > .updated { animation: rise 600ms var(--ease) 140ms both; }
  .hero .offer { animation: rise 600ms var(--ease) 210ms both; }
  .hero .cta-row { animation: rise 600ms var(--ease) 280ms both; }
  .hero .safe { animation: rise 600ms var(--ease) 350ms both; }
  :is(.doc, .doc > article, .doc-head) > .kicker:first-child::before { transform-origin: 0 50%; animation: rule-draw 600ms var(--ease) 140ms both; }
  /* The two phones follow the line, a step apart. */
  @media (min-width: 721px) {
    .hero-phones > .phone:nth-child(1) { animation: rise 600ms var(--ease) 385ms both; }

    .hero-phones > .phone:nth-child(2) { animation: rise 600ms var(--ease) 490ms both; }

  }

  /* Pricing: the yearly saving pulses once, slowly, after the plans arrive. */
  .plan .save { animation: save-pulse 1800ms ease-out 880ms 1 both; }
}

/* As it scrolls in, each section and card rises 14px into place over the
   next 120px of scrolling, the second and third of a row a step
   behind. Only where the browser drives this itself; elsewhere everything is
   simply there. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band:not(.hero) > :is(h2, .lead, .actions, .cta-row, .steps-grid, .faq, .privacy-grid, .innerwork-head, .price-card),
    :is(.steps-grid, .courses, .rows) > li,
    .faq > div,
    .plans > .plan,
    :is(.doc, .doc .sheet) > :is(h2, .read, .builds, .tracks, .strip, .review, .cta, .faq, .included, .fine, .facts),
    :is(.doc, .doc .sheet) > .label:not(:first-child),
    .legal-text > :is(section, nav) {
      animation: rise var(--ease) both;
      animation-timeline: view();
      animation-range: entry var(--stagger, 0px) entry calc(var(--stagger, 0px) + 120px);
    }
    /* On a phone the hero's phones sit below the fold: they rise as they come. */
    @media (max-width: 720px) {
      .hero-phones > .phone { animation: rise var(--ease) both; animation-timeline: view(); animation-range: entry 0px entry calc(0px + 120px); }
    }
    :is(.plans, .steps-grid) > :nth-child(2), .courses > li:nth-child(3n + 2) { --stagger: 24px; }
    .steps-grid > :nth-child(3), .courses > li:nth-child(3n) { --stagger: 48px; }
  }
}

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* At a desk the bar finds its edge in the first 48px of scrolling. */
    @media (min-width: 721px) {
      body:not(.write-page) .topbar { animation: bar-edge linear both; animation-timeline: scroll(root); animation-range: 0px 48px; }
    }
    /* Long reading pages: a thin ember line across the top, as far as you have read. */
    body:is(.legal, .guide, .page)::before {
      content: ''; position: fixed; z-index: 4; inset: env(safe-area-inset-top, 0px) 0 auto; height: 2px;
      background: var(--accent-text); transform-origin: 0 50%; pointer-events: none;
      animation: reading-line linear both; animation-timeline: scroll(root);
    }
  }
}

/* Reduce motion: nothing moves, nothing loops, every state is its last. */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

@media print {
  :root, .paper { --ground: #fff; --ink: #000; --ink-secondary: #333; --rule: #ccc; --accent-text: #000; --error: #000; }
  .topbar, .foot, .skip, .hero-phones, .cta-row { display: none; }
  body { background-image: none; }
  .hero.band::before, body::before { display: none; }
  .courses a, .paper, .review, .phone { box-shadow: none; background: none; }
}