/* Wordmi — one stylesheet for the landing page and the legal pages.
 *
 * The palette is lifted from the app's Book theme rather than invented, so a
 * visitor who downloads the app lands somewhere that looks like the page they
 * came from. Same warm paper, same burgundy, same Baskerville for display type.
 *
 * Light and dark both, following the visitor's system setting, exactly as
 * every theme in the app does. The four data-theme blocks near the bottom are
 * the app's other skins, picked from the strip on the home page.
 *
 * Motion policy, in one place because it is the part that can go wrong:
 * everything decorative starts visible. The scroll-reveal hides things only
 * under `html.anim`, which JavaScript adds only when the visitor has not asked
 * for reduced motion; the hero and Word Finder animations are wrapped in
 * `prefers-reduced-motion: no-preference`. No JavaScript, or a reduced-motion
 * setting, means a complete, still page — never a blank one.
 */

:root {
  --paper: #f7f2e5;
  --card: #fffdf5;
  --well: #f7efdd;
  --ink: #26201a;
  --muted: #736657;
  --accent: #73261f;
  --accent-soft: #73261f1a;
  --rule: #dcd2bd;
  --shadow: 0 1px 2px rgba(60, 48, 32, 0.06), 0 8px 24px rgba(60, 48, 32, 0.06);
  --display: "Baskerville", "Libre Baskerville", "Iowan Old Style", "Georgia", serif;
  --text: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
  --radius: 3px;

  /* Tag chips. Fixed hues, not theme hues: a tag keeps its color in the app
   * whatever the theme, so it does here too. Dark variants further down. */
  --chip-gold-bg: #f5e7c4;   --chip-gold-ink: #705312;   --chip-gold-line: #e2cd93;
  --chip-indigo-bg: #e6e2fb; --chip-indigo-ink: #453aa8; --chip-indigo-line: #cbc4f1;
  --chip-brown-bg: #edddd0;  --chip-brown-ink: #6e4a2f;  --chip-brown-line: #d8bfab;
  --chip-teal-bg: #d9eee9;   --chip-teal-ink: #1f6357;   --chip-teal-line: #b5ddd3;
}

@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1c1713;
    --card: #29221c;
    --well: #38302a;
    --ink: #e8dcc2;
    --muted: #a0917a;
    --accent: #cca359;
    --accent-soft: #cca35922;
    --rule: #40372c;
    --shadow: none;

    --chip-gold-bg: #3a2f14;   --chip-gold-ink: #e8c76f;   --chip-gold-line: #57461e;
    --chip-indigo-bg: #262046; --chip-indigo-ink: #b7aef5; --chip-indigo-line: #3c3470;
    --chip-brown-bg: #33241a;  --chip-brown-ink: #d9ab84;  --chip-brown-line: #4d3728;
    --chip-teal-bg: #12312c;   --chip-teal-ink: #7fd0bf;   --chip-teal-line: #1e4a42;
  }
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--text);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

.wrap { max-width: 68ch; margin: 0 auto; padding: 0 24px; }
.wide { max-width: 1080px; }

/* ── Header ─────────────────────────────────────────────────────────── */

header.site {
  padding: 20px 0;
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  background: color-mix(in srgb, var(--paper) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  z-index: 10;
}
header.site .wrap { display: flex; align-items: center; gap: 14px; }
header.site .mark { width: 32px; height: 32px; border-radius: 8px; display: block; }
header.site .name {
  font-family: var(--display);
  font-size: 21px;
  font-weight: 700;
  letter-spacing: 0.01em;
}
header.site nav { display: flex; gap: 20px; font-size: 15px; }
header.site nav a { color: var(--muted); text-decoration: none; }
header.site nav a:hover { color: var(--ink); }

/* The mark and the wordmark are one link home. `text-decoration: none` on the
 * link and its children both — a link whose contents are an image and a span
 * underlines the gap between them by default. */
header.site .home {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-right: auto;
  text-decoration: none;
  color: inherit;
}
header.site .home,
header.site .home * { text-decoration: none; }
header.site .home:hover .name { color: var(--accent); }
header.site .home .name { transition: color 0.15s ease; }

/* ── Shared section furniture ───────────────────────────────────────── */

section { padding: 72px 0; }
section h2 {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3.6vw, 2.4rem);
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}
section .sub { color: var(--muted); margin: 0 0 44px; max-width: 58ch; }
section h3 { font-family: var(--display); font-weight: 600; letter-spacing: 0; }

