@keyframes demoMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.demo-marquee-track { display:flex; width:max-content; animation:demoMarquee 75s linear infinite; }
.demo-marquee-track:hover { animation-play-state:paused; }
.demo-phone-frame { border:1px solid #e5e7eb; border-radius:1.5rem; padding:1.25rem; background:linear-gradient(180deg,#fbfdff 0%,#f8fafc 100%); }
.demo-call-topline { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; }
.demo-kicker { font-size:.6875rem; line-height:1rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:#6b7280; }
.demo-call-title { margin-top:.25rem; font-size:1.125rem; line-height:1.5rem; font-weight:900; color:#111827; }
.demo-state { border:1px solid #dbeafe; background:#eff6ff; color:#1d4ed8; border-radius:9999px; padding:.45rem .75rem; font-size:.75rem; font-weight:800; white-space:nowrap; }
.demo-voice-grid { display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-top:1rem; }
.demo-voice-card { display:flex; align-items:center; gap:.75rem; border:1px solid #e5e7eb; background:#fff; border-radius:1rem; padding:.8rem; }
.demo-voice-card strong,.demo-voice-card span { display:block; }
.demo-voice-card strong { font-size:.8125rem; color:#111827; }
.demo-voice-card div>span { margin-top:.15rem; font-size:.7rem; color:#6b7280; }
.demo-avatar { display:inline-flex!important; align-items:center; justify-content:center; width:2.25rem; height:2.25rem; border-radius:9999px; flex:0 0 auto; background:#f3f4f6; color:#374151; font-size:.75rem; font-weight:900; }
.demo-avatar-ai { background:#002244; color:#fff; }
.demo-transcript { margin-top:1rem; height:16rem; overflow:auto; border:1px solid #e5e7eb; background:#fff; border-radius:1.25rem; padding:1rem; scroll-behavior:smooth; }
.demo-transcript-empty { color:#6b7280; font-size:.875rem; line-height:1.5rem; }
.demo-line { display:flex; gap:.75rem; align-items:flex-start; margin-bottom:.9rem; opacity:.45; transition:opacity .2s ease, transform .2s ease; }
.demo-line.is-active { opacity:1; transform:translateY(-1px); }
.demo-line.is-complete { opacity:.8; }
.demo-speaker { width:5.2rem; flex:0 0 auto; font-size:.7rem; font-weight:900; text-transform:uppercase; letter-spacing:.05em; color:#1d4ed8; padding-top:.15rem; }
.demo-line.customer .demo-speaker { color:#6b7280; }
.demo-copy { font-size:.875rem; line-height:1.5rem; color:#1f2937; }
.demo-progress { height:.35rem; margin-top:1rem; border-radius:9999px; background:#e5e7eb; overflow:hidden; }
.demo-progress span { display:block; width:0; height:100%; background:#002244; transition:width .3s linear; }
.demo-controls { display:flex; flex-wrap:wrap; gap:.75rem; margin-top:1rem; }
.demo-btn { display:inline-flex; align-items:center; justify-content:center; min-height:2.75rem; padding:.7rem 1rem; border-radius:.8rem; border:1px solid #d1d5db; background:#fff; color:#111827; font-size:.8rem; font-weight:900; transition:background .2s ease,border-color .2s ease,opacity .2s ease; cursor:pointer; }
.demo-btn:hover:not(:disabled) { background:#f9fafb; }
.demo-btn:focus-visible,.demo-phone-input:focus-visible { outline:3px solid #93c5fd; outline-offset:2px; }
.demo-btn:disabled { opacity:.45; cursor:not-allowed; }
.demo-btn-primary { border-color:#002244; background:#002244; color:#fff; }
.demo-btn-primary:hover:not(:disabled) { background:#00182f; }
.demo-confirmation { margin-top:1rem; display:flex; align-items:center; gap:.8rem; border:1px solid #bbf7d0; background:#f0fdf4; color:#166534; border-radius:1rem; padding:1rem; }
.demo-confirmation[hidden] { display:none; }
.demo-confirmation-icon { display:inline-flex; align-items:center; justify-content:center; width:2rem; height:2rem; border-radius:9999px; background:#16a34a; color:#fff; font-weight:900; }
.demo-confirmation strong,.demo-confirmation span { display:block; }
.demo-confirmation span { margin-top:.15rem; font-size:.8rem; }
.demo-system-chip { border:1px solid rgba(255,255,255,.2); background:rgba(255,255,255,.08); border-radius:.8rem; padding:.75rem; text-align:center; }
.demo-phone-input { width:100%; min-height:2.75rem; border:1px solid #d1d5db; border-radius:.8rem; padding:.7rem .9rem; font-size:.9rem; color:#111827; background:#fff; }
.demo-flow { display:flex; flex-wrap:wrap; gap:.55rem; align-items:center; font-size:.75rem; font-weight:800; color:#374151; }
.demo-flow span { border:1px solid #e5e7eb; background:#f9fafb; border-radius:.75rem; padding:.65rem .75rem; }
.demo-flow b { color:#9ca3af; }
@media (max-width:640px) {
  .demo-voice-grid { grid-template-columns:1fr; }
  .demo-transcript { height:18rem; }
  .demo-line { display:block; }
  .demo-speaker { width:auto; margin-bottom:.2rem; }
}
@media (prefers-reduced-motion:reduce) {
  .demo-marquee-track { animation:none; }
  .demo-line,.demo-progress span { transition:none; }
}