/* /support, /privacy en /terms — de drie pagina's die Apple eist, in de
   v2-stijl. Tot 2026-09-13 stonden ze in de lichte v1-stijl
   (public/styles.css, nu alleen nog voor 404.html); dat was de laatste
   plek op de site waar een bezoeker in een ander ontwerp terechtkwam.

   Basis komt uit /to/to.css (body, wrap, section, btn-fill, .vraag) en
   /chrome.css (nav en voettekst). Dit bestand doet alleen wat die twee
   niet kennen: de paginakop, de tweekoloms blokken, de feitenrijen, de
   leeskolom en het supportformulier.

   Ontwerpbron: Paper, pagina "Redesign App", artboard "Site · Support".

   EÉN AFWIJKING VAN DE NORM, met opzet: de landingspagina heeft geen
   sectieranden ("de witruimte doet het scheidingswerk"). Hier staat er
   wel een haarlijn boven elk blok. Deze drie zijn naslagpagina's waar
   je heen springt in plaats van doorheen leest; de lijn markeert waar
   het ene onderwerp ophoudt. Geldt alleen voor .blok op deze pagina's. */

/* Paginakop — zelfde maat en dempingsregel als de hero van de homepage:
   eerste regel draagt, tweede regel verklaart in gedempt wit. */
.paginakop {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding-top: clamp(48px, 6vw, 104px);
  padding-bottom: clamp(32px, 4vw, 56px);
}

.paginakop-kop {
  display: flex;
  flex-direction: column;
  font-size: clamp(32px, 3.9vw, 56px);
  font-weight: 500;
  line-height: 1.11;
  letter-spacing: -0.036em;
}

.paginakop-dim {
  color: rgba(247, 244, 240, 0.4);
}

.paginakop-sub {
  max-width: 560px;
  font-size: 18px;
  line-height: 1.5;
  color: var(--text-secondary);
}

.paginakop-datum {
  font-size: 16px;
  line-height: 1.5;
  color: var(--text-secondary);
}

/* Drie feitenkolommen direct onder de kop van /support: antwoordtijd,
   wie er antwoordt, het adres. Apple wil op deze pagina een echt
   contactkanaal zien; dit is het, boven de vouw. */
.metarij {
  display: flex;
  gap: clamp(24px, 4.4vw, 64px);
  padding-bottom: clamp(48px, 6.8vw, 96px);
}

.metakolom {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

/* --text-secondary en niet --text-muted: 0,45 meet 4,23 op deze grond
   en de eis voor lopende tekst is 4,5 (gates/contrast.mjs). Geldt voor
   elk klein label op deze pagina's. */
.metakolom dt {
  font-size: 15px;
  line-height: 20px;
  color: var(--text-secondary);
}

.metakolom dd {
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--text);
}

/* Tweekoloms blok: titel links, inhoud rechts. Zelfde geraamte als
   .vragen in to.css, zodat de kolomlijn over de hele site dezelfde is. */
.blok {
  display: flex;
  gap: clamp(48px, 6.6vw, 96px);
  border-top: 1px solid var(--hairline);
}