.kicker {
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin: 0 0 10px;
  font-weight: 600;
}

.prose { max-width: 68ch; }

.badges { display: flex; gap: 14px; flex-wrap: wrap; }
.badge {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ink); color: var(--paper);
  padding: 13px 26px; border-radius: 10px;
  text-decoration: none; font-weight: 600; font-size: 16px;
  transition: transform 0.15s ease, opacity 0.15s ease;
}
.badge:hover { transform: translateY(-1px); opacity: 0.92; }
.badge.ghost {
  background: transparent; color: var(--ink);
  border: 1px solid var(--rule);
}

/* Scroll reveal. Hidden only under html.anim, which only JavaScript adds and
 * only when motion is welcome. */
html.anim .reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}
html.anim .reveal.in { opacity: 1; transform: none; }

/* ── Hero ───────────────────────────────────────────────────────────── */

.hero { padding: 72px 0 56px; }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 56px;
  align-items: center;
}
.hero-copy .icon {
  width: 88px; height: 88px;
  border-radius: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 28px;
}
.hero-copy h1 {
  font-family: var(--display);
  font-size: clamp(2.6rem, 6vw, 3.8rem);
  line-height: 1.08;
  margin: 0 0 20px;
  letter-spacing: -0.015em;
}
.hero-copy .lede {
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  color: var(--muted);
  max-width: 46ch;
  margin: 0 0 32px;
}

/* The demonstration: a line of Melville, and the word being kept. */
.hero-demo { display: grid; gap: 18px; }
.page-quote {
  margin: 0;
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 30px 22px;
  font-family: var(--display);
  font-size: 1.35rem;
  line-height: 1.5;
}
.page-quote p { margin: 0 0 10px; }
.page-quote cite {
  display: block;
  font-size: 0.95rem;
  color: var(--muted);
  font-style: normal;
  letter-spacing: 0.02em;
}
.kept-word {
  color: var(--accent);
  background-image: linear-gradient(var(--accent-soft), var(--accent-soft));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 100% 45%;
}
.saved-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 18px 22px;
  max-width: 420px;
  margin-left: 36px;
}
.saved-head { display: flex; align-items: baseline; gap: 10px; }
.saved-word { font-family: var(--display); font-size: 1.25rem; font-weight: 600; }
.saved-pos { color: var(--muted); font-style: italic; font-size: 0.9rem; }
.saved-def { margin: 6px 0 12px; color: var(--muted); font-size: 15px; }
.saved-meta { display: flex; align-items: center; gap: 10px; }
.saved-tick { color: var(--accent); font-size: 13px; font-weight: 600; }
.saved-tick::before { content: "✓ "; }

@media (prefers-reduced-motion: no-preference) {
  .kept-word {
    background-size: 0% 45%;
    animation: sweep 0.7s ease 0.5s forwards;
  }
  .saved-card {
    opacity: 0;
    transform: translateY(14px);
    animation: settle 0.7s ease 1.3s forwards;
  }
  @keyframes sweep { to { background-size: 100% 45%; } }
  @keyframes settle { to { opacity: 1; transform: none; } }
}

/* ── Stat strip ─────────────────────────────────────────────────────── */

.stats { padding: 0 0 8px; }
.stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin: 0;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  padding: 28px 0;
}
.stat dt {
  font-family: var(--display);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--accent);
}
.stat dd { margin: 4px 0 0; color: var(--muted); font-size: 15px; max-width: 26ch; }

/* ── Steps ──────────────────────────────────────────────────────────── */

.steps {
  list-style: none;
  margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}
.step {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 28px 28px 30px;
}
.step-n {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px; height: 44px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent);
  font-family: var(--display);
  font-size: 1.15rem;
  margin-bottom: 16px;
}
.step h3 { font-size: 1.3rem; margin: 0 0 10px; }
.step p { margin: 0; color: var(--muted); font-size: 16px; }

/* ── Phones ─────────────────────────────────────────────────────────── */

