/* WS15 DE GARANTIE, STATEMENTPANEEL.
   V1 17-09 (middag): tweekoloms paneel, statement + CTA links, drie vraag/antwoord-regels rechts.
   V2 17-09 (avond, feedback Timo): "het moet duidelijk zijn dat dit echt even een ander ding is,
   een statement, bam, hier staat iets belangrijks". Daarom: alles gecentreerd in de volgorde
   merkteken (schild met vinkje), eyebrow, kop met de slotregel als highlight, de zekerheidszin,
   dan de drie punten NAAST elkaar en een maat groter tussen twee lijnen, dan de CTA. Het schild
   staat er twee keer: klein als badge boven de eyebrow en groot als watermerk rechtsonder (4,5%
   wit op navy), zodat het paneel niet leest als het zoveelste donkere vlak. Het paneel blijft een
   paneel op licht (huisregel 15-09: de FAQ-band erna is al navy). */
.ws-garantie-paneel {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  justify-items: center;
  text-align: center;
  background:
    radial-gradient(70% 90% at 50% -20%, var(--navy-800) 0%, transparent 60%),
    var(--surface-deep);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-lift);
  padding: clamp(36px, 4.5vw, 60px) clamp(24px, 5vw, 80px); /* 17-09 laat: verticaal dunner */
}
/* .ws-garantie-merk: de badge boven de eyebrow is 17-09 laat uit het sjabloon gehaald (Timo); regels blijven voor als hij terugkomt. */
.ws-garantie-merk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line-inv);
  background: var(--navy-900);
  color: var(--orange-500);
  margin-bottom: 22px;
}
.ws-garantie-merk svg { width: 30px; height: 30px; }
.ws-garantie-copy {
  display: grid;
  justify-items: center;
  max-width: 64ch;
}
.ws-garantie-copy .eyebrow { margin-bottom: 20px; }
.ws-garantie-copy h2 {
  font-size: clamp(2.3rem, 3.8vw, 3.6rem);
  color: var(--text-strong-inv);
  margin-bottom: 18px;
  max-width: 24ch;
  text-wrap: balance;
}
.ws-garantie-copy .lead {
  color: var(--text-body-inv);
  max-width: 52ch;
}
.ws-garantie-lijst {
  display: grid;
  /* 18-09-2026: VIER kolommen i.p.v. drie. De maand-2/3-regeling is als derde vraag toegevoegd
     (ws15/es15/hh13/sr14). Drie kolommen lieten het vierde item als wees op een tweede rij vallen.
     De strook is daarvoor iets verbreed en de celpadding iets ingenomen; onder 1180 gaat hij naar
     2x2 en onder 900 naar één kolom (zie de mediaregels onderaan). */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  width: 100%;
  max-width: 1180px;
  margin: clamp(22px, 2.6vw, 32px) 0 0;
  padding: clamp(18px, 2.2vw, 26px) 0;
  list-style: none;
  border-top: 1px solid var(--line-inv);
  border-bottom: 1px solid var(--line-inv);
}
.ws-garantie-lijst li {
  padding: 0 clamp(14px, 1.7vw, 24px);
  border: 0;
}
.ws-garantie-lijst li + li { border-left: 1px solid var(--line-inv); }
.ws-garantie-vraag {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  /* 23-09-2026 (Timo): lichtblauw in plaats van oranje, op alle vier de pagina's die dit blok dragen (W&S, ES, HH,
     sales). Zo zijn de eyebrow en de knop de enige oranje in het paneel en springt de knop eruit. Was: var(--orange-500). */
  color: var(--blue-200);
  margin-bottom: 10px;
}
.ws-garantie-antwoord {
  margin: 0 auto;
  font-weight: 700;
  font-size: var(--text-lead); /* 17-09 laat (Timo): even groot als de zekerheidszin, wel wit en vet */
  line-height: 1.4;
  color: var(--text-strong-inv);
  max-width: 30ch;
}
.ws-garantie-ctas {
  display: grid;
  justify-items: center;
  margin-top: clamp(22px, 2.6vw, 30px);
}
.ws-garantie-micro {
  margin: 14px 0 0;
  font-size: 13px;
  color: var(--text-muted-inv);
}
/* 17-09 laat: custom badge (lijntekening, wit) i.p.v. het standaardschild; groter, hoger in beeld. */
.ws-garantie-watermerk {
  position: absolute;
  right: -9%;   /* 17-09 laat (Timo): groter en verder naar rechts; de badge heeft rechts eigen lucht
                   in het bestand, dus een deel van die -9% is marge en niet inkt */
  bottom: -8%;
  width: clamp(340px, 46vw, 720px);
  aspect-ratio: 1 / 1;
  color: #fff;
  opacity: .08;
  z-index: -1;
  pointer-events: none;
}
.ws-garantie-watermerk svg, .ws-garantie-watermerk img { width: 100%; height: 100%; object-fit: contain; }
@media (max-width: 1180px) and (min-width: 901px) {
  /* 18-09: vier smalle kolommen worden hier te krap voor de langste antwoordregel, dus 2x2. */
  .ws-garantie-lijst { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 24px; }
  .ws-garantie-lijst li:nth-child(odd) { border-left: 0; }
  .ws-garantie-lijst li:nth-child(n + 3) { padding-top: 24px; border-top: 1px solid var(--line-inv); }
}
@media (max-width: 900px) {
  .ws-garantie-lijst { grid-template-columns: minmax(0, 1fr); row-gap: 22px; }
  .ws-garantie-lijst li { padding: 0; }
  .ws-garantie-lijst li + li { border-left: 0; border-top: 1px solid var(--line-inv); padding-top: 22px; }
  .ws-garantie-antwoord { max-width: 34ch; }
  .ws-garantie-copy h2 { max-width: none; }
}
@media (max-width: 560px) {
  .ws-garantie-paneel { padding: 36px 22px; }
  .ws-garantie-copy h2 { font-size: clamp(1.9rem, 8.4vw, 2.4rem); text-wrap: balance; }
  /* de <br> blijft ook op 390 staan: verbergen plakte "proeftijd." en "Anders" aan elkaar (geen spatie in de bron) */
  .ws-garantie-ctas .btn { width: 100%; justify-content: center; }
}

