/**
 * kennisbank-article.css — gedeelde typografie voor Slimbot kennisbank-artikelen.
 * Herstelt ontbrekende h1/h2/h3-regels (inline CSS had afgebroken selectors).
 */
:root {
  --g3: #e8faf4;
  --dk: #0b1426;
  --nt: #64748b;
  --bdr: #e2e8f0;
}

/* Donkere hero (artikel + overzicht) */
.article-hero h1,
.kb-hero h1 {
  color: #fff !important;
  font-size: clamp(1.6rem, 3.5vw, 2.4rem);
  font-weight: 900;
  line-height: 1.15;
  margin-bottom: 14px;
}

.kb-hero p,
.article-hero p {
  color: #fff !important;
  font-size: 0.95rem;
  line-height: 1.55;
  max-width: 520px;
}

.kb-hero p {
  margin: 0 auto 24px;
}

.article-hero .art-meta,
.kb-hero .art-meta {
  color: rgba(255, 255, 255, 0.75) !important;
}

.article-hero .art-meta span,
.kb-hero .art-meta span {
  color: inherit !important;
}

/* Donkere CTA onderaan artikelen */
.cta-block h2,
.cta-block h3 {
  color: #fff !important;
  font-weight: 900;
  font-size: clamp(1.15rem, 2.5vw, 1.45rem);
  margin-bottom: 10px;
}

.cta-block p {
  color: rgba(255, 255, 255, 0.72) !important;
}

/* Groene CTA-box (coexistence, avg, meta, …) */
.cta-box > h2,
.cta-box > h3 {
  color: #fff !important;
  font-weight: 900;
  margin-bottom: 8px;
}

.cta-sidebar h3 {
  color: #fff !important;
  font-weight: 800;
  margin-bottom: 8px;
}

.cta-sidebar p {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* chatbot-opzetten — groene CTA */
.cta-art h2,
.cta-art h3 {
  color: #fff !important;
  font-weight: 900;
  margin-bottom: 8px;
}

.cta-art p {
  color: rgba(255, 255, 255, 0.78) !important;
}

/* Sectietitels in artikel-body */
h2.section-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dk);
  margin: 36px 0 18px;
}

/* no-shows method cards */
.method-card h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dk);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.method-card .method-num {
  width: 28px;
  height: 28px;
  background: var(--g, #00b87a);
  color: #fff;
  border-radius: 50%;
  font-size: 0.8rem;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.case-study h3 {
  font-size: 1rem;
  font-weight: 800;
  color: #065f46;
  margin-bottom: 8px;
}

.scenario h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dk);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.update-type h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dk);
  margin-bottom: 6px;
}

/* Kennisbank index — artikelkaarten */
.art-body h2,
.art-body h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dk);
  margin-bottom: 8px;
  line-height: 1.3;
}

.sidebar-card h3 {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--dk);
  margin-bottom: 10px;
}

/* chatbot-opzetten — lichte hero */
.hero-art h1 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 900;
  color: var(--dk);
  margin-bottom: 12px;
}

.steps-overview h3 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--dk);
  margin-bottom: 12px;
}

.faq h2,
.faq h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dk);
  margin-bottom: 12px;
}

.card h2,
.card h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dk);
  margin-bottom: 8px;
}

.wrap > h1 {
  font-size: clamp(1.4rem, 3vw, 1.9rem);
  font-weight: 900;
  color: var(--dk);
  margin-bottom: 12px;
}

