/* Team Scan: quizlaag bovenop het Straight-Line design system.
 *
 * css/straight-line.css levert de tokens, de sectie-thema's en de basis-
 * componenten. Dit blad voegt alleen toe wat de scan zelf nodig heeft en
 * dat het systeem niet kent: de antwoordschaal, de voortgangsindicator, de
 * videopoort en de verdelingsbalken.
 *
 * Regels die hier gelden, net als in het systeem: radius altijd 5px, geen
 * box-shadows, gewicht 400 of 500, koppen op tracking -0.01em en leading
 * 0.98em. Componenten krijgen geen eigen kleur mee; ze lezen de tokens die
 * het sectie-thema zet.
 */

/* ---------------------------------------------------------------------------
   1. PAGINA
   ------------------------------------------------------------------------ */

:root {
  /* De hoogte van de balk bovenaan, gelijk aan die op de hoofdsite. Hij staat
     op drie plekken: de balk zelf, de hoogte van de laatste stap en de afstand
     waarop de CTA-kolom blijft plakken. Eén waarde, zodat die niet uit elkaar
     kunnen lopen. */
  --sl-balk-hoogte: 5.125rem;
}

html {
  -webkit-text-size-adjust: 100%;
  /* Springt iets in beeld, dan moet het niet onder de plakkende balk landen. */
  scroll-padding-top: var(--sl-balk-hoogte);
}

body {
  min-height: 100vh;
  /* De staart onder de laatste sectie krijgt de kleur van die sectie, zodat
     er geen witte strook onder een donker CTA-blok blijft staan. */
  background: var(--page-tail, var(--section-background));
  color: var(--section-text-color);
}
/* De uitslag opent donker, maar eindigt lichtgrijs. De kop volgt de eerste
   sectie, de ruimte onder de laatste sectie volgt de laatste. */
body.sl-tail-light { --page-tail: var(--sl-grey-100); }

/* De balk bovenaan, gelijk aan die op straightlineleadership.com: altijd
   donkerblauw, met het logo links, de beoordeling ernaast en de knop naar de
   diagnose rechts. Hij leest dus niet meer het thema van het scherm eronder —
   dit is een merkbalk en geen onderdeel van de pagina. */
.sl-head {
  /* Blijft staan bij het scrollen. sticky en niet fixed: zo houdt hij zijn
     plek in de stroom en hoeft er geen opvulling onder om te voorkomen dat de
     pagina eronder schiet. */
  position: sticky;
  top: 0;
  z-index: 500;
  padding: 0 var(--sl-offset-side);
  /* Leest het thema van het scherm eronder: wit op een wit scherm,
     donkerblauw op een donker. Alles in de balk volgt die twee kleuren, dus er
     is geen tweede set voor een lichte variant nodig. */
  background: var(--section-background);
  color: var(--title-color);
}

/* Het systeem reset de marge van een kop als eerste of laatste kind, maar niet
   die van broodtekst. Zonder deze reset telt de blokpadding dubbel, en staat
   een sectie die met een tekstregel begint te laag. */
.sl-block > .sl-text:first-child,
.sl-container > .sl-text:first-child { margin-top: 0; }
.sl-block > .sl-text:last-child { margin-bottom: 0; }

.sl-head__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* De kop houdt zijn hoogte ook als de beoordeling en de knop wegvallen,
     zodat de pagina niet verspringt bij de overgang naar de uitslag. */
  min-height: var(--sl-balk-hoogte);
  width: 100%;
  max-width: var(--sl-container-wide);
  margin-inline: auto;
}

/* Het logo is een link terug naar het begin van de scan. */
.sl-head__logo {
  display: block;
  color: var(--title-color);
  text-decoration: none;
  border-radius: var(--sl-radius);
  transition: opacity var(--sl-transition);
}
.sl-head__logo:hover { opacity: 0.7; }
/* De horizontale lockup is ruim 12 keer zo breed als hoog, dus lager dan de
   vorige gestapelde versie om in de kop te passen. */
.sl-head__logo svg { display: block; height: 1.2rem; width: auto; }

@media only screen and (max-width: 576px) {
  .sl-head__logo svg { height: 0.975rem; }
}

/* De beoordeling. Op een breed scherm naast elkaar, daaronder gestapeld met de
   regel boven de sterren — net als op de hoofdsite.

   Standaard weg: onderweg draagt de balk alleen het logo. Zie de klasse die
   render() op body zet. */
.sl-head__proof {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 0.5em 1.6rem;
  margin: 0;
  font-size: var(--sl-small-font-size);
  line-height: 1;
}
.sl-head__score { white-space: nowrap; }
.sl-head__stars { display: block; width: 164px; }
.sl-head__stars svg { display: block; width: 100%; height: auto; }

/* De knop naar de diagnose. Wit op donker, zonder rand: de vorm komt van het
   vlak zelf. Ook deze staat standaard uit. */
.sl-head__cta {
  display: none;
  /* Het is een <button>, dus de standaardopmaak van de browser moet eerst weg:
     die geeft hem een eigen lettertype, een rand en een grijs vlak. */
  border: 0;
  font: inherit;
  cursor: pointer;
  flex: none;
  align-items: center;
  gap: 0.375rem;
  padding: 0.75rem 1rem;
  border-radius: var(--sl-radius);
  /* Omgekeerd aan de balk: op donker een witte knop met donkere tekst, op wit
     een donkere knop met witte tekst. Beide halen ruim boven 4,5:1. */
  background: var(--title-color);
  color: var(--section-background);
  font-size: var(--sl-small-font-size);
  font-weight: 500;
  line-height: 1.15;
  text-decoration: none;
  transition: background var(--sl-transition), color var(--sl-transition);
}
.sl-head__cta:hover {
  background: var(--sl-blue);
  color: var(--sl-white);
}
.sl-head__arrow { display: block; width: 1.25em; height: auto; flex: none; }

/* Op de uitslag komt de beoordeling erbij, en de knop pas als de video gezien
   is — zie render(). Zonder JavaScript blijft het bij het logo, en dat klopt:
   dan staat er de landingsversie van de pagina. */
body.sl-balk-uitslag .sl-head__proof { display: flex; }
/* De knop verschijnt op het moment dat de kijktijd om is — tegelijk met de
   knop onder de video, en los van of daarop gedrukt wordt — en schuift daarbij
   van rechts binnen. */
body.sl-balk-knop .sl-head__cta {
  display: inline-flex;
  animation: sl-schuif-links 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes sl-schuif-links {
  from { opacity: 0; transform: translateX(1.5rem); }
  to   { opacity: 1; transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  body.sl-balk-knop .sl-head__cta { animation: sl-fade 0.3s ease-out both; }
}


@media only screen and (max-width: 1024px) {
  .sl-head__proof {
    flex-direction: column;
    /* De sterrenrij is smaller dan de regel erboven; gecentreerd hangen ze aan
       elkaar in plaats van allebei los aan de rechterrand. */
    align-items: center;
    gap: 0.5rem;
  }
  /* De regel eerst, de sterren eronder: zo blijft de zin de drager en is het
     beeld de bevestiging. */
  .sl-head__score { order: 1; }
  .sl-head__stars { order: 2; width: 10em; }
}

/* Onder deze breedte is er geen ruimte meer voor de knop naast het logo en de
   beoordeling. De beoordeling wint: die zegt iets, en op de uitslagpagina staat
   dezelfde knop verderop toch al twee keer. */
@media only screen and (max-width: 768px) {
  body.sl-balk-knop .sl-head__cta { display: none; }
}

/* Op een telefoon passen het logo en de regel niet naast elkaar: het logo is
   een liggende lockup van ruim twaalf keer zo breed als hoog, en de regel staat
   op nowrap. Dan gaat de beoordeling in zijn geheel weg, sterren inbegrepen —
   losse sterren zonder de regel erbij zijn een plaatje zonder uitspraak. */
@media only screen and (max-width: 640px) {
  .sl-head__proof { display: none !important; }
}

/* Zichtbare focus. Het systeem zet outlines uit op formuliervelden; voor
   toetsenbordgebruik zetten we er een terug, in het accentblauw. */
:focus-visible {
  outline: 2px solid var(--sl-blue);
  outline-offset: 2px;
}
/* Zelfde valkuil als hierboven, maar nu in het design system zelf: dat zet
   .sl-text op --sl-muted-dark zodra er een donker thema boven staat, en de
   <body> draagt op de uitslag het donkere thema voor de kop. Daardoor kwam de
   broodtekst in de lichte sectie op #b5b9be te staan, tegen een #f2f3f7
   achtergrond. Dat is ruim onvoldoende contrast. */
section.sl-theme-white .sl-text,
section.sl-theme-light-grey .sl-text { color: var(--sl-muted); }

/* Bij elke schermwissel krijgt de kop programmatisch focus, zodat een
   schermlezer de nieuwe stap voorleest. Dat is geen toetsenbordnavigatie, dus
   daar hoort geen zichtbare rand omheen; anders staat er bij het laden van
   elk scherm een kader om de titel. */
#app h1[tabindex="-1"]:focus,
#app h1[tabindex="-1"]:focus-visible { outline: none; }

/* Alleen binnen een donkere sectie, niet zodra de <body> een donker thema
   draagt: op de uitslag is de kop donker terwijl de tekst eronder licht is,
   en daar zou een witte focusrand onzichtbaar zijn. De kop zelf staat wel
   in een donker vlak, dus die krijgt hem via de eigen regel hieronder. */
section.sl-theme-dark-blue :focus-visible,
section.sl-theme-grey-blue :focus-visible,
section.sl-theme-dark-blue-to-dark-grey :focus-visible,
body.sl-theme-dark-blue .sl-head :focus-visible,
body.sl-theme-grey-blue .sl-head :focus-visible {
  outline-color: var(--sl-white);
}

/* ---------------------------------------------------------------------------
   2. LANDINGSPAGINA
   Twee kolommen: links de tekst en de knop, rechts het beeld.
   ------------------------------------------------------------------------ */

.hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sl-offset-columns);
  /* De foto is precies even hoog als de tekstkolom, dus boven- en onderkant
     lopen gelijk. De kolom is smaller dan hoog, dus de uitsnede snijdt links
     en rechts bij en laat het portret verticaal heel. */
  align-items: stretch;
}

.hero__text > :first-child { margin-top: 0; }
.hero__text > :last-child { margin-bottom: 0; }

/* De introregel draagt de landingspagina. Helvetica Neue 500 op 54px met de
   leading van het systeem (0.98em geeft precies 53px) en dezelfde tracking als
   elke andere kop. Het gemarkeerde deel uit de content staat wit, de rest in
   het gedimde wit van --sl-muted-dark. */
.hero__lead {
  margin: 0 0 var(--sl-offset-block-top);
  color: var(--sl-muted-dark);
  font-family: var(--sl-font-sans);
  font-size: 54px;
  font-weight: 400;
  letter-spacing: var(--sl-title-tracking);
  line-height: var(--sl-title-leading);
}
/* Het accent draagt op kleur, niet op gewicht. Dat is ook de merkregel:
   nadruk komt uit formaat en kleur, nooit uit vet. */
.hero__lead strong {
  color: var(--sl-white);
  font-weight: 400;
}

/* De entry hook staat eronder als alineatekst: 18px met de body-leading van
   het systeem, wat op 24.75px uitkomt. */
.hero__hook {
  font-size: 1.125rem;
  line-height: var(--sl-body-leading);
}

/* Kader met de drie punten en de startknop eronder. */
.hero-card {
  margin-top: 2.5rem;
  padding: var(--sl-offset-block);
  border-radius: var(--sl-radius);
  /* --sl-slate (#1f2d3b), het tweede donkere vlak van het systeem. */
  background: var(--sl-slate);
}

.hero-card__list {
  margin: 0 0 var(--sl-offset-block-top);
  padding: 0;
  list-style: none;
}

.hero-card__item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--title-color);
  line-height: 1.35;
}
.hero-card__item + .hero-card__item { margin-top: 0.625rem; }
.hero-card__item .icon svg { display: block; }

/* De voornaam en de startknop, naast elkaar. Het veld neemt de ruimte die
   overblijft; de knop houdt zijn eigen breedte, zodat het label niet afbreekt. */
.hero-start__form { margin: 0; }

/* De knop zakt eronder zodra het veld te smal wordt voor zijn plaatshouder.
   Geen vaste breekgrens maar een ondergrens op het veld: de plaatshouder "Je
   voornaam" meet 93px en met de binnenruimte erbij is 128px nodig. 9rem (144px)
   houdt daar marge op, ook als die tekst ooit langer wordt. Het veld mag niet
   krimpen, dus zodra het niet meer naast de knop past, wrapt de knop. */
.hero-start {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 0.75rem;
}
.hero-start__veld { flex: 999 0 9rem; }

/* De knop mag groeien, maar het veld wint die ruimte met 999 tegen 1: naast
   elkaar houdt de knop daarmee zijn eigen breedte. Komt hij op een eigen regel
   te staan, dan is hij het enige dat er groeien kan en vult hij die regel —
   even breed als het veld erboven, zonder dat er een breekgrens voor nodig is. */
.hero-start__knop { flex: 1 1 auto; }

/* Het systeem geeft een invoerveld in een donkere sectie dezelfde kleur als die
   sectie. Hier staat het veld in de kaart, en die draagt precies die kleur —
   dan is er geen veld meer te zien. Daarom een tint lichter, met een rand.
   Wit haalt er 9,8:1 op en de plaatshouder 4,8:1. */
.hero-start__input {
  width: 100%;
  height: 100%;
  border-color: hsla(0, 0%, 100%, 0.25);
  background: var(--sl-block-dark);
  color: var(--sl-white);
}
.hero-start__input::placeholder { color: hsla(0, 0%, 100%, 0.6); }
.hero-start__input:focus { border-color: var(--sl-white); }

/* De melding staat onder de rij in plaats van onder het veld: hij slaat op het
   geheel en zou tussen het veld en de knop de rij uit elkaar trekken. */
.hero-start__form .field__error { margin-top: 0.5rem; }

/* De startknop vraagt aandacht met een rustige beweging heen en weer. Het is
   de enige doorlopende animatie in de scan; hij staat stil zodra je erover
   gaat, en vervalt volledig bij prefers-reduced-motion. */
.cta-float {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  animation: sl-float-x 2.4s ease-in-out infinite;
}
.hero-start__knop:hover .cta-float,
.hero-start__knop:focus .cta-float { animation-play-state: paused; }

