/* Help Now — marketing site.

   Every value here is lifted from the app, not approximated: colors from src/theme/colors.ts,
   type sizes and weights from src/theme/scale.ts, radii from the same file, and the gold button's
   rim and engraved inner ring from src/components/PrimaryAction.tsx. Someone who taps from this
   page into the app should not be able to tell where one ends and the other begins.

   The type is the system face for the same reason the app uses it: on an iPhone it is SF Pro,
   which is what the app renders in, and it costs nothing to download. */

:root {
  /* The emerald plate. The app's splash, and the ground the logo was drawn on. */
  --plate: #064e3b;
  --plate-ink: #ffffff;
  --plate-muted: #c7e3d8;
  --plate-rule: rgba(255, 255, 255, 0.14);
  --mark: #6cc2b2;

  --bg: #eff4f1;
  --surface: #ffffff;
  --surface-muted: #dcefe9;
  --surface-alt: #e4efe9;
  --text: #10352a;
  --text-muted: #4a6b5d;
  --primary: #0f766e;
  --on-primary: #ffffff;
  --accent: #f6b719;
  --accent-pressed: #d19a0e;
  --on-accent: #10352a;
  --accent-soft: #fcf0d2;
  --accent-border: #ddb65a;
  --border: #b4cdc0;
  --hairline: #d3e3da;
  --danger: #9c3b2e;
  --focus: #0f766e;
  --lifted: 0 8px 20px rgba(3, 43, 33, 0.14);

  --font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue",
    Arial, sans-serif;
  --font-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  --measure: 40rem;
  --page: 68rem;
  --gutter: clamp(1rem, 5vw, 2rem);
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --plate: #043b2c;
    --plate-muted: #c7e3d8;
    --bg: #032b21;
    --surface: #0a4736;
    --surface-muted: #0f5c47;
    --surface-alt: #073a2d;
    --text: #ffffff;
    --text-muted: #ddeae3;
    --primary: #7ce6b3;
    --on-primary: #032b21;
    --accent-soft: #3e3210;
    --accent-border: #8c6e1a;
    --border: #14795d;
    --hairline: #0f5c47;
    --danger: #ffb4a6;
    --focus: #7ce6b3;
    --lifted: 0 8px 20px rgba(0, 0, 0, 0.35);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --plate: #043b2c;
  --plate-muted: #c7e3d8;
  --bg: #032b21;
  --surface: #0a4736;
  --surface-muted: #0f5c47;
  --surface-alt: #073a2d;
  --text: #ffffff;
  --text-muted: #ddeae3;
  --primary: #7ce6b3;
  --on-primary: #032b21;
  --accent-soft: #3e3210;
  --accent-border: #8c6e1a;
  --border: #14795d;
  --hairline: #0f5c47;
  --danger: #ffb4a6;
  --focus: #7ce6b3;
  --lifted: 0 8px 20px rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}
html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main {
  flex: 1 0 auto;
}
img,
svg,
video {
  display: block;
  max-width: 100%;
}

.wrap {
  max-width: var(--page);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.narrow {
  max-width: calc(var(--measure) + 2 * var(--gutter));
}

/* ── type: the app's scale, one step larger where a page has more room than a phone ─────────── */
h1,
h2,
h3 {
  font-family: var(--font-display);
  margin: 0;
  text-wrap: balance;
}
h1 {
  font-size: clamp(2.25rem, 6.4vw, 3.75rem);
  line-height: 1.04;
  font-weight: 800;
  letter-spacing: -0.03em;
}
h2 {
  font-size: clamp(1.75rem, 4.2vw, 2.5rem);
  line-height: 1.1;
  font-weight: 800;
  letter-spacing: -0.025em;
}
h3 {
  font-size: 1.1875rem;
  line-height: 1.3;
  font-weight: 700;
  letter-spacing: -0.012em;
}
p {
  margin: 0;
  text-wrap: pretty;
}
a {
  color: var(--primary);
  text-underline-offset: 0.18em;
}
strong {
  font-weight: 600;
}
.eyebrow {
  font-size: 0.75rem;
  line-height: 1.35;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
}
.eyebrow a {
  color: inherit;
  text-decoration: none;
}
.lede,
.lead,
.standfirst {
  font-size: clamp(1.0625rem, 2.2vw, 1.25rem);
  line-height: 1.5;
  color: var(--text-muted);
}
.muted {
  color: var(--text-muted);
}
.center {
  text-align: center;
}

a:focus-visible,
button:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 3px;
  border-radius: 6px;
}
.skip {
  position: absolute;
  left: -999px;
  top: 0;
}
.skip:focus {
  left: 1rem;
  top: 1rem;
  z-index: 50;
  background: var(--surface);
  color: var(--text);
  padding: 0.6rem 1rem;
  border-radius: 12px;
}

