/* ============================================================
   Comptela homepage, laag 4 van 4: sectiespecifieke regels.

   Elk blok hieronder hoort bij één sectie en staat in paginavolgorde.
   Werk je aan één sectie, blijf dan strikt binnen jouw BEGIN/END-paar.
   Zo kunnen meerdere secties tegelijk gebouwd worden zonder elkaars
   werk te raken.

   Heb je een variant van een primitief nodig, scope die dan hier:
     .s-gks .card { ... }
   Wijzig nooit 01-tokens.css of 03-components.css.
   ============================================================ */

/* ===== BEGIN section:hero ===== */
/* De hero is het enige blok met een asymmetrisch raster: de copy krijgt
   iets meer plaats dan het beeld. Twee kolommen van gelijke breedte
   laten de titel namelijk uit elkaar vallen. */
.s-hero {
  position: relative;
  /* Zonder eigen stapelcontext zou de gloed hieronder achter de
     paginaachtergrond verdwijnen in plaats van achter de inhoud. */
  isolation: isolate;
  /* De gloed en het zwevende kaartje steken bewust buiten het raster. */
  overflow: hidden;
}

/* Twee zachte gloeden geven diepte zonder dat er een afbeelding aan te
   pas komt: één in berry achter de mockup, één in goud linksboven. */
.s-hero::before {
  content: "";
  position: absolute;
  inset: -20% -15% auto -15%;
  height: 130%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(46% 42% at 76% 26%, var(--berry-tint-08), transparent 68%),
    radial-gradient(38% 40% at 6% 4%, var(--gold-tint-15), transparent 70%);
}

.hero-grid {
  display: grid;
  gap: var(--space-2xl);
  align-items: center;
}

@media (min-width: 960px) {
  .hero-grid {
    grid-template-columns: minmax(0, 52fr) minmax(0, 48fr);
    gap: var(--space-3xl);
  }
}

.hero-badge {
  margin-bottom: var(--space-md);
}

.hero-lead {
  margin-top: var(--space-md);
  max-width: 52ch;
}

.hero-ctas {
  --cluster-gap: var(--space-sm);
  margin-top: var(--space-lg);
}

/* De prijsregel weegt zwaarder dan de noot eronder, maar mag de lead niet
   beconcurreren: berry voor het bedrag, gewone tekstgrootte, geen kader.
   Een derde kader onder de knoppen maakte de kolom rommelig. */
.hero-prijs {
  margin-top: var(--space-md);
  font-size: var(--text-md);
  line-height: var(--leading-body);
  color: var(--ink-soft);
}

.hero-prijs strong {
  font-weight: var(--weight-bold);
  color: var(--berry);
}

.hero-note {
  margin-top: var(--space-sm);
}

/* Vertrouwensrij: vier korte feiten onder een haarlijn, zodat ze als
   voetnoot bij de belofte lezen en niet als vijfde alinea. */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-lg);
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}

.hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  /* Op crème haalt ink-faint geen AA, ink-muted wel. */
  color: var(--ink-muted);
}

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

.hero-visual {
  position: relative;
  min-width: 0;
}

/* Zwevende pil over de mockup. Onder 960px is er naast het beeld geen
   plaats, dan valt ze weg in plaats van eronder te schuiven. */
.hero-float {
  display: none;
}

@media (min-width: 960px) {
  .hero-float {
    position: absolute;
    /* Rust op de linkerbenedenhoek van het kader. Bewust één regel hoog:
       zo dekt de pil geen enkele knop in de mockup af. */
    left: calc(var(--space-xl) * -1);
    bottom: calc(var(--space-md) * -1);
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    padding: var(--space-2xs) var(--space-sm);
    border-radius: var(--radius-pill);
    background: var(--surface-panel);
    box-shadow: var(--shadow-2);
    font-size: var(--text-xs);
    line-height: var(--leading-body);
    color: var(--ink-muted);
    white-space: nowrap;
  }
}

.hero-float strong {
  color: var(--ink);
  font-weight: var(--weight-semi);
}

.hero-float-dot {
  width: 0.55rem;
  height: 0.55rem;
  flex: none;
  border-radius: var(--radius-pill);
  background: var(--gold);
  box-shadow: 0 0 0 3px var(--gold-tint-22);
}
/* ===== END section:hero ===== */

/* ===== BEGIN section:proof ===== */
/* Waar de concurrentie een logostrook zet, staan hier vier feiten. De
   strook is bewust laag: ze bevestigt de hero, ze herhaalt hem niet. */
.proof-label {
  margin-bottom: var(--space-lg);
}

/* Iets meer ruimte tussen de kolommen dan het raster standaard geeft:
   de streepjes boven de feiten moeten als vier losse kolommen lezen. */
.proof-grid {
  gap: var(--space-md) var(--space-lg);
}

.proof-item {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-xs);
  align-items: start;
  padding-top: var(--space-sm);
  border-top: 2px solid var(--line-strong);
  color: var(--ink-soft);
  font-size: var(--text-sm);
  line-height: var(--leading-body);
}

.proof-item .icon {
  margin-top: 0.15em;
  color: var(--berry);
}

/* Het punt over de FDM staat er bewust bij, in goud in plaats van berry:
   het leest als nuance en niet als verkoopargument. */
.proof-item--nuance .icon {
  color: var(--gold-ink);
}
/* ===== END section:proof ===== */

/* ===== BEGIN section:waarom ===== */
/* Kaarten met de icoonchip bovenaan. Het raster van de primitief blijft
   staan, alleen de binnenkant van de kaart krijgt hier meer lucht. */
.s-waarom .card {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  padding: var(--space-lg) var(--space-md);
}

/* De kaartprimitief zet hier een marge onder de kop, maar het raster
   regelt de tussenruimte al. */
.s-waarom .card > h3 {
  margin-bottom: 0;
}

