/* De opmaak van de twee scan-landingspagina's: /scan en /scan-kort.
   Alles wat hier níet staat komt uit /stijl.css (kleuren, knoppen, glas,
   de vlekken en de typografie).

   ⚠️ Dit blad wordt door allebei de pagina's geladen. Wat je hier verandert,
   verandert dus op allebei; wat maar op één pagina hoort, zet je in een
   <style>-blok op die pagina zelf. */


/* De kop: alleen het merk. Wie op een advertentie of een DM-link klikt heeft
   één beslissing te nemen, en elke extra link is een uitweg. */
.sl-balk{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: clamp(1.5rem, 4vw, 2.25rem) 1.25rem 0;
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--wit);
}
.sl-balk img{ height: 1.5rem; width: auto; }

.sl-hero{
  position: relative;
  z-index: 1;
  max-width: 54rem;
  margin: 0 auto;
  /* Ruim bovenaan: de kop hoort niet tegen het logo aan te staan, en de
     knop mag wat lager liggen. */
  padding: clamp(4rem, 11vw, 8rem) clamp(1.25rem, 5vw, 2rem) clamp(2rem, 5vw, 3.5rem);
  text-align: center;
}
.sl-hero h1{
  margin: 0 0 1.5rem;
  font-size: clamp(1.8rem, 4.2vw, 3.15rem);
  font-weight: 360;
  line-height: 1.08;
  letter-spacing: -.03em;
  color: var(--wit);
  text-wrap: balance;
}
.sl-hero h1 em{ font-style: normal; color: var(--oranje); }
.sl-hero__lead{
  max-width: 40rem;
  margin: 0 auto;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  font-weight: 300;
  line-height: 1.65;
  color: var(--wit-zacht);
}

/* De eerste vraag, in de hero. Vier knoppen naast elkaar, dezelfde vorm
   als de antwoorden in de scan zelf. */
.sl-start{
  max-width: 34rem;
  margin: clamp(2rem, 4.5vw, 2.75rem) auto 0;
  padding: clamp(1.125rem, 3vw, 1.5rem);
  border: 1px solid var(--rand);
  border-radius: 18px;
  background: rgba(255, 255, 255, .05);
}
.sl-start__vraag{
  margin: 0 0 .875rem;
  font-size: .9375rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--wit);
}
.sl-start__opties{
  display: grid;
  gap: .5rem;
  /* 6,5rem: dan passen er vier naast elkaar op een breed scherm en twee
     bij twee op een telefoon, in plaats van drie met een wees eronder. */
  grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr));
}
.sl-optie{
  padding: .75rem .875rem;
  border: 1px solid var(--rand);
  border-radius: 12px;
  background: rgba(255, 255, 255, .04);
  color: var(--wit);
  font-family: inherit;
  /* ⚠️ 16px en geen rem: onder de 16px zoomt Safari op iOS de pagina in
     zodra je een veld of knop aantikt, en dat is hier het duurste moment. */
  font-size: 16px;
  font-weight: 300;
  line-height: 1.3;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: border-color .2s ease, background .2s ease, transform .12s ease;
}
@media (hover: hover){
  .sl-optie:hover{
    border-color: rgba(240, 90, 40, .55);
    background: rgba(240, 90, 40, .12);
  }
}
.sl-optie:active{ transform: scale(.98); }
.sl-optie.is-gekozen{
  border-color: var(--oranje);
  background: rgba(240, 90, 40, .18);
}
.sl-start__klein{
  margin: .875rem 0 0;
  font-size: .75rem;
  font-weight: 300;
  color: var(--wit-gedempt);
}

/* De knop. Eén oranje knop op de hele pagina-hoogte tegelijk: dit is de
   beslissing. De rest van de pagina herhaalt hem, hij concurreert nooit. */
.sl-acties{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
  margin-top: clamp(2rem, 4.5vw, 2.75rem);
}
.sl-klein{
  margin-top: .875rem;
  text-align: center;
  font-size: .8125rem;
  font-weight: 300;
  color: var(--wit-gedempt);
}
@media (max-width: 560px){
  .sl-acties{ flex-direction: column; }
  .sl-acties .knop{ width: 100%; justify-content: center; }
}

