/* 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;
  /* LET OP BIJ ELKE WIJZIGING AAN DEZE OF AAN --color-surface: op #F2F2F1 meet
     deze kleur 4,6169 tegen een grens van 4,5. Dat is 0,12 over — geen marge
     maar toeval dat standhoudt. Eén tint donkerder surface of lichter
     secundair en alle lopende tekst in de drie productblokken zakt tegelijk.
     Niet aanpassen zonder poort 3 en bin/contrast.mjs eroverheen.
     Meting: RESEARCH/DRIFTTO_SITE_CONTRAST_2026-08-10.md */
  --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. */
  /* BEWUST ANDERS DAN theme.ts, geen kopie. De app staat op #D93F12; dat meet
     op wit 4,4967 en de eis is 4,5 — afgerond leek het te halen en daarom bleef
     het staan. De site ging naar #D03C11 (PR #198, gerenderd gemeten 4,8427).
     Het commentaar zei tot 2026-08-10 "theme.ts Colors.accentButton" en dat was
     onwaar; iemand ijkte er een appschermtekening op. De app volgt nog niet:
     die zeven plekken liggen bij de CEO. */
  --color-accent-button: #D03C11; /* de enige vulling waar witte tekst op staat */
  --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 */

  /* Voor het toestel in sectie 1, op wit (Jacky, 2026-08-10: "geef het scherm
     een border van stone-300 oid en een lichte shadow"). Dit keert de
     huisregel om die zegt dat diepte uit geneste omhulling komt en niet uit
     een slagschaduw; de CEO heeft die omkering toegestaan en toegesnoerd tot
     DIT vlak. Geen recht voor briefjes, knoppen, chips of blokken elders —
     wie hem daar wil, legt hem apart voor.

     stone-300 is Tailwind en hebben wij niet; onze eigen --color-hairline
     (#E5E5E3) is op wit vrijwel onzichtbaar, dus daar redden we het niet mee.
     Daarom een eigen token op precies die waarde, en geen losse hex in een
     regel: de tokenbron blijft de bron.

     De schaduw: kleine verschuiving, grote vervaging, 8% dekking, en dezelfde
     inkt als de rest — nooit zwart. Hij moet het toestel op de pagina zetten,
     niet eronder laten zweven. --shadow-tile is voor een vlak van deze maat
     te klein en te hard.

     NOG NERGENS GEBRUIKT: sectie 1 bestaat pas in de herbouw. Een token dat
     ergens staat doet daar niets; dit is een definitie en geen uitvoering. */
  --color-device-border: #D6D3D1;
  --shadow-device: 0 2px 24px rgba(31, 27, 23, 0.08);

  --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);
}

/* Het merkteken is een LINK naar de homepage. Op /privacy/, /support/ en
   /terms/ was hij dat niet, en die drie pagina's hadden geen enkele link naar
   `/` — wie er kwam, kwam er alleen weg met de terugknop van zijn browser
   (CEO, 2026-08-10). Dat is de eerste plek waar iedereen klikt. */
.header-merk { display: inline-block; }

/* 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: 500;
  line-height: 1.2;
  color: var(--color-ink);
}

.updated {
  margin-top: 4px;
  font-size: 14px;
  font-weight: 400;
  /* Was --color-ink-placeholder (0,48 alfa): dat meet 3,1004 op papier en de
     grens voor deze maat is 4,5. --color-ink-secondary (0,62) meet 4,7660.
     Het token zelf blijft ongemoeid — het is gedeeld met theme.ts en de site
     mag daar niet van afwijken. Het probleem was het gebruik: dit is gewone
     tekst en geen plaatshouder. Meting:
     RESEARCH/DRIFTTO_SITE_CONTRAST_2026-08-10.md */
  color: var(--color-ink-secondary);
}

.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: 500;
  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: 500;
}

/* 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: 500;
  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);
}

/* .sub-body stond hier niet bij, en op /privacy staat er één link in: naar
   Resend, in de uitleg over de e-mailbestemming. Die viel dus terug op de
   browserstandaard en rendert #0000EE — het enige blauw op de hele site.
   Contrast haalt hij ruim (9,15), dus geen enkele contrastmeting ziet dit;
   gevonden bij het doormeten, met het oog. */
.section-body a,
.sub-body a {
  color: var(--color-accent-text);
  text-decoration: underline;
}

/* Elke <strong> op deze pagina's, niet alleen die in .section-body. Twee
   stonden er in een <li> van .dot-list en vielen daarmee terug op het
   browserstandaard-vet van 700 — de regel reikte er simpelweg niet bij.
   Zelfde soort gat als de ontbrekende footer: gedeeld gedrag dat één plek
   niet bereikte. Op `.page` en niet op alles, want de homepage heeft geen
   <strong> en zou hier stil van mee kunnen veranderen. */
.page strong {
  color: var(--color-ink);
  font-weight: 500;
}

/* 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: 500;
  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 A — van `FOOTER A — de onderkantregel (1440)`.
   Eén regel met een haarlijn erboven: links de ©-regel, rechts drie links.
   Geen merkteken, geen kopje.
   ========================================================================== */

.footer { border-top: 1px solid var(--color-hairline); background: #FFFFFF; }
.footer-regel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 38px 24px;
  font-size: 15px;
  line-height: 20px;
  color: var(--color-ink-secondary);
}
.footer-copy { margin: 0; order: 2; }
.footer-links { display: flex; gap: 28px; order: 1; }
.footer-links a { color: inherit; text-decoration: none; position: relative; }
.footer-links a:hover { color: var(--color-ink); }
/* De regel blijft 20 hoog en verspringt geen pixel; alleen het raakvlak gaat
   naar 44 (Apple's minimum) met een doorzichtig vlak dat buiten de doos hangt.
   12 boven en onder = 20 + 24 = 44. Alleen verticaal: horizontaal uitbreiden
   zou de drie doelen in deze rij in elkaar laten lopen, en de 28 ertussen is
   een ontwerpmaat. Naar beneden loopt het vlak tot aan de ©-regel — die is
   geen tikdoel, dus daar valt niets te winnen of te verliezen. */
.footer-links a::after {
  content: "";
  position: absolute;
  inset: -12px 0;
}

@media (min-width: 1024px) {
  /* Op breed één regel van 110 hoog: de ©-regel links, de links rechts met 32
     ertussen. Op 390 zijn het twee regels — daar past het niet naast elkaar
     zonder dat de tussenruimte toeval wordt. */
  .footer-regel {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    max-width: 1440px;
    margin: 0 auto;
    height: 110px;
    padding: 0 96px;
  }
  .footer-copy { order: 0; }
  .footer-links { order: 0; gap: 32px; }
}

/* .footer-space was de lege ruimte waar geen footer stond. Nu er wel een
   staat, is die ruimte de padding van de footer zelf. */
.footer-space { display: none; }