@keyframes sl-float-x {
  0%, 100% { transform: translateX(-0.25rem); }
  50%      { transform: translateX(0.25rem); }
}

/* Meeschalen volgens de breekpunten van het systeem. */
@media only screen and (max-width: 1024px) {
  .hero__lead { font-size: 44px; }
}
@media only screen and (max-width: 576px) {
  .hero__lead { font-size: 34px; }
  .hero__hook { font-size: var(--sl-body-size); }
}

.hero__media { width: 100%; align-self: stretch; }

.hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: var(--sl-radius);
}

/* Lege plek zolang er geen beeld is. Zet assets/hero.jpg neer en hij vervalt. */
.hero__placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 18rem;
  border: 1px dashed var(--border-color);
  border-radius: var(--sl-radius);
  color: var(--color);
  font-size: var(--sl-small-font-size);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

@media only screen and (max-width: 860px) {
  .hero { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Gestapeld is er geen tekstkolom meer om de hoogte aan te ontlenen, dus
     valt de foto terug op zijn eigen vierkante verhouding. */
  .hero__image,
  .hero__placeholder { height: auto; min-height: 0; aspect-ratio: 1 / 1; }
}

/* ---------------------------------------------------------------------------
   3. VOORTGANG EN ANTWOORDSCHAAL
   ------------------------------------------------------------------------ */

/* Pil en balk staan op één regel, verticaal gecentreerd: de pil links, de balk
   ernaast over de rest van de breedte. Boven elkaar las het als twee losse
   dingen; naast elkaar is het één voortgangsregel. */
.scan-progress {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  margin: 0 0 2.5rem;
}

/* De stapteller als pil. Als kale regel zweefde hij los boven de balk; in een
   vlakje is het één label dat bij de balk hoort.

   Het vlak is dat van de antwoordtegels. De tekst staat in het donkerblauw
   van het systeem, niet in het accentblauw: dat laatste staat al in de kop
   eronder, en twee keer hetzelfde blauw boven elkaar vecht om aandacht. Op dit
   grijs haalt het donkerblauw 15,5:1.

   inline-flex, want een <p> is een blok: zonder dat zou de pil over de hele
   breedte van de sectie doorlopen. */
.scan-progress .sl-eyebrow {
  display: inline-flex;
  align-items: center;
  /* Niet meekrimpen met de balk ernaast: "Stap 2 van 7" hoort op één regel te
     blijven staan, ook op een smal scherm. */
  flex: none;
  margin: 0;
  padding: 0.3125rem 0.75rem;
  border-radius: 999px;
  background: var(--block-background);
  color: var(--sl-ink);
  letter-spacing: 0;
  white-space: nowrap;
}

.scan-progress__track {
  flex: 1;
  height: 3px;
  border-radius: var(--sl-radius);
  background: var(--sl-grey-200);
  overflow: hidden;
}

.scan-progress__fill {
  height: 100%;
  border-radius: var(--sl-radius);
  /* Het accentblauw van het systeem, hetzelfde als de kop van de stap. Tegen
     de grijze baan eronder haalt dat 8,7:1 — ruim boven de 3:1 die WCAG voor
     een grafisch element vraagt. */
  background: var(--sl-blue);
  transition: width 0.22s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.scale {
  display: grid;
  grid-template-columns: repeat(var(--scale-columns, 5), 1fr);
  gap: 0.625rem;
  margin: 2.5rem 0 2rem;
}

.scale__btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.5rem;
  padding: var(--sl-offset-block-top) 1.125rem;
  border: 1px solid transparent;
  border-radius: var(--sl-radius);
  /* Een tint donkerder dan --block-background: op een wit scherm was het
     verschil met de achtergrond zo klein dat de tegels nauwelijks als vlak
     leesbaar waren. */
  background: var(--sl-grey-150);
  color: var(--block-color, var(--sl-muted));
  font-family: var(--sl-font-sans);
  text-align: left;
  cursor: pointer;
  transition: background var(--sl-transition), color var(--sl-transition),
              border-color var(--sl-transition);
}
/* Duidelijk aanwijsbaar: donkerder vlak plus een rand in de tekstkleur.
   De rand staat er al transparant op, dus er verspringt niets. */
.scale__btn:hover {
  background: var(--sl-grey-200);
  border-color: var(--title-color);
}

.scale__btn[aria-pressed="true"] {
  background: var(--sl-ink);
  color: hsla(0, 0%, 100%, 0.75);
  border-color: var(--sl-ink);
}

.scale__num {
  /* Een vijfde kleiner en op het normale gewicht. Toen het woord er nog onder
     stond droeg het cijfer de kaart; nu de woorden onder de rij staan is het
     een aanduiding, en hoeft het niet meer te schreeuwen. */
  font-size: 1.2rem;
  font-weight: 400;
  line-height: var(--sl-title-leading);
  letter-spacing: var(--sl-title-tracking);
  color: var(--title-color);
}
.scale__btn[aria-pressed="true"] .scale__num { color: var(--sl-white); }

.scale__label {
  font-size: var(--sl-small-font-size);
  line-height: 1.2;
  color: inherit;
}

/* De profielvragen (teamgrootte, jaaromzet) gebruiken dezelfde tegels als de
   antwoordschaal, maar zonder cijfer: daar is het label zelf het antwoord.
   Het label krijgt daarom het gewicht dat bij de stelling het cijfer had. */
.scale--choice .scale__btn { justify-content: center; }

.scale__choice {
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--sl-title-tracking);
  color: var(--title-color);
}
.scale__btn[aria-pressed="true"] .scale__choice { color: var(--sl-white); }

/* De naamvraag: één veld met de knop ernaast, op de breedte van een tekstkolom
   zodat het niet als een formulier oogt maar als een vraag met een antwoord. */

/* De kop van een stap opent het scherm, en dat is in dit ontwerpsysteem een
   serif-moment — net als de kop van de uitslag en de regel boven de knop in
   het CTA-blok. Op 500 in plaats van de 600 die het systeem voor de hero
   aanhoudt: deze kop draagt een stap, geen pagina. */
.scan-heading {
  font-family: var(--sl-font-serif);
  font-weight: 500;
  /* Het accentblauw van het systeem in plaats van --title-color. Op het witte
     scanscherm haalt dat 9,0:1 tegen de achtergrond, ruim boven de 4,5 die
     WCAG AA vraagt, en het is hetzelfde blauw als de stapteller erboven. */
  color: var(--sl-blue);
}

/* Om en om een vlak onder de stelling, zodat te zien is waar de ene ophoudt
   en de volgende begint. Bij drie stellingen per stap is dat de middelste. De
   tegels gaan daarbinnen nog een tint donkerder, anders vallen ze weg tegen
   het vlak waar ze op staan. */
.stelling--vlak {
  /* Alleen verticale ruimte: horizontaal zou de tekst verspringen ten opzichte
     van de stellingen erboven en eronder. */
  padding: 2rem 0;
  background: var(--sl-grey-100);

  /* Het vlak loopt door tot de schermranden, terwijl het blok zelf in de
     tekstkolom blijft staan. Dat gaat met een slagschaduw zonder vervaging die
     zijwaarts doorloopt; clip-path knipt hem boven en onder weer af.
     
     Geen negatieve marges met 100vw: die maat telt op Windows de scrollbalk mee
     en duwt de pagina opzij. Een slagschaduw beïnvloedt de opmaak niet en kan
     dus ook niets laten schuiven. */
  box-shadow: 0 0 0 100vmax var(--sl-grey-100);
  clip-path: inset(0 -100vmax);
}
.stelling--vlak .scale__btn { background: var(--sl-grey-200); }

/* De gekozen tegel blijft donkerblauw met witte tekst, ook hier. De regel
   hierboven heeft evenveel gewicht als de gekozen staat en staat later in dit
   bestand, dus zonder deze twee regels wint het grijs. */
.stelling--vlak .scale__btn[aria-pressed="true"] { background: var(--sl-ink); }
.stelling--vlak .scale__btn:hover:not([aria-pressed="true"]) {
  background: var(--sl-grey-250);
}

/* Drie stellingen op één stap. Elke stelling is een kop met zijn eigen
   antwoordrij eronder.

   De stelling zelf staat een maat lager dan de schaal van .sl-title--5 en op
   het normale gewicht: hij staat onder een serif-kop van 2em, en drie vette
   blokken tekst onder elkaar zouden met die kop om aandacht vechten. De ruimte
   eronder en tussen de stellingen is ruim, zodat je in één blik ziet welke
   antwoordrij bij welke stelling hoort. */
.stelling + .stelling { margin-top: 4.5rem; }
.stelling__tekst {
  margin: 0;
  font-size: 1.25em;
  font-weight: 400;
  /* .sl-title zet de leading en de tracking van een display-kop: op 0,98 en
     met negatieve letterafstand. Dat klopt voor een kop van 2em die op één
     regel staat, maar niet voor een stelling van twee regels op 1,25em — daar
     plakken de regels dan aan elkaar. */
  line-height: 1.35;
  letter-spacing: 0;
}
.stelling .scale { margin: 1.5rem 0 0; }

/* Stappen met tekstvelden: de profielstap (voornaam, achternaam, bedrijf, rol)
   en de bedrijfsstap. Twee velden naast elkaar, daaronder de knop. */
.scan-fields { max-width: 40rem; margin: 2.5rem 0 2rem; }
.scan-fields__row {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  /* Verticaal ruimer dan horizontaal: tussen twee regels velden moet het oog
     een sprong maken, tussen twee velden naast elkaar niet. */
  column-gap: 1rem;
  row-gap: 1.2rem;
}
/* De bedrijfsstap zet twee ongelijksoortige dingen onder elkaar: een getalveld
   en een rij keuzetegels. Naast elkaar zou de omzetrij in een halve kolom
   geperst worden, dus krijgt elk een eigen regel over de volle breedte. Het
   getalveld blijft daarbinnen smal; een invoerveld voor "12" hoeft niet mee te
   groeien met de tegels eronder. */
.scan-fields--bedrijf { max-width: none; }
.scan-fields--bedrijf .scan-fields__row { grid-template-columns: minmax(0, 1fr); }
.scan-fields--bedrijf .scan-fields__row + .scan-fields__row { margin-top: 2rem; }
/* Het aantal en de omzet staan onder elkaar en horen bij elkaar: één vraag over
   de omvang van het bedrijf. Daarom even breed en even hoog als de omzettegels
   eronder, met hetzelfde vlak en dezelfde tekstmaat — een getal in een smal
   vakje boven vier brede tegels leest als twee losse vragen. */
.scan-fields--bedrijf .scan-field:not(.scan-field--breed) { max-width: none; }
.scan-fields--bedrijf .sl-input {
  /* Dezelfde opbouw als .scale__btn: padding boven en onder plus één regel. */
  padding-block: var(--sl-offset-block-top);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: var(--sl-title-tracking);
}
.scan-field--breed .scale { margin: 0.875rem 0 0; }
.scan-fields__actions { margin-top: 1.25rem; }
.scan-field .field__label { margin-bottom: 0.375rem; }
.scan-field .field__error { margin-top: 0.375rem; }

/* De velden staan op het witte scanscherm, waar --form-border zelf wit is: daar
   zouden ze randloos in de achtergrond verdwijnen. Ze krijgen daarom het vlak
   van de antwoordtegels, zodat deze vragen bij de rest van de scan horen. */
.scan-field .sl-input {
  background: var(--block-background);
  border-color: transparent;
}
.scan-field .sl-input:focus {
  background: var(--block-background);
  border-color: var(--title-color);
}
.scan-field.field--invalid .sl-input { border-color: var(--sl-blue); }

/* Allebei de velden staan: de stap is af en gaat vanzelf door. Eén korte
   bevestiging, zodat het scherm niet uit het niets wegspringt — dezelfde
   gedachte als de tegel die donkerblauw wordt voordat een stellingstap
   doorgaat. De rand zet aan in het accentblauw en het vlak licht even op.

   Wie beweging heeft uitgezet houdt de rand; die zegt hetzelfde zonder puls. */
.scan-field--klaar .sl-input {
  border-color: var(--sl-blue);
  animation: sl-veld-klaar 0.26s ease-out;
}

@keyframes sl-veld-klaar {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.985); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .scan-field--klaar .sl-input { animation: none; }
}

@media only screen and (max-width: 640px) {
  .scan-fields__row { grid-template-columns: minmax(0, 1fr); }
}

/* Op een smal scherm stapelen de omzettegels: daar is het label het antwoord,
   en vier omzetklassen naast elkaar passen niet. De antwoordschaal van de
   stellingen doet dat juist níét — die blijft een rij van vijf cijfers, zie
   verderop. */
