/* Truth: runaboutdigital.com/truth/ (home, support, privacy). Direction B, "Horizon".
   One landscape from first light to night: each part of the app gets the scene it already has in
   Truth, with a real piece of the app standing in it. Tokens are the app's own (Theme.swift, 2.2):
   Day Paper is the light half, Ink the dark half, and the page follows the system setting.
   The landscapes are drawn by truth.js; the page reads and works without it.
   Mirrored in the Truth repo root (index.html, support.html, privacy.html, site-assets/). */

/* ── Type ──
   Iowan Old Style is installed on every iPhone, iPad and Mac, so Apple visitors never download a
   text face. Everyone else gets Source Serif 4 (OFL), the nearest free cousin. Numerals are
   Cormorant Garamond Italic, as the reader sets its chapter number: a digits-only subset, 5 KB.
   Licences: fonts/OFL-*.txt. */
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-latin.woff2") format("woff2");
  font-weight: 400 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Source Serif 4";
  src: url("fonts/source-serif-4-italic-latin.woff2") format("woff2");
  font-weight: 400; font-style: italic; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("fonts/cormorant-garamond-italic-500-digits.woff2") format("woff2");
  font-weight: 500; font-style: italic; font-display: swap;
  unicode-range: U+002C, U+002E, U+0030-0039;
}
/* Georgia, resized to Source Serif 4's set width (measured in WebKit over a page of this copy),
   holds the lines while the web font loads on Windows, so nothing reflows when it swaps in. */
@font-face {
  font-family: "Source Serif 4 Fallback"; font-weight: 400; font-style: normal;
  src: local("Georgia"), local("Georgia-Regular");
  size-adjust: 106.6%; ascent-override: 97.6%; descent-override: 31.9%; line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif 4 Fallback"; font-weight: 400; font-style: italic;
  src: local("Georgia Italic"), local("Georgia-Italic");
  size-adjust: 96.2%; ascent-override: 108.1%; descent-override: 35.3%; line-gap-override: 0%;
}
@font-face {
  font-family: "Source Serif 4 Fallback"; font-weight: 700; font-style: normal;
  src: local("Georgia Bold"), local("Georgia-Bold");
  size-adjust: 95%; ascent-override: 109.5%; descent-override: 35.8%; line-gap-override: 0%;
}

/* ── Tokens ── */
:root {
  --bg: #f6f2ea;          /* Day Paper ground */
  --card: #fcfaf6;        /* surface */
  --card2: #eee9df;       /* surfaceLight: segmented controls, the pause button */
  --text: #27221d;
  --text2: #645e56;
  --text3: #645e56;       /* secondary text on --card2 */
  --muted: #98938a;       /* ornament only (verse numbers, off rings), never meaningful text */
  --acc: #856742;         /* Day Paper's gold is a brown ink. Small things only. */
  --acc-dk: #6c5130;
  --on-acc: #fcfaf6;
  --red: #a23b2e;
  --rule: rgba(39, 34, 29, .10);
  --edge: rgba(39, 34, 29, .07);   /* one hairline round a card */
  --k: 1.12;              /* Ornament.ink: light themes take 12% more line */
  --lift: 0 1px 2px rgba(70, 52, 30, .05), 0 14px 34px rgba(70, 52, 30, .07);
  --raised: var(--card);   /* a card that sits on another card */
  --raise: var(--lift);
  --lift-hi: 0 24px 44px rgba(70, 52, 30, .15);   /* a card still rising, before its shadow settles */
  --serif: "Iowan Old Style", "Source Serif 4", "Source Serif 4 Fallback", Georgia, serif;
  --num: "Cormorant Garamond", "Iowan Old Style", "Source Serif 4", Georgia, serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151515; --card: #2b2b2b; --card2: #3c3c3c;
    --text: #f2f2f2; --text2: #9d9d9d; --text3: #acacac; --muted: #676767;
    --acc: #c0b193; --acc-dk: #d2c6ad; --on-acc: #151515; --red: #c78575;
    --rule: rgba(242, 242, 242, .10); --edge: transparent; --k: 1; --lift: none;
    --raised: #363636; --raise: 0 14px 34px rgba(0, 0, 0, .45); --lift-hi: none;
  }
}
/* data-theme pins a theme for screenshots; the live page has no toggle and follows the system. */
:root[data-theme="dark"] {
  --bg: #151515; --card: #2b2b2b; --card2: #3c3c3c;
  --text: #f2f2f2; --text2: #9d9d9d; --text3: #acacac; --muted: #676767;
  --acc: #c0b193; --acc-dk: #d2c6ad; --on-acc: #151515; --red: #c78575;
  --rule: rgba(242, 242, 242, .10); --edge: transparent; --k: 1; --lift: none;
  --raised: #363636; --raise: 0 14px 34px rgba(0, 0, 0, .45); --lift-hi: none;
  color-scheme: dark;
}
:root[data-theme="light"] { color-scheme: light; }

