/* De landingspagina (issue #65), volgens Verzegeld.pen "Landing · Desktop 1440 · Hero v2" en "Landing · Mobile 390 ·
   Hero v2". Kleuren en fonts komen uit /open/tokens.css (shared/design-tokens.json); hier staan geen eigen kleuren.
   Maten in rem, zodat de tekst meeschaalt met de tekstgrootte van de browser. Een maat die tussen 390 en 1440 breed
   meegroeit, gaat met clamp() van de mobiele naar de desktopwaarde uit het design. Vanaf 64em (1024 px) staat de
   desktop-layout. */

@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/open/fonts/inter-latin.woff2") format("woff2");
}

/* Newsreader zoals Pencil hem tekent: optische grootte 24 (met de automatische optische grootte van de web-opener
   werden de koppen tot 10% breder dan in het design). Uit hetzelfde font als /open/fonts/newsreader-latin.woff2,
   vastgezet op opsz 24 en gewicht 400–500, Latin-1: 32 in plaats van 129 kB. De cursieve (de accentwoorden in de
   koppen en de V van het zegel) net zo. */
@font-face {
  font-family: "Newsreader";
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/newsreader-latin.woff2") format("woff2");
}

@font-face {
  font-family: "Newsreader";
  font-style: italic;
  font-weight: 400 500;
  font-display: swap;
  src: url("/fonts/newsreader-italic-latin.woff2") format("woff2");
}

/* Alleen voor de versleutelde tekst in "Wat wij zien": het ongewijzigde Latin1-bestand van IBM ("Plex" is een
   Reserved Font Name, dus geen eigen subset). */
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("/fonts/IBMPlexMono-Regular-Latin1.woff2") format("woff2");
}

/* Vlakken die in het design wit papier zijn (paper). In donker worden ze een donker vlak, net als in de app. */
:root {
  --card-on-bg: var(--color-paper);
  --card-on-surface: var(--color-paper);
  --card-on-accent: var(--color-paper);
  /* De App Store-knop: zwart in het design; hier de donkerste tekstkleur, en in donker omgekeerd (licht op donker). */
  --badge-bg: var(--color-text);
  --badge-fg: var(--color-bg);
  /* Op het groene privacyvlak: wit met 15% dekking (#FFFFFF26) en het lichtgroen van "de sleutel." (#E4ECE2). */
  --on-accent-soft: color-mix(in srgb, var(--color-on-accent) 15%, transparent);
  --on-accent-line: color-mix(in srgb, var(--color-on-accent) 45%, transparent);
  --on-accent-highlight: color-mix(in srgb, var(--color-on-accent) 84%, var(--color-accent));
  /* De marges van de pagina in px: bij grotere tekst blijft er zo meer ruimte voor de tekst zelf. */
  --gutter: 24px;
  --radius-card: 1.75rem;
}

@media screen and (prefers-color-scheme: dark) {
  :root {
    --card-on-bg: var(--color-surface);
    --card-on-surface: var(--color-bg);
    --card-on-accent: var(--color-bg);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 1rem;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  /* Met grote tekst (tot 200%) breekt een lang woord af in plaats van buiten het scherm te lopen. */
  overflow-wrap: anywhere;
}

h1,
h2,
h3,
p,
ul,
ol {
  margin: 0;
}

ul,
ol {
  padding: 0;
  list-style: none;
}

img,
svg {
  display: block;
}

a {
  color: inherit;
}

:focus-visible {
  outline: 3px solid var(--color-accent-text);
  outline-offset: 3px;
  border-radius: 0.25rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  z-index: 10;
  padding: 0.75rem 1rem;
  border-radius: 0.75rem;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-weight: 600;
  text-decoration: none;
  transform: translateY(-200%);
}

.skip-link:focus-visible {
  transform: none;
}

.container {
  width: min(75rem, 100% - 2 * var(--gutter));
  margin-inline: auto;
}

/* Iconen: Lucide, inline, in de kleur van de tekst. */
.icon {
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-15 {
  width: 0.9375rem;
  height: 0.9375rem;
}

.icon-16 {
  width: 1rem;
  height: 1rem;
}

.icon-18 {
  width: 1.125rem;
  height: 1.125rem;
}

.icon-20 {
  width: 1.25rem;
  height: 1.25rem;
}

.icon-24 {
  width: 1.5rem;
  height: 1.5rem;
}

/* Koppen: Newsreader 500, met het cursieve accentwoord (400) op een eigen regel. */
.display,
.heading {
  font-family: var(--font-serif);
  font-weight: 500;
  text-wrap: balance;
}

.display em,
.heading em {
  display: block;
  font-style: italic;
  font-weight: 400;
  color: var(--color-accent-text);
}

.display {
  /* 42 → 68 */
  font-size: clamp(2.625rem, 2.0214rem + 2.4762vw, 4.25rem);
  line-height: 1.05;
  letter-spacing: -0.023em;
}

.display-line {
  display: block;
}

.display-line em {
  display: inline;
}

.heading {
  /* 36 → 52 */
  font-size: clamp(2.25rem, 1.8786rem + 1.5238vw, 3.25rem);
  line-height: 1.08;
  letter-spacing: -0.018em;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  align-self: flex-start;
  min-height: 2.125rem;
  padding: 0.25rem 0.875rem 0.25rem 0.75rem;
  border-radius: 1.0625rem;
  background: var(--color-surface);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1.5;
}

/* De regel boven de hoofdkop is iets groter: 36 hoog. */
.eyebrow--hero {
  min-height: 2.25rem;
  padding-right: 1rem;
  border-radius: 1.125rem;
}

/* "Binnenkort in de App Store" is langer dan "Nu in de App Store" uit het design: op een smal scherm past
   "· Gemaakt in Nederland" er niet meer bij (het staat ook onderaan de pagina). */
@media (max-width: 29.99em) {
  .eyebrow-more {
    display: none;
  }
}

.eyebrow-dot {
  flex: none;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--color-accent);
}

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  min-height: 3rem;
  color: var(--color-accent-text);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: none;
}