.s-waarom .icon-chip {
  transition: background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.s-waarom .card--interactive:hover .icon-chip {
  background: var(--grad-berry);
  color: var(--ink-on-dark);
}
/* ===== END section:waarom ===== */

/* ===== BEGIN section:kassa ===== */
/* De bon groeit niet onbeperkt mee. Bij 460px komt de tekst in de SVG
   op ongeveer 16px uit, net onder de 17px van de lopende tekst ernaast.
   Boven deze maat leest het beeld als een tweede tekstkolom in plaats
   van als illustratie.
   De cijferkolommen mogen niet dansen: de regel in 02-base.css hangt aan
   .mockup, en deze bon staat niet in een mockup-kader. Op de SVG zelf
   volstaat, want font-variant-numeric erft door tot in de tekst. */
.s-kassa .bon {
  max-width: 460px;
  margin-inline: auto;
  font-variant-numeric: tabular-nums;
}

/* ===== END section:kassa ===== */

/* ===== BEGIN section:gks ===== */
/* De GKS-sectie is met opzet KORT en staat op een gewoon vlak. Fiscaal
   in orde zijn is geen onderscheid maar een voorwaarde: wie eronder valt
   wil weten dat het klopt, niet er een hoofdstuk over lezen. De donkere
   band en het zwaarste beeld gingen naar de omzetvoorspeller, want dat is
   wel wat Comptela onderscheidt. Het hash-kettingdiagram dat hier stond is
   samen met zijn animatie verwijderd; de belofte staat nu in één zin in
   de lead. Alles hier is gescopet binnen .s-gks. */

.s-gks .section-head {
  margin-bottom: var(--space-lg);
}


/* ---- De vier punten ----
   Iets meer lucht dan de standaardvinklijst, want deze regels zijn lang
   genoeg om over twee regels te lopen. */
.s-gks .gks-punten {
  gap: var(--space-sm);
  margin-bottom: var(--space-lg);
}

@media (min-width: 860px) {
  .s-gks .gks-punten {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: var(--space-2xl);
    row-gap: var(--space-sm);
  }
}

/* De verplichte vermelding tonen we als stempel, want zo staat ze ook
   echt op het papier. */
.s-gks .gks-stempel {
  display: inline-block;
  max-width: 100%;
  padding: 0.1em 0.5em;
  border: 1px solid var(--gold-tint-22);
  border-radius: var(--radius-xs);
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: 0.82em;
  letter-spacing: 0.04em;
  /* Goud stond hier toen deze sectie nog een donkere band was. Op het
     lichte vlak haalt goud geen AA, vandaar de donkere goudtint. */
  border-color: var(--line-strong);
  color: var(--gold-ink);
}

/* ---- De eerlijkheidscallout ----
   Die mag niet wegkruipen als kleine lettertjes: op de donkere band
   krijgt ze juist extra gewicht. */
.s-gks .gks-eerlijk {
  padding: var(--space-lg);
  border-left-width: 4px;
  font-size: var(--text-md);
}

.s-gks .gks-eerlijk .icon {
  width: 1.5rem;
  height: 1.5rem;
}

@media (max-width: 620px) {
  .s-gks .gks-eerlijk {
    padding: var(--space-md);
  }
}
/* ===== END section:gks ===== */

/* ===== BEGIN section:online ===== */
/* Het plateau onder de browsermockup. Bewust géén .mockup-frame: dat
   kader draagt shadow-3, en die zware schaduw staat al op de hero en op
   de demoband. Een derde keer en het effect is weg. Hier dus een eigen,
   lichter kader op shadow-2, met een zachte merkgloed als mat. */
.s-online .shop-plate {
  padding: clamp(0.75rem, 2.6vw, 1.25rem);
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: linear-gradient(155deg, var(--surface-berry-soft), var(--surface-gold-soft));
  box-shadow: var(--shadow-2);
}

.s-online figcaption {
  margin-top: var(--space-xs);
}

/* Het pad naar de eigen webshop is het punt van deze sectie, dus mag
   het in de subline opvallen in plaats van weg te vallen in de crème. */
.s-online .lead code {
  background: var(--surface-panel);
  border: 1px solid var(--line);
  color: var(--bordeaux);
  font-weight: var(--weight-semi);
}
/* ===== END section:online ===== */

/* ===== BEGIN section:voorspeller ===== */
/* De omzetvoorspeller. De grafiek is een echte datavisualisatie en geen
   versiering: de lichte band achter de balken is de onzekerheidsmarge die
   het model per dag teruggeeft (ADR 0022), en de backtest meet hoe vaak de
   werkelijke omzet erin viel (ADR 0025). Alle bedragen zijn een illustratie
   en staan ook zo gelabeld. */
.s-voorspeller {
  /* Lokale variant, zodat 01-tokens.css bevroren blijft: de rand van de
     onzekerheidsband moet zichtbaar zijn waar de vulling dat niet is. */
  --voorspel-bandrand: rgba(194, 24, 91, 0.32);
}

/* ---- Het sterkste punt uit de lijst krijgt gewicht ----
   Het is de enige regel op de pagina die belooft dat het systeem zwijgt
   wanneer het niets weet. Die verdient meer dan een vinkje, dus draagt ze
   .callout--gold in plaats van een lijstitem te zijn. */
.s-voorspeller .voorspel-kern {
  margin-top: var(--space-2xs);
  padding: var(--space-sm) var(--space-md);
}

.s-voorspeller .voorspel-kern p {
  color: var(--ink);
}

/* ---- Gratis tegenover betalend ----
   De basisvoorspeller zit in elke kassa, de weerfactor, de sectortendens
   en de nauwkeurigheidscijfers niet. Die grens hoort zichtbaar te zijn in
   de opsomming zelf: een kop boven elk lijstje (een echte <h3> met .eyebrow,
   zodat een schermlezer de knip óók hoort), en bij het betalende deel een
   verticale streep zodat je in één blik ziet waar ze ligt. */
.s-voorspeller .voorspel-trap-kop {
  margin-bottom: var(--space-xs);
  line-height: var(--leading-body);
}

.s-voorspeller .voorspel-trap--betaald {
  padding-left: var(--space-sm);
  border-left: 2px solid var(--gold-tint-22);
}

.s-voorspeller .voorspel-trap--betaald .check-list .icon {
  color: var(--gold-ink);
}

/* Het merkje achter een regel van de opsplitsing draagt .badge--gold; hier
   staat alleen wat een merkje van een badge onderscheidt: kleiner, krapper
   en midden in een lopende regel. Bordeaux in plaats van gold-ink, want op
   deze maat is 4,8 op 1 te weinig marge. */
.s-voorspeller .voorspel-term-tag {
  margin-left: var(--space-3xs);
  padding: 0.05rem 0.4rem;
  font-size: 0.6875rem;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  color: var(--bordeaux);
}

/* ---- De grafiekkaart ----
   De breedte is bewust geplafonneerd. Zodra de split onder de 900px in
   één kolom valt, zou de kaart anders de volle container vullen en groeit
   de tekst in de SVG mee tot ze niet meer bij de rest past. */
.s-voorspeller .split-visual {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}

/* De grafiek blijft op een LICHT vlak, ook nu de sectie donker is.
   Twee redenen. De kaart en haar hele binnenwerk (asteksten, legende,
   de opsplitsing per factor) zijn in donkere inkt getekend; ze meeslepen
   naar de donkere band zou zeventien tekstelementen onder AA duwen. En
   inhoudelijk klopt het beter: dit is een stuk product dat op de band
   ligt, geen tekst die erop staat. */
.s-voorspeller .voorspel-kaart {
  padding: var(--space-md);
  background: var(--surface-panel);
  border-color: var(--line);
  box-shadow: var(--shadow-3);
}

/* 03-components.css kleurt op een donkere sectie ALLE koppen en fijne
   tekst licht. Dat werkt door tot in deze kaart, die zelf licht is, en
   zette de titel wit op wit en de ondertitel roze op wit. Hier dus terug
   naar de inkt van een licht vlak. Enkel deze twee: al de rest in de
   kaart staat al op een eigen kleur uit dit blok. */
.s-voorspeller .voorspel-kaart .voorspel-kaart-titel {
  color: var(--ink);
}

.s-voorspeller .voorspel-kaart .fine {
  color: var(--ink-muted);
}

.s-voorspeller .voorspel-kop {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-2xs) var(--space-sm);
  margin-bottom: var(--space-sm);
}

