/* Ruminate — ruminateapp.com
 *
 * Paper & Forest, taken straight from the app (Sources/UI/Theme.swift):
 * one warm paper ground, one forest-green accent, the app's own two fonts
 * and its two motion curves. Nothing on this site loads from anywhere but
 * this domain: no web fonts service, no analytics, no scripts from a CDN.
 */

@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Manrope"; src: url("../fonts/Manrope-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-Medium.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Space Grotesk"; src: url("../fonts/SpaceGrotesk-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  /* Palette.paperTheme */
  --paper: #FBFAF7;
  --card: #EAE8E2;
  --card2: #F3F1EC;
  --ink: #151714;
  --ash: #6C6F68;
  --faint: #A6A8A0;
  --hairline: rgba(21, 23, 20, 0.10);
  --forest: #1E3327;
  --onforest: #F5F7F2;
  --moss: #3C6B4F;
  --sage: #D3E0CE;
  --wash: #E8EFE5;
  --shadow: rgba(30, 51, 39, 0.18);
  /* The app icon's ground, for the big green surfaces. */
  --icon: #274234;
  --icon-deep: #1C3127;

  /* Motion.standard / Motion.quick */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-quick: cubic-bezier(.25, 1, .4, 1);

  --r-s: 14px;
  --r: 22px;
  --r-l: 28px;

  --gutter: clamp(16px, 4vw, 40px);
  --max: 1180px;
  --read: 68ch;

  --f-display: "Space Grotesk", ui-sans-serif, system-ui, -apple-system, sans-serif;
  --f-text: "Manrope", ui-sans-serif, system-ui, -apple-system, sans-serif;

  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
/* Nothing may make the page wider than the screen: a phone then shows the
   whole wider page and pans or rubber-bands sideways. Bleeds that run past
   the edge on purpose are clipped at their own section, and these two lines
   are the safety net. Safari honours clip on html, not on body alone. */
html { overflow-x: clip; overscroll-behavior-x: none; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
  overscroll-behavior-x: none;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; }
p { margin: 0 0 1em; }
h1, h2, h3, h4 { font-family: var(--f-display); font-weight: 600; letter-spacing: -0.02em; line-height: 1.08; margin: 0; }
::selection { background: var(--sage); color: var(--forest); }
:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; border-radius: 6px; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--forest); color: var(--onforest); padding: 10px 16px; border-radius: 999px;
  text-decoration: none; font-weight: 600; transition: top .2s var(--ease-quick);
}
.skip:focus { top: 12px; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Paper grain: a faint noise laid over everything, so the ground reads as
   paper rather than as a flat hex value. Pure SVG, no image request. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 90; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.08 0 0 0 0 0.09 0 0 0 0 0.08 0 0 0 .05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: multiply;
}

/* ---------- Type helpers ---------- */
.eyebrow {
  font-family: var(--f-display); font-weight: 600; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--moss);
}
.lede { font-size: clamp(1.1rem, 1.6vw, 1.3rem); color: var(--ash); line-height: 1.55; max-width: 36em; }
.display { font-size: clamp(2.6rem, 6.4vw, 5.6rem); letter-spacing: -0.035em; line-height: 1; font-weight: 600; }
.h2 { font-size: clamp(2rem, 4.4vw, 3.6rem); letter-spacing: -0.03em; line-height: 1.02; }
.h3 { font-size: clamp(1.25rem, 2vw, 1.5rem); letter-spacing: -0.02em; line-height: 1.2; }
.muted { color: var(--ash); }
.center { text-align: center; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  transition: background-color .4s var(--ease), box-shadow .4s var(--ease), backdrop-filter .4s var(--ease);
}
.site-header.is-scrolled {
  background: rgba(251, 250, 247, .78);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--hairline);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 68px; }
.brand { display: inline-flex; align-items: center; color: var(--forest); text-decoration: none; }
.brand svg { height: 34px; width: 154px; fill: currentColor; }
.nav { display: flex; align-items: center; gap: clamp(10px, 2.4vw, 28px); font-family: var(--f-display); font-weight: 500; font-size: .95rem; }
.nav a { text-decoration: none; color: var(--ink); position: relative; padding: 6px 0; }
.nav a.pill { color: var(--onforest); padding: 9px 14px; }
.nav a:not(.pill)::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px; background: var(--moss);
  transform: scaleX(0); transform-origin: right; transition: transform .45s var(--ease);
}
.nav a:not(.pill):hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
@media (max-width: 640px) { .nav .hide-sm { display: none; } .nav a.pill { display: none; } }
.pill { white-space: nowrap; }

/* ---------- Pills / buttons ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 10px; border-radius: 999px; text-decoration: none;
  font-family: var(--f-display); font-weight: 600; letter-spacing: -0.005em;
  padding: 12px 20px; line-height: 1; border: 0; cursor: pointer; font-size: 1rem;
  transition: transform .5s var(--ease), background-color .3s var(--ease-quick), box-shadow .5s var(--ease);
}
.pill-forest { background: var(--forest); color: var(--onforest); box-shadow: 0 10px 30px -12px var(--shadow); }
.pill-forest:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -16px rgba(30, 51, 39, .45); }
.pill-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--hairline); }
.pill-ghost:hover { background: var(--card2); }
.pill-sm { padding: 9px 14px; font-size: .88rem; }

/* The App Store button before launch (owner's call 2026-10-17: no "Coming
   soon"). It is our own type in the badge's shape, with no Apple logo,
   because Apple's logo may only appear inside Apple's official badge. At
   launch it becomes that official badge, linked to the listing (README). */
.store {
  display: inline-flex; flex-direction: column; align-items: flex-start; padding: 9px 20px 10px; border-radius: 13px;
  background: #000; color: #fff; text-decoration: none; line-height: 1.1;
  box-shadow: inset 0 0 0 1px #A6A6A6;
}
.store small, .hero-cta .pill small { font-family: var(--f-text); font-weight: 400; font-size: .74rem; letter-spacing: .01em; }
.store strong, .hero-cta .pill strong { font-family: var(--f-display); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.02em; }

