/* Shared look for the legal pages (/privacy, /terms): the site's Signal Flag theme,
   light and dark, with the same nav, footer and colour-scheme control as the home page. */
:root {
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px;
  --gutter: 16px;
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;

  --bg: #ffffff;
  --bg-2: #f3f6fa;
  --text: #082f57;
  --muted: #4d6378;
  --line: #d5e0e9;
  --link: #0067a5;
  --link-hover: #00446e;
  --nav-bg: rgba(255, 255, 255, .95);
  --cta-bg: #082f57;
  --cta-fg: #ffffff;
  --badge-bg: #fff4d6;
  --badge-fg: #6b4a00;
  --badge-line: #f7c443;
  --toggle-on-bg: #082f57;
  --toggle-on-fg: #ffffff;
  --toggle-hover: rgba(8, 47, 87, .08);
  --flag-red: #d6293e;
  --flag-gold: #f7c443;
}
html[data-scheme="dark"] {
  --bg: #071a2e;
  --bg-2: #0c243c;
  --text: #e6f0f8;
  --muted: #a9bfd3;
  --line: #1d4569;
  --link: #6ec0f0;
  --link-hover: #a6dbfa;
  --nav-bg: rgba(7, 26, 46, .94);
  --cta-bg: #4aa8e0;
  --cta-fg: #071a2e;
  --badge-bg: #33280a;
  --badge-fg: #f7dc8f;
  --badge-line: #8a6d1c;
  --toggle-on-bg: #4aa8e0;
  --toggle-on-fg: #071a2e;
  --toggle-hover: rgba(255, 255, 255, .12);
}
@media (min-width: 600px) { :root { --gutter: 24px; } }
@media (min-width: 1024px) { :root { --gutter: 32px; } }

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 16.5px; line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--link); text-underline-offset: .15em; }
a:hover { color: var(--link-hover); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: 2px; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: var(--gutter); top: var(--space-2); z-index: 60; padding: var(--space-2) var(--space-4); background: var(--bg); }

/* ---------- nav (same as the home page) ---------- */
nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--nav-bg); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.nav-inner {
  max-width: 1140px; margin: 0 auto; padding: var(--space-3) var(--gutter);
  display: flex; align-items: center; gap: var(--space-6);
}
.brand {
  display: flex; align-items: center; gap: var(--space-3);
  font-weight: 700; font-size: 17px; letter-spacing: .12em;
  color: var(--text); text-decoration: none; white-space: nowrap;
}
.brand:hover { color: var(--text); }
.brand img { width: 32px; height: 32px; }
.nav-links { display: flex; gap: var(--space-6); margin-left: auto; align-items: center; }
.nav-links a { color: var(--text); font-size: 14px; font-weight: 500; letter-spacing: .03em; text-decoration: none; }
.nav-links a:hover { color: var(--link); }
.nav-links a.nav-cta {
  display: inline-flex; align-items: center; min-height: 40px;
  padding: var(--space-2) var(--space-4); border-radius: 2px;
  background: var(--cta-bg); color: var(--cta-fg); font-weight: 600;
}
.nav-links a.nav-cta:hover { color: var(--cta-fg); filter: brightness(1.12); }
@media (max-width: 860px) { .nav-links a:not(.nav-cta) { display: none; } }

/* ---------- page header with the flag stripe ---------- */
.doc-head { position: relative; overflow: hidden; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.doc-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(132deg, transparent 0 86%, var(--flag-red) 86% 89%, transparent 89%),
    linear-gradient(132deg, transparent 0 91%, var(--flag-gold) 91% 93%, transparent 93%);
}
.doc-head .col { position: relative; z-index: 1; padding-top: var(--space-12); padding-bottom: var(--space-10); }
.eyebrow { font-size: 13px; font-weight: 600; letter-spacing: .3em; text-transform: uppercase; color: var(--link); }
h1 { margin-top: var(--space-3); font-size: clamp(32px, 6vw, 48px); line-height: 1.1; font-weight: 800; letter-spacing: -.02em; }
.meta { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); margin-top: var(--space-4); color: var(--muted); font-size: 14.5px; }
.badge {
  display: inline-block; margin-top: var(--space-4); padding: var(--space-1) var(--space-3);
  border: 1px solid var(--badge-line); border-radius: 2px;
  background: var(--badge-bg); color: var(--badge-fg); font-size: 14px; font-weight: 600;
}

/* ---------- document body ---------- */
.col { max-width: 760px; margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
main .col { padding-top: var(--space-10); padding-bottom: var(--space-16); }
.toc { padding: var(--space-5) var(--space-6); border: 1px solid var(--line); background: var(--bg-2); }
.toc h2 { margin: 0; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; }
.toc ol { margin: var(--space-3) 0 0 var(--space-6); columns: 2 220px; column-gap: var(--space-8); }
.toc li { break-inside: avoid; font-size: 15px; }
main h2 { margin-top: var(--space-12); font-size: clamp(22px, 3.6vw, 27px); line-height: 1.25; font-weight: 700; scroll-margin-top: 80px; }
main h3 { margin-top: var(--space-6); font-size: 18px; line-height: 1.3; font-weight: 700; }
main p, main ul, main ol, main .table-wrap { margin-top: var(--space-4); }
main ul, main ol { padding-left: var(--space-6); }
main li + li { margin-top: var(--space-2); }
main .toc li + li { margin-top: var(--space-1); }
main strong { font-weight: 700; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .9em; overflow-wrap: anywhere; }
.table-wrap { border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td { padding: var(--space-3) var(--space-4); text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
th { background: var(--bg-2); font-weight: 700; }
tr:last-child td { border-bottom: 0; }
@media (max-width: 599px) {
  /* Stack table rows on phones so nothing scrolls sideways. */
  table, thead, tbody, tr, th, td { display: block; }
  thead { position: absolute; left: -9999px; }
  tr { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--line); }
  tr:last-child { border-bottom: 0; }
  td { padding: var(--space-1) 0; border: 0; }
  td::before { content: attr(data-label); display: block; font-size: 13px; font-weight: 700; color: var(--muted); }
}

/* ---------- footer (same as the home page) ---------- */
footer { background: var(--bg); border-top: 1px solid var(--line); padding: var(--space-10) 0 var(--space-12); }
.foot-inner {
  max-width: 1140px; margin: 0 auto; padding: 0 var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap;
}
.foot-brand { display: flex; align-items: center; gap: var(--space-3); font-weight: 700; letter-spacing: .12em; font-size: 15px; }
.foot-brand img { width: 28px; height: 28px; }
.foot-links { display: flex; gap: var(--space-3) var(--space-6); flex-wrap: wrap; }
.foot-links a { color: var(--muted); font-size: 14px; text-decoration: none; }
.foot-links a:hover, .foot-links a[aria-current="page"] { color: var(--text); text-decoration: underline; }
.foot-nl { width: 100%; color: var(--muted); font-size: 13.5px; }
.scheme-toggle { display: inline-flex; align-items: center; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 999px; }
.scheme-btn {
  display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 999px;
  background: transparent; color: var(--muted); cursor: pointer;
}
.scheme-btn svg { display: block; width: 15px; height: 15px; }
.scheme-btn:hover { color: var(--text); background: var(--toggle-hover); }
.scheme-btn[aria-pressed="true"] { background: var(--toggle-on-bg); color: var(--toggle-on-fg); }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }