/* TableFlow, overige pagina's in de familiestijl.
   Bovenop /familie/familie.css. Sinds v3 (16-10-2026, ronde 4) zoals de homepage: Apple x Gen Z.
   Wit en Apple-grijs, kaarten zonder rand en schaduw, een sticker in de held, oogkoppen in de
   accentkleur zonder kapitalen, cijfers en citaten in Bricolage. Geen serif, geen linnen, geen messing.
   Lijniconen in plaats van emoji (tools/familie_iconen.py).
   Alleen wat de familiekit niet heeft: de bouwstenen van de functie-, integratie-, vergelijk-,
   landen-, steden- en juridische pagina's. Kleuren en vormen komen uit de familietokens.
   Gezet door tools/familie_schil.py. */

/* oude variabelen in inline styles wijzen naar de familietokens */
[data-app=tableflow]{
  --brand-50:var(--tint);--brand-100:var(--tint);--brand-200:#C9E8D7;--brand-300:var(--acc-light);
  --brand-400:var(--acc-light);--brand-500:var(--acc);--brand-600:var(--acc-ink);--brand-700:var(--acc-ink);
  --brand-800:var(--ink);--brand-900:var(--ink);
  --stone-50:var(--soft);--stone-100:var(--line);--stone-200:var(--line);--stone-300:#D2D2D7;
  --stone-400:var(--muted);--stone-500:var(--muted);--stone-600:var(--ink-2);--stone-700:var(--ink-2);
  --stone-800:var(--ink);--stone-900:var(--ink);
  --gold:var(--amber);--red:#D93B3B;--section-py:64px;--ease:cubic-bezier(.16,1,.3,1)
}
main{display:block}
main a:not(.btn){color:var(--acc-ink);text-decoration-thickness:1px;text-underline-offset:3px}
main strong{color:var(--ink)}
main ul,main ol{padding-left:0}
main img{height:auto}
main h2,main h3,main h4{color:var(--ink)}

