/* Static pages: FAQ, Terms, Privacy and the blog (scripts/build-blog.mjs).
   Same tokens, type and surfaces as the app (src/index.css) so they read as one product. No JavaScript. */

@font-face {
  font-family: 'Inter Variable';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin-wght-normal.woff2') format('woff2-variations');
  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: 'Space Grotesk Variable';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-latin-wght-normal.woff2') format('woff2-variations');
  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;
}

:root {
  color-scheme: dark;
  --bg: #070b18;
  --bg-2: #0c1226;
  --panel: #0f1630;
  --card: #131b3a;
  --card-2: #1a2450;
  --line: #2c3a70;
  --line-strong: #334480;
  --divider: #1e2a52;
  --text: #eef2ff;
  --text-2: #b4bde0;
  --body: #d4dbf5;
  --muted: #8b96c2;
  --accent: #8ab4ff;
  --gold: #f6c453;
  --warn: #fbbf24;
  --font: 'Inter Variable', 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --display: 'Space Grotesk Variable', 'Space Grotesk', 'Inter Variable', system-ui, sans-serif;
  --gutter: clamp(1rem, 5vw, 3.5rem);
  --measure: 46rem;
  --radius: 14px;
  font: 16px/1.65 var(--font);
  color: var(--body);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { transition: none !important; } }

/* Full-bleed header and footer, one reading column in between. */
body {
  margin: 0;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--measure)) minmax(var(--gutter), 1fr);
  grid-template-rows: auto 1fr auto;
  position: relative;
  isolation: isolate;
}
body > * { grid-column: 2; }
/* The space behind the page: two soft glows and the map's dot grid, fading out as you read. */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(900px 480px at 18% -10%, rgba(66, 84, 190, 0.28), transparent 70%),
    radial-gradient(700px 420px at 95% 5%, rgba(180, 80, 200, 0.12), transparent 70%),
    radial-gradient(circle, #26315c 1.1px, transparent 1.6px) 0 0 / 26px 26px;
  -webkit-mask-image: linear-gradient(#000 0, #000 220px, rgba(0, 0, 0, 0.35) 520px, transparent 100vh);
  mask-image: linear-gradient(#000 0, #000 220px, rgba(0, 0, 0, 0.35) 520px, transparent 100vh);
}

a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; overflow-wrap: anywhere; }
a:hover { color: #fff; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 5.5rem; }
::selection { background: rgba(138, 180, 255, 0.35); }

.skip-link { position: absolute; left: var(--gutter); top: -6rem; z-index: 20; padding: 0.5rem 0.8rem; border-radius: 8px; background: var(--panel); border: 1px solid var(--line-strong); color: var(--text); }
.skip-link:focus { top: 0.6rem; }

/* ---------- header ---------- */
body > header {
  grid-column: 1 / -1;
  position: sticky; top: 0; z-index: 10;
  display: grid;
  grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, var(--measure)) minmax(var(--gutter), 1fr);
  align-items: center;
  row-gap: 0.5rem;
  padding-block: 0.7rem;
  background: rgba(10, 15, 34, 0.88);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
body > header > * { grid-column: 2; grid-row: 1; }
.policy-brand {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 0.6rem;
  font: 700 1.1rem/1 var(--display); letter-spacing: 0.01em; color: var(--text); text-decoration: none; white-space: nowrap;
}
.policy-brand:hover { color: var(--text); }
.policy-brand > span { display: none; }   /* the ✦ placeholder; the logo below takes its place */
.policy-brand::before {
  content: ''; width: 30px; height: 30px; flex: 0 0 auto;
  background: url('/logo-mark-simple.svg') center / contain no-repeat;
  filter: drop-shadow(0 0 6px rgba(246, 196, 83, 0.35));
}
body > header nav { justify-self: end; display: flex; flex-wrap: wrap; gap: 0.3rem; }
body > header nav a {
  display: inline-flex; align-items: center; min-height: 36px; padding: 0 0.8rem; border-radius: 999px;
  font-size: 0.9rem; font-weight: 600; color: var(--text-2); text-decoration: none; border: 1px solid transparent;
}
body > header nav a:hover { color: var(--text); background: var(--card); }
body > header nav a[aria-current='page'] { color: var(--text); background: color-mix(in srgb, var(--accent) 18%, var(--bg-2)); border-color: var(--accent); }
@media (max-width: 560px) {
  body > header nav { grid-row: 2; justify-self: start; margin-left: -0.5rem; }
  body > header nav a { min-height: 40px; }
  .byline-sep { display: none; }
}

/* ---------- main ---------- */
main { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(3rem, 7vw, 5rem); min-width: 0; }
h1, h2, h3 { font-family: var(--display); color: var(--text); line-height: 1.15; text-wrap: balance; letter-spacing: -0.005em; }
h1 { font-size: clamp(2rem, 5.2vw, 3rem); font-weight: 700; margin: 0.25em 0 0.35em; letter-spacing: -0.015em; }
h2 { font-size: 1.45rem; font-weight: 700; margin: 2.75rem 0 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--divider); }
h3 { font-size: 1.08rem; font-weight: 600; margin: 1.75rem 0 0.4rem; }
h2 + h3 { margin-top: 1rem; }
p { margin: 0 0 1em; }
ul, ol { padding-inline-start: 1.35em; margin: 0.25em 0 1.1em; }
li { margin: 0.3em 0; }
li::marker { color: var(--accent); }
strong { color: var(--text); font-weight: 650; }
em { color: var(--text); }
hr { border: 0; height: 1px; margin: 2.5rem auto; width: 100%; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); }