.s-voorspeller .voorspel-kaart-titel {
  font-size: var(--text-lg);
}

/* De gemiddelde afwijking uit de backtest. Het cijfer hier is verzonnen en
   staat daarom altijd naast de woorden "in dit voorbeeld". */
.s-voorspeller .voorspel-afwijking {
  padding: 0.3rem 0.7rem;
  font-size: var(--text-xs);
}

.s-voorspeller .voorspel-grafiek {
  margin-top: var(--space-2xs);
}


/* ---- Assen en hulplijnen ---- */
.s-voorspeller .voorspel-raster line {
  stroke: var(--line);
  stroke-width: 1;
}

.s-voorspeller .voorspel-basislijn {
  stroke: var(--line-strong);
  stroke-width: 1.5;
}

.s-voorspeller .voorspel-as text,
.s-voorspeller .voorspel-dagen text {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  fill: var(--ink-muted);
}

/* De maten hieronder staan in viewBox-eenheden, niet in schermpixels: de
   grafiek schaalt mee met haar kolom. Bij een kolom van ongeveer 460px
   komt 15 hier neer op zo'n 12px op het scherm. */
.s-voorspeller .voorspel-as text {
  font-size: 15px;
  text-anchor: end;
}

.s-voorspeller .voorspel-dagen text {
  font-size: 16px;
  font-weight: var(--weight-semi);
  text-anchor: middle;
}

.s-voorspeller .voorspel-dagen .voorspel-dag--piek {
  fill: var(--gold-ink);
  font-weight: var(--weight-bold);
}

/* ---- De onzekerheidsband ---- */
.s-voorspeller .voorspel-band {
  fill: var(--berry-tint-12);
}

.s-voorspeller .voorspel-bandrand {
  fill: none;
  stroke: var(--voorspel-bandrand);
  stroke-width: 1.25;
  stroke-dasharray: 5 5;
  stroke-linecap: round;
}

/* ---- Weer-iconen ----
   Een <use> van een streek-icoon erft de stijl van .icon niet, dus zetten
   we fill, stroke en stroke-width hier expliciet. */
.s-voorspeller .voorspel-weer use {
  fill: none;
  stroke: var(--ink-muted);
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.s-voorspeller .voorspel-weer .voorspel-weer--piek {
  stroke: var(--gold-ink);
  stroke-width: 1.9;
}

/* ---- De uitschieter ---- */
.s-voorspeller .voorspel-leider {
  stroke: var(--gold);
  stroke-width: 1.25;
  stroke-dasharray: 3 4;
  stroke-linecap: round;
}

.s-voorspeller .voorspel-pieklabel {
  font-family: var(--font-body);
  font-size: 18px;
  font-weight: var(--weight-bold);
  font-variant-numeric: tabular-nums;
  /* Goud haalt op een licht vlak geen AA, dus tekst in gold-ink. */
  fill: var(--gold-ink);
  text-anchor: middle;
}

/* ---- De balken ---- */
.s-voorspeller .balk {
  fill: var(--berry);
  transform-box: fill-box;
  transform-origin: bottom;
  transition: transform var(--dur-slow) var(--ease-out);
}

/* De gouden balk haalt tegen wit geen 3:1, vandaar de dunne rand. Die
   mag niet meeschalen tijdens het groeien: non-scaling-stroke. */
.s-voorspeller .balk--piek {
  fill: var(--gold);
  stroke: var(--gold-ink);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

/* De verborgen begintoestand hangt aan .js-anim, precies zoals
   02-base.css dat voor [data-reveal] doet. Zonder script, of wanneer de
   bezoeker minder beweging vraagt, staan de balken er gewoon. */
.js-anim .s-voorspeller .balk {
  transform: scaleY(0);
}

.js-anim .s-voorspeller [data-reveal].is-revealed .balk {
  transform: scaleY(1);
}

.s-voorspeller .balk:nth-child(2) {
  transition-delay: 60ms;
}
.s-voorspeller .balk:nth-child(3) {
  transition-delay: 120ms;
}
.s-voorspeller .balk:nth-child(4) {
  transition-delay: 180ms;
}
.s-voorspeller .balk:nth-child(5) {
  transition-delay: 240ms;
}
.s-voorspeller .balk:nth-child(6) {
  transition-delay: 300ms;
}
.s-voorspeller .balk:nth-child(7) {
  transition-delay: 360ms;
}

/* ---- Legende ---- */
.s-voorspeller .voorspel-legende {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3xs) var(--space-md);
  margin-top: var(--space-sm);
  font-size: var(--text-xs);
  color: var(--ink-muted);
}

.s-voorspeller .voorspel-legende li {
  display: flex;
  align-items: center;
  gap: var(--space-3xs);
}

.s-voorspeller .voorspel-sleutel {
  width: 0.75rem;
  height: 0.75rem;
  flex: none;
  border-radius: 3px;
  background: var(--berry);
}

.s-voorspeller .voorspel-sleutel--band {
  background: var(--berry-tint-12);
  /* De vulling van de band is met opzet licht, maar dan moet de rand het
     werk doen: die was doorschijnend en haalde 1,75 op 1 tegen de witte
     kaart, waardoor de sleutel niet te onderscheiden viel. */
  border: 1px dashed var(--berry);
}

.s-voorspeller .voorspel-sleutel--piek {
  background: var(--gold);
  border: 1px solid var(--gold-ink);
}

/* ---- De opsplitsing per factor ---- */
.s-voorspeller .voorspel-uitleg {
  margin-top: var(--space-md);
  padding-top: var(--space-sm);
  border-top: 1px solid var(--line);
}

.s-voorspeller .voorspel-uitleg-kop {
  font-size: var(--text-2xs);
  font-weight: var(--weight-black);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-muted);
}

