/* Privionyx — support and privacy pages.

   No web fonts, no analytics, no JavaScript. Partly because three static pages
   need none of it, and partly because a privacy policy that pulls a font from a
   third party while claiming the app sends nothing anywhere is not a good look.
   The system font stack also lands on the same typefaces the app itself uses.

   Colours follow the tokens from sadr.dev so these pages read as part of the
   same site. Dark mode is driven by the OS alone — there is no toggle, since a
   toggle needs JavaScript and state. */

:root {
  --primary: #1a73e8;
  --primary-hover: #174ea6;
  --primary-light: #e8f0fe;
  --text: #202124;
  --text-secondary: #4a4f54;
  --text-muted: #5f6368;
  --background: #ffffff;
  --background-alt: #f8f9fa;
  --border: #dadce0;
  --radius-sm: 8px;
  --radius-md: 16px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --primary: #8ab4f8;
    --primary-hover: #aecbfa;
    --primary-light: rgba(138, 180, 248, 0.14);
    --text: #e8eaed;
    --text-secondary: #bdc1c6;
    --text-muted: #9aa0a6;
    --background: #202124;
    --background-alt: #303134;
    --border: #4a4f54;
  }
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text);
  background: var(--background);
  -webkit-text-size-adjust: 100%;
  -webkit-font-smoothing: antialiased;
}

/* Navigation ------------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--background);
  border-bottom: 1px solid var(--border);
}

.nav-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 0.875rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

.nav-brand {
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  letter-spacing: -0.01em;
}

.nav-links {
  display: flex;
  gap: 1.25rem;
  font-size: 0.9375rem;
}

.nav-links a {
  color: var(--text-secondary);
  text-decoration: none;
}

.nav-links a:hover { color: var(--text); }
.nav-links a[aria-current="page"] { color: var(--primary); font-weight: 500; }

/* Page ------------------------------------------------------------------- */

.page {
  max-width: 720px;
  margin: 0 auto;
  padding: 3.5rem 1.5rem 4rem;
}

.eyebrow {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
  margin: 0 0 0.75rem;
}

h1 {
  font-size: 2.25rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin: 0 0 0.5rem;
}

.meta {
  font-size: 0.9375rem;
  color: var(--text-muted);
  margin: 0 0 2.5rem;
}

h2 {
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 3rem 0 1rem;
}

h3 {
  font-size: 1.0625rem;
  font-weight: 600;
  margin: 2rem 0 0.625rem;
}

p, li { color: var(--text-secondary); }
p { margin: 0 0 1rem; }

ul, ol { margin: 0 0 1.25rem; padding-left: 1.25rem; }
li { margin-bottom: 0.5rem; }

strong { color: var(--text); font-weight: 600; }

a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}

a:hover { color: var(--primary-hover); border-bottom-color: currentColor; }

/* The summary box at the top — the part most readers will actually read. */
.callout {
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  border-radius: var(--radius-sm);
  padding: 1.25rem 1.5rem;
  margin: 0 0 3rem;
}

.callout p { color: var(--text); }
.callout p:last-child { margin-bottom: 0; }

/* Landing page cards. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 1rem;
  margin: 2rem 0 1rem;
}

.card {
  display: block;
  padding: 1.5rem;
  background: var(--background-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.card:hover { border-color: var(--primary); }

.card h3 { margin: 0 0 0.375rem; color: var(--text); }
.card p { margin: 0; font-size: 0.9375rem; }

.footer {
  max-width: 720px;
  margin: 0 auto;
  padding: 1.5rem 1.5rem 3rem;
  border-top: 1px solid var(--border);
  font-size: 0.875rem;
  color: var(--text-muted);
}

.footer a { color: var(--text-muted); }
.footer a:hover { color: var(--text); }

@media (max-width: 600px) {
  h1 { font-size: 1.875rem; }
  h2 { font-size: 1.25rem; margin-top: 2.5rem; }
  .page { padding-top: 2.5rem; }
  .callout { padding: 1rem 1.25rem; }
}