/* Small print above and below a title: dates, versions, bylines. */
.eyebrow { margin: 0 0 0.6rem; font: 600 0.72rem/1.3 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.eyebrow a { color: inherit; text-decoration: none; }
.eyebrow a:hover { text-decoration: underline; }
.effective, .updated, time { color: var(--text-2); font-size: 0.92rem; }
h1 + .effective, h1 + .updated { margin: -0.1rem 0 1.75rem; }
.lead { font-size: 1.15rem; line-height: 1.55; color: var(--text-2); max-width: 36em; margin: 0 0 2rem; }
.draft-tag {
  display: inline-block; vertical-align: middle; padding: 0.1em 0.55em; border-radius: 999px;
  font: 600 0.68rem/1.6 var(--font); letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 45%, transparent);
}

/* Cards: the summary at the top of the Terms, the contents list of the FAQ, closing callouts. */
.policy-summary, .policy-callout, .post-callout {
  margin: 1.5rem 0 2rem; padding: 1.1rem 1.3rem;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.policy-summary > h2, .policy-callout > h2 { margin: 0 0 0.6rem; padding: 0; border: 0; font: 600 0.72rem/1.3 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.policy-summary ul { margin: 0; }
.policy-summary li { margin: 0.35em 0; }
.policy-callout, .post-callout {
  background: color-mix(in srgb, var(--accent) 10%, var(--card));
  border-color: color-mix(in srgb, var(--accent) 35%, var(--line));
}
.policy-callout > :last-child, .post-callout > :last-child, .policy-summary > :last-child { margin-bottom: 0; }
.policy-callout h2 + p { color: var(--text); }
aside.policy-callout h2 { font: 700 1.15rem/1.25 var(--display); letter-spacing: normal; text-transform: none; color: var(--text); margin-bottom: 0.35rem; }

/* ---------- FAQ: one card list per section, every answer open (so find-in-page works in every browser) ---------- */
.faq-contents ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.faq-contents li { margin: 0; }
.faq-contents a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 0.9rem; border-radius: 999px;
  font-size: 0.9rem; font-weight: 500; color: var(--text); text-decoration: none;
  background: var(--card-2); border: 1px solid var(--line);
}
.faq-contents a:hover { border-color: var(--accent); }
.faq-section h2 { margin-bottom: 1rem; }
.faq-section h2 + p { color: var(--text-2); margin-bottom: 1rem; }
.qa-list { border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); overflow: hidden; }
.qa { border-top: 1px solid var(--divider); padding: 1.1rem 1.25rem 1.2rem 1.4rem; box-shadow: inset 3px 0 0 transparent; }
.qa:first-child { border-top: 0; }
.qa:target { box-shadow: inset 3px 0 0 var(--gold); background: color-mix(in srgb, var(--accent) 5%, transparent); }
.qa > h3 { margin: 0 0 0.45rem; font: 600 1.05rem/1.35 var(--display); color: var(--accent); text-wrap: pretty; }
.qa-body > :last-child { margin-bottom: 0; }