/* ── header: sits on the plate on every page, so each page opens the way the app does ────── */
.site-head {
  background: var(--plate);
  color: var(--plate-ink);
}
.site-head .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: 4.25rem;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--plate-ink);
  text-decoration: none;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.015em;
}
.brand img {
  width: 2rem;
  height: 2rem;
  flex: none;
}
.site-nav {
  display: flex;
  gap: clamp(0.9rem, 2.4vw, 1.75rem);
}
.site-nav a {
  color: var(--plate-muted);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  padding: 0.5rem 0;
}
.site-nav a:hover {
  color: var(--plate-ink);
}
.site-nav a[aria-current="page"] {
  color: var(--plate-ink);
  box-shadow: inset 0 -2px 0 var(--accent);
}
.site-head a:focus-visible {
  outline-color: var(--accent);
}
.site-nav a {
  white-space: nowrap;
}
.nav-short {
  display: none;
}
/* On a phone the nav drops "How it works" (the hero's own button goes there) and shortens the
   other two, so it stays on one line beside the name instead of wrapping into a stack. */
@media (max-width: 34rem) {
  .site-nav .nav-optional,
  .nav-long {
    display: none;
  }
  .nav-short {
    display: inline;
  }
  .site-nav a {
    font-size: 0.9375rem;
  }
}

/* ── buttons ─────────────────────────────────────────────────────────────────────────────── */
.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: center;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0 1.6rem;
  border-radius: 16px;
  font: 600 1.0625rem/1.2 var(--font);
  letter-spacing: -0.012em;
  text-decoration: none;
  border: 1.5px solid transparent;
  cursor: pointer;
  transition:
    transform 120ms cubic-bezier(0.22, 0.61, 0.36, 1),
    background-color 120ms;
}
.btn:active {
  transform: scale(0.97);
}
/* The coin, as a button. A rim in the pressed gold stands in for the bevel, and one engraved line
   sits just inside it -- the same struck edge PrimaryAction draws, which is most of what makes the
   app's button read as an object rather than a colored rectangle. */
.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
  border: 3px solid var(--accent-pressed);
  box-shadow:
    inset 0 0 0 3px var(--accent),
    inset 0 0 0 4.5px rgba(209, 154, 14, 0.55),
    var(--lifted);
}
.btn-primary:hover {
  background: #f9c33c;
  box-shadow:
    inset 0 0 0 3px #f9c33c,
    inset 0 0 0 4.5px rgba(209, 154, 14, 0.55),
    var(--lifted);
}
.btn-primary:active {
  background: var(--accent-pressed);
  box-shadow:
    inset 0 0 0 3px var(--accent-pressed),
    inset 0 0 0 4.5px rgba(16, 53, 42, 0.25);
}
.btn-secondary {
  background: transparent;
  color: var(--primary);
  border-color: var(--border);
}
.btn-secondary:hover {
  border-color: var(--primary);
}
.on-plate .btn-secondary {
  color: var(--plate-ink);
  border-color: rgba(255, 255, 255, 0.34);
}
.on-plate .btn-secondary:hover {
  border-color: var(--plate-ink);
}

/* ── sections ────────────────────────────────────────────────────────────────────────────── */
section {
  padding: clamp(3.5rem, 9vw, 6.5rem) 0;
}
section > .wrap {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.9rem;
  max-width: 38rem;
  margin: 0 auto clamp(1.5rem, 4vw, 2.75rem);
}
.band-alt {
  background: var(--surface-alt);
}
.on-plate {
  background: var(--plate);
  color: var(--plate-ink);
}
.on-plate .eyebrow {
  color: var(--mark);
}
.on-plate .lede,
.on-plate .muted {
  color: var(--plate-muted);
}