/* ── Base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; overflow-x: hidden; }
@supports (overflow: clip) { html { overflow-x: clip; } }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  background: var(--bg); color: var(--text);
  font: 400 18px/1.6 var(--serif);
  font-kerning: normal; font-variant-ligatures: common-ligatures;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: inherit; text-decoration: none; }
h1, h2, h3, .tag, small { text-wrap: balance; }
p, li { text-wrap: pretty; }
img, svg { display: block; }
ul { list-style: none; }
button, summary { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
:focus-visible { outline: 2px solid var(--acc); outline-offset: 3px; border-radius: 4px; }
.btn:focus-visible { outline-offset: 4px; border-radius: 999px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 10; padding: 10px 18px; border-radius: 999px; background: var(--acc); color: var(--on-acc); font-weight: 700; font-size: 15px; }
.skip:focus { top: 14px; }

.num { font-family: var(--num); font-style: italic; font-weight: 500; font-variant-numeric: lining-nums; font-feature-settings: "lnum" 1; letter-spacing: -.01em; }
.smcp { font-variant-caps: all-small-caps; letter-spacing: .22em; }
.nw { white-space: nowrap; }

/* Icons: the app's own line set (Tools/truth-icons), filled outlines at Regular weight. */
.ic { width: 22px; height: 22px; fill: currentColor; flex: 0 0 auto; }

/* The one small mark: TruthDot (6pt) and RingDot (14pt). */
.dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--muted); flex: 0 0 auto; }
.dot.on { background: var(--acc); border-color: var(--acc); }
.ring { position: relative; display: inline-block; width: 14px; height: 14px; border-radius: 50%; border: 1px solid var(--muted); flex: 0 0 auto; }
.ring.on { border: 1.2px solid var(--acc); }
.ring.on::after { content: ""; position: absolute; inset: 0; margin: auto; width: 42%; height: 42%; border-radius: 50%; background: var(--acc); }

.dw { text-decoration: underline dashed var(--acc); text-decoration-thickness: 1px; text-underline-offset: .22em; }

/* The one button: the app's gold capsule, once or twice a page. */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .6em;
  min-height: 50px; padding: 0 26px; border-radius: 999px;
  background: var(--acc); color: var(--on-acc);
  font: 700 16px/1 var(--serif); letter-spacing: .005em; white-space: nowrap;
  transition: background-color .2s ease;
}
.btn:hover { background: var(--acc-dk); }
.chip {
  display: inline-flex; align-items: center; gap: .45em; height: 28px; padding: 0 13px;
  border-radius: 999px; border: 1px solid var(--acc);
  color: var(--acc); font: 700 13px/1 var(--serif); letter-spacing: .02em;
}

/* Glass card: neutral, ONE hairline (none on Ink), never a gold fill. */
.glass { position: relative; background: var(--card); border-radius: 22px; box-shadow: 0 0 0 1px var(--edge), var(--lift); }

/* ── Landscapes (drawn by truth.js into .band) ──
   The sky is a few small layers (sun or moon, haze, birds, stars, the tree, the water) behind one
   land layer, whose ground hides whatever in the sky sits below the far ridge. */
.band { position: relative; }
/* The sky's slow drift may run past the screen's edges: the band keeps it in. */
@supports (overflow: clip) { .band { overflow-x: clip; } }
@supports not (overflow: clip) { .band { overflow: hidden; } }
.band > *, .band .orb > svg { position: absolute; }
.band svg { overflow: visible; stroke: var(--acc); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.band .occ { fill: var(--bg); stroke: none; }
.band .st { border-radius: 50%; opacity: calc(var(--o) * var(--k)); }
.band .st::before { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--acc); }
.js .band { opacity: 0; }
.js .band.drawn { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .js:not(.motion) .band { transition: opacity .9s ease-out; } }
.w17 { stroke-opacity: calc(.17 * var(--k)); } .w20 { stroke-opacity: calc(.20 * var(--k)); }
.w22 { stroke-opacity: calc(.22 * var(--k)); } .w24 { stroke-opacity: calc(.24 * var(--k)); }
.w30 { stroke-opacity: calc(.30 * var(--k)); } .w34 { stroke-opacity: calc(.34 * var(--k)); }
.w40 { stroke-opacity: calc(.40 * var(--k)); } .w42 { stroke-opacity: calc(.42 * var(--k)); }
.w46 { stroke-opacity: calc(.46 * var(--k)); } .w52 { stroke-opacity: calc(.52 * var(--k)); }
.w55 { stroke-opacity: calc(.55 * var(--k)); }
.f30 { fill-opacity: calc(.30 * var(--k)); } .f34 { fill-opacity: calc(.34 * var(--k)); }
.f50 { fill-opacity: calc(.50 * var(--k)); }

/* ── Layout ── */
.wrap { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 32px; }