/* ---------- Reveal on scroll ---------- */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity .9s var(--ease), transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 90ms); }
[data-reveal="left"] { transform: translateX(-36px); }
[data-reveal="right"] { transform: translateX(36px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].in { opacity: 1; transform: none; }
.no-js [data-reveal] { opacity: 1; transform: none; }

/* Word-by-word rise, used on the big headlines. JS wraps each word. */
.rise .ln { display: block; }
.rise .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
.rise .w > span { display: inline-block; transform: translateY(105%); transition: transform 1.1s var(--ease); transition-delay: calc(var(--i, 0) * 70ms + var(--d, 0ms)); }
.rise.in .w > span { transform: none; }

/* ---------- Hero ---------- */
.hero { position: relative; padding: clamp(28px, 6vh, 64px) 0 0; isolation: isolate; overflow-x: clip; }
.hero-top { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hero .eyebrow { margin-bottom: 18px; }
@media (min-width: 900px) { .hero .eyebrow { font-size: .95rem; } }
/* The wordmark is written on the way the app's header writes itself
   (Wordmark + InkFlare in Sources/UI/Components.swift): no outline is traced
   first. The finished ink is revealed by a nib sweeping left to right — a
   solid block, then a soft band one nib wide (9/46 of the type size) fading
   to nothing, travelling the width plus one nib — and it glows while wet:
   a pale sage core (3/46 of the type size, 0.95 opaque) inside a moss halo
   (11/46, 0.55), rising with the nib, holding while the pen lifts, then
   draining as the ink dries. The mask goes on the svg and the glow on the
   wrapper, so the halo is cast by exactly the ink laid down so far and is
   free to spill past the nib. A CSS blur is twice a SwiftUI shadow radius;
   the type size is the drawn width over 2.84 (the glyph box the wordmark
   was traced into). The swash follows, as a single stroke, with the app's
   thinner halo (7/46, 0.45). All of it deliberately slower than the app:
   3.4s to write, 1.7s to dry. */
.wordmark-wrap {
  --wm: min(640px, 82vw);
  --type: calc(var(--wm) / 2.84);
  --nib: calc(var(--type) * 9 / 46);
  --core: calc(var(--type) * 3 / 46 * 2);
  --halo: calc(var(--type) * 11 / 46 * 2);
  line-height: 0;
  filter: drop-shadow(0 0 0 rgba(211, 224, 206, 0)) drop-shadow(0 0 0 rgba(60, 107, 79, 0));
  animation: flare 5.8s linear .3s forwards;
}
.wordmark-hero {
  width: var(--wm); height: auto; color: var(--forest); overflow: visible;
  -webkit-mask-image: linear-gradient(90deg, #000 calc(50% - var(--nib) / 2), transparent calc(50% + var(--nib) / 2));
  mask-image: linear-gradient(90deg, #000 calc(50% - var(--nib) / 2), transparent calc(50% + var(--nib) / 2));
  -webkit-mask-size: calc(200% + var(--nib)) 100%; mask-size: calc(200% + var(--nib)) 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 100% 0; mask-position: 100% 0;
  animation: write 3.4s cubic-bezier(.4, 0, .2, 1) .3s forwards;
}
.wordmark-hero path { fill: currentColor; }
@keyframes write { to { -webkit-mask-position: 0 0; mask-position: 0 0; } }
.swash {
  --wm: min(640px, 82vw);
  --halo: calc(var(--wm) / 2.84 * 7 / 46 * 2);
  width: min(560px, 72vw); height: 14px; margin-top: -4px; color: var(--forest); overflow: visible;
  filter: drop-shadow(0 0 0 rgba(60, 107, 79, 0));
  animation: swash-flare 3.25s linear 2.85s forwards;
}
.swash path { fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1.3s cubic-bezier(.3, 0, .3, 1) 2.85s forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
/* Wet for the 3.4s write, held 0.7s while the pen lifts, 1.7s to dry. */
@keyframes flare {
  0% { filter: drop-shadow(0 0 0 rgba(211, 224, 206, 0)) drop-shadow(0 0 0 rgba(60, 107, 79, 0)); animation-timing-function: cubic-bezier(.4, 0, .2, 1); }
  58.6%, 70.7% { filter: drop-shadow(0 0 var(--core) rgba(211, 224, 206, .95)) drop-shadow(0 0 var(--halo) rgba(60, 107, 79, .55)); animation-timing-function: ease-in-out; }
  100% { filter: drop-shadow(0 0 0 rgba(211, 224, 206, 0)) drop-shadow(0 0 0 rgba(60, 107, 79, 0)); }
}
@keyframes swash-flare {
  0% { filter: drop-shadow(0 0 0 rgba(60, 107, 79, 0)); animation-timing-function: cubic-bezier(.3, 0, .3, 1); }
  40%, 47.7% { filter: drop-shadow(0 0 var(--halo) rgba(60, 107, 79, .45)); animation-timing-function: ease-in-out; }
  100% { filter: drop-shadow(0 0 0 rgba(60, 107, 79, 0)); }
}
}

.hero h1 { margin-top: 26px; font-size: clamp(2.2rem, 5.2vw, 4.4rem); letter-spacing: -0.035em; max-width: 14em; }
.hero .lede { margin: 20px auto 0; text-align: center; }
/* The two hero buttons are one size and one shape (owner's call 2026-10-17):
   equal columns, rows as tall as the taller button, centred content, and
   the same two lines of type, small over large. On a phone they stack,
   still the same width and height. */
.hero-cta { display: grid; grid-template-columns: repeat(2, 13.5rem); grid-auto-rows: 1fr; gap: 14px; justify-content: center; margin-top: 30px; }
.hero-cta > * { box-sizing: border-box; height: 100%; justify-content: center; text-align: center; }
.hero-cta .store { align-items: center; }
.hero-cta .pill { flex-direction: column; gap: 0; line-height: 1.1; padding: 9px 20px 10px; border-radius: 13px; }
.hero-cta .pill-ghost { background: var(--forest); color: #fff; box-shadow: none; }
.hero-cta .pill-ghost:hover { background: var(--forest); filter: brightness(1.2); }
@media (max-width: 640px) { .hero-cta { grid-template-columns: 15rem; gap: 12px; } }

/* The stage: phone in the middle, facts drifting around it. */
.stage { position: relative; margin: clamp(40px, 7vh, 72px) auto 0; width: min(1000px, 100%); display: grid; place-items: center; padding-bottom: 40px; }
.stage::before {
  /* RecordButton's bloom, scaled up: the green gathers behind the phone.
     At 120vw it runs past a phone's edges, so .hero clips it sideways. */
  content: ""; position: absolute; z-index: -1; width: min(820px, 120vw); aspect-ratio: 1; top: 8%;
  background: radial-gradient(closest-side, rgba(211, 224, 206, .95), rgba(211, 224, 206, .55) 35%, rgba(232, 239, 229, .28) 60%, rgba(251, 250, 247, 0) 100%);
  filter: blur(8px);
}

.phone {
  /* A bare floating screen. Apple's marketing rules forbid drawing its
     devices, so there is no bezel, no island and no buttons: just the app. */
  --pw: min(340px, 78vw);
  position: relative; width: var(--pw); aspect-ratio: 1206 / 2462;
  border-radius: calc(var(--pw) * .11);
  background: var(--paper);
  /* A defined edge, not a bezel: a 1.5px forest-tinted line (owner, 2026-10-17). */
  box-shadow:
    0 0 0 1.5px rgba(30, 51, 39, .28),
    0 2px 0 rgba(255, 255, 255, .8) inset,
    0 60px 100px -40px rgba(21, 23, 20, .35),
    0 30px 60px -40px rgba(30, 51, 39, .55);
}
.phone .screen { position: relative; width: 100%; height: 100%; border-radius: inherit; overflow: hidden; background: var(--paper); }
.phone .screen img { width: 100%; height: 100%; object-fit: cover; }

/* The live recording, drawn in HTML so it can move. Mirrors the app's
   recording stage: a pulsing dot and timer, WaveBars around a midline with
   older bars fading, and the record button. As in the app, the words are
   written once recording stops, not while you talk. */
.rec { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 12% 8% 8%; font-family: var(--f-text); }
.rec-status { display: flex; align-items: center; gap: 8px; font-family: var(--f-display); font-weight: 600; font-size: calc(var(--pw) * .042); color: var(--ink); }
.rec-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--moss); animation: breathe 1.2s ease-in-out infinite alternate; }
@keyframes breathe { from { transform: scale(1); opacity: .55; } to { transform: scale(1.6); opacity: 1; } }
.rec-time { font-variant-numeric: tabular-nums; color: var(--ash); font-weight: 500; margin-left: auto; }
.rec-bars { display: flex; align-items: center; gap: 2.5px; height: 22%; margin: 10% 0 8%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 35%); mask-image: linear-gradient(90deg, transparent, #000 35%); }
.rec-bars i { flex: 1 0 auto; width: 3px; min-height: 3px; border-radius: 3px; background: var(--forest); height: calc(var(--h, .1) * 100%); transition: height .18s var(--ease-quick); }
.rec-text { font-size: calc(var(--pw) * .05); line-height: 1.5; color: var(--ink); min-height: 40%; }
.rec-text .word { opacity: 0; filter: blur(4px); transition: opacity .35s var(--ease), filter .4s var(--ease); }
.rec-text .word.on { opacity: 1; filter: none; }
.rec.done .rec-dot { animation: none; background: var(--ash); opacity: .6; }
@keyframes caret { 50% { opacity: 0; } }
.rec-dock { margin-top: auto; display: grid; place-items: center; }
.recbtn { position: relative; width: calc(var(--pw) * .21); aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; }
.recbtn::before { content: ""; position: absolute; inset: -18%; border-radius: 50%; background: var(--sage); }
.recbtn::after { content: ""; position: absolute; inset: -60%; border-radius: 50%; z-index: -1; background: radial-gradient(closest-side, rgba(211,224,206,.8), rgba(211,224,206,0)); }
.recbtn span { position: relative; width: 100%; height: 100%; border-radius: 50%; background: var(--forest); display: grid; place-items: center; }
.recbtn span::after { content: ""; width: 30%; height: 30%; border-radius: 22%; background: var(--onforest); }
.rec-saved {
  position: absolute; left: 8%; right: 8%; bottom: 24%; padding: 5% 6%; border-radius: calc(var(--pw) * .06);
  background: var(--card2); box-shadow: 0 12px 30px -18px var(--shadow);
  opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .6s var(--ease), transform .8s var(--ease);
}
.rec-saved.on { opacity: 1; transform: none; }
.rec-saved b { display: block; font-family: var(--f-display); font-weight: 600; font-size: calc(var(--pw) * .052); letter-spacing: -0.02em; }
.rec-saved small { display: block; color: var(--ash); font-size: calc(var(--pw) * .037); margin-top: 2px; }

/* Facts drifting around the phone. */
.chip {
  position: absolute; z-index: 2; display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px 10px 12px; border-radius: 999px; background: rgba(251, 250, 247, .92);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 var(--hairline), 0 14px 34px -18px var(--shadow);
  font-family: var(--f-display); font-weight: 600; font-size: .92rem; white-space: nowrap;
  animation: float 7s ease-in-out infinite; animation-delay: var(--delay, 0s);
}
.chip svg { width: 18px; height: 18px; stroke: var(--moss); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
@keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
.chip.c1 { left: 4%; top: 16%; --delay: -1s; }
.chip.c2 { right: 2%; top: 30%; --delay: -3s; }
.chip.c3 { left: 8%; top: 58%; --delay: -5s; }
.chip.c4 { right: 6%; top: 70%; --delay: -2s; }
@media (max-width: 760px) {
  /* On a phone the facts sit in a row under the screen instead of floating over it. */
  .stage { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
  .stage .phone { margin-bottom: 26px; }
  .chip { position: static; font-size: .84rem; padding: 8px 13px 8px 10px; animation: none; }
}

/* ---------- Marquee of spoken fragments ---------- */
.marquee { border-block: 1px solid var(--hairline); padding: 22px 0; overflow: hidden; margin-top: clamp(20px, 5vh, 50px); }
.marquee-track { display: flex; width: max-content; animation: marquee 60s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span { font-family: var(--f-display); font-weight: 500; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: -0.02em; color: var(--ash); white-space: nowrap; padding-right: .9em; }
.marquee-track span::after { content: "·"; color: var(--moss); padding-left: .9em; }
.marquee-track span:nth-child(3n+1) { color: var(--ink); }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
section { position: relative; }
section[id], [id].faq-group { scroll-margin-top: 76px; }
/* The vault's spinning ring is round, but its turning square box reaches
   past a phone's edge, so a section clips sideways at its own edge. */
.section { padding: clamp(80px, 13vh, 150px) 0; overflow-x: clip; }
.section-head { max-width: 760px; margin-bottom: clamp(40px, 7vh, 72px); }
.section-head.center { margin-inline: auto; }
.section-head .eyebrow { display: block; margin-bottom: 16px; }
.section-head .lede { margin-top: 18px; }
.section-head.center .lede { margin-inline: auto; }

/* ---------- How it works: one screen, four points ----------
   The owner's pick from four mockups (DECISIONS 2026-09-27). All four points
   stay on the page beside one screen. The point on screen is lit, and the
   rule down its left side fills like a clock; when it is full the next point
   is lit and the screen changes. A mouse lights the point it is over and
   holds the clock, with the rule full, for as long as it stays on the list.
   A tap, a click or the keyboard lights a point too. The clock is a CSS
   animation that site.js listens to, and it runs only while the story is on
   screen. Under 860px the phone column goes and the steps run in flow, each
   with its own screenshot. Without JS every point is simply lit. */
.story { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 6vw, 90px); align-items: center; }
.story-phone { display: grid; place-items: center; }
.story-phone .phone { --pw: min(320px, 70vw); }
.story-phone .screen img { position: absolute; inset: 0; opacity: 0; transform: scale(1.04); transition: opacity .7s var(--ease), transform 1s var(--ease); }
.story-phone .screen img.on { opacity: 1; transform: none; }
.steps { --dur: 5s; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.step { display: grid; grid-template-columns: 3px minmax(0, 1fr); column-gap: 24px; padding: 14px 0; }
.js .step { cursor: pointer; }
/* Unlit points are greyed with --ash (4.9:1 on paper), not faded with
   opacity, so their text still passes AA contrast. */
@media (min-width: 861px) {
  .js .step h3, .js .step .num { transition: color .6s var(--ease); }
  .js .step:not(.on) h3, .js .step:not(.on) .num { color: var(--ash); }
}
.step .rule { grid-row: 1 / span 3; position: relative; width: 3px; border-radius: 2px; overflow: hidden; background: var(--hairline); }
.step .rule b { position: absolute; inset: 0; background: var(--forest); transform: scaleY(0); transform-origin: top; }
.story.running .step.on .rule b { animation: rule var(--dur) linear forwards; }
.story.hold .step.on .rule b { animation: none; transform: none; }
@keyframes rule { from { transform: scaleY(0); } to { transform: scaleY(1); } }
.step .num { font-family: var(--f-display); font-weight: 600; color: var(--moss); font-size: .85rem; letter-spacing: .08em; }
.step h3 { font-size: clamp(1.35rem, 2.3vw, 1.9rem); letter-spacing: -0.025em; margin-top: 6px; }
.step h3 button { all: unset; cursor: pointer; }
.step h3 button:focus-visible { outline: 2px solid var(--moss); outline-offset: 5px; border-radius: 6px; }
.step p { color: var(--ash); font-size: 1.02rem; margin: 8px 0 0; max-width: 32em; }
.step .mobile-shot { display: none; }
@media (max-width: 860px) {
  .story { grid-template-columns: 1fr; }
  .story-phone { display: none; }
  .steps { gap: 0; }
  .step, .js .step { display: block; opacity: 1; cursor: auto; padding: 0 0 72px; }
  .step .rule { display: none; }
  .step .num { font-size: .95rem; margin-bottom: 14px; display: flex; align-items: center; gap: 12px; }
  .step .num::after { content: ""; height: 1px; width: 48px; background: currentColor; opacity: .5; transform-origin: left; transform: scaleX(0); transition: transform .9s var(--ease) .15s; }
  .step.on .num::after { transform: scaleX(1); }
  .step h3 { font-size: clamp(1.8rem, 3.4vw, 2.8rem); letter-spacing: -0.03em; margin-top: 0; }
  .step h3 button { cursor: auto; }
  .step p { font-size: 1.12rem; margin-top: 16px; max-width: 30em; }
  .step .mobile-shot { display: block; margin-top: 28px; }
  .step .mobile-shot .phone { --pw: min(290px, 72vw); margin: 0 auto; }
}

/* ---------- To-do demo ---------- */
.todo-demo { display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: center; }
.entry-card { background: var(--card2); border-radius: var(--r-l); padding: clamp(24px, 3.4vw, 40px); box-shadow: 0 1px 0 var(--hairline); }
.entry-card .meta { font-family: var(--f-display); font-size: .88rem; color: var(--ash); display: flex; gap: 10px; margin-bottom: 10px; }
.entry-card .meta b { color: var(--moss); font-weight: 600; }
.entry-card h3 { font-size: clamp(1.4rem, 2.4vw, 1.9rem); margin-bottom: 14px; }
.entry-card p { font-size: clamp(1.05rem, 1.5vw, 1.2rem); line-height: 1.7; margin: 0; }
.hl { background-image: linear-gradient(var(--sage), var(--sage)); background-repeat: no-repeat; background-size: 0% 88%; background-position: 0 70%; border-radius: 3px; padding: 0 2px; transition: background-size 1.1s var(--ease); }
.todo-demo.in .hl { background-size: 100% 88%; }
.todo-demo.in .hl.h2x { transition-delay: .9s; }
.todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.todo-list li {
  display: flex; align-items: center; gap: 14px; background: var(--paper); border-radius: var(--r); padding: 18px 20px;
  box-shadow: 0 1px 0 var(--hairline), 0 16px 34px -24px var(--shadow);
  opacity: 0; transform: translateX(-30px) rotate(-1.5deg); transition: opacity .7s var(--ease), transform .9s var(--ease);
}
.todo-demo.in .todo-list li { opacity: 1; transform: none; }
.todo-demo.in .todo-list li:nth-child(1) { transition-delay: .7s; }
.todo-demo.in .todo-list li:nth-child(2) { transition-delay: 1.6s; }
.todo-list button { all: unset; cursor: pointer; flex: none; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 2px var(--faint); display: grid; place-items: center; transition: background-color .3s var(--ease-quick), box-shadow .3s var(--ease-quick), transform .3s var(--ease); }
.todo-list button:focus-visible { outline: 2px solid var(--moss); outline-offset: 3px; }
.todo-list button svg { width: 14px; height: 14px; stroke: var(--onforest); stroke-width: 3; fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .45s var(--ease) .05s; }
.todo-list li.done button { background: var(--moss); box-shadow: none; transform: scale(1.08); }
.todo-list li.done button svg { stroke-dashoffset: 0; }
.todo-list li span { transition: color .4s var(--ease); background-image: linear-gradient(var(--ash), var(--ash)); background-repeat: no-repeat; background-size: 0 1.5px; background-position: 0 55%; transition: background-size .5s var(--ease), color .4s var(--ease); }
.todo-list li.done span { color: var(--ash); background-size: 100% 1.5px; }
.todo-note { margin-top: 16px; color: var(--ash); font-size: .95rem; opacity: 0; transition: opacity .8s var(--ease) 2.3s; }
.todo-demo.in .todo-note { opacity: 1; }
@media (max-width: 860px) { .todo-demo { grid-template-columns: 1fr; } }

/* ---------- Languages: one entry with two borrowed phrases ----------
   Each phrase is underlined in sage as the section scrolls in, and a small
   chip after it names the language. The thirteen-plus list is on Support. */
.lang-demo { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(28px, 5vw, 72px); align-items: center; }
.lang-demo .section-head { margin-bottom: 0; }
.lang-demo .entry-card p { padding-top: 12px; }
.lang-line { margin-top: 22px; font-size: 1rem; line-height: 1.55; color: var(--ash); }
.lang-line a { color: var(--moss); font-weight: 600; text-underline-offset: 3px; }
.mix { white-space: nowrap; background-image: linear-gradient(var(--sage), var(--sage)); background-repeat: no-repeat; background-size: 0% 88%; background-position: 0 70%; border-radius: 3px; padding: 0 2px; transition: background-size 1.1s var(--ease); }
.tag { display: inline-block; vertical-align: 2px; margin-left: 7px; padding: 2px 7px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--hairline); font-family: var(--f-display); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--moss); white-space: nowrap; opacity: 0; transform: translateY(3px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.lang-demo.in .mix { background-size: 100% 88%; }
.lang-demo.in .tag { opacity: 1; transform: none; transition-delay: .6s; }
.lang-demo.in .mix.m2 { transition-delay: 1s; }
.lang-demo.in .mix.m2 + .tag { transition-delay: 1.6s; }
@media (max-width: 860px) { .lang-demo { grid-template-columns: 1fr; } }

/* ---------- Privacy (forest) ---------- */
.forest {
  background: var(--icon); color: var(--onforest); border-radius: clamp(28px, 5vw, 56px); margin: 0 clamp(8px, 1.4vw, 20px);
  overflow: hidden; position: relative; isolation: isolate;
}
.forest::before {
  /* A slow drifting light, like sun through leaves. */
  content: ""; position: absolute; z-index: -1; width: 70vmax; height: 70vmax; left: -20vmax; top: -30vmax; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(211, 224, 206, .16), rgba(211, 224, 206, 0));
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift { to { transform: translate(60vmax, 50vmax); } }
.forest .eyebrow { color: var(--sage); }
.forest .lede, .forest .muted { color: rgba(245, 247, 242, .72); }
.forest .display { color: var(--onforest); }
.zeros { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; background: rgba(245, 247, 242, .14); border-radius: var(--r-l); overflow: hidden; margin: clamp(40px, 7vh, 70px) 0; }
.zero { background: var(--icon); padding: clamp(20px, 3vw, 34px); }
.zero .n { font-family: var(--f-display); font-weight: 600; font-size: clamp(3rem, 7vw, 6rem); letter-spacing: -0.05em; line-height: 1; font-variant-numeric: tabular-nums; display: block; }
.zero .l { display: block; margin-top: 8px; color: rgba(245, 247, 242, .72); font-family: var(--f-display); font-weight: 500; }
@media (max-width: 760px) { .zeros { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.facts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 48px) clamp(24px, 4vw, 56px); }
.fact h3 { font-size: 1.25rem; margin: 14px 0 10px; color: var(--onforest); }
.fact p { color: rgba(245, 247, 242, .72); font-size: 1rem; margin: 0; }
.fact .ico { width: 44px; height: 44px; border-radius: 14px; background: rgba(245, 247, 242, .08); display: grid; place-items: center; }
.fact .ico svg { width: 22px; height: 22px; stroke: var(--sage); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 960px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .facts { grid-template-columns: 1fr; } }

/* ---------- The honest part ---------- */
.honest { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 6vw, 90px); align-items: center; }
.vault { position: relative; aspect-ratio: 1; max-width: 440px; width: 100%; margin: 0 auto; display: grid; place-items: center; }
.vault .ring { position: absolute; inset: 0; border-radius: 50%; border: 1.5px dashed rgba(60, 107, 79, .35); animation: spin 60s linear infinite; }
.vault .ring.r2 { inset: 12%; border-style: solid; border-color: var(--hairline); animation-duration: 90s; animation-direction: reverse; }
@keyframes spin { to { rotate: 1turn; } }
.file {
  position: relative; width: 58%; aspect-ratio: .78; background: var(--paper); border-radius: 18px;
  box-shadow: 0 1px 0 var(--hairline), 0 40px 70px -40px var(--shadow), 0 0 0 1px var(--hairline);
  padding: 12% 11%; display: flex; flex-direction: column; justify-content: space-between;
}
.file::before { content: ""; position: absolute; top: 0; right: 0; width: 22%; aspect-ratio: 1; background: linear-gradient(225deg, var(--paper) 50%, var(--card) 50%); border-bottom-left-radius: 8px; }
.file .lines i { display: block; height: 7px; border-radius: 4px; background: var(--card); margin-bottom: 9px; }
.file .lines i:nth-child(2) { width: 82%; } .file .lines i:nth-child(3) { width: 64%; } .file .lines i:nth-child(4) { width: 74%; }
.file .name { font-family: var(--f-display); font-weight: 600; font-size: .92rem; letter-spacing: -0.01em; }
.file .name small { display: block; color: var(--ash); font-weight: 500; font-size: .78rem; }
.lock { position: absolute; right: -9%; bottom: 14%; width: 30%; aspect-ratio: 1; border-radius: 50%; background: var(--forest); display: grid; place-items: center; box-shadow: 0 18px 40px -16px rgba(30, 51, 39, .6); }
.lock svg { width: 46%; stroke: var(--onforest); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.lock .shackle { transform: translateY(-4px); transition: transform .6s var(--ease) .6s; }
.honest.in .lock .shackle { transform: none; }
.honest ul { list-style: none; padding: 0; margin: 26px 0 0; display: flex; flex-direction: column; gap: 14px; }
.honest li { display: flex; gap: 12px; align-items: flex-start; color: var(--ash); }
.honest li svg { flex: none; width: 22px; height: 22px; margin-top: 2px; stroke: var(--moss); fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.honest li b { color: var(--ink); font-weight: 600; }
@media (max-width: 860px) { .honest { grid-template-columns: 1fr; } .honest .vault { order: -1; max-width: 320px; } }

/* ---------- Bento ---------- */
.bento { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.tile {
  --x: 50%; --y: 50%;
  position: relative; overflow: hidden; border-radius: var(--r-l); background: var(--card2); padding: clamp(22px, 2.6vw, 32px);
  grid-column: span 2; min-height: 250px; display: flex; flex-direction: column; justify-content: flex-end;
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.tile::before { content: ""; position: absolute; inset: 0; background: radial-gradient(420px circle at var(--x) var(--y), rgba(211, 224, 206, .7), transparent 60%); opacity: 0; transition: opacity .5s var(--ease); }
.tile:hover { transform: translateY(-4px); box-shadow: 0 30px 60px -40px var(--shadow); }
.tile:hover::before { opacity: 1; }
.tile > * { position: relative; }
.tile h3 { font-size: 1.3rem; margin-bottom: 8px; }
.tile p { color: var(--ash); margin: 0; font-size: .98rem; }
.tile.wide { grid-column: span 3; }
.tile.tall { grid-row: span 2; }
.tile.green { background: var(--wash); }
/* The tiles' green wash alternates with paper at every width: a checkerboard
   on the wide grids, one-and-one down the phone's single column. */
.bento .tile:is(:nth-child(1), :nth-child(4), :nth-child(5), :nth-child(7), :nth-child(9)) { background: var(--wash); }
.tile .art { flex: 1; display: grid; place-items: center; margin-bottom: 18px; min-height: 90px; }
@media (max-width: 960px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); } .tile, .tile.wide { grid-column: span 1; } .tile.tall { grid-row: auto; }
  .bento .tile { background: var(--card2); }
  .bento .tile:is(:nth-child(4n+1), :nth-child(4n)) { background: var(--wash); }
}
@media (max-width: 600px) {
  .bento { grid-template-columns: 1fr; }
  .bento .tile { background: var(--card2); }
  .bento .tile:nth-child(odd) { background: var(--wash); }
}

/* Tile art: each a small living thing. */
.art-read { display: flex; align-items: center; gap: 5px; height: 60px; }
.art-read i { width: 5px; border-radius: 3px; background: var(--moss); height: 30%; animation: talk 1.1s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -0.13s); }
@keyframes talk { 0% { height: 16%; } 100% { height: 100%; } }
.art-fade { font-family: var(--f-display); font-weight: 600; font-size: 1.5rem; letter-spacing: -0.02em; }
.art-fade span { display: inline-block; animation: vanish 5s var(--ease) infinite; animation-delay: calc(var(--k) * .12s); }
@keyframes vanish { 0%, 30% { opacity: 1; filter: none; transform: none; } 60%, 75% { opacity: 0; filter: blur(6px); transform: translateY(-10px); } 100% { opacity: 1; filter: none; transform: none; } }
.art-search { width: 100%; max-width: 260px; background: var(--paper); border-radius: 14px; padding: 12px 14px; font-size: .95rem; color: var(--ash); box-shadow: 0 1px 0 var(--hairline); display: flex; align-items: center; gap: 8px; }
.art-search svg { width: 16px; height: 16px; stroke: var(--ash); fill: none; stroke-width: 2; flex: none; }
.art-search .typed { color: var(--ink); border-right: 2px solid var(--moss); white-space: nowrap; overflow: hidden; width: 0; animation: typing 4s steps(9) infinite, caret 1s steps(1) infinite; }
@keyframes typing { 0% { width: 0; } 45%, 80% { width: 9ch; } 100% { width: 0; } }
.art-lock { width: 70px; height: 70px; border-radius: 22px; background: var(--forest); display: grid; place-items: center; }
.art-lock svg { width: 34px; stroke: var(--onforest); fill: none; stroke-width: 1.8; stroke-linecap: round; }
.art-lock .scan { stroke-dasharray: 1; stroke-dashoffset: 1; animation: scan 3s var(--ease) infinite; }
@keyframes scan { 0%, 10% { stroke-dashoffset: 1; } 55%, 85% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -1; } }
.art-sections { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.art-sections span { padding: 8px 14px; border-radius: 999px; font-family: var(--f-display); font-weight: 600; font-size: .88rem; box-shadow: inset 0 0 0 1.5px var(--hairline); background: var(--paper); animation: pick 6s var(--ease) infinite; animation-delay: calc(var(--k) * 1.5s); }
@keyframes pick { 0%, 20% { background: var(--forest); color: var(--onforest); box-shadow: none; } 25%, 100% { background: var(--paper); color: var(--ink); } }
.art-widget { width: 92px; height: 92px; border-radius: 26px; background: var(--paper); box-shadow: 0 1px 0 var(--hairline), 0 20px 40px -26px var(--shadow); display: grid; place-items: center; }
.art-widget span { width: 42px; height: 42px; border-radius: 50%; background: var(--forest); box-shadow: 0 0 0 7px var(--sage); animation: press 3.2s var(--ease) infinite; }
@keyframes press { 0%, 70%, 100% { transform: scale(1); } 78% { transform: scale(.86); } 88% { transform: scale(1.04); } }
.art-words { display: flex; flex-direction: column; gap: 6px; font-family: var(--f-display); font-weight: 600; font-size: 1.05rem; }
.art-words div { display: flex; align-items: center; gap: 10px; }
.art-words s { color: var(--faint); text-decoration-thickness: 2px; }
.art-words svg { width: 18px; height: 12px; stroke: var(--moss); fill: none; stroke-width: 2; stroke-linecap: round; }
.art-recap { width: 100%; max-width: 280px; display: flex; flex-direction: column; gap: 8px; }
.art-recap i { display: block; height: 9px; border-radius: 5px; background: var(--sage); transform-origin: left; animation: grow 4s var(--ease) infinite; }
.art-recap i:nth-child(2) { width: 86%; animation-delay: .2s; } .art-recap i:nth-child(3) { width: 70%; animation-delay: .4s; } .art-recap i:nth-child(4) { width: 50%; background: var(--moss); animation-delay: .6s; }
@keyframes grow { 0% { transform: scaleX(0); } 30%, 80% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.art-export { display: flex; gap: 10px; }
.art-export span { font-family: var(--f-display); font-weight: 700; font-size: .78rem; letter-spacing: .06em; width: 58px; height: 72px; border-radius: 12px; background: var(--paper); box-shadow: 0 1px 0 var(--hairline), 0 14px 30px -20px var(--shadow); display: grid; place-items: end center; padding-bottom: 12px; animation: bob 3.6s ease-in-out infinite; animation-delay: calc(var(--k) * -1.2s); }
@keyframes bob { 50% { transform: translateY(-8px); } }

/* ---------- Pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; align-items: stretch; }
.plan { border-radius: var(--r-l); background: var(--card2); padding: clamp(24px, 3vw, 36px); display: flex; flex-direction: column; gap: 6px; position: relative; transition: transform .6s var(--ease); }
.plan:hover { transform: translateY(-4px); }
.plan h3 { font-size: 1.15rem; }
.plan .price { font-family: var(--f-display); font-weight: 600; font-size: clamp(2.4rem, 4vw, 3.2rem); letter-spacing: -0.04em; line-height: 1.1; margin-top: 10px; }
.plan .price small { font-size: 1rem; letter-spacing: 0; color: var(--ash); font-weight: 500; margin-left: 4px; }
.plan p { color: var(--ash); margin: 6px 0 0; font-size: .98rem; }
.plan.pick { background: var(--forest); color: var(--onforest); }
.plan.pick p, .plan.pick .price small { color: rgba(245, 247, 242, .72); }
@media (max-width: 860px) { .plans { grid-template-columns: 1fr; } }
.freeday { display: grid; grid-template-columns: auto 1fr; gap: 20px 28px; align-items: center; background: var(--wash); border-radius: var(--r-l); padding: clamp(22px, 3vw, 34px); margin-bottom: 16px; }
.sun { width: 76px; height: 76px; position: relative; }
.sun svg { width: 100%; height: 100%; overflow: visible; }
.sun .rays { transform-origin: 50% 50%; animation: spin 24s linear infinite; }
.freeday h3 { font-size: clamp(1.4rem, 2.4vw, 1.8rem); }
.freeday p { color: var(--ash); margin: 6px 0 0; }
@media (max-width: 600px) { .freeday { grid-template-columns: 1fr; } }
.keeps { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.keeps span { padding: 8px 14px; border-radius: 999px; background: var(--paper); box-shadow: inset 0 0 0 1.5px var(--hairline); font-size: .92rem; font-weight: 500; }
.fine { color: var(--ash); font-size: .9rem; margin-top: 22px; max-width: 70ch; }

/* ---------- FAQ ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details { border-top: 1px solid var(--hairline); }
.faq details:last-child { border-bottom: 1px solid var(--hairline); }
.faq summary {
  list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 24px 0; font-family: var(--f-display); font-weight: 600; font-size: clamp(1.1rem, 1.8vw, 1.3rem); letter-spacing: -0.015em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .pm { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--card2); position: relative; transition: background-color .3s var(--ease-quick), transform .5s var(--ease); }
.faq summary .pm::before, .faq summary .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 2px; background: var(--ink); border-radius: 2px; translate: -50% -50%; transition: transform .5s var(--ease), background-color .3s; }
.faq summary .pm::after { transform: rotate(90deg); }
.faq details[open] summary .pm { background: var(--forest); transform: rotate(180deg); }
.faq details[open] summary .pm::before, .faq details[open] summary .pm::after { background: var(--onforest); }
.faq details[open] summary .pm::after { transform: rotate(0deg); }
.faq summary:hover .pm { background: var(--sage); }
.faq .a { padding: 0 60px 26px 0; color: var(--ash); }
.faq .a p:last-child { margin-bottom: 0; }
.faq .a a { color: var(--moss); font-weight: 600; }
.faq details .a { animation: open .6s var(--ease); }
@keyframes open { from { opacity: 0; transform: translateY(-8px); } }

/* ---------- Closing ---------- */
.closing { text-align: center; padding: clamp(90px, 16vh, 170px) 0; position: relative; overflow: hidden; }
.closing .bars { display: flex; justify-content: center; align-items: center; gap: 6px; height: 90px; margin-bottom: 30px; }
.closing .bars i { width: 6px; border-radius: 3px; background: var(--moss); height: 10%; animation: talk 1.4s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -0.17s); opacity: .85; }
.closing h2 { font-size: clamp(2.6rem, 7vw, 6rem); letter-spacing: -0.045em; line-height: .98; }
.closing p { color: var(--ash); font-size: 1.15rem; margin: 22px auto 34px; max-width: 32em; }

/* ---------- Footer ---------- */
.site-footer { background: var(--icon); color: var(--onforest); padding: clamp(60px, 10vh, 100px) 0 36px; border-radius: clamp(28px, 5vw, 56px) clamp(28px, 5vw, 56px) 0 0; margin: 0 clamp(8px, 1.4vw, 20px); position: relative; overflow: hidden; }
.site-footer .big { width: 100%; height: auto; fill: rgba(245, 247, 242, .07); margin-bottom: clamp(30px, 6vh, 60px); }
.foot-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 30px; }
.foot-grid h4 { font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--sage); margin-bottom: 14px; font-weight: 600; }
.foot-grid ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.foot-grid a { text-decoration: none; color: rgba(245, 247, 242, .85); transition: color .2s; }
.foot-grid a:hover { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.foot-grid p { color: rgba(245, 247, 242, .72); max-width: 30em; }
.legalese { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(245, 247, 242, .14); color: rgba(245, 247, 242, .6); font-size: .82rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px 30px; }
.legalese p { margin: 0; max-width: 70ch; }
.legalese a { color: rgba(245, 247, 242, .85); text-decoration: underline; text-decoration-color: rgba(245, 247, 242, .35); text-underline-offset: 3px; transition: color .2s, text-decoration-color .2s; }
.legalese a:hover { color: #fff; text-decoration-color: currentColor; }
@media (max-width: 760px) { .foot-grid { grid-template-columns: 1fr 1fr; } .foot-grid > :first-child { grid-column: 1 / -1; } }
.foot-grid ul.social { flex-direction: row; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.foot-grid ul.social a { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px 8px 11px; border-radius: 999px; border: 1px solid rgba(245, 247, 242, .18); font-family: var(--f-display); font-weight: 600; font-size: .9rem; line-height: 1; transition: background-color .3s, border-color .3s, color .2s, transform .5s var(--ease); }
.foot-grid ul.social a:hover { background: rgba(245, 247, 242, .08); border-color: rgba(245, 247, 242, .45); text-decoration: none; transform: translateY(-2px); }
.foot-grid ul.social svg { width: 18px; height: 18px; flex: none; }
.ico-ig { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ico-ig .dot { fill: currentColor; stroke: none; }
.ico-x { fill: currentColor; }

/* ---------- Long-form pages (privacy, terms, support) ---------- */
.progress { position: fixed; left: 0; top: 0; height: 3px; width: 100%; z-index: 60; background: var(--moss); transform-origin: left; transform: scaleX(var(--p, 0)); }
.page-hero { padding: clamp(50px, 10vh, 110px) 0 clamp(30px, 6vh, 60px); position: relative; }
.page-hero h1 { font-size: clamp(2.6rem, 6.4vw, 5rem); letter-spacing: -0.04em; }
.page-hero .lede { margin-top: 18px; }
.page-hero .stamp { margin-top: 22px; font-family: var(--f-display); font-weight: 500; font-size: .92rem; color: var(--ash); display: flex; flex-wrap: wrap; gap: 8px 18px; }
.page-hero .stamp b { color: var(--ink); font-weight: 600; }
.page-hero .bars { position: absolute; right: var(--gutter); bottom: 20px; display: flex; gap: 4px; align-items: center; height: 70px; opacity: .9; }
.page-hero .bars i { width: 4px; border-radius: 2px; background: var(--sage); height: 20%; animation: talk 1.6s ease-in-out infinite alternate; animation-delay: calc(var(--k) * -0.21s); }
@media (max-width: 760px) { .page-hero .bars { display: none; } }

.doc { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: clamp(30px, 5vw, 80px); padding-bottom: clamp(80px, 12vh, 140px); align-items: start; }
.toc { position: sticky; top: 96px; font-family: var(--f-display); font-size: .92rem; max-height: calc(100vh - 120px); overflow: auto; }
.toc h2 { font-size: .74rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ash); margin-bottom: 12px; font-weight: 600; }
.toc ol { list-style: none; margin: 0; padding: 0; border-left: 1.5px solid var(--hairline); }
.toc a { display: block; padding: 6px 0 6px 14px; margin-left: -1.5px; border-left: 1.5px solid transparent; text-decoration: none; color: var(--ash); transition: color .3s, border-color .3s; }
.toc a:hover { color: var(--ink); }
.toc a.on { color: var(--forest); border-left-color: var(--moss); font-weight: 600; }
@media (max-width: 960px) { .doc { grid-template-columns: 1fr; } .toc { position: static; max-height: none; } .toc ol { columns: 2; } }
@media (max-width: 560px) { .toc ol { columns: 1; } }

.prose { max-width: var(--read); }
.prose h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.025em; margin: 64px 0 16px; scroll-margin-top: 96px; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { font-size: 1.2rem; margin: 30px 0 10px; scroll-margin-top: 96px; }
.prose p, .prose li { color: #2c2f2a; }
.prose ul, .prose ol { padding-left: 1.3em; margin: 0 0 1em; }
.prose li { margin-bottom: .45em; }
.prose li::marker { color: var(--moss); }
.prose a { color: var(--moss); font-weight: 600; text-underline-offset: 3px; }
.prose strong { color: var(--ink); }
.prose .sec-n { color: var(--moss); margin-right: .4em; }
.prose hr { border: 0; border-top: 1px solid var(--hairline); margin: 48px 0; }
.prose table { width: 100%; border-collapse: collapse; margin: 0 0 1.2em; font-size: .96rem; }
.prose th, .prose td { text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
.prose th { font-family: var(--f-display); font-weight: 600; font-size: .86rem; letter-spacing: .02em; color: var(--ash); }
.table-scroll { overflow-x: auto; }
.summary { background: var(--wash); border-radius: var(--r-l); padding: clamp(22px, 3vw, 34px); margin-bottom: 48px; }
.summary h2 { margin-top: 0 !important; font-size: 1.3rem !important; }
.summary ul { margin: 0; }
.callout { border-left: 3px solid var(--moss); background: var(--card2); border-radius: 0 var(--r-s) var(--r-s) 0; padding: 18px 22px; margin: 0 0 1.2em; }
.callout p:last-child { margin-bottom: 0; }
.callout.warn { border-left-color: var(--forest); background: var(--wash); }
.quote-app { font-family: var(--f-display); font-weight: 500; letter-spacing: -0.01em; }

/* Draft marking: visible only while the page carries .is-draft. Remove the
   class and the banner at launch; see README. */
.draft-banner { display: none; }
.is-draft .draft-banner { display: block; background: repeating-linear-gradient(-45deg, var(--forest), var(--forest) 14px, #243b2e 14px, #243b2e 28px); color: var(--onforest); font-family: var(--f-display); font-weight: 600; font-size: .9rem; text-align: center; padding: 10px 16px; }
.is-draft .draft-banner span { opacity: .75; font-weight: 500; }
.counsel, .fill { background: none; color: inherit; }
.is-draft .fill { background: rgba(211, 224, 206, .7); box-shadow: 0 0 0 2px rgba(211, 224, 206, .7); border-radius: 3px; }
.is-draft .fill::after { content: "to fill"; font-family: var(--f-display); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--forest); background: var(--sage); padding: 1px 5px; border-radius: 4px; margin-left: 6px; vertical-align: .2em; }
.is-draft .counsel { background: rgba(211, 224, 206, .7); box-shadow: 0 0 0 2px rgba(211, 224, 206, .7); border-radius: 3px; }
.is-draft .counsel::after { content: "counsel"; font-family: var(--f-display); font-size: .62rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--forest); background: var(--sage); padding: 1px 5px; border-radius: 4px; margin-left: 6px; vertical-align: .2em; }

/* Support */
.help-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: clamp(50px, 8vh, 80px); }
.help-card { border-radius: var(--r-l); background: var(--card2); padding: 26px; text-decoration: none; display: flex; flex-direction: column; gap: 10px; transition: transform .5s var(--ease), background-color .3s; }
.help-card:hover { transform: translateY(-4px); background: var(--wash); }
.help-card svg { width: 26px; height: 26px; stroke: var(--moss); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.help-card b { font-family: var(--f-display); font-size: 1.15rem; letter-spacing: -0.015em; }
.help-card span { color: var(--ash); font-size: .95rem; }
@media (max-width: 860px) { .help-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .help-grid { grid-template-columns: 1fr; } }
.contact-card { background: var(--icon); color: var(--onforest); border-radius: var(--r-l); padding: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: center; margin-top: 60px; }
.contact-card h2 { color: var(--onforest); margin: 0 0 10px !important; }
.contact-card p { color: rgba(245, 247, 242, .75) !important; margin: 0; }
.contact-card .fill { color: var(--onforest); }
.contact-card .pill { background: var(--onforest); color: var(--forest); }
.contact-card .pill:hover { transform: translateY(-2px); }
@media (max-width: 700px) { .contact-card { grid-template-columns: 1fr; } }
.faq-group { margin-bottom: 56px; scroll-margin-top: 96px; }
.faq-group > h2 { margin-bottom: 8px !important; }

/* 404 */
.lost { min-height: 70vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.lost .flat { display: flex; justify-content: center; gap: 5px; align-items: center; height: 80px; margin-bottom: 30px; }
.lost .flat i { width: 5px; border-radius: 3px; background: var(--faint); height: 4px; animation: wake 4s var(--ease) infinite; animation-delay: calc(var(--k) * .06s); }
@keyframes wake { 0%, 40% { height: 4px; background: var(--faint); } 60% { height: calc(var(--hh) * 1px); background: var(--moss); } 100% { height: 4px; background: var(--faint); } }
.lost h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); letter-spacing: -0.04em; }
.lost p { color: var(--ash); margin: 16px auto 28px; }

/* ---------- Reduce Motion ----------
   Same rule as the app: movement becomes a crossfade or nothing. Every
   animated thing lands in its finished state. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .2s !important; transition-delay: 0s !important; }
  [data-reveal], .rise .w > span { transform: none !important; }
  .wordmark-hero { animation: none; -webkit-mask: none; mask: none; }
  .story.running .step.on .rule b, .story .step.on .rule b { animation: none; transform: none; }
  .wordmark-wrap, .swash { animation: none; filter: none; }
  .swash path { stroke-dashoffset: 0; }
  .marquee-track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; }
  .marquee-track span[aria-hidden] { display: none; }
  .chip { animation: none !important; }
  .forest::before, .vault .ring { animation: none !important; }
  .art-search .typed { width: 9ch; }
  .art-recap i { transform: none; }
  .art-fade span { opacity: 1; filter: none; transform: none; }
  .art-read i, .closing .bars i, .page-hero .bars i { height: calc(20% + var(--k) * 6%); }
  .lost .flat i { height: calc(var(--hh) * 1px); background: var(--moss); }
}

/* ---------- Print (the legal pages get printed) ---------- */
@media print {
  body::before, .site-header, .site-footer, .toc, .progress, .page-hero .bars, .draft-banner { display: none !important; }
  .doc { display: block; }
  .prose { max-width: none; }
  a { color: inherit; text-decoration: underline; }
}
.fine-first { margin-top: 28px; }
.more-link { margin-top: 34px; }
.more-link a { color: var(--moss); font-weight: 600; }
.contact-lines { margin-top: 14px !important; font-family: var(--f-display); font-weight: 500; }
.support-legal { margin: 26px 0 90px; }
.support-legal a { color: var(--moss); font-weight: 600; }
.prose.faq { max-width: 860px; }
.prose.faq details .a p { color: var(--ash); }

/* ---------- Phone widths ----------
   One place for the type scale under 640px, so a phone reads as calmly as
   the desktop does: a smaller header, body text at 16px, headings a step
   down. */
@media (max-width: 640px) {
  body { font-size: 1rem; }
  .site-header .wrap { height: 58px; }
  .brand svg { height: 26px; width: 118px; }
  .nav { gap: 16px; font-size: .86rem; }
  .eyebrow { font-size: .72rem; letter-spacing: .14em; }
  .hero h1 { font-size: 1.95rem; margin-top: 20px; }
  .lede, .section-head .lede { font-size: 1rem; line-height: 1.6; }
  .h2 { font-size: 1.75rem; line-height: 1.08; }
  .display { font-size: 2.2rem; }
  .step h3 { font-size: 1.5rem; line-height: 1.15; }
  .step p { font-size: 1rem; line-height: 1.6; margin-top: 10px; }
  .step .num { font-size: .82rem; margin-bottom: 10px; }
  .step, .js .step { padding-bottom: 56px; }
  .entry-card p { font-size: 1rem; line-height: 1.65; }
  .faq summary { font-size: 1.02rem; padding: 18px 0; }
  .closing h2 { font-size: 2.4rem; }
  .store, .hero-cta .pill { padding: 8px 18px 9px; border-radius: 12px; }
  .store strong, .hero-cta .pill strong { font-size: 1.3rem; }
  .pill { font-size: .95rem; padding: 11px 18px; }
}