/* ---------- blog ---------- */
.byline { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem 0.75rem; margin: 0 0 2rem; color: var(--text-2); font-size: 0.92rem; }
.byline b { color: var(--text); font-weight: 600; }
.byline-avatar {
  display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  font: 700 0.95rem/1 var(--display); color: var(--bg);
  background: linear-gradient(135deg, var(--gold), #ffd98a);
  box-shadow: 0 0 0 1px rgba(246, 196, 83, 0.4), 0 0 14px rgba(246, 196, 83, 0.25);
}
.byline-sep { color: var(--muted); }
.post h1 { max-width: 24ch; }
.post h2 { margin-top: 3rem; }
.post h3 { font-size: 1.05rem; }
.post p, .post li { text-wrap: pretty; }
.post-callout { margin: 2rem 0; padding: 1.1rem 1.3rem 1.1rem 1.4rem; border-left: 3px solid var(--accent); }
.post-callout p { margin-bottom: 0.6em; }
.post-callout ul, .post-callout ol { margin-bottom: 0; }
.callout-title { margin: 0 0 0.6rem !important; font: 600 0.72rem/1.3 var(--font); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); }
.post > hr { width: 72px; margin: 3rem auto; background: linear-gradient(90deg, transparent, var(--gold), transparent); }
.table-wrap { overflow-x: auto; margin: 1.25rem 0 2rem; border: 1px solid var(--line-strong); border-radius: var(--radius); background: var(--card); }
.post table { border-collapse: collapse; width: 100%; min-width: 30rem; font-size: 0.92rem; }
.post th, .post td { text-align: left; vertical-align: top; padding: 0.7rem 1rem; border-bottom: 1px solid var(--divider); }
.post tr:last-child > * { border-bottom: 0; }
.post thead th { font: 600 0.7rem/1.3 var(--font); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--card-2); white-space: nowrap; }
.post tbody th { font-weight: 500; color: var(--text); }
.post tbody tr:hover > * { background: color-mix(in srgb, var(--accent) 5%, transparent); }

.post-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 1rem; }
.post-card {
  position: relative; margin: 0; padding: 1.3rem 1.4rem 1.25rem;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: var(--radius);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.post-card:hover { border-color: var(--accent); transform: translateY(-1px); }
.post-card h2 { margin: 0 0 0.35rem; padding: 0; border: 0; font-size: 1.3rem; line-height: 1.3; }
.post-card h2 a { color: var(--text); text-decoration: none; }
.post-card h2 a::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }   /* whole card is the link */
.post-card h2 a:focus-visible { outline: 0; }
.post-card:has(h2 a:focus-visible) { outline: 3px solid var(--gold); outline-offset: 3px; }
.post-card .byline { margin: 0 0 0.75rem; font-size: 0.85rem; }
.post-card p:last-child { margin: 0; color: var(--text-2); }
.post-card .read { display: inline-flex; align-items: center; gap: 0.3rem; margin-top: 0.9rem; font-size: 0.9rem; font-weight: 600; color: var(--accent); }
.post-card:hover .read { color: #fff; }

/* ---------- footer ---------- */
body > footer {
  grid-column: 1 / -1;
  display: flex; align-items: center; flex-wrap: wrap; gap: 0 1.1rem;
  /* the same left edge as the reading column */
  padding: 1.1rem max(var(--gutter), calc(50% - var(--measure) / 2)) calc(1.1rem + env(safe-area-inset-bottom));
  border-top: 1px solid var(--divider);
  background: var(--bg);
  font-size: 0.85rem;
}
body > footer > a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-2); text-decoration: none; }
body > footer > a:hover { color: var(--text); text-decoration: underline; }
body > footer > a:first-child { gap: 0.5rem; margin-right: 0.4rem; font: 700 0.95rem/1 var(--display); color: var(--text); }
body > footer > a:first-child::before { content: ''; width: 22px; height: 22px; background: url('/logo-mark-simple.svg') center / contain no-repeat; }

/* ---------- print ---------- */
@media print {
  :root { color-scheme: light; color: #171717; background: white; font-size: 11.5pt; }
  body::before, .skip-link, body > header nav, body > footer { display: none; }
  body { display: block; }
  body > header { position: static; background: none; border: 0; }
  main { padding: 0; }
  h1, h2, h3, strong, em, .qa > h3, .post tbody th { color: #111; }
  a, .effective, .updated, .eyebrow, time, .byline, .lead { color: #222; }
  .policy-callout, .policy-summary, .post-callout, .qa-list, .table-wrap, .post-card { background: none; border-color: #999; box-shadow: none; }
  .policy-brand::before, body > footer > a:first-child::before { display: none; }
  .policy-brand > span { display: inline; }
}

/* Blog screenshots (build-blog.mjs: an image on its own line) */
.post-figure { margin: 1.75rem 0; }
.post-figure img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line, #323e62); background: #0b1020; }
.post-figure figcaption { margin-top: .5rem; color: #bac6e5; font-size: .9rem; }

/* Blog "On this page" (build-blog.mjs withContents) */
.post h2, .post h3 { scroll-margin-top: 5.5rem; }
.toc { margin: 1.75rem 0 2rem; padding: 1rem 1.25rem; border: 1px solid var(--line, #323e62); border-radius: 12px; background: rgba(19, 30, 57, .6); }
.toc-title { margin: 0 0 .4rem; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: #bac6e5; }
.toc ol { margin: 0; padding-left: 1.3rem; columns: 2 16rem; column-gap: 2rem; }
.toc li { break-inside: avoid; padding: .2rem 0; }
.toc a { text-decoration: none; }
.toc a:hover, .toc a:focus-visible { text-decoration: underline; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
@media print { .toc { display: none; } }