/* Driftto — /privacy and /support.
   Tokens copied from apps/app/src/constants/theme.ts, not re-invented —
   these two pages share nothing with the app's build, so the values are
   duplicated here on purpose rather than imported. */

:root {
  --color-background: #FCFCFB;
  --color-ink: #1F1B17;
  --color-hairline: #E5E5E3;
  --color-ink-secondary: rgba(31, 27, 23, 0.62);
  --color-ink-placeholder: rgba(31, 27, 23, 0.48);
  --color-accent-text: #B23D14;
  --color-accent: #FE4B1B;
  --color-mark-arc: #FFEDE8;

  /* Added for the landing page, same duplication-on-purpose rule as above. */
  --color-accent-button: #D93F12; /* theme.ts Colors.accentButton — the only fill white text sits on */
  --color-surface: #F2F2F1; /* theme.ts Colors.surface */
  --color-white: #FFFFFF; /* theme.ts Colors.white */
  --color-ink-dim: rgba(31, 27, 23, 0.35); /* theme.ts Colors.chevron */
  --color-chip-fill: rgba(255, 255, 255, 0.08); /* index.tsx capture bar chip fill, on --color-ink */
  --color-on-ink-secondary: rgba(255, 255, 255, 0.55); /* no theme.ts equivalent — the app has no dark surface; secondary text on the research card's ink background only */

  --shadow-soft: 0 1px 3px rgba(31, 27, 23, 0.10); /* theme.ts Shadow.soft */
  --shadow-tile: 0 1px 4px rgba(31, 27, 23, 0.14); /* theme.ts Shadow.tile */

  --radius-pill: 9999px; /* theme.ts Radius.pill */
  --radius-tile: 8px; /* theme.ts Radius.tile */
  --radius-media: 16px; /* theme.ts Radius.media */

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 40px;
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
}

body {
  background: var(--color-background);
  color: var(--color-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.page {
  max-width: 600px;
  margin: 0 auto;
  padding-inline: var(--space-5);
}

/* Header — wordmark, title. Identical on /privacy, /support, /404. */
.header {
  padding-top: var(--space-5);
}

/* The actual wordmark (RESEARCH/driftto-logos/logo-main.svg), not the
   app icon + a plain-text "Driftto" standing in for it — Jacky,
   2026-08-06: "zorg dat de logo linksboven komt ipv het app pictogram."
   Letters in --color-ink, not the source file's #0A0A0A: the app draws
   this same wordmark in our ink deliberately, and a wordmark in a
   different black than the text around it reads as a mistake. Height
   only — width follows the SVG's own 451:122 ratio via width: auto,
   so it never needs to be set twice. */
.wordmark {
  display: block;
  height: 34px;
  width: auto;
}

.title {
  margin: 0;
  margin-top: var(--space-4);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-ink);
}

.updated {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--color-ink-placeholder);
}

.opening {
  margin-top: var(--space-5);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--color-ink);
}

/* Added for 404.html — /privacy and /support never put a link inside
   their .opening line, so this rule didn't exist yet. */
.opening a {
  color: var(--color-accent-text);
  text-decoration: underline;
}

/* "The short version" — the summary block on /privacy, heavier than the
   body sections that follow it. */
.short-label {
  margin-top: var(--space-6);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--color-ink-secondary);
}

.short-body {
  margin-top: var(--space-4);
  font-size: 18px;
  font-weight: 500;
  line-height: 1.55;
  color: var(--color-ink);
}

.short-body + .short-body {
  margin-top: var(--space-4);
}

.short-emphasis {
  font-weight: 700;
}

/* Sections — hairline-divided, full-bleed rule, same rhythm on both pages. */
.section {
  margin-top: var(--space-6);
  padding-top: var(--space-6);
  border-top: 1px solid var(--color-hairline);
}

.section:first-of-type {
  margin-top: var(--space-6);
}

.section-title {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-ink);
}

.section-body {
  margin-top: var(--space-4);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-ink-secondary);
}

.section-body + .section-body {
  margin-top: var(--space-4);
}

.section-body a {
  color: var(--color-accent-text);
  text-decoration: underline;
}

.section-body strong {
  color: var(--color-ink);
  font-weight: 700;
}

/* A bold sub-label inside a section, followed by its own body line — the
   Sent / Waiting to send / Couldn't send pattern on /support. */
.sub-label {
  margin-top: var(--space-4);
  font-size: 16px;
  font-weight: 700;
  color: var(--color-ink);
}

.sub-label:first-of-type {
  margin-top: var(--space-4);
}

.sub-body {
  margin-top: 4px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-ink-secondary);
}

/* Two-dot list — "What we never store" on /privacy. */
.dot-list {
  list-style: none;
  margin: var(--space-4) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.dot-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-ink-secondary);
}

.dot-list li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--color-ink-secondary);
  margin-top: 10px;
}

/* A section-body paragraph that follows a run of sub-label/sub-body pairs
   needs its own top gap instead of the tight 4px sub-body spacing. */
.section-body.after-sub-list {
  margin-top: var(--space-5);
}

.footer-space {
  height: var(--space-8);
}