/* Privacy, terms and support pages. No scripts and nothing from third parties (fonts are this site's own files),
   so the privacy page can say so and mean it. Palette and type follow styles.css: twilight navy, warm cream,
   one amber light. Kept separate so these pages stay readable even if the homepage's styles change. */
@font-face { font-family: "Bricolage Grotesque"; src: url("fonts/bricolage.woff2") format("woff2"); font-weight: 500 800; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("fonts/figtree.woff2") format("woff2"); font-weight: 400 700; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("fonts/jetbrains-mono.woff2") format("woff2"); font-weight: 400 500; font-display: swap; }
:root {
  color-scheme: dark;
  --bg: #121936;
  --panel: #1c2552;
  --panel2: #252f63;
  --line: rgba(190, 200, 255, 0.12);
  --line-strong: rgba(190, 200, 255, 0.22);
  --fg: #fbf5ea;
  --muted: #c6cae6;
  --faint: #8f97c2;
  --accent: #ffb547;
  --help: #ff7b7b;
  --ok: #7ee2a8;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --display: "Bricolage Grotesque", "Avenir Next", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--fg); font: 400 17px/1.65 var(--body); -webkit-font-smoothing: antialiased; }
a { color: var(--accent); text-underline-offset: 3px; }
a:hover { color: #ffd78f; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { max-width: 760px; margin: 0 auto; padding-inline: 16px; }
@media (min-width: 600px) { .wrap { padding-inline: 32px; } }

header.top { border-bottom: 1px solid var(--line); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: var(--fg); text-decoration: none; font: 700 22px/1 var(--display); letter-spacing: .01em; }
.brand img { width: 30px; height: 30px; border-radius: 8px; }
header.top nav { display: flex; gap: 18px; font-size: 15px; }
header.top nav a { color: var(--muted); text-decoration: none; }
header.top nav a:hover, header.top nav a[aria-current="page"] { color: var(--fg); }
@media (max-width: 480px) { header.top nav { gap: 12px; font-size: 14px; } }

main { padding-block: 48px 72px; }
.eyebrow { font: 500 12px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
h1 { font: 700 clamp(38px, 7vw, 56px)/1 var(--display); letter-spacing: -0.005em; margin: 14px 0 12px; text-wrap: balance; }
h2 { font: 700 28px/1.15 var(--display); letter-spacing: .005em; margin: 48px 0 12px; padding-top: 24px; border-top: 1px solid var(--line); text-wrap: balance; }
h3 { font-size: 17px; font-weight: 600; margin: 28px 0 6px; }
p, ul, ol { margin: 0 0 14px; }
ul, ol { padding-left: 22px; }
li { margin-bottom: 6px; }
li::marker { color: var(--faint); }
.updated { font: 400 13px/1.5 var(--mono); color: var(--faint); }
.muted { color: var(--muted); }
strong { font-weight: 600; }

.summary { margin: 28px 0 8px; padding: 20px 22px; border-radius: 16px; background: var(--panel); border: 1px solid rgba(255,181,71,.3); }
.summary p:last-child, .summary ul:last-child { margin-bottom: 0; }
.alert { margin: 24px 0; padding: 18px 20px; border-radius: 14px; background: rgba(255,123,123,.08); border: 1px solid rgba(255,123,123,.5); }
.alert strong { color: var(--help); }
.alert p:last-child { margin-bottom: 0; }

.toc { margin: 24px 0 0; padding: 16px 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--panel); font-size: 15px; }
.toc ol { margin: 6px 0 0; }
.toc a { color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--fg); }

.table { width: 100%; overflow-x: auto; margin: 12px 0 18px; border: 1px solid var(--line); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
th, td { text-align: left; vertical-align: top; padding: 11px 14px; border-bottom: 1px solid var(--line); }
th { font: 500 11.5px/1.3 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); background: var(--panel); }
tr:last-child td { border-bottom: 0; }
td:first-child { font-weight: 600; }
td { color: var(--muted); }
td:first-child { color: var(--fg); }

details { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 10px; }
details[open] { background: var(--panel2); border-color: var(--line-strong); }
summary { cursor: pointer; list-style: none; padding: 15px 18px; font-weight: 600; display: flex; justify-content: space-between; gap: 14px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--accent); font: 400 20px/1 var(--mono); flex: none; }
details[open] summary::after { content: "–"; }
details > div { padding: 0 18px 4px; color: var(--muted); }
details > div strong { color: var(--fg); }

.contact { display: grid; gap: 6px; margin: 20px 0; padding: 20px 22px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.contact .big { font: 700 24px/1.2 var(--display); word-break: break-word; }
kbd, code { font: 400 .88em var(--mono); background: var(--panel2); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; color: var(--fg); }

footer { border-top: 1px solid var(--line); padding-block: 28px 40px; font-size: 14px; color: var(--faint); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }
footer a { color: var(--muted); text-decoration: none; }
footer a:hover { color: var(--fg); }

@media print {
  :root { --bg: #fff; --panel: #fff; --panel2: #fff; --fg: #000; --muted: #222; --faint: #555; --line: #ccc; --line-strong: #999; --accent: #8a5200; }
  header.top nav, footer nav { display: none; }
  details { break-inside: avoid; }
  details > div { display: block !important; }
}

/* Phones: the three-column table becomes one card per row, each cell labelled, instead of scrolling sideways. */
@media (max-width: 600px) {
  .table { border: 0; overflow: visible; }
  table { min-width: 0; }
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr { border: 1px solid var(--line); border-radius: 12px; background: var(--panel); margin-bottom: 10px; padding: 4px 0; }
  td { border: 0; padding: 6px 14px; }
  td[data-label]:not(:first-child)::before { content: attr(data-label); display: block; font: 500 11px/1.4 var(--mono); letter-spacing: .08em; text-transform: uppercase; color: var(--faint); }
}