.result-box .rnum {
  font-size: 2rem;
  font-weight: 900;
  color: var(--g, #00b87a);
}


/* page layouts */
/* index.php */
.kb-hero{background:linear-gradient(135deg,var(--dk),var(--dk2));padding:52px 5%;text-align:center}
.kb-hero p{color:rgba(255,255,255,.6);font-size:.95rem;max-width:480px;margin:0 auto 24px}
.kb-cats{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}
.kb-cat{padding:6px 16px;border-radius:20px;font-size:.78rem;font-weight:600;border:1.5px solid rgba(255,255,255,.2);color:rgba(255,255,255,.7);cursor:pointer;transition:all .15s}
.kb-cat:hover,.kb-cat.active{background:var(--g);border-color:var(--g);color:#fff}
.kb-wrap{max-width:1100px;margin:0 auto;padding:48px 5%}
.kb-grid{display:grid;grid-template-columns:1fr 280px;gap:32px;align-items:start}
.articles-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.article-card{background:#fff;border-radius:14px;border:1px solid var(--bdr);overflow:hidden;transition:all .25s;display:flex;flex-direction:column}
.article-card:hover{transform:translateY(-3px);box-shadow:0 8px 32px rgba(0,0,0,.1);border-color:var(--g)}
.art-thumb{height:140px;display:flex;align-items:center;justify-content:center;font-size:3rem}
.art-cat{display:inline-flex;padding:2px 10px;border-radius:20px;font-size:.68rem;font-weight:700;margin-bottom:10px}
.cat-ecomm{background:#dbeafe;color:#1d4ed8}.cat-mkt{background:#fce7f3;color:#9d174d}
.cat-zorg{background:#d1fae5;color:#065f46}.cat-ai{background:#ede9fe;color:#5b21b6}
.art-body p{font-size:.8rem;color:var(--nt);line-height:1.55;flex:1}
.art-meta{display:flex;align-items:center;gap:10px;font-size:.7rem;color:var(--nt);margin-top:12px}
.art-read{color:var(--g);font-weight:600;font-size:.78rem;margin-top:12px;display:inline-flex;align-items:center;gap:4px}
.kb-sidebar{display:flex;flex-direction:column;gap:18px}
.sidebar-card{background:#fff;border-radius:12px;padding:20px;border:1px solid var(--bdr)}
.tag-cloud{display:flex;flex-wrap:wrap;gap:7px}
.tag{padding:4px 11px;border-radius:20px;font-size:.72rem;font-weight:600;background:var(--lt);border:1.5px solid var(--bdr);color:var(--nt);cursor:pointer;transition:all .15s}
.tag:hover{border-color:var(--g);color:var(--g)}
.cta-sidebar{background:linear-gradient(135deg,var(--g),var(--g2));border-radius:12px;padding:20px;text-align:center}
.cta-sidebar p{color:rgba(255,255,255,.75);font-size:.78rem;margin-bottom:14px}
.cta-sidebar a{display:block;padding:9px;background:#fff;color:var(--g2);border-radius:8px;font-weight:700;font-size:.83rem}
.kb-soon{padding:16px;background:#fff;border-radius:10px;border:1.5px dashed var(--bdr);text-align:center;font-size:.8rem;color:var(--nt)}
@media(max-width:900px){.kb-grid{grid-template-columns:1fr}.articles-grid{grid-template-columns:1fr}}

/* no-shows.php */
.article-hero{background:linear-gradient(135deg,var(--dk),var(--dk2));padding:56px 5% 48px}
.hero-inner{max-width:720px;margin:0 auto}
.art-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,184,122,.18);color:var(--g);padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:18px}
.art-meta{display:flex;align-items:center;gap:16px;font-size:.78rem;color:rgba(255,255,255,.55)}
.body-wrap{max-width:720px;margin:0 auto;padding:48px 5%}
.lead{font-size:1.08rem;color:#334155;line-height:1.7;margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid var(--bdr)}
h2.section-title{font-size:1.2rem;font-weight:800;color:var(--dk);margin:36px 0 18px}
p.prose{font-size:.93rem;color:#334155;line-height:1.75;margin-bottom:16px}
.alert-box{background:#fff7ed;border:2px solid #fed7aa;border-radius:12px;padding:18px 22px;margin:24px 0;display:flex;align-items:flex-start;gap:14px}
.alert-box .ic{font-size:1.5rem;flex-shrink:0}
.alert-box p{font-size:.88rem;color:#9a3412;line-height:1.6}
.alert-box strong{display:block;font-size:.95rem;margin-bottom:4px}
.method-card{background:#fff;border-radius:14px;border:1px solid var(--bdr);padding:24px;margin-bottom:20px;counter-increment:methods}
.method-num{width:28px;height:28px;background:var(--g);color:#fff;border-radius:50%;font-size:.8rem;font-weight:900;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.method-card .timing{font-size:.72rem;font-weight:700;color:var(--g2);background:var(--g3);padding:2px 10px;border-radius:20px;display:inline-block;margin-bottom:12px}
.method-card p{font-size:.85rem;color:#334155;line-height:1.65;margin-bottom:12px}
.wa-wrap{background:#e5ddd5 url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");border-radius:10px;padding:14px 12px;margin-top:10px}
.wa-bubble{background:#e9fbe5;border-radius:12px 12px 12px 2px;padding:11px 14px;display:inline-block;max-width:93%;font-size:.8rem;color:#111;line-height:1.6;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wa-bubble .wa-time{font-size:.62rem;color:rgba(0,0,0,.38);text-align:right;margin-top:4px}
.wa-bubble b{color:#00614d}
.wa-btns{display:flex;gap:6px;margin-top:8px}
.wa-btn{background:#fff;border:none;border-radius:8px;padding:8px 16px;font-size:.75rem;font-weight:700;color:var(--g2);box-shadow:0 1px 2px rgba(0,0,0,.12);cursor:default}
.case-study{background:linear-gradient(135deg,var(--g3),#d1fae5);border-radius:14px;padding:24px;margin:32px 0;border:1px solid #a7f3d0}
.case-study p{font-size:.85rem;color:#065f46;line-height:1.65}
.case-study .result{font-size:1.7rem;font-weight:900;color:var(--g2);margin:10px 0 2px}
.cta-block{background:linear-gradient(135deg,var(--dk),var(--dk2));border-radius:16px;padding:40px;text-align:center;margin-top:48px}
.cta-block p{color:rgba(255,255,255,.65);font-size:.9rem;margin-bottom:24px}
.cta-block a{display:inline-block;padding:13px 32px;background:var(--g);color:#fff;border-radius:9px;font-weight:700;font-size:.95rem}

/* chatbot-opzetten.php */
.hero-art{background:linear-gradient(135deg,#ede9fe,#ddd6fe);padding:52px 5%;text-align:center}
.cat-badge{display:inline-flex;padding:4px 13px;border-radius:20px;font-size:.72rem;font-weight:700;background:#ede9fe;color:#5b21b6;margin-bottom:14px}
.art-meta{display:flex;justify-content:center;align-items:center;gap:14px;font-size:.78rem;color:var(--nt)}
.art-author{display:flex;align-items:center;gap:6px}
.art-av{width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--g),var(--g2));display:flex;align-items:center;justify-content:center;font-size:.6rem;font-weight:700;color:#fff}
.art-wrap{max-width:740px;margin:0 auto;padding:48px 5% 72px}
/* PROGRESS OVERVIEW */
.steps-overview{background:#fff;border-radius:14px;border:1px solid var(--bdr);padding:22px;margin-bottom:36px;overflow:hidden}
.steps-bar-wrap{display:flex;gap:4px;margin-bottom:10px}
.step-seg{flex:1;height:6px;border-radius:3px;background:var(--g)}
.steps-list{display:flex;flex-direction:column;gap:7px}
.sov-item{display:flex;align-items:center;gap:10px;font-size:.82rem;color:#374151}
.sov-num{width:22px;height:22px;border-radius:50%;background:var(--g);display:flex;align-items:center;justify-content:center;font-size:.65rem;font-weight:700;color:#fff;flex-shrink:0}
.sov-time{margin-left:auto;font-size:.72rem;color:var(--nt);font-weight:600}
/* STEP CARDS */
.step-card{background:#fff;border-radius:14px;border:1px solid var(--bdr);margin-bottom:24px;overflow:hidden}
.step-head{padding:18px 22px;border-bottom:1px solid var(--bdr);display:flex;align-items:center;gap:14px}
.step-head-num{width:38px;height:38px;border-radius:11px;background:linear-gradient(135deg,var(--g),var(--g2));display:flex;align-items:center;justify-content:center;font-size:.95rem;font-weight:900;color:#fff;flex-shrink:0}
.step-head-title{font-size:1rem;font-weight:700;color:var(--dk)}
.step-head-time{margin-left:auto;font-size:.72rem;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--g3);color:var(--g2);white-space:nowrap}
.step-body p{color:var(--nt);line-height:1.7;font-size:.88rem;margin-bottom:14px}
.step-body p:last-child{margin-bottom:0}
/* FLOW MOCKUP */
.flow-mockup{background:var(--lt);border:1px solid var(--bdr);border-radius:10px;padding:14px;margin-top:10px}
.flow-mock-title{font-size:.65rem;font-weight:700;color:var(--nt);text-transform:uppercase;letter-spacing:.05em;margin-bottom:10px}
.flow-nodes{display:flex;flex-direction:column;gap:5px}
.fn{padding:8px 12px;border-radius:7px;font-size:.72rem;font-weight:600}
.fn.trigger{background:#fef9c3;border:1.5px solid #fbbf24;color:#92400e}
.fn.msg{background:var(--g3);border:1.5px solid #a7f3d0;color:#065f46}
.fn.cond{background:#fce7f3;border:1.5px solid #ec4899;color:#9d174d}
.fn.action{background:#dbeafe;border:1.5px solid #93c5fd;color:#1d4ed8}
.fn-arrow{text-align:center;font-size:.65rem;color:var(--nt);padding:2px}
/* TIP / WARN BOXES */
.tip-box{background:var(--g3);border:1.5px solid #a7f3d0;border-radius:9px;padding:11px 14px;font-size:.83rem;color:#065f46;display:flex;gap:9px;margin-top:12px}
.warn-box{background:#fffbeb;border:1.5px solid #fcd34d;border-radius:9px;padding:11px 14px;font-size:.83rem;color:#92400e;display:flex;gap:9px;margin-top:12px}
/* CHECKLIST */
.check-list{list-style:none;display:flex;flex-direction:column;gap:8px;margin-top:10px}
.check-list li{display:flex;align-items:flex-start;gap:9px;font-size:.85rem;color:#374151}
.check-list li::before{content:'✓';color:var(--g);font-weight:800;flex-shrink:0;margin-top:1px}
/* FAQ */
.faq{background:#fff;border-radius:14px;border:1px solid var(--bdr);padding:24px;margin-bottom:28px}
.faq-item{border-bottom:1px solid var(--bdr);padding:12px 0}
.faq-item:last-child{border-bottom:none}
.faq-q{font-weight:600;font-size:.85rem;color:var(--dk);margin-bottom:5px;display:flex;align-items:center;gap:7px}
.faq-q::before{content:'Q';background:var(--g);color:#fff;font-size:.6rem;font-weight:800;padding:1px 6px;border-radius:4px;flex-shrink:0}
.faq-a{font-size:.8rem;color:var(--nt);line-height:1.6}
/* RESULTS */
.results-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:16px}
.result-box{background:var(--lt);border:1px solid var(--bdr);border-radius:10px;padding:14px;text-align:center}
.result-val{font-size:1.6rem;font-weight:900;color:var(--g);line-height:1}
.result-label{font-size:.72rem;color:var(--nt);margin-top:4px}
/* CTA */
.cta-art{background:linear-gradient(135deg,var(--g),var(--g2));border-radius:14px;padding:28px;text-align:center;margin-top:36px}
.cta-art p{color:rgba(255,255,255,.75);font-size:.85rem;margin-bottom:18px}
.cta-art a{display:inline-flex;padding:10px 24px;background:#fff;color:var(--g2);border-radius:9px;font-weight:700;font-size:.9rem;margin:4px}
.cta-art a.sec{background:rgba(255,255,255,.15);color:#fff}
@media(max-width:600px){.results-grid{grid-template-columns:1fr 1fr}}

/* whatsapp-vs-email.php */
.article-hero{background:linear-gradient(135deg,var(--dk),var(--dk2));padding:56px 5% 48px}
.hero-inner{max-width:720px;margin:0 auto}
.art-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,184,122,.18);color:var(--g);padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:18px}
.art-meta{display:flex;align-items:center;gap:16px;font-size:.78rem;color:rgba(255,255,255,.55)}
.body-wrap{max-width:720px;margin:0 auto;padding:48px 5%}
.lead{font-size:1.08rem;color:#334155;line-height:1.7;margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid var(--bdr)}
h2.section-title{font-size:1.2rem;font-weight:800;color:var(--dk);margin:36px 0 18px}
p.prose{font-size:.93rem;color:#334155;line-height:1.75;margin-bottom:16px}
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:28px 0}
.stat-card{border-radius:14px;padding:24px;text-align:center}
.stat-card.wa{background:linear-gradient(135deg,#e9fbe5,#d1fae5);border:2px solid #a7f3d0}
.stat-card.em{background:var(--lt);border:2px solid var(--bdr)}
.stat-card .icon{font-size:1.6rem;margin-bottom:8px}
.stat-card .platform{font-size:.7rem;font-weight:700;letter-spacing:.06em;color:var(--nt);text-transform:uppercase;margin-bottom:6px}
.stat-card .big{font-size:2.2rem;font-weight:900;line-height:1}
.stat-card.wa .big{color:var(--g2)}
.stat-card.em .big{color:#64748b}
.stat-card .sub{font-size:.72rem;color:var(--nt);margin-top:5px}
.cmp-table{width:100%;border-collapse:collapse;background:#fff;border-radius:12px;overflow:hidden;border:1px solid var(--bdr);margin:24px 0}
.cmp-table th{padding:11px 16px;font-size:.75rem;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:var(--lt);color:var(--nt);text-align:left}
.cmp-table th:nth-child(2){color:var(--g2);background:var(--g3)}
.cmp-table td{padding:13px 16px;font-size:.85rem;border-top:1px solid var(--bdr);vertical-align:middle}
.cmp-table td:nth-child(2){background:var(--g3);font-weight:600;color:#064e3b}
.cmp-table tr:hover td{background:#f0fdf7}
.cmp-table tr:hover td:nth-child(2){background:#d1fae5}
.pill-g{display:inline-block;background:var(--g3);color:var(--g2);font-weight:700;border-radius:6px;padding:2px 8px;font-size:.8rem}
.pill-n{display:inline-block;background:#f1f5f9;color:#64748b;border-radius:6px;padding:2px 8px;font-size:.8rem}
.scenarios{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:24px 0}
.scenario{background:#fff;border-radius:12px;border:1px solid var(--bdr);padding:18px}
.scenario h3 span{font-size:1.1rem}
.scenario ul{list-style:none;font-size:.8rem;color:#334155;line-height:1.8}
.scenario ul li::before{content:"+ ";color:var(--g);font-weight:700}
.scenario.em ul li::before{content:"+ ";color:#64748b}
.quote-block{background:#fff;border-radius:14px;border-left:5px solid var(--g);padding:22px 24px;margin:32px 0;font-style:italic;font-size:.97rem;color:#1e293b;line-height:1.65}
.quote-block cite{display:block;margin-top:12px;font-style:normal;font-size:.75rem;color:var(--nt);font-weight:600}
.cta-block{background:linear-gradient(135deg,var(--dk),var(--dk2));border-radius:16px;padding:40px;text-align:center;margin-top:48px}
.cta-block p{color:rgba(255,255,255,.65);font-size:.9rem;margin-bottom:24px}
.cta-block a{display:inline-block;padding:13px 32px;background:var(--g);color:#fff;border-radius:9px;font-weight:700;font-size:.95rem}
@media(max-width:640px){.stats-grid,.scenarios{grid-template-columns:1fr}}

/* orderupdates.php */
.article-hero{background:linear-gradient(135deg,var(--dk),var(--dk2));padding:56px 5% 48px}
.hero-inner{max-width:720px;margin:0 auto}
.art-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,184,122,.18);color:var(--g);padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:18px}
.art-meta{display:flex;align-items:center;gap:16px;font-size:.78rem;color:rgba(255,255,255,.55)}
.art-meta span{display:flex;align-items:center;gap:5px}
.body-wrap{max-width:720px;margin:0 auto;padding:48px 5%}
.lead{font-size:1.08rem;color:#334155;line-height:1.7;margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid var(--bdr)}
h2.section-title{font-size:1.2rem;font-weight:800;color:var(--dk);margin:36px 0 18px}
p.prose{font-size:.93rem;color:#334155;line-height:1.75;margin-bottom:16px}
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:28px 0}
.stat-box{background:#fff;border:1px solid var(--bdr);border-radius:12px;padding:18px;text-align:center}
.stat-box .num{font-size:1.8rem;font-weight:900;color:var(--g)}
.stat-box .lbl{font-size:.72rem;color:var(--nt);font-weight:600;margin-top:4px}
.update-type{margin-bottom:28px;background:#fff;border-radius:14px;border:1px solid var(--bdr);padding:22px 24px}
.update-type .sub{font-size:.78rem;color:var(--nt);margin-bottom:14px}
.wa-bubble{background:#e9fbe5;border-radius:12px 12px 12px 2px;padding:12px 15px;display:inline-block;max-width:90%;font-size:.82rem;color:#111;line-height:1.6;position:relative;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wa-bubble .wa-time{font-size:.65rem;color:rgba(0,0,0,.4);text-align:right;margin-top:5px}
.wa-bubble b{color:#00614d}
.wa-wrap{background:#e5ddd5 url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23000000' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");border-radius:10px;padding:16px 14px;margin-bottom:12px}
.code-block{background:#0f172a;border-radius:10px;padding:18px;font-family:monospace;font-size:.78rem;color:#e2e8f0;overflow-x:auto;margin:20px 0;line-height:1.7}
.code-block .cm{color:#94a3b8}.code-block .ck{color:#7dd3fc}.code-block .cv{color:#86efac}.code-block .cs{color:#fbbf24}
.result-box{background:var(--g3);border-left:4px solid var(--g);border-radius:0 10px 10px 0;padding:16px 20px;margin:28px 0}
.result-box .rnum{font-size:2rem;font-weight:900;color:var(--g2)}
.result-box p{font-size:.88rem;color:#064e3b;margin-top:4px}
.cta-block{background:linear-gradient(135deg,var(--dk),var(--dk2));border-radius:16px;padding:40px;text-align:center;margin-top:48px}
.cta-block p{color:rgba(255,255,255,.65);font-size:.9rem;margin-bottom:24px}
.cta-block a{display:inline-block;padding:13px 32px;background:var(--g);color:#fff;border-radius:9px;font-weight:700;font-size:.95rem}
.cta-block a:hover{background:var(--g2)}
@media(max-width:700px){.stat-row{grid-template-columns:1fr 1fr}}

/* meta-business-verificatie.php */
.article-hero{background:linear-gradient(135deg,var(--dk),var(--dk2));padding:56px 5% 48px}
.hero-inner{max-width:720px;margin:0 auto}
.art-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,184,122,.18);color:var(--g);padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:18px}
.art-meta{display:flex;align-items:center;gap:16px;font-size:.78rem;color:rgba(255,255,255,.55)}
.body-wrap{max-width:720px;margin:0 auto;padding:48px 5%}
.lead{font-size:1.08rem;color:#334155;line-height:1.7;margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid var(--bdr)}
h2.section-title{font-size:1.2rem;font-weight:800;color:var(--dk);margin:36px 0 18px}
p.prose{font-size:.93rem;color:#334155;line-height:1.75;margin-bottom:16px}
ul.prose{font-size:.93rem;color:#334155;line-height:1.75;margin:0 0 16px 20px}ul.prose li{margin-bottom:7px}
.callout{background:#e8faf4;border:1px solid #a7f3d0;border-left:4px solid var(--g);border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#0f5132;line-height:1.65}
.warn{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid #f59e0b;border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#7c2d12;line-height:1.65}
table.kb{width:100%;border-collapse:collapse;margin:22px 0;font-size:.86rem}
table.kb th,table.kb td{border:1px solid var(--bdr);padding:9px 12px;text-align:left}
table.kb th{background:var(--lt);font-weight:700}
.cta-box{background:linear-gradient(135deg,var(--g),var(--g2));border-radius:14px;padding:26px;text-align:center;margin:34px 0}
.cta-box .cta-box p{color:rgba(255,255,255,.8);font-size:.85rem;margin-bottom:14px}
.cta-box a{display:inline-block;padding:10px 22px;background:#fff;color:var(--g2);border-radius:8px;font-weight:700;font-size:.85rem}

/* inbound-vs-outbound.php */
.article-hero{background:linear-gradient(135deg,var(--dk),var(--dk2));padding:56px 5% 48px}
.hero-inner{max-width:720px;margin:0 auto}
.art-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,184,122,.18);color:var(--g);padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:18px}
.art-meta{display:flex;align-items:center;gap:16px;font-size:.78rem;color:rgba(255,255,255,.55)}
.body-wrap{max-width:720px;margin:0 auto;padding:48px 5%}
.lead{font-size:1.08rem;color:#334155;line-height:1.7;margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid var(--bdr)}
h2.section-title{font-size:1.2rem;font-weight:800;color:var(--dk);margin:36px 0 18px}
p.prose{font-size:.93rem;color:#334155;line-height:1.75;margin-bottom:16px}
ul.prose{font-size:.93rem;color:#334155;line-height:1.75;margin:0 0 16px 20px}ul.prose li{margin-bottom:7px}
.callout{background:#e8faf4;border:1px solid #a7f3d0;border-left:4px solid var(--g);border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#0f5132;line-height:1.65}
.warn{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid #f59e0b;border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#7c2d12;line-height:1.65}
table.kb{width:100%;border-collapse:collapse;margin:22px 0;font-size:.86rem}
table.kb th,table.kb td{border:1px solid var(--bdr);padding:9px 12px;text-align:left}
table.kb th{background:var(--lt);font-weight:700}
.cta-box{background:linear-gradient(135deg,var(--g),var(--g2));border-radius:14px;padding:26px;text-align:center;margin:34px 0}
.cta-box .cta-box p{color:rgba(255,255,255,.8);font-size:.85rem;margin-bottom:14px}
.cta-box a{display:inline-block;padding:10px 22px;background:#fff;color:var(--g2);border-radius:8px;font-weight:700;font-size:.85rem}

/* coexistence-uitgelegd.php */
.article-hero{background:linear-gradient(135deg,var(--dk),var(--dk2));padding:56px 5% 48px}
.hero-inner{max-width:720px;margin:0 auto}
.art-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,184,122,.18);color:var(--g);padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:18px}
.art-meta{display:flex;align-items:center;gap:16px;font-size:.78rem;color:rgba(255,255,255,.55)}
.body-wrap{max-width:720px;margin:0 auto;padding:48px 5%}
.lead{font-size:1.08rem;color:#334155;line-height:1.7;margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid var(--bdr)}
h2.section-title{font-size:1.2rem;font-weight:800;color:var(--dk);margin:36px 0 18px}
p.prose{font-size:.93rem;color:#334155;line-height:1.75;margin-bottom:16px}
ul.prose{font-size:.93rem;color:#334155;line-height:1.75;margin:0 0 16px 20px}ul.prose li{margin-bottom:7px}
.callout{background:#e8faf4;border:1px solid #a7f3d0;border-left:4px solid var(--g);border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#0f5132;line-height:1.65}
.warn{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid #f59e0b;border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#7c2d12;line-height:1.65}
table.kb{width:100%;border-collapse:collapse;margin:22px 0;font-size:.86rem}
table.kb th,table.kb td{border:1px solid var(--bdr);padding:9px 12px;text-align:left}
table.kb th{background:var(--lt);font-weight:700}
.cta-box{background:linear-gradient(135deg,var(--g),var(--g2));border-radius:14px;padding:26px;text-align:center;margin:34px 0}
.cta-box .cta-box p{color:rgba(255,255,255,.8);font-size:.85rem;margin-bottom:14px}
.cta-box a{display:inline-block;padding:10px 22px;background:#fff;color:var(--g2);border-radius:8px;font-weight:700;font-size:.85rem}

/* avg-opt-out-whatsapp.php */
.article-hero{background:linear-gradient(135deg,var(--dk),var(--dk2));padding:56px 5% 48px}
.hero-inner{max-width:720px;margin:0 auto}
.art-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,184,122,.18);color:var(--g);padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:18px}
.art-meta{display:flex;align-items:center;gap:16px;font-size:.78rem;color:rgba(255,255,255,.55)}
.body-wrap{max-width:720px;margin:0 auto;padding:48px 5%}
.lead{font-size:1.08rem;color:#334155;line-height:1.7;margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid var(--bdr)}
h2.section-title{font-size:1.2rem;font-weight:800;color:var(--dk);margin:36px 0 18px}
p.prose{font-size:.93rem;color:#334155;line-height:1.75;margin-bottom:16px}
ul.prose{font-size:.93rem;color:#334155;line-height:1.75;margin:0 0 16px 20px}ul.prose li{margin-bottom:7px}
.callout{background:#e8faf4;border:1px solid #a7f3d0;border-left:4px solid var(--g);border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#0f5132;line-height:1.65}
.warn{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid #f59e0b;border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#7c2d12;line-height:1.65}
table.kb{width:100%;border-collapse:collapse;margin:22px 0;font-size:.86rem}
table.kb th,table.kb td{border:1px solid var(--bdr);padding:9px 12px;text-align:left}
table.kb th{background:var(--lt);font-weight:700}
.cta-box{background:linear-gradient(135deg,var(--g),var(--g2));border-radius:14px;padding:26px;text-align:center;margin:34px 0}
.cta-box .cta-box p{color:rgba(255,255,255,.8);font-size:.85rem;margin-bottom:14px}
.cta-box a{display:inline-block;padding:10px 22px;background:#fff;color:var(--g2);border-radius:8px;font-weight:700;font-size:.85rem}

/* eigen-nummer-koppelen.php */
#wc-widget{position:fixed;bottom:24px;right:24px;z-index:9998;font-family:'Inter',sans-serif;font-size:14px}
#wc-fab{position:relative;width:62px;height:62px;cursor:pointer}
#wc-fab-btn{width:62px;height:62px;border-radius:50%;background:#25D366;border:none;cursor:pointer;box-shadow:0 4px 24px rgba(37,211,102,.5);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;position:relative;z-index:2}
#wc-fab-btn:hover{transform:scale(1.07);box-shadow:0 6px 30px rgba(37,211,102,.6)}
#wc-fab-btn svg{width:32px;height:32px;fill:#fff}
#wc-fab-badge{position:absolute;top:-3px;right:-3px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:wc-pulse 2s infinite;z-index:3}
#wc-fab-bubble{position:absolute;bottom:72px;right:0;background:#fff;border-radius:14px 14px 4px 14px;padding:11px 15px;box-shadow:0 4px 20px rgba(0,0,0,.16);font-size:13px;line-height:1.45;max-width:220px;white-space:nowrap;opacity:0;transform:translateY(8px);transition:.3s ease;pointer-events:none}
#wc-fab-bubble.wc-show{opacity:1;transform:translateY(0);pointer-events:auto;cursor:pointer}
#wc-fab-bubble b{color:#075e54}
#wc-fab-bubble::after{content:'';position:absolute;bottom:-7px;right:20px;width:0;height:0;border:7px solid transparent;border-bottom:0;border-top-color:#fff}

/* Chat box — phone UI */
#wc-box{
  position:absolute;bottom:72px;right:0;
  width:340px;height:530px;
  background:#e5ddd5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23e5ddd5'/%3E%3C/svg%3E");
  border-radius:18px;
  box-shadow:0 12px 50px rgba(0,0,0,.28);
  overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(14px) scale(.95);transition:.3s ease;
  pointer-events:none;
}
#wc-box.wc-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* Header */
#wc-hdr{background:#075e54;padding:10px 14px 10px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
#wc-hdr-close{background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-left:auto;transition:.2s}
#wc-hdr-close:hover{background:rgba(255,255,255,.28)}
.wc-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.wc-hdr-info .wc-hdr-name{color:#fff;font-weight:600;font-size:13.5px;line-height:1.2}
.wc-hdr-info .wc-hdr-status{color:rgba(255,255,255,.72);font-size:11px;display:flex;align-items:center;gap:4px}
.wc-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;animation:wc-pulse 2s infinite}

/* Messages scroll area */
#wc-msgs{flex:1;overflow-y:auto;padding:10px 10px 4px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
#wc-msgs::-webkit-scrollbar{width:4px}
#wc-msgs::-webkit-scrollbar-thumb{background:#bbb;border-radius:2px}

/* Bubbles */
.wc-bubble{max-width:82%;padding:8px 11px 6px;border-radius:8px;font-size:13px;line-height:1.55;position:relative;word-break:break-word}
.wc-bubble.bot{background:#fff;align-self:flex-start;border-radius:0 8px 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wc-bubble.user{background:#d9fdd3;align-self:flex-end;border-radius:8px 0 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wc-bubble img{max-width:160px;border-radius:6px;display:block}
.wc-doc{display:flex;align-items:center;gap:7px;font-size:12.5px}
.wc-doc svg{width:20px;height:20px;flex-shrink:0;color:#54656f}
.wc-bubble .wc-ts{font-size:10px;color:rgba(0,0,0,.38);text-align:right;margin-top:2px}
.wc-bubble b{font-weight:600}

/* Typing indicator */
.wc-typing{background:#fff;align-self:flex-start;border-radius:0 8px 8px 8px;padding:10px 14px;display:flex;gap:4px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wc-typing span{width:7px;height:7px;border-radius:50%;background:#bbb;animation:wc-bounce .9s infinite}
.wc-typing span:nth-child(2){animation-delay:.2s}
.wc-typing span:nth-child(3){animation-delay:.4s}

/* Bottom input area */
#wc-bottom{flex-shrink:0;background:#f0f2f5;border-top:1px solid #ddd}

/* Quick reply buttons */
#wc-quick{padding:8px 10px 0;display:flex;flex-wrap:wrap;gap:6px}
#wc-quick:empty{padding:0}
.wc-qr{background:#fff;border:1.5px solid #25D366;color:#075e54;border-radius:20px;padding:6px 13px;font-size:12px;font-weight:500;cursor:pointer;transition:.18s;white-space:nowrap}
.wc-qr:hover{background:#25D366;color:#fff;border-color:#25D366}

/* Input bar — zelfde stijl als de hero-simulator (paperclip · veld · mic · verzend) */
#wc-input{display:flex;gap:7px;padding:8px 9px;align-items:center;flex-shrink:0}
#wc-text-inp{flex:1;border:none;border-radius:20px;padding:9px 14px;font-size:13px;background:#fff;outline:none;color:#111b21;font-family:inherit}
.wc-iconbtn{background:none;border:none;color:#54656f;width:33px;height:37px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:color .15s}
.wc-iconbtn svg{width:21px;height:21px}
.wc-iconbtn:hover{color:#128C7E}
.wc-iconbtn.rec{color:#ef4444}
.wc-iconbtn.rec svg{animation:wc-rec 1s infinite}
#wc-text-send{width:37px;height:37px;border-radius:50%;border:none;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s}
#wc-text-send:hover{background:#128C7E}
#wc-text-send svg{width:18px;height:18px}

/* Final CTAs */
#wc-cta-area{display:none;padding:10px}
#wc-cta-area.wc-show{display:flex;flex-direction:column;gap:8px}
.wc-cta{padding:11px 16px;border-radius:11px;font-size:13px;font-weight:600;text-align:center;cursor:pointer;text-decoration:none;display:block;transition:.18s;line-height:1.3}
.wc-cta-wa{background:#25D366;color:#fff;box-shadow:0 2px 10px rgba(37,211,102,.35)}
.wc-cta-wa:hover{background:#128C7E;color:#fff}
.wc-cta-form{background:#fff;border:2px solid #00b87a;color:#00b87a}
.wc-cta-form:hover{background:#00b87a;color:#fff}
.wc-cta-hint{font-size:11px;color:#888;text-align:center;margin-top:2px}

@keyframes wc-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.92)}}
@keyframes wc-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@keyframes wc-rec{0%,100%{opacity:1}50%{opacity:.4}}

/* Mobile — anker de chatbox aan de VIEWPORT (position:fixed + left/right) i.p.v.
   aan de FAB. Zo kan hij nooit buiten het scherm vallen, ook niet bij horizontale
   page-overflow. Breakpoint 480px dekt ook 412/414px-telefoons. */
@media(max-width:480px){
  #wc-box{
    position:fixed;
    left:10px; right:10px;
    width:auto;
    bottom:84px;
    height:min(74vh,540px);
    max-height:calc(100vh - 100px);
    border-radius:16px;
  }
  #wc-fab-bubble{max-width:200px;white-space:normal}
}

/* bot-trainen.php */
#wc-widget{position:fixed;bottom:24px;right:24px;z-index:9998;font-family:'Inter',sans-serif;font-size:14px}
#wc-fab{position:relative;width:62px;height:62px;cursor:pointer}
#wc-fab-btn{width:62px;height:62px;border-radius:50%;background:#25D366;border:none;cursor:pointer;box-shadow:0 4px 24px rgba(37,211,102,.5);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;position:relative;z-index:2}
#wc-fab-btn:hover{transform:scale(1.07);box-shadow:0 6px 30px rgba(37,211,102,.6)}
#wc-fab-btn svg{width:32px;height:32px;fill:#fff}
#wc-fab-badge{position:absolute;top:-3px;right:-3px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:wc-pulse 2s infinite;z-index:3}
#wc-fab-bubble{position:absolute;bottom:72px;right:0;background:#fff;border-radius:14px 14px 4px 14px;padding:11px 15px;box-shadow:0 4px 20px rgba(0,0,0,.16);font-size:13px;line-height:1.45;max-width:220px;white-space:nowrap;opacity:0;transform:translateY(8px);transition:.3s ease;pointer-events:none}
#wc-fab-bubble.wc-show{opacity:1;transform:translateY(0);pointer-events:auto;cursor:pointer}
#wc-fab-bubble b{color:#075e54}
#wc-fab-bubble::after{content:'';position:absolute;bottom:-7px;right:20px;width:0;height:0;border:7px solid transparent;border-bottom:0;border-top-color:#fff}

/* Chat box — phone UI */
#wc-box{
  position:absolute;bottom:72px;right:0;
  width:340px;height:530px;
  background:#e5ddd5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23e5ddd5'/%3E%3C/svg%3E");
  border-radius:18px;
  box-shadow:0 12px 50px rgba(0,0,0,.28);
  overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(14px) scale(.95);transition:.3s ease;
  pointer-events:none;
}
#wc-box.wc-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* Header */
#wc-hdr{background:#075e54;padding:10px 14px 10px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
#wc-hdr-close{background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-left:auto;transition:.2s}
#wc-hdr-close:hover{background:rgba(255,255,255,.28)}
.wc-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.wc-hdr-info .wc-hdr-name{color:#fff;font-weight:600;font-size:13.5px;line-height:1.2}
.wc-hdr-info .wc-hdr-status{color:rgba(255,255,255,.72);font-size:11px;display:flex;align-items:center;gap:4px}
.wc-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;animation:wc-pulse 2s infinite}

/* Messages scroll area */
#wc-msgs{flex:1;overflow-y:auto;padding:10px 10px 4px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
#wc-msgs::-webkit-scrollbar{width:4px}
#wc-msgs::-webkit-scrollbar-thumb{background:#bbb;border-radius:2px}

/* Bubbles */
.wc-bubble{max-width:82%;padding:8px 11px 6px;border-radius:8px;font-size:13px;line-height:1.55;position:relative;word-break:break-word}
.wc-bubble.bot{background:#fff;align-self:flex-start;border-radius:0 8px 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wc-bubble.user{background:#d9fdd3;align-self:flex-end;border-radius:8px 0 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wc-bubble img{max-width:160px;border-radius:6px;display:block}
.wc-doc{display:flex;align-items:center;gap:7px;font-size:12.5px}
.wc-doc svg{width:20px;height:20px;flex-shrink:0;color:#54656f}
.wc-bubble .wc-ts{font-size:10px;color:rgba(0,0,0,.38);text-align:right;margin-top:2px}
.wc-bubble b{font-weight:600}

/* Typing indicator */
.wc-typing{background:#fff;align-self:flex-start;border-radius:0 8px 8px 8px;padding:10px 14px;display:flex;gap:4px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wc-typing span{width:7px;height:7px;border-radius:50%;background:#bbb;animation:wc-bounce .9s infinite}
.wc-typing span:nth-child(2){animation-delay:.2s}
.wc-typing span:nth-child(3){animation-delay:.4s}

/* Bottom input area */
#wc-bottom{flex-shrink:0;background:#f0f2f5;border-top:1px solid #ddd}

/* Quick reply buttons */
#wc-quick{padding:8px 10px 0;display:flex;flex-wrap:wrap;gap:6px}
#wc-quick:empty{padding:0}
.wc-qr{background:#fff;border:1.5px solid #25D366;color:#075e54;border-radius:20px;padding:6px 13px;font-size:12px;font-weight:500;cursor:pointer;transition:.18s;white-space:nowrap}
.wc-qr:hover{background:#25D366;color:#fff;border-color:#25D366}

/* Input bar — zelfde stijl als de hero-simulator (paperclip · veld · mic · verzend) */
#wc-input{display:flex;gap:7px;padding:8px 9px;align-items:center;flex-shrink:0}
#wc-text-inp{flex:1;border:none;border-radius:20px;padding:9px 14px;font-size:13px;background:#fff;outline:none;color:#111b21;font-family:inherit}
.wc-iconbtn{background:none;border:none;color:#54656f;width:33px;height:37px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:color .15s}
.wc-iconbtn svg{width:21px;height:21px}
.wc-iconbtn:hover{color:#128C7E}
.wc-iconbtn.rec{color:#ef4444}
.wc-iconbtn.rec svg{animation:wc-rec 1s infinite}
#wc-text-send{width:37px;height:37px;border-radius:50%;border:none;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s}
#wc-text-send:hover{background:#128C7E}
#wc-text-send svg{width:18px;height:18px}

/* Final CTAs */
#wc-cta-area{display:none;padding:10px}
#wc-cta-area.wc-show{display:flex;flex-direction:column;gap:8px}
.wc-cta{padding:11px 16px;border-radius:11px;font-size:13px;font-weight:600;text-align:center;cursor:pointer;text-decoration:none;display:block;transition:.18s;line-height:1.3}
.wc-cta-wa{background:#25D366;color:#fff;box-shadow:0 2px 10px rgba(37,211,102,.35)}
.wc-cta-wa:hover{background:#128C7E;color:#fff}
.wc-cta-form{background:#fff;border:2px solid #00b87a;color:#00b87a}
.wc-cta-form:hover{background:#00b87a;color:#fff}
.wc-cta-hint{font-size:11px;color:#888;text-align:center;margin-top:2px}

@keyframes wc-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.92)}}
@keyframes wc-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@keyframes wc-rec{0%,100%{opacity:1}50%{opacity:.4}}

/* Mobile — anker de chatbox aan de VIEWPORT (position:fixed + left/right) i.p.v.
   aan de FAB. Zo kan hij nooit buiten het scherm vallen, ook niet bij horizontale
   page-overflow. Breakpoint 480px dekt ook 412/414px-telefoons. */
@media(max-width:480px){
  #wc-box{
    position:fixed;
    left:10px; right:10px;
    width:auto;
    bottom:84px;
    height:min(74vh,540px);
    max-height:calc(100vh - 100px);
    border-radius:16px;
  }
  #wc-fab-bubble{max-width:200px;white-space:normal}
}

/* stem-kiezen.php */
#wc-widget{position:fixed;bottom:24px;right:24px;z-index:9998;font-family:'Inter',sans-serif;font-size:14px}
#wc-fab{position:relative;width:62px;height:62px;cursor:pointer}
#wc-fab-btn{width:62px;height:62px;border-radius:50%;background:#25D366;border:none;cursor:pointer;box-shadow:0 4px 24px rgba(37,211,102,.5);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;position:relative;z-index:2}
#wc-fab-btn:hover{transform:scale(1.07);box-shadow:0 6px 30px rgba(37,211,102,.6)}
#wc-fab-btn svg{width:32px;height:32px;fill:#fff}
#wc-fab-badge{position:absolute;top:-3px;right:-3px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:wc-pulse 2s infinite;z-index:3}
#wc-fab-bubble{position:absolute;bottom:72px;right:0;background:#fff;border-radius:14px 14px 4px 14px;padding:11px 15px;box-shadow:0 4px 20px rgba(0,0,0,.16);font-size:13px;line-height:1.45;max-width:220px;white-space:nowrap;opacity:0;transform:translateY(8px);transition:.3s ease;pointer-events:none}
#wc-fab-bubble.wc-show{opacity:1;transform:translateY(0);pointer-events:auto;cursor:pointer}
#wc-fab-bubble b{color:#075e54}
#wc-fab-bubble::after{content:'';position:absolute;bottom:-7px;right:20px;width:0;height:0;border:7px solid transparent;border-bottom:0;border-top-color:#fff}

/* Chat box — phone UI */
#wc-box{
  position:absolute;bottom:72px;right:0;
  width:340px;height:530px;
  background:#e5ddd5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23e5ddd5'/%3E%3C/svg%3E");
  border-radius:18px;
  box-shadow:0 12px 50px rgba(0,0,0,.28);
  overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(14px) scale(.95);transition:.3s ease;
  pointer-events:none;
}
#wc-box.wc-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* Header */
#wc-hdr{background:#075e54;padding:10px 14px 10px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
#wc-hdr-close{background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-left:auto;transition:.2s}
#wc-hdr-close:hover{background:rgba(255,255,255,.28)}
.wc-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.wc-hdr-info .wc-hdr-name{color:#fff;font-weight:600;font-size:13.5px;line-height:1.2}
.wc-hdr-info .wc-hdr-status{color:rgba(255,255,255,.72);font-size:11px;display:flex;align-items:center;gap:4px}
.wc-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;animation:wc-pulse 2s infinite}

/* Messages scroll area */
#wc-msgs{flex:1;overflow-y:auto;padding:10px 10px 4px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
#wc-msgs::-webkit-scrollbar{width:4px}
#wc-msgs::-webkit-scrollbar-thumb{background:#bbb;border-radius:2px}

/* Bubbles */
.wc-bubble{max-width:82%;padding:8px 11px 6px;border-radius:8px;font-size:13px;line-height:1.55;position:relative;word-break:break-word}
.wc-bubble.bot{background:#fff;align-self:flex-start;border-radius:0 8px 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wc-bubble.user{background:#d9fdd3;align-self:flex-end;border-radius:8px 0 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wc-bubble img{max-width:160px;border-radius:6px;display:block}
.wc-doc{display:flex;align-items:center;gap:7px;font-size:12.5px}
.wc-doc svg{width:20px;height:20px;flex-shrink:0;color:#54656f}
.wc-bubble .wc-ts{font-size:10px;color:rgba(0,0,0,.38);text-align:right;margin-top:2px}
.wc-bubble b{font-weight:600}

/* Typing indicator */
.wc-typing{background:#fff;align-self:flex-start;border-radius:0 8px 8px 8px;padding:10px 14px;display:flex;gap:4px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wc-typing span{width:7px;height:7px;border-radius:50%;background:#bbb;animation:wc-bounce .9s infinite}
.wc-typing span:nth-child(2){animation-delay:.2s}
.wc-typing span:nth-child(3){animation-delay:.4s}

/* Bottom input area */
#wc-bottom{flex-shrink:0;background:#f0f2f5;border-top:1px solid #ddd}

/* Quick reply buttons */
#wc-quick{padding:8px 10px 0;display:flex;flex-wrap:wrap;gap:6px}
#wc-quick:empty{padding:0}
.wc-qr{background:#fff;border:1.5px solid #25D366;color:#075e54;border-radius:20px;padding:6px 13px;font-size:12px;font-weight:500;cursor:pointer;transition:.18s;white-space:nowrap}
.wc-qr:hover{background:#25D366;color:#fff;border-color:#25D366}

/* Input bar — zelfde stijl als de hero-simulator (paperclip · veld · mic · verzend) */
#wc-input{display:flex;gap:7px;padding:8px 9px;align-items:center;flex-shrink:0}
#wc-text-inp{flex:1;border:none;border-radius:20px;padding:9px 14px;font-size:13px;background:#fff;outline:none;color:#111b21;font-family:inherit}
.wc-iconbtn{background:none;border:none;color:#54656f;width:33px;height:37px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:color .15s}
.wc-iconbtn svg{width:21px;height:21px}
.wc-iconbtn:hover{color:#128C7E}
.wc-iconbtn.rec{color:#ef4444}
.wc-iconbtn.rec svg{animation:wc-rec 1s infinite}
#wc-text-send{width:37px;height:37px;border-radius:50%;border:none;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s}
#wc-text-send:hover{background:#128C7E}
#wc-text-send svg{width:18px;height:18px}

/* Final CTAs */
#wc-cta-area{display:none;padding:10px}
#wc-cta-area.wc-show{display:flex;flex-direction:column;gap:8px}
.wc-cta{padding:11px 16px;border-radius:11px;font-size:13px;font-weight:600;text-align:center;cursor:pointer;text-decoration:none;display:block;transition:.18s;line-height:1.3}
.wc-cta-wa{background:#25D366;color:#fff;box-shadow:0 2px 10px rgba(37,211,102,.35)}
.wc-cta-wa:hover{background:#128C7E;color:#fff}
.wc-cta-form{background:#fff;border:2px solid #00b87a;color:#00b87a}
.wc-cta-form:hover{background:#00b87a;color:#fff}
.wc-cta-hint{font-size:11px;color:#888;text-align:center;margin-top:2px}

@keyframes wc-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.92)}}
@keyframes wc-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@keyframes wc-rec{0%,100%{opacity:1}50%{opacity:.4}}

/* Mobile — anker de chatbox aan de VIEWPORT (position:fixed + left/right) i.p.v.
   aan de FAB. Zo kan hij nooit buiten het scherm vallen, ook niet bij horizontale
   page-overflow. Breakpoint 480px dekt ook 412/414px-telefoons. */
@media(max-width:480px){
  #wc-box{
    position:fixed;
    left:10px; right:10px;
    width:auto;
    bottom:84px;
    height:min(74vh,540px);
    max-height:calc(100vh - 100px);
    border-radius:16px;
  }
  #wc-fab-bubble{max-width:200px;white-space:normal}
}

/* kanalen-kiezen.php */
#wc-widget{position:fixed;bottom:24px;right:24px;z-index:9998;font-family:'Inter',sans-serif;font-size:14px}
#wc-fab{position:relative;width:62px;height:62px;cursor:pointer}
#wc-fab-btn{width:62px;height:62px;border-radius:50%;background:#25D366;border:none;cursor:pointer;box-shadow:0 4px 24px rgba(37,211,102,.5);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;position:relative;z-index:2}
#wc-fab-btn:hover{transform:scale(1.07);box-shadow:0 6px 30px rgba(37,211,102,.6)}
#wc-fab-btn svg{width:32px;height:32px;fill:#fff}
#wc-fab-badge{position:absolute;top:-3px;right:-3px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:wc-pulse 2s infinite;z-index:3}
#wc-fab-bubble{position:absolute;bottom:72px;right:0;background:#fff;border-radius:14px 14px 4px 14px;padding:11px 15px;box-shadow:0 4px 20px rgba(0,0,0,.16);font-size:13px;line-height:1.45;max-width:220px;white-space:nowrap;opacity:0;transform:translateY(8px);transition:.3s ease;pointer-events:none}
#wc-fab-bubble.wc-show{opacity:1;transform:translateY(0);pointer-events:auto;cursor:pointer}
#wc-fab-bubble b{color:#075e54}
#wc-fab-bubble::after{content:'';position:absolute;bottom:-7px;right:20px;width:0;height:0;border:7px solid transparent;border-bottom:0;border-top-color:#fff}

/* Chat box — phone UI */
#wc-box{
  position:absolute;bottom:72px;right:0;
  width:340px;height:530px;
  background:#e5ddd5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23e5ddd5'/%3E%3C/svg%3E");
  border-radius:18px;
  box-shadow:0 12px 50px rgba(0,0,0,.28);
  overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(14px) scale(.95);transition:.3s ease;
  pointer-events:none;
}
#wc-box.wc-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* Header */
#wc-hdr{background:#075e54;padding:10px 14px 10px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
#wc-hdr-close{background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-left:auto;transition:.2s}
#wc-hdr-close:hover{background:rgba(255,255,255,.28)}
.wc-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.wc-hdr-info .wc-hdr-name{color:#fff;font-weight:600;font-size:13.5px;line-height:1.2}
.wc-hdr-info .wc-hdr-status{color:rgba(255,255,255,.72);font-size:11px;display:flex;align-items:center;gap:4px}
.wc-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;animation:wc-pulse 2s infinite}

/* Messages scroll area */
#wc-msgs{flex:1;overflow-y:auto;padding:10px 10px 4px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
#wc-msgs::-webkit-scrollbar{width:4px}
#wc-msgs::-webkit-scrollbar-thumb{background:#bbb;border-radius:2px}

/* Bubbles */
.wc-bubble{max-width:82%;padding:8px 11px 6px;border-radius:8px;font-size:13px;line-height:1.55;position:relative;word-break:break-word}
.wc-bubble.bot{background:#fff;align-self:flex-start;border-radius:0 8px 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wc-bubble.user{background:#d9fdd3;align-self:flex-end;border-radius:8px 0 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wc-bubble img{max-width:160px;border-radius:6px;display:block}
.wc-doc{display:flex;align-items:center;gap:7px;font-size:12.5px}
.wc-doc svg{width:20px;height:20px;flex-shrink:0;color:#54656f}
.wc-bubble .wc-ts{font-size:10px;color:rgba(0,0,0,.38);text-align:right;margin-top:2px}
.wc-bubble b{font-weight:600}

/* Typing indicator */
.wc-typing{background:#fff;align-self:flex-start;border-radius:0 8px 8px 8px;padding:10px 14px;display:flex;gap:4px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wc-typing span{width:7px;height:7px;border-radius:50%;background:#bbb;animation:wc-bounce .9s infinite}
.wc-typing span:nth-child(2){animation-delay:.2s}
.wc-typing span:nth-child(3){animation-delay:.4s}

/* Bottom input area */
#wc-bottom{flex-shrink:0;background:#f0f2f5;border-top:1px solid #ddd}

/* Quick reply buttons */
#wc-quick{padding:8px 10px 0;display:flex;flex-wrap:wrap;gap:6px}
#wc-quick:empty{padding:0}
.wc-qr{background:#fff;border:1.5px solid #25D366;color:#075e54;border-radius:20px;padding:6px 13px;font-size:12px;font-weight:500;cursor:pointer;transition:.18s;white-space:nowrap}
.wc-qr:hover{background:#25D366;color:#fff;border-color:#25D366}

/* Input bar — zelfde stijl als de hero-simulator (paperclip · veld · mic · verzend) */
#wc-input{display:flex;gap:7px;padding:8px 9px;align-items:center;flex-shrink:0}
#wc-text-inp{flex:1;border:none;border-radius:20px;padding:9px 14px;font-size:13px;background:#fff;outline:none;color:#111b21;font-family:inherit}
.wc-iconbtn{background:none;border:none;color:#54656f;width:33px;height:37px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:color .15s}
.wc-iconbtn svg{width:21px;height:21px}
.wc-iconbtn:hover{color:#128C7E}
.wc-iconbtn.rec{color:#ef4444}
.wc-iconbtn.rec svg{animation:wc-rec 1s infinite}
#wc-text-send{width:37px;height:37px;border-radius:50%;border:none;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s}
#wc-text-send:hover{background:#128C7E}
#wc-text-send svg{width:18px;height:18px}

/* Final CTAs */
#wc-cta-area{display:none;padding:10px}
#wc-cta-area.wc-show{display:flex;flex-direction:column;gap:8px}
.wc-cta{padding:11px 16px;border-radius:11px;font-size:13px;font-weight:600;text-align:center;cursor:pointer;text-decoration:none;display:block;transition:.18s;line-height:1.3}
.wc-cta-wa{background:#25D366;color:#fff;box-shadow:0 2px 10px rgba(37,211,102,.35)}
.wc-cta-wa:hover{background:#128C7E;color:#fff}
.wc-cta-form{background:#fff;border:2px solid #00b87a;color:#00b87a}
.wc-cta-form:hover{background:#00b87a;color:#fff}
.wc-cta-hint{font-size:11px;color:#888;text-align:center;margin-top:2px}

@keyframes wc-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.92)}}
@keyframes wc-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@keyframes wc-rec{0%,100%{opacity:1}50%{opacity:.4}}

/* Mobile — anker de chatbox aan de VIEWPORT (position:fixed + left/right) i.p.v.
   aan de FAB. Zo kan hij nooit buiten het scherm vallen, ook niet bij horizontale
   page-overflow. Breakpoint 480px dekt ook 412/414px-telefoons. */
@media(max-width:480px){
  #wc-box{
    position:fixed;
    left:10px; right:10px;
    width:auto;
    bottom:84px;
    height:min(74vh,540px);
    max-height:calc(100vh - 100px);
    border-radius:16px;
  }
  #wc-fab-bubble{max-width:200px;white-space:normal}
}

/* whatsapp-officiele-api.php */
.article-hero{background:linear-gradient(135deg,var(--dk),var(--dk2));padding:56px 5% 48px}
.hero-inner{max-width:720px;margin:0 auto}
.art-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,184,122,.18);color:var(--g);padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:18px}
.art-meta{display:flex;align-items:center;gap:16px;font-size:.78rem;color:rgba(255,255,255,.55)}
.body-wrap{max-width:720px;margin:0 auto;padding:48px 5%}
.lead{font-size:1.08rem;color:#334155;line-height:1.7;margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid var(--bdr)}
h2.section-title{font-size:1.2rem;font-weight:800;color:var(--dk);margin:36px 0 18px}
p.prose{font-size:.93rem;color:#334155;line-height:1.75;margin-bottom:16px}
ul.prose{font-size:.93rem;color:#334155;line-height:1.75;margin:0 0 16px 20px}ul.prose li{margin-bottom:7px}
.callout{background:#e8faf4;border:1px solid #a7f3d0;border-left:4px solid var(--g);border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#0f5132;line-height:1.65}
.warn{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid #f59e0b;border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#7c2d12;line-height:1.65}
table.kb{width:100%;border-collapse:collapse;margin:22px 0;font-size:.86rem}
table.kb th,table.kb td{border:1px solid var(--bdr);padding:9px 12px;text-align:left}
table.kb th{background:var(--lt);font-weight:700}
.cta-box{background:linear-gradient(135deg,var(--g),var(--g2));border-radius:14px;padding:26px;text-align:center;margin:34px 0}
.cta-box .cta-box p{color:rgba(255,255,255,.8);font-size:.85rem;margin-bottom:14px}
.cta-box a{display:inline-block;padding:10px 22px;background:#fff;color:var(--g2);border-radius:8px;font-weight:700;font-size:.85rem}

/* wat-kost-whatsapp-business-api.php */
.article-hero{background:linear-gradient(135deg,var(--dk),var(--dk2));padding:56px 5% 48px}
.hero-inner{max-width:720px;margin:0 auto}
.art-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(0,184,122,.18);color:var(--g);padding:4px 12px;border-radius:20px;font-size:.72rem;font-weight:700;margin-bottom:18px}
.art-meta{display:flex;align-items:center;gap:16px;font-size:.78rem;color:rgba(255,255,255,.55)}
.body-wrap{max-width:720px;margin:0 auto;padding:48px 5%}
.lead{font-size:1.08rem;color:#334155;line-height:1.7;margin-bottom:32px;padding-bottom:32px;border-bottom:2px solid var(--bdr)}
h2.section-title{font-size:1.2rem;font-weight:800;color:var(--dk);margin:36px 0 18px}
p.prose{font-size:.93rem;color:#334155;line-height:1.75;margin-bottom:16px}
ul.prose{font-size:.93rem;color:#334155;line-height:1.75;margin:0 0 16px 20px}ul.prose li{margin-bottom:7px}
.callout{background:#e8faf4;border:1px solid #a7f3d0;border-left:4px solid var(--g);border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#0f5132;line-height:1.65}
.warn{background:#fff7ed;border:1px solid #fed7aa;border-left:4px solid #f59e0b;border-radius:10px;padding:16px 18px;margin:22px 0;font-size:.9rem;color:#7c2d12;line-height:1.65}
table.kb{width:100%;border-collapse:collapse;margin:22px 0;font-size:.86rem}
table.kb th,table.kb td{border:1px solid var(--bdr);padding:9px 12px;text-align:left}
table.kb th{background:var(--lt);font-weight:700}
.cta-box{background:linear-gradient(135deg,var(--g),var(--g2));border-radius:14px;padding:26px;text-align:center;margin:34px 0}
.cta-box .cta-box p{color:rgba(255,255,255,.8);font-size:.85rem;margin-bottom:14px}
.cta-box a{display:inline-block;padding:10px 22px;background:#fff;color:var(--g2);border-radius:8px;font-weight:700;font-size:.85rem}

/* whatsapp-business-behouden-of-cloud-api.php */
#wc-widget{position:fixed;bottom:24px;right:24px;z-index:9998;font-family:'Inter',sans-serif;font-size:14px}
#wc-fab{position:relative;width:62px;height:62px;cursor:pointer}
#wc-fab-btn{width:62px;height:62px;border-radius:50%;background:#25D366;border:none;cursor:pointer;box-shadow:0 4px 24px rgba(37,211,102,.5);display:flex;align-items:center;justify-content:center;transition:transform .2s,box-shadow .2s;position:relative;z-index:2}
#wc-fab-btn:hover{transform:scale(1.07);box-shadow:0 6px 30px rgba(37,211,102,.6)}
#wc-fab-btn svg{width:32px;height:32px;fill:#fff}
#wc-fab-badge{position:absolute;top:-3px;right:-3px;background:#ef4444;color:#fff;border-radius:50%;width:20px;height:20px;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;animation:wc-pulse 2s infinite;z-index:3}
#wc-fab-bubble{position:absolute;bottom:72px;right:0;background:#fff;border-radius:14px 14px 4px 14px;padding:11px 15px;box-shadow:0 4px 20px rgba(0,0,0,.16);font-size:13px;line-height:1.45;max-width:220px;white-space:nowrap;opacity:0;transform:translateY(8px);transition:.3s ease;pointer-events:none}
#wc-fab-bubble.wc-show{opacity:1;transform:translateY(0);pointer-events:auto;cursor:pointer}
#wc-fab-bubble b{color:#075e54}
#wc-fab-bubble::after{content:'';position:absolute;bottom:-7px;right:20px;width:0;height:0;border:7px solid transparent;border-bottom:0;border-top-color:#fff}

/* Chat box — phone UI */
#wc-box{
  position:absolute;bottom:72px;right:0;
  width:340px;height:530px;
  background:#e5ddd5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Crect width='400' height='400' fill='%23e5ddd5'/%3E%3C/svg%3E");
  border-radius:18px;
  box-shadow:0 12px 50px rgba(0,0,0,.28);
  overflow:hidden;
  display:flex;flex-direction:column;
  opacity:0;transform:translateY(14px) scale(.95);transition:.3s ease;
  pointer-events:none;
}
#wc-box.wc-open{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* Header */
#wc-hdr{background:#075e54;padding:10px 14px 10px 14px;display:flex;align-items:center;gap:10px;flex-shrink:0}
#wc-hdr-close{background:rgba(255,255,255,.15);border:none;color:#fff;cursor:pointer;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;font-size:15px;margin-left:auto;transition:.2s}
#wc-hdr-close:hover{background:rgba(255,255,255,.28)}
.wc-avatar{width:38px;height:38px;border-radius:50%;background:linear-gradient(135deg,#25D366,#128C7E);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff;font-size:13px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.2)}
.wc-hdr-info .wc-hdr-name{color:#fff;font-weight:600;font-size:13.5px;line-height:1.2}
.wc-hdr-info .wc-hdr-status{color:rgba(255,255,255,.72);font-size:11px;display:flex;align-items:center;gap:4px}
.wc-dot{width:7px;height:7px;border-radius:50%;background:#4ade80;display:inline-block;animation:wc-pulse 2s infinite}

/* Messages scroll area */
#wc-msgs{flex:1;overflow-y:auto;padding:10px 10px 4px;display:flex;flex-direction:column;gap:6px;scroll-behavior:smooth}
#wc-msgs::-webkit-scrollbar{width:4px}
#wc-msgs::-webkit-scrollbar-thumb{background:#bbb;border-radius:2px}

/* Bubbles */
.wc-bubble{max-width:82%;padding:8px 11px 6px;border-radius:8px;font-size:13px;line-height:1.55;position:relative;word-break:break-word}
.wc-bubble.bot{background:#fff;align-self:flex-start;border-radius:0 8px 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wc-bubble.user{background:#d9fdd3;align-self:flex-end;border-radius:8px 0 8px 8px;box-shadow:0 1px 2px rgba(0,0,0,.08)}
.wc-bubble img{max-width:160px;border-radius:6px;display:block}
.wc-doc{display:flex;align-items:center;gap:7px;font-size:12.5px}
.wc-doc svg{width:20px;height:20px;flex-shrink:0;color:#54656f}
.wc-bubble .wc-ts{font-size:10px;color:rgba(0,0,0,.38);text-align:right;margin-top:2px}
.wc-bubble b{font-weight:600}

/* Typing indicator */
.wc-typing{background:#fff;align-self:flex-start;border-radius:0 8px 8px 8px;padding:10px 14px;display:flex;gap:4px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.1)}
.wc-typing span{width:7px;height:7px;border-radius:50%;background:#bbb;animation:wc-bounce .9s infinite}
.wc-typing span:nth-child(2){animation-delay:.2s}
.wc-typing span:nth-child(3){animation-delay:.4s}

/* Bottom input area */
#wc-bottom{flex-shrink:0;background:#f0f2f5;border-top:1px solid #ddd}

/* Quick reply buttons */
#wc-quick{padding:8px 10px 0;display:flex;flex-wrap:wrap;gap:6px}
#wc-quick:empty{padding:0}
.wc-qr{background:#fff;border:1.5px solid #25D366;color:#075e54;border-radius:20px;padding:6px 13px;font-size:12px;font-weight:500;cursor:pointer;transition:.18s;white-space:nowrap}
.wc-qr:hover{background:#25D366;color:#fff;border-color:#25D366}

/* Input bar — zelfde stijl als de hero-simulator (paperclip · veld · mic · verzend) */
#wc-input{display:flex;gap:7px;padding:8px 9px;align-items:center;flex-shrink:0}
#wc-text-inp{flex:1;border:none;border-radius:20px;padding:9px 14px;font-size:13px;background:#fff;outline:none;color:#111b21;font-family:inherit}
.wc-iconbtn{background:none;border:none;color:#54656f;width:33px;height:37px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;padding:0;transition:color .15s}
.wc-iconbtn svg{width:21px;height:21px}
.wc-iconbtn:hover{color:#128C7E}
.wc-iconbtn.rec{color:#ef4444}
.wc-iconbtn.rec svg{animation:wc-rec 1s infinite}
#wc-text-send{width:37px;height:37px;border-radius:50%;border:none;background:#25D366;color:#fff;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;transition:background .15s}
#wc-text-send:hover{background:#128C7E}
#wc-text-send svg{width:18px;height:18px}

/* Final CTAs */
#wc-cta-area{display:none;padding:10px}
#wc-cta-area.wc-show{display:flex;flex-direction:column;gap:8px}
.wc-cta{padding:11px 16px;border-radius:11px;font-size:13px;font-weight:600;text-align:center;cursor:pointer;text-decoration:none;display:block;transition:.18s;line-height:1.3}
.wc-cta-wa{background:#25D366;color:#fff;box-shadow:0 2px 10px rgba(37,211,102,.35)}
.wc-cta-wa:hover{background:#128C7E;color:#fff}
.wc-cta-form{background:#fff;border:2px solid #00b87a;color:#00b87a}
.wc-cta-form:hover{background:#00b87a;color:#fff}
.wc-cta-hint{font-size:11px;color:#888;text-align:center;margin-top:2px}

@keyframes wc-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.7;transform:scale(.92)}}
@keyframes wc-bounce{0%,60%,100%{transform:translateY(0)}30%{transform:translateY(-5px)}}
@keyframes wc-rec{0%,100%{opacity:1}50%{opacity:.4}}

/* Mobile — anker de chatbox aan de VIEWPORT (position:fixed + left/right) i.p.v.
   aan de FAB. Zo kan hij nooit buiten het scherm vallen, ook niet bij horizontale
   page-overflow. Breakpoint 480px dekt ook 412/414px-telefoons. */
@media(max-width:480px){
  #wc-box{
    position:fixed;
    left:10px; right:10px;
    width:auto;
    bottom:84px;
    height:min(74vh,540px);
    max-height:calc(100vh - 100px);
    border-radius:16px;
  }
  #wc-fab-bubble{max-width:200px;white-space:normal}
}

/* mobile contrast & layout */
html.kb-page{color-scheme:light only}
.kb-page .article-hero h1,.kb-page .kb-hero h1,.kb-page .article-hero .hero-inner h1{color:#fff!important;-webkit-text-fill-color:#fff!important}
.kb-page .article-hero p,.kb-page .kb-hero p,.kb-page .article-hero .art-meta,.kb-page .kb-hero .art-meta,.kb-page .article-hero .art-meta span,.kb-page .kb-cat{color:rgba(255,255,255,.85)!important}
.kb-page .cta-block h2,.kb-page .cta-block h3,.kb-page .cta-block p,.kb-page .cta-box h2,.kb-page .cta-box h3,.kb-page .cta-box p,.kb-page .cta-art h2,.kb-page .cta-art h3,.kb-page .cta-art p,.kb-page .cta-sidebar h3,.kb-page .cta-sidebar p{color:#fff!important}
.kb-page .cta-block p,.kb-page .cta-box p,.kb-page .cta-art p,.kb-page .cta-sidebar p{color:rgba(255,255,255,.78)!important}
@media(max-width:768px){.kb-page .article-hero,.kb-page .kb-hero{padding:40px 5% 36px}.kb-page .article-hero h1,.kb-page .kb-hero h1{font-size:1.45rem!important}.kb-page .body-wrap,.kb-page .kb-wrap{padding:32px 5%}.kb-page .stats-grid,.kb-page .scenarios,.kb-page .articles-grid,.kb-page .kb-grid,.kb-page .results-grid{grid-template-columns:1fr}}
@media(prefers-color-scheme:dark){html.kb-page{color-scheme:light only}html.kb-page body{background:#fff!important;color:#1f2937!important}.kb-page .article-hero h1,.kb-page .kb-hero h1{color:#fff!important}}