/* ── Social proof + verantwoording op de funnelpagina's ─────────────
   Eigen bestand met eigen class-prefix (.stk-proof), want dit blok staat
   op pagina's die verschillende stylesheets laden: homepage.css,
   ere-landing.css en calculator.css. Afhankelijk zijn van .hp-root zou
   betekenen dat het blok op de helft van die pagina's kaal rendert.
   Alleen claims die aantoonbaar vaststaan; ISO 27001, een compliance-
   partner en een derdenrekening staan er bewust niet in, die zijn niet
   bevestigd. Zie stekker/backlog#2227. */
.stk-proof{
  --stk-ink:#000538; --stk-ink-soft:#3D405A; --stk-mute:#657176;
  --stk-line:#e2e8e9; --stk-green:#087E65; --stk-green-bg:#E3FDE4;
  --stk-blue:#0058C6; --stk-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:#fdfdfc; border-top:1px solid var(--stk-line);
  border-bottom:1px solid var(--stk-line); padding:56px 24px;
  font-family:Poppins,ui-sans-serif,system-ui,"Segoe UI",Roboto,sans-serif;
  color:var(--stk-ink);
}
.stk-proof-inner{max-width:1040px;margin:0 auto}
.stk-proof-eyebrow{font-family:var(--stk-mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--stk-mute);margin:0 0 18px;text-align:center}
.stk-proof-quotes{display:grid;gap:16px}
@media(min-width:46rem){.stk-proof-quotes{grid-template-columns:repeat(3,minmax(0,1fr))}}
.stk-proof-quotes br{display:none}
.stk-quote{background:#fff;border:1px solid var(--stk-line);border-radius:12px;
  padding:22px;display:flex;flex-direction:column;gap:12px}
.stk-quote blockquote{margin:0;font-size:15px;line-height:1.55;color:var(--stk-ink-soft)}
/* wpautop wikkelt inline-inhoud in een <p>: het bijschrift is daardoor geen
   flex-item meer en margin-top:auto duwt het niet naar beneden. Daarom op het
   laatste kind, wat die <p> ook mag zijn, en marges van wpautop uitzetten. */
.stk-quote p{margin:0}
.stk-quote > :last-child{margin-top:auto}
.stk-quote cite{font-style:normal;font-size:13px;color:var(--stk-mute)}
.stk-quote cite b{display:block;font-size:14px;font-weight:600;color:var(--stk-ink)}
.stk-proof-trust{margin-top:44px;padding-top:32px;border-top:1px dashed var(--stk-line)}
.stk-proof-list{list-style:none;margin:0;padding:0;display:grid;gap:16px 28px;align-items:stretch}
@media(min-width:40rem){.stk-proof-list{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:64rem){.stk-proof-list{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stk-proof-list br{display:none}
/* Het vinkje staat als achtergrond op de li, niet als ::before-flexitem.
   Met display:flex worden een <b> en de tekst erachter twee losse flex-items
   en breekt de regel in twee smalle kolommen. */
.stk-proof-list li{display:block;padding-left:28px;font-size:14px;line-height:1.45;
  color:var(--stk-ink-soft);
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23E3FDE4'/%3E%3Cpath d='M14.5 6.5 8.5 13l-3-3' fill='none' stroke='%23087E65' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:0 1px;background-size:18px 18px}
.stk-proof-more{margin:40px 0 0;text-align:center;font-size:14px}
.stk-proof-more a{color:var(--stk-blue);text-decoration:none;font-weight:500}
.stk-proof-more a:hover{text-decoration:underline}
.stk-proof-more a:focus-visible{outline:2px solid var(--stk-blue);outline-offset:2px}
@media(max-width:40rem){.stk-proof{padding:40px 16px}.stk-quote{padding:18px}}

/* Verantwoordingspagina: hetzelfde lijstje, maar als hoofdinhoud in plaats
   van een strip onder aan een funnelpagina. */
.stk-proof-page{border-top:0;border-bottom:0;background:transparent;padding:8px 24px 8px}
.stk-proof-list-page{gap:20px}
@media(min-width:64rem){.stk-proof-list-page{grid-template-columns:repeat(2,minmax(0,1fr))}}
.stk-proof-list-page li{font-size:15px;line-height:1.55}
.stk-proof-list-page li b{color:var(--stk-ink)}

/* Onderaan de homepage staan alleen de wapenfeiten, zonder de quotes. Dan is
   de scheidingslijn en de bovenmarge van het trust-blok overbodig. */
.stk-proof-bottom{padding:44px 24px}
.stk-proof-bottom .stk-proof-trust{margin-top:0;padding-top:0;border-top:0}

/* Vijf punten passen niet netjes in een vier-koloms raster: de vijfde blijft
   alleen achter. Gecentreerd laten teruglopen leest als een bewuste rij. */
@media(min-width:64rem){
  .stk-proof-list{display:flex;flex-wrap:wrap;justify-content:center;align-items:stretch;gap:16px 32px}
  .stk-proof-list li{flex:0 1 auto;max-width:280px}
  .stk-proof-list-page{display:grid;gap:20px;grid-template-columns:repeat(2,minmax(0,1fr))}
  .stk-proof-list-page li{max-width:none}
}

/* ── Verantwoording prominenter ─────────────────────────────────────
   De rij las als een voetnoot onder de quotes: kleine grijze regeltjes.
   Nu tegels met een vlak, een rand en vette tekst, en een groter vinkje.
   De verantwoordingspagina houdt de rustige variant, want daar staan hele
   zinnen in plaats van korte wapenfeiten. Zie stekker/backlog#2227. */
.stk-proof-trust .stk-proof-eyebrow{
  font-family:Poppins,ui-sans-serif,system-ui,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.16em;
  color:var(--stk-green);margin-bottom:24px}
.stk-proof-list li{
  background-color:#fff;
  border:1px solid var(--stk-line);border-radius:12px;
  padding:16px 20px 16px 52px;
  font-size:15px;font-weight:600;line-height:1.4;color:var(--stk-ink);
  background-position:18px 15px;background-size:22px 22px}
@media(min-width:64rem){
  .stk-proof-list{gap:14px}
  .stk-proof-list li{max-width:320px}
}
/* De pagina-variant blijft leestekst, geen tegels. */
.stk-proof-list-page li{
  background-color:transparent;border:0;border-radius:0;
  padding:0 0 0 28px;font-weight:400;font-size:15px;line-height:1.55;
  color:var(--stk-ink-soft);
  background-position:0 1px;background-size:18px 18px}
.stk-proof-list-page li b{font-weight:600;color:var(--stk-ink)}
.stk-proof-list-page{align-items:start}

/* De pagina-variant deelt de class .stk-proof-list, dus de tegelbreedte van
   de strip sloeg er ook op neer en maakte de kolommen te smal. Hier weer
   losgetrokken; deze regels staan bewust als laatste in het bestand. */
.stk-proof-list-page li{max-width:none;background-color:transparent;border:0;
  padding:0 0 0 28px;font-weight:400;background-position:0 1px;background-size:18px 18px}
.stk-proof-list-page li b{font-weight:600;color:var(--stk-ink)}
@media(min-width:64rem){.stk-proof-list-page li{max-width:none}}