.phones {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 34px;
}
.phone-fig { margin: 0; }
.phone {
  width: min(272px, 100%);
  margin: 0 auto;
  aspect-ratio: 9 / 18.5;
  border-radius: 42px;
  border: 9px solid #14100d;
  background: #14100d;
  /* The hairline ring is what keeps the bezel visible on the dark papers,
   * where near-black on near-black otherwise melts together. */
  box-shadow: 0 0 0 1px var(--rule), 0 12px 36px rgba(30, 22, 12, 0.22);
  position: relative;
}
.phone .screen {
  position: absolute; inset: 0;
  border-radius: 33px;
  overflow: hidden;
  background: var(--paper);
  padding: 34px 14px 14px;
  font-size: 12px;
  line-height: 1.4;
}
/* The island. Decoration, but the shape that says "phone". */
.phone::after {
  content: "";
  position: absolute;
  top: 9px; left: 50%;
  transform: translateX(-50%);
  width: 76px; height: 20px;
  border-radius: 12px;
  background: #14100d;
  z-index: 2;
}
.p-nav {
  font-family: var(--display);
  font-size: 19px;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}
.p-list { border-top: 1px solid var(--rule); }
.p-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 8px;
}
.p-row.alt { background: var(--well); }
.p-word { font-family: var(--display); font-size: 14px; }

.p-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 10px; }
.p-tile {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 8px;
  text-align: center;
  padding: 8px 2px;
}
.p-tile b { display: block; font-family: var(--display); font-size: 16px; font-weight: 600; }
.p-tile i { font-style: normal; color: var(--muted); font-size: 10px; }

.p-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 12px 13px;
  margin-bottom: 10px;
}
.p-card-title { color: var(--muted); font-size: 11px; margin-bottom: 4px; }
.p-level { font-family: var(--display); font-size: 20px; font-weight: 600; }
.p-small { font-style: normal; font-size: 11px; color: var(--muted); font-family: var(--text); }
.p-slider {
  height: 6px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--rule), var(--accent));
  position: relative;
  margin: 10px 0 6px;
}
.p-slider i {
  position: absolute;
  top: 50%; left: 30%;
  transform: translate(-50%, -50%);
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ink);
  border: 2px solid var(--card);
}
.p-scale { display: flex; justify-content: space-between; color: var(--muted); font-size: 10px; }
.p-note { color: var(--muted); font-size: 11px; margin-top: 6px; }
/* The card cut off by the bottom of the screen, the way a real screen crops. */
.p-peek { margin-bottom: -34px; }

.p-setting { display: flex; align-items: center; gap: 8px; }
.p-zap { font-size: 13px; }
.p-on { margin-left: auto; color: var(--accent); font-weight: 600; }
.p-explain { margin: -2px 2px 12px; }
.p-tags-title { margin: 0 2px 6px; text-transform: uppercase; letter-spacing: 0.06em; font-size: 10px; }
.p-taglist {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 4px 12px;
}
.p-tagrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--rule);
}
.p-tagrow:last-child { border-bottom: none; }
.p-count { color: var(--muted); font-size: 11px; }

.phone-fig figcaption { max-width: 34ch; margin: 22px auto 0; text-align: center; }
.phone-fig figcaption h3 { font-size: 1.25rem; margin: 0 0 8px; }
.phone-fig figcaption p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* Tag chips, shared by the phones and anything else that wears one. */
.chip {
  display: inline-block;
  font-family: var(--display);
  font-size: 11px;
  line-height: 1;
  padding: 4px 9px 5px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--well);
  color: var(--muted);
  white-space: nowrap;
}
.chip.gold   { background: var(--chip-gold-bg);   color: var(--chip-gold-ink);   border-color: var(--chip-gold-line); }
.chip.indigo { background: var(--chip-indigo-bg); color: var(--chip-indigo-ink); border-color: var(--chip-indigo-line); }
.chip.brown  { background: var(--chip-brown-bg);  color: var(--chip-brown-ink);  border-color: var(--chip-brown-line); }
.chip.teal   { background: var(--chip-teal-bg);   color: var(--chip-teal-ink);   border-color: var(--chip-teal-line); }

/* ── Word Finder ────────────────────────────────────────────────────── */

