/* Sectie "Mail in de praktijk" (twee demo's onder elkaar, animatie links en uitleg rechts). Alleen eigen, geprefixte class-namen: botst niet met Tailwind of switchTheme().
   Kleuren en maten komen uit het bestaande Webnexus-ontwerp (navy/primary uit de tailwind.config, Plus Jakarta Sans + Inter,
   dezelfde kaart-radius en sectie-ritme). */
.ctc-demo-section{ --navy-950:#080d19; --navy-900:#0f172a; --primary-500:#6366f1; --primary-200:#c7d2fe; --primary-50:#eef2ff;
  padding:5rem 0; background:#fff; font-family:'Inter',system-ui,sans-serif; color:var(--navy-900); }
@media(min-width:768px){ .ctc-demo-section{ padding-top:6rem; padding-bottom:6rem; } }
.ctc-demo-section *{ box-sizing:border-box; }
.ctc-demo-container{ max-width:80rem; margin:0 auto; padding:0 1rem; }
@media(min-width:640px){ .ctc-demo-container{ padding:0 1.5rem; } }
@media(min-width:1024px){ .ctc-demo-container{ padding:0 2rem; } }
.ctc-demo-head{ text-align:center; margin-bottom:3rem; }
.ctc-demo-title{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; color:var(--navy-950); font-size:1.875rem; line-height:1.15; margin:0 0 .75rem; }
@media(min-width:640px){ .ctc-demo-title{ font-size:2.25rem; } }
.ctc-demo-sub{ font-size:1.125rem; line-height:1.6; color:rgba(15,23,42,.5); max-width:42rem; margin:0 auto; }

.ctc-demo-row{ display:grid; gap:2rem; align-items:center; grid-template-columns:minmax(0,1fr); max-width:80rem; margin:0 auto 7rem; }
.ctc-demo-row:last-child{ margin-bottom:0; }
@media(min-width:1024px){ .ctc-demo-row{ grid-template-columns:repeat(12,minmax(0,1fr)); gap:2.5rem; } .ctc-demo-frame{ grid-column:span 7; } .ctc-demo-copy{ grid-column:span 5; }
  .ctc-demo-row--copy-first .ctc-demo-copy{ order:1; } .ctc-demo-row--copy-first .ctc-demo-frame{ order:2; } }
.ctc-demo-copy h3{ font-family:'Plus Jakarta Sans',system-ui,sans-serif; font-weight:800; color:var(--navy-950); font-size:1.5rem; line-height:1.2; margin:0 0 .75rem; }
.ctc-demo-copy p{ color:rgba(15,23,42,.5); line-height:1.7; margin:0 0 1rem; }
.ctc-demo-copy .ctc-demo-label{ font-size:.75rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#4f46e5; margin:1.5rem 0 .75rem; }
.ctc-demo-list{ list-style:none; margin:0; padding:0; display:grid; gap:.875rem; }
.ctc-demo-list li{ position:relative; padding-left:1.5rem; color:rgba(15,23,42,.6); line-height:1.65; font-size:.9375rem; }
.ctc-demo-list li:before{ content:''; position:absolute; left:0; top:.55rem; width:.5rem; height:.5rem; border-radius:50%; background:var(--primary-500); }
.ctc-demo-list b{ color:var(--navy-900); font-weight:600; }
.ctc-demo-copy .ctc-demo-note{ font-size:.875rem; padding:1rem; border-radius:.75rem; background:var(--primary-50); border:1px solid #e0e7ff; color:#4338ca; margin-top:1.5rem; }

.ctc-demo-frame{ min-width:0; border-radius:1rem; overflow:hidden; background:#fff; border:1px solid rgba(15,23,42,.08); box-shadow:0 10px 30px rgba(15,23,42,.08); }
.ctc-demo-bar{ display:flex; align-items:center; gap:.75rem; padding:.625rem .875rem; background:rgba(8,13,25,.03); border-bottom:1px solid rgba(15,23,42,.06); }
.ctc-demo-dots{ display:inline-flex; gap:.375rem; }
.ctc-demo-dots i{ display:block; width:.625rem; height:.625rem; border-radius:50%; background:#cbd5e1; }
.ctc-demo-live{ font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#4f46e5; }
.ctc-demo-replay{ font:inherit; font-size:.8125rem; font-weight:600; margin-left:auto; color:var(--navy-900); background:#fff; border:1px solid rgba(15,23,42,.12); border-radius:9999px; padding:.3125rem .875rem; cursor:pointer; }
.ctc-demo-replay:hover{ border-color:var(--primary-200); background:var(--primary-50); }
/* Hoogtes per demo, gemeten aan de echte inhoud op de breedtes waarin het venster staat (678, 720, 358 en 288 px). Demo 2 is hoger omdat de blokken onder elkaar staan. */
.ctc-demo-body{ overflow:hidden; }
.ctc-demo-iframe{ display:block; width:100%; height:30rem; border:0; background:#f5f5f5; }   /* startwaarde: de demo meldt zijn echte hoogte */
@media print{ .ctc-demo-iframe{ display:none; } }