/* VideoIntros.com — the only rules the marketing site adds to a product demonstration document. The product's own
   stylesheets do everything else. These documents are inert: no script runs and links go nowhere. */
html { scrollbar-width: none; }
html::-webkit-scrollbar { display: none; }
a, button, input, select, textarea { pointer-events: none; }

/* In the site's phone frame the page gets REAL safe areas, through the product's own variables: its header starts
   below the status bar and its last section clears the home indicator. The strip keeps scrolled content from running
   under the status bar, in the page's own header color. */
.vsd-device { --safe-t: 54px; --safe-b: 30px; }
.vsd-device body.vh::before { content: ''; position: fixed; left: 0; right: 0; top: 0; z-index: 40; height: 54px; background: var(--hero-hi, #fff); }
.vsd-device body { overscroll-behavior: auto; }
/* The product sizes its player from the SMALL viewport height (svh). On a real phone the browser's own bars take part
   of the screen; this frame draws none, so the player is given the height it has in Safari on this device. With it,
   the first screen shows what a client really sees first: the header, the video and the whole profile card. */
.vsd-device .vh-player { --ph: 468px; }

/* the illustrated stand-in for the private video (client page player, recorder camera) */
.vsd-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 34%; display: block; }
.vh-player { position: relative; }
.vsd-bar { position: absolute; left: 14px; right: 14px; bottom: 14px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .35); overflow: hidden; }
.vsd-bar i { display: block; height: 100%; width: 100%; background: #fff; transform-origin: left center; animation: vsd-play 15s linear infinite; }
@keyframes vsd-play { from { transform: scaleX(0); } to { transform: scaleX(1); } }
#vi-progress { width: 47%; }
@media (prefers-reduced-motion: reduce) { .vsd-bar i { animation: none; transform: scaleX(.47); } .vi-dot, .vi-count { animation: none !important; } }

/* Super Admin screens are shown at their desktop width inside a browser frame */
body.vsd-admin { min-width: 1240px; overflow: hidden; }
body.vsd-admin .sa-top { position: static; }
body.vsd-admin .sa-phone-col, body.vsd-admin .sa-nav { position: static; }

/* funnel bar widths (the product sets these by script; the demo is static) */
.vsd-w-0 { width: 0%; } .vsd-w-5 { width: 5%; } .vsd-w-10 { width: 10%; } .vsd-w-15 { width: 15%; } .vsd-w-20 { width: 20%; } .vsd-w-25 { width: 25%; } .vsd-w-30 { width: 30%; } .vsd-w-35 { width: 35%; } .vsd-w-40 { width: 40%; } .vsd-w-45 { width: 45%; } .vsd-w-50 { width: 50%; } .vsd-w-55 { width: 55%; } .vsd-w-60 { width: 60%; } .vsd-w-65 { width: 65%; } .vsd-w-70 { width: 70%; } .vsd-w-75 { width: 75%; } .vsd-w-80 { width: 80%; } .vsd-w-85 { width: 85%; } .vsd-w-90 { width: 90%; } .vsd-w-95 { width: 95%; } .vsd-w-100 { width: 100%; }