@media only screen and (max-width: 768px) {
  .scale--choice {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .scale--choice .scale__btn {
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 0.875rem;
    padding: 0.875rem 1.125rem;
  }
  .scale__choice { font-size: 1rem; }
}

/* De uitslagpagina zonder kijkpoort opent met een begroeting in plaats van een
   opdracht. Die staat gecentreerd boven de video: er volgt geen instructie op,
   dus er is ook geen leesrichting die links moet beginnen. De variant mét
   poort houdt zijn tekst links staan. */
.video-sectie--gezien .sl-title,
.video-sectie--gezien .sl-text {
  text-align: center;
}

/* De antwoordschaal van een stelling heeft overal dezelfde vorm: vijf kaarten
   naast elkaar met alleen een cijfer, en de uiteinden van de schaal eronder —
   "Bijna nooit" links, "Bijna altijd" rechts. Die twee spannen de schaal op en
   de cijfers ertussen lezen vanzelf.

   Eerder stonden de vijf woorden in de kaarten, en op mobiel de kaarten onder
   elkaar. Dat was ruim toen elke stelling een eigen scherm had; met drie
   stellingen op één stap werd het een lange scroll, en vijf woorden onder vijf
   cijfers leest het oog toch niet stuk voor stuk. */
.scale-uiteinden {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
  font-size: var(--sl-small-font-size);
  line-height: 1.2;
  color: var(--sl-muted);
}
.scale-uiteinden span:last-child { text-align: right; }

/* Weggeschoven en niet weggehaald: het woord hoort bij de naam die een
   schermlezer voorleest ("3 Regelmatig"). Zou het weg zijn, dan blijft er een
   knop over die alleen "3" heet en is de schaal niet meer te horen. */
.stelling .scale__label {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Zonder woord draagt de kaart alleen het cijfer, en staat dat gecentreerd.
   De hoogte komt uit deze padding in plaats van uit --sl-offset-block-top
   (1,6rem), die op een blok met twee regels sloeg. */
.stelling .scale__btn {
  align-items: center;
  justify-content: center;
  padding: 0.75rem 1.125rem;
}

@media only screen and (max-width: 768px) {
  .stelling__tekst { font-size: 1.125em; }
  .stelling + .stelling { margin-top: 3rem; }
  .stelling .scale { gap: 0.375rem; margin-top: 1rem; }

  /* Vijf kaarten naast elkaar op 375 px: de zijkanten moeten smal, anders
     komen ze niet uit. Alleen een cijfer hoeft er toch in te staan. */
  .stelling .scale__btn { padding: 0.75rem 0.25rem; }
  .scale-uiteinden { font-size: 0.8125rem; }
}

/* Terugknop linksonder een stap: altijd de laatste regel van de sectie, aan
   de linkerkant van de contentkolom. Ruim losgezet van de keuze erboven, zodat
   er geen lijn nodig is om hem te scheiden. */
/* Navigatie onder een stap: terug links, vooruit rechts. Staat er alleen een
   terugknop, dan houdt space-between die gewoon links. */
.step-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-top: 4.5rem;
}

/* Het systeem schuift een pijl bij hover mee. Dat geldt hier voor de
   SVG-iconen in knoppen; bij een terugknop gaat de beweging de andere kant op. */
.sl-button .icon { transition: transform var(--sl-transition); }
.sl-button:hover .icon,
.sl-button:focus .icon { transform: translateX(0.1875rem); }
.sl-button--back:hover .icon,
.sl-button--back:focus .icon { transform: translateX(-0.1875rem); }

/* ---------------------------------------------------------------------------
   4. FORMULIER
   ------------------------------------------------------------------------ */

.field { margin-bottom: var(--sl-offset-block-top); }

.field__label {
  display: block;
  margin-bottom: 0.5rem;
  color: var(--title-color);
  font-size: var(--sl-small-font-size);
  font-weight: 500;
  letter-spacing: var(--sl-title-tracking);
}

.sl-select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 2.5rem;
}

/* Het pijltje hangt aan het omhulsel, niet aan het veld. Als achtergrondlaag
   op de select zelf draait het mee in de background-overgang die het systeem
   op formuliervelden zet, en dan kan het bij focus verspringen. Hier staat het
   los van de achtergrond en kan er niets aan bewegen. */
.sl-select-wrap {
  position: relative;
  display: block;
  color: var(--form-color);
}
.sl-select-wrap::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 1rem;
  width: 0;
  height: 0;
  border-left: 0.3rem solid transparent;
  border-right: 0.3rem solid transparent;
  border-top: 0.3rem solid currentColor;
  transform: translateY(-50%);
  pointer-events: none;
}

/* Alleen de kleur en de rand hoeven te bewegen; de overgang op de hele
   background-eigenschap neemt ook de achtergrondlagen mee. */
.sl-input,
.sl-select,
.sl-textarea {
  transition: background-color var(--sl-transition), border-color var(--sl-transition);
}

.field--invalid .sl-input,
.field--invalid .sl-select { border-color: var(--sl-blue); }

.field__error {
  display: none;
  margin: 0.5rem 0 0;
  color: var(--sl-blue);
  font-size: var(--sl-small-font-size);
}
.field--invalid .field__error { display: block; }
section.sl-theme-dark-blue .field__error { color: var(--sl-lavender); }

/* In een eigen grijs kader. De velden erboven zijn wit op een lichtgrijze
   pagina; dit is geen invoerveld maar een akkoord, en dat mag als een eigen
   blokje leesbaar zijn in plaats van als een losse regel tekst onder het
   formulier. De rand doet het werk — het grijs zelf scheelt maar weinig van
   de pagina eronder. */
.consent {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 0.5rem;
  padding: 1rem 1.125rem;
  border: 1px solid var(--sl-border-block);
  border-radius: var(--sl-radius);
  background: var(--sl-grey-150);
}
.consent input {
  flex: none;
  width: 1.275rem;
  height: 1.275rem;
  /* Meeschuiven met de maat, zodat het vakje op de eerste regel van het label
     uitgelijnd blijft staan. */
  margin: 0.1rem 0 0;
  accent-color: var(--sl-ink);
}
.consent label {
  color: var(--color);
  font-size: var(--sl-small-font-size);
  line-height: 1.45;
}

/* Links binnen lopende tekst. Het design system stijlt alleen a binnen
   .sl-text; de consenttekst is een label, dus die valt daarbuiten. */
.inline-link {
  color: var(--link-color);
  text-decoration: underline;
  transition: color 0.2s ease;
}
.inline-link:hover { color: var(--link-color-hover); }

/* De terugknop naast de knop die verstuurt. Terug staat links en is de stille
   van de twee: wie hier is wil vooruit, en de witte knop hoort het zwaartepunt
   te houden. */
.form-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-top: 2rem;
}

/* ---------------------------------------------------------------------------
   DE UITSLAG BEPALEN

   Eén scherm tussen de laatste vraag en het formulier. Het rekenen zelf duurt
   niets; dit is de tijd om te laten zien dát er iets gebeurt met wat er net is
   ingevuld. Zie BEREKENEN_MS in js/app.js.
   ------------------------------------------------------------------------ */
.berekenen-stap {
  display: flex;
  align-items: center;
  min-height: calc(100vh - var(--sl-balk-hoogte));
  min-height: calc(100svh - var(--sl-balk-hoogte));
}

.berekenen {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  width: 100%;
}

.berekenen__ring {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  /* Drie kwart ring in gedempt wit, één kwart in het goud van de accenten: zo
     is te zien dát hij draait zonder dat het een rad wordt. */
  border: 3px solid hsla(0, 0%, 100%, 0.22);
  border-top-color: var(--sl-gold);
  animation: sl-draai 0.9s linear infinite;
}

.berekenen__tekst {
  margin: 0;
  color: var(--sl-white);
  font-size: var(--sl-small-font-size);
  letter-spacing: 0.02em;
}

@keyframes sl-draai {
  to { transform: rotate(360deg); }
}

/* Wie beweging heeft uitgezet krijgt de ring stil. De regel eronder zegt al wat
   er gebeurt, en het scherm is na 0,9 seconde toch weg. */
@media (prefers-reduced-motion: reduce) {
  .berekenen__ring { animation: none; }
}

.form-notice {
  padding: var(--sl-offset-block);
  border: 1px solid var(--block-border-color, var(--border-color));
  border-radius: var(--sl-radius);
  margin-bottom: var(--sl-offset-block-top);
  font-size: var(--sl-small-font-size);
}

/* ---------------------------------------------------------------------------
   5. VIDEO EN KIJKPOORT
   ------------------------------------------------------------------------ */

.video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--sl-radius);
  background: var(--sl-ink);
  overflow: hidden;
  margin-bottom: var(--sl-offset-block-top);
}
.video-frame > iframe,
.video-frame > div {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Aftelbalk, alleen voor de testfase. Zie videoGate.showCountdown. */
.video-frame--attached { margin-bottom: 0.5rem; }

/* De balk is in zijn geheel donker; de vulling is de lichtere laag die naar
   links wegloopt. Zo staat het label altijd op een donkere ondergrond en kan
   het gewoon wit zijn, ook wanneer de vulling er al voorbij is. */
.gate-bar {
  position: relative;
  width: 100%;
  height: 2rem;
  border-radius: var(--sl-radius);
  background: var(--sl-ink);
  overflow: hidden;
  margin-bottom: var(--sl-offset-block-top);
}

.gate-bar__fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  background: var(--sl-gold);
  transition: width var(--sl-transition);
}

.gate-bar__label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sl-small-font-size);
  font-weight: 500;
  font-variant-numeric: tabular-nums;

  /* Wit over zowel het goud als het donkerblauw eronder. Geen blendmodus meer:
     die maakte het label donker zodra de vulling er voorbij was. */
  color: var(--sl-white);
}

/* Gat in het design system: .sl-block--heavy zet wél de gewone knoptokens om,
   maar niet die van de CTA-variant. Een sl-button--cta in een zwaar blok krijgt
   daardoor exact dezelfde vulling als het blok zelf (gemeten contrast 1,00) en
   is alleen nog aan zijn tekst te herkennen. Hier keert hij om, net als op de
   donkere secties elders. */
section .sl-block--heavy .sl-button--cta {
  --button-cta-background: var(--sl-white);
  --button-cta-color: var(--sl-ink);
  --button-cta-hover-background: var(--sl-grey-150);
  --button-cta-hover-color: var(--sl-ink);
}

/* Het agendapictogram staat vóór de tekst. De systeemregel schuift een icoon
   bij hover naar rechts; dat is bedoeld voor een pijl áchter de tekst en zou een
   voorstaand pictogram tegen het label aan duwen. */
.cta-button .icon { transform: none; }
.cta-button:hover .icon,
.cta-button:focus .icon { transform: none; }

/* De tweede CTA, onder de slotvraag in het donkere blok. */
.call-block__cta { margin: var(--sl-offset-block-top) 0 0; }

.gate { margin-top: var(--sl-offset-block-top); }
/* De uitslagknop staat op de volle breedte van de video eronder en is blauw:
   het is de enige actie op dit scherm en mag er niet als één van meerdere
   knoppen uitzien. De CTA-tokens gaan hier om, niet de kleur zelf, zodat de
   knop de hover- en focusregels van het systeem blijft volgen. */
.gate__reveal {
  display: flex;
  width: 100%;
  animation: sl-fade 0.4s ease-out both;

  --button-cta-background: var(--sl-blue);
  --button-cta-color: var(--sl-white);
  --button-cta-hover-background: var(--sl-blue-hover);
  --button-cta-hover-color: var(--sl-white);
}

@keyframes sl-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---------------------------------------------------------------------------
   6. UITSLAG
   ------------------------------------------------------------------------ */

/* Gat in het design system: op de donkere thema's blijft --block-color-active
   op --sl-ink staan, waardoor een kop binnen een blok donkerblauw op een
   donker vlak zou komen. Hier gezet voor elk blok, niet alleen deze kaart.
   
   Let op de section-selector. De <body> draagt ook een thema-class, voor de
   kop van de pagina. Zonder die beperking zou deze regel ook gelden voor een
   blok in een lichte sectie op een pagina waarvan de kop donker is, en werd
   een kop daar wit op wit. */
section.sl-theme-dark-blue .sl-block,
section.sl-theme-dark-blue-to-dark-grey .sl-block,
section.sl-theme-grey-blue .sl-block {
  --block-color: var(--sl-muted-dark);
  --block-color-active: var(--sl-white);
}

/* De uitslagkop opent de pagina in serif. Samen met het CTA-blok onderaan
   zijn dat de twee serif-momenten van dit scherm. */
.result__heading {
  margin: 0 0 3rem;
  text-align: center;
  /* Lichter dan de 600 die het systeem voor de hero-serif aanhoudt. */
  font-weight: 500;
}

/* --- Bevestiging na een aanvraag ---------------------------------------------
   Eén scherm met één boodschap, dus alles gecentreerd en de regellengte kort
   gehouden. De terugknop staat naast de eventuele herkansing en is bewust de
   neutrale knop: terugkeren is geen actie die om nadruk vraagt. */
.bevestiging {
  max-width: 34rem;
  margin: 0 auto;
  padding: 2rem 0 1rem;
  text-align: center;
}
.bevestiging__kop { margin: 0 0 1rem; font-weight: 500; }
.bevestiging__tekst { margin: 0 auto; max-width: 30rem; }

/* De knop op de tussenpagina. Wit op het donkerblauw van de sectie — de
   CTA-knop van het systeem is daar donker, en dan valt hij weg tegen het vlak
   waar hij op staat. Ink op wit haalt 17:1. */
/* Het kader op de aanvraagpagina: wat er gebeurt als je klikt, met de knop
   erin. Een tint lichter dan de sectie — --sl-block-dark is in dit systeem het
   blok binnen een donkere sectie. */
.aanvraag__kader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.5rem;
  max-width: 30rem;
  margin: 2.5rem auto 0;
  padding: 2rem 1.75rem;
  border-radius: var(--sl-radius);
  background: var(--sl-block-dark);
}

.aanvraag__kadertekst {
  margin: 0;
  /* Wit haalt hier 9,8:1; gedempt wit zou onder de 4,5 duiken op dit vlak. */
  color: var(--sl-white);
  font-size: var(--sl-small-font-size);
  line-height: 1.5;
}

.aanvraag__knop {
  --button-cta-background: var(--sl-white);
  --button-cta-color: var(--sl-ink);
  --button-cta-hover-background: var(--sl-grey-150);
  --button-cta-hover-color: var(--sl-ink);

  border: 0;
  box-shadow: none;
}
.aanvraag__knop.is-bezig { opacity: 0.7; pointer-events: none; }

.bevestiging__acties {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-top: 2rem;
}

/* Het pijltje wijst terug, dus het staat vóór de tekst. */
.bevestiging__terug .icon { margin-right: 0.125rem; }

/* Zolang de aanvraag onderweg is. Geen aparte tekst: de knop is uitgeschakeld
   en dat is samen met de dimming genoeg signaal voor de seconde die het duurt. */
.cta-button.is-bezig { opacity: 0.65; cursor: progress; }

/* De keuzelijst bij de profielvraag. Het ontwerpsysteem geeft .sl-select al
   dezelfde maten als een tekstveld, dus de twee kolommen blijven even hoog. Wat
   het systeem overlaat is de pijl: die tekent elke browser anders, op macOS als
   een blokje met twee driehoekjes en op Windows weer anders, en naast een strak
   invoerveld valt dat uit de toon. Vandaar appearance:none en een eigen pijl.
   Die erft currentColor, dus hij volgt de tekstkleur van het thema. */
.sl-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2.75rem;
  cursor: pointer;
}
/* Zonder dit blijft in Firefox de stippellijn van de focusring op de tekst staan. */
.sl-select:-moz-focusring { color: transparent; text-shadow: 0 0 0 var(--form-color); }

.select-omhulling { position: relative; display: block; }
.select-omhulling::after {
  content: '';
  position: absolute;
  top: 50%;
  right: 1.125rem;
  width: 0.5rem;
  height: 0.5rem;
  margin-top: -0.375rem;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  opacity: 0.6;
  pointer-events: none;      /* de klik hoort bij de keuzelijst eronder */
}

/* --- Uitleg bij het percentage en de bandterm --------------------------------
   Ingeklapt is het niet meer dan een i in een cirkel, vlak achter het
   percentage. De ballon eronder draagt de koppen; hier hoeft geen tekst te
   staan die op elke kaart hetzelfde is. */
