/* ─────────────────────────────────────────────────────────────────────────
   MODULE:        apps/site (marketingsite)
   DOET:          De blokken van /why-server-side-tracking, en alleen daarvan.
                  Laadt NA site.css. Elke selector begint met .ws, dus een
                  regel hier raakt geen andere pagina; site.css en home.css
                  blijven ongewijzigd. De vorm is die van de homepage (plat,
                  witte vlakken met een rand van 1px, lijniconen in navy, het
                  label Example boven een beeld), maar in een eigen bestand:
                  pagina's staan los van elkaar, zodat een wijziging aan de
                  homepage deze pagina niet raakt.

                  De blokken, van boven naar onder:
                    .ws-hero          de hero (.hero--dark .hero--still uit
                                      site.css): wat de lezer doet
                                      (.ws-hero__taak) boven twee knoppen
                                      naast elkaar, de proefregel eronder
                    .ws-probleem      kop links, tekst en een korte lijst rechts
                    .ws-voorbeeld     het Example in de vorm van het dashboard,
                                      direct onder het probleem
                    .ws-redenen       per groep de redenen in een raster, elk
                                      met een lijnicoon (.ws-icoon), een kop
                                      en een of twee zinnen; op een telefoon
                                      onder elkaar, het icoon links. De groep
                                      over de algoritmes heeft een inleiding
                                      (.ws-groep__intro), de voorwaarde in
                                      navy eronder en vier redenen in twee
                                      kolommen (.ws-redenen--twee)
                    .ws-stappen       drie witte vlakken op papier, en wat er
                                      voor de lezer verandert (.ws-kosten,
                                      ook de toestemming)
                    .ws-slot          de slotband (.dark-band uit site.css):
                                      wat de lezer doet, Book a call voor
                                      de proef van de marketeer, en de
                                      proefregel eronder (.ws-slot__noot),
                                      zoals in de hero
                    .ws-noten         de bronnen, klein, op navy-950, elk
                                      met een weg terug naar de tekst

   CONNECTS:      public/why-server-side-tracking.html ──▶ link rel=stylesheet,
                                    NA site.css, met ?v= uit het kasboek
                                    (tools/feiten.test.mjs, KASBOEK)
                  public/assets/site.css ──▶ tokens, .hero--dark, .btn,
                                    .dark-band
                  tools/eindklant.test.mjs ──▶ elke selector begint met .ws,
                                    geen kleur buiten een token

   SAFE TO EDIT:  Ja. Verander je dit bestand, kies dan een nieuwe ?v= in de
                  head van de pagina en zet die in KASBOEK["waarom.css"] in
                  tools/feiten.test.mjs. Geen inline stijlen in de HTML: de
                  CSP heeft style-src 'self', dus elke maat is hier een klasse.
   BREAKS IF:     Er komt een schaduw, een volronde hoek op tekst, een
                  hoofdletterlabel met letter-spacing of een kleur buiten een
                  token in. De kleurcode is die van de homepage: navy-900 is
                  wat je eigen site telt, ink-600 wat een platform zegt, amber
                  (caution-text) alleen het verschil dat telt.
   ───────────────────────────────────────────────────────────────────────── */

.ws {
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-14: 14px;
  --fs-16: 16px;
  --fs-18: 18px;
  --fs-24: 24px;
  --fs-36: 36px;
  --fs-48: 48px;
}

/* ── Secties en koppen ─────────────────────────────────────────────────── */

/* Een sprong naar een anker (een voetnoot, Back) landt 24px onder de
   plakkende kop: 68px boven 720px, 57px eronder (site.css zet 88 en 57,
   en op een telefoon plakte de zin dan tegen de kop). */
.ws [id] { scroll-margin-top: 92px; }

.ws .ws-sectie { padding-top: 88px; padding-bottom: 88px; }
/* Een wit vel over de volle breedte; de andere secties staan op papier. */
.ws .ws-band { background: var(--white); }
.ws .ws-kop {
  max-width: 20em;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 700;
  color: var(--navy-900);
  text-wrap: pretty;
}
.ws .ws-groep__sub { margin-top: 12px; max-width: 34em; font-size: var(--fs-18); line-height: 1.5; color: var(--ink-600); }
/* Het uitgangspunt van een groep (wat Meta en Google zeggen), en de
   voorwaarde eronder in navy: die hoort gelezen te worden, niet als
   kleine letters. */
