/* Shared shell for the legal and support pages (privacy, terms, faq, contact).
 * The site is static HTML with no build step, so these tokens are duplicated
 * from index.html rather than imported. Keep them in step: if a colour changes
 * on the home page it has to change here too. */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
:root {
  --ink: #f7f8f8;
  --ink-dim: rgba(247, 248, 248, 0.62);
  --ink-faint: rgba(247, 248, 248, 0.42);
  --dark: #0a0c0e;
  --card: rgba(247, 248, 248, 0.035);
  --line: rgba(247, 248, 248, 0.12);
  --accent: #00c46a;
  --mono: ui-monospace, 'Cascadia Code', 'JetBrains Mono', Menlo, Consolas, monospace;
}
body {
  font-family: 'General Sans', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--dark); color: var(--ink); line-height: 1.62; min-height: 100svh;
  padding: clamp(22px, 4vw, 48px) clamp(16px, 4.5vw, 40px) calc(96px + var(--cookie-bar, 0px));
  display: flex; justify-content: center;
}
a { color: var(--accent); }
.wrap { width: min(720px, 100%); display: flex; flex-direction: column; gap: 26px; }

.top { display: flex; align-items: center; gap: 13px; }
.top a { display: flex; align-items: center; gap: 13px; color: inherit; text-decoration: none; }
.mark {
  width: 38px; height: 38px; border-radius: 999px; flex-shrink: 0;
  border: 3px solid var(--accent);
  background: radial-gradient(circle at 35% 30%, #141020, #08060d 60%, #040305);
  box-shadow: 0 0 22px rgba(0, 196, 106, 0.42), inset 0 0 10px rgba(0, 196, 106, 0.2);
}
.top span { font-weight: 600; letter-spacing: -0.02em; font-size: 17px; }

h1 { font-size: clamp(1.9rem, 5.4vw, 2.6rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.08; }
h2 { font-size: 1.14rem; font-weight: 600; letter-spacing: -0.015em; }
h3 { font-size: 1rem; font-weight: 600; color: var(--ink); }
p, li { color: var(--ink-dim); }
p + p, h3 + p { margin-top: 10px; }
ul { padding-left: 20px; display: flex; flex-direction: column; gap: 9px; margin-top: 10px; }
li strong, p strong { color: var(--ink); font-weight: 600; }
code { font-family: var(--mono); font-size: 0.9em; color: var(--ink); }
section { border-top: 1px solid var(--line); padding-top: 22px; display: flex; flex-direction: column; gap: 8px; }
section + section { margin-top: 2px; }

.lede { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 19px 21px; color: var(--ink); }
.meta { font-family: var(--mono); font-size: 13px; color: var(--ink-faint); }

.qa { display: flex; flex-direction: column; gap: 20px; margin-top: 4px; }
.qa > div { display: flex; flex-direction: column; gap: 6px; }

.site-footer {
  border-top: 1px solid var(--line); padding-top: 22px; margin-top: 8px;
  display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center;
  font-size: 14px; color: var(--ink-faint);
}
.site-footer a { color: var(--ink-dim); text-decoration: none; }
.site-footer a:hover { color: var(--ink); }
.site-footer .footer-entity { margin-left: auto; color: var(--ink-faint); }