.finder { background: var(--well); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.finder-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-bottom: 48px;
}
.finder-copy h2 { margin-top: 0; }
.finder-copy .prose { color: var(--muted); }

.wf {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 26px 18px;
  /* Tall enough for the longest demo, so switching tools reshuffles the
   * answers without reshuffling the page under the reader's cursor. */
  min-height: 330px;
}
.wf-label { font-size: 13px; color: var(--muted); margin-bottom: 8px; }
.wf-input {
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--paper);
  padding: 12px 14px;
  min-height: 3.2em;
  font-size: 16px;
  font-family: var(--display);
}
.wf-caret {
  display: inline-block;
  width: 1px; height: 1.05em;
  background: var(--accent);
  vertical-align: text-bottom;
  margin-left: 1px;
}
@media (prefers-reduced-motion: no-preference) {
  .wf-caret { animation: blink 1.1s steps(1) infinite; }
  @keyframes blink { 50% { opacity: 0; } }
}
.wf-results { list-style: none; margin: 14px 0 0; padding: 0; }
.wf-results li {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding: 11px 2px;
  border-top: 1px solid var(--rule);
}
.wf-results b { font-family: var(--display); font-size: 1.05rem; font-weight: 600; }
.wf-results span { color: var(--muted); font-size: 14px; }
/* Results wait for the demonstration only when JavaScript is present to run it. */
html.js .wf-results li { opacity: 0; transform: translateY(6px); transition: opacity 0.45s ease, transform 0.45s ease; }
html.js .wf-results.done li { opacity: 1; transform: none; }
html.js .wf-results.done li:nth-child(2) { transition-delay: 0.12s; }
html.js .wf-results.done li:nth-child(3) { transition-delay: 0.24s; }
html.js .wf-results.done li:nth-child(4) { transition-delay: 0.36s; }

/* ── Drawn answers ──────────────────────────────────────────────────────
   Two of the tools answer with a shape rather than a list — a word's family
   tree, and a map of the words around one. Rendering those as rows of text
   was the site under-selling the app, so these mirror what the app actually
   draws: EtymologyResults.swift and WordNeighborhoodGraphView.swift. */
.wf-figure { margin-top: 14px; }
.wf-svg { width: 100%; height: auto; display: block; overflow: visible; }

/* The family tree: generations oldest at the top, joined by descent. */
.wf-node-box { fill: var(--card); stroke: var(--rule); stroke-width: 1; }
.wf-node-form { font-family: var(--display); font-size: 15px; font-weight: 600; fill: var(--ink); }
.wf-node-lang { font-size: 11px; fill: var(--muted); }
.wf-node-gloss { font-size: 12px; fill: var(--muted); }
.wf-stem { stroke: var(--rule); stroke-width: 1.5; fill: none; }

/* The map: a hub, arms, and the words they reach. */
.wf-hub-box { fill: var(--ink); }
.wf-hub-text { font-family: var(--display); font-size: 15px; font-weight: 600; fill: var(--paper); }
.wf-leaf-box { fill: var(--card); stroke-width: 1.5; }
.wf-leaf-text { font-family: var(--display); font-size: 13px; fill: var(--ink); }
/* A halo in the page colour, so the arm the label sits on does not run
   through the middle of the word. `paint-order` draws the stroke first and
   the fill over it, which is the SVG way to knock a line out behind text
   without covering it with a rectangle that would have to be sized. */
.wf-bearing {
  font-size: 9px;
  font-weight: 500;
  fill: var(--muted);
  stroke: var(--paper);
  stroke-width: 3px;
  paint-order: stroke fill;
}

.wf-legend {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin: 10px 0 0;
  padding: 0;
  font-size: 11px;
  color: var(--muted);
}
.wf-legend li { display: flex; align-items: center; gap: 5px; }
.wf-legend i { width: 16px; height: 2px; border-radius: 1px; }

/* The assembly. Each arm draws itself outward and its word arrives at the end
   of it, staggered by --i, which is the app's own build animation. Only with
   JavaScript, and only when motion is welcome — without either, everything is
   simply present. */
