/* ===================================================================
   Waadi — pagina's 2026
   -------------------------------------------------------------------
   De taal van de voorpagina op alle andere templates. Laadt overal
   behalve op de voorpagina, na chrome-2026.css. Geen nieuwe markup:
   dit blad zet de bestaande componenten uit style.css op dezelfde
   maten, kleuren en vormen als de voorpagina. Elke waarde hier staat
   ook in home-2026.css; dat is de bedoeling.

   Wat het doet, in volgorde:
   1. labels      — het mono-doosje wordt de eyebrow, in een hero de pil
   2. koppen      — h1 en h2 op de maat van de voorpagina
   3. intro's     — de lead: grijs, 1.06rem, regelhoogte 1.6
   4. hero's      — ruimte boven/onder zoals de hero van de voorpagina
   5. secties     — het ritme van de voorpagina (geen 100px meer)
   6. kaarten     — wit, dunne rand, zachte schaduw, hoeken 22px
   7. icoontegels — de mintgroene tegel van de features
   8. FAQ         — de chevron-variant
   9. blog        — kaartlabel als pil, zachte placeholder
  10. knoppen     — btn-outline als de ghost-knop
   =================================================================== */

/* ---- 1. Labels ---- */
.section-label{
  display:inline-block;font-family:var(--font-head);font-size:.74rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--accent);
  background:none;border:0;border-radius:0;padding:0;margin-bottom:14px;
}
/* In een pagina-hero, boven de h1, is het de pil van de voorpagina. */
.contact-page-hero .section-label,.pricing-hero .section-label,.blog-header .section-label,
.about-hero .section-label,.service-hero .section-label,.page-default .section-label,
.demo-hero .section-label,.partner-hero .section-label,.form-hero .section-label,
.login-hero .section-label{
  display:inline-flex;align-items:center;font-size:.68rem;letter-spacing:.14em;
  color:var(--accent-dark);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:100px;padding:6px 13px;margin-bottom:20px;
}

/* ---- 2. Koppen ---- */
.contact-page-hero h1,.pricing-hero h1,.about-hero h1,.service-hero h1,.blog-header h1,
.demo-hero h1,.partner-hero h1,.page-default h1,.blog-single-hero h1,.form-hero h1,.login-hero h1{
  font-size:clamp(2.2rem,4.2vw,3.2rem);line-height:1.08;letter-spacing:-.02em;
}
.contact-page-hero h1,.pricing-hero h1,.about-hero h1,.service-hero h1,.page-default h1{
  max-width:20ch;margin-left:auto;margin-right:auto;
}
/* Sectiekoppen op de maat van de blokken van de voorpagina. De koppen
   in een blogartikel blijven buiten schot. */
.section h2:not(.post-content h2),.faq-left h2,.cta-box h2{
  font-size:clamp(1.75rem,2.6vw,2.3rem);line-height:1.16;letter-spacing:-.02em;
}

/* ---- 3. Intro's ---- */
.section-intro,.about-hero-sub,.service-hero-sub,.demo-hero-sub,.partner-hero-sub,.form-sub,
.blog-header p,.faq-left p{
  font-size:1.06rem;line-height:1.6;color:var(--muted);
}
.section-intro{max-width:44rem;margin-top:18px;margin-bottom:clamp(34px,4.5vw,56px)}
.contact-page-hero .section-intro,.pricing-hero .section-intro,.about-hero .section-intro,
.service-hero .section-intro,.page-default .section-intro{text-wrap:balance}

/* ---- 4. Hero's: 72px vaste header plus de ruimte van de voorpagina ---- */
.contact-page-hero,.pricing-hero,.about-hero,.service-hero,.blog-header,.demo-hero,
.partner-hero,.page-default{
  padding-top:calc(72px + clamp(56px,7vw,84px));
}
.contact-page-hero,.pricing-hero,.service-hero,.demo-hero,.partner-hero{
  padding-bottom:clamp(44px,5vw,70px);
}
.blog-header{padding-bottom:clamp(22px,3vw,34px)}

/* ---- 5. Secties: het ritme van de voorpagina ---- */
.section{padding:clamp(52px,6vw,82px) 0}
.section.cta{padding:clamp(44px,5vw,70px) 0}

/* ---- 6. Kaarten ---- */
.card,.pricing-card,.post-card,.contact-method-card,.demo-info-card,.demo-form-card,
.integration-card,.form-card,.login-card,.faq-card{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:0 14px 34px -24px rgba(10,26,20,.3);
}
.card:hover,.post-card:hover,.demo-info-card:hover,.contact-method-card:hover,.integration-card:hover{
  transform:translateY(-4px);box-shadow:0 20px 44px -24px rgba(10,26,20,.38);
}
.card-dark,.pricing-card.featured{
  background:var(--dark-soft);border-color:transparent;
  box-shadow:0 22px 54px -28px rgba(10,26,20,.4);
}
/* Kaarten op een donkere hero (formulier, login) houden hun diepe
   schaduw; alleen de hoeken gaan mee. */
.form-card,.login-card{box-shadow:0 20px 60px rgba(0,0,0,.2)}
.card h3,.contact-method-card h3,.demo-info-card h3{
  font-family:var(--font-head);font-weight:600;font-size:1.1rem;letter-spacing:-.015em;
}
.card p{font-size:.95rem;line-height:1.6;color:var(--muted)}

/* ---- 7. Icoontegels ---- */
.card-icon{
  width:46px;height:46px;border-radius:14px;background:#DCF0E6;color:var(--accent-dark);
  margin-bottom:16px;font-size:1.1rem;
}
.card-dark .card-icon{background:rgba(255,255,255,.1);color:#fff}

/* ---- 8. FAQ ---- */
.faq{background:#fff;border-top:0;border-bottom:0}
.faq-layout{grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);gap:clamp(28px,5vw,64px)}
.faq-left p{margin-top:14px;margin-bottom:0;max-width:34ch}
.faq-left h2{margin-bottom:0}
.faq-left .btn{margin-top:22px}
.faq-item{border-top:1px solid var(--border);border-bottom:0}
.faq-item:last-child{border-bottom:1px solid var(--border)}
.faq-item summary{
  list-style:none;cursor:pointer;display:flex;align-items:flex-start;justify-content:space-between;
  gap:18px;padding:20px 0;font-family:var(--font-head);font-weight:600;font-size:1.04rem;
  color:var(--dark);letter-spacing:-.01em;
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{
  content:"";flex:none;width:10px;height:10px;margin-top:7px;
  border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);
  transform:rotate(45deg);transition:transform .18s ease;
  font-size:0;color:transparent;
}
.faq-item[open] summary::after{transform:rotate(-135deg);border-color:var(--accent)}
.faq-item summary:hover{color:var(--accent-dark)}
.faq-item summary:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
.faq-item p,.faq-answer{color:var(--muted);font-size:.97rem;line-height:1.65;padding:0 40px 22px 0}
.faq-answer p{padding:0}
.faq-answer a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:2px}