.ws .ws-groep__intro { margin-top: 16px; max-width: 40em; font-size: var(--fs-18); line-height: 1.5; color: var(--ink-600); }
.ws .ws-groep__sub--voorwaarde { margin-top: 10px; font-weight: 500; color: var(--navy-900); }

/* ── De hero ──────────────────────────────────────────────────────────── */

.ws .ws-hero { padding-bottom: 96px; }
.ws .ws-hero .hero__title { max-width: 12em; text-wrap: balance; }
.ws .ws-hero .hero__sub { max-width: 26em; text-wrap: balance; }
.ws .ws-knoppen { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px; }
.ws .ws-hero .hero__note { margin-top: 16px; max-width: 34em; font-size: var(--fs-14); line-height: 1.5; }
/* Wat de lezer doet, wit en direct onder de subregel, boven de knoppen; de
   proefregel klein onder de knoppen. Boven 720px zet site.css de kinderen
   van de hero op volgorde (sub 3, knoppen 5, noot 6), dus deze regel krijgt
   daar 4. */
.ws .ws-hero__taak { margin-top: 20px; max-width: 30em; font-size: var(--fs-18); line-height: 1.45; font-weight: 600; color: var(--white); }
/* Elke zin heel: op een telefoon breekt de regel tussen de twee zinnen,
   niet midden in sets it up. */
.ws .ws-hero__taak span { display: inline-block; }
@media (min-width: 721px) {
  .ws .ws-hero__taak { order: 4; }
}

/* ── Het probleem ─────────────────────────────────────────────────────── */

.ws .ws-probleem {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 24px 72px;
  align-items: start;
}
.ws .ws-probleem .ws-kop { max-width: 11em; }
.ws .ws-probleem__lead { font-size: var(--fs-18); line-height: 1.5; font-weight: 500; color: var(--navy-900); }
.ws .ws-telt { margin: 20px 0 0 0; display: grid; gap: 8px; }
.ws .ws-telt div { padding-top: 8px; border-top: 1px solid var(--line); font-size: var(--fs-16); line-height: 1.55; color: var(--ink-600); }
.ws .ws-telt dt { display: inline; font-weight: 600; color: var(--navy-900); }
.ws .ws-telt dd { display: inline; margin: 0; }

/* Een voetnootcijfer, overal op de pagina gelijk. Het tikvlak is groter dan
   het cijfer (WCAG 2.5.8, 24px): padding erom, en dezelfde maat als negatieve
   marge, zodat de regel er niet van verspringt. */
.ws sup { margin-left: 1px; font-size: 0.65em; font-weight: 500; line-height: 0; }
.ws sup a { display: inline-block; box-sizing: border-box; min-width: 24px; padding: 6px 9px; margin: -6px -9px; line-height: 12px; text-align: center; color: var(--ink-600); }

/* ── De redenen ───────────────────────────────────────────────────────────
   Drie naast elkaar (vier: twee bij twee), en tot 720px onder elkaar met het
   icoon links van kop en tekst. Elke reden: een haarlijn, een lijnicoon
   (24 bij 24, lijn 2, navy; kleur en lijn staan hier en niet in de svg),
   een kop van drie tot zes woorden en een of twee zinnen. */

