/*
  One stylesheet for the whole site. The privacy policy used to carry its own
  copy of these rules inline; keeping that habit would mean five pages drifting
  apart in five directions, so every page links here instead.

  Colours are declared as custom properties and swapped once for dark mode, so a
  page never repeats a colour and the two themes cannot fall out of step.
*/

:root {
  --bg: #f2f2f7;
  --surface: #ffffff;
  --text: #1c1c1e;
  --text-dim: #636366;
  --text-faint: #8e8e93;
  --accent: #007aff;
  --border: rgba(0, 0, 0, 0.08);
  --warn-bg: #fff3cd;
  --warn-line: #f0a500;
  --warn-text: #5c4500;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --surface: #1c1c1e;
    --text: #f2f2f7;
    --text-dim: #a1a1a6;
    --text-faint: #6e6e73;
    --accent: #4da2ff;
    --border: rgba(255, 255, 255, 0.12);
    --warn-bg: #2e2408;
    --warn-line: #f0a500;
    --warn-text: #f5d78a;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 48px 24px 80px;
}

/* ── language switcher ────────────────────────────────────────────────────── */

/* Real links, not a dropdown driven by script: the whole point of having three
   languages is that a search engine can follow them, and it does not run JS to
   find a page. */
.langs {
  text-align: right;
  font-size: 13px;
  letter-spacing: 0.04em;
  margin-bottom: 24px;
}

.langs a,
.langs span {
  margin-left: 12px;
  text-transform: uppercase;
}

.langs span {
  color: var(--text-faint);
}

/* ── typography ───────────────────────────────────────────────────────────── */

header {
  margin-bottom: 40px;
}

header h1 {
  font-size: 28px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

header p {
  margin-top: 8px;
  color: var(--text-dim);
  font-size: 14px;
}

h2 {
  font-size: 18px;
  font-weight: 600;
  margin-top: 36px;
  margin-bottom: 10px;
}

h3 {
  font-size: 16px;
  font-weight: 600;
  margin-top: 24px;
  margin-bottom: 6px;
}

p {
  margin-bottom: 12px;
}

ul {
  padding-left: 20px;
  margin-bottom: 12px;
}

li {
  margin-bottom: 6px;
}

a {
  color: var(--accent);
  text-decoration: none;
}

a:hover {
  text-decoration: underline;
}

strong {
  font-weight: 600;
}

/* ── blocks ───────────────────────────────────────────────────────────────── */

.card {
  background: var(--surface);
  border-radius: 16px;
  padding: 28px 28px 16px;
  box-shadow: 0 1px 4px var(--border);
}

/* A card that follows something rather than opening the page. */
.card-spaced {
  margin-top: 40px;
}

/* First heading inside a card: the card's own padding is the space above it. */
.tight {
  margin-top: 0;
}

/* "This is a translation, the English version governs." Quiet on purpose — it is
   a legal footnote, not part of the document. */
.notice {
  margin-top: 24px;
  font-size: 14px;
  color: var(--text-dim);
}

/* The one thing on a page that must not be skimmed past: an allergen caveat, a
   "this is not medical advice", a "uninstalling does not delete your data". */
.highlight {
  background: var(--warn-bg);
  border-left: 4px solid var(--warn-line);
  color: var(--warn-text);
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 12px;
  font-size: 15px;
}

footer {
  margin-top: 48px;
  font-size: 13px;
  color: var(--text-faint);
  text-align: center;
}

footer a {
  color: var(--text-faint);
  text-decoration: underline;
}

footer nav {
  margin-bottom: 8px;
}

footer nav a {
  margin: 0 8px;
}

/* ── landing page only ────────────────────────────────────────────────────── */

.hero {
  text-align: center;
  padding: 32px 0 8px;
}

.hero h1 {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
}

.hero .tagline {
  font-size: 20px;
  color: var(--text-dim);
  margin-top: 12px;
  line-height: 1.5;
}

/* Plain text, not a badge. Apple has no "coming soon" badge to use, and the
   real "Download on the App Store" one may not appear before the app is
   actually on the store. */
.hero .status {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-faint);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.features {
  display: grid;
  gap: 16px;
  margin-top: 40px;
}

.feature {
  background: var(--surface);
  border-radius: 16px;
  padding: 20px 24px;
  box-shadow: 0 1px 4px var(--border);
}

.feature h2 {
  margin: 0 0 6px;
  font-size: 17px;
}

.feature p {
  margin: 0;
  color: var(--text-dim);
  font-size: 15px;
}

@media (min-width: 620px) {
  .features {
    grid-template-columns: repeat(3, 1fr);
  }
}