/* ── the home hero ───────────────────────────────────────────────────────────────────────── */
.hero-home {
  padding: clamp(1rem, 4vw, 2.5rem) 0 clamp(3.5rem, 9vw, 6rem);
  text-align: center;
}
.hero-home .wrap {
  align-items: center;
  gap: 0;
}
.hero-art {
  width: min(78vw, 26rem, 46svh);
  aspect-ratio: 1;
  margin: clamp(1rem, 4vw, 2.5rem) auto clamp(1.75rem, 5vw, 2.75rem);
  overflow: visible;
}
.hero-home .lede {
  max-width: 32rem;
  margin: 1.1rem auto 2rem;
}
.hero-home .actions {
  justify-content: center;
}
.hero-home .note {
  margin-top: 1.5rem;
  font-size: 0.9375rem;
  color: var(--plate-muted);
}

/* The animated mark. The resting state is written as the default style of every element, and
   each animation only describes how it arrives there -- so with Reduce Motion on, or before the
   CSS has parsed, the page shows the finished button and nothing ever moves. The sequence follows
   the original logo animation: the person who needs help starts in the circle, moves into the
   middle, and the circle closes around them. It ends on the one thing this product is for. */
.mark .arc {
  fill: none;
  stroke: var(--mark);
  stroke-width: 19;
  stroke-linecap: round;
}
.mark .person {
  fill: var(--mark);
}
.mark .notch {
  stroke: var(--plate);
  stroke-width: 4;
}
.mark .seeker {
  fill: var(--accent);
  opacity: 0;
  transform-origin: 300px 300px;
}
.mark .seeker .notch {
  stroke: var(--plate);
}
.mark .coin-disc {
  fill: var(--accent);
  stroke: var(--accent-pressed);
  stroke-width: 5;
}
.mark .engrave {
  fill: none;
  stroke: var(--accent-pressed);
}
.mark .coin-figure {
  fill: var(--on-accent);
}
.mark .coin-figure .notch {
  stroke: var(--accent);
}
.mark .pulse {
  fill: none;
  stroke: var(--accent);
  stroke-width: 6;
  opacity: 0;
}
.mark .orbit,
.mark .arcs,
.mark .pulse {
  transform-origin: 300px 300px;
}
.mark .coin {
  transform-origin: 300px 300px;
  filter: drop-shadow(0 10px 18px rgba(3, 43, 33, 0.35));
}
.mark .coin-link {
  cursor: pointer;
}
.mark .coin-link:focus {
  outline: none;
}
.mark .coin-link:focus-visible .coin-disc {
  stroke: var(--plate-ink);
}
.mark .coin-link:hover .coin-disc {
  fill: #f9c33c;
}
.mark .coin-link:active .coin {
  transform: scale(0.96);
}