/* Nav floats in the sky of each page's opening scene. */
.nav { position: absolute; top: 0; left: 0; right: 0; z-index: 3; }
.nav .wrap { display: flex; align-items: center; justify-content: space-between; height: 76px; }
.mark { font-size: 21px; }
.links { display: flex; gap: 30px; font-size: 15.5px; color: var(--text2); }
.links a { padding-block: 6px; transition: color .15s ease; }
.links a:hover, .links a[aria-current="page"] { color: var(--text); }
.links .store, .sheet .store { color: var(--acc); }
.links .store:hover { color: var(--acc-dk); }

/* Phone menu: a disclosure, so it opens with or without JavaScript. */
.menu { display: none; position: relative; }
.menu summary { list-style: none; font-size: 15.5px; color: var(--text2); padding: 10px 2px; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { color: var(--text); }
.sheet { position: absolute; right: -10px; top: calc(100% + 4px); width: 214px; padding: 8px 0; border-radius: 18px; }
.sheet a { display: block; padding: 11px 22px; font-size: 17px; }
.sheet a + a { border-top: 1px solid var(--rule); }
.sheet a[aria-current="page"] { color: var(--acc); }

.label { font-size: 19px; color: var(--text2); }
.label i { color: var(--acc); }

/* Footer: the closing ridge, then the small print. */
.foot { margin-top: 90px; }
.foot .band { height: 46px; }
.foot .wrap { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 32px; padding: 28px 0 46px; font-size: 15px; color: var(--text2); }
.foot .who { font-size: 20px; color: var(--text); }
.foot .who small { display: block; font-size: 14px; color: var(--text2); margin-top: 4px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 8px 24px; justify-content: flex-end; align-content: start; }
.foot nav a:hover { color: var(--text); }
.foot .promise { line-height: 1.6; }
.foot .credit { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid var(--rule); font-size: 13.5px; }
.foot.slim { margin-top: 110px; }
.foot.slim .wrap { display: flex; justify-content: space-between; gap: 24px; padding: 24px 0 44px; }

/* ════════ Home ════════ */

/* Opening: the sun just clearing the far ridge, before the day starts. */
.hero { position: relative; text-align: center; padding-bottom: 40px; }
.hero .band { height: 470px; }
.hero h1 { font-weight: 400; font-size: 132px; line-height: .9; letter-spacing: -.015em; margin-top: 18px; }
.hero .tag { font-style: italic; font-size: 25px; color: var(--text2); margin-top: 18px; }
.hero .btn { margin-top: 34px; }
.hero small { display: block; margin-top: 16px; font-size: 15px; color: var(--text2); }
.index { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 46px; margin-top: 64px; }
.index a { display: grid; justify-items: center; gap: 10px; font-size: 14px; font-style: italic; color: var(--text2); padding: 4px 2px; transition: color .15s ease; }
.index a:hover { color: var(--text); }
.index a:hover .dot { border-color: var(--acc); }

/* A scene: its landscape full-bleed, then the words, with one real piece of the app
   standing in the landscape. */
.scene { position: relative; padding-top: 120px; }
.scene > .band { height: 300px; }
.scene .grid { align-items: start; }
.scene h2 { font-weight: 400; font-size: 58px; line-height: 1.05; letter-spacing: -.012em; margin-top: 12px; }
.scene .body { font-size: 19.5px; line-height: 1.6; color: var(--text2); margin-top: 20px; }
.scene .body + .body { margin-top: 14px; }
.scene .fine { font-size: 15.5px; }
.scene .text { padding-top: 64px; }
.frag { margin-top: -112px; position: relative; z-index: 2; }
.frag.high { margin-top: -40px; }
.nob { padding-top: 70px; }
.nob .frag { margin-top: 0; }
.nob .text { padding-top: 8px; }
.L .text { grid-column: 8 / 13; } .L .frag { grid-column: 1 / 7; grid-row: 1; }
.R .text { grid-column: 1 / 6; } .R .frag { grid-column: 7 / 13; grid-row: 1; }

.list { margin-top: 26px; display: grid; gap: 12px; }
.list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: baseline; font-size: 17.5px; line-height: 1.5; }
.list .ring { transform: translateY(2px); }
.verse { margin-top: 30px; padding-top: 22px; border-top: 1px solid var(--rule); }
.verse p { font-style: italic; font-size: 19px; line-height: 1.55; color: var(--text); }
.verse figcaption { margin-top: 6px; font-size: 14.5px; color: var(--text2); }