/* ── HIGHLIGHT OP DE GARANTIEKOP, 18-09-2026 (Timo) ──────────────────────────────────────────────
   "Anders betaal je niets." krijgt WEL het lichtblauwe blokje, terwijl base.css het blokje op een
   donkere ondergrond juist uitzet. Dat mag hier omdat de letters in het blokje donker worden en niet
   wit blijven: wit op --blue-200 is 1,58:1 en 🔬 op de proefrender verdween het woord bijna. Een dun
   donker randje om de witte letters maakte het wel leesbaar, maar leverde een holle outline-letter
   op. Donkere letters op het blauw, net als in een lichte sectie, leest gewoon.

   ⚠ De zes lagen hieronder zijn het blokje-recept uit base.css, hier opnieuw uitgeschreven. Dat is
   geen kopieerluiheid maar noodzaak: `.on-dark .hl` in base.css zet `background: none`, en die
   shorthand gooit het background-image weg. Terugzetten kan alleen door het opnieuw te noemen.
   ⚠ Verander je de maten in base.css (--hl-top / --hl-h / --r-sm), pas ze hier dan mee aan.

   REGELAFSTAND. De kop staat op .95 (base.css, `.on-dark h2:has(.hl)`) en dat blijft zo: de twee
   regels van "Een geslaagde plaatsing, inclusief proeftijd." moeten dicht op elkaar staan. Alleen de
   LAATSTE regel zakt, met een marge op een eigen blokregel in plaats van met regelafstand. Het
   blokje begint op 0,183em vanaf de bovenkant van zijn fontbox en de baseline erboven ligt op
   1,18em, dus zonder marge valt het blokje 0,047em OVER de inkt van de regel erboven. 0,18em marge
   maakt daar 0,13em lucht van: dezelfde 0,13em die het blokje links en rechts van het woord houdt. */
#ws-garantie-titel .hl-regel { display: block; margin-top: .18em; }
#ws-garantie-titel .hl {
  --blok-c: var(--blue-200);
  --blok-r: var(--r-sm);
  --blok-top: .183em;
  --blok-h: 1.135em;
  background:
    radial-gradient(circle at 100% 100%, var(--blok-c) calc(var(--blok-r) - .6px), transparent var(--blok-r))
      0 var(--blok-top) / var(--blok-r) var(--blok-r) no-repeat,
    radial-gradient(circle at 0 100%, var(--blok-c) calc(var(--blok-r) - .6px), transparent var(--blok-r))
      100% var(--blok-top) / var(--blok-r) var(--blok-r) no-repeat,
    radial-gradient(circle at 100% 0, var(--blok-c) calc(var(--blok-r) - .6px), transparent var(--blok-r))
      0 calc(var(--blok-top) + var(--blok-h) - var(--blok-r)) / var(--blok-r) var(--blok-r) no-repeat,
    radial-gradient(circle at 0 0, var(--blok-c) calc(var(--blok-r) - .6px), transparent var(--blok-r))
      100% calc(var(--blok-top) + var(--blok-h) - var(--blok-r)) / var(--blok-r) var(--blok-r) no-repeat,
    linear-gradient(var(--blok-c), var(--blok-c))
      var(--blok-r) var(--blok-top) / calc(100% - 2 * var(--blok-r)) var(--blok-h) no-repeat,
    linear-gradient(var(--blok-c), var(--blok-c))
      0 calc(var(--blok-top) + var(--blok-r)) / 100% calc(var(--blok-h) - 2 * var(--blok-r)) no-repeat;
  color: var(--navy-950);
  padding-inline: .13em;
  margin-inline: -.13em;
}


/* ── HIGHLIGHT OP MOBIEL: GEEN OVERLAP, 23-09-2026 (Timo) ─────────────────────────────────────────
   Onder 560px breekt "Anders betaal je niets." in het Nederlands over twee regels. Het blokje is 1,135em hoog, de
   regelafstand .95em: dan schuiven de twee blokjes 0,185em over elkaar (🔬 Timo's schermafdruk, op alle vier de
   pagina's). Alleen voor deze laatste blokregel 1.25: 0,115em lucht tussen de blokjes, bijna de 0,13em die het
   blokje links en rechts houdt. De extra halve regelafstand erboven (0,15em) gaat van de marge af, zodat de
   afstand tot "inclusief proeftijd." gelijk blijft (was .18em). Op desktop past hij op één regel en verandert er niets. */
@media (max-width: 560px) {
  #ws-garantie-titel .hl-regel { line-height: 1.25; margin-top: .03em; }
}