.s-voorspeller .voorspel-formule {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
  margin-top: var(--space-2xs);
}

.s-voorspeller .voorspel-term {
  display: grid;
  padding: 0.4rem 0.65rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--surface-canvas);
}

.s-voorspeller .voorspel-term-naam {
  font-size: var(--text-2xs);
  line-height: 1.35;
  color: var(--ink-muted);
}

.s-voorspeller .voorspel-term-waarde {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  line-height: 1.35;
  color: var(--ink);
}

.s-voorspeller .voorspel-term--som {
  border-color: var(--gold-tint-22);
  background: var(--surface-gold-soft);
}

.s-voorspeller .voorspel-term--som .voorspel-term-waarde {
  color: var(--gold-ink);
}

.s-voorspeller .voorspel-noot {
  margin-top: var(--space-xs);
}

/* ---- Kolomsmalte ----
   De grafiek krimpt in twee situaties: op een smal scherm, en op een
   middelgroot scherm waar de split al twee kolommen toont maar de
   container nog niet op volle breedte staat. In beide gevallen zetten we
   de tekst binnen de SVG een maat groter, anders wordt ze onleesbaar. */
@media (min-width: 900px) and (max-width: 1139.98px) {
  .s-voorspeller .voorspel-as text {
    font-size: 19px;
  }

  .s-voorspeller .voorspel-dagen text {
    font-size: 20px;
  }

  .s-voorspeller .voorspel-pieklabel {
    font-size: 22px;
  }

  .s-voorspeller .voorspel-weer use {
    stroke-width: 1.9;
  }
}

@media (max-width: 640px) {
  .s-voorspeller .voorspel-kaart {
    padding: var(--space-sm);
  }
}

@media (max-width: 460px) {
  .s-voorspeller .voorspel-as text {
    font-size: 19px;
  }

  .s-voorspeller .voorspel-dagen text {
    font-size: 20px;
  }

  .s-voorspeller .voorspel-pieklabel {
    font-size: 22px;
  }

  .s-voorspeller .voorspel-weer use {
    stroke-width: 1.9;
  }
}

/* Vangnet: zet de bezoeker minder beweging aan ná het laden, dan staat
   js-anim er al. De balken mogen dan nooit op scaleY(0) blijven staan. */
@media (prefers-reduced-motion: reduce) {
  .s-voorspeller .balk {
    transform: none !important;
    transition-delay: 0ms !important;
  }
}
/* ===== END section:voorspeller ===== */

/* ===== BEGIN section:modules =====
   Zes cellen in drie kolommen, dus twee volle rijen. De oude versie
   stond op auto-fit met minmax(230px), en die liet op de meeste
   schermbreedtes een weeskaart achter in een halflege rij. Het raster
   van grid-3 valt onder 940px terug op twee kolommen (drie rijen) en
   onder 620px op één kolom, dus geen enkele stand houdt een gat over. */
.s-modules .section-head {
  margin-bottom: var(--space-2xl);
}

.s-modules .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

/* De kaart zet zelf al een marge onder de kop, en die telt bij de gap
   op. Binnen deze sectie regelt de gap de hele verticale afstand. */
.s-modules .card > h3 {
  margin-bottom: 0;
}

/* De basiscel voert de eerste rij aan. Ze draagt een gouden chip omdat
   goud op deze pagina "zit er gewoon bij" betekent, terwijl de vijf
   betaalde modules de berrykleurige chip houden. */
.s-modules .card--accent p {
  color: var(--ink-soft);
}

.s-modules .icon-chip {
  margin-bottom: var(--space-3xs);
  transition: background var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.s-modules .card--interactive:hover .icon-chip {
  background: var(--berry);
  color: var(--ink-on-dark);
}

/* ---- De twee volle-breedtecellen ----
   Het raster telt zes betaalde modules, dus twee volle rijen van drie.
   De gratis basis en de FDM-module horen daar allebei niet tussen: de
   eerste is geen module die je bijkoopt, de tweede kan je maar één keer
   aanzetten en heeft als enige een vast bedrag. Ze spannen daarom de
   volle breedte, de ene boven en de andere onder het raster, en zetten
   zo een lijst waar je uit kiest tussen twee dingen die vastliggen.
   Zonder deze regels zouden het cel zeven en acht zijn, en dan blijft er
   in elke stand eentje alleen op de laatste rij achter. */
.s-modules .module-card--basis {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--space-sm);
  align-items: start;
}

.s-modules .module-card--basis h3 {
  margin-bottom: var(--space-3xs);
}

.s-modules .module-card--fdm {
  grid-column: 1 / -1;
  gap: var(--space-sm);
  border-color: var(--gold-tint-22);
  background: var(--surface-gold-soft);
}

.s-modules .module-card--fdm .fdm-tekst > h3 {
  margin-bottom: var(--space-3xs);
}

.s-modules .module-card--fdm .fdm-tekst > p + p {
  margin-top: var(--space-xs);
}

/* De onomkeerbaarheid draagt gewoon .callout: precies waarvoor die
   primitief bestaat. Hier alleen de vulling wat krapper, want ze zit in
   een kaart en niet los in een sectie. */
.s-modules .fdm-onomkeerbaar {
  padding: var(--space-sm);
}

.s-modules .fdm-onomkeerbaar .icon {
  color: var(--berry);
}

/* .card p zet ink-muted en wint van de geërfde kleur van .callout; deze
   waarschuwing hoort donkerder te staan dan de omringende kaarttekst. */
.s-modules .fdm-onomkeerbaar p {
  color: var(--ink-soft);
}

.s-modules .fdm-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs);
  align-items: start;
}

.s-modules .fdm-status .icon {
  margin-top: 0.2em;
  color: var(--gold-ink);
}