@media (prefers-reduced-motion: no-preference) {
  .mark .arcs path {
    stroke-dasharray: 1 1;
    animation: draw 700ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .mark .arcs path:nth-child(2) {
    animation-delay: 90ms;
  }
  .mark .arcs path:nth-child(3) {
    animation-delay: 180ms;
  }
  .mark .arcs path:nth-child(4) {
    animation-delay: 270ms;
  }
  .mark .arrive {
    animation: arrive 520ms cubic-bezier(0.22, 0.61, 0.36, 1) backwards;
  }
  .mark .slot-b .arrive {
    animation-delay: 120ms;
  }
  .mark .slot-l .arrive {
    animation-delay: 210ms;
  }
  /* The circle starts a quarter turn back, so the place at the top of the ring is the one that
     finishes on the right. The gold figure starts there; a supporter fills it once they leave. */
  .mark .slot-r .arrive {
    animation: arrive 420ms cubic-bezier(0.22, 0.61, 0.36, 1) 1300ms backwards;
  }
  .mark .seeker {
    animation: seek 3300ms linear both;
  }
  .mark .orbit {
    animation: turn 1300ms cubic-bezier(0.65, 0, 0.35, 1) 1650ms backwards;
  }
  .mark .orbit .upright {
    animation: unturn 1300ms cubic-bezier(0.65, 0, 0.35, 1) 1650ms backwards;
  }
  .mark .coin {
    animation: coin-in 620ms cubic-bezier(0.22, 0.61, 0.36, 1) 2900ms backwards;
  }
  .mark .pulse {
    animation: pulse 900ms cubic-bezier(0.33, 1, 0.68, 1) 3500ms;
  }
  .mark.replay .pulse {
    animation: pulse-again 900ms cubic-bezier(0.33, 1, 0.68, 1);
  }
  /* Everyone at once: every person answers the same pulse at the same moment, never in turn. */
  .mark .heard {
    animation: heard 600ms cubic-bezier(0.22, 0.61, 0.36, 1) 3780ms;
  }
  .mark.replay .heard {
    animation: heard-again 600ms cubic-bezier(0.22, 0.61, 0.36, 1) 280ms;
  }
}

@keyframes draw {
  from {
    stroke-dashoffset: 1;
  }
  to {
    stroke-dashoffset: 0;
  }
}
@keyframes arrive {
  from {
    opacity: 0;
    transform: scale(0.6);
  }
}
@keyframes seek {
  0% {
    opacity: 0;
    transform: translate(0, -134px) scale(0.72);
    animation-timing-function: ease-out;
  }
  12% {
    opacity: 1;
    transform: translate(0, -134px) scale(0.72);
  }
  20% {
    opacity: 1;
    transform: translate(0, -134px) scale(0.72);
    animation-timing-function: cubic-bezier(0.65, 0, 0.35, 1);
  }
  47% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  88% {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
  94%,
  100% {
    opacity: 0;
    transform: translate(0, 0) scale(1);
  }
}
@keyframes turn {
  from {
    transform: rotate(-90deg);
  }
}
@keyframes unturn {
  from {
    transform: rotate(90deg);
  }
}
@keyframes coin-in {
  from {
    opacity: 0;
    transform: scale(0.42);
  }
  60% {
    opacity: 1;
  }
}
@keyframes pulse {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  15% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}
@keyframes pulse-again {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  15% {
    opacity: 0.9;
  }
  100% {
    opacity: 0;
    transform: scale(1.55);
  }
}
@keyframes heard {
  40% {
    transform: scale(1.14);
  }
}
@keyframes heard-again {
  40% {
    transform: scale(1.14);
  }
}

/* ── steps: numbered with the coin itself ────────────────────────────────────────────────── */
.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: clamp(2rem, 5vw, 3rem) clamp(1.5rem, 4vw, 3rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  counter-reset: step;
}
.steps li {
  counter-increment: step;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.6rem;
  max-width: 22rem;
  margin: 0 auto;
}
.steps li::before {
  content: counter(step);
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  margin-bottom: 0.5rem;
  border-radius: 50%;
  background: var(--accent);
  color: var(--on-accent);
  border: 3px solid var(--accent-pressed);
  box-shadow:
    inset 0 0 0 3px var(--accent),
    inset 0 0 0 4.5px rgba(209, 154, 14, 0.55),
    var(--lifted);
  font: 800 1.25rem/1 var(--font-display);
  font-variant-numeric: tabular-nums;
}
.steps p {
  color: var(--text-muted);
}

/* ── what a supporter sees ───────────────────────────────────────────────────────────────── */
.demo {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.25rem, 4vw, 2.5rem);
  margin: 0;
}
.phone {
  width: min(100%, 20rem);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 1.25rem 1.1rem 1.4rem;
  box-shadow: 0 1px 0 rgba(3, 43, 33, 0.04);
}
.phone-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1rem;
}
.phone-label span {
  font-weight: 400;
}
.bubble {
  background: var(--surface-muted);
  color: var(--text);
  border-radius: 20px 20px 20px 6px;
  padding: 0.75rem 0.95rem;
  font-size: 0.9375rem;
  line-height: 1.4;
  max-width: 92%;
}
.bubble + .bubble {
  margin-top: 0.4rem;
}
.bubble .link {
  color: var(--primary);
  text-decoration: underline;
}
.bubble-time {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0.4rem 0 0 0.5rem;
}
.responder {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
}
.responder svg {
  width: 4.5rem;
  height: 4.5rem;
  margin-bottom: 0.25rem;
}
.responder .eyebrow {
  font-size: 0.6875rem;
}
.responder h3 {
  font-size: 1.25rem;
}
.responder .muted {
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
}
.fake-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  border-radius: 16px;
  font-weight: 600;
  font-size: 1rem;
  border: 1.5px solid var(--border);
  color: var(--primary);
}
.fake-btn.gold {
  background: var(--accent);
  color: var(--on-accent);
  border: 3px solid var(--accent-pressed);
  box-shadow:
    inset 0 0 0 3px var(--accent),
    inset 0 0 0 4.5px rgba(209, 154, 14, 0.55);
}
.fake-btn.teal {
  background: var(--primary);
  color: var(--on-primary);
  border-color: var(--primary);
}
.demo-caption {
  text-align: center;
  color: var(--text-muted);
  font-size: 0.9375rem;
  max-width: 34rem;
  margin: clamp(1.5rem, 4vw, 2.25rem) auto 0;
}