html.js .wf-figure .wf-node,
html.js .wf-figure .wf-leaf,
html.js .wf-figure .wf-bearing { opacity: 0; }
html.js .wf-figure .wf-stem,
html.js .wf-figure .wf-edge { opacity: 0; }
html.js .wf-figure.done .wf-node,
html.js .wf-figure.done .wf-leaf,
html.js .wf-figure.done .wf-bearing,
html.js .wf-figure.done .wf-stem,
html.js .wf-figure.done .wf-edge { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  html.js .wf-figure .wf-node,
  html.js .wf-figure .wf-leaf {
    transform: scale(0.94);
    transform-origin: center;
    transition: opacity 0.4s ease, transform 0.4s ease;
    transition-delay: calc(var(--i, 0) * 0.09s + 0.12s);
  }
  html.js .wf-figure.done .wf-node,
  html.js .wf-figure.done .wf-leaf { transform: none; }

  /* Drawn, not faded: the arm reaches the rim exactly as the word lands. */
  html.js .wf-figure .wf-edge,
  html.js .wf-figure .wf-stem {
    stroke-dasharray: 220;
    stroke-dashoffset: 220;
    transition: opacity 0.01s linear, stroke-dashoffset 0.45s ease-out;
    transition-delay: calc(var(--i, 0) * 0.09s);
  }
  html.js .wf-figure.done .wf-edge,
  html.js .wf-figure.done .wf-stem { stroke-dashoffset: 0; }

  html.js .wf-figure .wf-bearing {
    transition: opacity 0.3s ease;
    transition-delay: calc(var(--i, 0) * 0.09s + 0.42s);
  }
}

.shelf {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Buttons now, not cards: each tile loads its demo into the stage above.
 * Same face as before, plus the things a control owes a hand and a keyboard —
 * a cursor, a hover, a focus ring, and a pressed state that stays on. */
.tool {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 18px 20px;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.14s ease, border-color 0.14s ease,
              background-color 0.25s ease, color 0.25s ease;
}
.tool:hover { transform: translateY(-2px); border-color: var(--accent); }
.tool:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.tool[aria-pressed="true"] {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent);
}
.tool[aria-pressed="true"] h3::after {
  content: " ▸";
  color: var(--accent);
}
.tool h3 { font-size: 1.05rem; margin: 0 0 6px; }
.tool p { margin: 0; color: var(--muted); font-size: 14px; }

/* ── Word of the day ────────────────────────────────────────────────── */