/* Het bedrag. Onder 720px staat het boven de tekst in plaats van ernaast,
   want naast vijf regels tekst past geen kolom van 9rem meer. */
.s-modules .fdm-prijs {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--gold-tint-22);
}

.s-modules .fdm-bedrag {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--bordeaux);
}

.s-modules .fdm-per {
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--ink-muted);
}

@media (min-width: 720px) {
  .s-modules .module-card--fdm {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: var(--space-md);
    align-items: start;
  }

  .s-modules .module-card--fdm .icon-chip {
    margin-bottom: 0;
  }

  .s-modules .fdm-prijs {
    display: block;
    width: 9.5rem;
    padding-top: 0;
    border-top: 0;
    text-align: right;
  }

  .s-modules .fdm-per {
    display: block;
    margin-top: var(--space-3xs);
  }
}

.s-modules .modules-noot {
  margin-top: var(--space-xl);
}

@media (min-width: 940px) {
  .s-modules .card {
    padding: var(--space-lg);
  }
}
/* ===== END section:modules ===== */

/* ===== BEGIN section:prijzen =====
   Twee bedragen liggen vast: de kassa kost niets en de FDM-module kost
   twintig euro per maand. Die twee staan bovenaan in twee volle kaarten.
   Voor de overige modules is er nog geen prijslijst, dus toont de rij
   eronder de opbouw in plaats van bedragen. Die drie kolommen zijn
   bewust rustiger dan de modulekaarten: geen vulling en geen schaduw,
   alleen een rand. Anders lezen twee kaartensecties na elkaar als één
   lange lap. */

.s-prijzen .card {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border-color: var(--line-strong);
}

.s-prijzen .card > h3 {
  margin-bottom: 0;
  font-size: var(--text-lg);
}

/* Kleinere chips dan in de modulesectie, om dezelfde reden. */
.s-prijzen .icon-chip {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--radius-xs);
}

.s-prijzen .icon-chip .icon {
  width: 1.15rem;
  height: 1.15rem;
}

/* Regels met een haarlijn ertussen, zoals een specificatieblad. */
.s-prijzen .price-list li {
  padding-block: var(--space-2xs);
  border-top: 1px solid var(--line);
  color: var(--ink-soft);
  font-size: var(--text-base);
}

.s-prijzen .price-list li:first-child {
  padding-top: 0;
  border-top: 0;
}

.s-prijzen .price-list--check li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs);
  align-items: start;
}

.s-prijzen .price-list--check .icon {
  margin-top: 0.3em;
  color: var(--berry);
}

/* ---- De twee kaarten mét een bedrag ----
   Ze staan buiten het raster van drie, want in dat raster zouden ze de
   opbouw eronder verdringen. Ze houden de vulling en de schaduw van .card
   (de drie kolommen eronder dragen .card--quiet en geven die net op), en
   krijgen een ruimere padding. Deze regels staan bewust ná
   .s-prijzen .card: die zet een eigen randkleur en gap, en met gelijke
   specificiteit wint de laatste regel. */
.s-prijzen .prijs-kern {
  margin-bottom: var(--space-2xl);
}

.s-prijzen .prijs-kaart {
  gap: var(--space-xs);
  padding: var(--space-lg);
}

.s-prijzen .prijs-kaart--gratis {
  border-color: var(--berry-tint-12);
  background: var(--surface-berry-soft);
}

.s-prijzen .prijs-kaart--fdm {
  border-color: var(--gold-tint-22);
  background: var(--surface-gold-soft);
}

.s-prijzen .prijs-bedrag {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--bordeaux);
}

.s-prijzen .prijs-per {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--ink-muted);
  white-space: nowrap;
}

/* Deze kaarten dragen een bedrag, dus de kop mag niet als opschrift
   boven dat bedrag lezen maar als het ding dat het bedrag kost. */
.s-prijzen .prijs-kaart > h3 {
  font-size: var(--text-xl);
  color: var(--ink);
}

.s-prijzen .prijs-uitleg {
  color: var(--ink-soft);
}

.s-prijzen .prijs-uitleg strong {
  font-weight: var(--weight-bold);
  color: var(--ink);
}

.s-prijzen .prijs-kaart .price-list {
  margin-top: var(--space-2xs);
}

.s-prijzen .prijs-kaart--fdm .price-list--check .icon {
  color: var(--gold-ink);
}

/* De twee statusnoten: hier hoort de klasse .fine wél, want ze staan
   naast een claim die ze nuanceren en niet op zichzelf. */
.s-prijzen .prijs-status,
.s-prijzen .prijs-factor-noot {
  margin-top: var(--space-2xs);
  padding-top: var(--space-2xs);
  border-top: 1px solid var(--line);
}

.s-prijzen .prijs-status {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--space-2xs);
  align-items: start;
  border-top-color: var(--gold-tint-22);
}

.s-prijzen .prijs-status .icon {
  margin-top: 0.2em;
  color: var(--gold-ink);
}

.s-prijzen .prijs-verplichting {
  margin-top: var(--space-xl);
}

/* Tussen 620 en 940px staat grid-3 op twee kolommen, en drie kaarten
   laten daar een halflege rij achter. De derde kolom vult die rij dan
   maar helemaal, net zoals de modules altijd volle rijen vormen. */
@media (min-width: 620px) and (max-width: 939.98px) {
  .s-prijzen .price-grid > :last-child {
    grid-column: span 2;
  }
}