/* ── Pieces of the app, drawn as the app draws them ── */
.ui { font-size: 15px; color: var(--text); }
.ui .cap { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text2); }
.votd { padding: 26px 28px 18px; max-width: 520px; }
.votd .top { display: flex; justify-content: space-between; align-items: center; }
.votd .top svg { width: 16px; height: 16px; fill: var(--text2); }
.votd .q { font-size: 44px; line-height: .6; color: var(--acc); margin: 18px 0 2px; height: 22px; }
.votd .t { font-size: 25px; line-height: 1.5; }
.votd .ref { font-style: italic; font-size: 15px; color: var(--text2); margin-top: 10px; }
.votd .ref .smcp, .thanks .ref .smcp { font-style: normal; font-size: 12px; letter-spacing: .14em; }
.votd .acts { display: flex; align-items: center; gap: 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule); }
.votd .acts span { display: grid; justify-items: center; gap: 5px; font-size: 11.5px; color: var(--text2); }
.votd .acts .ic { width: 20px; height: 20px; color: var(--text2); }
.votd .acts .read { margin-left: auto; font-size: 15px; font-weight: 700; color: var(--acc); }
.streak { display: flex; align-items: center; gap: 18px; margin-top: 16px; padding: 16px 22px; max-width: 520px; }
.streak .num { font-size: 50px; line-height: .9; min-width: 1.1em; }
.streak .ic { color: var(--acc); width: 20px; height: 20px; }
.streak .days { font-size: 11.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--text2); }
.streak .dots { display: flex; gap: 6px; margin-top: 7px; }
.streak .dots .dot { width: 8px; height: 8px; }
.streak .dot.on { position: relative; background: none; }
.streak .dot.on::after { content: ""; position: absolute; inset: -1px; border-radius: 50%; background: var(--acc); }
.streak .wk { margin-left: auto; text-align: right; font-size: 14px; color: var(--text2); line-height: 1.45; }

.panel { position: relative; padding: 18px 22px 22px; border-radius: 28px; max-width: 470px; }
.panel .hd { display: flex; align-items: center; justify-content: center; position: relative; height: 34px; font-weight: 700; font-size: 16px; }
.panel .hd .done { position: absolute; left: 0; height: 32px; padding: 0 14px; border-radius: 999px; background: var(--card2); font-weight: 400; font-size: 14px; color: var(--text3); display: grid; place-items: center; }
.seg { display: flex; margin: 16px 0 14px; padding: 3px; border-radius: 11px; background: var(--card2); font-size: 13.5px; }
.seg b, .seg i { flex: 1; text-align: center; font-style: normal; padding: 6px 0; border-radius: 8px; }
.seg b { background: var(--card); box-shadow: 0 0 0 1px var(--edge), 0 1px 3px rgba(0, 0, 0, .08); font-weight: 700; }
.seg i { color: var(--text3); }
.inner { border-radius: 16px; padding: 16px 18px; }
.inner, .oldword .card2 { background: var(--card2); }
@supports (background: color-mix(in srgb, red 5%, blue)) {
  .inner, .oldword .card2 { background: color-mix(in srgb, var(--text) 4.5%, var(--card)); }
}
.inner .t { font-size: 19px; line-height: 1.5; }
.inner .ref { font-style: italic; font-size: 14px; color: var(--acc); margin-top: 8px; }
.inner .hint { font-size: 12.5px; color: var(--text2); margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.comm { margin-top: 18px; }
.comm .cap { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.comm .cap em { font-style: normal; letter-spacing: 0; text-transform: none; font-size: 12.5px; color: var(--text2); }
.comm .h { font-size: 16.5px; font-weight: 700; margin: 8px 0 4px; }
.comm p { font-size: 15px; line-height: 1.55; color: var(--text2); }
.wordcard { position: absolute; right: -54px; bottom: -64px; width: 290px; padding: 18px 20px; border-radius: 24px; }
.glass.wordcard, .glass.sheet { background: var(--raised); box-shadow: 0 0 0 1px var(--edge), var(--raise); }
.wordcard .w { font-weight: 700; font-size: 30px; line-height: 1.05; }
.wordcard .k { font-size: 13.5px; color: var(--text2); margin: 3px 0 12px; }
.wordcard .def { font-size: 20px; line-height: 1.35; }
.wordcard .src { font-size: 12.5px; color: var(--text2); margin-top: 6px; }
.wordcard .k, .wordcard .src { color: var(--text3); }
.wordcard .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.wordcard .chip { height: 26px; font-size: 12.5px; }

.lib { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 28px; margin-top: 30px; border-top: 1px solid var(--rule); }
.lib li { display: grid; grid-template-columns: 92px minmax(0, 1fr); align-items: baseline; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--rule); font-size: 15.5px; color: var(--text2); line-height: 1.35; }
.lib .num { font-size: 31px; color: var(--text); text-align: right; line-height: 1; }

.yours { max-width: 470px; padding: 8px 0; }
.yours .cap { padding: 6px 22px 4px; display: block; }
.yours .row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 22px; font-size: 17px; }
.yours .row + .row { border-top: 1px solid var(--rule); }
.yours .row .ic { color: var(--acc); width: 22px; height: 22px; }
.yours .row small { font-size: 14px; color: var(--text2); }
.notecard { max-width: 470px; margin-top: 16px; padding: 18px 22px; isolation: isolate; }
.notecard .t { font-size: 18px; line-height: 1.5; position: relative; }
.notecard .t::before { content: ""; position: absolute; inset: -5px -10px; border-radius: 10px; background: rgba(111, 174, 132, .16); z-index: -1; }
.notecard .n { margin-top: 12px; font-size: 15px; color: var(--text2); display: flex; gap: 10px; }
.notecard .n .ic { color: var(--acc); width: 18px; height: 18px; }