/* kruimelpad */
.breadcrumb{font-size:13.5px;color:var(--muted);padding:14px 0 0;background:#fff}
.breadcrumb a{color:var(--ink-2);text-decoration:none;font-weight:600}
.breadcrumb a:hover{color:var(--acc-ink)}

/* held: wit met een zachte gloed in de accentkleur (zoals .hero3), de pil wordt de sticker van de pagina */
.held{padding:0}
.hero.held{background:#fff}
.hero.held::before,.groups-hero::before{background:radial-gradient(760px 360px at 50% 100%,var(--tint-2),var(--tint) 40%,transparent 72%);opacity:.8;
  -webkit-mask-image:linear-gradient(transparent 30%,#000 65%,#000 75%,transparent);mask-image:linear-gradient(transparent 30%,#000 65%,#000 75%,transparent)}
.held .pil,.groups-hero .hero-content > .pil{transform:rotate(-2.5deg);background:var(--acc);color:#fff;border:0;border-radius:12px;padding:9px 14px 10px;
  font:800 15px/1 Brico,Inter,sans-serif;letter-spacing:-.01em;box-shadow:0 5px 0 color-mix(in srgb,var(--acc-ink) 80%,#000)}
.held .pil .stip,.groups-hero .pil .stip{display:none}
.held .pil img{border-radius:5px;background:#fff}
.hero.held .wrap{display:block;text-align:center;padding-top:64px;padding-bottom:80px;max-width:980px}
.held h1{font-size:clamp(38px,5.2vw,68px);margin:20px auto 0;max-width:15em}
.held .lead{margin:20px auto 0;max-width:640px}
.held .hero-buttons{justify-content:center}
.held .intg-hero-logo{display:flex;justify-content:center;margin:0 0 18px}
.held .intg-hero-logo img{height:48px;width:auto;max-width:240px;object-fit:contain}
.held > .wrap > div[style]{color:var(--muted)!important}
@media(max-width:900px){.hero.held .wrap{padding-top:36px;padding-bottom:56px}}

/* lijniconen (tools/familie_iconen.py): kaal in de accentkleur, zoals de bento op de homepage */
.ic,.bi,.pain-icon,.usecase-icon,.pipeline-feat-icon,.tegel .ic{width:40px;height:40px;border-radius:0;background:none;color:var(--acc-ink);display:flex;align-items:center;justify-content:flex-start;flex:none;box-shadow:none}
.ic svg,.bi svg,.pain-icon svg,.usecase-icon svg,.pipeline-feat-icon svg,svg.li{width:32px;height:32px;display:block}

/* oogkop: een label boven een sectiekop is een korte regel in de accentkleur, zoals .oog in v3 */
main .sec-s .pil,main .showcase-text .pil,main .tfv .pil,main .pain .pil,main .pipeline .pil,main .usecases .pil,main .numbers .pil,main .groups-quote .pil{
  display:inline-flex;background:none;border:0;border-radius:0;padding:0;box-shadow:none;gap:0;font:600 15px/1.2 Inter,sans-serif;letter-spacing:-.01em;text-transform:none;color:var(--acc-ink)}
main .sec-s .pil .stip{display:none}
@media(max-width:560px){main [style*="text-align:center"] .pil{max-width:100%;text-align:center}}

/* secties */
.sec-s{position:relative}
.vlak{background:var(--soft)}
.sec-s .pil,.showcase-text .pil,.tfv .pil{margin-bottom:18px}
.sec-s .h2{font-size:clamp(30px,3.8vw,48px);margin:0 0 6px}
.sec-s .wrap[style*="center"] .lead,.sec-s .wrap[style*="center"] .h2{margin-left:auto;margin-right:auto}
.sec-s .wrap[style*="center"] .h2{max-width:18em}
.heading-md{font-size:clamp(22px,2.6vw,28px);margin-bottom:10px}
.lead + .tegels,.lead + .steps,.lead + .cmp-table,.lead + .vragen,.lead + div{margin-top:36px}
.h2 + .tegels,.h2 + .steps,.h2 + .vragen,.h2 + .why-grid,.h2 + .country-grid{margin-top:32px}

/* bewijsregel onder de held */
.proof{padding:22px 0;background:var(--bg)}
.proof-row{display:flex;justify-content:center;flex-wrap:wrap;gap:12px}
.proof-row > div{background:var(--soft);border:0;border-radius:999px;padding:10px 18px;font-size:15px;color:var(--ink-2)}
.proof-row strong{color:var(--acc-ink);font-weight:700}

/* tegels (oude feat-grid): emoji in het familie-icoonvak, tekst links */
.tegels{margin-top:32px;text-align:left;scroll-padding-inline:var(--gut)}
.tegel h3{font-size:22px}
.tegel p{font-size:15.5px;line-height:1.6}
.tegel:hover{transform:translateY(-3px)}
.tegel{transition:transform .2s,box-shadow .2s}

/* stappen */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:32px;text-align:left}
.step{background:var(--soft);border:0;border-radius:var(--r);padding:28px 26px}
.vlak .step{background:#fff}
.step-n{display:block;font:800 44px/1 Brico,Inter,sans-serif;letter-spacing:-.045em;color:var(--acc-ink);margin-bottom:14px}
.step h4{font-size:19px;margin-bottom:8px;line-height:1.15}
.step p{font-size:15px;color:var(--ink-2);line-height:1.55}
@media(max-width:900px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.steps{grid-template-columns:1fr}}

/* beeld */
.show-img,.img-block{max-width:1040px;margin:0 auto;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.show-img img,.img-block img{width:100%;aspect-ratio:16/9;object-fit:cover}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1080px;margin:0 auto}
.two-col .show-img{max-width:none}
.two-col ul{margin-top:18px!important;font-size:16.5px!important}
@media(max-width:860px){.two-col{grid-template-columns:1fr;gap:28px}}
.showcase{padding:56px 0}
.showcase-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;max-width:1080px;margin:0 auto}
.showcase-image{border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);aspect-ratio:4/3;background:var(--soft)}
.showcase-image img{width:100%;height:100%;object-fit:cover}
.showcase.reverse .showcase-grid{direction:rtl}
.showcase.reverse .showcase-grid > *{direction:ltr}
.showcase-text h3{font-size:clamp(26px,2.8vw,34px);margin-bottom:12px}
.showcase-text p{font-size:17px;color:var(--ink-2);line-height:1.65}
@media(max-width:780px){.showcase-grid{grid-template-columns:1fr;gap:24px}}

/* vergelijkingstabel */
.cmp-table{width:100%;max-width:940px;margin:32px auto 0;border-collapse:separate;border-spacing:0;background:#fff;border:0;border-radius:var(--r);overflow:hidden;box-shadow:none;font-size:15px;text-align:left}
.cmp-table th,.cmp-table td{padding:15px 18px;border-bottom:1px solid var(--line);vertical-align:top}
.cmp-table thead th{background:var(--soft);font:700 15px/1.3 Inter,sans-serif;letter-spacing:-.01em;text-transform:none;color:var(--ink)}
.cmp-table thead th.tf{background:var(--tint);color:var(--acc-ink)}
.cmp-table tr:last-child td{border-bottom:0}
.cmp-table .feat-name{font-weight:600;color:var(--ink)}
.cmp-table .yes,.mark-y{color:var(--acc-ink);font-weight:700}
.mark-y,.mark-n,.mark-p{font-size:18px}
.cmp-table .no{color:#B42318}
.mark-n{color:#A1A1A6;font-weight:700}
.cmp-table .partial,.mark-p{color:#B45309;font-weight:700}
.cmp-table .pkg{display:inline-block;margin-left:6px;padding:2px 8px;border-radius:99px;font-size:11.5px;font-weight:700;background:var(--tint);color:var(--acc-ink);vertical-align:middle;white-space:nowrap}
.cmp-table .bron{display:block;font-size:12.5px;color:var(--muted);font-weight:400;margin-top:3px}
.cmp-table .onbekend{color:var(--muted);font-style:italic}
@media(max-width:640px){
.cmp-table,.cmp-table tbody,.cmp-table tr{display:block;width:100%}
.cmp-table thead{display:none}
.cmp-table tr{border-bottom:1px solid var(--line);padding:14px 16px}
.cmp-table tr:last-child{border-bottom:0}
.cmp-table td{display:flex;justify-content:space-between;gap:12px;border:0!important;padding:3px 0!important;text-align:right}
.cmp-table td:first-child{display:block;text-align:left;font-weight:600;padding-bottom:6px!important}
.cmp-table td[data-label]::before{content:attr(data-label);font-weight:500;color:var(--muted);text-align:left}
.cmp-table td .pkg{flex:none;align-self:flex-start;margin-top:2px}
}
.pay-marks{display:flex;align-items:center;justify-content:center;gap:22px;flex-wrap:wrap;margin-top:22px}
.pay-marks img{height:26px;width:auto;opacity:.9}
.pay-marks img[alt=Mollie]{height:20px}

/* citaat: groot in Bricolage met aanhalingstekens in de accentkleur, zoals .b3-quote op de homepage */
.quote-box,.quote-card{position:relative;background:none;color:var(--ink);border-radius:0;padding:0;margin:8px auto 0;max-width:900px;box-shadow:none;text-align:center}
.quote-text,.quote-card{font:800 clamp(30px,4vw,52px)/1.04 Brico,Inter,sans-serif;letter-spacing:-.04em;color:var(--ink);text-wrap:balance}
.quote-text::before{content:"\201C";color:var(--acc)}
.quote-text::after{content:"\201D";color:var(--acc)}
.quote-text{margin-bottom:22px}
.quote-author{font-size:15px;color:var(--muted);font-weight:600;font-style:normal;font-family:Inter,sans-serif}

/* vragen: familie .vragen, plus de oude varianten */
.vragen{margin-top:32px;text-align:left}
.vragen details p{font-size:16px;line-height:1.6}
.vragen details > div,.vragen details > p + p{padding:0 24px 22px;color:var(--ink-2)}
.vragen summary{color:var(--ink)}

.updated-line{text-align:center;font-size:13px;color:var(--muted);padding:28px 0 0}

/* landen en steden */
.why-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px;text-align:left}
/* kaarten: Apple-grijs zonder rand of schaduw; in een grijs vlak wit (zoals de bento) */
.why-card,.country-card,.intg-card,.benefit,.flow3 .step,.gc-step,.pain-card,.usecase,.number-card,.pipeline-feat,.tegel{background:var(--soft);border-radius:var(--r);box-shadow:none;border:0}
.vlak :is(.why-card,.country-card,.intg-card,.benefit,.flow3 .step,.gc-step,.pain-card,.usecase,.number-card,.pipeline-feat,.tegel){background:#fff}
.country-card{border-radius:var(--r-s)}
.why-card{padding:28px 26px}
.why-card h3{font-size:22px;margin-bottom:10px}
.why-card p{font-size:15.5px;color:var(--ink-2);line-height:1.6}
@media(max-width:780px){.why-grid{grid-template-columns:1fr}}
.country-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:28px;text-align:left}
.country-card{display:flex;align-items:center;gap:12px;padding:16px 18px;text-decoration:none!important;color:var(--ink)!important;transition:transform .2s}
.country-card:hover{transform:translateY(-2px)}
.country-card .flag{font-size:24px}
.country-card .name{font-weight:700;display:block}
.country-card .meta{font-size:12.5px;color:var(--muted)}
@media(max-width:980px){.country-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:640px){.country-grid{grid-template-columns:repeat(2,1fr)}}

/* integraties */
.intg-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px;text-align:left}
.intg-card{display:block;padding:28px;text-decoration:none!important;color:var(--ink)!important;transition:transform .2s,box-shadow .2s}
.intg-card:hover{transform:translateY(-3px)}
.intg-card-logo{height:40px;margin-bottom:16px;display:flex;align-items:center}
.intg-card-logo img{height:34px;width:auto;max-width:200px;object-fit:contain}
.intg-card h3{font-size:23px;margin-bottom:8px}
.intg-card p{font-size:15px;color:var(--ink-2);line-height:1.6;margin-bottom:14px}
.intg-card .go{font-size:15px;font-weight:700;color:var(--acc-ink)}
@media(max-width:760px){.intg-cards{grid-template-columns:1fr}}
.intg-badge{display:inline-block;font-size:12px;font-weight:700;color:var(--acc-ink);background:var(--tint);padding:4px 12px;border-radius:99px;margin-left:8px;vertical-align:middle}
.partner-strip{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:34px;margin-top:34px}
.partner-strip img{height:30px;width:auto;filter:grayscale(1);opacity:.75;transition:filter .2s,opacity .2s}
.partner-strip a:hover img{filter:none;opacity:1}
.held .partner-strip{margin-top:28px}
.partner-link{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:700;color:var(--acc-ink)!important;text-decoration:none!important}
.partner-link:hover{text-decoration:underline!important}
.benefit-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-top:32px;text-align:left}
.benefit{display:flex;gap:16px;padding:24px}
.benefit .bi{flex:0 0 auto;width:48px;height:48px}
.benefit h3{font-size:19px;margin-bottom:6px;line-height:1.2}
.benefit p{font-size:15px;color:var(--ink-2);line-height:1.6}
@media(max-width:760px){.benefit-grid{grid-template-columns:1fr}}
.pitch{max-width:760px;margin:0 auto;text-align:left;font-size:18px;color:var(--ink-2);line-height:1.7}
.pitch p{margin-bottom:18px}
.flow3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px;text-align:left}
.flow3 .step{padding:26px}
.flow3 .step .dir{font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--acc-ink);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.flow3 .step .ic{margin-bottom:14px}
.flow3 .step h3{font-size:20px;margin-bottom:6px}
.flow3 .step .new{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#fff;background:var(--ink);border-radius:99px;padding:3px 8px;margin-left:6px;vertical-align:middle}
@media(max-width:760px){.flow3{grid-template-columns:1fr}}

/* ons verhaal: de film */
.tfv{padding:72px 0}
.tfv-wrap{max-width:980px;margin:0 auto;padding:0 var(--gut);text-align:center}
.tfv-wrap h2{margin:10px 0 14px}
.tfv-tekst{font-size:18px;line-height:1.6;color:var(--ink-2);max-width:700px;margin:0 auto 30px}
.tfv-video{width:100%;aspect-ratio:16/9;border-radius:var(--r);background:var(--dark);box-shadow:var(--shadow)}
@media(max-width:767px){.tfv{padding:48px 0}.tfv-video{aspect-ratio:9/16;max-width:420px;margin:0 auto}}

/* juridisch */
.artikel.legal-doc{padding-top:8px;padding-bottom:24px}
.legal-doc h2{scroll-margin-top:100px}
.legal-doc ul,.legal-doc ol{padding-left:22px;margin:12px 0}
.legal-doc li{margin:6px 0}
.legal-doc a{color:var(--acc-ink)}
.legal-meta{font-size:14px;color:var(--ink-2);padding:14px 18px;background:var(--soft);border:0;border-radius:var(--r-s);margin:0 0 28px}
.legal-toc{background:var(--soft);border:0;padding:22px 26px;border-radius:var(--r-s);margin:24px 0;font-size:15px}
.legal-toc strong{display:block;margin-bottom:8px}
.legal-toc ol{padding-left:20px;margin:0}
table.legal-table{width:100%;border-collapse:separate;border-spacing:0;margin:16px 0;font-size:14.5px;background:#fff;border:1px solid var(--line);border-radius:var(--r-s);overflow:hidden}
table.legal-table th,table.legal-table td{border-bottom:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top}
table.legal-table th{background:var(--soft);font-weight:700}
@media(max-width:640px){table.legal-table{display:block;overflow-x:auto}}

/* cadeaubonnen: het uitpaktoneel */
.gc-stage{position:relative;border-radius:var(--r);overflow:hidden;background:#0b0f0d;box-shadow:var(--shadow);aspect-ratio:16/11}
.gc-stage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .5s}
.gc-stage.gc-playing video{opacity:1}
.gc-vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(120% 85% at 50% 45%,rgba(0,0,0,0) 52%,rgba(0,0,0,.6) 100%)}
.gc-flash{position:absolute;inset:0;z-index:4;background:#fff;opacity:0;pointer-events:none}
.gc-stage.gc-playing .gc-flash{animation:gcFlash 1.4s cubic-bezier(.16,1,.3,1) 3.85s forwards}
@keyframes gcFlash{0%{opacity:0}45%{opacity:1}100%{opacity:1}}
.gc-cta{white-space:nowrap;position:absolute;left:50%;bottom:8%;transform:translateX(-50%);z-index:6;border:0;cursor:pointer;font:600 16px/1 Inter,sans-serif;color:var(--ink);background:#fff;height:50px;padding:0 26px;border-radius:999px;box-shadow:0 18px 40px -18px rgba(0,0,0,.7);animation:gcNudge 2.8s ease-in-out infinite}
@keyframes gcNudge{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-5px)}}
.gc-stage.gc-playing .gc-cta,.gc-stage.gc-done .gc-cta{opacity:0;pointer-events:none;transition:opacity .3s}
.gc-poster{position:absolute;inset:0;z-index:1;background:#0b0f0d center/cover no-repeat;display:flex;align-items:center;justify-content:center;cursor:pointer}
.gc-poster svg{width:74px;height:74px;opacity:.9}
.gc-stage.gc-playing .gc-poster,.gc-stage.gc-done .gc-poster{opacity:0;transition:opacity .4s}
.gc-reveal{position:absolute;inset:0;z-index:5;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:22px;opacity:0;pointer-events:none;background:radial-gradient(80% 60% at 50% 40%,#fff,var(--soft))}
.gc-stage.gc-done .gc-reveal{opacity:1;pointer-events:auto;animation:gcOut 1.4s cubic-bezier(.16,1,.3,1) forwards}
@keyframes gcOut{0%{opacity:0;transform:scale(1.05);filter:blur(14px)}40%{opacity:1}100%{opacity:1;transform:none;filter:blur(0)}}
.gc-again{border:0;background:#fff;font:600 13px/1 Inter,sans-serif;border-radius:999px;padding:10px 16px;cursor:pointer;color:var(--ink);box-shadow:var(--shadow-s)}
.gc-card{width:min(78%,340px);aspect-ratio:16/10;border-radius:20px;position:relative;overflow:hidden;padding:2.5px;background:linear-gradient(140deg,#f7e9bd,#c9a227 32%,#8a6c14 58%,#f4e2a8);box-shadow:0 30px 56px -26px rgba(16,52,36,.6)}
.gc-card .gc-photo{position:absolute;inset:2.5px;border-radius:17px;background-size:cover;background-position:center}
.gc-card .gc-haze{position:absolute;inset:2.5px;border-radius:17px;background:linear-gradient(178deg,rgba(6,18,12,.04) 26%,rgba(6,18,12,.78) 100%)}
.gc-card .gc-edge{position:absolute;inset:7px;border-radius:14px;border:1px solid rgba(255,255,255,.24);z-index:3}
.gc-card .gc-brand{position:absolute;left:18px;top:14px;right:18px;z-index:4;display:flex;justify-content:space-between;font-size:8.5px;letter-spacing:.24em;text-transform:uppercase;color:rgba(255,255,255,.82)}
.gc-card .gc-txt{position:absolute;left:18px;right:18px;bottom:14px;z-index:4;color:#fff;text-align:left}
.gc-card .gc-txt b{display:block;font:800 22px/1.1 Brico,Inter,sans-serif;letter-spacing:-.01em}
.gc-card .gc-txt i{display:block;font-size:12px;color:#f3e3b3;margin-top:2px}
.gc-card .gc-code{margin-top:6px;font-family:ui-monospace,Menlo,monospace;font-size:9px;color:rgba(255,255,255,.55);letter-spacing:.1em}
.gc-card .gc-chip{position:absolute;right:14px;bottom:14px;z-index:5;text-align:right;padding:8px 12px;border-radius:12px;background:rgba(10,20,14,.42);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.18)}
.gc-card .gc-chip small{display:block;font-size:7.5px;letter-spacing:.2em;text-transform:uppercase;color:rgba(255,255,255,.62)}
.gc-card .gc-chip b{font-size:18px;color:#fff}
.gc-note{background:#fff;border-radius:14px;padding:14px 18px;text-align:center;transform:rotate(-1.2deg);max-width:290px;box-shadow:var(--shadow-s)}
.gc-note span{font-size:12px;color:var(--acc-ink);font-weight:700}
.gc-note p{font:700 17px/1.3 Brico,Inter,sans-serif;color:var(--ink);margin:6px 0 4px}
.gc-note em{font-size:12.5px;color:var(--muted);background:none;-webkit-background-clip:border-box;background-clip:border-box}
.gc-done-txt{text-align:center;max-width:330px}
.gc-done-txt h3{font-size:20px;margin-bottom:6px}
.gc-done-txt p{font-size:13.5px;color:var(--ink-2);line-height:1.55}
.gc-split{display:grid;grid-template-columns:1fr 1.15fr;gap:48px;align-items:center;max-width:1120px;margin:0 auto}
.gc-split h1{font-size:clamp(38px,5vw,64px);margin:18px 0 0}
.gc-split .lead{margin-left:0}
@media(max-width:900px){.gc-split{grid-template-columns:1fr;gap:26px}}
.gc-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:36px;text-align:left}
.gc-step{padding:24px}
.gc-step i{display:block;font:800 normal 40px/1 Brico,Inter,sans-serif;letter-spacing:-.045em;color:var(--acc-ink);margin-bottom:12px}
.gc-step h4{font-size:18px;margin-bottom:6px}
.gc-step p{font-size:14.5px;color:var(--ink-2);line-height:1.55}
@media(max-width:940px){.gc-steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.gc-steps{grid-template-columns:1fr}}
.vragen details{padding:0}
.gc-pill{display:inline-flex;align-items:center;gap:8px;background:#fff;border:0;color:var(--ink);font-size:14px;font-weight:600;border-radius:999px;padding:8px 15px;margin:6px 6px 0 0}
@media(prefers-reduced-motion:reduce){.gc-cta{animation:none}.gc-stage.gc-playing .gc-flash{animation:none;opacity:1}.gc-stage.gc-done .gc-reveal{animation:none}}

/* groepen (groups.html) */
.groups-hero{position:relative;background:#fff;overflow:hidden;isolation:isolate;padding:72px 0 80px;text-align:center}
.groups-hero::before{content:"";position:absolute;inset:0;z-index:-1}
.groups-hero .glow,.groups-hero .glow-2{display:none}
.hero-content{position:relative;max-width:900px;margin:0 auto}
.hero-content h1{font-size:clamp(38px,5.2vw,68px);margin-top:18px}
.hero-content p{font-size:clamp(17px,1.5vw,20px);color:var(--ink-2);margin:20px auto 0;max-width:640px}
.hero-content .hero-buttons,.groups-hero .hero-buttons{justify-content:center;display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.btn-ghost-white{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.btn-icon{width:18px;height:18px}
.pain,.pipeline,.usecases,.numbers,.groups-quote{padding:72px 0}
.pain-grid,.usecases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px}
.usecases-grid{grid-template-columns:repeat(2,1fr)}
.pain-card,.usecase{padding:28px 26px}
.pain-icon,.usecase-icon,.pipeline-feat-icon{margin-bottom:16px}
.pain-title,.usecase-title,.pipeline-feat-title{font:800 21px/1.15 Brico,Inter,sans-serif;letter-spacing:-.02em;margin-bottom:8px;color:var(--ink)}
.pain-desc,.usecase-desc,.pipeline-feat-desc{font-size:15.5px;color:var(--ink-2);line-height:1.6}
.usecase-features{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:8px}
.usecase-features li{position:relative;padding-left:26px;font-size:15px;color:var(--ink-2)}
.usecase-features li::before{content:"";position:absolute;left:0;top:4px;width:16px;height:16px;border-radius:50%;background:var(--tint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23136A44' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center/10px no-repeat}
.pipeline-layout{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.pipeline-visual{background:var(--soft);border:0;border-radius:var(--r);box-shadow:none;padding:24px}
.pipeline-stages{display:grid;gap:10px}
.pipeline-stage{display:flex;align-items:center;gap:12px;background:#fff;border-radius:14px;padding:14px 16px}
.pipeline-dot{width:12px;height:12px;border-radius:50%;background:var(--acc)}
.dot-new{background:var(--gp)}.dot-contact{background:var(--amber)}.dot-offer{background:var(--muted)}.dot-confirm{background:var(--acc)}.dot-done{background:var(--ink)}
.pipeline-stage-label{font-weight:600;flex:1}
.pipeline-stage-count{font-weight:700;color:var(--acc-ink)}
.pipeline-features{display:grid;gap:14px}
.pipeline-feat{display:flex;gap:16px;padding:20px}
.pipeline-feat-icon{flex:none;margin-bottom:0}
.numbers-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;max-width:760px;margin:32px auto 0}
.number-card{padding:28px;text-align:center}
.number-value{font:800 clamp(34px,4vw,48px)/1 Brico,Inter,sans-serif;color:var(--acc-ink)}
.number-label{margin-top:8px;color:var(--ink-2)}
.reveal{opacity:1!important;transform:none!important}
@media(max-width:900px){.pain-grid,.usecases-grid,.pipeline-layout{grid-template-columns:1fr}}

/* 404 */
.vier{max-width:760px;text-align:center;padding-top:72px;padding-bottom:48px}
.vier .code{display:inline-flex;padding:7px 14px;border-radius:999px;background:var(--soft);border:0;font-weight:600;font-size:14px}
.vier h1{font-size:clamp(38px,5.2vw,64px);margin:20px 0 14px}
.vier p{color:var(--ink-2);font-size:18px}
.vier p.en{font-size:15px;color:var(--muted);margin-top:6px}
.vier .btns{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:28px}
.vier .links{margin-top:48px}
.vier .links h2{font-size:24px;margin-bottom:16px}
.vier .grid{display:flex;flex-wrap:wrap;gap:10px;justify-content:center}
.vier .grid a{background:var(--soft);border:0;border-radius:999px;padding:9px 16px;text-decoration:none;color:var(--ink);font-weight:600;font-size:15px}
.vier .grid a:hover{color:var(--acc-ink)}

/* mobiel */
@media(max-width:700px){
.held h1{font-size:clamp(34px,9vw,44px)}
.proof-row > div{font-size:14px;padding:9px 14px}
.quote-box{padding:28px 22px}
.step,.why-card,.intg-card{padding:22px}
.numbers-grid{grid-template-columns:1fr}
main .btn{white-space:normal;height:auto;min-height:48px;padding:12px 20px;text-align:center;line-height:1.25}
}

/* cijferband (kit .band): zwart zoals het verhaal en het slot, zonder messing binnenlijn */
.band{background:#000}
.band::after{display:none}
@media(max-width:700px){
.hero.held::before,.groups-hero::before{background:radial-gradient(360px 220px at 50% 100%,var(--tint-2),var(--tint) 45%,transparent 78%)}
}

/* een kolom die eerst naast een citaat stond (gastprofiel): leesbreedte, gecentreerd */
.enkel{max-width:760px;margin:0 auto}