/* Shared by the five policy pages.

   Deliberately standalone rather than part of the app's bundle: these are plain documents
   that must render for a payment gateway's automated checker and for anyone with scripting
   off, so they carry no JavaScript and no hashed asset names. The file is unhashed, which is
   right - FastAPI serves it through the same catch-all as any real file, so it gets an ETag
   and a Last-Modified without an immutable cache header.

   The tokens are duplicated from styles.css rather than imported, because importing would
   mean bundling, and bundling would mean these pages depend on the app building. Five colour
   values is a cheaper duplication than that dependency. */

:root {
  --ink: #14161a;
  --ink-2: #4a515c;
  --muted: #737c8a;
  --line: #e3e6eb;
  --bg: #f6f7f9;
  --surface: #ffffff;
  --red: #c12e1f;
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root {
    --ink: #eef1f5;
    --ink-2: #b6bdc8;
    --muted: #8b93a1;
    --line: #2a2f38;
    --bg: #14171c;
    --surface: #1b1f26;
    --red: #e0523f;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 400 16px/1.6 ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap {
  max-width: 720px;
  margin: 0 auto;
  padding: 24px 16px 64px;
}

header {
  padding-bottom: 16px;
  margin-bottom: 32px;
  border-bottom: 1px solid var(--line);
}

.brand {
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
}

.brand em { font-style: normal; color: var(--red); }

h1 {
  margin: 24px 0 4px;
  font-size: 27px;
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
}

h2 {
  margin: 32px 0 8px;
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
}

p, li { color: var(--ink-2); }

p { margin: 0 0 12px; }

ul { margin: 0 0 12px; padding-left: 20px; }

li { margin-bottom: 6px; }

.updated {
  margin: 0 0 24px;
  font-size: 13px;
  color: var(--muted);
}

a { color: var(--ink); text-decoration: underline; text-underline-offset: 0.12em; }

a:hover { color: var(--red); }

footer {
  margin-top: 48px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 13px;
  color: var(--muted);
}

footer a { color: var(--muted); }

.nav { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.note {
  padding: 12px 14px;
  margin: 0 0 16px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  font-size: 14px;
}