.sl-sec{
  position: relative;
  z-index: 1;
  max-width: 62rem;
  margin: 0 auto;
  padding: clamp(2.25rem, 5vw, 3.5rem) clamp(1.25rem, 5vw, 2rem);
}
.sl-sec--smal{ max-width: 46rem; }
/* Drie kaarten met een nummer ervoor hebben meer breedte nodig dan een
   leeskolom, anders wordt de tekst een sliert van drie woorden. */
.sl-sec--stappen{ max-width: 54rem; }
.sl-sec h2{
  margin: 0 0 .75rem;
  font-size: clamp(1.5rem, 2.9vw, 2.25rem);
  font-weight: 360;
  line-height: 1.15;
  letter-spacing: -.02em;
  text-align: center;
  color: var(--wit);
  text-wrap: balance;
}
.sl-sec__sub{
  max-width: 38rem;
  margin: 0 auto clamp(1.75rem, 4vw, 2.5rem);
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.65;
  text-align: center;
  color: var(--wit-zacht);
}

/* De pijnpunten. Bewust vlak opgeschreven: de lezer herkent zijn eigen week,
   en die overdrijven werkt averechts. */
.sl-pijn{
  /* ⚠️ Dit is zelf de <ul>: zonder deze twee regels houdt de browser zijn
     eigen padding-left van 40px aan en staat het hele raster scheef in de
     sectie. Een regel op "ul binnen .sl-pijn" raakt niets. */
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr));
}
.sl-pijn li{
  list-style: none;
  padding: clamp(1.125rem, 2.6vw, 1.5rem);
  border: 1px solid var(--rand);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}
.sl-pijn b{
  display: block;
  margin-bottom: .5rem;
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--wit);
}
.sl-pijn span{
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--wit-zacht);
  text-wrap: pretty;
}

/* Nu en straks naast elkaar. */
.sl-kolommen{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.sl-kolom{
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--rand);
  border-radius: 16px;
}
/* De kleur doet hier het werk: links waar het misgaat, rechts waar het
   hoort te staan. Dezelfde twee tinten als in de scan zelf (#FF9B7A voor
   "let op", #8BE0A4 voor "goed"), zodat rood en groen overal hetzelfde
   betekenen. */
.sl-kolom--nu{
  background: rgba(255, 120, 90, .08);
  border-color: rgba(255, 138, 108, .62);
}
.sl-kolom--straks{
  background: rgba(139, 224, 164, .07);
  border-color: rgba(139, 224, 164, .62);
}
/* Ook het opschrift meekleuren, anders is de rand het enige signaal en
   zie je op een donkere ondergrond het verschil pas bij goed kijken. */
.sl-kolom--nu b{ color: #FF9B7A; }
.sl-kolom--straks b{ color: #8BE0A4; }
/* Het handelsmerk is op een klein kapitaal anders niet meer dan een vlekje. */
.sl-kolom b .tm{ font-size: .62em; opacity: .8; }
.sl-kolom b{
  display: block;
  margin-bottom: .875rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wit-gedempt);
}
.sl-kolom ul{ margin: 0; padding-left: 1.125rem; }
.sl-kolom li{
  margin-bottom: .625rem;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--wit-zacht);
}
.sl-kolom li:last-child{ margin-bottom: 0; }

/* Wat je terugkrijgt: vier kaarten met een nummer. */
/* Twee bij twee, en niet auto-fit: met vier kaarten levert auto-fit op een
   breed scherm een rij van drie op met één wees eronder. */
.sl-krijg{
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
}
@media (min-width: 48rem){
  .sl-krijg{ grid-template-columns: repeat(2, 1fr); }
}
.sl-krijg > div{
  padding: clamp(1.25rem, 3vw, 1.625rem);
  border: 1px solid var(--rand);
  border-radius: 16px;
  background: rgba(255, 255, 255, .04);
}
/* Het nummer staat vóór het icoon op één regel: zo lees je de volgorde van
   de vier dingen die je krijgt, en kost het geen extra regel hoogte. */
.sl-krijg__kop{
  display: flex;
  align-items: center;
  gap: .625rem;
  margin-bottom: .875rem;
}
.sl-krijg__kop .sl-icoon{ margin-bottom: 0; }
.sl-krijg i{
  font-style: normal;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oranje);
  font-variant-numeric: tabular-nums;
}
.sl-krijg b{
  display: block;
  margin-bottom: .5rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--wit);
}
.sl-krijg span{
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--wit-zacht);
}

