/* Gallery website. Colours come from the app logo (navy night, cyan and
   violet glows, gold sun, green hills) and the app's own theme (lib/theme/,
   Midnight: true black with the logo's violet). No web fonts: nothing is loaded
   from another host (test/website/website_test.dart). */

:root {
  color-scheme: light dark;

  --bg: #fcfcff;
  --surface: #f3f3fa;
  --surface-raised: #ffffff;
  --text: #15151b;
  --text-muted: #565663;
  --border: #dfdfec;
  --accent: #5b3fe0;
  --accent-soft: #efebff;
  --sun: #fff3c4;
  --sun-text: #5c4300;

  /* The logo: its navy ground, glows, sun and hills. */
  --night-1: #0b0f45;
  --night-2: #121a66;
  --night-3: #1b2a8c;
  --glow-cyan: #13c0fc;
  --glow-blue: #1a6bfa;
  --glow-violet: #6c38fa;
  --ridge-back: #25ba97;
  --ridge-front: #5ccf7c;

  --font-ui: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-read: Charter, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Noto Serif", serif;
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --card-shadow: 0 14px 32px rgb(24 24 70 / 0.12);
  --accent-line: rgb(91 63 224 / 0.35);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur: 260ms;
  --dur-slow: 800ms;

  --radius: 14px;
  --measure: 68ch;
  --gutter: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a0a12;
    --surface: #14141f;
    --surface-raised: #1b1b2a;
    --text: #f1f1f4;
    --text-muted: #a3a3ae;
    --border: #2a2b40;
    --accent: #a48cff;
    --accent-soft: #1e1940;
    --sun: #3a3214;
    --sun-text: #fde68a;
    --ridge-back: #1b8f78;
    --ridge-front: #3fa862;
    --card-shadow: 0 14px 32px rgb(0 0 0 / 0.5);
    --accent-line: rgb(164 140 255 / 0.4);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Legal pages: every in-page jump (contents list, skip link) lands below
   the sticky top bar. */
html:has(.topbar) {
  scroll-padding-top: 92px;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 17px;
  line-height: 1.6;
  overflow-wrap: break-word;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: var(--accent);
  text-underline-offset: 0.18em;
  text-decoration-thickness: 1px;
  transition: text-decoration-thickness var(--dur-fast), color var(--dur-fast);
}

a:hover {
  text-decoration-thickness: 2px;
}

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

code {
  font-family: var(--font-mono);
  font-size: 0.82em;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.05em 0.35em;
  word-break: break-all;
}

.skip {
  position: absolute;
  left: -9999px;
}

.skip:focus {
  left: var(--gutter);
  top: var(--gutter);
  z-index: 10;
  background: var(--surface-raised);
  padding: 8px 12px;
  border-radius: 8px;
}

.wrap {
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* ── Top bar ─────────────────────────────────────────────── */

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-top: 18px;
  padding-bottom: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

.nav {
  display: flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.nav a {
  display: block;
  padding: 8px 12px;
  border-radius: 999px;
  color: inherit;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
  transition: background-color var(--dur-fast), color var(--dur-fast);
}

.nav a:hover,
.nav a[aria-current="page"] {
  background: var(--surface);
}

/* Narrow phones: the brand and the legal links come first; the tour is
   right below the hero anyway. */
@media (max-width: 399px) {
  .nav .wide {
    display: none;
  }
}

.on-sky .nav a:hover,
.on-sky .nav a[aria-current="page"] {
  background: rgb(255 255 255 / 0.16);
}

/* ── Hero: the logo's navy night with its cyan and violet glows, the
   hills as the bottom edge ── */

.sky {
  position: relative;
  color: #ffffff;
  background:
    radial-gradient(55% 70% at 4% 34%, rgb(19 192 252 / 0.34), transparent 72%),
    radial-gradient(50% 65% at 96% 6%, rgb(108 56 250 / 0.55), transparent 72%),
    radial-gradient(70% 55% at 55% 105%, rgb(26 107 250 / 0.42), transparent 72%),
    linear-gradient(180deg, var(--night-1) 0%, var(--night-2) 58%, var(--night-3) 100%);
  overflow: hidden;
}

.sky::after {
  /* The logo's sparkle, by the sun. */
  content: "";
  position: absolute;
  width: 34px;
  height: 34px;
  right: max(calc(8% + 150px), calc(50% - 320px));
  top: 84px;
  background: linear-gradient(135deg, #c3b2ff, #8f73ff);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  filter: drop-shadow(0 0 10px rgb(157 130 255 / 0.8));
  pointer-events: none;
}

.sky::before {
  /* The sun. */
  content: "";
  position: absolute;
  width: 132px;
  height: 132px;
  right: max(8%, calc(50% - 470px));
  top: 112px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 36%, #fff7c2 0%, #fbd54d 62%, #f5a623 100%);
  box-shadow: 0 0 60px 18px rgb(251 213 77 / 0.32), 0 0 170px 60px rgb(251 213 77 / 0.1);
}

.hero {
  position: relative;
  padding-top: 56px;
  padding-bottom: 180px;
}

.hero h1 {
  margin: 0;
  max-width: 13ch;
  font-size: clamp(40px, 9vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  font-weight: 650;
}

.hero p {
  max-width: 34ch;
  margin: 22px 0 0;
  font-size: clamp(18px, 2.4vw, 21px);
  line-height: 1.5;
  color: rgb(255 255 255 / 0.9);
}

.stores {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 34px;
}

.store {
  display: inline-flex;
  flex-direction: column;
  min-width: 168px;
  padding: 10px 18px;
  border-radius: 12px;
  background: rgb(10 10 30 / 0.34);
  border: 1px solid rgb(255 255 255 / 0.28);
  color: #ffffff;
  text-decoration: none;
  line-height: 1.25;
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur-fast),
    border-color var(--dur-fast);
}

a.store:hover {
  background: rgb(10 10 30 / 0.48);
  border-color: rgb(255 255 255 / 0.5);
}

.store small {
  font-size: 12px;
  color: rgb(255 255 255 / 0.78);
}

.store strong {
  font-size: 17px;
  font-weight: 600;
}

.ridges {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  width: 100%;
  height: 150px;
}

.ridges .back {
  fill: var(--ridge-back);
}

.ridges .front {
  fill: var(--ridge-front);
}

.ridges .ground {
  fill: var(--bg);
}

/* ── Landing sections ───────────────────────────────────── */

.section {
  padding-top: 64px;
  padding-bottom: 8px;
}

.section h2 {
  margin: 0 0 8px;
  font-size: clamp(26px, 4.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 650;
}

.lede {
  margin: 0 0 28px;
  max-width: 56ch;
  color: var(--text-muted);
}

.promise {
  display: grid;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--border);
}

.promise li {
  display: grid;
  grid-template-columns: 3.2em 1fr;
  gap: 4px 16px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border);
}

.promise .num {
  grid-row: span 2;
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--accent);
  padding-top: 4px;
}

.promise strong {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.35;
}

.promise span:last-child {
  color: var(--text-muted);
}

.features {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

@media (min-width: 640px) {
  .features {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 960px) {
  .features {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.features li {
  padding: 20px;
  border-radius: var(--radius);
  background: var(--surface);
  transition:
    transform var(--dur) var(--ease-out),
    box-shadow var(--dur) var(--ease-out),
    background-color var(--dur);
}

.features h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.features p {
  margin: 0;
  color: var(--text-muted);
  font-size: 16px;
}

.vault-note {
  margin-top: 28px;
  padding: 22px;
  border-radius: var(--radius);
  background: var(--sun);
  color: var(--sun-text);
}

.vault-note h3 {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 600;
}

.vault-note p {
  margin: 0;
}

.faq {
  max-width: var(--measure);
  border-top: 1px solid var(--border);
}

.faq details {
  border-bottom: 1px solid var(--border);
}

.faq summary {
  cursor: pointer;
  padding: 18px 32px 18px 0;
  font-weight: 600;
  font-size: 18px;
  list-style: none;
  position: relative;
  transition: color var(--dur-fast);
}

.faq summary:hover {
  color: var(--accent);
}

.faq summary::-webkit-details-marker {
  display: none;
}

.faq summary::after {
  content: "+";
  position: absolute;
  right: 0;
  top: 17px;
  width: 26px;
  height: 26px;
  line-height: 24px;
  text-align: center;
  font-size: 24px;
  font-weight: 400;
  color: var(--text-muted);
  transition: transform var(--dur) var(--ease-out), color var(--dur-fast);
}

.faq details[open] summary::after {
  transform: rotate(45deg);
  color: var(--accent);
}

.faq details p {
  margin: 0 0 18px;
  color: var(--text-muted);
}

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

.topbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--bg);
}

.topbar .bar {
  padding-top: 14px;
  padding-bottom: 14px;
}

.doc-head {
  border-bottom: 1px solid var(--border);
}

.doc-title {
  padding-top: 32px;
  padding-bottom: 32px;
}

.doc-title h1 {
  margin: 0;
  font-size: clamp(34px, 6vw, 52px);
  line-height: 1.08;
  letter-spacing: -0.03em;
  font-weight: 650;
}

.doc-title p {
  margin: 10px 0 0;
  color: var(--text-muted);
  font-size: 15px;
}

.doc {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  padding-top: 32px;
  padding-bottom: 32px;
}

@media (min-width: 960px) {
  .doc {
    grid-template-columns: 240px minmax(0, var(--measure));
    gap: 56px;
  }

  .toc {
    position: sticky;
    top: 96px;
    align-self: start;
    max-height: calc(100vh - 120px);
    overflow-y: auto;
  }
}

.toc details {
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 4px 16px;
}

.toc summary {
  cursor: pointer;
  padding: 10px 0;
  font-weight: 600;
  font-size: 15px;
}

.toc ol {
  margin: 0 0 12px;
  padding-left: 1.4em;
  font-size: 14px;
  line-height: 1.45;
}

.toc li {
  margin: 6px 0;
}

.toc a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color var(--dur-fast);
}

.toc a:hover {
  color: var(--accent);
  text-decoration: underline;
}

.prose {
  min-width: 0;
  font-family: var(--font-read);
  font-size: 18px;
  line-height: 1.68;
}

.prose h2 {
  font-family: var(--font-ui);
  font-size: 23px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 650;
  margin: 48px 0 12px;
}

.prose h2:first-child {
  margin-top: 0;
}

.prose h3 {
  font-family: var(--font-ui);
  font-size: 18px;
  font-weight: 600;
  margin: 28px 0 8px;
}

.prose p,
.prose ul,
.prose ol {
  margin: 0 0 14px;
}

.prose li {
  margin: 4px 0;
}

.prose ul,
.prose ol {
  padding-left: 1.3em;
}

.summary {
  margin: 0 0 40px;
  padding: 22px 24px;
  border-radius: var(--radius);
  background: var(--accent-soft);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.55;
}

.summary h2 {
  margin: 0 0 10px;
  font-size: 18px;
}

.summary ul {
  margin: 0;
}

.caps {
  font-family: var(--font-ui);
  font-size: 15px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}

.table-scroll {
  overflow-x: auto;
  margin: 0 0 18px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
}

th,
td {
  text-align: left;
  vertical-align: top;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

tr:last-child td {
  border-bottom: 0;
}

th {
  background: var(--surface);
  font-weight: 600;
}

td:first-child {
  min-width: 9em;
}

address {
  font-style: normal;
}

.card {
  padding: 18px 20px;
  border-radius: var(--radius);
  background: var(--surface);
  font-family: var(--font-ui);
  font-size: 16px;
  margin: 0 0 14px;
}

.card p {
  margin: 0 0 4px;
}

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

.foot {
  margin-top: 72px;
  border-top: 1px solid var(--border);
  background: var(--surface);
  font-size: 15px;
  color: var(--text-muted);
}

.foot .wrap {
  display: grid;
  gap: 24px;
  padding-top: 36px;
  padding-bottom: 36px;
}

@media (min-width: 720px) {
  .foot .wrap {
    grid-template-columns: 1.4fr 1fr;
  }
}

.foot p {
  margin: 0 0 6px;
}

.foot strong {
  color: var(--text);
  font-weight: 600;
}

.foot ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.foot li {
  margin: 0 0 6px;
}

/* ── Feature tour: copy beside real app screens (app-ui.css) ── */

.hero-split {
  display: grid;
  gap: 40px;
  padding-bottom: 150px;
}

.hero-phone {
  position: relative;
  z-index: 1;
  justify-self: center;
}

/* Narrow screens: the headline runs full width, so the sun moves off it
   and rises behind the phone's shoulder instead. */
@media (max-width: 899px) {
  .sky::before {
    display: none;
  }

  .hero-phone::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: -44px;
    left: -40px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    background: radial-gradient(circle at 40% 36%, #fff7c2 0%, #fbd54d 62%, #f5a623 100%);
    box-shadow: 0 0 52px 16px rgb(251 213 77 / 0.32), 0 0 150px 52px rgb(251 213 77 / 0.1);
  }
}

/* Wide screens: the phone stands on the hills and the sun rises behind
   its shoulder, so the icon's scene stays whole. The phone column is the
   phone's width (312px at zoom 0.82) at the content's right edge. */
@media (min-width: 900px) {
  .hero-split {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    padding-top: 32px;
    padding-bottom: 96px;
  }

  .sky::before {
    width: 168px;
    height: 168px;
    top: 88px;
    right: max(244px, calc(50% - 296px));
  }

  .sky::after {
    top: 58px;
    right: calc(max(244px, calc(50% - 296px)) + 176px);
  }

  .hero-phone::after {
    /* Warm light from the sun on the glass. */
    content: "";
    position: absolute;
    inset: -60px -80px 30% -120px;
    z-index: -1;
    background: radial-gradient(closest-side at 30% 30%, rgb(255 226 140 / 0.3), transparent);
    pointer-events: none;
  }
}

/* ── Per-section colour: the app's own shortcut hues ─────── */

.t-blue { --hue: 78 168 245; }
.t-amber { --hue: 255 181 71; }
.t-pink { --hue: 244 114 182; }
.t-red { --hue: 255 90 100; }
.t-violet { --hue: 167 139 250; }
.t-teal { --hue: 46 196 182; }
.t-green { --hue: 76 195 138; }
.t-accent { --hue: 143 115 255; }
.t-night { --hue: 167 139 250; }

.show {
  --ink: color-mix(in srgb, rgb(var(--hue)) 68%, var(--text));
}

.show .eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
}

.show .eyebrow::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: rgb(var(--hue));
  box-shadow: 0 0 0 4px rgb(var(--hue) / 0.18), 0 0 18px rgb(var(--hue) / 0.7);
}

.show .ticks li::before {
  border-color: rgb(var(--hue));
}

.show .phones {
  position: relative;
  isolation: isolate;
}

/* A wide wash of the section's colour behind the whole row, edge to edge,
   leaning to the side its phones are on. */
.show {
  position: relative;
}

.show::before {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 100vw;
  translate: -50% 0;
  background: radial-gradient(46% 62% at var(--wash-x, 70%) 58%, rgb(var(--hue) / 0.13), transparent 72%);
  pointer-events: none;
}

.show.flip {
  --wash-x: 30%;
}

.show.stack {
  --wash-x: 50%;
}

.night .show::before {
  display: none;
}

.show .phones::before {
  /* The section's glow behind its phones. */
  content: "";
  position: absolute;
  z-index: -1;
  inset: -56px -90px;
  background:
    radial-gradient(ellipse 58% 52% at 50% 50%, rgb(var(--hue) / 0.5), transparent 72%),
    radial-gradient(ellipse 40% 40% at 72% 70%, rgb(var(--hue) / 0.28), transparent);
  filter: blur(8px);
  pointer-events: none;
}

/* The glows may spill past the content edge; the tour clips them (`clip`,
   not `hidden`, so nothing inside becomes a scroll box). */
.tour {
  position: relative;
  isolation: isolate;
  overflow-x: hidden;
  overflow-x: clip;
}

/* ── Jump bar: one pill per feature ──────────────────────── */

.jump {
  margin-top: 56px;
}

.jump ul {
  display: flex;
  gap: 8px;
  margin: 0 auto;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
  padding-top: 4px;
  padding-bottom: 4px;
}

.jump ul::-webkit-scrollbar {
  display: none;
}

.jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  text-decoration: none;
  transition:
    border-color var(--dur-fast),
    background-color var(--dur-fast),
    transform var(--dur) var(--ease-out);
}

.jump a::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgb(var(--hue));
}

