/* IRM360 template 'boek-uw-demo': inline <style> uit boek-uw-demo.html, paden herschreven naar de thema-map. */
/* ---------- Demo boeken: tekst + Calendly ---------- */
.demo { background: #fff; padding: var(--space-8) 0 var(--space-9); }
.demo__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: clamp(32px, 4vw, 64px); align-items: start; }
.demo h1 {
  font-size: clamp(2.1rem, 3.5vw, 3.3rem); line-height: var(--lh-tight); letter-spacing: var(--ls-tight);
  font-weight: var(--fw-extrabold); color: var(--ink-dark); margin: 0 0 var(--space-4); max-width: 14ch;
}
.demo h1 .accent { color: var(--brand); }
.demo__lead { font-size: 1rem; color: var(--text-muted); line-height: 1.62; margin: 0 0 var(--space-4); max-width: 54ch; }
.demo__copy { font-size: 1rem; color: rgba(22, 51, 0, .78); line-height: 1.62; margin: 0; max-width: 50ch; }
.demo .ticks { list-style: none; margin: var(--space-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.demo .ticks li { position: relative; padding-left: 28px; font-size: 15px; color: var(--ink-dark); }
.demo .ticks li::before {
  content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #CDE9C2 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231E4A2B' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 13l4 4 10-10'/%3E%3C/svg%3E") center / 10px no-repeat;
}
.demo__note { display: flex; align-items: center; gap: 8px; margin-top: var(--space-5); color: var(--text-muted); font-size: var(--fs-sm); }
.demo__note svg { width: 15px; height: 15px; color: var(--brand); }
.demo__note a { color: var(--ink-dark); font-weight: var(--fw-semibold); text-decoration: none; }
.demo__cal {
  background: #fff; border: 1px solid #E6EBE3; border-radius: 16px; overflow: hidden;
  box-shadow: 0 2px 6px rgba(20, 50, 30, .04), 0 18px 44px rgba(20, 50, 30, .09);
  height: 720px;
}
.demo__cal iframe { width: 100%; height: 100%; border: 0; display: block; }
@media (max-width: 940px) { .demo__grid { grid-template-columns: 1fr; } .demo__cal { height: 760px; } }

/* ---------- Meer agenda's: knoppen boven de agenda (zelfde stijl als de filterkopjes op de site) ---------- */
.demo__kies { display: flex; flex-wrap: wrap; gap: 4px 26px; border-bottom: 1px solid #E3E9DF; margin-bottom: var(--space-4); }
.demo__kies-knop {
  position: relative; background: none; border: 0; padding: 0 0 12px; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; font-weight: var(--fw-semibold); color: var(--text-muted);
  transition: color var(--dur-fast) var(--ease-standard); touch-action: manipulation;
}
.demo__kies-knop::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  background: var(--brand); transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease-standard);
}
.demo__kies-knop:hover, .demo__kies-knop.is-active { color: var(--ink-dark); }
.demo__kies-knop.is-active::after { transform: scaleX(1); }
@media (max-width: 940px) { .demo__kies-knop { min-height: 44px; } }