/* De drie stappen van de scan zelf. */
/* Drie stappen naast elkaar zodra het past; daaronder onder elkaar. Auto-fit
   zou hier twee plus een wees geven, en dan leest het niet als drie stappen. */
.sl-stappen{
  /* Zelfde verhaal als bij .sl-pijn: dit is de <ul>. */
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 1rem;
  grid-template-columns: 1fr;
  counter-reset: stap;
}
@media (min-width: 44rem){
  .sl-stappen{ grid-template-columns: repeat(3, 1fr); }
}
.sl-stappen li{
  list-style: none;
  position: relative;
  padding: 1.25rem 1.25rem 1.25rem 3.25rem;
  border: 1px solid var(--rand);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--wit-zacht);
}
.sl-stappen li b{ display: block; font-weight: 500; color: var(--wit); margin-bottom: .25rem; }
.sl-stappen li::before{
  counter-increment: stap;
  content: counter(stap);
  position: absolute;
  left: 1.25rem;
  top: 1.25rem;
  width: 1.5rem;
  height: 1.5rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  border: 1px solid rgba(240, 90, 40, .5);
  font-size: .75rem;
  font-weight: 500;
  color: var(--oranje);
  font-variant-numeric: tabular-nums;
}

/* De bezwaren. Dezelfde vorm als de FAQ op de homepage. */
.sl-vraag{
  border-bottom: 1px solid var(--rand);
}
.sl-vraag:first-of-type{ border-top: 1px solid var(--rand); }
.sl-vraag summary{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.125rem .25rem;
  cursor: pointer;
  list-style: none;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.45;
  color: var(--wit);
}
.sl-vraag summary::-webkit-details-marker{ display: none; }
.sl-vraag summary::after{
  content: "+";
  flex: none;
  font-size: 1.25rem;
  font-weight: 300;
  line-height: 1;
  color: var(--oranje);
}
/* Een echt minteken, geen halve streep: dit is een teken en geen leesteken. */
.sl-vraag[open] summary::after{ content: "\2212"; }
.sl-vraag p{
  margin: 0 0 1.25rem;
  padding-right: 2rem;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--wit-zacht);
  text-wrap: pretty;
}

.sl-slot{
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3rem) clamp(1.25rem, 4vw, 2.5rem);
  border: 1px solid var(--rand);
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
  text-align: center;
}

.sl-voet{
  position: relative;
  z-index: 1;
  padding: clamp(2rem, 5vw, 3rem) 1.25rem clamp(1.5rem, 4vw, 2.5rem);
  text-align: center;
  font-size: .8125rem;
  font-weight: 300;
  color: var(--wit-gedempt);
}
.sl-voet a{ color: var(--wit-gedempt); }

/* ------------------------------------------------------------------
   Iconen. Lijntekeningen in het oranje, één maat, en nooit meer dan
   één per kaart: ze helpen scannen en mogen het lezen niet overnemen.
   ------------------------------------------------------------------ */
.sl-icoon{
  width: 2.25rem;
  height: 2.25rem;
  margin-bottom: .875rem;
  display: grid;
  place-items: center;
  border-radius: 11px;
  border: 1px solid rgba(240, 90, 40, .3);
  background: rgba(240, 90, 40, .1);
  color: var(--oranje);
}
.sl-icoon svg{
  width: 1.125rem;
  height: 1.125rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Een kaart komt iets omhoog als je erover gaat. Meer beweging dan dit
   heeft de pagina niet nodig; het gaat om een beslissing, niet om een
   demo. Op een aanraakscherm gebeurt er niets. */
@media (hover: hover){
  .sl-pijn li,
  .sl-krijg > div{
    transition: transform .25s ease, border-color .25s ease;
  }
  .sl-pijn li:hover,
  .sl-krijg > div:hover{
    transform: translateY(-3px);
    border-color: rgba(255, 255, 255, .34);
  }
}

/* Blokken schuiven zacht in beeld zodra je ze bereikt. Alles staat
   gewoon in de HTML: zonder JavaScript of met prefers-reduced-motion
   is de eindstand meteen de beginstand. */
.op{ opacity: 1; }
.js .op{
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .24, 1);
}
.js .op.is-zicht{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  .js .op{ opacity: 1; transform: none; transition: none; }
}