.text-link:hover {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* De App Store-knop (component "App Store Badge"): 52 hoog, de kleine in de kop 40 (mobiel) of 44. */
.store-badge {
  display: inline-flex;
  flex: 0 1 auto;
  min-width: 0;
  align-items: center;
  gap: 0.625rem;
  min-height: 3.25rem;
  margin: 0;
  padding: 0.375rem 1.25rem 0.375rem 1rem;
  border-radius: 0.75rem;
  background: var(--badge-bg);
  color: var(--badge-fg);
  text-decoration: none;
}

.store-badge-icon {
  flex: none;
  width: 1.625rem;
  height: 1.625rem;
}

.store-badge-text {
  display: flex;
  flex-direction: column;
}

.store-badge-small {
  font-size: 0.6875rem;
  line-height: 1.2;
}

.store-badge-big {
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.3px;
}

.store-badge--compact {
  min-height: 2.5rem;
  padding-block: 0.25rem;
}

/* Zonder App Store-link (review PR #66): omlijnd en zonder vulling, zodat hij niet op een knop lijkt die je kunt
   aantikken. */
.store-badge--soon {
  border: 1.5px solid var(--color-text-2);
  background: transparent;
  color: var(--color-text);
}

.store-badge--compact .store-badge-small {
  font-size: 0.625rem;
}

.store-badge--compact .store-badge-big {
  font-size: 1.125rem;
}

/* Kop */
.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  min-height: 4.5rem;
  padding-block: 1rem;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

/* "Noodsleutel gekregen? Open de kluis": wie alleen verzegeld.app typt, vindt de web-opener (audit B9, #48). Twee
   regels, zoals de tekst in de App Store-knop. */
.open-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  color: var(--color-accent-text);
  text-decoration: none;
}

.open-link-text {
  display: flex;
  flex-direction: column;
}