.ws .ws-redenen { margin: 48px 0 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 32px; }
/* Vier redenen: twee bij twee, zodat er geen gat van een kolom openvalt. */
.ws .ws-redenen--twee { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 56px; }
.ws .ws-reden { min-width: 0; padding-top: 24px; border-top: 1px solid var(--line); }
.ws .ws-icoon {
  display: block;
  width: 32px;
  height: 32px;
  fill: none;
  stroke: var(--navy-900);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ws .ws-reden__kop { margin-top: 18px; font-size: var(--fs-18); line-height: 1.3; letter-spacing: -0.01em; font-weight: 600; color: var(--navy-900); text-wrap: pretty; }
.ws .ws-reden__tekst { margin-top: 8px; font-size: var(--fs-16); line-height: 1.55; color: var(--ink-600); }

/* ── Het Example: een kaart in de vorm van het dashboard ──────────────────
   Het label Example staat boven de kaart, als gewone tekst. De uitgaven
   staan in de kop van de kaart (per advertentie gelijk), zodat ze ook op
   een telefoon bij de kosten per lead staan. Twee kopregels: Meta en Your
   site boven Leads en Per lead. De tabel loopt tot de rand van de kaart;
   de getallen in IBM Plex Mono. */

.ws .ws-voorbeeld { max-width: 860px; margin: 36px 0 0 0; }
.ws .ws-voorbeeld__label { margin: 0 0 8px 0; font-size: var(--fs-13); font-weight: 500; line-height: 1.4; color: var(--ink-600); }
.ws .ws-scherm {
  container-type: inline-size;
  min-width: 0;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r-kaart);
  overflow: hidden;
}
.ws .ws-scherm__kop {
  min-height: 48px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 10px;
}
.ws .ws-scherm__titel { font-size: var(--fs-14); font-weight: 600; color: var(--ink-900); }
.ws .ws-scherm__budget { font-size: var(--fs-13); color: var(--ink-600); }
.ws .ws-scherm__periode { margin-left: auto; font-size: var(--fs-13); color: var(--ink-600); }
.ws .ws-tabel { width: 100%; font-size: var(--fs-14); }
.ws .ws-tabel th, .ws .ws-tabel td { padding: 10px 0 10px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.ws .ws-tabel thead th { font-size: var(--fs-12); font-weight: 500; line-height: 1.3; color: var(--ink-600); text-align: left; background: var(--navy-50); vertical-align: bottom; }
.ws .ws-tabel tbody th, .ws .ws-tabel tfoot th { height: 52px; font-size: var(--fs-14); font-weight: 500; color: var(--ink-900); text-align: left; }
.ws .ws-tabel th:first-child, .ws .ws-tabel td:first-child { padding-left: 20px; }
.ws .ws-tabel th:last-child, .ws .ws-tabel td:last-child { padding-right: 20px; }
.ws .ws-tabel tbody tr:last-child th, .ws .ws-tabel tbody tr:last-child td { border-bottom: 0; }
.ws .ws-tabel .num { text-align: right; }
/* De bovenste kopregel: Meta en Your site, elk over twee kolommen, met een
   lijn eronder die de twee kolommen bij elkaar houdt. */
.ws .ws-tabel thead tr:first-child th { padding-bottom: 6px; border-bottom: 0; }
.ws .ws-tabel thead tr:first-child th[rowspan] { padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.ws .ws-tabel thead tr:last-child th { padding-top: 6px; white-space: nowrap; }
.ws .ws-tabel .ws-tabel__groep { text-align: right; font-weight: 600; color: var(--ink-900); background-image: linear-gradient(var(--line), var(--line)); background-size: calc(100% - 12px) 1px; background-position: right bottom; background-repeat: no-repeat; }
.ws .ws-tabel td.num { font-family: var(--font-mono); font-size: var(--fs-14); color: var(--ink-900); white-space: nowrap; }
.ws .ws-tabel .num--platform { color: var(--ink-600); }
.ws .ws-tabel td.num--telt { color: var(--navy-900); font-weight: 500; }
.ws .ws-tabel td.num--let-op { color: var(--caution-text); font-weight: 600; }
/* De voetrij na de kleuren, zodat elk getal erin even zwaar is. */
.ws .ws-tabel tfoot th, .ws .ws-tabel tfoot td, .ws .ws-tabel tfoot td.num { border-top: 1px solid var(--line); border-bottom: 0; font-weight: 600; }
.ws .ws-voorbeeld__slot { margin-top: 20px; max-width: 40em; font-size: var(--fs-18); line-height: 1.5; font-weight: 500; color: var(--navy-900); }
.ws .ws-voorbeeld__noot { margin-top: 12px; max-width: 40em; font-size: var(--fs-16); line-height: 1.55; color: var(--ink-600); }
.ws .ws-voorbeeld__noot + .ws-voorbeeld__noot { margin-top: 4px; }

@container (max-width: 560px) {
  .ws .ws-scherm__kop { padding-left: 14px; padding-right: 14px; }
  .ws .ws-tabel th, .ws .ws-tabel td { padding-left: 8px; }
  .ws .ws-tabel th:first-child, .ws .ws-tabel td:first-child { padding-left: 14px; }
  .ws .ws-tabel th:last-child, .ws .ws-tabel td:last-child { padding-right: 14px; }
  .ws .ws-tabel, .ws .ws-tabel td.num, .ws .ws-tabel tbody th, .ws .ws-tabel tfoot th { font-size: var(--fs-13); }
  .ws .ws-tabel tbody th, .ws .ws-tabel tfoot th { line-height: 1.3; }
}
/* Een telefoon van 320 (kaart 270): smallere randen en kleinere cijfers,
   anders valt de laatste kolom over de rand. */
@container (max-width: 300px) {
  .ws .ws-scherm__kop { padding-left: 12px; padding-right: 12px; }
  .ws .ws-tabel th, .ws .ws-tabel td { padding-left: 5px; }
  .ws .ws-tabel th:first-child, .ws .ws-tabel td:first-child { padding-left: 12px; }
  .ws .ws-tabel th:last-child, .ws .ws-tabel td:last-child { padding-right: 12px; }
  .ws .ws-tabel td.num { font-size: var(--fs-12); }
  /* Per lead mag hier wel over twee regels, anders valt Your site over de rand. */
  .ws .ws-tabel thead tr:last-child th { white-space: normal; }
}

/* ── Wat de marketeer doet, en wat er voor de lezer verandert ─────────── *
   Op papier, tussen twee witte banden (zonder tags erboven, het Example
   nog hoger), zodat er geen wit gat van twee banden ontstaat. De stappen
   zijn daarom witte vlakken met een rand van 1px. */

.ws .ws-stappen { margin: 40px 0 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ws .ws-stap { min-width: 0; padding: 28px 28px 32px 28px; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-kaart); }
.ws .ws-stap__num { font-family: var(--font-heading); font-size: var(--fs-48); font-weight: 700; line-height: 1; letter-spacing: -0.03em; color: var(--navy-700); }
.ws .ws-stap__kop { margin-top: 24px; font-size: var(--fs-24); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--navy-900); }
.ws .ws-stap__tekst { margin-top: 10px; font-size: var(--fs-16); line-height: 1.55; color: var(--ink-600); }

.ws .ws-kosten__kop { margin-top: 56px; font-size: var(--fs-24); font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; color: var(--navy-900); }
.ws .ws-kosten { margin: 16px 0 0 0; max-width: 760px; }
.ws .ws-kosten__rij { display: grid; grid-template-columns: 9em minmax(0, 1fr); gap: 4px 24px; padding: 14px 0; border-top: 1px solid var(--line); }
.ws .ws-kosten__rij:last-child { border-bottom: 1px solid var(--line); }
.ws .ws-kosten dt { font-size: var(--fs-16); font-weight: 600; color: var(--navy-900); }
.ws .ws-kosten dd { margin: 0; font-size: var(--fs-16); line-height: 1.55; color: var(--ink-600); }
.ws .ws-kosten dd a { font-weight: 500; text-decoration: underline; text-underline-offset: 3px; }
/* excl. VAT op één regel (een harde spatie in de tekst ziet ai-sporen als
   een onzichtbaar teken). */
.ws .ws-heel { white-space: nowrap; }

/* ── De slotband ──────────────────────────────────────────────────────────
   .dark-band uit site.css; de streep boven de voet één kleur navy, zoals op
   het blog en de homepage. */

.ws .ws-slot::after { background: var(--navy-700); }
.ws .ws-slot .dark-band__title { max-width: 16em; font-size: clamp(30px, 4.2vw, 52px); line-height: 1.06; text-wrap: balance; }
/* Wat de lezer doet wit, de knoppen eronder, en onder de knoppen de
   proefregel met wie de proef start, klein, zoals de noot in de hero. */
.ws .ws-slot .dark-band__sub strong { display: block; font-weight: 600; color: var(--white); }
.ws .ws-slot__knoppen { margin-top: 32px; }
.ws .ws-slot__noot { margin-top: 16px; max-width: 34em; font-size: var(--fs-14); line-height: 1.5; color: var(--navy-100); }

/* ── De bronnen ───────────────────────────────────────────────────────────
   Onder de slotband, op de kleur van de voet, met een haarlijn naar de
   voet. ink-400 op navy-950 haalt ruim 6 op 1. */

.ws .ws-noten { background: var(--navy-950); }
.ws .ws-noten__binnen { padding-top: 40px; padding-bottom: 36px; border-bottom: 1px solid var(--navy-800); }
.ws .ws-noten ol { margin: 0; padding-left: 18px; max-width: 64em; }
.ws .ws-noten li { font-size: var(--fs-12); line-height: 1.6; color: var(--ink-400); }
.ws .ws-noten li::marker { color: var(--ink-400); }
.ws .ws-noten li + li { margin-top: 8px; }
.ws .ws-noten a { color: var(--navy-100); text-decoration: underline; text-underline-offset: 2px; }
/* De weg terug naar de eerste verwijzing (#ref-n): op een telefoon staan de
   noten ver onder de tekst. */
.ws .ws-noten .ws-noten__terug { margin-left: 4px; white-space: nowrap; }
.ws .ws-noten__slot { margin-top: 14px; font-size: var(--fs-12); color: var(--ink-400); }

/* ── Smaller ──────────────────────────────────────────────────────────── */

/* Tot 1023px blijven drie redenen naast elkaar, met minder lucht: twee
   kolommen lieten bij drie kaarten een gat van een kolom. */
@media (max-width: 1023px) {
  .ws .ws-redenen { gap: 32px 24px; }
  .ws .ws-redenen--twee { gap: 32px 40px; }
}

@media (max-width: 900px) {
  .ws .ws-probleem { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ws .ws-probleem .ws-kop { max-width: 20em; }
  /* De stappen onder elkaar: het cijfer links, kop en zin ernaast. */
  .ws .ws-stappen { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ws .ws-stap { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; align-items: start; padding: 22px 22px 24px 22px; }
  .ws .ws-stap__num { grid-row: 1 / span 2; font-size: var(--fs-36); }
  .ws .ws-stap__kop { margin-top: 2px; font-size: var(--fs-18); }
  .ws .ws-stap__tekst { margin-top: 6px; }
}

@media (max-width: 720px) {
  .ws [id] { scroll-margin-top: 81px; }
  .ws .ws-sectie { padding-top: 56px; padding-bottom: 56px; }
  .ws .ws-groep__sub, .ws .ws-groep__intro { font-size: var(--fs-16); }

  /* site.css verbergt de kicker op een telefoon; hier blijft hij staan,
     want hij zegt voor wie de pagina is. */
  .ws .ws-hero { padding-bottom: 56px; }
  .ws .ws-hero .hero__kicker { display: block; margin-bottom: 12px; }
  .ws .ws-knoppen { flex-direction: column; align-items: stretch; gap: 10px; width: 100%; }
  .ws .ws-knoppen .btn { width: 100%; }
  .ws .ws-hero .hero__note { margin-top: 12px; font-size: var(--fs-14); }
  .ws .ws-hero__taak { margin-top: 16px; font-size: var(--fs-16); }

  .ws .ws-probleem__lead { font-size: var(--fs-16); }
  .ws .ws-telt div { font-size: var(--fs-14); }

  .ws .ws-redenen, .ws .ws-redenen--twee { margin-top: 24px; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ws .ws-reden { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 18px 0 20px 0; }
  .ws .ws-icoon { grid-row: 1 / span 2; width: 28px; height: 28px; }
  .ws .ws-reden__kop { margin-top: 2px; font-size: var(--fs-16); }
  .ws .ws-reden__tekst { margin-top: 4px; font-size: var(--fs-14); }

  .ws .ws-voorbeeld { margin-top: 24px; }
  .ws .ws-voorbeeld__slot { margin-top: 16px; font-size: var(--fs-16); }
  .ws .ws-voorbeeld__noot { font-size: var(--fs-14); }

  .ws .ws-stappen { margin-top: 24px; }
  .ws .ws-stap { grid-template-columns: 36px minmax(0, 1fr); column-gap: 14px; padding: 20px 18px 22px 18px; }
  .ws .ws-kosten__kop { margin-top: 40px; font-size: var(--fs-18); }
  .ws .ws-kosten__rij { grid-template-columns: minmax(0, 1fr); }
  .ws .ws-kosten dd { font-size: var(--fs-14); }

  .ws .ws-slot__knoppen { margin-top: 28px; }
  .ws .ws-slot .btn { min-height: 52px; }
  .ws .ws-slot__noot { margin-top: 12px; }
  .ws .ws-noten__binnen { padding-top: 32px; padding-bottom: 28px; }
}