/* ------------------------------------------------------------------
   De sneakpeek van het rapport. Dezelfde onderdelen als het echte
   rapport (de ring, de vier balken, de cijfers, één bevinding), zodat
   wat je hier ziet ook is wat je krijgt.
   ⚠️ Het is een voorbeeld en dat staat er ook bij: de cijfers komen
   niet uit de antwoorden van de lezer. Verandert het rapport van vorm,
   verander dit blok mee, anders belooft de pagina iets anders dan de
   scan levert.
   ------------------------------------------------------------------ */
.sl-rap{
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--rand);
  border-radius: 20px;
  background: rgba(255, 255, 255, .05);
}
.sl-rap__kop{
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 1.75rem);
  flex-wrap: wrap;
}
.sl-ring{
  flex: none;
  position: relative;
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background: conic-gradient(var(--oranje) calc(var(--vul, 0) * 1%),
                             rgba(255, 255, 255, .12) 0);
  display: grid;
  place-items: center;
  transition: background 1.2s cubic-bezier(.22, .61, .24, 1);
}
.sl-ring::after{
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: #0D1912;
}
.sl-ring__cijfer{ position: relative; z-index: 1; text-align: center; line-height: 1; }
.sl-ring__score{
  display: block;
  font-size: 1.625rem;
  font-weight: 400;
  font-variant-numeric: tabular-nums;
}
.sl-ring__van{
  display: block;
  margin-top: .25rem;
  font-size: .6875rem;
  color: var(--wit-gedempt);
  font-variant-numeric: tabular-nums;
}
.sl-rap__profiel{ min-width: 12rem; flex: 1; }
.sl-rap__profiel b{
  display: block;
  font-size: 1.125rem;
  font-weight: 400;
  letter-spacing: -.01em;
  color: var(--wit);
}
.sl-rap__profiel span{
  display: block;
  margin-top: .375rem;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--wit-zacht);
}

.sl-meters{
  display: flex;
  flex-direction: column;
  gap: .875rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.sl-meter__rij{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: .375rem;
  font-size: .8125rem;
  font-weight: 300;
  color: var(--wit-zacht);
}
.sl-meter__waarde{ color: var(--wit); font-variant-numeric: tabular-nums; }
.sl-meter__spoor{
  height: 7px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .1);
  overflow: hidden;
}
.sl-meter__vul{
  display: block;
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, #F76A3A, var(--oranje));
  transition: width 1.2s cubic-bezier(.22, .61, .24, 1);
}
.sl-meter__vul.is-goed{ background: linear-gradient(90deg, #A8E9BC, #8BE0A4); }

.sl-rap__cijfers{
  display: grid;
  gap: .75rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding-top: clamp(1.25rem, 3vw, 1.5rem);
  border-top: 1px solid var(--rand);
}
.sl-rap__cijfer b{
  display: block;
  font-size: 1.5rem;
  font-weight: 360;
  color: var(--wit);
  font-variant-numeric: tabular-nums;
}
.sl-rap__cijfer span{
  font-size: .8125rem;
  font-weight: 300;
  color: var(--wit-gedempt);
}

/* ⚠️ De onderkant van de bevinding loopt weg in een vervaging. Dat is
   bewust: je ziet dat er meer staat dan je nu kunt lezen, en dat is precies
   de reden om de scan te doen. De laatste zin en de automations blijven
   herkenbaar, ze worden alleen onscherp; wie het wil lezen doet de scan.
   De laag ligt over de kaart heen en vangt geen kliks (pointer-events). */
.sl-rap__bevinding{
  position: relative;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: 1.125rem;
  border: 1px solid var(--rand);
  border-radius: 14px;
  background: rgba(255, 255, 255, .03);
}
.sl-rap__bevinding h3{
  margin: 0 0 .625rem;
  font-size: 1rem;
  font-weight: 500;
  color: var(--wit);
}
.sl-rap__bevinding p{
  margin: 0 0 .625rem;
  font-size: .875rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--wit-zacht);
}
.sl-rap__bevinding p b{
  font-weight: 500;
  color: var(--wit);
}
.sl-rap__chips{ display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .875rem; }
.sl-rap__bevinding::after{
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 58%;
  border-radius: 0 0 13px 13px;
  pointer-events: none;
  backdrop-filter: blur(3.5px);
  -webkit-backdrop-filter: blur(3.5px);
  background: linear-gradient(to bottom,
    rgba(13, 25, 18, 0) 0%, rgba(13, 25, 18, .55) 70%, rgba(13, 25, 18, .82) 100%);
  /* Het masker laat de vervaging zelf oplopen, zodat er geen zichtbare
     rand ontstaat waar de laag begint. */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 62%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 62%);
}