.wotd-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 56px;
  align-items: center;
}
/* A lock screen is glassy and dark whatever the theme, so this one is too. */
.lockscreen {
  border-radius: 28px;
  background:
    radial-gradient(120% 90% at 20% 0%, #2c3347 0%, #171b26 55%, #0e1119 100%);
  color: #eef1f8;
  padding: 40px 30px 46px;
  max-width: 320px;
  margin: 0 auto;
  box-shadow: 0 14px 40px rgba(10, 12, 20, 0.35);
  text-align: center;
}
.ls-date { font-size: 14px; color: #aeb6c8; }
.ls-time {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 26px;
}
.ls-widget {
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 12px 16px;
  text-align: left;
}
.ls-brand { display: block; font-size: 10px; letter-spacing: 0.16em; color: #aeb6c8; }
.ls-widget b { font-family: var(--display); font-size: 19px; }
.ls-def { display: block; font-size: 12.5px; color: #cdd4e2; }
.wotd-copy h2 { margin-top: 0; }
.wotd-copy .prose { color: var(--muted); }

/* ── Plans ──────────────────────────────────────────────────────────── */

.plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.plan {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 30px 32px;
}
.plan.pro { border-top: 3px solid var(--accent); }
.plan h3 { font-size: 1.35rem; margin: 0 0 16px; }
.plan ul { margin: 0; padding: 0; list-style: none; }
.plan li {
  padding: 9px 0 9px 26px;
  border-top: 1px solid var(--rule);
  position: relative;
  font-size: 15.5px;
}
.plan li::before {
  content: "✓";
  position: absolute;
  left: 2px;
  color: var(--accent);
  font-weight: 700;
}
.plan-note { color: var(--muted); font-size: 14px; margin: 16px 0 0; }
.plans-footnote { color: var(--muted); margin-top: 28px; }

/* ── Themes strip ───────────────────────────────────────────────────── */

.swatches { display: flex; gap: 14px; flex-wrap: wrap; }

.swatch {
  flex: 1 1 160px;
  border-radius: var(--radius);
  border: 1px solid var(--rule);
  overflow: hidden;
  box-shadow: var(--shadow);
  padding: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform 0.14s ease, border-color 0.14s ease;
}
.swatch:hover { transform: translateY(-2px); border-color: var(--accent); }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.swatch[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.swatch .band { height: 68px; display: flex; }
.swatch .band i { flex: 1; }
.swatch .label {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 11px 14px;
  font-size: 14px;
  background: var(--card);
  border-top: 1px solid var(--rule);
}
.swatch[aria-pressed="true"] .label::after {
  content: "✓";
  color: var(--accent);
  font-weight: 700;
  margin-left: auto;
}

/* ── Roadmap ────────────────────────────────────────────────────────── */

.roadmap { border-top: 1px solid var(--rule); }
.road { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.road-item {
  border-left: 3px solid var(--accent-soft);
  padding: 4px 0 4px 20px;
}
.road-item h3 { font-size: 1.2rem; margin: 0 0 8px; }
.road-item p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ── Finale ─────────────────────────────────────────────────────────── */

.finale { text-align: center; padding: 88px 0 96px; }
.finale h2 { font-size: clamp(2rem, 4.5vw, 2.8rem); margin-bottom: 28px; }
.finale .badges { justify-content: center; }
.finale-note { margin: 26px auto 0; color: var(--muted); font-size: 15px; }

/* ── Themes, as the app has them ────────────────────────────────────── */

:root[data-theme="book"] {
  --paper: #f7f2e5; --card: #fffdf5; --well: #f7efdd;
  --ink: #26201a; --muted: #736657; --accent: #73261f;
  --accent-soft: #73261f1a; --rule: #dcd2bd;
  --display: "Baskerville", "Libre Baskerville", "Iowan Old Style", "Georgia", serif;
}

:root[data-theme="classic"] {
  --paper: #f2f2f7; --card: #ffffff; --well: #f2f2f7;
  --ink: #1c1c1e; --muted: #6c6c70; --accent: #1c1c1e;
  --accent-soft: #1c1c1e14; --rule: #d8d8dd;
  --display: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", sans-serif;
}

:root[data-theme="neon"] {
  --paper: #dee6f5; --card: #f7faff; --well: #e3e6f7;
  --ink: #0f1429; --muted: #57668a; --accent: #00738f;
  --accent-soft: #00738f1a; --rule: #c3cde6;
  --display: "Avenir Next", "Helvetica Neue", sans-serif;
}

:root[data-theme="natural"] {
  --paper: #e6ede0; --card: #f7fbf4; --well: #e0ebdb;
  --ink: #213324; --muted: #5c705c; --accent: #2e7338;
  --accent-soft: #2e73381a; --rule: #cbd9c4;
  --display: "Georgia", serif;
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="book"] {
    --paper: #1c1713; --card: #29221c; --well: #38302a;
    --ink: #e8dcc2; --muted: #a0917a; --accent: #cca359;
    --accent-soft: #cca35922; --rule: #40372c; --shadow: none;
  }
  :root[data-theme="classic"] {
    --paper: #000000; --card: #1c1c1e; --well: #1c1c1e;
    --ink: #f2f2f7; --muted: #98989f; --accent: #f2f2f7;
    --accent-soft: #f2f2f722; --rule: #38383a; --shadow: none;
  }
  :root[data-theme="neon"] {
    --paper: #05030f; --card: #170d29; --well: #291c40;
    --ink: #ebf5ff; --muted: #948fc7; --accent: #00f2ff;
    --accent-soft: #00f2ff22; --rule: #2e2249; --shadow: none;
  }
  :root[data-theme="natural"] {
    --paper: #0d170f; --card: #1c2b1f; --well: #293b2b;
    --ink: #e0f0d9; --muted: #99b38f; --accent: #94d17a;
    --accent-soft: #94d17a22; --rule: #2c3f2e; --shadow: none;
  }
}

/* The page repaints as a whole when a theme is picked, so the change reads as
 * one movement rather than a dozen elements changing at slightly different
 * moments. Off for anyone who has asked for less motion. */
body, header.site, .badge, .swatch, .swatch .label,
.step, .p-card, .p-tile, .p-taglist, .phone .screen,
.wf, .wf-input, .tool, .plan, .page-quote, .saved-card {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  body, header.site, .badge, .swatch, .swatch .label,
  .step, .p-card, .p-tile, .p-taglist, .phone .screen,
  .wf, .wf-input, .tool, .plan, .page-quote, .saved-card { transition: none; }
  html { scroll-behavior: auto; }
}

/* ── Legal pages ────────────────────────────────────────────────────── */

.doc { padding: 56px 0 96px; }
.doc h1 {
  font-family: var(--display);
  font-size: clamp(2rem, 5vw, 2.8rem);
  margin: 0 0 6px;
  letter-spacing: -0.015em;
}
.doc .effective {
  color: var(--muted); font-size: 15px;
  padding-bottom: 24px; margin-bottom: 32px;
  border-bottom: 1px solid var(--rule);
}
.doc h2 {
  font-family: var(--display);
  font-size: 1.35rem;
  margin: 40px 0 10px;
  padding-top: 4px;
}
/* Questions on the support page. A question mark's worth of visual weight
 * below h2: same face, smaller, with a hairline above to group the answer
 * with its question rather than the one before it. */
.doc h3 {
  font-family: var(--display);
  font-size: 1.13rem;
  margin: 30px 0 6px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
}
.doc p, .doc li { color: var(--ink); }
.doc strong { font-weight: 650; }
.doc table {
  width: 100%; border-collapse: collapse; margin: 22px 0;
  font-size: 15.5px; display: block; overflow-x: auto;
}
.doc th, .doc td {
  text-align: left; padding: 11px 14px;
  border-bottom: 1px solid var(--rule);
}
.doc th { background: var(--well); font-weight: 650; white-space: nowrap; }
.doc blockquote {
  margin: 22px 0; padding: 14px 20px;
  background: var(--well);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius);
  color: var(--muted);
}
.doc code {
  background: var(--well); padding: 1px 6px;
  border-radius: 3px; font-size: 0.92em;
}

/* ── Footer ─────────────────────────────────────────────────────────── */

footer.site {
  border-top: 1px solid var(--rule);
  padding: 40px 0 56px;
  color: var(--muted);
  font-size: 15px;
}
footer.site .wrap { display: flex; gap: 22px; flex-wrap: wrap; align-items: center; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
footer.site .spacer { margin-left: auto; }

/* ── Small screens ──────────────────────────────────────────────────── */

/* The demonstration, when it has been moved into the shelf on a narrow
   screen. Full width of the grid so it reads as belonging to the tile above
   it rather than as another tile, and separated from both by its own margin.
   See `placePanel` for why it moves at all. */
.shelf > .wf {
  grid-column: 1 / -1;
  margin: 4px 0 12px;
}

@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero { padding: 56px 0 44px; }
  .steps { grid-template-columns: 1fr; }
  .finder-grid { grid-template-columns: 1fr; gap: 36px; }
  .shelf { grid-template-columns: repeat(2, 1fr); }
  .wf { min-height: 0; }
  .wotd-grid { grid-template-columns: 1fr; gap: 40px; }
  .plans { grid-template-columns: 1fr; }
  .road { grid-template-columns: 1fr; gap: 20px; }
  .stat-row { grid-template-columns: 1fr; gap: 16px; }

  /* The phones become a shelf you thumb through sideways. */
  .phones {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 22px;
    padding-bottom: 12px;
    margin: 0 -24px;
    padding-left: 24px;
    padding-right: 24px;
    -webkit-overflow-scrolling: touch;
  }
  .phone-fig { flex: 0 0 min(78vw, 300px); scroll-snap-align: center; }
}

@media (max-width: 560px) {
  section { padding: 52px 0; }
  header.site nav { gap: 14px; font-size: 14px; }
  footer.site .spacer { margin-left: 0; width: 100%; }
  .shelf { grid-template-columns: 1fr; }
  .page-quote { font-size: 1.15rem; padding: 22px 22px 18px; }
  .saved-card { margin-left: 18px; }
}