/* ── things in the app ───────────────────────────────────────────────────────────────────── */
.tools {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: 1rem;
}
.tools li {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.45rem;
}
.tools svg {
  width: 2.75rem;
  height: 2.75rem;
  margin-bottom: 0.35rem;
  color: var(--primary);
}
.tools p {
  color: var(--text-muted);
  font-size: 0.9375rem;
}

/* ── gold band ───────────────────────────────────────────────────────────────────────────── */
.band-gold {
  background: var(--accent-soft);
  border-top: 1px solid var(--accent-border);
  border-bottom: 1px solid var(--accent-border);
}
/* The app's dark accentSoft is right for a chip and wrong for a full-width band, where it reads as
   brown. In dark mode the band sits on the plate instead and the gold rules carry it. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .band-gold {
    background: var(--plate);
  }
}
:root[data-theme="dark"] .band-gold {
  background: var(--plate);
}
.band-gold .wrap {
  align-items: center;
  text-align: center;
}
.band-gold .lede {
  max-width: 34rem;
}

/* ── inner-page hero (sponsorship) ───────────────────────────────────────────────────────── */
.hero {
  background: var(--plate);
  color: var(--plate-ink);
  text-align: center;
  padding: clamp(3rem, 8vw, 5.5rem) 0;
}
.hero .wrap {
  align-items: center;
}
.hero .eyebrow {
  color: var(--mark);
}
.hero h1 {
  max-width: 18ch;
}
.hero .standfirst {
  color: var(--plate-muted);
  max-width: 36rem;
}
.hero .actions {
  justify-content: center;
  margin-top: 0.75rem;
}
.hero .btn-secondary {
  color: var(--plate-ink);
  border-color: rgba(255, 255, 255, 0.34);
}
hr.rule {
  display: none;
}

/* Prose sections on inner pages: the heading is centered over a readable left-aligned column,
   because a centered paragraph of policy is much harder to read than a ragged-right one. */
main > section:not(.hero):not(.doc) > .wrap {
  max-width: calc(var(--measure) + 2 * var(--gutter));
}
main > section:not(.hero):not(.doc) > .wrap > h2 {
  text-align: center;
}
main > section:not(.hero):not(.doc) > .wrap > h2 + .lead {
  text-align: center;
}
main > section:not(.hero):not(.doc) > .wrap > h3 {
  margin-top: 0.75rem;
}
main.home > section:not(.hero):not(.doc) > .wrap,
main > section:not(.hero):not(.doc) > .wrap:has(> .steps) {
  max-width: var(--page);
}
/* Inner pages are one continuous ground, so the section rhythm is tighter than the home page's,
   where every section is its own band. */
main:not(.home) > section:not(.hero) {
  padding: clamp(2.25rem, 5vw, 3.5rem) 0;
}
main:not(.home) > section:not(.hero):first-child {
  padding-top: clamp(3rem, 7vw, 4.5rem);
}
@media (min-width: 52rem) {
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* ── cards / panels ──────────────────────────────────────────────────────────────────────── */
.panel {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: clamp(1.4rem, 3.5vw, 2rem);
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}
.panel-gold {
  background: var(--accent-soft);
  border-color: var(--accent-border);
}
.panel-danger {
  border-color: var(--danger);
  border-width: 1.5px;
}
.panel > h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  text-align: center;
}
.panel .actions {
  justify-content: center;
}
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
  gap: 1rem;
}

