/* AiServa marketing: animated walkthrough players (site/_inc/demos.php). Uses the site tokens (--line, --muted, --ink, --accent-deep, --accent-tint). */
/* ---- Animated walkthrough players (site/_inc/demos.php, site/assets/demos.js) ---- */
.demo-fig { margin:0; min-width:0; }
.demo-tabs { display:flex; flex-wrap:wrap; gap:8px; }
.demo-tab { display:inline-flex; align-items:center; gap:8px; padding:10px 16px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--muted); font-size:.85rem; font-weight:700; cursor:pointer; transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.demo-tab:hover { border-color:#c4b5fd; color:var(--ink); }
.demo-tab[aria-selected="true"] { background:var(--accent-tint); border-color:#c4b5fd; color:var(--accent-deep); }
.demo-tab:focus-visible, .demo-btn:focus-visible { outline:3px solid #6d28d9; outline-offset:2px; }
.demo-shot { overflow:hidden; border:1px solid var(--line); border-radius:16px; background:#fff; box-shadow:0 1px 2px rgba(20,20,43,.04), 0 22px 54px -26px rgba(76,29,149,.34); }
.demo-bar { display:flex; align-items:center; gap:6px; padding:9px 14px; border-bottom:1px solid var(--line); background:#faf9fd; }
.demo-bar i { width:9px; height:9px; border-radius:50%; background:#e2e0ee; }
.demo-bar span { margin-left:10px; min-width:0; flex:1; font-size:.74rem; font-weight:600; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.demo-bar em { font-style:normal; font-size:.66rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent-deep); background:var(--accent-tint); border:1px solid #ede9fe; padding:3px 9px; border-radius:999px; }
.demo-vp { position:relative; width:100%; aspect-ratio:16 / 9; overflow:hidden; background:#eef4fb; --s:.5; }
.demo-vp iframe { position:absolute; left:0; top:0; width:1280px; height:720px; border:0; transform-origin:0 0; transform:scale(var(--s)); background:#eef4fb; }
.demo-ctl { display:flex; flex-wrap:wrap; align-items:center; gap:8px; padding:10px 14px; border-top:1px solid var(--line); background:#faf9fd; }
.demo-btn { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:#fff; color:var(--ink); font-size:.78rem; font-weight:700; cursor:pointer; transition:border-color .15s ease, background-color .15s ease; }
.demo-btn:hover { border-color:#a78bfa; background:var(--accent-tint); }
.demo-btn .material-icons-outlined { font-size:17px; }
.demo-note { margin-left:auto; font-size:.72rem; color:var(--muted); }
@media (max-width: 767px) { .demo-open { display:none; } .demo-note { display:none; } }
@media print { .demo-fig .demo-shot { display:none; } }