.open-link-small {
  color: var(--color-text-2);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.open-link-big {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.open-link:hover .open-link-big {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/* Met een App Store-link past de kleine knop op een smal scherm niet meer naast de link naar de kluis; de knop staat
   dan toch meteen in de hero. */
@media (max-width: 29.99em) {
  .header-actions .store-badge {
    display: none;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.625rem;
  text-decoration: none;
}

/* Het zegel (component "Verzegeld Seal Logo"): een groene cirkel met een witte ring en een cursieve V. */
.seal {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-serif);
  font-size: 1.1875rem;
  font-style: italic;
  font-weight: 500;
  line-height: 1;
}

.seal::before {
  position: absolute;
  inset: 0.25rem;
  border: 1px solid color-mix(in srgb, var(--color-on-accent) 40%, transparent);
  border-radius: 50%;
  content: "";
}

.wordmark {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: -0.3px;
}

/* Hero */
.hero {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding-top: 1rem;
}

.hero-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.lead {
  max-width: 31.25rem;
  color: var(--color-text-2);
  /* 18 → 20 */
  font-size: clamp(1.125rem, 1.0786rem + 0.1905vw, 1.25rem);
  line-height: 1.5;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem 1.25rem;
  padding-top: 0.5rem;
}

.trust {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  color: var(--color-text-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

.trust li {
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.trust .icon {
  color: var(--color-accent);
}

/* Het beeld: het groene vlak, de hand met de iPhone (uit het design) en twee kaartjes. De plaatsen zijn die van het
   design, in procenten van het vlak: mobiel 342 × 500, desktop 600 × 720. */
.hero-visual {
  position: relative;
  width: 100%;
  max-width: 30rem;
  margin-inline: auto;
  aspect-ratio: 342 / 500;
}

.hero-panel {
  position: absolute;
  top: 20%;
  left: 4.678%;
  width: 90.643%;
  height: 80%;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--color-accent);
}

.hero-visual picture {
  position: absolute;
  top: 0;
  left: 0;
  width: 95.322%;
  height: 100%;
}

.hero-hand {
  width: 100%;
  height: 100%;
}

.float-card {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1.125rem 0.75rem 0.75rem;
  border: 1px solid var(--color-sand-border);
  max-width: 100%;
  border-radius: 1rem;
  background: var(--card-on-bg);
}

.float-card--lock {
  top: 47.2%;
  left: 0;
}

.float-card--key {
  top: 76.8%;
  right: 0;
}

.float-card-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
}

.float-card-text,
.vignette-text,
.person-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.float-card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.5;
}

.float-card-sub {
  color: var(--color-text-2);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* Zo werkt het */
.steps {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  padding-top: 6rem;
  scroll-margin-top: 1.5rem;
}

.section-head {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.section-head-main {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.section-intro {
  max-width: 23.75rem;
  color: var(--color-text-2);
  /* 17 → 19 */
  font-size: clamp(1.0625rem, 1.0161rem + 0.1905vw, 1.1875rem);
  line-height: 1.5;
}

.step-cards {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 1rem;
}

.step-card {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.75rem;
  padding: 1.75rem;
  border-radius: var(--radius-card);
  background: var(--color-surface);
}

.step-text {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.step-number {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  border: 1px solid var(--color-sand-border);
  border-radius: 50%;
  background: var(--card-on-surface);
  color: var(--color-accent-text);
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
}

.step-title {
  font-family: var(--font-serif);
  /* 26 → 30 */
  font-size: clamp(1.625rem, 1.5321rem + 0.381vw, 1.875rem);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

.step-line {
  color: var(--color-text-2);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* De voorbeelden uit de app, op wit papier. */
.vignette {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 1rem;
  border: 1px solid var(--color-sand-border);
  border-radius: 1rem;
  background: var(--card-on-surface);
}

.vignette-title {
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.5;
}

.vignette-where {
  color: var(--color-text-2);
  font-size: 0.9375rem;
  line-height: 1.3;
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 1.875rem;
  padding: 0 0.75rem;
  border-radius: 0.9375rem;
  background: var(--color-surface);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}

.pill--accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.vignette--people {
  gap: 0.625rem;
}

.person {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.person-initial {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-on-accent);
  font-family: var(--font-serif);
  font-size: 1.0625rem;
  line-height: 1;
}

.person-name,
.vignette-key-title {
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.3;
}

.person-relation,
.vignette-key-sub {
  color: var(--color-text-2);
  font-size: 0.8125rem;
  line-height: 1.3;
}

.vignette--key {
  flex-direction: row;
  align-items: center;
  gap: 0.875rem;
}

.qr {
  flex: none;
  width: 4rem;
  height: 4rem;
  fill: var(--color-text);
  shape-rendering: crispEdges;
}

/* Privacy: het groene vlak. Op groen is alle kleine tekst wit (4,59:1); het design had 85% wit (3,8:1). */
.privacy {
  width: min(75rem, 100% - 32px);
  margin-inline: auto;
  padding-top: 5rem;
}

.privacy-card {
  display: flex;
  flex-direction: column;
  gap: 2.25rem;
  padding: 1.75rem;
  border-radius: var(--radius-card);
  background: var(--color-accent);
  color: var(--color-on-accent);
}

.privacy-copy {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.eyebrow--on-accent {
  /* Een lichte rand in plaats van een lichte vulling: op een lichtere vulling haalt wit geen 4,5:1. */
  border: 1px solid var(--on-accent-line);
  background: transparent;
}

.heading--on-accent {
  /* 40 → 56 */
  font-size: clamp(2.5rem, 2.1286rem + 1.5238vw, 3.5rem);
}

.heading--on-accent em {
  color: var(--on-accent-highlight);
}

.privacy-body {
  max-width: 27.5rem;
  font-size: clamp(1.0625rem, 1.0161rem + 0.1905vw, 1.1875rem);
  line-height: 1.5;
}

.privacy-checks {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding-top: 0.5rem;
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.5;
}

.privacy-checks li {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.check-circle {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  background: var(--on-accent-soft);
}

.comparison {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
}

.compare-card {
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  padding: 1.5rem;
  border-radius: 1.25rem;
  background: var(--card-on-accent);
  color: var(--color-text);
}

.compare-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--color-accent-text);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.6px;
  text-transform: uppercase;
}

.compare-item {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1.2;
}

.compare-where {
  color: var(--color-text-2);
  font-size: 0.9375rem;
  line-height: 1.4;
}

.compare-step {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}

/* In het design text-3; die haalt geen 4,5:1 (issue #16, besluit 3A), dus text-2. */
.cipher {
  color: var(--color-text-2);
  font-family: var(--font-mono);
  font-size: 1.0625rem;
  line-height: 1.6;
}

/* Voor wie achterblijft */
.closing {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  padding-block: 7rem;
  text-align: center;
}

.closing-mark {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  background: var(--color-surface);
  color: var(--color-accent);
}

.heading--center {
  /* 36 → 60 */
  font-size: clamp(2.25rem, 1.6929rem + 2.2857vw, 3.75rem);
}

.closing-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
  padding-top: 1rem;
}

.closing-note {
  color: var(--color-text-2);
  font-size: 0.9375rem;
  line-height: 1.5;
}

/* Vragen: <details>, dus ze werken ook zonder JavaScript. */
.faq {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-bottom: 6rem;
}

.faq-intro {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.faq-body {
  color: var(--color-text-2);
  font-size: 1.0625rem;
  line-height: 1.5;
}

.faq-intro .text-link {
  gap: 0.5rem;
  align-self: flex-start;
}

.faq-item {
  border-top: 1px solid var(--color-hairline);
}

.faq-item:last-child {
  border-bottom: 1px solid var(--color-hairline);
}

.faq-item summary {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-block: 1.375rem;
  cursor: pointer;
  list-style: none;
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-question {
  flex: 1;
  font-size: clamp(1.0625rem, 1.0161rem + 0.1905vw, 1.1875rem);
  font-weight: 600;
  line-height: 1.5;
}

/* Lucide plus en minus (22 × 22) in accent: twee lijnen, de verticale verdwijnt als de vraag open staat. */
.faq-toggle {
  position: relative;
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  color: var(--color-accent);
}

.faq-toggle::before,
.faq-toggle::after {
  position: absolute;
  top: calc(50% - 1px);
  left: 20.8%;
  width: 58.3%;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
  content: "";
}

.faq-toggle::after {
  transform: rotate(90deg);
}

.faq-item[open] .faq-toggle::after {
  display: none;
}

/* Open: 12 tussen de vraag en het antwoord. */
.faq-item[open] summary {
  padding-bottom: 0.75rem;
}

.faq-answer {
  max-width: 38.75rem;
  padding-bottom: 1.375rem;
  color: var(--color-text-2);
  font-size: 1.0625rem;
  line-height: 1.5;
}

/* Voet: mobiel loopt de lijn over de hele breedte, op desktop zo breed als de inhoud. */
.site-footer {
  border-top: 1px solid var(--color-hairline);
}

.footer-inner {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.75rem 0 2.5rem;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.footer-wordmark {
  font-family: var(--font-serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1.2;
}

.footer-note {
  color: var(--color-text-2);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 1.5rem;
  font-size: 0.8125rem;
}

.footer-links a {
  display: inline-block;
  padding-block: 0.25rem;
  color: var(--color-text-2);
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* Tekstpagina's: /privacy, /voorwaarden en 404, in de stijl van "SEO Gids · Desktop 1440 (template)". */
.article {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  max-width: 45rem;
  padding-block: 3rem 6rem;
}

.article h1 {
  margin-bottom: 0.5rem;
}

.article h2 {
  margin-top: 2.5rem;
  font-family: var(--font-serif);
  /* 28 → 40 */
  font-size: clamp(1.75rem, 1.4714rem + 1.1429vw, 2.5rem);
  font-weight: 500;
  line-height: 1.12;
  letter-spacing: -0.02em;
}

.article p,
.article li {
  font-size: 1.125rem;
  line-height: 1.7;
}

.article ul {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding-left: 1.25rem;
  list-style: disc;
}

.article a {
  color: var(--color-accent-text);
  text-underline-offset: 0.2em;
}

.article .article-note {
  color: var(--color-text-2);
  font-size: 0.9375rem;
}

/* De tabellen op /privacy (issue #68), in de stijl van "Comparison Table" uit "SEO Gids · Desktop 1440 (template)": een
   haarlijn met radius 20, de kop op surface, cellen met 16 ruimte, de rijkop in 600. De tekst is groter dan in het design
   (17 in plaats van 15) en de cellen in de tekstkleur, voor wie slechter ziet (review PR #73). Op een telefoon staan de
   cellen onder elkaar, met de kolomkoppen alleen voor schermlezers; vanaf 40em is het een gewone tabel. */
.privacy-table {
  width: 100%;
  border: 1px solid var(--color-hairline);
  border-radius: 1.25rem;
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: 1.0625rem;
  line-height: 1.45;
}

.privacy-table th,
.privacy-table td {
  padding: 1rem;
  text-align: left;
  vertical-align: top;
}

.privacy-table th {
  color: var(--color-text);
  font-weight: 600;
}

.privacy-table thead th {
  background: var(--color-surface);
}

.privacy-table td {
  color: var(--color-text);
}

.privacy-table .privacy-table-note {
  display: block;
  color: var(--color-text-2);
  font-weight: 400;
}

.article .privacy-table p,
.article .privacy-table li {
  font-size: inherit;
  line-height: inherit;
}

.article .privacy-table ul {
  gap: 0.375rem;
}

@media (max-width: 39.99em) {
  .privacy-table,
  .privacy-table tbody,
  .privacy-table tr,
  .privacy-table th,
  .privacy-table td {
    display: block;
  }

  .privacy-table thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .privacy-table tbody tr + tr {
    border-top: 1px solid var(--color-hairline);
  }

  .privacy-table tbody th {
    padding-bottom: 0.375rem;
  }

  .privacy-table td {
    padding-top: 0;
  }
}

@media (min-width: 40em) {
  .privacy-table tbody th,
  .privacy-table tbody td {
    border-top: 1px solid var(--color-hairline);
  }

  .privacy-table tbody th {
    width: 12.5rem;
  }
}

/* Desktop: 1440 breed in het design, vanaf 1024. */
@media (min-width: 64em) {
  :root {
    --gutter: 40px;
    --radius-card: 2rem;
  }

  .site-header {
    column-gap: 2rem;
    min-height: 6rem;
    padding-block: 1.75rem;
  }

  .store-badge--compact {
    min-height: 2.75rem;
  }

  .hero {
    display: grid;
    grid-template-columns: minmax(0, 560fr) minmax(0, 600fr);
    gap: 2.5rem;
    align-items: center;
    padding-top: 0;
  }

  .hero-copy {
    gap: 1.75rem;
    padding-bottom: 2.5rem;
  }

  .trust {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem 1.5rem;
  }

  .hero-visual {
    max-width: none;
    aspect-ratio: 600 / 720;
  }

  .hero-panel {
    top: 20.833%;
    left: 10%;
    width: 80%;
    height: 79.167%;
  }

  .hero-visual picture {
    left: 3.333%;
    width: 86.667%;
  }

  .float-card--lock {
    top: 45.833%;
  }

  /* x 380 en 203 breed in het design: de rechterkant op 583 van 600. */
  .float-card--key {
    top: 72.222%;
    right: 2.833%;
  }

  .steps {
    padding-top: 8.75rem;
  }

  .section-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
  }

  .step-cards {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
  }

  .step-card {
    min-height: 25rem;
    padding: 2rem;
  }

  /* 1 px extra tussen de tekens, zoals in het design; mobiel past een regel dan niet meer. */
  .cipher {
    letter-spacing: 1px;
  }

  .privacy {
    width: min(75rem, 100% - 2 * var(--gutter));
    padding-top: 7.5rem;
  }

  .privacy-card {
    flex-direction: row;
    align-items: center;
    gap: 4rem;
    padding: 4.5rem;
  }

  .privacy-copy {
    flex: 1;
  }

  .comparison {
    flex: 0 1 27.5rem;
  }

  .closing {
    padding-block: 10rem;
  }

  .faq {
    flex-direction: row;
    gap: 5rem;
    padding-bottom: 8.75rem;
  }

  .faq-intro {
    flex: 1 1 27.5rem;
  }

  .faq-list {
    flex: 0 1 42.5rem;
  }

  .site-footer {
    border-top: 0;
  }

  .footer-inner {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 2.25rem 0 3.5rem;
    border-top: 1px solid var(--color-hairline);
  }
}