/* De bandterm met de uitlegknop ernaast. Ze staan op één regel maar in twee
   gewichten: de term is het label bij het getal, de knop is een aanbod. */
.world__band {
  display: flex;
  /* Op het midden en niet op de basislijn: de twee verschillen in grootte, en
     op de basislijn hangt het kleine label dan onderaan. */
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem 0.625rem;
}

/* Een vijfde groter dan de rest van de kleine tekst: dit is het woord bij het
   getal erboven, geen bijschrift. */
.world__band-term {
  font-size: 1.05rem;
  line-height: 1.25;
}

/* Wit en met een eigen woordje erbij: zonder tekst is een cirkeltje makkelijk
   over het hoofd te zien, en dit is het enige op de kaart dat om een klik
   vraagt. Kleiner dan de bandterm, zodat het er niet mee concurreert. */
.uitleg-knop {
  display: inline-flex;
  align-items: center;
  gap: 0.3125rem;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--sl-white);
  font-family: var(--sl-font-sans);
  font-size: 0.6875rem;
  line-height: 1.2;
  text-align: left;
  cursor: pointer;
}
.uitleg-knop .icon { flex: 0 0 auto; line-height: 0; }
.uitleg-knop .icon svg { width: 14px; height: 14px; }

/* Het cirkeltje blijft vol wit, het zinnetje ernaast is gedempt. Zo is het
   duidelijk aanklikbaar zonder dat het woord om aandacht vraagt naast de
   bandterm. Gedempt tot 0,6: dat houdt op dit vlak nog 6,1:1 over, ruim boven
   wat voor tekst van elf pixels nodig is. */
.uitleg-knop__label {
  opacity: 0.6;
  transition: opacity var(--sl-transition);
}
.uitleg-knop:hover .uitleg-knop__label,
.uitleg-knop:focus-visible .uitleg-knop__label { opacity: 1; }

/* De ballon hangt onder <body> met vaste positionering, dus hij erft niets van
   de kaart. Alle kleuren staan hier daarom voluit: op de donkere sectie zou een
   geërfde tekstkleur wit worden op dit lichte vlak. */
.uitleg-ballon {
  position: fixed;
  z-index: 60;                   /* boven de cookiebanner (30) en alles daaronder */
  box-sizing: border-box;
  max-width: calc(100vw - 1.5rem);
  padding: 0.875rem 1rem;
  border: 1px solid var(--sl-grey-150);
  border-radius: var(--sl-radius);
  background: var(--sl-white);
  box-shadow: 0 6px 24px rgba(6, 21, 37, 0.18);
  color: var(--sl-ink);
  animation: sl-fade 0.15s ease-out both;
}

.uitleg-ballon__deel + .uitleg-ballon__deel { margin-top: 0.75rem; }

.uitleg-ballon__kop {
  margin: 0 0 0.25rem;
  font-family: var(--sl-font-sans);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.35;
  color: var(--sl-ink);
}
.uitleg-ballon__tekst {
  margin: 0;
  font-family: var(--sl-font-sans);
  font-size: 0.8125rem;
  line-height: 1.5;
  color: var(--sl-ink);
}

/* Het pijltje is een gekanteld vierkantje met dezelfde rand en vulling als de
   ballon. Twee van de vier randen gaan eruit, anders loopt er een streepje
   dwars door de ballon heen. De positie wordt in js gezet: de ballon schuift
   aan de schermrand weg onder de knop, en het pijltje moet dan alsnog naar de
   knop blijven wijzen. */
.uitleg-ballon__pijl {
  position: absolute;
  width: 10px;
  height: 10px;
  margin-left: -5px;
  background: var(--sl-white);
  border: 1px solid var(--sl-grey-150);
  transform: rotate(45deg);
}
.uitleg-ballon--onder .uitleg-ballon__pijl {
  top: -6px;
  border-right: 0;
  border-bottom: 0;
}
.uitleg-ballon--boven .uitleg-ballon__pijl {
  bottom: -6px;
  border-left: 0;
  border-top: 0;
}

@media (prefers-reduced-motion: reduce) {
  .uitleg-ballon { animation: none; }
}

/* De introregel boven de kaarten. Die hoort bij de kop, dus krimpt de ruimte
   onder de kop zodra hij er staat: de 3rem daar is afstand tot de kaarten, niet
   tot een regel die er direct bij hoort. Laat marketing de regel leeg, dan valt
   de klasse weg en houdt de kop zijn oude ruimte. */
.result__heading--met-intro { margin-bottom: 1rem; }

.cards-intro {
  margin: 0 auto 3rem;
  max-width: 38rem;
  text-align: center;
}

/* Kaart per wereld. De ring vervangt de rechte balk: hoe voller de ring,
   hoe groter het aandeel van die wereld. */
.worlds {
  margin: 0 0 3rem;
  padding: 0;
  list-style: none;
  /* Dichter op elkaar dan de standaard kolomafstand van het systeem, zodat de
     kaarten zelf breder worden. */
  gap: 1.25rem;
}

/* De drie werelden horen als één geheel gelezen te worden: alle drie naast
   elkaar, of alle drie onder elkaar. De tussenstand van het systeem zet er twee
   op een rij en laat de derde daaronder alleen staan, alsof die minder telt.
   Onder 1024px — waar drie kolommen te smal worden — dus meteen naar één. */
@media only screen and (max-width: 1024px) {
  .worlds { grid-template-columns: 1fr; }
}

.world {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  /* Zelfde vlak als het kader op de landingspagina. */
  background: var(--sl-slate);
}
.world:hover { background: var(--sl-slate); }   /* geen hover-effect */

/* Ring en percentage staan naast elkaar. De ruimte onder het blok zat eerst op
   de ring zelf; die hoort nu bij de rij, anders duwt hij het getal mee omlaag. */
.world__kop {
  display: flex;
  align-items: center;
  gap: 1.125rem;
  margin-bottom: 1.5rem;
}

.world__mark {
  position: relative;
  flex: 0 0 auto;
  width: 5.5rem;
  height: 5.5rem;
}

/* Het getal waar de kaart om draait: serif, groot, in de titelkleur. De
   bandterm eronder blijft klein en goud, zodat de twee niet om dezelfde
   aandacht vragen. */
.world__pct {
  margin: 0;
  font-family: var(--sl-font-serif);
  font-size: 2.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.015em;
  color: var(--title-color);
  font-variant-numeric: tabular-nums;
}

.world__ring svg {
  display: block;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);           /* begint bovenaan */
}
.world__ring-track,
.world__ring-fill {
  fill: none;
  stroke-width: 4;
}
/* De track moet duidelijk donkerder zijn dan de kaart, anders leest de
   gevulde boog niet af. */
.world__ring-track { stroke: var(--sl-grey-200); }
section.sl-theme-dark-blue .world__ring-track,
section.sl-theme-grey-blue .world__ring-track { stroke: var(--sl-block-dark); }
.world__ring-fill {
  stroke: var(--title-color);
  stroke-linecap: round;
  transition: stroke-dashoffset 0.35s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.world__icon {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--title-color);
}
.world__icon svg { display: block; width: 2.925rem; height: 2.925rem; }

.world__band {
  margin: 0 0 0.5rem;
  color: var(--sl-gold);
  font-size: var(--sl-small-font-size);
  font-weight: 500;
  letter-spacing: var(--sl-title-tracking);
}

.world__name { margin: 0 0 0.75rem; }

.world__text {
  margin: 1rem 0 0;
  font-size: var(--sl-small-font-size);
}

.world__band { font-variant-numeric: tabular-nums; }

.reading-note {
  margin: 0 auto;
  max-width: 38rem;
  text-align: center;
}

/* Narratief links, CTA rechts.
   Gevraagde maten: 730px tekst, 130px tussenruimte, 400px CTA. De rechter
   kolom staat vast op 25rem, de linker neemt de rest, en het geheel is
   begrensd op de som daarvan. Daardoor krimpt alleen de tekstkolom mee en
   blijft de verhouding kloppen tot het onder 1024px onder elkaar valt. */
.result-body,
.result-footer {
  /* Dezelfde breedte en centrering, anders ligt de voettekst links buiten de
     tekstkolom omdat het raster wél gecentreerd is binnen de brede container. */
  width: 100%;
  max-width: 78.75rem;
  margin-inline: auto;
}

/* Twee kolommen: het verhaal links, de uitnodiging rechts.
   
   In de opbouw staat de kaart vóór de tekst. Dat is de volgorde op een smal
   scherm — daar hoort de uitnodiging bovenaan — en het raster zet hem op een
   breed scherm rechts. Andersom zou betekenen dat de kaart op mobiel helemaal
   onderaan belandt, na een verhaal van acht alinea's. */
.result-body {
  display: grid;
  gap: 2.5rem;
  max-width: none;
}
.result-cta { min-width: 0; }

/* Twee kolommen zodra ze er allebei in passen. De kaart is 22rem: de knop erin
   draagt "Vraag Straight-Line Diagnose aan" en die regel mag niet afbreken —
   met het pictogram en de binnenruimte erbij is daar 271px voor nodig, en 22rem
   laat 288px over. Met de sectiemarges erbij blijft er vanaf zo'n 900px genoeg
   over voor een leesbare tekstkolom ernaast. Daaronder vallen ze terug op
   elkaar, met de kaart bovenaan — dan heeft de knop de volle breedte. */
@media only screen and (min-width: 900px) {
  .result-body {
    grid-template-columns: minmax(0, 1fr) 22rem;
    gap: 3rem;
    align-items: start;
  }
  .result-body__text { grid-column: 1; grid-row: 1; }
  .result-cta {
    grid-column: 2;
    grid-row: 1;
    /* Loopt mee tijdens het lezen. De balk bovenaan plakt ook, dus de kaart
       begint eronder en niet eronderdoor. */
    position: sticky;
    top: calc(var(--sl-balk-hoogte) + 2rem);
  }
}

@media only screen and (min-width: 1200px) {
  .result-body { gap: 4rem; }
}

/* De kaart is gelijk aan die onderaan de pagina: hetzelfde donkere vlak, wit,
   met de gouden vinkjes. Alleen de breedte verschilt. Geen eigen kleuren hier
   dus — die zouden op twee plekken uit de pas gaan lopen zodra er iets aan de
   kaart verandert. */

.result-body__text > :first-child { margin-top: 0; }
.result-body__text > :last-child { margin-bottom: 0; }


/* Tekststijlen overgenomen van de webinarpagina op straightlineleadership.com,
   daar uitgelezen:
     sectiekop   40px / 39.2px / 400 / -0.4px  / #061525
     tussenkop   24px / 23.52px / 400 / -0.24px / #061525
     broodtekst  16px / 22px    / 400          / #061525 of #7e7b8b
     alineamarge 16px
   Het onderscheid tussen die twee broodtekstkleuren draagt daar de hiërarchie:
   de inleidende alinea staat in de koptekstkleur, het ondersteunende deel in
   het grijs. Geen groter formaat, geen zwaarder gewicht. */
/* Geen eigen maximumbreedte: de alinea's lopen net zo breed als de kadertekst,
   de spanningsregel en de sluitvraag, zodat het hele blok één kolom vormt. */
.narrative > p { margin: 1rem 0; }
.narrative > p:first-child { margin-top: 0; }
.narrative > p:last-child { margin-bottom: 0; }

/* De openingszin is een kop en krijgt zijn kleur en marges van .sl-title. */

/* De korte tussenregels uit het bronbestand: groter dan de broodtekst en in
   het accentblauw. Het systeem houdt blauw voor links, eyebrows en CTA-hover;
   dit is een bewuste uitbreiding daarvan. */
section .narrative p.narrative__beat {
  color: var(--sl-blue);
  font-size: 1.25rem;
  letter-spacing: var(--sl-title-tracking);
  line-height: var(--sl-title-leading);
  margin: 1.5rem 0;
}

/* Wit vlak zonder rand; .sl-block levert op een lichtgrijze sectie het wit. */
.narrative__note { margin-top: 2rem; }
.narrative__note:hover { background: var(--block-background); }   /* geen hover */
.narrative__note .sl-text { font-size: var(--sl-body-size); }

/* Op straightlineleadership.com staat deze stap op gewicht 400; het
   meegeleverde stijlblad zet .sl-title--5 op 500. Hier de live waarde. */
.tension { margin: 2.5rem 0; font-weight: 400; }

/* Sectie 3. De alinea staat vrij, zonder kader: het is een toelichting, geen
   actie. Daaronder het donkere blok met de uitnodiging. sl-block--heavy geeft
   op een licht vlak het omgekeerde contrast; de radius komt van .sl-block. */
.authority { margin: 2.5rem 0 0; }

.call-block {
  margin: 2.5rem 0 0;
  /* Ruimer dan de standaard blokpadding, zodat de uitnodiging echt in het
     kader staat. Horizontaal blijft de waarde van het systeem. */
  padding: 2.75rem var(--sl-offset-block-side);
}
.call-block:hover { background: var(--heavy-block-background); }  /* geen hover */

/* De kicker binnen het donkere blok. Het thema van de sectie is licht, dus
   --subtitle-color staat hier op blauw, en dat haalt op dit vlak 2,0:1. Goud
   haalt 6,1:1. Vandaar de uitzondering, alleen hier. */
.call-block .sl-eyebrow { color: var(--sl-gold); }


/* Broodtekst binnen een omgekeerd blok moet licht zijn. De regel die de kleur
   voor lichte secties terugzet is even specifiek, dus deze staat erna. */
section .sl-block--heavy .sl-text { color: var(--heavy-block-color-soft); }


/* --- De uitnodiging, over de volle breedte ------------------------------------
   Overgenomen van de eerste sectie op straightlineleadership.com/straight-line-
   diagnose/, daar uitgemeten in plaats van nagetekend:

     binnenbreedte  1024px, twee gelijke kolommen, 80px ertussen
     kop            48px / 47.04px / 400 / wit           / 20px eronder
     onderkop       32px / 31.36px / 400 / #b5b9be       / 25.6px boven en onder
     body           16px / 22px    / 400 / #b5b9be
     kaart          #1f2d3b, 8px rondom, radius 5px
     beeldvlak      24px rondom, radius 5px, knop onderin
     knop           wit op #061525, 14px / 500, 12px 16px, radius 5px
     lijst          20px 24px, 4px tussen regels, bolletje 16px op 28px inspringing

   De kop is hier bewust schreefloos. Het ontwerpsysteem zet op titels de serif;
   op die pagina staat deze kop in dezelfde letter als de rest. */