.s-prijzen .price-note {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.s-prijzen .price-note p {
  max-width: var(--measure);
  color: var(--ink-soft);
}
/* ===== END section:prijzen ===== */

/* ===== BEGIN section:platform ===== */
/* De tekst weegt hier zwaarder dan het beeld: het schema bevestigt de
   vijf punten, het draagt ze niet. Vandaar een smallere beeldkolom dan
   de standaard 1.05fr/1fr van .split, en een plafond op het diagram. */
@media (min-width: 900px) {
  .s-platform .split {
    grid-template-columns: 1.15fr 0.85fr;
    gap: var(--space-2xl);
    align-items: center;
  }
}

.s-platform .split-copy .lead {
  margin-top: var(--space-sm);
}

.s-platform .check-list {
  margin-top: var(--space-lg);
}

/* Op een smal scherm brak /naam-zaak middenin het pad af. Een pad dat
   over twee regels staat, leest niet meer als een pad. */
.s-platform .check-list code {
  white-space: nowrap;
}

.s-platform .split-copy .fine {
  margin-top: var(--space-lg);
}

.s-platform .platform-diagram {
  max-width: 380px;
  margin-inline: auto;
}

/* Tekst in het schema. Bewust hier en niet als attribuut in de SVG:
   zo blijven de lettertypes en de inktkleuren tokens. De vlakken en
   lijnen staan wel als attribuut in de tekening zelf, want die horen
   bij de geometrie. */
.s-platform .platform-diagram text {
  font-family: var(--font-body);
}

.s-platform .pd-plat {
  font-size: 13px;
  font-weight: var(--weight-bold);
  fill: var(--ink-on-dark);
}

.s-platform .pd-plat-sub {
  font-size: 11px;
  font-weight: var(--weight-medium);
  fill: var(--surface-berry-soft);
}

.s-platform .pd-zaak {
  font-size: 13px;
  font-weight: var(--weight-semi);
  fill: var(--ink);
}

.s-platform .pd-pad {
  font-size: 11px;
  font-weight: var(--weight-medium);
  fill: var(--bordeaux);
}

.s-platform .pd-eigen {
  font-size: 11px;
  font-weight: var(--weight-medium);
  fill: var(--ink-muted);
}
/* ===== END section:platform ===== */

/* ===== BEGIN section:changelog ===== */
/* Een tijdlijn in plaats van kaarten. Elders op de pagina staan al
   rasters met kaarten; een verticale lijn met stippen leest hier als
   "dit gaat vooruit" en zorgt meteen voor visuele afwisseling. */
.s-changelog .section-head {
  margin-bottom: var(--space-lg);
}

.s-changelog .tijdlijn {
  display: grid;
}

.s-changelog .tijdlijn-item {
  position: relative;
  padding-left: 3.25rem;
  padding-bottom: var(--space-lg);
}

/* De lijn hangt aan het item zelf en loopt van onder de eigen stip tot
   aan de stip van het volgende item. Eén lijn over de hele lijst zou
   onder de laatste stip blijven doorlopen. */
.s-changelog .tijdlijn-item::before {
  content: "";
  position: absolute;
  left: calc(1.125rem - 1px);
  top: 2.6rem;
  bottom: -0.1rem;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}

.s-changelog .tijdlijn-item:last-child {
  padding-bottom: 0;
}

.s-changelog .tijdlijn-item:last-child::before {
  content: none;
}

.s-changelog .tijdlijn-stip {
  position: absolute;
  left: 0;
  top: 0.1rem;
  display: grid;
  place-items: center;
  width: 2.25rem;
  height: 2.25rem;
  border: 1px solid var(--berry-tint-12);
  border-radius: var(--radius-pill);
  background: var(--surface-berry-soft);
  color: var(--berry);
}

.s-changelog .tijdlijn-datum {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.s-changelog .tijdlijn-kop {
  margin-top: var(--space-3xs);
  font-size: var(--text-lg);
}

.s-changelog .tijdlijn-item p {
  margin-top: var(--space-3xs);
  color: var(--ink-soft);
  font-size: var(--text-base);
}

.s-changelog .tijdlijn-slot {
  margin-top: var(--space-lg);
  padding-top: var(--space-md);
  border-top: 1px solid var(--line);
}
/* ===== END section:changelog ===== */

/* ===== BEGIN section:demo ===== */
.demo-band {
  /* De radiale laag verdiept enkel de rechterbovenhoek. Bewust alleen
     donkerder: berry is al de lichtste kleur van de band, en witte tekst
     erop haalt met 4,7:1 net AA. Elke lichtere laag zou dat breken. */
  background: radial-gradient(
      90% 130% at 100% 0%,
      rgba(74, 11, 33, 0.55),
      rgba(74, 11, 33, 0) 62%
    ),
    var(--grad-berry);
  color: var(--ink-on-dark);
  box-shadow: var(--shadow-3);
}

.demo-band h2 {
  color: var(--ink-on-dark);
}

.demo-band p {
  color: rgba(255, 253, 248, 0.88);
}

/* De eyebrow is standaard berry en zou hier onzichtbaar zijn. Vol goud
   haalt op berry maar 2,6:1, dus nemen we de lichtste goudtint. */
.demo-band .eyebrow {
  color: var(--surface-gold-soft);
}

.demo-band .lead {
  max-width: 54ch;
  margin: var(--space-sm) auto 0;
}

/* LET OP bij alles wat `hidden` kan dragen: 02-base.css heeft geen
   [hidden]-regel, dus de standaard van de motor geldt, en die verliest van
   elke display die wij hier onvoorwaardelijk zetten. Vandaar overal
   `:not([hidden])`, en nergens !important. */
.demo-band .demo-actions:not([hidden]) {
  display: grid;
  justify-items: center;
  gap: var(--space-md);
  margin-top: var(--space-xl);
}

.demo-band .btn {
  max-width: 100%;
}

/* De focusring is berry en valt weg op een berry vlak. Twee ringen: de
   donkere staat tegen de witte knop, de lichte tegen de band, zodat elke
   overgang boven 3:1 blijft. */
.demo-band :focus-visible {
  box-shadow: 0 0 0 2px var(--bordeaux-deep), 0 0 0 5px rgba(255, 253, 248, 0.92);
}

.demo-band .demo-fallback-adres {
  display: grid;
  justify-items: center;
  gap: var(--space-2xs);
}

/* Het adres als losse tekst onder de knop, want een mailto opent niet op
   elk toestel iets bruikbaars. Donkerder dan de band zelf, zodat de
   witte tekst erop ruim boven AA uitkomt. */
.demo-band .demo-copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2xs);
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 253, 248, 0.3);
  border-radius: var(--radius-pill);
  background: rgba(74, 11, 33, 0.32);
}

.demo-band .demo-copy .icon {
  color: rgba(255, 253, 248, 0.72);
}

.demo-band .demo-address {
  /* user-select: all zet het adres in één klik in de selectie waar de
     motor die waarde kent, en valt elders terug op gewoon selecteerbare
     tekst. Een kopieerknop zou JavaScript vragen. */
  -webkit-user-select: all;
  user-select: all;
  font-weight: var(--weight-semi);
  color: var(--ink-on-dark);
}

.demo-band .demo-hint {
  color: rgba(255, 253, 248, 0.92);
}

.demo-band .demo-honest {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: var(--space-2xs);
  max-width: 48ch;
  margin: var(--space-xl) auto 0;
  padding-top: var(--space-md);
  border-top: 1px solid rgba(255, 253, 248, 0.24);
  color: rgba(255, 253, 248, 0.92);
}