.night-pair { display: flex; gap: 26px; align-items: flex-start; }
.watch { flex: 0 0 auto; width: 214px; height: 256px; border-radius: 52px; background: #000; color: #f2f2f2; padding: 22px 22px 0; position: relative; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 0 0 7px #1c1c1c, 0 0 0 8px rgba(255, 255, 255, .06); margin: 8px; }
.watch .tm { text-align: right; font: 600 15px/1.15 -apple-system, system-ui, sans-serif; }
.watch .tm b { display: block; color: #c0b193; font-weight: 600; }
.watch .bk { text-align: center; font-size: 10px; letter-spacing: .24em; color: #9d9d9d; margin-top: 4px; }
.watch .n { text-align: center; font-size: 46px; line-height: 1; margin-top: 2px; }
.watch .vv { text-align: center; font-size: 12.5px; color: #9d9d9d; margin-top: 4px; }
.watch .pr { height: 2px; background: #333; margin: 12px 2px 0; border-radius: 2px; position: relative; }
.watch .pr i { position: absolute; inset: 0; background: #f2f2f2; border-radius: 2px; transform-origin: left center; transform: scaleX(.24); }
.watch .ctl { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; }
.watch .ctl svg { width: 26px; height: 26px; fill: none; stroke: #f2f2f2; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.watch .ctl .p { width: 50px; height: 50px; border-radius: 50%; background: #2b2b2b; display: grid; place-items: center; }
.oldword { flex: 1; min-width: 0; padding: 20px 22px; }
.oldword .t { font-size: 20px; line-height: 1.5; }
.oldword .ref { font-style: italic; font-size: 14px; color: var(--text2); margin-top: 8px; }
.oldword .card2 { margin-top: 16px; padding: 14px 16px; border-radius: 16px; }
.oldword .card2 .w { font-weight: 700; font-size: 21px; }
.oldword .card2 .k { font-size: 12.5px; color: var(--text2); margin: 1px 0 8px; }
.oldword .card2 .def { font-size: 17px; line-height: 1.4; }

.devices { margin-top: 130px; position: relative; }
.devices .band { height: 46px; }
.devs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 32px; margin-top: 30px; }
.devs svg { height: 40px; width: auto; stroke: var(--acc); fill: none; margin-bottom: 18px; }
.devs h3 { font-weight: 400; font-size: 24px; }
.devs p { font-size: 16px; line-height: 1.5; color: var(--text2); margin-top: 6px; }

.amounts { display: flex; padding: 8px; border-radius: 20px; max-width: 520px; }
.amounts span { flex: 1; text-align: center; padding: 15px 0; font-size: 22px; font-weight: 700; border-radius: 13px; position: relative; }
.amounts span + span::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 1px; background: var(--rule); }
.amounts .sel { color: var(--acc); box-shadow: inset 0 0 0 1px var(--acc); }
.amounts .sel::before, .amounts .sel + span::before { display: none; }
.thanks-line { font-style: italic; font-size: 16px; color: var(--text2); text-align: center; max-width: 520px; margin-top: 14px; }
.thanks { max-width: 520px; margin-top: 30px; padding: 24px 26px; }
.thanks .t { font-size: 27px; line-height: 1.35; }
.thanks .ref { font-style: italic; font-size: 15px; color: var(--text2); margin-top: 10px; }

.closing { text-align: center; padding-block: 140px 40px; }
.closing h2 { font-weight: 400; font-size: 52px; line-height: 1.1; }
.closing p { margin: 14px 0 30px; color: var(--text2); font-size: 19px; }

/* ════════ Support and privacy ════════ */
.doc-top { position: relative; padding-top: 64px; }
.doc-top .band { height: 330px; }
.privacy .doc-top { padding-top: 40px; }
.privacy .doc-top .band { height: 300px; }
.intro { align-items: start; }
.intro .txt { grid-column: 1 / 7; padding-top: 20px; }
.doc-page h1 { font-weight: 400; font-size: 62px; line-height: 1.04; letter-spacing: -.012em; margin-top: 12px; }
.lede { margin-top: 20px; font-size: 20px; line-height: 1.6; color: var(--text2); }
.prose a { color: var(--acc); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
@supports (color: color-mix(in srgb, red 50%, blue)) {
  .prose a { text-decoration-color: color-mix(in srgb, var(--acc) 45%, transparent); }
  .prose a:hover { text-decoration-color: var(--acc); }
}

/* Support: the tree by the water, the You page's own scene (Help & Support lives on You). */
.inapp { margin-top: 30px; display: flex; gap: 14px; font-size: 16.5px; line-height: 1.55; color: var(--text2); }
.inapp .ic { color: var(--acc); width: 22px; height: 22px; margin-top: 2px; }
.inapp b { color: var(--text); font-weight: 700; display: block; }
.write { grid-column: 8 / 13; margin-top: -120px; padding: 30px 30px 28px; position: relative; z-index: 2; }
.write small { display: block; font-size: 15px; font-style: italic; color: var(--text2); }
.write .addr { font-size: 25px; margin-top: 8px; overflow-wrap: anywhere; }
.write .btn { margin-top: 22px; width: 100%; }
.write p { margin-top: 16px; font-size: 14.5px; line-height: 1.5; color: var(--text2); }
.write .older { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--rule); }

.faq { margin-top: 110px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; border-top: 1px solid var(--rule); }
.qa { padding: 30px 0; border-bottom: 1px solid var(--rule); }
.qa h2 { font-weight: 400; font-size: 25px; line-height: 1.25; margin-bottom: 10px; display: flex; gap: 14px; align-items: baseline; }
.qa h2::before { content: ""; flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%; border: 1.2px solid var(--acc); background: radial-gradient(circle, var(--acc) 0 38%, transparent 42%); transform: translateY(-3px); }
.qa p, .qa ul { padding-left: 24px; }
.qa p { font-size: 17px; line-height: 1.6; color: var(--text2); }
.qa p + p { margin-top: 10px; }
.qa ul { margin-top: 10px; display: grid; gap: 6px; font-size: 16.5px; color: var(--text2); }
.qa li { position: relative; padding-left: 18px; }
.qa li::before { content: "·"; position: absolute; left: 2px; color: var(--acc); }

/* Privacy: the night sky, what happens while nobody is looking. The index stays beside the text. */
.date { margin-top: 12px; font-size: 17px; font-style: italic; color: var(--text2); }
.summary { grid-column: 7 / 13; margin-top: -120px; padding: 28px 30px; font-size: 17.5px; line-height: 1.62; position: relative; z-index: 2; }
.summary strong, .pv strong { font-weight: 700; }
.policy { margin-top: 100px; align-items: start; }
.toc { grid-column: 1 / 4; position: sticky; top: 30px; padding-top: 34px; }
.toc ol { list-style: none; display: grid; gap: 4px; font-size: 15px; color: var(--text2); }
.toc a { display: flex; gap: 10px; align-items: baseline; padding-block: 2.5px; transition: color .15s ease; }
.toc a:hover, .toc a.on { color: var(--text); }
.toc .dot { transform: translateY(-2px); }
.toc a.on .dot { background: var(--acc); border-color: var(--acc); }
.doc { grid-column: 4 / 11; }
.pv { padding: 30px 0; border-top: 1px solid var(--rule); scroll-margin-top: 24px; }
.pv h2 { font-weight: 400; font-size: 27px; line-height: 1.25; margin-bottom: 12px; }
.pv p { font-size: 17.5px; line-height: 1.62; color: var(--text2); }
.pv p + p, .pv ul + p { margin-top: 12px; }
.pv ul { display: grid; gap: 9px; margin-top: 10px; }
.pv li { position: relative; padding-left: 30px; font-size: 17px; line-height: 1.55; color: var(--text2); }
.pv li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 50%; border: 1px solid var(--muted); }
.pv strong { color: var(--text); }
.pv.never { border-top: 0; padding: 28px 30px; margin: 20px 0; background: var(--card); border-radius: 22px; box-shadow: 0 0 0 1px var(--edge), var(--lift); }
.pv.never li { color: var(--text); }
.pv.never li::before { border: 1.2px solid var(--acc); background: radial-gradient(circle, var(--acc) 0 38%, transparent 42%); }

/* ════════ Motion ════════
   Calm, and mostly once. A scene's lines draw themselves as it arrives, then its stars and birds
   appear; the pieces of the app rise into place and their shadow settles; the gold rings fill.
   The sky keeps a slow life of its own while it is on screen: stars twinkle, birds and haze
   drift, the tree sways from its root, the water moves, and the sun or moon eases along with
   the scroll. Transform and opacity only (plus the one-time line draw); loops pause off-screen
   and in a hidden tab. Reduce Motion, or no JavaScript, gets the still page, complete. */
@keyframes come { from { opacity: 0; transform: translate3d(0, 16px, 0); } }
@keyframes settle { from { opacity: 1; } to { opacity: 0; } }
@keyframes dawn { from { transform: translate3d(0, var(--from), 0); } }
@keyframes twinkle { to { opacity: .25; } }
@keyframes glide { to { transform: translate3d(var(--gx), var(--gy), 0); } }
@keyframes haze { from { transform: translate3d(-7px, 0, 0); } to { transform: translate3d(7px, 0, 0); } }
@keyframes flow { from { transform: translate3d(-12px, 0, 0); } to { transform: translate3d(12px, 0, 0); } }
@keyframes sway { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }
@keyframes listen { from { transform: scaleX(.24); } to { transform: scaleX(.46); } }

/* The sky: the sun or moon follows the scroll (truth.js); stars and birds wait for the land. */
.motion .band .orb { will-change: transform; }
.motion .band .st { transition: opacity 1.2s ease var(--fd, 1s); }
.motion .band:not(.ink) .st { opacity: 0; }

/* The pieces of the app rise into place, and the deeper shadow they rise with settles away. */
.motion .rise { transition: opacity .9s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 120ms), transform 1.2s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 120ms); }
.motion .rise.pre { opacity: 0; transform: translate3d(0, 30px, 0); }
.motion .glass.rise::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--lift-hi); opacity: 0; pointer-events: none; transition: opacity 1.5s ease calc(var(--i, 0) * 120ms + .2s); }
.motion .glass.rise.pre::after { opacity: 1; transition: none; }
/* The word card opens like the app's popover: quicker, from a little smaller, never see-through for long. */
.motion .wordcard.rise { transition: opacity .4s ease calc(var(--i, 0) * 120ms), transform .7s cubic-bezier(.2, .7, .2, 1) calc(var(--i, 0) * 120ms); }
.motion .wordcard.rise.pre { transform: translate3d(0, 10px, 0) scale(.95); }