/* ---- 9. Blog ---- */
.post-card-cat{
  font-family:var(--font-head);font-size:.64rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--accent-dark);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);border-radius:100px;padding:4px 10px;
}
.post-card-placeholder{
  background:#E9F5EF;color:var(--accent-dark);
  background-image:radial-gradient(color-mix(in srgb,var(--accent) 22%,transparent) 1px,transparent 1px);
  background-size:9px 9px;
}
.post-card-title{font-family:var(--font-head);font-weight:600;letter-spacing:-.015em}
.post-card-excerpt{color:var(--muted);font-size:.95rem;line-height:1.6}

/* ---- 10. Knoppen ---- */
/* chrome-2026.css zet op .btn een transparante rand; .btn-outline uit
   style.css verloor daardoor zijn lijn. Nu dezelfde opbouw als de
   ghost-knop van de voorpagina. */
.btn-outline{
  background:#fff;border-color:var(--border);color:var(--dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,26,20,.06),0 6px 14px -10px rgba(10,26,20,.32);
}
.btn-outline:hover{
  border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent-dark);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,26,20,.07),0 12px 22px -12px rgba(10,26,20,.42);
}

@media (max-width:900px){
  .faq-layout{grid-template-columns:1fr}
  .faq-item p,.faq-answer{padding-right:0}
}
@media (prefers-reduced-motion:reduce){
  .faq-item summary::after{transition:none}
}

/* ---- Correcties na de eerste ronde ---- */
/* Contact: de hero en de tegels stonden te ver uit elkaar (hero-marge
   plus sectie-marge plus intro-marge). De intro sluit de hero af. */
.contact-page-hero{padding-bottom:clamp(30px,4vw,44px)}
.contact-page-hero .section-intro{margin-bottom:0}
.contact-methods{padding-top:clamp(20px,3vw,36px)}
/* De contacttegels: de icoontegel van de features. */
.contact-method-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;background:#DCF0E6;color:var(--accent-dark);font-size:0;
}
.contact-method-card h3{margin-top:14px}
/* Hero's die ook .section zijn verloren hun bovenmarge aan de
   .section-regel hierboven (zelfde specificiteit, later in het blad). */
.section.blog-header,.section.about-hero{padding-top:calc(72px + clamp(56px,7vw,84px))}
/* Een blogtitel is vaak lang; een maat kleiner dan de pagina-hero's. */
.blog-single-hero h1{font-size:clamp(1.9rem,3.4vw,2.6rem);line-height:1.12;max-width:24ch;margin-left:auto;margin-right:auto}
/* Icoontegels in de kleine contactkaarten (demo, service): zelfde tegel. */
.demo-info-icon,.service-contact-icon,.contact-method-icon{
  display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:14px;background:#DCF0E6;color:var(--accent-dark);font-size:0;
}
.section.page-default{padding-top:calc(72px + clamp(56px,7vw,84px))}

/* ---- Landingspagina en stapnummers ---- */
/* Het label boven de h1 van de landingspagina (.hero-badge) was nog het
   mono-doosje; nu de pil. De accent-onderstreping in de h1 bestaat op
   de voorpagina niet meer. */
.hero-badge{
  display:inline-flex;align-items:center;gap:8px;font-family:var(--font-head);
  font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-dark);background:var(--accent-soft);
  border:1px solid color-mix(in srgb,var(--accent) 22%,transparent);
  border-radius:100px;padding:6px 13px;margin-bottom:20px;
}
.hero-badge-label,.hero-badge-tag{font:inherit;letter-spacing:inherit;color:inherit;background:none;border:0;padding:0;border-radius:0}
.hero-badge-tag::before{content:"\00b7";margin-right:8px;opacity:.6}
.hero h1{font-size:clamp(2.2rem,4.2vw,3.2rem);line-height:1.08;letter-spacing:-.02em}
.hero .underline::after{display:none}
/* Stapnummers (partner, service, landing): het rondje van de voorpagina
   in plaats van de omlijnde cijfers. */
.step-number{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:50%; background:var(--accent-soft);color:var(--accent-dark);font-family:var(--font-head);font-weight:700;font-size:.9rem;margin-bottom:14px;-webkit-text-stroke:0;font-size:.9rem;margin-bottom:14px}
.steps .step h3{margin-top:0}

/* ===================================================================
   Het sausje: de banden van de voorpagina
   -------------------------------------------------------------------
   Tokens gelijktrekken was niet genoeg. Wat de voorpagina herkenbaar
   maakt is de afwisseling: een hero met guides, kaarten die op een
   gestippelde ondergrond zweven, een mintgroene band waarvan de
   stippen naar wit uitdoven, een witte band met haarlijnen, en bij
   het probleem een grijs ruitjesraster achter de kaarten. Hieronder
   krijgt elke template datzelfde ritme, zonder nieuwe markup: de
   banden hangen aan de bestaande sectieklassen.

   A. mint band met stippen  — oplossing/features op de voorpagina
   B. witte band met lijnen  — het probleemblok
   C. stippen achter een object — de samenvatting in de hero
   D. guides naast een hero  — de hero van de voorpagina
   E. ruitjesraster          — 'zo gaat het nu'
   =================================================================== */