.demo-band .demo-honest .icon {
  margin-top: 0.28em;
  color: var(--surface-gold-soft);
}

/* ---------------------------------------------------------------
   De agenda zelf. Alles hieronder verschijnt pas als demo.js draait
   en er momenten open staan; zonder script blijft enkel het blok
   hierboven over.

   De band is een berry-gradiënt, dus tekst is licht en elk invulveld
   krijgt zijn eigen lichte vlak met donkere inkt. De bestaande regel
   `.demo-band p` zet elke <p> op licht berry-wit; de wrappers van de
   velden zijn <p>'s, dus die kleuren we hier opnieuw waar het moet.
   --------------------------------------------------------------- */

/* Beleefde meldingen (agenda onbereikbaar, niets open, gekozen moment
   vervallen). Leeg valt enkel de marge weg en NIET de display: een lege
   <p> is vanzelf nul hoog, en zo blijft het live-gebied altijd in de
   toegankelijkheidsboom staan. Met display:none moet een schermlezer een
   gebied opvangen dat er net pas bij komt, en dat lukt lang niet overal. */
.demo-band .demo-status {
  max-width: 46ch;
  margin: var(--space-md) auto 0;
  color: var(--ink-on-dark);
}

.demo-band .demo-status:empty {
  margin: 0;
}

.demo-band .demo-boeking:not([hidden]) {
  display: grid;
  gap: var(--space-md);
  /* Het vangnetveld hieronder staat absoluut; dit geeft het een
     containing block binnen het formulier in plaats van de viewport. */
  position: relative;
  margin-top: var(--space-xl);
  /* De container staat op u-center voor de kop; een formulier links
     uitlijnen leest een pak rustiger. */
  text-align: left;
}

/* ---- Stappen ---- */
.demo-band .demo-stap {
  margin: 0;
  /* Een fieldset krijgt van de motor min-width: min-content. Zonder deze
     regel kan één lang woord in de inhoud het vak breder duwen dan de
     pagina, en dan schuift de hele band horizontaal. */
  min-width: 0;
  padding: var(--space-md);
  border: 1px solid rgba(255, 253, 248, 0.24);
  border-radius: var(--radius-lg);
  background: rgba(74, 11, 33, 0.24);
}

.demo-band .demo-stap legend {
  padding: 0 var(--space-2xs);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
  color: var(--ink-on-dark);
}

/* De fieldset krijgt de focus na een verloren race. Geen zichtbare ring
   nodig op het vlak zelf: de melding erboven vertelt al wat er speelt. */
.demo-band .demo-stap:focus {
  outline: none;
}

/* ---- Momenten, per dag ---- */
.demo-band .demo-dagen {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

.demo-band .demo-dag-kop {
  margin: 0 0 var(--space-2xs);
  font-size: var(--text-sm);
  font-weight: var(--weight-semi);
  color: var(--surface-gold-soft);
}

.demo-band .demo-tijden {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* Een echte radio, niet een <div> met aria-pressed: pijltjestoetsen,
   de verplichting en de groepering krijgen we zo gratis. De invoer zelf
   ligt doorzichtig over de hele pil, zodat de focusring precies rond de
   pil valt en de klikzone het hele vlak is. */
.demo-band .demo-tijd {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  min-height: 2.75rem;
  padding: 0.5rem 1rem;
  border: 1px solid rgba(255, 253, 248, 0.38);
  border-radius: var(--radius-pill);
  background: rgba(255, 253, 248, 0.12);
  color: var(--ink-on-dark);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.demo-band .demo-tijd input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: inherit;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: inherit;
}

.demo-band .demo-tijd span {
  position: relative;
}

.demo-band .demo-tijd:hover {
  background: rgba(255, 253, 248, 0.22);
}

/* Twee losse regels en géén selectorlijst: een motor die :has() niet
   kent gooit een hele lijst weg zodra één deel onbekend is, en dan zou
   ook de terugvalklasse van demo.js meesneuvelen. */
.demo-band .demo-tijd.is-gekozen {
  background: var(--surface-panel);
  border-color: var(--surface-panel);
  color: var(--bordeaux);
  font-weight: var(--weight-semi);
}

.demo-band .demo-tijd:has(input:checked) {
  background: var(--surface-panel);
  border-color: var(--surface-panel);
  color: var(--bordeaux);
  font-weight: var(--weight-semi);
}

/* Op slot omdat dit moment de gekozen vorm niet aanbiedt. */
.demo-band .demo-tijd.uit {
  opacity: 0.45;
  cursor: not-allowed;
  text-decoration: line-through;
}

.demo-band .demo-tijd.uit:hover {
  background: rgba(255, 253, 248, 0.12);
}

.demo-band .demo-leeg {
  margin: 0;
  color: var(--ink-on-dark);
}

/* ---- Vorm van de demo ---- */
.demo-band .demo-keuzes {
  display: grid;
  gap: var(--space-2xs);
  margin-top: var(--space-sm);
}

@media (min-width: 620px) {
  .demo-band .demo-keuzes {
    grid-template-columns: 1fr 1fr;
  }
}

.demo-band .demo-keuze {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  min-height: 2.75rem;
  padding: 0.7rem 1rem;
  border: 1px solid rgba(255, 253, 248, 0.38);
  border-radius: var(--radius-md);
  background: rgba(255, 253, 248, 0.12);
  color: var(--ink-on-dark);
  cursor: pointer;
  transition: background var(--dur-base) var(--ease-out),
    border-color var(--dur-base) var(--ease-out),
    color var(--dur-base) var(--ease-out);
}

.demo-band .demo-keuze input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: inherit;
  background: none;
  appearance: none;
  -webkit-appearance: none;
  cursor: inherit;
}

.demo-band .demo-keuze .icon,
.demo-band .demo-keuze span {
  position: relative;
}

.demo-band .demo-keuze:hover {
  background: rgba(255, 253, 248, 0.22);
}

.demo-band .demo-keuze.is-gekozen {
  background: var(--surface-panel);
  border-color: var(--surface-panel);
  color: var(--bordeaux);
  font-weight: var(--weight-semi);
}

.demo-band .demo-keuze:has(input:checked) {
  background: var(--surface-panel);
  border-color: var(--surface-panel);
  color: var(--bordeaux);
  font-weight: var(--weight-semi);
}

/* ---- Velden ---- */
.demo-band .demo-velden {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-sm);
}

