/* storybrand.css - nieuwe stijlen voor de StoryBrand-ombouw. Merkkleur: #FF6B35, tekst #231F20, cream #F2F2EF. */

/* Secundaire, rustige CTA (vervangt de oude .animated-button gradient) */
.button-2.is-secondary-quiet {
  background: transparent;
  color: #231F20;
  border: 1px solid rgba(35,31,32,0.25);
  border-radius: 12px;
  padding: 16px 28px;
  font-weight: 600;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.button-2.is-secondary-quiet:hover {
  border-color: #FF6B35;
  background: rgba(255,107,53,0.06);
}

/* Zorg dat de primaire trial-knop visueel dominant blijft naast de secundaire */
.hero-cta-wrap { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }

/* WhatsApp-hero */
.wa-hero { display:flex; flex-direction:column; align-items:center; gap:14px; width:100%; }
.wa-caption { margin:0; font-size:14px; font-style:italic; color:#231F20; opacity:.7; text-align:center; max-width:320px; }
.wa-phone {
  width: 320px; max-width: 100%;
  background: #ECE5DD;
  border: 10px solid #111; border-radius: 36px;
  overflow: hidden; box-shadow: 0 24px 60px rgba(0,0,0,.18);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.wa-topbar { display:flex; align-items:center; gap:10px; background:#075E54; color:#fff; padding:14px 14px; }
.wa-avatar { width:34px; height:34px; border-radius:50%; background:#fff; object-fit:cover; }
.wa-contact { display:flex; flex-direction:column; line-height:1.2; }
.wa-name { font-weight:600; font-size:15px; }
.wa-status { font-size:12px; opacity:.85; }
.wa-chat { min-height:300px; padding:14px 12px; display:flex; flex-direction:column; gap:8px; }
.wa-msg { max-width:80%; padding:8px 11px; border-radius:10px; font-size:14px; line-height:1.4; color:#231F20; opacity:0; transform:translateY(6px); transition:opacity .3s ease, transform .3s ease; }
.wa-msg.show { opacity:1; transform:none; }
.wa-msg.out { align-self:flex-end; background:#DCF8C6; border-top-right-radius:2px; }
.wa-msg.in  { align-self:flex-start; background:#fff; border-top-left-radius:2px; }
.wa-typing { align-self:flex-start; background:#fff; padding:10px 12px; border-radius:10px; display:inline-flex; gap:4px; }
.wa-typing span { width:6px; height:6px; border-radius:50%; background:#9aa0a6; animation:wa-bounce 1s infinite; }
.wa-typing span:nth-child(2){ animation-delay:.15s } .wa-typing span:nth-child(3){ animation-delay:.3s }
@keyframes wa-bounce { 0%,60%,100%{transform:translateY(0)} 30%{transform:translateY(-4px)} }
.wa-inputbar { display:flex; align-items:center; gap:10px; padding:10px 12px; background:#F0F0F0; }
.wa-inputfield { flex:1; background:#fff; border-radius:18px; padding:8px 14px; color:#9aa0a6; font-size:13px; }
.wa-mic { color:#075E54; }
.wa-typing.out { align-self:flex-end; background:#DCF8C6; }
@media (prefers-reduced-motion: reduce) {
  .wa-msg { transition:none; }
}

/* Nu/Straks transformatieblok */
.sb-nustraks { max-width: 1100px; margin: 0 auto; padding: 56px 20px; }
.sb-nustraks-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.sb-col { padding: 28px; border-radius: 16px; }
.sb-col h3 { margin: 0 0 12px; font-size: 22px; }
.sb-col p { margin: 0; font-size: 16px; line-height: 1.6; color: #231F20; }
.sb-nu { background: #F2F2EF; }
.sb-straks { background: rgba(255,107,53,0.10); border-left: 4px solid #FF6B35; }
@media (max-width: 720px) { .sb-nustraks-grid { grid-template-columns: 1fr; } }

/* Persona-pagina disclaimer */
.sb-disclaimer { font-size: 13px; color: #6b6b6b; background:#F2F2EF; display:inline-block; padding:6px 12px; border-radius:8px; margin-bottom:14px; }

/* Rich-text lijsten: Webflow's .w-richtext ol/ul { overflow:hidden } snijdt de lijst-markers links af. Sitewide herstellen. */
.w-richtext ol,
.w-richtext ul { overflow: visible; }
.rich-texts.w-richtext ol,
.rich-texts.w-richtext ul {
  overflow: visible;
  padding-left: 1.75em;
  list-style-position: outside;
  margin: 0 0 1.5rem;
}
.rich-texts.w-richtext li { margin-bottom: 8px; }
.rich-texts.w-richtext li:last-child { margin-bottom: 0; }

/* Eenvoudig-resultaat 3-stappen (blogartikel-schrijven e.a.) */
.sb-steps { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:24px; }
.sb-step { background:#F2F2EF; border:2px solid #231F20; border-radius:16px; padding:24px; }
.sb-step-num { width:34px; height:34px; border-radius:50%; background:#FF6B35; color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; margin-bottom:12px; }
.sb-step h3 { margin:0 0 8px; font-size:18px; }
.sb-step p { margin:0; font-size:15px; line-height:1.55; color:#231F20; }
@media (max-width:720px){ .sb-steps{ grid-template-columns:1fr; } }

/* Oprichter-blok (over-ons) */
.sb-founder { display:flex; align-items:center; gap:16px; background:rgba(255,107,53,0.10); border-left:4px solid #FF6B35; border-radius:16px; padding:20px 22px; margin:18px 0; }
.sb-founder-img { width:84px; height:84px; border-radius:50%; flex:0 0 auto; object-fit:cover; }
.sb-founder-text { margin:0; font-size:15px; line-height:1.55; color:#231F20; }
@media (max-width:560px){ .sb-founder{ flex-direction:column; align-items:flex-start; } }

/* Zichtbaarheidsscan - sticky CTA-balk: styling staat nu in js/scan-sticky.js (self-contained),
   zodat de balk ook correct rendert op pagina's zonder storybrand.css (kennisbank, 401/404).
   Niet hier dupliceren - single source of truth = js/scan-sticky.js. */

/* Zichtbaarheidsscan-blok (homepage) */
.sb-scan { background:#fff; }
.sb-scan__grid { max-width:1080px; margin:0 auto; padding:56px 24px; display:grid; grid-template-columns:1fr 1.15fr; gap:48px; align-items:center; }
.sb-scan__text h2 { font-family:roca,sans-serif; font-weight:700; font-size:34px; line-height:1.15; margin:0 0 14px; color:#231F20; }
.sb-scan__text p { margin:0 0 22px; font-size:17px; line-height:1.6; color:#231F20; }
.sb-scan__meta { font-size:13px; color:#777; margin:14px 0 0 !important; }
.sb-scan__shot img { display:block; width:100%; height:auto; border-radius:12px; box-shadow:0 18px 50px rgba(0,0,0,.16); }
@media (max-width:760px){ .sb-scan__grid { grid-template-columns:1fr; gap:28px; } .sb-scan__text h2 { font-size:26px; } }

/* ============================================================
   Typografie-schaal (2026-05-30) — één bron, vervangt de verspreide
   Webflow-breakpoints. clamp() schaalt vloeiend; !important wint over
   de gegenereerde @media-regels in dibbi.css. Duidelijke trap:
   hero 44 / sectie-h2 34 / sectie-tittle 30 (px op desktop).
   ============================================================ */
h1, .main-heading        { font-size: clamp(2rem, 4vw, 2.75rem) !important; }
h2                       { font-size: clamp(1.6rem, 3vw, 2.125rem) !important; }
.section-tittle-2        { font-size: clamp(1.5rem, 2.6vw, 1.875rem) !important; }

/* Hero-grid compacter: marge 64 -> 32px boven en onder */
.padding-section-large.feature { padding-top: 2rem !important; padding-bottom: 2rem !important; }