/* Styles for the text pages (privacy, support). The home page has its own inline. */
:root {
  color-scheme: light dark;
  --page: #f3f5fb;
  --ink: #121a3a;
  --muted: #55607f;
  --rule: rgba(34, 52, 120, 0.14);
  --accent: #e0561f;
  --sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", Arial, sans-serif;
  --display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Helvetica Neue", Arial, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --page: #0b1330;
    --ink: #eef1fb;
    --muted: #a7b0cf;
    --rule: rgba(167, 176, 207, 0.16);
    --accent: #ff8a4c;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--page); color: var(--ink); font: 18px/1.6 var(--sans); }
a { color: var(--accent); text-underline-offset: 3px; }
.wrap { max-width: 1040px; margin: 0 auto; padding: 0 20px; }

header.top { padding: 18px 0; color: #eef1fb; background: linear-gradient(135deg, #0e183a, #223478); }
header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand { display: flex; align-items: center; gap: 10px; color: inherit; text-decoration: none;
         font: 700 20px var(--display); }
.brand img { width: 32px; height: 32px; border-radius: 8px; }
nav a { color: inherit; opacity: 0.75; text-decoration: none; font-size: 15px; margin-left: 20px; }
nav a:hover, nav a[aria-current] { opacity: 1; }

main { max-width: 720px; margin: 0 auto; padding: 48px 20px 72px; }
h1 { font: 700 clamp(32px, 5vw, 44px)/1.1 var(--display); margin: 0 0 8px; letter-spacing: -0.01em; }
h2 { font: 600 24px/1.3 var(--display); margin: 40px 0 8px; }
h3 { font: 600 19px/1.35 var(--display); margin: 28px 0 6px; }
.updated, .sub { font-size: 15px; color: var(--muted); margin: 0 0 32px; }
li { margin: 8px 0; }

footer { border-top: 1px solid var(--rule); padding: 32px 0 48px; font-size: 14px; color: var(--muted); }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; }
footer nav a { color: var(--muted); opacity: 1; }

@media (max-width: 820px) {
  nav a.optional { display: none; }
  main { padding-top: 32px; }
}