/* The showcase videos (templates/video.vm), on the website and in the help */
.sv-video { margin: 0 0 24px; }
.sv-frame { position: relative; overflow: hidden; border-radius: 16px; background: #eef0fb; aspect-ratio: 16 / 9; box-shadow: 0 30px 70px -28px rgba(49, 46, 129, 0.45), 0 0 0 1px rgba(17, 24, 39, 0.08); }
.sv-player { display: block; width: 100%; height: 100%; object-fit: cover; background: #eef0fb; }
.sv-play { position: absolute; inset: 0; display: flex; align-items: flex-end; justify-content: flex-start; gap: 16px; padding: clamp(14px, 3vw, 28px); border: 0; cursor: pointer; color: #fff; text-align: left;
    background: linear-gradient(180deg, rgba(17, 24, 39, 0) 45%, rgba(17, 24, 39, 0.55) 100%); font: inherit; }
.sv-play-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: clamp(52px, 7vw, 76px); height: clamp(52px, 7vw, 76px); border-radius: 50%; background: #4338ca; color: #fff; font-size: clamp(18px, 2.4vw, 26px);
    box-shadow: 0 12px 30px rgba(49, 46, 129, 0.45); transition: transform 0.2s ease, background-color 0.2s ease; }
.sv-play-icon i { margin-left: 4px; }
.sv-play:hover .sv-play-icon, .sv-play:focus-visible .sv-play-icon { transform: scale(1.07); background: #3730a3; }
.sv-play:focus-visible { outline: 3px solid #a5b4fc; outline-offset: -6px; }
.sv-play-text { display: flex; flex-direction: column; font-size: clamp(16px, 2vw, 22px); font-weight: 600; line-height: 1.25; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.sv-length { font-size: 0.72em; font-weight: 500; opacity: 0.9; }
.sv-frame.is-playing .sv-play { display: none; }
.sv-caption { margin-top: 10px; font-size: 14px; color: #6b7280; line-height: 1.5; }
@media (prefers-reduced-motion: reduce) { .sv-play-icon { transition: none; } }