.blok-kop {
  width: clamp(200px, 25vw, 360px);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.blok-titel {
  display: flex;
  flex-direction: column;
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 500;
  letter-spacing: -0.03em;
  line-height: 1.2;
}

.blok-titel-dim {
  color: rgba(247, 244, 240, 0.4);
}

.blok-noot {
  max-width: 320px;
  font-size: 15px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.blok-inhoud {
  flex: 1;
  min-width: 0;
}

/* Leeskolom — de lopende tekst van /privacy en /terms. */
.leestekst {
  max-width: 720px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.leestekst p {
  font-size: 17px;
  line-height: 27px;
  color: var(--text-secondary);
}

.leestekst h3 {
  margin-top: 10px;
  font-size: 17px;
  font-weight: 500;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--text);
}

.leestekst h3 + p {
  margin-top: -8px;
}

.leestekst strong {
  font-weight: 500;
  color: var(--text);
}

.leestekst a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.leestekst ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.leestekst li {
  display: flex;
  gap: 12px;
  font-size: 17px;
  line-height: 27px;
  color: var(--text-secondary);
}

.leestekst li::before {
  content: "";
  flex: none;
  width: 4px;
  height: 4px;
  margin-top: 12px;
  border-radius: 50%;
  background: currentColor;
}

/* De samenvatting bovenaan /privacy en /terms: zwaarder dan de rest,
   volle inkt, want dit is de enige alinea die iedereen leest. */
.leestekst-lead p {
  font-size: 20px;
  line-height: 30px;
  color: var(--text);
}

/* Feitenrijen: label links, waarde rechts, haarlijn ertussen. De
   huisvorm voor "waar staat welke knop" (abonnement, account, data). */
.feitgroep + .feitgroep {
  margin-top: 48px;
}

.feitgroep-label {
  display: block;
  margin-bottom: 14px;
  font-size: 15px;
  font-weight: 400;
  line-height: 20px;
  color: var(--text-secondary);
}

.feitrij {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 32px;
  padding: 18px 0;
  border-top: 1px solid var(--hairline);
}

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

.feitrij dt {
  flex-shrink: 0;
  font-size: 17px;
  line-height: 24px;
  letter-spacing: -0.01em;
  color: var(--text-soft);
}

.feitrij dd {
  font-size: 16px;
  line-height: 24px;
  text-align: right;
  color: var(--text-secondary);
}

.feitrij dd a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* De statusuitleg binnen het eerste uitklaprijtje: label in een eigen
   vaste kolom, zodat de drie regels één lijn delen. */
.statusrijen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 660px;
  padding-bottom: 24px;
}

.statusrij {
  display: flex;
  gap: 16px;
}

.statusrij dt {
  width: 136px;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 23px;
  color: var(--text);
}

.statusrij dd {
  font-size: 15px;
  line-height: 23px;
  color: var(--text-secondary);
}

/* Supportformulier. Drie velden, niet meer: onderwerp, adres, bericht.
   Zonder JS post het formulier gewoon naar /api/support en krijgt de
   bezoeker een pagina terug; met JS blijft hij staan. */
.support-form {
  display: flex;
  flex-direction: column;
  gap: 28px;
  max-width: 640px;
}

/* De onderwerpkeuze is een <fieldset> met <legend>, want vijf radio's
   horen bij één vraag en een schermlezer moet die vraag horen. De
   sterreset in to.css haalt marge en opvulling weg maar niet de rand
   die een fieldset van de browser krijgt; die moet hier expliciet weg,
   anders staat er een kader om de chips met een gat waar de legend zit. */
.veldgroep {
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 0;
  min-width: 0;
}

.veldlabel {
  padding: 0;
  font-size: 15px;
  line-height: 20px;
  color: var(--text-secondary);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.chip input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.chip span {
  display: inline-flex;
  align-items: center;
  height: 38px;
  padding: 0 16px;
  border-radius: 9999px;
  border: 1px solid var(--hairline-input);
  font-size: 15px;
  letter-spacing: -0.006em;
  color: var(--text-secondary);
  cursor: pointer;
  transition: color 150ms ease, border-color 150ms ease;
}

.chip span:hover {
  color: var(--text);
}

/* Oranje is op deze site alleen functioneel; de actieve keuze is zo'n
   functie. De gevulde knop blijft de enige gevulde vorm op de pagina. */
.chip input:checked + span {
  border-color: rgba(254, 75, 27, 0.48);
  color: var(--accent);
  font-weight: 500;
}

.chip input:focus-visible + span {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.veld {
  width: 100%;
  height: 64px;
  padding: 0 20px;
  border-radius: 15px;
  border: 1px solid var(--hairline-input);
  background: none;
  color: var(--text);
  font: inherit;
  font-size: 16px;
  outline: none;
  transition: border-color 150ms ease;
}

textarea.veld {
  height: 180px;
  padding: 18px 20px;
  line-height: 24px;
  resize: vertical;
}

/* Zelfde tint als .waitlist-input op de homepage: allebei een
   plaatshouder, allebei --text-dim. Niet twee bijna-gelijke grijzen
   voor hetzelfde ding. */
.veld::placeholder {
  color: var(--text-dim);
}

.veld:focus {
  border-color: rgba(247, 244, 240, 0.4);
}

/* to.css zet de accent-focusring op knoppen, links en summary, maar
   kende geen invoervelden — die vielen terug op het blauw van de
   browser, de enige blauwe pixel op de hele site. */
.veld:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.veldnoot {
  font-size: 14px;
  line-height: 21px;
  color: var(--text-secondary);
}

.verzendrij {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.verzendrij p {
  font-size: 15px;
  line-height: 22px;
  color: var(--text-secondary);
}

.support-form a,
.verzendrij a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.formulier-slot {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.formulier-fout {
  font-size: 14px;
  line-height: 21px;
  color: var(--accent);
}

.formulier-ok {
  max-width: 640px;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
  color: var(--text);
}

@media (max-width: 900px) {
  .blok,
  .metarij {
    flex-direction: column;
    gap: 32px;
  }

  .blok-kop {
    width: 100%;
  }

  .blok-noot {
    max-width: none;
  }

  .metarij {
    gap: 0;
  }

  .metakolom + .metakolom {
    margin-top: 20px;
  }

  .feitrij {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .feitrij dd {
    text-align: left;
  }

  .statusrij {
    flex-direction: column;
    gap: 2px;
  }

  .statusrij dt {
    width: auto;
  }
}

/* De leespagina's (/privacy, /terms) staan dichter op elkaar dan de norm
   van 96: elf tot dertien blokken achter elkaar op de normafstand maakt
   een naslagpagina die je vooral scrollt. /support houdt de norm aan;
   daar zijn het er vier. */
.blok-dicht {
  padding-top: clamp(40px, 4.4vw, 64px);
  padding-bottom: clamp(40px, 4.4vw, 64px);
}