/* The marks fill as their section arrives: the plan rings tick off, the streak counts up its days,
   and the watch plays on. */
.list .ring.on { transition: border-color .4s ease calc(.15s + var(--i, 0) * 240ms); }
.list .ring.on::after { transition: transform .55s cubic-bezier(.3, .7, .3, 1) calc(.25s + var(--i, 0) * 240ms); }
.motion .list.pre .ring.on { border-color: var(--muted); }
.motion .list.pre .ring.on::after { transform: scale(0); }
.streak .dot.on { transition: border-color .3s ease calc(.5s + var(--i, 0) * 110ms); }
.streak .dot.on::after { transition: transform .4s cubic-bezier(.3, .7, .3, 1) calc(.55s + var(--i, 0) * 110ms); }
.motion .streak.pre .dot.on { border-color: var(--muted); }
.motion .streak.pre .dot.on::after { transform: scale(0); }
.watch .pr i { transition: transform 1.4s cubic-bezier(.3, .6, .2, 1) .7s; }
.motion .watch.pre .pr i { transform: scaleX(0); }

/* A desktop pointer: the piece of the app under it leans toward it; the watch glass catches the light. */
.motion .home .frag { transition: transform .8s cubic-bezier(.2, .7, .2, 1); }
.motion .home .frag.lean { transition-duration: .15s; }
.watch::after { content: ""; position: absolute; left: -50%; top: -50%; width: 200%; height: 200%; border-radius: 50%; background: radial-gradient(closest-side, rgba(255, 255, 255, .10), rgba(255, 255, 255, 0)); opacity: 0; transform: translate(var(--sx, 0), var(--sy, 0)); transition: opacity .5s ease; pointer-events: none; }
.motion .frag.lean .watch::after { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* The opening: the words arrive with the first light (CSS only, so it plays from first paint). */
  html:not(.still) .hero h1 { animation: come 1.1s cubic-bezier(.2, .7, .2, 1) .15s both; }
  html:not(.still) .hero .tag { animation: come 1.1s cubic-bezier(.2, .7, .2, 1) .3s both; }
  html:not(.still) .hero .btn { animation: come 1.1s cubic-bezier(.2, .7, .2, 1) .45s both; }
  html:not(.still) .hero small { animation: come 1.1s cubic-bezier(.2, .7, .2, 1) .55s both; }
  html:not(.still) .hero .index { animation: come 1.1s cubic-bezier(.2, .7, .2, 1) .7s both; }
  html:not(.still) .doc-page .intro .txt > * { animation: come 1s cubic-bezier(.2, .7, .2, 1) .1s both; }
  html:not(.still) .doc-page .intro .txt > :nth-child(2) { animation-delay: .2s; }
  html:not(.still) .doc-page .intro .txt > :nth-child(3) { animation-delay: .3s; }
  html:not(.still) .doc-page .intro .txt > :nth-child(4) { animation-delay: .4s; }
  html:not(.still) .write:not(.rise), html:not(.still) .summary:not(.rise) { animation: come 1.2s cubic-bezier(.2, .7, .2, 1) .45s both; }
  html:not(.still) .write:not(.rise)::after, html:not(.still) .summary:not(.rise)::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: var(--lift-hi); pointer-events: none; animation: settle 1.6s ease .55s both; }

  /* The sky's slow life, and the watch playing on. */
  .motion .band .sun.dawn { animation: dawn 2.6s cubic-bezier(.2, .6, .2, 1) .3s both; }
  .motion .band .st.tw::before { animation: twinkle var(--tw) ease-in-out var(--td) infinite alternate; }
  .motion .band .bird { animation: glide var(--gd) ease-in-out infinite alternate; }
  .motion .band .haze { animation: haze 32s ease-in-out infinite alternate; }
  .motion .band .water { animation: flow 16s ease-in-out infinite alternate; }
  .motion .band .tree { animation: sway 9s ease-in-out infinite alternate; }
  .motion .watch.in .pr i { animation: listen 90s linear 2.2s forwards; }
  .motion .band:not(.live) *, .motion .band:not(.live) *::before,
  .motion.tab-hidden .band *, .motion.tab-hidden .band *::before, .motion.tab-hidden .watch * { animation-play-state: paused !important; }
}
@media print {
  .rise.pre, .list.pre, .streak.pre { opacity: 1 !important; transform: none !important; }
  .band path, .band circle, .devs svg * { stroke-dashoffset: 0 !important; }
}

