/* Shared site header — linked from every page so navigation is identical
   everywhere. Self-contained: uses --sn-* tokens (not the page's own vars)
   because each page defines its own palette and font stack. Keep the header
   markup in sync across pages: index, privacy, terms, support,
   delete-account, beta-feedback, 404. */
:root {
  --sn-ink: #2D1810; --sn-ink-2: #5A4132; --sn-accent: #A8391F; --sn-accent-ink: #8A2E15; --sn-cream: #F6E6D2;
}
:root[data-theme="dark"] {
  --sn-ink: #F6E6D2; --sn-ink-2: #E0CBB4; --sn-accent: #E2703F; --sn-accent-ink: #E2703F; --sn-cream: #160E08;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    --sn-ink: #F6E6D2; --sn-ink-2: #E0CBB4; --sn-accent: #E2703F; --sn-accent-ink: #E2703F; --sn-cream: #160E08;
  }
}
.site-header { position: relative; z-index: 10; width: 100%; padding: 22px 0 6px; font-family: inherit; }
.site-header-inner {
  max-width: 1080px; margin: 0 auto; padding: 0 24px;
  display: flex; align-items: center; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap;
}
.site-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--sn-ink); }
.site-brand img { width: 36px; height: 36px; border-radius: 10px; display: block; box-shadow: 0 4px 14px rgba(45,24,16,0.14); }
.site-brand .wordmark, .fbrand .wordmark { width: auto; height: 24px; border-radius: 0; box-shadow: none; display: block; }
.foot .fbrand .wordmark { width: auto; height: 20px; border-radius: 0; }
.wordmark-dark { display: none !important; }
:root[data-theme="dark"] .wordmark-light { display: none !important; }
:root[data-theme="dark"] .wordmark-dark { display: block !important; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .wordmark-light { display: none !important; }
  :root:not([data-theme]) .wordmark-dark { display: block !important; }
}
.site-nav, .site-links { display: flex; align-items: center; gap: clamp(12px, 2.4vw, 26px); }
.site-nav a {
  font-size: 15px; font-weight: 600; color: var(--sn-ink-2); text-decoration: none;
  padding: 6px 2px; border-bottom: 2px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.site-nav a:hover, .site-nav a:focus-visible { color: var(--sn-accent-ink); border-bottom-color: var(--sn-accent); }
.site-nav a[aria-current="page"] { color: var(--sn-ink); border-bottom-color: var(--sn-accent); }
.site-nav a.nav-cta {
  color: var(--sn-cream); background: var(--sn-ink); border-bottom: none;
  padding: 8px 16px; border-radius: 999px;
}
.site-nav a.nav-cta:hover, .site-nav a.nav-cta:focus-visible { color: var(--sn-cream); background: var(--sn-accent-ink); }
.theme-toggle {
  width: 36px; height: 36px; padding: 0; border-radius: 50%; cursor: pointer;
  display: inline-grid; place-items: center; color: var(--sn-ink-2);
  background: transparent; border: 1px solid color-mix(in srgb, var(--sn-ink) 22%, transparent);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.theme-toggle:hover, .theme-toggle:focus-visible { color: var(--sn-accent-ink); border-color: var(--sn-accent); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display: block; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
@media (max-width: 640px) {
  .site-header { padding-top: 16px; }
  .site-header-inner { padding: 0 20px; gap: 10px 8px; }
  .site-brand { gap: 8px; }
  .site-brand .wordmark { height: 22px; }
  .site-brand img { width: 32px; height: 32px; }
  .theme-toggle { width: 34px; height: 34px; }
  /* Row 1: brand + Download. Row 2: the text links, spread full width. */
  .site-nav { display: contents; }
  .site-brand { order: 1; }
  .theme-toggle { order: 2; margin-left: auto; }
  .site-nav a.nav-cta { order: 3; padding: 7px 14px; }
  .site-links { order: 4; width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 2px 22px; }
  .site-links a { font-size: 14px; }
}
@media (max-width: 420px) {
  .site-links { gap: 2px 18px; }
  .site-links a { font-size: 13px; }
}