.sl-rap__chips span{
  padding: .3125rem .625rem;
  border: 1px solid rgba(240, 90, 40, .32);
  border-radius: 999px;
  background: rgba(240, 90, 40, .08);
  font-size: .75rem;
  font-weight: 300;
  color: var(--wit-zacht);
}
.sl-rap__voet{
  margin: 1rem 0 0;
  font-size: .75rem;
  font-weight: 300;
  color: var(--wit-gedempt);
  text-align: center;
}

/* Job en het kantoor in één blok: hij links, en de twee foto's als
   bescheiden strook onder zijn tekst. Twee losse secties maakten er
   een fotoreportage van, en daar gaat deze pagina niet over. */
/* De voetregel van het blok: de foto's links, de uitnodiging rechts, één
   haarlijn erboven. Zo staat het kantoor er wel bij zonder een sectie op
   zichzelf te worden. */
.sl-host__voet{
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rand);
}
.sl-host__kantoor{
  display: flex;
  gap: .625rem;
}
.sl-host__kantoor figure{ margin: 0; }
.sl-host__kantoor img{
  display: block;
  width: 7.5rem;
  /* ⚠️ height:auto is nodig omdat de img een height-attribuut draagt: dat
     telt als opmaak en wint anders van de aspect-ratio hieronder. */
  height: auto;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--rand);
}

/* De WhatsApp-regel: voor wie liever langskomt dan videobelt. */
.sl-app{
  flex: 1 1 16rem;
  margin: 0;
  font-size: .875rem;
  font-weight: 300;
  color: var(--wit-zacht);
}
.sl-app b{ font-weight: 500; color: var(--wit); }
/* In het slot staat dezelfde regel los onder de knoppen; daar hoort hij
   wél wat lucht boven zich te hebben. */
.sl-slot .sl-app{ margin-top: 1rem; text-align: center; }
.sl-app a{
  color: var(--wit);
  text-decoration-color: rgba(255, 255, 255, .4);
  text-underline-offset: 3px;
}

/* ------------------------------------------------------------------
   De beoordelingsregel: dezelfde vier gezichten, sterren en score als
   op de homepage en boven de kennisbank. ⚠️ Wijzigt die regel daar,
   wijzig hem hier mee: drie versies van hetzelfde cijfer is erger dan
   geen cijfer.
   ------------------------------------------------------------------ */