.jump a:hover {
  border-color: rgb(var(--hue) / 0.6);
  background: rgb(var(--hue) / 0.12);
}

.show {
  scroll-margin-top: 24px;
}

/* ── The vault's night ───────────────────────────────────── */

.night {
  position: relative;
  margin-top: 96px;
  padding-bottom: 88px;
  /* `clip`, not `hidden`: a hidden box is a scroll container, and the
     vault's scroll-driven entrances would bind to it and never play.
     `hidden` first is the fallback for browsers without `clip`. */
  overflow: hidden;
  overflow: clip;
  color: #ffffff;
  background:
    radial-gradient(1.5px 1.5px at 12% 18%, rgb(255 255 255 / 0.9), transparent),
    radial-gradient(1px 1px at 22% 62%, rgb(255 255 255 / 0.7), transparent),
    radial-gradient(1.5px 1.5px at 31% 34%, rgb(255 255 255 / 0.8), transparent),
    radial-gradient(1px 1px at 44% 12%, rgb(255 255 255 / 0.7), transparent),
    radial-gradient(1px 1px at 53% 78%, rgb(255 255 255 / 0.6), transparent),
    radial-gradient(1.5px 1.5px at 63% 26%, rgb(255 255 255 / 0.9), transparent),
    radial-gradient(1px 1px at 71% 54%, rgb(255 255 255 / 0.6), transparent),
    radial-gradient(1px 1px at 82% 16%, rgb(255 255 255 / 0.8), transparent),
    radial-gradient(1.5px 1.5px at 89% 70%, rgb(255 255 255 / 0.7), transparent),
    radial-gradient(1px 1px at 95% 38%, rgb(255 255 255 / 0.7), transparent),
    radial-gradient(1px 1px at 6% 84%, rgb(255 255 255 / 0.6), transparent),
    radial-gradient(1px 1px at 37% 90%, rgb(255 255 255 / 0.5), transparent),
    linear-gradient(180deg, #1d1478 0%, #0e1150 38%, #080a2a 78%, #05060f 100%);
}

.night::before {
  /* A crescent moon, the sun's night-time twin. */
  content: "";
  position: absolute;
  top: 56px;
  right: max(6%, calc(50% - 470px));
  width: 72px;
  height: 72px;
  border-radius: 50%;
  box-shadow: inset 16px -6px 0 0 #fbd54d;
  filter: drop-shadow(0 0 22px rgb(251 213 77 / 0.4));
}

.night .show {
  --ink: #c9b8ff;
  padding-top: 112px;
}

.night .lede,
.night .ticks li {
  color: rgb(255 255 255 / 0.74);
}

.night .ticks strong,
.night h2 {
  color: #ffffff;
}

/* ── Rhythm ──────────────────────────────────────────────── */

@media (min-width: 900px) {
  .show {
    padding-top: 112px;
  }

  .show h2 {
    font-size: 42px;
  }
}

.night + .show {
  padding-top: 96px;
}

/* "And everything else": a coloured dot per card. */
.features li:nth-child(6n + 1) { --dot: 46 196 182; }
.features li:nth-child(6n + 2) { --dot: 167 139 250; }
.features li:nth-child(6n + 3) { --dot: 255 90 100; }
.features li:nth-child(6n + 4) { --dot: 78 168 245; }
.features li:nth-child(6n + 5) { --dot: 255 181 71; }
.features li:nth-child(6n + 6) { --dot: 244 114 182; }

.tour .features h3::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  border-radius: 50%;
  vertical-align: 1px;
  background: rgb(var(--dot));
  box-shadow: 0 0 12px rgb(var(--dot) / 0.6);
}