/* ── lists ───────────────────────────────────────────────────────────────────────────────── */
ul.dotted {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
/* Absolutely positioned so the bullet is never a flex item; see git history for why that matters. */
ul.dotted li {
  position: relative;
  padding-left: 1.5rem;
}
ul.dotted li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: inset 0 0 0 1.5px var(--accent-pressed);
}

/* ── documents: privacy, terms, support, deletion, the supporter library ─────────────────── */
.doc .wrap {
  max-width: calc(var(--measure) + 2 * var(--gutter));
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.doc .wrap > .eyebrow:first-child,
.doc .wrap > h1,
.doc .wrap > h1 + .lede,
.doc .wrap > h1 + .updated,
.doc .wrap > h1 + p {
  text-align: center;
}
.doc .wrap > h1 {
  font-size: clamp(2rem, 5.4vw, 3rem);
}
.doc .wrap > h1 + * {
  margin-bottom: 1rem;
}
.doc h2 {
  font-size: clamp(1.3rem, 3vw, 1.6rem);
  letter-spacing: -0.02em;
  margin-top: 1.75rem;
}
.doc h3 {
  margin-top: 0.9rem;
}
.doc ul,
.doc ol:not(.sources):not(.steps) {
  padding-left: 1.25rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.doc .updated {
  font-size: 0.875rem;
  color: var(--text-muted);
}
.doc-note {
  background: var(--surface-muted);
  border-radius: 16px;
  padding: 1rem 1.2rem;
  font-size: 0.9375rem;
}
.cite a {
  font-size: 0.7em;
  text-decoration: none;
  padding: 0 0.12em;
  vertical-align: super;
}
.doc h2.sources-head {
  font-size: 1rem;
  margin-top: 2rem;
  text-align: left;
}
.sources {
  font-size: 0.85rem;
  color: var(--text-muted);
  padding-left: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.sources a {
  color: var(--text-muted);
}
.doc .panel h2,
.doc .panel h3 {
  margin-top: 0;
  text-align: left;
}
.doc .grid .panel-link {
  padding: 1.1rem 1.25rem;
  text-align: center;
}
.doc .grid .panel-link h3 {
  margin: 0;
  text-align: center;
  font-size: 1.0625rem;
}
.panel-link a {
  text-decoration: none;
}
.panel-link a:hover {
  text-decoration: underline;
}

/* ── tables ──────────────────────────────────────────────────────────────────────────────── */
.table-wrap {
  overflow-x: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.25rem 0.5rem;
}
table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
  font-size: 0.96rem;
}
caption {
  caption-side: bottom;
  padding: 0.75rem 0.85rem 0.5rem !important;
  text-align: center !important;
}
th,
td {
  text-align: left;
  padding: 0.8rem 0.85rem;
  border-bottom: 1px solid var(--hairline);
}
tbody tr:last-child td {
  border-bottom: 0;
}
th {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border);
}
td.num,
th.num {
  text-align: right;
}

/* ── crisis strip and footer ─────────────────────────────────────────────────────────────── */
.crisis {
  background: var(--surface-muted);
  text-align: center;
  padding: 1.75rem 0;
}
.crisis .wrap {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
}
.crisis p {
  max-width: 38rem;
}
.crisis .muted {
  font-size: 0.9375rem;
}
.site-foot {
  background: var(--plate);
  color: var(--plate-muted);
  text-align: center;
  padding: 2.75rem 0 3.25rem;
}
.site-foot .wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
}
.site-foot .brand {
  font-size: 1rem;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem 1.4rem;
}
.foot-links a {
  color: var(--plate-muted);
  text-decoration: none;
  font-size: 0.9375rem;
}
.foot-links a:hover {
  color: var(--plate-ink);
  text-decoration: underline;
}
.fine {
  font-size: 0.8125rem;
  max-width: 36rem;
  color: var(--plate-muted);
  opacity: 0.85;
}

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