/* ---- A. Mint band met stippen die naar wit uitdoven ---- */
.section.pricing-compare,.section.contact-methods,.blog-posts,.section.service-cards,
.section.partner-platform,.section.about-team,
body.page-template-page-landing .section:nth-of-type(2),
body.page-template-page-landing .section:nth-of-type(6){
  position:relative;
  background:linear-gradient(#fff 0%,#F3FAF6 16%,#F3FAF6 70%,#fff 100%);
}
.section.pricing-compare::before,.section.contact-methods::before,.blog-posts::before,
.section.service-cards::before,.section.partner-platform::before,.section.about-team::before,
body.page-template-page-landing .section:nth-of-type(2)::before,
body.page-template-page-landing .section:nth-of-type(6)::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-size:9px 9px;background-position:3px 3px;
  background-image:radial-gradient(color-mix(in srgb,var(--accent) 22%,transparent) 1px,transparent 1px);
  -webkit-mask-image:linear-gradient(transparent 0%,#000 20%,#000 66%,transparent 100%);
          mask-image:linear-gradient(transparent 0%,#000 20%,#000 66%,transparent 100%);
}
.section.pricing-compare > .container,.section.contact-methods > .container,.blog-posts > .container,
.section.service-cards > .container,.section.partner-platform > .container,.section.about-team > .container,
body.page-template-page-landing .section:nth-of-type(2) > .container,
body.page-template-page-landing .section:nth-of-type(6) > .container{position:relative;z-index:1}
.blog-posts{padding-top:clamp(40px,5vw,64px);padding-bottom:clamp(52px,6vw,82px)}

/* ---- B. Witte band met haarlijnen ---- */
.section.contact,.section.service-deep,.section.partner-intro,.section.partner-steps,
.section.about-intro,.section.partner-problem,.section.problem{
  background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);
}
/* Twee witte banden achter elkaar delen één lijn. */
.section.contact + .section.faq{border-top:0}

/* ---- C. Stippen achter een object: het floating-artefact ---- */
.pricing-grid,.demo-hero-right,.partner-hero-split-visual,.hero-screenshot,.about-hero-image{
  position:relative;
}
.pricing-grid::before,.demo-hero-right::before,.partner-hero-split-visual::before,
.hero-screenshot::before,.about-hero-image::before{
  content:"";position:absolute;z-index:0;pointer-events:none;
  inset:-36px -28px -44px;
  background-image:radial-gradient(color-mix(in srgb,var(--accent) 42%,transparent) 1px,transparent 1px);
  background-size:9px 9px;
  -webkit-mask-image:linear-gradient(transparent 0%,#000 12%,#000 60%,transparent 100%),
                     radial-gradient(70% 60% at 50% 55%,transparent 30%,#000 100%);
  -webkit-mask-composite:source-in;
          mask-image:linear-gradient(transparent 0%,#000 12%,#000 60%,transparent 100%),
                     radial-gradient(70% 60% at 50% 55%,transparent 30%,#000 100%);
          mask-composite:intersect;
}
.pricing-grid > *,.demo-hero-right > *,.partner-hero-split-visual > *,.hero-screenshot > *,.about-hero-image > *{
  position:relative;z-index:1;
}
/* De prijskaarten staan in de hero zelf; de band eronder begint dan
   pas na de stippen. */
.pricing-grid{margin-top:clamp(34px,4.5vw,48px)}
.pricing-hero{padding-bottom:clamp(52px,6vw,82px)}

/* ---- D. Guides naast een gecentreerde hero ---- */
.pricing-hero > .container,.contact-page-hero > .container,.service-hero > .container,
.section.about-hero > .container,.section.page-default > .container,
body.page-template-page-landing .hero > .container{
  border-left:1px dashed #D7DDDA;border-right:1px dashed #D7DDDA;
  padding-left:clamp(24px,5vw,60px);padding-right:clamp(24px,5vw,60px);
}

/* ---- E. Ruitjesraster achter probleemkaarten ---- */
.section.partner-problem .card-grid,.section.problem .card-grid{position:relative}
.section.partner-problem .card-grid::before,.section.problem .card-grid::before{
  content:"";position:absolute;z-index:0;pointer-events:none;inset:-14px -20px -26px;
  background-image:
    linear-gradient(to right,rgba(15,26,20,.08) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(15,26,20,.08) 1px,transparent 1px);
  background-size:54px 54px;background-position:-1px -1px;
  -webkit-mask-image:linear-gradient(#000 0%,#000 52%,transparent 96%);
          mask-image:linear-gradient(#000 0%,#000 52%,transparent 96%);
}
.section.partner-problem .card-grid > *,.section.problem .card-grid > *{position:relative;z-index:1}

/* ---- Correcties na de eerste blik ---- */
/* De guides liepen als rand door tot onder de kaarten. Op de
   voorpagina houden ze op bij de trustbar. Nu een gestreepte lijn als
   pseudo-element die naar onderen uitdooft, zodat hij de kop omlijst
   en de kaarten met rust laat. */
.pricing-hero > .container,.contact-page-hero > .container,.service-hero > .container,
.section.about-hero > .container,.section.page-default > .container,
body.page-template-page-landing .hero > .container{
  position:relative;border-left:0;border-right:0;
}
.pricing-hero > .container::before,.pricing-hero > .container::after,
.contact-page-hero > .container::before,.contact-page-hero > .container::after,
.service-hero > .container::before,.service-hero > .container::after,
.section.about-hero > .container::before,.section.about-hero > .container::after,
.section.page-default > .container::before,.section.page-default > .container::after,
body.page-template-page-landing .hero > .container::before,
body.page-template-page-landing .hero > .container::after{
  content:"";position:absolute;top:0;bottom:0;width:1px;pointer-events:none;
  background:repeating-linear-gradient(to bottom,#D7DDDA 0 3px,transparent 3px 7px);
  -webkit-mask-image:linear-gradient(#000 0%,#000 45%,transparent 75%);
          mask-image:linear-gradient(#000 0%,#000 45%,transparent 75%);
}
.pricing-hero > .container::before,.contact-page-hero > .container::before,.service-hero > .container::before,
.section.about-hero > .container::before,.section.page-default > .container::before,
body.page-template-page-landing .hero > .container::before{left:0}
.pricing-hero > .container::after,.contact-page-hero > .container::after,.service-hero > .container::after,
.section.about-hero > .container::after,.section.page-default > .container::after,
body.page-template-page-landing .hero > .container::after{right:0}

/* De mintband begon met een harde witte rand op de grijze pagina-
   achtergrond. De uiteinden zijn nu doorzichtig: hij dooft uit in wat
   er al staat. */
.section.pricing-compare,.section.contact-methods,.blog-posts,.section.service-cards,
.section.partner-platform,.section.about-team,
body.page-template-page-landing .section:nth-of-type(2),
body.page-template-page-landing .section:nth-of-type(6){
  background:linear-gradient(transparent 0%,#F3FAF6 16%,#F3FAF6 70%,transparent 100%);
}
/* Stippen op stippen: de placeholder van een blogkaart ligt al op de
   gestippelde band, dus zelf effen. */
.post-card-placeholder{background-image:none;background:#E9F5EF}

/* ---- Donkere vlakken dragen altijd de stippen van het slotblok ---- */
/* De blog-hero, het login- en het formulierscherm zijn donker zoals het
   slotblok, maar waren vlak. Met dezelfde stippen horen ze bij elkaar. */
.blog-single-hero,.login-hero,.form-hero{position:relative;overflow:hidden}
.blog-single-hero::before,.login-hero::before,.form-hero::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px); background-size:9px 9px;background-position:3px 3px; -webkit-mask-image:linear-gradient(160deg,#000 10%,transparent 68%); mask-image:linear-gradient(160deg,#000 10%,transparent 68%);}
.blog-single-hero > *,.login-hero > *,.form-hero > *{position:relative;z-index:1}

/* Blogarchief: te veel lucht tussen intro en kaarten. De kop-sectie
   kreeg de volle sectie-ondermarge plus de intro-marge plus de
   bovenmarge van de band. Nu één maat, zoals tussen kop en kaarten
   op de voorpagina. */
.section.blog-header{padding-bottom:clamp(16px,2vw,24px)}
.blog-header .section-intro,.blog-header p{margin-bottom:0}
.blog-posts{padding-top:clamp(28px,3.5vw,44px)}

/* ===================================================================
   Blogartikel: artikel plus plakkende CTA-kaart
   -------------------------------------------------------------------
   De kennisbank is waar bezoekers uit Google binnenkomen. De kaart
   rechts blijft in beeld terwijl ze lezen; op smalle schermen valt hij
   weg omdat het slotblok dan toch direct onder het artikel staat.
   =================================================================== */
.post-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(40px,5vw,72px);align-items:start}
.post-main{max-width:720px;min-width:0}
/* Tabellen in artikelen: op smalle schermen scrollt de tabel in zijn
   eigen wikkel (functions.php zet die om elke <table>), in plaats van
   dat de hele kolom breder wordt dan het scherm. */
.post-content .table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:32px 0;max-width:100%}
.post-content .table-scroll table{margin:0}
.post-content{overflow-wrap:anywhere}
.post-content .wp-cta-block,.post-content img{max-width:100%}
.post-aside{position:sticky;top:calc(var(--topbar-h,0px) + 96px)}
.post-cta{
  background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);
  padding:clamp(22px,2.6vw,30px);display:flex;flex-direction:column;align-items:flex-start;gap:0;
  box-shadow:0 14px 34px -24px rgba(10,26,20,.3);
}
.post-cta .hero-pill{margin-bottom:16px}
.post-cta h3{font-family:var(--font-head);font-weight:700;font-size:1.3rem;line-height:1.18;letter-spacing:-.02em;color:var(--dark);margin:0}
.post-cta p{color:var(--muted);font-size:.95rem;line-height:1.6;margin:12px 0 20px}
.post-cta .btn{width:100%;justify-content:center}
.post-cta-alt{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:.88rem;font-weight:500;color:var(--muted);text-decoration:none;
  transition:color .15s ease;
}
.post-cta-alt svg{color:var(--accent);flex:none}
.post-cta-alt:hover{color:var(--accent-dark)}
.post-cta-alt:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}

/* Typografie van het artikel: dezelfde koppen en maten als de blokken
   op de voorpagina. */
.post-content{font-size:1.05rem;line-height:1.75;color:var(--text)}
.post-content h2{font-size:clamp(1.45rem,2.2vw,1.85rem);line-height:1.2;letter-spacing:-.02em;margin-top:44px;margin-bottom:14px}
.post-content h3{font-size:1.15rem;line-height:1.3;letter-spacing:-.015em;margin-top:32px;margin-bottom:10px}
.post-content a{color:var(--accent-dark);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.post-content a:hover{color:var(--accent)}
.post-content blockquote{
  background:#fff;border:1px solid var(--border);border-left:3px solid var(--accent);
  border-radius:0 var(--r-lg) var(--r-lg) 0;padding:18px 24px;margin:28px 0;
  box-shadow:0 14px 34px -24px rgba(10,26,20,.3);font-size:1.02rem;
}
.post-content img{border-radius:var(--r-lg);margin:28px 0}
.post-content li{margin-bottom:6px}
.post-footer{margin-top:clamp(34px,4vw,48px);padding-top:clamp(22px,3vw,30px);border-top:1px solid var(--border)}

@media (max-width:1023px){
  .post-layout{grid-template-columns:minmax(0,1fr)}
  .post-aside{display:none}
  .post-main{max-width:720px;width:100%;margin:0 auto} /* width erbij: met alleen auto-marges krimpt een grid-item naar zijn inhoud, en een tabel rekt hem dan op */
}

/* De pil boven een kop, zelfde als op de voorpagina (die stijl zat
   alleen in home-2026.css). */
.hero-pill{display:inline-flex;align-items:center;font-family:var(--font-head); font-size:.68rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase; color:var(--accent-dark);background:var(--accent-soft); border:1px solid color-mix(in srgb,var(--accent) 22%,transparent); border-radius:100px;padding:6px 13px;margin-bottom:20px}

/* ---- Whitepaper-blok in een artikel (shortcode .wp-cta-block) ----
   Brak met 100vw uit de smalle kolom; naast de CTA-kaart schoof het
   daardoor tegen de linkerrand. Nu gewoon zo breed als de tekst, en in
   de taal van het slotblok: 22px hoeken, de stippen, de pil, de knop. */
.post-content .wp-cta-block{
  width:auto;max-width:none;left:auto;transform:none;margin:36px 0;
  grid-template-columns:1fr 220px;border-radius:var(--r-lg);position:relative;
  box-shadow:0 22px 54px -28px rgba(10,26,20,.4);
}
.post-content .wp-cta-block::before{content:"";position:absolute;inset:0;pointer-events:none; background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px); background-size:9px 9px;background-position:3px 3px; -webkit-mask-image:linear-gradient(160deg,#000 10%,transparent 68%); mask-image:linear-gradient(160deg,#000 10%,transparent 68%);}
.post-content .wp-cta-block > *{position:relative;z-index:1}
.post-content .wp-cta-block-content{padding:clamp(26px,3vw,38px) clamp(24px,3vw,36px)}
.post-content .wp-cta-block-label{
  font-family:var(--font-head);font-size:.66rem;font-weight:700;letter-spacing:.14em;
  color:var(--accent-light);background:rgba(16,185,129,.14);
  border:1px solid rgba(16,185,129,.3);padding:5px 12px;margin-bottom:14px;
}
.post-content .wp-cta-block-titel{font-size:1.35rem;margin:0 0 8px}
.post-content .wp-cta-block-tekst{color:rgba(255,255,255,.65);margin-bottom:8px}
.post-content .wp-cta-block-meta{margin-bottom:20px}
.post-content .wp-cta-block-btn{
  border-radius:100px;padding:12px 20px;font-size:.9rem;gap:9px;
  background:linear-gradient(180deg,#10976D 0%,#0A8560 58%,#097B58 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(8,42,30,.28),0 8px 18px -8px rgba(8,42,30,.5);
}
.post-content .wp-cta-block-btn:hover{
  background:linear-gradient(180deg,#13A277 0%,#0C9069 58%,#0A8560 100%);transform:translateY(-1px);
}
.post-content .wp-cta-block-btn svg{width:14px;height:14px}
@media (max-width:640px){.post-content .wp-cta-block{grid-template-columns:1fr}.post-content .wp-cta-block-visual{display:none}}

/* ===================================================================
   Formulieren (Gravity Forms, zonder eigen css van de plugin)
   style.css zet zijn formulierregels met !important; dan helpt geen
   specificiteit of volgorde. Daarom hier ook !important, zodat dit blad
   het laatste woord heeft over de velden en de knop.
   -------------------------------------------------------------------
   Velden als de kaarten: wit, dunne rand, 14px hoeken, een zachte
   focusring in de accentkleur. Labels in de kopletter. De verzendknop
   is de accentknop van de site, niet meer een groen vlak van rand tot
   rand.
   =================================================================== */
.gform_wrapper .gform_fields{gap:18px 16px !important;}
.gform_wrapper .gfield_label,.gform_wrapper .gform-field-label{font-family:var(--font-head) !important;font-weight:600 !important;font-size:.9rem !important;color:var(--dark) !important;margin-bottom:8px !important;}
.gform_wrapper .gfield_required{color:var(--muted) !important;font-weight:500 !important;font-size:.78rem !important;margin-left:6px !important;}
.gform_wrapper input[type="text"],.gform_wrapper input[type="email"],.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],.gform_wrapper input[type="url"],.gform_wrapper textarea,.gform_wrapper select{width:100% !important;background:#fff !important;border:1px solid var(--border) !important;border-radius:14px !important;padding:13px 16px !important;font-family:var(--font-sans) !important;font-size:1rem !important;color:var(--text) !important;line-height:1.4 !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,26,20,.04) !important;transition:border-color .15s ease,box-shadow .15s ease !important;}
.gform_wrapper input::placeholder,.gform_wrapper textarea::placeholder{color:#9AA3A0 !important;}
.gform_wrapper input:focus,.gform_wrapper textarea:focus,.gform_wrapper select:focus{outline:none !important;border-color:var(--accent) !important;box-shadow:0 0 0 4px var(--accent-soft),0 1px 2px rgba(10,26,20,.04) !important;}
.gform_wrapper textarea{min-height:160px !important;resize:vertical !important;border-radius:18px !important;}
.gform_wrapper select{appearance:none !important;padding-right:44px !important;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>") !important;background-repeat:no-repeat !important;background-position:right 16px center !important;}
.gform_wrapper input[type="checkbox"]{width:18px !important;height:18px !important;accent-color:var(--accent) !important;border-radius:5px !important;margin:0 10px 0 0 !important;flex:none !important;}
.gform_wrapper .gchoice,.gform_wrapper .ginput_container_consent{display:flex !important;align-items:flex-start !important;gap:0 !important;}
.gform_wrapper .gchoice label,.gform_wrapper .gfield_consent_label{font-family:var(--font-sans) !important;font-weight:400 !important;font-size:.93rem !important;color:var(--text) !important;margin:0 !important;line-height:1.5 !important;}
.gform_wrapper .gfield_description{font-size:.86rem !important;color:var(--muted) !important;margin-top:6px !important;}
.gform_wrapper .gform_footer{margin-top:24px !important;padding:0 !important;display:flex !important;}
.gform_wrapper .gform_button,.gform_wrapper input[type="submit"],.gform_wrapper button[type="submit"]{display:inline-flex !important;align-items:center !important;justify-content:center !important;gap:9px !important;width:auto !important;border-radius:100px !important;padding:14px 26px !important;border:1px solid transparent !important;cursor:pointer !important;font-family:var(--font-head) !important;font-weight:600 !important;font-size:.95rem !important;letter-spacing:-.005em !important;line-height:1 !important;color:#fff !important;background:linear-gradient(180deg,#10976D 0%,#0A8560 58%,#097B58 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(8,42,30,.28),0 8px 18px -8px rgba(8,42,30,.5) !important;transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,background .18s ease !important;}
.gform_wrapper .gform_button:hover,.gform_wrapper button[type="submit"]:hover{transform:translateY(-1px) !important;background:linear-gradient(180deg,#13A277 0%,#0C9069 58%,#0A8560 100%) !important;box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 2px 4px rgba(8,42,30,.3),0 14px 26px -10px rgba(8,42,30,.55) !important;}
.gform_wrapper .gform_button:active,.gform_wrapper button[type="submit"]:active{transform:translateY(0) !important;}
.gform_wrapper .gform_button:focus-visible,.gform_wrapper button[type="submit"]:focus-visible{outline:2px solid var(--accent) !important;outline-offset:3px !important;}
/* Op de contactpagina staat het formulier gecentreerd; de knop ook. */
.section.contact .gform_wrapper .gform_footer{justify-content:center !important;}
/* In een kaart (demo) vult de knop de breedte, als in het mobiele menu. */
.demo-form-card .gform_wrapper .gform_button{width:100% !important;}
/* Foutmeldingen in dezelfde taal. */
.gform_wrapper .gfield_error input,.gform_wrapper .gfield_error textarea{border-color:#E8A598 !important;}
.gform_wrapper .validation_message,.gform_wrapper .gfield_validation_message{font-size:.85rem !important;color:var(--warn) !important;margin-top:6px !important;background:none !important;border:0 !important;padding:0 !important;}
.gform_wrapper .gform_validation_errors{background:var(--warn-soft) !important;border:1px solid #F3C7BE !important;border-radius:14px !important;padding:14px 18px !important;margin-bottom:18px !important;}
.gform_wrapper .gform_validation_errors h2{font-size:.95rem !important;margin:0 !important;color:var(--warn) !important;font-family:var(--font-head) !important;}
@media (prefers-reduced-motion:reduce){.gform_wrapper .gform_button{transition:none !important;}.gform_wrapper .gform_button:hover{transform:none !important;}}

/* ---- Icoontegels gelijk aan de voorpagina ---- */
/* De iconen in de contacttegels stonden op 20px met lijndikte 2; de
   feature-iconen zijn 1.75 dik. Zelfde maat en dikte, dan ogen ze als
   familie. */
.contact-method-icon svg,.demo-info-icon svg{width:19px;height:19px;stroke-width:1.75}

/* De twee vinkvakjes waren ongelijk: style.css zet op het
   toestemmingsvakje een eigen maat met !important en een specifiekere
   selector. Beide nu dezelfde maat en uitlijning. */
.gform_wrapper .gfield--type-consent input[type="checkbox"],
.gform_wrapper .gfield--type-checkbox input[type="checkbox"],
.gform_wrapper .gchoice input[type="checkbox"]{
  width:18px !important;height:18px !important;margin:2px 10px 0 0 !important;
  accent-color:var(--accent) !important;flex:none !important;
}
.gform_wrapper .gfield--type-consent .ginput_container_consent,
.gform_wrapper .gfield--type-checkbox .gchoice{
  display:flex !important;align-items:flex-start !important;gap:0 !important;
}
.gform_wrapper .gfield--type-consent label,.gform_wrapper .gfield--type-checkbox .gchoice label{
  font-family:var(--font-sans) !important;font-weight:400 !important;font-size:.93rem !important;
  color:var(--text) !important;margin:0 !important;line-height:1.5 !important;
}

/* Demo aanvragen: de drie punten zijn de agenda van de demo, dus
   genummerd, in het rondje van de stappen op de voorpagina. */
.demo-check-icon--num{
  display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:26px;height:26px;border-radius:50%;background:#DCF0E6;color:var(--accent-dark);
  font-family:var(--font-head);font-weight:700;font-size:.78rem;line-height:1;padding-left:1px;
}
.demo-check-item{align-items:center;gap:12px}
.demo-check-item > span:last-child{font-size:.97rem}

/* ---- Tekstpagina's (voorwaarden, privacy, bedankt): page.php ----
   De guides en de gecentreerde kop zijn voor een korte hero (404);
   op een lange tekstpagina staan ze in de weg. En het colofon onder
   de streep: geen cursieve lange regel, maar een rustige voetnoot. */
body:not(.error404) .section.page-default > .container::before,
body:not(.error404) .section.page-default > .container::after{display:none}
body:not(.error404) .page-default h1{max-width:none;margin-left:0;margin-right:0;margin-bottom:28px}
.page-default .post-content{font-size:1.02rem}
.post-content hr{border:0;border-top:1px solid var(--border);margin:40px 0 18px}
.post-content hr + p{font-size:.84rem;line-height:1.6;color:var(--muted);text-wrap:pretty}
.post-content hr + p em{font-style:normal}
/* De versieregel bovenaan: klein en grijs, niet cursief. */
.page-default .post-content > p:first-child em:only-child{font-style:normal;font-size:.88rem;color:var(--muted)}

/* ===================================================================
   Artikel-hero (4 nov 2026): korte kop, licht, in de taal van de home
   -------------------------------------------------------------------
   Was een donkere plak met een lange, gecentreerde titel. Nu het recept
   van de voorpagina: pil, korte kop, intro, Waadi als afzender, en op
   de puntjesband de uitgelichte foto of "In dit artikel". Markup in
   single.php; de oude .blog-single-hero-regels in style.css raken dit
   niet meer.
   =================================================================== */
.post-hero{background:var(--bg);padding:calc(72px + clamp(44px,6vw,70px)) 0 0;text-align:center}
.post-hero .container{max-width:var(--container)}
.post-hero .hero-pill{margin-bottom:20px}
.post-hero h1{
  font-family:var(--font-head);font-weight:700;letter-spacing:-.02em;line-height:1.08;color:var(--dark);
  font-size:clamp(2.1rem,4.2vw,3.2rem);max-width:20ch;margin:0 auto;text-wrap:balance;
}
.post-lead{color:var(--muted);font-size:1.06rem;line-height:1.6;max-width:42rem;margin:18px auto 0;text-wrap:balance}
.post-byline{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 12px;margin-top:22px;font-size:.86rem;color:var(--muted)}
.post-byline b{color:var(--dark);font-weight:600}
.post-by{display:inline-flex;align-items:center;gap:8px}
.post-av{width:22px;height:22px;border-radius:50%;background:var(--dark-soft);color:#fff;font-family:var(--font-serif);font-size:.72rem;line-height:1;display:inline-flex;align-items:center;justify-content:center}
.post-sep{width:3px;height:3px;border-radius:50%;background:#C9D1CC}
.post-hero.no-band{padding-bottom:clamp(30px,4vw,48px);border-bottom:1px solid var(--border)}

/* De band: puntjes die naar onderen en naar de zijkanten uitdoven, met
   daarop een witte kaart (zelfde hoeken en rand als elke kaart). */
.post-band{position:relative;margin-top:30px;padding:26px 24px 0}
.post-band::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:radial-gradient(color-mix(in srgb,var(--accent) 42%,transparent) 1px,transparent 1px);
  background-size:9px 9px;background-position:3px 3px;
  -webkit-mask-image:linear-gradient(#000 0%,#000 40%,transparent 100%),radial-gradient(62% 100% at 50% 100%,transparent 30%,#000 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(#000 0%,#000 40%,transparent 100%),radial-gradient(62% 100% at 50% 100%,transparent 30%,#000 100%);
  mask-composite:intersect;
}
.post-band-inner{
  position:relative;z-index:1;max-width:720px;margin:0 auto;background:#fff;
  border:1px solid var(--border);border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;
  padding:22px 28px 0;text-align:left;box-shadow:0 14px 34px -24px rgba(10,26,20,.3);
}
.post-band-inner.is-image{padding:0;overflow:hidden;border-radius:var(--r-lg);border-bottom:1px solid var(--border);margin-bottom:-36px}
.post-band-inner.is-image img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover}
.post-hero.has-band-image + .blog-single{padding-top:calc(36px + clamp(40px,4vw,56px))}
.post-toc-title{display:block;font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dark);margin-bottom:10px}
.post-band-inner.is-toc ol{padding:0 0 22px 18px;margin:0;color:var(--muted);font-size:.95rem;line-height:1.55;columns:2;column-gap:32px}
.post-band-inner.is-toc li{break-inside:avoid;padding:3px 0}
.post-band-inner.is-toc a,.post-toc a{color:var(--muted);text-decoration:none}
.post-band-inner.is-toc a:hover,.post-toc a:hover{color:var(--accent-dark);text-decoration:underline}

/* Compacte inhoudsopgave in het artikel, als de band de foto draagt. */
.post-toc{border:1px solid var(--border);border-radius:var(--r);background:#fff;padding:16px 20px;margin-bottom:28px;font-size:.93rem;line-height:1.5}
.post-toc .post-toc-title{font-size:.72rem;margin-bottom:8px}
.post-toc ol{padding:0 0 0 18px;margin:0;color:var(--muted);columns:2;column-gap:28px}
.post-toc li{break-inside:avoid;padding:2px 0}

/* De plakkende CTA rechts rekent met de vaste header; het artikel zelf
   krijgt scroll-ankers zodat een kop niet onder de header verdwijnt. */
.post-content h2{scroll-margin-top:calc(var(--topbar-h,0px) + 96px)}

@media (max-width:640px){
  .post-hero h1{font-size:clamp(1.75rem,7.5vw,2.2rem)}
  .post-band{padding:20px 16px 0}
  .post-band-inner{padding:18px 20px 0}
  .post-band-inner.is-image{padding:0;margin-bottom:-24px}
  .post-hero.has-band-image + .blog-single{padding-top:calc(24px + 32px)}
  .post-toc ol,.post-band-inner.is-toc ol{columns:1}
}

/* "Verder lezen" aan het eind van een artikel: label plus pil, zoals de
   knoppen onder het logo in de footer. Zie functions.php. */
.post-readmore{display:flex;flex-wrap:wrap;align-items:center;gap:12px 18px;margin:40px 0 0;padding-top:26px;border-top:1px dashed #D7DDDA}
.post-readmore-label{font-family:var(--font-head);font-weight:700;font-size:.74rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dark)}
.post-readmore-btn{
  display:inline-flex;align-items:center;gap:11px;text-decoration:none;width:max-content;
  color:var(--text);font-size:.93rem;font-weight:500;
  border:1px solid var(--border);background:#fff;border-radius:100px;padding:10px 18px 10px 14px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,26,20,.06),0 6px 14px -10px rgba(10,26,20,.32);
  transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s ease,border-color .15s ease,color .15s ease;
}
.post-readmore-btn svg{color:var(--accent);flex:none}
.post-readmore-btn:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--accent) 45%,var(--border));color:var(--accent-dark);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 1px 2px rgba(10,26,20,.07),0 12px 22px -12px rgba(10,26,20,.42)}
.post-readmore-btn:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.post-content .post-readmore + *{margin-top:28px}

/* ===================================================================
   Whitepaperpagina (4 nov 2026): van losse landingspagina naar de site
   -------------------------------------------------------------------
   style.css gaf deze pagina een eigen donkere kop zonder menu en een
   urgentiebalk. Nu: de gewone header, een lichte hero met het document
   als kaart op een puntjesveld, de tijdlijn als rail, hoofdstukken als
   genummerde lijst, aanhaling en slot als donker blok. Markup in
   page-whitepaper.php (.wpp-*). De vensters (.wp-modal-*) blijven.
   =================================================================== */
.page-template-page-whitepaper .site-header{position:fixed;top:0;background:rgba(255,255,255,.9);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--border)}
.page-template-page-whitepaper .site-header .main-nav,
.page-template-page-whitepaper .site-header .header-actions{display:flex}
.page-template-page-whitepaper .site-header .logo{color:var(--dark)}
@media (max-width:768px){
  .page-template-page-whitepaper .site-header .mobile-toggle{display:flex}
  /* Niet apart verbergen: het dichte .mobile-menu verbergt ze al, en een
     aparte display:none won het van de regel die ze in het open menu toont,
     zodat de hamburger een leeg menu opende. Zelfde waarden als chrome-2026. */
  .page-template-page-whitepaper .site-header .mobile-menu .main-nav{display:block}
  .page-template-page-whitepaper .site-header .mobile-menu .header-actions{display:flex}
}

/* Hero */
.wpp-hero{background:var(--bg);padding-top:calc(72px + clamp(48px,6vw,76px))}
.wpp-hero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(36px,6vw,88px);align-items:center;padding-bottom:clamp(40px,5vw,64px)}
.wpp-hero .hero-pill{margin-bottom:20px}
.wpp-hero h1{font-family:var(--font-head);font-weight:700;letter-spacing:-.02em;line-height:1.08;font-size:clamp(2.2rem,4.2vw,3.2rem);max-width:16ch;color:var(--dark)}
.wpp-lead{color:var(--muted);font-size:1.06rem;line-height:1.6;max-width:40rem;margin-top:18px}
.wpp-checks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:9px}
.wpp-checks li{display:flex;align-items:center;gap:10px;font-size:.97rem;color:var(--text)}
.wpp-checks svg{color:var(--accent);flex:none;width:18px;height:18px;padding:2px;border-radius:50%;background:var(--accent-soft)}
.wpp-checks-sm{margin-top:14px;gap:8px}
.wpp-checks-sm li{font-size:.93rem}
.wpp-actions{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:28px}
.wpp-actions .btn{padding:13px 24px;font-size:.95rem}
.wpp-proof{font-size:.86rem;color:var(--muted);display:inline-flex;align-items:center;gap:9px;margin:0}
.wpp-proof b{background:var(--accent-soft);color:var(--accent-dark);border-radius:100px;padding:3px 10px;font-size:.78rem;font-weight:700;font-family:var(--font-head)}
.wpp-countdown{margin-top:16px;font-size:.86rem;color:var(--muted)}
.wpp-countdown b{color:var(--dark);font-weight:600}

/* Het document: witte kaart met donkere omslag, op een puntjesveld dat
   naar rechtsonder uitdooft (het stack-recept van de voorpagina). */
.wpp-doc-stack{position:relative;padding:22px 0 0 22px}
.wpp-doc-stack::before{content:"";position:absolute;inset:0 22px 22px 0;pointer-events:none;background-image:radial-gradient(color-mix(in srgb,var(--accent) 42%,transparent) 1px,transparent 1px);background-size:9px 9px;background-position:3px 3px;-webkit-mask-image:linear-gradient(135deg,#000 30%,transparent 100%);mask-image:linear-gradient(135deg,#000 30%,transparent 100%)}
.wpp-doc{position:relative;max-width:360px;margin:0 auto;background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 22px 54px -28px rgba(10,26,20,.4);transition:transform .25s ease}
.wpp-doc:hover{transform:translateY(-4px)}
.wpp-doc-cover{position:relative;overflow:hidden;background:var(--dark-soft);color:#fff;padding:30px 28px 26px}
.wpp-doc-cover::before{content:"";position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.14) 1px,transparent 1px);background-size:9px 9px;background-position:3px 3px;-webkit-mask-image:linear-gradient(115deg,transparent 40%,#000 100%);mask-image:linear-gradient(115deg,transparent 40%,#000 100%)}
.wpp-doc-cover>*{position:relative}
.wpp-doc-badge{display:inline-flex;font-family:var(--font-head);font-size:.62rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#10B981;background:rgba(16,185,129,.12);border:1px solid rgba(16,185,129,.3);border-radius:100px;padding:5px 11px}
.wpp-doc-title{font-family:var(--font-head);font-weight:700;font-size:1.25rem;line-height:1.2;letter-spacing:-.02em;margin-top:18px;max-width:16ch}
.wpp-doc-meta{display:flex;align-items:center;gap:9px;margin-top:18px;font-size:.78rem;color:rgba(255,255,255,.6)}
.wpp-doc-meta i{width:3px;height:3px;border-radius:50%;background:rgba(255,255,255,.3)}
.wpp-doc-body{padding:24px 28px 28px;display:grid;gap:9px}
.wpp-doc-body span{display:block;height:6px;border-radius:3px;background:#EEF2EF}
.wpp-doc-body span.acc{background:#CDE9DB}

/* Trustbalk, als onder de hero op de voorpagina */
.wpp-trust{border-top:1px solid var(--border);border-bottom:1px solid var(--border);background:#fff}
.wpp-trust-inner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:12px 22px;padding-top:16px;padding-bottom:16px;font-size:.9rem;color:var(--muted)}
.wpp-trust .t-item{display:inline-flex;align-items:center;gap:9px}
.wpp-trust .t-item b{color:var(--dark);font-weight:600}
.wpp-trust .t-item svg{color:var(--accent)}
.wpp-trust .t-sep{width:1px;height:16px;background:var(--border)}

/* Secties: kaartrecept en ritme */
.wpp-sec{padding:clamp(40px,5vw,64px) 0}
.wpp-sec-timeline{padding-bottom:0}
.wpp-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:clamp(22px,2.6vw,30px);box-shadow:0 14px 34px -24px rgba(10,26,20,.3)}
.wpp-card h3{font-family:var(--font-head);font-weight:700;font-size:1.1rem;letter-spacing:-.015em;color:var(--dark)}
.wpp-sec .eyebrow{display:inline-block;font-family:var(--font-head);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent);margin-bottom:14px}
.wpp-sec h2{font-family:var(--font-head);font-weight:700;font-size:clamp(1.75rem,2.6vw,2.3rem);line-height:1.16;letter-spacing:-.02em;color:var(--dark)}

/* Tijdlijn als rail: lijn met punten, de eerste actief */
.wpp-timeline{padding-bottom:clamp(26px,3vw,34px)}
.wpp-rail{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));position:relative}
.wpp-rail::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--border)}
.wpp-rail-step{position:relative;padding:0 14px 0 0}
.wpp-rail-dot{display:block;width:16px;height:16px;border-radius:50%;background:#fff;border:2px solid #C9D1CC;position:relative;z-index:1}
.wpp-rail-step.on .wpp-rail-dot{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 6px rgba(10,133,96,.14)}
.wpp-rail-step.on::before{content:"";position:absolute;left:0;top:7px;height:2px;width:50%;background:var(--accent)}
.wpp-rail-date{display:block;margin-top:14px;font-family:var(--font-head);font-weight:700;font-size:.92rem;letter-spacing:-.01em;color:var(--dark)}
.wpp-rail-label{display:block;margin-top:3px;font-size:.84rem;color:var(--muted);max-width:14ch}
.wpp-rail-step.on .wpp-rail-date{color:var(--accent-dark)}

/* Inhoud plus zijkolom */
.wpp-content-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:clamp(40px,5vw,72px);align-items:start}
.wpp-intro{color:var(--muted);font-size:1.06rem;line-height:1.6;max-width:44rem;margin-top:16px}
.wpp-chapters{list-style:none;margin:30px 0 0;padding:0;border-top:1px solid var(--border)}
.wpp-chapters li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;padding:20px 0;border-bottom:1px solid var(--border)}
.wpp-chapter-n{font-family:var(--font-head);font-weight:700;font-size:.78rem;letter-spacing:.06em;color:var(--accent);padding-top:5px}
.wpp-chapters h3{font-family:var(--font-head);font-weight:600;font-size:1.08rem;letter-spacing:-.015em;color:var(--dark)}
.wpp-chapters p{color:var(--muted);font-size:.95rem;line-height:1.6;margin-top:6px}
.wpp-sidebar{position:sticky;top:calc(var(--topbar-h,0px) + 96px);display:grid;gap:18px}
.wpp-side-cta{text-align:left;padding:clamp(24px,2.8vw,30px)}
.wpp-side-cta h3{font-family:var(--font-head);font-weight:700;font-size:1.15rem;letter-spacing:-.015em;color:#fff}
.wpp-side-cta p{color:rgba(255,255,255,.65);font-size:.93rem;margin-top:8px}
.wpp-side-cta .btn{margin-top:18px;width:100%;justify-content:center}

/* Aanhaling: het donkere blok, links uitgelijnd */
.wpp-quote{text-align:left;margin:0;padding:clamp(34px,4.5vw,56px) clamp(28px,4.5vw,64px)}
.wpp-quote blockquote{margin:0}
.wpp-quote blockquote p{color:#fff;font-family:var(--font-head);font-weight:600;font-size:clamp(1.2rem,2vw,1.6rem);line-height:1.4;letter-spacing:-.015em;max-width:34ch;margin:0}
.wpp-quote figcaption{display:flex;align-items:center;gap:12px;margin-top:24px;font-size:.9rem;color:rgba(255,255,255,.6)}
.wpp-quote figcaption b{color:#fff;font-weight:600}
.wpp-avatar{width:40px;height:40px;border-radius:50%;background:#fff;color:var(--dark);font-family:var(--font-serif);font-size:1.1rem;display:inline-flex;align-items:center;justify-content:center;flex:none}

/* Over Waadi: tekst plus schermpje als kaart */
.wpp-about{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center}
.wpp-about p{color:var(--muted);font-size:1rem;line-height:1.65;margin-top:14px}
.wpp-about .btn{margin-top:22px}
.wpp-mock{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:0 14px 34px -24px rgba(10,26,20,.3);font-size:.86rem}
.wpp-mock-bar{display:flex;gap:6px;padding:12px 16px;border-bottom:1px solid var(--border);background:#F8FAF9}
.wpp-mock-bar i{width:8px;height:8px;border-radius:50%;background:#E5E7EB}
.wpp-mock-bar i:first-child{background:#F9DFCB}.wpp-mock-bar i:nth-child(3){background:#CDE9DB}
.wpp-mock-head,.wpp-mock-row{display:grid;grid-template-columns:1.3fr 1fr 1fr 32px;gap:10px;align-items:center;padding:11px 18px}
.wpp-mock-head{font-family:var(--font-head);font-size:.66rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:#F8FAF9}
.wpp-mock-row{border-top:1px solid var(--border);color:var(--dark)}
.wpp-mock-row em{font-style:normal;font-size:.74rem;font-weight:600;border-radius:100px;padding:3px 9px;width:max-content}
.wpp-mock-row em.ok{background:var(--accent-soft);color:var(--accent-dark)}
.wpp-mock-row em.warn{background:#FEF3E6;color:#B45309}
.wpp-mock-row em.err{background:var(--warn-soft);color:var(--warn)}
.wpp-mock-row b{display:inline-flex;width:20px;height:20px;border-radius:6px;border:1px solid var(--border);align-items:center;justify-content:center}
.wpp-mock-row b.chk{background:var(--accent);border-color:var(--accent);color:#fff}
.wpp-mock-row b svg{width:12px;height:12px}

/* Slot */
.wpp-sec-cta .close h2{font-size:clamp(1.75rem,2.6vw,2.3rem)}
.wpp-sec-cta .btn{cursor:pointer}
.wpp-direct{text-align:center;margin-top:14px;font-size:.8rem}
.wpp-direct a{display:inline-flex;align-items:center;gap:6px;color:#9CA3AF;text-decoration:none;transition:color .15s ease}
.wpp-direct a svg{opacity:.8}
.wpp-direct a:hover{color:var(--muted)}

@media (max-width:900px){
  .wpp-hero-grid,.wpp-content-grid,.wpp-about{grid-template-columns:1fr}
  .wpp-doc-stack{max-width:400px;margin:0 auto;width:100%}
  .wpp-sidebar{position:static}
  .wpp-rail{grid-template-columns:repeat(5,minmax(120px,1fr));overflow-x:auto;padding-bottom:6px}
}
@media (max-width:640px){
  .wpp-hero h1{font-size:clamp(1.9rem,8vw,2.4rem)}
  .wpp-actions .btn{width:100%;justify-content:center}
  .wpp-trust .t-sep{display:none}
  .wpp-trust-inner{flex-direction:column;align-items:flex-start;gap:8px}
  .wpp-rail{display:flex;flex-direction:column;gap:18px}
  .wpp-rail::before{top:0;bottom:0;left:7px;right:auto;width:2px;height:auto}
  .wpp-rail-step{display:grid;grid-template-columns:16px 1fr;gap:4px 14px;padding:0}
  .wpp-rail-step::before{display:none}
  .wpp-rail-date{margin-top:0;grid-column:2}
  .wpp-rail-label{grid-column:2;max-width:none}
  .wpp-rail-dot{grid-row:1 / span 2}
}

/* De pil boven de kop viel te veel op in mint; nu gedempt grijs, zodat de kop het woord heeft. */
.contact-page-hero .section-label,.pricing-hero .section-label,.blog-header .section-label,
.about-hero .section-label,.service-hero .section-label,.page-default .section-label,
.demo-hero .section-label,.partner-hero .section-label,.form-hero .section-label,
.login-hero .section-label{color:var(--muted);background:#F3F4F6;border-color:#E5E7EB;font-weight:600;letter-spacing:.12em}

/* Ook de pil in artikel-, whitepaper- en post-cta-hero's gedempt grijs. */
.hero-pill{color:var(--muted);background:#F3F4F6;border-color:#E5E7EB;font-weight:600;letter-spacing:.12em}

/* Directe download: als eigen regel tussen de sectie 'Over Waadi' en het
   slotblok, grijs en zonder onderstreping. De sectie erboven levert de
   ruimte boven de regel; eronder een kleine marge tot de band. */
.wpp-direct-wrap{padding:0 24px clamp(18px,2.2vw,26px)}
.wpp-direct{margin:0;text-align:center;font-size:.8rem}
.wpp-direct a{display:inline-flex;align-items:center;gap:6px;color:#9CA3AF;text-decoration:none;transition:color .15s ease}
.wpp-direct a:hover{color:var(--muted);text-decoration:none}
.wpp-direct svg{color:#9CA3AF}