.bewijs{
  display: inline-flex;
  align-items: center;
  gap: .75rem;
  margin-top: 1.25rem;
}
.gezichten{ display: inline-flex; flex-direction: row-reverse; }
.gezichten img{
  width: 1.625rem;
  height: 1.625rem;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(10, 20, 14, .9);
  box-shadow: 0 2px 8px -2px rgba(0, 0, 0, .6);
}
.gezichten img + img{ margin-right: -.6875rem; }
.bewijs__tekst{
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-size: .9375rem;
  font-weight: 200;
  color: rgba(255, 255, 255, .92);
}
.bewijs__tekst strong{ font-weight: 500; }
.bewijs__sterren{ color: #FFC107; font-size: .8125rem; letter-spacing: .08em; }
/* Op een telefoon blijft alleen de score staan. De tweede helft duwde de
   regel naar twee regels, en dan leest een cijfer als een zin. */
.bewijs__extra{ display: inline-flex; align-items: center; gap: .5rem; }
@media (max-width: 560px){
  .bewijs__extra{ display: none; }
}
.bewijs__scheiding{
  width: 1px;
  height: .875rem;
  background: rgba(255, 255, 255, .28);
}

/* De tools. Bewust lichte tegels en geen donkere: tussen de iconen
   zitten merken met een bijna zwarte huisstijl (Notion, Zendesk) en
   die verdwijnen op een donkere tegel. Zelfde keuze als op de
   homepage; hier staan ze stil, want een tweede lopende band naast
   de scan zelf voegt niets toe. */
.sl-tools{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .75rem;
}
.sl-tool{
  width: 4rem;
  height: 4rem;
  display: grid;
  place-items: center;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, .34);
  background: linear-gradient(160deg,
    rgba(255, 255, 255, .60) 0%, rgba(255, 255, 255, .40) 100%);
  backdrop-filter: blur(8px) saturate(120%);
  -webkit-backdrop-filter: blur(8px) saturate(120%);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .45) inset,
              0 10px 24px -14px rgba(0, 0, 0, .5);
}
.sl-tool img{ width: 1.875rem; height: 1.875rem; object-fit: contain; opacity: .88; }
@media (max-width: 560px){
  .sl-tool{ width: 3.25rem; height: 3.25rem; border-radius: 12px; }
  .sl-tool img{ width: 1.5rem; height: 1.5rem; }
}

/* Voor jou en niet voor jou. Het rechterrijtje is er niet om aardig
   te zijn: wie zichzelf daarin herkent en toch de scan doet, kost een
   gesprek dat niets oplevert. */
.sl-past{
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}
.sl-past__kolom{
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--rand);
  border-radius: 16px;
  background: rgba(255, 255, 255, .03);
}
.sl-past__kolom b{
  display: block;
  margin-bottom: .875rem;
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--wit-gedempt);
}
.sl-past__kolom ul{ margin: 0; padding: 0; list-style: none; }
.sl-past__kolom li{
  position: relative;
  margin-bottom: .625rem;
  padding-left: 1.625rem;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.55;
  color: var(--wit-zacht);
}
.sl-past__kolom li:last-child{ margin-bottom: 0; }
.sl-past__kolom li::before{
  position: absolute;
  left: 0;
  top: 0;
  font-size: .875rem;
}
.sl-past--wel li::before{ content: "\2713"; color: #8BE0A4; }
.sl-past--niet li::before{ content: "\2715"; color: #FF9B7A; }

/* Job. Op een breed scherm de foto links en de tekst rechts; het is
   één blok en geen kaartenrij, want het gaat over één persoon. */
.sl-host{
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  /* ⚠️ Bovenaan uitlijnen en niet centreren: met center zweefde de foto
     halverwege de tekst en liep niets meer op één lijn. */
  align-items: start;
  grid-template-columns: 1fr;
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  border: 1px solid var(--rand);
  border-radius: 20px;
  background: rgba(255, 255, 255, .04);
}
@media (min-width: 44rem){
  .sl-host{ grid-template-columns: 14rem 1fr; }
}
.sl-host__foto{
  width: 100%;
  height: auto;
  max-width: 14rem;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  border-radius: 16px;
  justify-self: center;
}
.sl-host__rol{
  display: block;
  margin-bottom: .5rem;
  font-size: .6875rem;
  font-weight: 500;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--oranje);
}
.sl-host h2{
  margin: 0 0 .75rem;
  text-align: left;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem);
}
.sl-host p{
  margin: 0 0 .875rem;
  font-size: .9375rem;
  font-weight: 300;
  line-height: 1.65;
  color: var(--wit-zacht);
  text-wrap: pretty;
}
.sl-host p:last-of-type{ margin-bottom: 0; }
.sl-host__cijfers{
  /* Een raster en geen flexrij: op een telefoon duwde het langste label
     ("gemiddeld bespaard per week") de drie cijfers onder elkaar, en dan
     kost één regel bewijs een half scherm. */
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
  gap: 1.25rem 1.5rem;
  margin-top: 1.25rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--rand);
}
.sl-host__cijfer b{
  display: block;
  font-size: 1.375rem;
  font-weight: 360;
  color: var(--wit);
  font-variant-numeric: tabular-nums;
}
.sl-host__cijfer span{
  font-size: .8125rem;
  font-weight: 300;
  color: var(--wit-gedempt);
}