/* ════════ Narrower screens ════════ */
@media (max-width: 1180px) {
  .L .text { grid-column: 7 / 13; } .R .text { grid-column: 1 / 7; }
  .scene h2 { font-size: 50px; }
  .lib { grid-template-columns: minmax(0, 1fr); }
  .wordcard { right: -14px; }
  .night-pair { gap: 18px; }
}
@media (max-width: 1060px) {
  .night-pair { flex-direction: column; align-items: center; }
  .oldword { align-self: stretch; }
}
@media (max-width: 900px) {
  .wrap { width: calc(100% - 40px); }
  .grid { grid-template-columns: minmax(0, 1fr); }
  .links { display: none; }
  .menu { display: block; }
  .nav .wrap { height: 60px; }

  .hero .band { height: 300px; }
  .hero h1 { font-size: 78px; margin-top: 8px; }
  .hero .tag { font-size: 20px; padding: 0 12px; }
  .hero small { padding: 0 24px; }
  .index { gap: 10px clamp(12px, 4.2vw, 22px); margin-top: 44px; }
  .index a { font-size: 12.5px; }
  .scene { padding-top: 84px; }
  .scene > .band { height: 168px; }
  .L .text, .R .text, .L .frag, .R .frag { grid-column: 1; grid-row: auto; }
  .scene .text { padding-top: 26px; }
  .scene .text, .intro .txt, .doc { max-width: 640px; }
  .frag, .frag.high, .nob .frag { margin-top: 30px; }
  .nob { padding-top: 28px; }
  .scene h2 { font-size: 38px; }
  .scene .body { font-size: 17.5px; }
  .streak .wk { display: none; }
  .votd { padding: 22px 20px 16px; }
  .votd .t { font-size: 21px; }
  .votd .acts { gap: 16px; }
  .panel { padding: 16px 16px 20px; }
  .wordcard { position: relative; right: auto; bottom: auto; width: auto; margin: 16px 0 0 28px; }
  .lib { grid-template-columns: minmax(0, 1fr); }
  .devs { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; }
  .amounts span { font-size: 18px; }
  .thanks .t { font-size: 23px; }
  .closing { padding-top: 110px; }
  .closing h2 { font-size: 40px; }
  .foot .wrap { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .foot nav { justify-content: flex-start; }

  .doc-top .band, .privacy .doc-top .band { height: 190px; }
  .intro .txt, .write, .summary, .doc { grid-column: 1; }
  .doc-page h1 { font-size: 40px; }
  .lede { font-size: 18.5px; }
  .write, .summary { margin-top: 30px; }
  .faq { grid-template-columns: minmax(0, 1fr); margin-top: 70px; }
  .toc { display: none; }
  .policy { margin-top: 60px; }
  .foot.slim { margin-top: 80px; }
  .foot.slim .wrap { flex-direction: column; gap: 14px; }
}
@media (min-width: 600px) and (max-width: 900px) {
  .hero h1 { font-size: 104px; }
  .scene h2 { font-size: 46px; }
}
@media (max-width: 480px) {
  .hero h1 { font-size: 72px; }
  .scene h2 { font-size: 34px; }
  .votd .t { font-size: 19.5px; }
  .votd .acts { gap: 12px; }
  .votd .acts span { font-size: 10.5px; }
  .streak { gap: 14px; padding: 14px 18px; }
  .wordcard { margin-left: 16px; }
  .lib li { grid-template-columns: 84px minmax(0, 1fr); }
  .devs { column-gap: 20px; }
  .devs h3 { font-size: 20px; }
  .amounts span { font-size: 16px; padding: 13px 0; }
  .closing h2 { font-size: 34px; }
  .write { padding: 24px 22px 22px; }
  .write .addr { font-size: 20px; }
  .summary, .pv.never { padding: 22px 22px; }
  .qa h2 { font-size: 22px; }
  .qa p, .qa ul { padding-left: 0; }
  .pv h2 { font-size: 24px; }
}
@media (max-width: 360px) {
  .hero h1 { font-size: 64px; }
  .votd .acts span:nth-child(4) { display: none; }
  .yours .row { padding: 13px 16px; gap: 10px; }
  .yours .cap { padding-inline: 16px; }
}