.aanbod {
  display: flex;
  gap: 32px 80px;
  /* Bovenaan uitlijnen, niet centreren. De tekstkolom is korter dan de kaart,
     en bij centreren zakt hij naar het midden met een gat erboven. */
  align-items: flex-start;
  width: 100%;
  max-width: 64rem;               /* 1024px */
  margin-inline: auto;
  padding: 2.5rem 0;
}
.aanbod > * { flex: 1 1 0; min-width: 0; }

@media (max-width: 62rem) {
  .aanbod { flex-direction: column; align-items: stretch; padding: 1.5rem 0; }
}

/* Een zetje omlaag, zodat de kop niet kaarsrecht op de bovenrand van de kaart
   begint. Alleen zolang de twee naast elkaar staan; gestapeld staat de tekst al
   bovenaan en zou het een gat worden.

   Bewust als min-width en niet als tegenregel in de max-width hierboven: die
   media query staat eerder in dit bestand, dus een gelijke selector daar verliest
   het van deze. Dat ging de eerste keer mis en bleef op mobiel gewoon staan. */
@media (min-width: 62.0625rem) {
  .aanbod__tekst { padding-top: 2rem; }
}

.aanbod__kop {
  margin: 0 0 20px;
  font-family: var(--sl-font-sans);
  font-size: 3rem;                /* 48px */
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: var(--sl-white);
}
.aanbod__onderkop {
  margin: 25.6px 0;
  font-family: var(--sl-font-sans);
  font-size: 2rem;                /* 32px */
  font-weight: 400;
  line-height: 0.98;
  color: #b5b9be;
}
.aanbod__body {
  margin: 0;
  font-family: var(--sl-font-sans);
  font-size: 1rem;
  line-height: 1.375;             /* 22px */
  color: #b5b9be;
}

@media (max-width: 48rem) {
  .aanbod__kop { font-size: 2.25rem; }
  .aanbod__onderkop { font-size: 1.5rem; margin: 1.25rem 0; }
}

.aanbod__kaart {
  padding: 8px;
  border-radius: var(--sl-radius);
  background: var(--sl-slate);
}

/* Het beeld vult het vlak, de knop staat er onderin overheen. In de referentie
   is het beeld een achtergrond; hier een img, zodat de omschrijving bewaard
   blijft voor wie het niet ziet. */
