/* Shared chrome for the static legal and support pages (terms, privacy, cookies, support).
 *
 * These four pages previously each carried their own inline <style> block, and they had drifted
 * into three different identities — different backgrounds, different accent colours, two different
 * logos, one of them a raster. They are linked directly from the footer of the canonical page, so
 * a visitor could cross from the black-and-gold site into a navy one in a single click.
 *
 * One stylesheet, one identity. Colour comes from the tokens in /styles.css, with literal
 * fallbacks so an unresolved token can never flash the old brand. */

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

html, body { margin: 0; background: var(--navy-950, #050505); }

body {
  font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", sans-serif);
  color: var(--fg-2, #cfc7b8);
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 820px; margin: 0 auto; padding: 0 22px 72px; }

/* ── header ─────────────────────────────────────────────────────────────────────────────────── */
header.legal {
  padding: 24px 0 18px;
  border-bottom: 1px solid var(--border-subtle, rgba(245, 240, 230, 0.09));
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
header.legal .brand { display: block; line-height: 0; }
header.legal .brand img { height: 30px; width: auto; display: block; }
header.legal a.back {
  color: var(--fg-2, #cfc7b8);
  font-size: 14px;
  font-weight: 650;
  text-decoration: none;
}
header.legal a.back:hover { color: var(--gold-400, #e4c36c); }

/* ── type ───────────────────────────────────────────────────────────────────────────────────── */
h1 {
  font-family: var(--font-display, inherit);
  color: var(--fg-1, #f5f0e6);
  font-size: clamp(32px, 5.5vw, 46px);
  line-height: 1.03;
  letter-spacing: -0.035em;
  margin: 0 0 8px;
}
h2 {
  font-family: var(--font-display, inherit);
  color: var(--fg-1, #f5f0e6);
  font-size: 21px;
  margin: 34px 0 10px;
}
.updated { color: var(--fg-3, #948d80); font-size: 13px; margin: 0 0 28px; }
p, li { line-height: 1.72; font-size: 16px; }
ul { padding-left: 22px; }
strong { color: var(--fg-1, #f5f0e6); }

a { color: var(--gold-400, #e4c36c); }
a:hover { color: var(--gold-300, #f0d488); }

.note {
  background: var(--surface-card, #191817);
  border: 1px solid var(--border-subtle, rgba(245, 240, 230, 0.09));
  border-left: 3px solid var(--gold-500, #c9a654);
  border-radius: 14px;
  padding: 16px 18px;
  font-size: 15px;
}

/* ── footer ─────────────────────────────────────────────────────────────────────────────────── */
footer.legal {
  border-top: 1px solid var(--border-subtle, rgba(245, 240, 230, 0.09));
  margin-top: 46px;
  padding-top: 20px;
  font-size: 13px;
  color: var(--fg-3, #948d80);
}
footer.legal a { color: var(--fg-2, #cfc7b8); margin-right: 14px; text-decoration: none; }
footer.legal a:hover { color: var(--gold-400, #e4c36c); }

:focus-visible { outline: 3px solid var(--gold-400, #e4c36c); outline-offset: 4px; }

@media (prefers-reduced-motion: no-preference) {
  a { transition: color 160ms ease; }
}