#features {
  scroll-margin-top: 16px;
}

.show {
  display: grid;
  gap: 28px;
  align-items: center;
  padding-top: 80px;
  padding-bottom: 8px;
}

.show h2 {
  margin: 0 0 8px;
  font-size: clamp(26px, 4.4vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  font-weight: 650;
}

.show .lede {
  margin-bottom: 20px;
}

@media (min-width: 900px) {
  .show {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 56px;
  }

  .show.flip {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .show.flip .show-copy {
    order: 2;
  }

  .show.stack {
    grid-template-columns: minmax(0, 1fr);
    gap: 36px;
  }
}

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

.ticks {
  display: grid;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ticks li {
  position: relative;
  padding-left: 30px;
  color: var(--text-muted);
}

.ticks li::before {
  /* A tick. */
  content: "";
  position: absolute;
  left: 3px;
  top: 0.42em;
  width: 13px;
  height: 7px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}

.ticks strong {
  color: var(--text);
  font-weight: 600;
}

@media (min-width: 900px) {
  .ticks.cols {
    grid-template-columns: 1fr 1fr;
    gap: 10px 40px;
  }
}

/* ── Motion ─────────────────────────────────────────────────
   CSS only, no script. Rules:
   • Everything that moves lives under `prefers-reduced-motion:
     no-preference`; the `reduce` block below also stops it outright.
   • Scroll-driven effects sit inside a feature query for scroll
     timelines. Without support, content is simply there — nothing waits
     to be revealed (test/website/website_test.dart).
   • Entrance and reveal animate `translate` / `opacity`; hover animates
     `transform`, so a finished reveal never pins a card in place.        */

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 22px;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes sunrise {
  from {
    opacity: 0;
    transform: translateY(46px) scale(0.86);
    box-shadow: 0 0 0 0 rgb(251 213 77 / 0), 0 0 0 0 rgb(251 213 77 / 0);
  }
}

@keyframes ridge-up {
  from {
    transform: translateY(var(--ridge-from, 40px));
  }
}

@keyframes sunset {
  to {
    translate: 0 110px;
  }
}

@keyframes drift {
  to {
    translate: 0 var(--drift, 24px);
  }
}

@keyframes reveal {
  from {
    opacity: 0;
    translate: 0 28px;
  }
}

@keyframes grow-x {
  from {
    transform: scaleX(0);
  }
}

@keyframes edge {
  to {
    box-shadow: 0 1px 0 var(--border), 0 10px 24px rgb(0 0 0 / 0.04);
  }
}

@keyframes flash {
  from {
    background-color: var(--accent-soft);
    box-shadow: 0 0 0 10px var(--accent-soft);
  }
}

@keyframes phone-in {
  from {
    opacity: 0;
    translate: 0 64px;
    rotate: -5deg;
    scale: 0.94;
  }
}

@keyframes glow-in {
  from {
    opacity: 0;
    scale: 0.55;
  }
}

@keyframes float {
  50% {
    translate: 0 -10px;
  }
}

@keyframes twinkle {
  50% {
    opacity: 0.55;
  }
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* Page to page: cross-fade, the logo stays where it is. */
  @view-transition {
    navigation: auto;
  }

  .brand {
    view-transition-name: brand;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--dur);
    animation-timing-function: var(--ease-in-out);
  }

  ::view-transition-group(brand) {
    animation-duration: 420ms;
    animation-timing-function: var(--ease-out);
  }

  /* Landing: the hero arrives in order — words, buttons, sun, hills. */
  .on-sky {
    animation: fade 600ms var(--ease-out) both;
  }

  .hero h1 {
    animation: rise var(--dur-slow) var(--ease-out) 60ms both;
  }

  .hero p {
    animation: rise var(--dur-slow) var(--ease-out) 160ms both;
  }

  .stores {
    animation: rise var(--dur-slow) var(--ease-out) 260ms both;
  }

  .hero-phone {
    animation: rise 900ms var(--ease-out) 320ms both;
  }

  /* The hero phone breathes once it has arrived. */
  .hero-phone .phone {
    animation: float 7s var(--ease-in-out) 1.4s infinite;
  }

  .night::before {
    animation: twinkle 5s var(--ease-in-out) infinite;
  }

  /* Feature phones lift toward the pointer. */
  .show .phone {
    transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
  }

  @media (hover: hover) {
    .show .phone:hover {
      transform: translateY(-8px);
    }

    .jump a:hover {
      transform: translateY(-2px);
    }
  }

  .sky::before,
  .hero-phone::before {
    animation: sunrise 900ms var(--ease-out) 340ms both;
  }

  .ridges .back {
    --ridge-from: 46px;
    animation: ridge-up 800ms var(--ease-out) 420ms both;
  }

  .ridges .front {
    --ridge-from: 26px;
    animation: ridge-up 720ms var(--ease-out) 480ms both;
  }

  /* Store buttons and cards answer the finger and the pointer. */
  @media (hover: hover) {
    a.store:hover {
      transform: translateY(-2px);
      box-shadow: 0 12px 28px rgb(20 10 60 / 0.3);
    }
  }

  a.store:active {
    transform: translateY(0) scale(0.97);
    box-shadow: 0 4px 12px rgb(20 10 60 / 0.25);
    transition-duration: 90ms;
  }

  @media (hover: hover) {
    .features li:hover {
      transform: translateY(-4px);
      background-color: var(--surface-raised);
      box-shadow: var(--card-shadow), inset 0 0 0 1px var(--accent-line);
    }
  }

  .features li:active {
    transform: scale(0.985);
    transition-duration: 90ms;
  }

  /* FAQ: the answer fades in everywhere, and slides open where the
     browser can animate to `auto`. */
  .faq details[open] p {
    animation: rise 420ms var(--ease-out) both;
  }

  @supports (interpolate-size: allow-keywords) {
    :root {
      interpolate-size: allow-keywords;
    }

    .faq details::details-content {
      block-size: 0;
      overflow: hidden;
      transition:
        block-size var(--dur) var(--ease-out),
        content-visibility var(--dur) allow-discrete;
    }

    .faq details[open]::details-content {
      block-size: auto;
    }
  }

  /* Legal: a section reached from the contents list lights up briefly. */
  .prose h2:target {
    border-radius: 6px;
    animation: flash 1800ms var(--ease-in-out);
  }

  @supports (animation-timeline: view()) {
    /* Sunset: as the hero scrolls away the sun sinks and the hills part. */
    .sky::before {
      animation:
        sunrise 900ms var(--ease-out) 340ms both,
        sunset linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 560px;
    }

    .ridges .back {
      --drift: 34px;
      animation:
        ridge-up 800ms var(--ease-out) 420ms both,
        drift linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 560px;
    }

    .ridges .front {
      --drift: 14px;
      animation:
        ridge-up 720ms var(--ease-out) 480ms both,
        drift linear both;
      animation-timeline: auto, scroll(root);
      animation-range: normal, 0 560px;
    }

    /* Sections rise into place as they come into view. Each one has
       finished by the time it is fully on screen, so the last items on
       the page are never left half-faded. */
    .section h2,
    .show h2,
    .eyebrow,
    .ticks li,
    .lede,
    .promise li,
    .features li,
    .vault-note,
    .faq summary {
      animation: reveal var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 100%;
    }

    @media (min-width: 640px) {
      .features li:nth-child(2n) {
        animation-range: entry 15% entry 100%;
      }
    }

    @media (min-width: 960px) {
      .features li:nth-child(2n) {
        animation-range: entry 0% entry 100%;
      }

      .features li:nth-child(3n + 2) {
        animation-range: entry 12% entry 100%;
      }

      .features li:nth-child(3n) {
        animation-range: entry 24% entry 100%;
      }
    }

    /* Phones rise and settle from a slight tilt; a pair or a trio
       arrives one after another, and the section's glow blooms behind. */
    .show .phone {
      animation: phone-in var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }

    .show .phone:nth-child(2) {
      animation-range: entry 12% entry 100%;
    }

    .show .phone:nth-child(3) {
      animation-range: entry 24% entry 100%;
    }

    /* Narrow screens: a strip of phones scrolls sideways, so it is a
       scroll container and its phones' view timelines would bind to it.
       The strip itself rises in instead. */
    @media (max-width: 899px) {
      .show .phones.many .phone {
        animation: none;
      }

      .show .phones.many {
        animation: reveal var(--ease-out) both;
        animation-timeline: view();
        animation-range: entry 0% entry 90%;
      }
    }

    .show .phones::before {
      animation: glow-in var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% cover 45%;
    }

    .ticks li:nth-child(2) {
      animation-range: entry 8% entry 100%;
    }

    .ticks li:nth-child(3) {
      animation-range: entry 16% entry 100%;
    }

    .ticks li:nth-child(4) {
      animation-range: entry 24% entry 100%;
    }

    /* Legal: a reading-progress line under the bar, and the bar gains an
       edge once the page has scrolled. */
    .topbar {
      animation: edge linear both;
      animation-timeline: scroll(root);
      animation-range: 0 80px;
    }

    .topbar::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: linear-gradient(90deg, var(--glow-violet), var(--glow-blue), var(--glow-cyan));
      transform-origin: 0 50%;
      animation: grow-x linear both;
      animation-timeline: scroll(root);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }

  a.store,
  .features li,
  .show .phone,
  .jump a {
    transform: none !important;
  }
}

@media print {
  .bar,
  .topbar,
  .toc,
  .foot,
  .skip {
    display: none;
  }

  .doc {
    display: block;
  }

  body {
    background: #ffffff;
    color: #000000;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
  }
}

.brand-sub {
  font-weight: 500;
  opacity: 0.7;
}

@media (max-width: 640px) {
  .brand-sub {
    display: none;
  }
}