.aanbod__visual {
  position: relative;
  min-height: 17.9375rem;         /* 287px */
  border-radius: var(--sl-radius);
  overflow: hidden;
}
.aanbod__beeld {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Wit op donker, zoals daar. De tokens gaan om en niet de kleur zelf, zodat
   hover en focus de regels van het systeem blijven volgen. */
/* De knop staat onder de lijst en de toestemming, niet meer over het beeld:
   zo staat de actie onder alles wat erover te lezen valt, en direct onder het
   vinkje dat hem vrijgeeft. */
.aanbod__knopregel {
  margin: 0;
  padding: 0 24px 24px;
}
.aanbod__knop {
  width: 100%;
  padding: 12px 16px;
  font-size: 0.875rem;
  font-weight: 500;

  --button-cta-background: var(--sl-white);
  --button-cta-color: var(--sl-ink);
  --button-cta-hover-background: var(--sl-grey-150);
  --button-cta-hover-color: var(--sl-ink);
}
/* Nog steeds nodig: de knop gaat kort op disabled terwijl de aanvraag loopt. */
.aanbod__knop[disabled] {
  opacity: 0.55;
  pointer-events: none;
}

/* Het vinkje staat er niet in de referentie. Het krijgt dezelfde inspringing
   als de lijst eronder, zodat de linkerlijn doorloopt. */
/* Het vinkje op dezelfde regel als de eerste tekstregel. Grid in plaats van
   flex, zodat de tekst die over meer regels loopt netjes onder zichzelf blijft
   staan en niet onder het vakje doorschuift. De bovenmarge is het verschil
   tussen de regelhoogte en het vakje, gedeeld door twee: precies gecentreerd
   op die eerste regel. */
/* De toestemming bij de twee CTA-kaarten is vervallen: die knoppen vragen
   niets meer aan maar openen de tussenpagina, en daar wordt de vraag
   gesteld. Daarmee verdwenen ook de wachtstand van de knop en de regel die
   de schakelaar liet knipperen. */

/* Zodra de schakelaar omgaat komt de knop opzetten. De regel van het systeem
   noemt opacity niet, dus die wordt hier herhaald mét opacity erbij — anders
   valt de overgang op achtergrond en kleur weg. */
.aanbod__knop {
  transition: background var(--sl-transition), color var(--sl-transition),
              border-color var(--sl-transition), opacity 0.45s ease;
}

/* In de rechterkolom staat de kaart op een lichte sectie; daar werken wit en
   het gedempte grijs van de donkere variant niet. */


/* Titel in de kaart, boven de drie punten. */
/* Beeld van rand tot rand: de kaart heeft 8px padding, en die wordt hier met
   een negatieve marge weer opgeheven. Alleen de bovenhoeken blijven rond, want
   daar valt het beeld samen met de rand van de kaart. */
.aanbod__visual--randloos {
  margin: -8px -8px 0;
  min-height: 0;
  aspect-ratio: 16 / 10;
  border-radius: var(--sl-radius) var(--sl-radius) 0 0;
}

.aanbod__kaartkop {
  margin: 0;
  padding: 24px 24px 0;
  font-family: var(--sl-font-serif);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.25;
  color: var(--sl-white);
}
.aanbod__kaartkop + .aanbod__lijst { padding-top: 14px; }

.aanbod__lijst {
  margin: 0;
  padding: 20px 24px 16px;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.aanbod__lijst li {
  position: relative;
  padding-left: 28px;
  font-size: 1rem;
  line-height: 1.375;
  color: var(--sl-white);
}
/* Gouden bolletje met een wit vinkje erin. Het vinkje is een masker, zodat het
   zijn kleur uit de opmaak haalt en niet als apart bestand geladen hoeft te
   worden. Wit op goud haalt 3,0:1; voor een pictogram van deze maat vraagt de
   richtlijn 3:1, dus dat komt net uit. */
.aanbod__lijst li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 1.6px;
  width: 16px;
  height: 16px;
  border-radius: 100%;
  background: var(--sl-gold);
}
.aanbod__lijst li::after {
  content: '';
  position: absolute;
  left: 0;
  top: 1.6px;
  width: 16px;
  height: 16px;
  background: var(--sl-white);
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.5 2.5 5.1-5.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4.2 8.3l2.5 2.5 5.1-5.3' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px 16px no-repeat;
}


/* Opnieuw beginnen: losse knop onderaan de uitslag, gecentreerd, los van
   het CTA-blok zodat de twee niet met elkaar concurreren. */
.result-footer {
  display: flex;
  justify-content: flex-start;
  margin-top: 4.5rem;
}
@media only screen and (max-width: 1024px) {
  .result-footer { max-width: var(--sl-container-narrow); }
}

/* Het icoon is een ronddraaiende pijl, geen richtingspijl; de horizontale
   verschuiving die het systeem bij hover geeft slaat hier nergens op. */
.result-restart:hover .icon,
.result-restart:focus .icon { transform: none; }

.icon { display: inline-flex; flex: none; }

/* ---------------------------------------------------------------------------
   7. BEWEGING
   Kort en ingehouden, in de trant van --sl-transition (0.15s). Beweging is
   hier bevestiging, geen effect: een stap komt rustig binnen en een gekozen
   antwoord geeft even antwoord terug voordat de volgende stap volgt.
   ------------------------------------------------------------------------ */

/* visibility staat er bewust in. De tegels wachten twee seconden voordat ze
   verschijnen, en zonder deze regel zijn ze in die tijd wel aanklikbaar en
   bereikbaar met de tab-toets terwijl je ze niet ziet. */
/* De stellingen komen trager op dan de rest: hier is het verschijnen zelf
   informatie — er staan er drie, en ze komen van boven naar beneden. De
   vertraging ertussen staat in js/app.js (STELLING_STAGGER_MS). */
.stelling.anim-rise { animation-duration: 0.4s; }

@keyframes sl-rise {
  from { opacity: 0; transform: translateY(0.5rem); visibility: hidden; }
  1%   { visibility: visible; }
  to   { opacity: 1; transform: none; visibility: visible; }
}

@keyframes sl-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Komt van onder omhoog in beeld, in een langzame fade van anderhalve
   seconde. De vertraging per element wordt in js/app.js gezet, zodat de vijf
   tegels vlak na elkaar op een rij volgen. */
.anim-rise { animation: sl-rise 0.28s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.anim-fade { animation: sl-fade 0.28s ease-out both; }

/* Het gekozen antwoord drukt kort in en veert terug. */
@keyframes sl-pick {
  0%   { transform: scale(1); }
  45%  { transform: scale(0.97); }
  100% { transform: scale(1); }
}
.scale__btn.is-picked {
  animation: sl-pick 0.2s ease-out;
  /* De inspringing overschrijft de binnenkomstanimatie van de tegel zelf. */
  animation-delay: 0s;
}

/* De niet-gekozen tegels stappen terug zodra er gekozen is. Ze blijven wel
   leesbaar: sinds er meer stellingen op één stap staan blijft een beantwoorde
   rij in beeld, en dan moet je je keuze nog kunnen nalopen en wijzigen. */
.scale.is-answered .scale__btn:not(.is-picked) {
  /* Niet verder terug dan dit. Op mobiel staat het label in de tekstkleur en
     is het het hele antwoord; op 0,55 zakt het naar 3,9:1 en dat is onder de
     4,5 van WCAG AA. Op 0,7 haalt het 6,5:1 en stapt het nog steeds terug. */
  opacity: 0.7;
  transition: opacity var(--sl-transition);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    /* Zonder deze regel blijven getrapte elementen tijdens hun vertraging op
       de begintoestand staan, en dus onzichtbaar. */
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
  }
}


/* ---------------------------------------------------------------------------
   8. COOKIETOESTEMMING
   Staat buiten #app, want de scan hertekent dat hele blok bij elke stap.
   Leest de tokens van het donkere thema, net als elke andere component.
   ------------------------------------------------------------------------ */

.cookiebar {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 40;
  padding: 1.25rem 1.5rem;
  background: var(--sl-block-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  /* Begint net onder de rand en schuift omhoog. Zonder de starttoestand
     springt hij er bij het laden ineens staan. */
  transform: translateY(100%);
  transition: transform 0.25s ease;
}
.cookiebar.is-open { transform: none; }

.cookiebar__inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  width: 100%;
  max-width: var(--sl-container);
  margin-inline: auto;
}

.cookiebar__body { flex: 1 1 auto; }

.cookiebar__title {
  margin: 0 0 0.375rem;
  color: var(--title-color);
  font-family: var(--sl-font-sans);
  font-size: var(--sl-body-size);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.cookiebar__text {
  margin: 0;
  max-width: 68ch;
  color: var(--section-text-color);
  font-size: var(--sl-small-font-size);
  line-height: 1.5;
}

/* De link naar het privacystatement staat hier op --sl-block-dark en niet op
   een sectieachtergrond. Het blauw van --link-color haalt daar 2,04:1 en is
   praktisch onleesbaar; goud haalt 3,27:1 en is bovendien de accentkleur die
   het systeem op donker al gebruikt, voor de subtitels en de vinkjes. */
.cookiebar__text .inline-link { color: var(--sl-gold); }
.cookiebar__text .inline-link:hover,
.cookiebar__text .inline-link:focus { color: var(--sl-gold-tint); }

/* Beide knoppen even breed en even zwaar. Een weigerknop die kleiner of
   grijzer is dan de accepteerknop is geen vrije keuze, en dat is precies waar
   de Autoriteit Persoonsgegevens op let. Accepteren is gevuld wit; weigeren
   krijgt dezelfde maat en dezelfde witte rand, zodat het even duidelijk een
   knop is en niet het weggemoffelde alternatief. */
.cookiebar__actions {
  display: flex;
  flex: 0 0 auto;
  gap: 0.625rem;
}
.cookiebar__button { min-width: 8.75rem; }

.cookiebar__button--ghost,
.cookiebar__button--ghost:hover,
.cookiebar__button--ghost:focus {
  color: var(--title-color);
}
.cookiebar__button--ghost {
  border: 1px solid var(--title-color);
  background: none;
}
.cookiebar__button--ghost:hover,
.cookiebar__button--ghost:focus {
  background: rgba(255, 255, 255, 0.12);
}

/* Onder de containerbreedte kantelt de balk: tekst boven, knoppen eronder op
   volle breedte. Naast elkaar zouden ze daar tot onleesbaar smal knijpen. */
@media only screen and (max-width: 768px) {
  .cookiebar__inner {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  .cookiebar__actions { width: 100%; }
  .cookiebar__button { flex: 1 1 0; min-width: 0; }
}

/* Het linkje om de keuze te herzien. Bewust stil: het hoort bereikbaar te
   zijn, niet op te vallen. De scan houdt onderaan het scherm ruimte over, dus
   linksonder botst het nergens mee. */
/* De knop staat vast onderaan het scherm en zweeft over secties die van wit
   naar donkerblauw wisselen. Een donker matglazen plaatje lost dat op: het dempt
   de ondergrond, waardoor dezelfde witte tekst overal leesbaar blijft.
   Daarom staat de kleur hier vast op --sl-white en niet op --section-text-color;
   die laatste draait mee met het thema en gaf op de lichte sectie donkere tekst
   op een donkere plaat. */
.cookielink {
  position: fixed;
  bottom: 0.75rem;
  left: 0.75rem;
  z-index: 30;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: var(--sl-radius);
  background: rgba(6, 21, 37, 0.72);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
  backdrop-filter: blur(12px) saturate(140%);
  box-shadow: 0 1px 3px rgba(6, 21, 37, 0.1);
  color: var(--sl-white);
  font-family: var(--sl-font-sans);
  font-size: 0.6875rem;
  line-height: 1;
  cursor: pointer;
  transition: background var(--sl-transition), border-color var(--sl-transition),
              box-shadow var(--sl-transition);
}
.cookielink:hover,
.cookielink:focus {
  background: rgba(6, 21, 37, 0.88);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 6px rgba(6, 21, 37, 0.16);
}

/* Zonder backdrop-filter zou het plaatje half doorzichtig blijven en de tekst
   op een drukke ondergrond onleesbaar worden. Dan maar gewoon dekkend. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .cookielink { background: rgba(6, 21, 37, 0.95); }
  .cookielink:hover,
  .cookielink:focus { background: var(--sl-ink); }
}

/* ---------------------------------------------------------------------------
   9. NOTITIE
   Een terzijde binnen een lichte sectie: iets donkerder dan de ondergrond, met
   een icoon ervoor. Bewust geen rand en geen kleuraccent — het is een hulpzin,
   geen waarschuwing.
   ------------------------------------------------------------------------ */

.notitie {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  max-width: 44rem;
  padding: 0.875rem 1.125rem;
  border-radius: var(--sl-radius);
  /* --sl-grey-150 is in het systeem de hover op light grey, en precies de tint
     die één stap donkerder is dan de sectie eronder. */
  background: var(--sl-grey-150);
}

/* Het icoon staat op de eerste regel van de tekst, niet gecentreerd op het
   hele blok: bij twee regels zou het anders midden in het niets hangen. */
.notitie .icon {
  flex: 0 0 auto;
  margin-top: 0.125rem;
  color: var(--sl-muted);
}
.notitie .icon svg { display: block; }

.notitie p { margin: 0; }

/* Binnen een donkere sectie leest hetzelfde blok andersom: iets lichter dan de
   ondergrond in plaats van donkerder. */
.sl-theme-dark-blue .notitie {
  background: var(--sl-block-dark);
}
.sl-theme-dark-blue .notitie .icon { color: var(--sl-muted-dark); }

/* De aanloopregel boven de knop op de bedankpagina. Het design system reserveert
   de serif voor hero- en inline-CTA-titels; dit is dat tweede geval, dus de
   letter klopt hier.

   Niet .sl-title--inline-cta: die staat op 3,75rem en wordt daarmee groter dan
   de kop erboven. Deze regel is het aanbod, niet de boodschap, dus hij hoort
   onder die kop te blijven. Vandaar de serif op de maat van --4.

   De kleur komt van --title-color: op een lichte sectie is dat --sl-ink, het
   donkerblauw van het systeem. */
.bedankt__cta-intro {
  font-family: var(--sl-font-serif);
  font-weight: 500;
  /* Dichter op de knop dan de systeemmarge, zodat regel en knop als één geheel
     lezen in plaats van als twee losse elementen. */
  margin-bottom: 1rem;
}

/* Liggende variant van de CTA-kaart, voor de bedankpagina: beeld links, tekst
   en knop ernaast. De verticale kaart op de uitslag staat in een smalle
   rechterkolom; hier is de hele breedte beschikbaar, en dan werkt een staande
   kaart met een beeld van vier op drie bovenin niet. */



/* In de staande kaart vult de knop de kolom. Hier zou hij dan tot tegen de rand
   lopen, dus daar gaat hij terug naar zijn eigen breedte. */

/* Onder deze breedte wordt het beeld te smal om nog iets te tonen; dan komt het
   weer bovenop, zoals in de staande kaart. */
@media only screen and (max-width: 576px) {
      }

/* Uitleg onder een veld: waarom je dit zou invullen. Staat vóór de foutmelding
   in de opbouw, zodat de fout het laatste is wat je leest als er iets mis is. */
.field__hint {
  margin: 0.375rem 0 0;
  color: var(--sl-muted);
  font-size: var(--sl-small-font-size);
  line-height: 1.45;
}

/* ---------------------------------------------------------------------------
   VOORPROEFJE VAN DE UITSLAG

   Onder het formulier, achter een waas: laat zien wát er klaarstaat zonder het
   al te geven. Het blok scrollt langzaam op en neer, alsof iemand het leest —
   dat maakt zichtbaar dat er meer onder staat dan in het venster past.

   Het is decor. Geen muisaanwijzer, geen selectie, geen focus: de opbouw in
   js/app.js zet er bewust geen enkel element in dat focus kan krijgen, en
   aria-hidden houdt het uit de voorleesvolgorde.
   ------------------------------------------------------------------------ */

/* De laatste stap. De opname vult het hele scherm: hij staat in de kolom maar
   rekent tegen de sectie, want .sl-section draagt al position: relative. Zo
   loopt hij van browserrand tot browserrand terwijl de aankondiging en het
   formulier in de gecentreerde kolom blijven staan.

   De sectie is minstens zo hoog als het scherm onder de kop, anders houdt de
   opname op halverwege en staat er een kleurvlak onder. */
.form-stap {
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: calc(100vh - var(--sl-balk-hoogte));
  min-height: calc(100svh - var(--sl-balk-hoogte));
  padding-block: 3rem 4rem;
}

/* De opname vult de sectie. Achter de velden komt hij niet in beeld — daar ligt
   een dicht vlak overheen — maar eromheen loopt hij door. */
.voorproef__achtergrond {
  position: absolute;
  inset: 0;
  z-index: 0;
  user-select: none;
  pointer-events: none;
}
.voorproef__achtergrond .voorproef__venster { height: 100%; }

/* Alles wat op de opname ligt. De kolom zelf blijft ongepositioneerd: zou die
   position: relative krijgen, dan rekende de opname tegen de kolom en liep hij
   niet meer door tot de rand van het scherm. */
.voorproef__woorden,
.voorproef__velden,
.form-stap .form-notice {
  position: relative;
  z-index: 2;
}

/* De aankondiging staat boven het formulier, niet als eigen band. */
.voorproef__woorden {
  margin-bottom: 2.5rem;
  text-align: center;
}

/* De velden, in een blok zo breed als de kolom. Lichter dan de opname
   eromheen: --sl-block-dark is in dit systeem precies dat, een blok binnen een
   donkere sectie. Wit haalt er 9,8:1 op en de gedempte hulptekst 5,8:1, dus de
   omgekeerde tekstkleuren verderop blijven gelden. */
.voorproef__velden {
  padding: 2.5rem;
  border-radius: var(--sl-radius);
  background: var(--sl-block-dark);
}

.voorproef__label {
  margin: 0;
  /* De serif van het systeem, op 500 net als de kop boven de stellingen en de
     regel boven de knop in het CTA-blok: deze kop draagt een stap, geen
     pagina, dus niet de 600 van de hero. */
  font-family: var(--sl-font-serif);
  font-size: 2.7rem;
  font-weight: 500;
  /* Ruimer dan de leading van het ontwerpsysteem (0,98): die is gemaakt voor
     koppen die op één regel staan, en over twee regels plakt hij dicht. */
  line-height: 1.2;
  letter-spacing: var(--sl-title-tracking);
  /* Verdeelt de woorden gelijk over de regels in plaats van de laatste regel
     leeg te laten lopen. Browsers die het niet kennen breken zoals voorheen. */
  text-wrap: balance;
  color: var(--sl-white);
}

/* De uitleg eronder, binnen hetzelfde kader. Smaller dan de kop, zodat de
   regellengte prettig blijft op een breed scherm. */
.voorproef__intro {
  max-width: 34rem;
  margin: 1rem auto 0;
  font-size: var(--sl-body-size);
  line-height: var(--sl-body-leading);
  color: hsla(0, 0%, 100%, 0.78);
}

/* Het kijkgat. De hoogte komt van het kader eromheen; js/app.js meet die na de
   opmaak en zet hem hier neer, want de animatie schuift over de eigen hoogte van
   de opname min die van het kijkgat. De waarde hieronder is de terugval voor het
   ene beeldje voordat die meting binnen is. */
.voorproef__venster {
  --voorproef-hoogte: 30rem;

  position: relative;
  height: var(--voorproef-hoogte);
  overflow: hidden;
}

.voorproef__inhoud {
  /* Zwaar genoeg dat de percentages niet te lezen zijn — anders geeft het
     voorproefje weg wat het formulier juist vraagt — en licht genoeg dat de
     vorm herkenbaar blijft: drie ringen, drie kolommen, een kop erboven.
     Gedimd, zodat de titel erover heen leesbaar blijft. */
  filter: blur(5px) brightness(0.72);
  transform-origin: top center;
  animation: voorproef-lezen 26s ease-in-out infinite;
}

/* Een sluier over de opname. De dimming in de filter alleen is niet genoeg:
   komt het lichtgrijze deel van de uitslag voorbij, dan zakt wit daarop naar
   2,9:1. Met deze laag erbij blijft het overal boven 4,5:1, ruim boven de 3:1
   die voor een kop van deze maat nodig is. */
.voorproef__venster::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: hsla(212, 72%, 8%, 0.55);
}

.voorproef__blok { padding: 2rem 1.75rem; }
.voorproef__blok.sl-theme-dark-blue { background: var(--sl-ink); }
.voorproef__blok.sl-theme-light-grey { background: var(--sl-grey-100); }
.voorproef__kop { margin: 0 0 1.5rem; }

/* De kaarten volgen dezelfde regels als op de uitslag zelf: drie kolommen op een
   breed scherm, onder elkaar op een smal. Het voorproefje laat daarmee zien hoe
   de uitslag er op jóúw scherm uit gaat zien, en niet hoe hij er op een ander
   scherm uitziet. Alleen de tussenruimte is krapper — dit is een miniatuur. */
.voorproef .worlds { gap: 0.75rem; }
.voorproef .world { padding: 1rem; }
.voorproef .world__text { margin-bottom: 0; }

/* Onafgebroken op en neer: naar beneden, terug naar boven, opnieuw. Aan beide
   uiteinden een korte rust — net lang genoeg om te laten zien dat hij daar
   omkeert, kort genoeg dat het niet stil lijkt te staan.

   Het percentage in translateY rekent over de eigen hoogte van de inhoud, dus
   dit werkt bij elke lengte; er hoeft niets gemeten te worden. */
@keyframes voorproef-lezen {
  0%, 5%    { transform: translateY(0); }
  48%, 55%  { transform: translateY(calc(-100% + var(--voorproef-hoogte))); }
  100%      { transform: translateY(0); }
}

/* De videovariant. De opname scrollt zelf, dus hier geen animatie en geen
   vaste kijkgatshoogte: videoFoam van Wistia past de speler in het vlak en de
   verhouding staat vast, net als bij de video op de uitslag.

   pointer-events staat al uit op .voorproef en dat is hier het belangrijkst:
   ook als Wistia ooit toch een knop tekent, is er niets aan te klikken. */
.voorproef__venster--video {
  height: auto;
  aspect-ratio: 16 / 9;
  background: #000;
}
.voorproef__inhoud--video {
  position: absolute;
  inset: 0;
  animation: none;
}
.voorproef__inhoud--video > div {
  width: 100%;
  height: 100%;
}

/* Wie beweging heeft uitgezet krijgt het stilstaande begin. */
@media (prefers-reduced-motion: reduce) {
  .voorproef__inhoud { animation: none; }
}

@media only screen and (max-width: 768px) {
  .voorproef__label { font-size: 1.95rem; }
  .voorproef__intro { font-size: var(--sl-small-font-size); margin-top: 0.75rem; }
  .voorproef__venster { --voorproef-hoogte: 24rem; }
  .voorproef__blok { padding: 1.5rem 1.25rem; }
  .voorproef__inhoud {
    filter: blur(4px) brightness(0.72);
    /* Gestapelde kaarten maken het blok een stuk langer. Met dezelfde 26 s zou
       het beeld erdoorheen razen; op deze lengte hoort een rustiger tempo. */
    animation-duration: 40s;
  }
}

/* ---------------------------------------------------------------------------
   HET FORMULIER OP HET KADER

   De velden staan op een donker vlak. De invoervelden zelf blijven wit — daar
   typ je in, en dat moet het lichtste vlak op het scherm zijn — maar alles
   eromheen draait om: labels wit, uitleg gedempt wit, de toestemming een
   doorschijnend vlak in plaats van grijs.
   ------------------------------------------------------------------------ */

.voorproef .field__label { color: var(--sl-white); }
.voorproef .field__hint { color: hsla(0, 0%, 100%, 0.7); }

/* Het blauw van de foutmelding is gemaakt voor een lichte ondergrond; op donker
   haalt het geen 4,5:1. Hier een warme tint die dat wel doet. */
.voorproef .field__error { color: #ffb4a8; }

.voorproef .consent {
  border-color: hsla(0, 0%, 100%, 0.18);
  background: hsla(0, 0%, 100%, 0.07);
}
.voorproef .consent label { color: hsla(0, 0%, 100%, 0.82); }
.voorproef .consent input { accent-color: var(--sl-gold); }
.voorproef .inline-link { color: var(--sl-white); }
.voorproef .inline-link:hover { color: var(--sl-lavender); }

/* De knop is wit op donker; de rand en schaduw van de lichte variant zijn hier
   niet nodig. */
.voorproef .sl-button--cta {
  --button-cta-background: var(--sl-white);
  --button-cta-color: var(--sl-ink);
  --button-cta-hover-background: var(--sl-grey-150);
  --button-cta-hover-color: var(--sl-ink);

  border: 0;
  box-shadow: none;
}

/* Het invoerveld staat op een donker vlak, dus het krijgt zijn eigen rand terug:
   zonder die rand zweeft een wit blok op het beeld. */
.voorproef .sl-input {
  border-color: transparent;
}
.voorproef .sl-input:focus {
  border-color: var(--sl-white);
}

@media only screen and (max-width: 768px) {
  /* Op een telefoon staat de kolom bijna tegen de schermrand en vult de inhoud
     de hoogte, zodat er van de opname weinig overblijft. Meer lucht boven de
     aankondiging geeft hem weer een stuk scherm van zichzelf. */
  .form-stap { padding-block: 7rem 4rem; }
  .voorproef__velden { padding: 1.75rem 1.25rem; }
}

/* Staging of een voorbeeld van een variant vanuit het paneel. Bovenaan, boven
 * de merkbalk, zodat een schermafdruk nooit voor live kan doorgaan. Bewust
 * geen kleur uit het design system: dit hoort er niet bij. Radius en schaduw
 * volgen de huisregels (geen van beide). */
.omgeving-balk {
  position: relative;
  z-index: 1000;
  background: #FFD400;
  color: #000;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .06em;
  padding: 4px 16px;
}
/* Wisselknoppen tussen varianten, alleen op staging (index.php). */
.omgeving-balk__wissel { display: inline-flex; flex-wrap: wrap; gap: 6px; margin-left: 12px; vertical-align: middle; }
.omgeving-balk__knop {
  color: #000; text-decoration: none; letter-spacing: 0;
  border: 1px solid #000; border-radius: var(--sl-radius); padding: 1px 8px;
}
.omgeving-balk__knop:hover, .omgeving-balk__knop:focus-visible { background: rgba(0, 0, 0, 0.12); }
.omgeving-balk__knop.is-actief { background: #000; color: #FFD400; }
.omgeving-balk__stappen { margin-left: 18px; align-items: center; }


/* ===========================================================================
   BEWEGENDE BEELDEN (js/beelden.js)
   Ontwerp van Saad na de funnel-audit van oktober 2026, omgezet naar het
   systeem: radius 5px, geen schaduw, gewicht 400 of 500, kleuren uit de
   tokens. Nagerekend met de WCAG-formule: wit op --sl-slate 14,0:1,
   --sl-muted-dark op --sl-slate 7,1:1, --sl-gold op --sl-slate 4,6:1 en op
   --sl-ink 6,1:1. --sl-muted haalt op --sl-grey-100 maar 3,7:1; de kleine
   grijze regels op het lichte vlak staan daarom in --sl-ink op 0,65 dekking,
   5,5:1 op --sl-grey-100 en 5,8:1 op wit.
   ======================================================================== */

.bl-wissel,
.bl-loop .bl-uitslag {
  container-type: inline-size;
  background: var(--sl-grey-100);
  color: var(--sl-ink);
  font-family: var(--sl-font-sans);
  text-align: left;
}
.bl-wissel {
  border-radius: var(--sl-radius);
  padding: 2.25rem 1.75rem 2rem;
}
.bl-wissel p,
.bl-loop p,
.bl-ringen p,
.bl-doc p { margin: 0; }

.bl-eyebrow {
  text-align: center;
  color: rgba(6, 21, 37, 0.65);
  font-size: var(--sl-small-font-size);
  line-height: 1.4;
  margin-bottom: 0.5rem !important;
}
.bl-kop {
  text-align: center;
  font-weight: 500;
  font-size: clamp(1.5rem, 5.5cqi, 2.25rem);
  line-height: 1.1;
  letter-spacing: var(--sl-title-tracking);
  max-width: 13em;
  margin: 0 auto 0.625rem !important;
}
.bl-sub {
  text-align: center;
  color: rgba(6, 21, 37, 0.65);
  font-size: 1rem;
  line-height: 1.4;
  margin-bottom: 1.5rem !important;
}

/* Kaarten: hetzelfde vlak als de wereldkaarten op de uitslag. */
.bl-raster { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }
.bl-kaart {
  position: relative;
  background: var(--sl-slate);
  color: var(--sl-white);
  border-radius: var(--sl-radius);
  padding: 1.125rem 1.125rem 1.25rem;
  transform-origin: top left;
}
.bl-kaart.is-dom { grid-column: 1 / -1; padding: 1.5rem; }
.bl-binnen {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ring pct" "meta meta" "naam naam" "tekst tekst";
  column-gap: 0.875rem;
  align-items: center;
  transition: opacity 150ms ease;
}
.bl-kaart.is-onderweg .bl-binnen { opacity: 0; }
.bl-kaart.is-dom .bl-binnen {
  grid-template-areas: "ring pct" "ring meta" "ring naam" "ring tekst";
  column-gap: 1.75rem;
  align-items: start;
}
.bl-ring { grid-area: ring; width: 3.5rem; height: 3.5rem; display: block; }
.bl-kaart.is-dom .bl-ring { width: 6rem; height: 6rem; align-self: center; }
.bl-track { fill: none; stroke: var(--sl-block-dark); stroke-width: 4; }
.bl-arc { fill: none; stroke: var(--sl-white); stroke-width: 4; transform: rotate(-90deg); transform-origin: 50% 50%; }
.bl-icoon { fill: none; stroke: var(--sl-white); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
.bl-pct {
  grid-area: pct;
  font-family: var(--sl-font-serif);
  font-weight: 500;
  font-size: 1.875rem;
  line-height: 1;
  font-variant-numeric: lining-nums tabular-nums;
}
.bl-kaart.is-dom .bl-pct { font-size: 2.75rem; margin-bottom: 0.75rem !important; }
.bl-meta {
  grid-area: meta;
  display: flex; align-items: center; gap: 0.625rem; flex-wrap: wrap;
  margin: 1rem 0 0.25rem !important;
  transition: opacity 300ms ease;
}
.bl-kaart.is-dom .bl-meta { margin-top: 0 !important; }
.bl-meta.is-uit { opacity: 0; }
.bl-band { color: var(--sl-gold); font-size: 0.875rem; line-height: 1.3; }
.bl-info { display: inline-flex; align-items: center; gap: 0.25rem; color: var(--sl-muted-dark); font-size: 0.625rem; line-height: 1; }
.bl-info svg { width: 0.5625rem; height: 0.5625rem; }
.bl-naam { grid-area: naam; font-weight: 500; font-size: 1.1875rem; line-height: 1.25; margin-bottom: 0.5rem !important; }
.bl-kaart.is-dom .bl-naam { font-size: 1.4375rem; }
.bl-tekst { grid-area: tekst; color: var(--sl-muted-dark); font-size: 0.8125rem; line-height: 1.5; }

.bl-onder { margin-top: 1.75rem; transition: opacity 300ms ease; }
.bl-onder.is-uit { opacity: 0; }
.bl-onderkop { font-size: 1.25rem; line-height: 1.3; margin-bottom: 0.875rem !important; transition: opacity 300ms ease; }
.bl-waas { color: var(--sl-muted); font-size: 0.8125rem; line-height: 1.7; filter: blur(4px); user-select: none; }

@container (max-width: 27.5rem) {
  .bl-raster { grid-template-columns: 1fr; }
  .bl-kaart.is-dom { padding: 1.25rem; }
  .bl-kaart.is-dom .bl-binnen { grid-template-areas: "ring pct" "meta meta" "naam naam" "tekst tekst"; align-items: center; }
  .bl-kaart.is-dom .bl-ring { width: 4.5rem; height: 4.5rem; }
  .bl-kaart.is-dom .bl-pct { margin-bottom: 0 !important; }
  .bl-kaart.is-dom .bl-meta { margin-top: 1rem !important; }
}

/* Op de landingspagina: het beeld neemt de plek van de foto in en wordt niet
   op de hoogte van de tekstkolom uitgerekt. */
.hero__media--beeld { align-self: center; }

/* ---------- De doorloop: vast podium van 540 x 650, meeschalend ---------- */
.bl-loop {
  position: relative;
  width: 100%;
  max-width: 37.5rem;
  margin: 0 auto;
  overflow: hidden;
  border-radius: var(--sl-radius);
  background: var(--sl-white);
}
.bl-podium {
  position: absolute; top: 0; left: 0;
  width: 540px; height: 650px;
  transform-origin: top left;
  font-family: var(--sl-font-sans);
  color: var(--sl-ink);
}
.bl-scene { position: absolute; inset: 0; transition: opacity 450ms ease; }
.bl-scene.is-uit { opacity: 0; pointer-events: none; }
.bl-vragen { background: var(--sl-white); padding-top: 30px; }
.bl-loop .bl-uitslag { padding: 28px 26px 0; }
.bl-hoofd { display: flex; align-items: center; gap: 14px; padding: 0 28px; margin-bottom: 26px; }
.bl-pil { display: none; flex: none; background: var(--sl-grey-100); border-radius: var(--sl-radius); padding: 7px 13px; font-size: 13px; font-weight: 500; }
.bl-balk { flex: 1; height: 3px; background: var(--sl-grey-200); border-radius: var(--sl-radius); overflow: hidden; }
.bl-balk span { display: block; height: 100%; width: 0; background: var(--sl-blue); transition: width 400ms cubic-bezier(.4,0,.2,1); }
.bl-stappen { position: absolute; left: 0; right: 0; top: 86px; bottom: 0; overflow: hidden; }
.bl-stap { position: absolute; inset: 0; transition: transform 380ms cubic-bezier(.65,0,.35,1), opacity 380ms ease; }
.bl-stap.is-in { transform: translateX(60px); opacity: 0; }
.bl-stap.is-uitgaand { transform: translateX(-60px); opacity: 0; }
.bl-vraag { font-family: var(--sl-font-serif); font-weight: 500; color: var(--sl-blue); font-size: 30px; line-height: 1.15; letter-spacing: var(--sl-title-tracking); padding: 0 28px; margin-bottom: 16px !important; }
.bl-stelling { padding: 14px 28px 16px; }
.bl-stelling.is-vlak { background: var(--sl-grey-100); }
.bl-stelling p { font-size: 15px; line-height: 1.45; margin-bottom: 12px !important; }
.bl-schaal { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.bl-schaal b, .bl-tegels b {
  display: flex; align-items: center; justify-content: center;
  height: 38px; border-radius: var(--sl-radius);
  background: var(--sl-grey-200); color: var(--sl-ink);
  font-weight: 400; font-size: 15px;
  transition: background-color 160ms ease, color 160ms ease;
}
.bl-schaal b.is-aan, .bl-tegels b.is-aan { background: var(--sl-ink); color: var(--sl-white); }
.bl-einden { display: flex; justify-content: space-between; font-size: 11.5px; color: rgba(6, 21, 37, 0.65); margin-top: 6px; }
.bl-twee { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 6px 28px 0; }
.bl-vol { padding: 6px 28px 0; }
.bl-vol + .bl-vol { margin-top: 18px; }
.bl-label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 8px; }
.bl-invoer { height: 44px; border-radius: var(--sl-radius); background: var(--sl-grey-100); display: flex; align-items: center; padding: 0 14px; font-size: 15px; white-space: nowrap; overflow: hidden; }
.bl-invoer.is-keuze { justify-content: space-between; }
.bl-invoer.is-keuze::after { content: ""; width: 7px; height: 7px; border-right: 1.5px solid var(--sl-muted); border-bottom: 1.5px solid var(--sl-muted); transform: rotate(45deg) translateY(-2px); margin-left: 10px; flex: none; }
.bl-caret { display: inline-block; width: 1px; height: 18px; background: var(--sl-ink); margin-left: 1px; animation: bl-knipper 0.9s steps(1) infinite; }
@keyframes bl-knipper { 50% { opacity: 0; } }
.bl-tegels { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.bl-tegels b { height: 54px; font-size: 14px; }
.bl-vink { display: flex; align-items: center; gap: 10px; font-size: 13px; color: rgba(6, 21, 37, 0.65); }
.bl-vink i { width: 18px; height: 18px; border-radius: var(--sl-radius); border: 1.5px solid var(--sl-grey-250); background: var(--sl-white); flex: none; }
.bl-vink i.is-aan { background: var(--sl-ink); border-color: var(--sl-ink); }
.bl-nav { display: flex; gap: 10px; padding: 26px 28px 0; }
.bl-terug, .bl-verder { height: 42px; border-radius: var(--sl-radius); padding: 0 18px; display: inline-flex; align-items: center; font-size: 14px; font-weight: 500; }
.bl-terug { background: var(--sl-grey-100); }
.bl-verder { background: var(--sl-blue); color: var(--sl-white); transition: transform 160ms ease; }
.bl-verder.is-aan { transform: scale(0.96); }
.bl-cursor { position: absolute; left: 0; top: 0; width: 22px; height: 22px; z-index: 5; transform: translate(400px, 640px); transition: transform 330ms cubic-bezier(.4,0,.2,1), opacity 300ms ease; pointer-events: none; }
.bl-cursor svg { width: 22px; height: 22px; display: block; fill: var(--sl-ink); stroke: var(--sl-white); stroke-width: 1.4; stroke-linejoin: round; }
.bl-cursor::before { content: ""; position: absolute; left: -9px; top: -9px; width: 18px; height: 18px; border-radius: 50%; background: var(--sl-blue); transform: scale(0); opacity: 0; }
.bl-cursor.is-klik::before { animation: bl-rimpel 380ms ease-out; }
@keyframes bl-rimpel { 0% { transform: scale(0.3); opacity: 0.4; } 100% { transform: scale(2.2); opacity: 0; } }
.bl-cursor.is-uit { opacity: 0; }
.bl-loop .bl-kop { font-size: 33px; }

/* ---------- Laatste stap, naast elkaar: formulier en beeld ---------- */
/* Twee kolommen op een breed scherm; daaronder staat het beeld boven het
   formulier, compact, zodat de velden dicht bij de bovenkant blijven. */
.form-naast {
  display: grid;
  grid-template-columns: minmax(0, 32.5rem) minmax(0, 1fr);
  gap: 3.5rem;
  align-items: center;
  width: 100%;
}
.form-naast--document { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); align-items: start; }
.form-naast .voorproef__woorden { text-align: left; margin-bottom: 1.75rem; }
.form-naast__beeld { min-width: 0; }
@media only screen and (max-width: 900px) {
  .form-naast, .form-naast--document { grid-template-columns: 1fr; gap: 1.5rem; }
  .form-naast__beeld { order: -1; }
}

.bl-ringen {
  position: relative;
  border: 1px solid var(--sl-gold);
  border-radius: var(--sl-radius);
  background: var(--sl-ink);
  color: var(--sl-white);
  padding: 2.5rem 2rem 2.25rem;
  overflow: hidden;
}
.bl-ringen .bl-sub { color: var(--sl-muted-dark); }   /* 9,3:1 op --sl-ink */
.bl-ringrij { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; filter: blur(5px); user-select: none; }
.bl-ringvak { background: var(--sl-slate); border-radius: var(--sl-radius); padding: 1.5rem 0.75rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.bl-ringvak .bl-ring { width: 100%; max-width: 8rem; height: auto; aspect-ratio: 1; }
.bl-ringvak .bl-track { stroke: var(--sl-block-dark); stroke-width: 5; }
.bl-ringvak .bl-arc { stroke: var(--sl-gold); stroke-width: 5; stroke-dashoffset: 282.74; }
.bl-ringvak .bl-icoon { stroke: var(--sl-gold-tint); }
.bl-ringvak .bl-naam { font-size: 1rem; text-align: center; }
.bl-slot {
  position: absolute; left: 50%; bottom: 7.5rem; transform: translateX(-50%);
  width: 3.25rem; height: 3.25rem; border-radius: 50%;
  background: var(--sl-ink); border: 1.5px solid var(--sl-gold);
  display: flex; align-items: center; justify-content: center;
}
.bl-slot svg { width: 1.375rem; height: 1.375rem; fill: none; stroke: var(--sl-gold); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
/* De ringen laden en lopen leeg, elk op zijn eigen tempo. */
.bl-ringen.is-aan .bl-arc { animation: bl-laden 2s cubic-bezier(.65,0,.35,1) infinite alternate; }
.bl-r1 .bl-arc { --bl-van: 270; --bl-tot: 30; }
.bl-r2 .bl-arc { --bl-van: 265; --bl-tot: 55; }
.bl-r3 .bl-arc { --bl-van: 275; --bl-tot: 40; }
.bl-ringen.is-aan .bl-r1 .bl-arc { animation-duration: 1.7s; animation-delay: -0.4s; }
.bl-ringen.is-aan .bl-r2 .bl-arc { animation-duration: 2.1s; animation-delay: -1.3s; }
.bl-ringen.is-aan .bl-r3 .bl-arc { animation-duration: 2.5s; animation-delay: -0.8s; }
@keyframes bl-laden { from { stroke-dashoffset: var(--bl-van); } to { stroke-dashoffset: var(--bl-tot); } }
.bl-ringen.is-gepauzeerd .bl-arc { animation-play-state: paused; }
@media only screen and (max-width: 900px) {
  .bl-ringen { padding: 1.375rem 1rem 1.25rem; }
  .bl-ringen .bl-kop { font-size: 1.25rem; }
  .bl-ringen .bl-sub { font-size: 0.8125rem; margin-bottom: 1rem !important; }
  .bl-ringrij { gap: 0.5rem; }
  .bl-ringvak { padding: 0.875rem 0.375rem; gap: 0.5rem; }
  .bl-ringvak .bl-ring { max-width: 4.5rem; }
  .bl-ringvak .bl-naam { font-size: 0.6875rem; }
  .bl-slot { width: 2.5rem; height: 2.5rem; bottom: 3.75rem; }
}

/* ---------- Het afgeschermde document ---------- */
.bl-doc { font-family: var(--sl-font-sans); text-align: left; }
/* Lange woorden mogen breken, zodat geen inkt buiten het document steekt. */
.bl-zin { overflow-wrap: anywhere; }
.bl-vel {
  position: relative;
  background: var(--sl-grey-100);
  color: var(--sl-ink);
  border-radius: var(--sl-radius);
  padding: 2.75rem 2.5rem 2.25rem;
  transform: rotate(-1deg);
}
.bl-zegel {
  position: absolute; right: 2rem; top: -1.5rem;
  width: 4.5rem; height: 4.5rem; border-radius: 50%;
  background: var(--sl-gold);
  display: flex; align-items: center; justify-content: center;
  animation: bl-wiebel 3.6s ease-in-out 1.2s infinite;
}
.bl-zegel svg { width: 1.625rem; height: 1.625rem; fill: none; stroke: var(--sl-white); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
@keyframes bl-wiebel { 0%, 22%, 100% { transform: rotate(8deg) scale(1); } 4% { transform: rotate(-6deg) scale(1.08); } 8% { transform: rotate(16deg) scale(1.08); } 12% { transform: rotate(0) scale(1.05); } 16% { transform: rotate(12deg) scale(1.02); } }
.bl-docmeta { padding-bottom: 1.25rem; border-bottom: 1px solid var(--sl-border-block); margin-bottom: 1.5rem; }
.bl-docmeta .bl-eyebrow { text-align: left; color: var(--sl-ink); font-weight: 500; }
.bl-voor { font-family: var(--sl-font-serif); font-weight: 500; font-size: 1.75rem; line-height: 1.15; letter-spacing: var(--sl-title-tracking); }
.bl-doc .bl-kop { font-size: 1.5rem; }
.bl-drie { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.625rem; }
.bl-drie .bl-kaart { display: flex; flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 1rem; }
.bl-drie .bl-ring { width: 2.75rem; height: 2.75rem; }
.bl-drie .bl-pct { font-size: 1.5rem; }
.bl-drie .bl-band { font-size: 0.75rem; }
.bl-drie .bl-naam { font-size: 0.9375rem; margin: 0 !important; }
.bl-leeswijzer { text-align: center; color: rgba(6, 21, 37, 0.65); font-size: 0.8125rem; line-height: 1.55; margin: 1rem auto 0 !important; max-width: 34em; }
.bl-zin { font-family: var(--sl-font-serif); font-size: 1.25rem; line-height: 1.5; margin-top: 1.5rem !important; }
/* Zwartgelakt: de echte tekst staat eronder, onleesbaar, met een inktbalk
   erover. Hoe meer velden geldig zijn, hoe losser de balken. */
.bl-lak { position: relative; display: inline-block; color: transparent; white-space: nowrap; }
.bl-lak::after { content: ""; position: absolute; left: -2px; right: -2px; top: 12%; bottom: 8%; background: var(--sl-ink); border-radius: 2px; transition: transform 700ms cubic-bezier(.7,0,.2,1), opacity 300ms ease; }
.bl-kaart .bl-lak::after { background: var(--sl-border-dark); }
.bl-doc[data-niveau="1"] .bl-lak::after { opacity: 0.93; transform: translateY(-1px) rotate(-0.6deg); }
.bl-doc[data-niveau="2"] .bl-lak::after { opacity: 0.85; transform: translateY(-2px) rotate(-1.2deg); }
.bl-doc[data-niveau="3"] .bl-lak::after { opacity: 0.75; transform: translateY(-3px) rotate(-1.8deg); }

/* Beweging uit Saad's ontwerp, op het systeem gezet. */
/* 1. Binnenkomst: de delen van het vel komen na elkaar op. */
.bl-deel { opacity: 0; transform: translateY(6px); }
.bl-doc.is-klaar .bl-deel { animation: bl-op 500ms cubic-bezier(.2,.7,.2,1) forwards; }
.bl-doc.is-klaar .bl-deel:nth-of-type(2) { animation-delay: 150ms; }
.bl-doc.is-klaar .bl-deel:nth-of-type(3) { animation-delay: 300ms; }
@keyframes bl-op { to { opacity: 1; transform: none; } }

/* 2. Een trage glans over de inktbalken: er zit iets onder. */
.bl-lak::before {
  content: ""; position: absolute; top: 12%; bottom: 8%; left: -2px; width: 40%; z-index: 1;
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.18) 50%, rgba(255,255,255,0) 100%);
  animation: bl-glans 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes bl-glans { 0% { transform: translateX(-60%); opacity: 0; } 30%, 70% { opacity: 1; } 100% { transform: translateX(260%); opacity: 0; } }

/* 3. De drie wereldkaarten veren na elkaar even op, in de maat van het slot. */
.bl-drie .bl-kaart { animation: bl-veer 3.6s cubic-bezier(.3,.7,.3,1) infinite; }
.bl-drie .bl-kaart:nth-child(1) { animation-delay: 1.75s; }
.bl-drie .bl-kaart:nth-child(2) { animation-delay: 1.95s; }
.bl-drie .bl-kaart:nth-child(3) { animation-delay: 2.15s; }
@keyframes bl-veer { 0%, 14%, 100% { transform: translateY(0); } 6% { transform: translateY(-6px); } }
.bl-drie .bl-arc { transition: stroke-dashoffset 1100ms cubic-bezier(.2,.7,.2,1); }

/* 4. Openen na het versturen: balken weg, vel recht, slot wordt vinkje. */
.bl-doc.is-open .bl-vel { transform: rotate(0); transition: transform 700ms cubic-bezier(.2,.7,.2,1); }
.bl-doc.is-open .bl-lak { color: inherit; transition: color 500ms ease; }
.bl-doc.is-open .bl-lak::after { transform: scaleX(0); transform-origin: right center; }
.bl-doc.is-open .bl-lak::before { display: none; }
.bl-doc.is-open .bl-zegel, .bl-doc.is-open .bl-kaart { animation: none; }

/* De nieuwe leider in de wisselende uitslag licht kort op. Geen schaduw (huisregel), wel een gouden rand. */
@keyframes bl-aankomst { 0% { transform: scale(1); outline-color: rgba(176,144,67,0); } 40% { transform: scale(1.016); outline-color: rgba(176,144,67,0.9); } 100% { transform: scale(1); outline-color: rgba(176,144,67,0); } }
.bl-kaart.is-aankomst { outline: 3px solid rgba(176,144,67,0); outline-offset: 0; transform-origin: 50% 50%; animation: bl-aankomst 800ms cubic-bezier(.4,0,.2,1); }

/* Voortgang boven de kop bij het document: zes stipjes vol, de laatste
   gaat aan als de uitslag opent. Wit op --sl-ink, gedempt 0,7: 9,3:1. */
.bl-voortgang { display: flex; align-items: center; gap: 0.625rem; margin: 0 0 0.875rem; font-size: var(--sl-small-font-size); color: rgba(255, 255, 255, 0.7); }
.bl-stipjes { display: inline-flex; gap: 4px; }
.bl-stipjes i { display: block; width: 18px; height: 4px; border-radius: 2px; background: var(--sl-gold); }
.bl-stipjes i.is-open { background: rgba(255, 255, 255, 0.18); transition: background-color 400ms ease; }
.bl-voortgang.is-af .bl-stipjes i.is-open { background: var(--sl-gold); }

/* Gouden vinkje bij elk veld dat klopt (document). */
.form-naast--document .field .field__label { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; }
.form-naast--document .field .field__label::after {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.25);
  transition: background-color 200ms ease, border-color 200ms ease;
}
.form-naast--document .field.is-geldig .field__label::after {
  border-color: var(--sl-gold);
  background: var(--sl-gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.5l2.2 2.2L9.5 3.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.form-naast--document .consent + .field__error { margin-top: 0.25rem; }

/* De teller onder de verzendknop (alleen bij het document). Gedempt wit op
   --sl-block-dark: 0,7 dekking haalt 5,8:1. */
.bl-teller { margin: 0.75rem 0 0; text-align: center; font-size: var(--sl-small-font-size); color: rgba(255, 255, 255, 0.7); }
@media only screen and (max-width: 900px) {
  .bl-vel { padding: 1.5rem 1rem 1rem; transform: rotate(-0.5deg); margin-top: 1.25rem; }
  .bl-zegel { width: 3.5rem; height: 3.5rem; right: 1rem; top: -1.25rem; }
  .bl-voor { font-size: 1.25rem; }
  .bl-doc .bl-kop { font-size: 1.125rem; }
  .bl-leeswijzer, .bl-zin, .bl-drie .bl-band { display: none; }
  .bl-drie .bl-kaart { align-items: center; padding: 0.625rem 0.375rem; }
  .bl-drie .bl-pct { font-size: 1.125rem; }
  .bl-drie .bl-naam { font-size: 0.6875rem; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .bl-ringen .bl-arc { animation: none !important; stroke-dashoffset: 150; }
  .bl-zegel, .bl-caret, .bl-drie .bl-kaart, .bl-lak::before, .bl-kaart.is-aankomst { animation: none; }
  .bl-deel { opacity: 1; transform: none; animation: none !important; }
  .bl-lak::after { transition: none; }
}


/* ===========================================================================
   UITSLAG: bewijs, plan in stappen, opnieuw beginnen als link
   Na de funnel-audit (20 oktober 2026): bewijs naast de knop, wat er na de
   aanvraag gebeurt in vier stappen, en opnieuw beginnen niet meer als
   tweede knop direct onder de uitslag.
   ======================================================================== */

/* De klantcase: hetzelfde donkere vlak als de kaart erboven, zodat aanbod en
   bewijs als één blok lezen. Wit op --sl-slate 14,0:1, --sl-muted-dark 7,1:1,
   --sl-gold 4,6:1. Let op: de body draagt sl-theme-dark-blue, dus een
   thema-selector zou hier altijd raken; daarom vaste tokens. */
.bewijs {
  margin: 1rem 0 0;               /* figure heeft van zichzelf 40px opzij */
  padding: 1.5rem;
  border-radius: var(--sl-radius);
  background: var(--sl-slate);
  color: var(--sl-white);
}
.bewijs__kicker { margin: 0 0 0.75rem; font-size: var(--sl-small-font-size); color: var(--sl-gold); }
.bewijs__kop { margin: 0 0 0.75rem; font-size: 1.25rem; font-weight: 500; line-height: 1.2; letter-spacing: var(--sl-title-tracking); }
.bewijs__tekst { margin: 0 0 0.75rem; font-size: 0.9375rem; line-height: 1.45; }
.bewijs__citaat { margin: 0 0 0.75rem; padding-left: 0.875rem; border-left: 2px solid var(--sl-gold); font-family: var(--sl-font-serif); font-size: 1.125rem; line-height: 1.35; }
.bewijs__bron { margin: 0; font-size: var(--sl-small-font-size); color: var(--sl-muted-dark); }

/* Het plan in vier stappen, in de tekstkolom van de uitnodiging. */
.plan { margin: 1.75rem 0 0; padding: 0; list-style: none; counter-reset: plan; display: grid; gap: 1rem; }
.plan__stap { counter-increment: plan; display: grid; grid-template-columns: 2.25rem 1fr; gap: 0.875rem; align-items: start; }
.plan__stap::before {
  content: counter(plan);
  display: flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: 50%;
  border: 1px solid var(--sl-gold); color: var(--sl-gold);
  font-weight: 500; font-variant-numeric: tabular-nums;
}
.plan__kop { margin: 0.375rem 0 0.25rem; font-size: 1.0625rem; font-weight: 500; line-height: 1.3; color: var(--sl-white); }
.plan__tekst { margin: 0; font-size: 0.9375rem; line-height: 1.45; color: var(--sl-muted-dark); }

/* Op de tussenpagina staan dezelfde stappen, iets compacter. */
.aanvraag .plan { margin: 1.25rem 0 2rem; text-align: left; }
.aanvraag .plan__intro { margin: 2.5rem 0 0; }

/* Opnieuw beginnen: een tekstlink helemaal onderaan, buiten het aanbod. */
.result-opnieuw { margin: 0; padding: 0 0 3rem; text-align: center; background: var(--sl-ink); }
.result-opnieuw__link {
  background: none; border: 0; padding: 0.5rem; cursor: pointer;
  font: inherit; font-size: var(--sl-small-font-size);
  color: var(--sl-muted-dark); text-decoration: underline; text-underline-offset: 0.2em;
}
.result-opnieuw__link:hover,
.result-opnieuw__link:focus-visible { color: var(--sl-white); }

/* Doelgroepregel op de landingspagina, onder de hook. */
.hero__doelgroep { margin: -0.5rem 0 1.5rem; font-size: var(--sl-small-font-size); color: var(--sl-gold); }


/* De naam in de kop van het wisselende voorbeeld wisselt mee met de leider. */
.bl-wissel .bl-naamkop { transition: opacity .15s ease; }