@media (min-width: 620px) {
  .demo-band .demo-velden {
    grid-template-columns: 1fr 1fr;
  }
}

.demo-band .demo-veld:not([hidden]) {
  display: grid;
  gap: var(--space-3xs);
  margin: 0;
  color: var(--ink-on-dark);
}

/* De velden onder het raster (adres, notitie) staan los en hebben dus
   hun eigen ruimte ervoor nodig. */
.demo-band .demo-stap > .demo-veld:not([hidden]) {
  margin-top: var(--space-sm);
}

.demo-band .demo-veld > label {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--ink-on-dark);
}

.demo-band .demo-veld .fine {
  display: inline;
  color: var(--ink-on-dark-muted);
}

.demo-band .demo-veld input,
.demo-band .demo-veld textarea {
  width: 100%;
  padding: 0.65rem 0.85rem;
  border: 1px solid rgba(255, 253, 248, 0.45);
  border-radius: var(--radius-sm);
  /* Een eigen licht vlak met donkere inkt: getypte tekst op de band zelf
     zou nooit boven AA komen, en een half doorzichtig veld leest als een
     veld dat uit staat. */
  background: rgba(255, 253, 248, 0.96);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
}

.demo-band .demo-veld textarea {
  resize: vertical;
}

/* Het vangnet tegen scripts. Buiten beeld en NIET met display:none:
   een deel van de scripts die we hier tegenhouden slaat verborgen
   velden gewoon over. Geen style-attribuut, want de CSP verbiedt dat. */
.demo-band .demo-vangnet {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ---- Eerlijkheid en verzenden ---- */
.demo-band .demo-geen-mail {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2xs);
  margin: 0;
  color: var(--ink-on-dark);
}

.demo-band .demo-geen-mail .icon {
  flex: none;
  margin-top: 0.28em;
  color: var(--surface-gold-soft);
}

.demo-band .demo-fout:not([hidden]) {
  display: block;
  margin: 0;
  padding: var(--space-xs) var(--space-sm);
  border: 1px solid var(--surface-gold-soft);
  border-radius: var(--radius-md);
  /* Rood op berry is geen waarschuwing maar een vlek. Op deze band is
     goud de kleur die opvalt zonder te vechten met de achtergrond. */
  background: rgba(74, 11, 33, 0.55);
  color: var(--ink-on-dark);
  font-weight: var(--weight-medium);
}

.demo-band .demo-verzend {
  justify-self: start;
}

.demo-band .demo-verzend:disabled {
  opacity: 0.65;
  cursor: progress;
}

/* ---- De bevestiging ---- */
.demo-band .demo-bevestiging:not([hidden]) {
  display: grid;
  gap: var(--space-sm);
  margin-top: var(--space-xl);
  padding: var(--space-lg);
  border: 1px solid var(--surface-gold-soft);
  border-radius: var(--radius-lg);
  background: rgba(74, 11, 33, 0.4);
  text-align: left;
}

.demo-band .demo-bevestiging h3 {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  color: var(--ink-on-dark);
}

.demo-band .demo-bevestiging h3:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--surface-gold-soft);
  outline-offset: 4px;
  border-radius: var(--radius-xs);
}

.demo-band .demo-bevestiging h3 .icon {
  color: var(--surface-gold-soft);
}

.demo-band .demo-bevestiging p {
  margin: 0;
  color: rgba(255, 253, 248, 0.92);
}

.demo-band .demo-bevestiging a {
  color: var(--surface-gold-soft);
}

.demo-band .demo-moment {
  font-size: var(--text-lg);
  font-weight: var(--weight-semi);
}

.demo-band .demo-ref-regel {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
}

/* Per vier gegroepeerd door demo.js. user-select: all zet de hele code in
   één klik in de selectie waar de motor dat kent: er vertrekt geen mail,
   dus dit is het enige spoor dat de bezoeker meekrijgt. */
.demo-band .demo-ref {
  -webkit-user-select: all;
  user-select: all;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-sm);
  background: var(--surface-panel);
  color: var(--bordeaux);
  font-family: ui-monospace, "SFMono-Regular", "Consolas", monospace;
  font-size: var(--text-lg);
  font-weight: var(--weight-bold);
  letter-spacing: 0.08em;
}

/* Op een smal scherm past "Mail info@comptela.be" niet in een pil die
   niet mag afbreken. De knop zakt daar dus terug naar de basismaat. */
@media (max-width: 480px) {
  .demo-band .btn--lg {
    padding: 0.85rem 1.3rem;
    font-size: var(--text-base);
  }

  .demo-band .demo-stap {
    padding: var(--space-sm);
  }

  .demo-band .demo-bevestiging:not([hidden]) {
    padding: var(--space-md);
  }

  /* De referentie mag nooit buiten beeld lopen: ze is het enige wat de
     bezoeker overhoudt. */
  .demo-band .demo-ref {
    font-size: var(--text-base);
  }
}
/* ===== END section:demo ===== */

/* ===== BEGIN section:faq ===== */
.s-faq .faq-item {
  transition: border-color var(--dur-base) var(--ease-out),
    box-shadow var(--dur-base) var(--ease-out);
}

.s-faq .faq-item:hover {
  border-color: var(--line-strong);
}

/* Het open item mag zich van de zes dichte onderscheiden, anders leest
   de lijst als één grijs blok. */
.s-faq .faq-item[open] {
  border-color: var(--berry-tint-12);
  box-shadow: var(--shadow-2);
}

/* De kaart klipt zijn inhoud (card--flush), dus een ring buiten de
   summary wordt weggesneden. Vandaar een omtrek net binnen de rand. */
.s-faq .faq-item summary:focus-visible {
  box-shadow: none;
  outline: 2px solid var(--berry);
  outline-offset: -3px;
  border-radius: var(--radius-md);
}

/* Zonder deze maat lopen de antwoorden tot bijna negentig tekens breed. */
.s-faq .faq-answer p {
  max-width: var(--measure);
}

.s-faq .faq-more {
  margin-top: var(--space-lg);
  text-align: center;
}
/* ===== END section:faq ===== */

/* De footer zelf is geen sectie tussen BEGIN/END-markers (03-components.css
   is bevroren en tekent .footer-bottom als lege tekstregels), dus de ene
   regel styling voor de juridische link staat hier apart. */
.footer-bottom a {
  color: var(--ink-on-dark-muted);
}

.footer-bottom a:hover {
  color: var(--ink-on-dark);
}