.hero-with-video { align-items: start; }
.demo-player { position: relative; width: min(100%, 340px); background: var(--bg); scroll-margin-top: 24px; }
.demo-screen { position: relative; aspect-ratio: 736 / 1728; border-radius: 22px; overflow: hidden; }
.demo-player video { display: block; width: 100%; height: 100%; object-fit: contain; }
.demo-play { position: absolute; inset: 0; width: 100%; border: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: transparent; color: white; cursor: pointer; font-family: inherit; }
.demo-play[hidden] { display: none; }
.demo-play-circle { display: grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; background: var(--green); border: 1px solid #ffffff80; box-shadow: 0 8px 28px #1c38294d; transition: transform 180ms ease; }
.demo-play:hover .demo-play-circle { transform: scale(1.06); }
.demo-play svg { width: 28px; height: 28px; fill: currentColor; }
.demo-play:focus-visible { outline: 3px solid var(--green-mid); outline-offset: -5px; }
.demo-player video:focus-visible { outline: 3px solid var(--green-mid); outline-offset: -3px; }
.demo-controls { display: flex; align-items: center; gap: 6px; padding: 8px 0; color: var(--green); }
.demo-controls[hidden] { display: none; }
.demo-controls button { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 36px; padding: 4px; border: 0; border-radius: 6px; background: transparent; color: inherit; cursor: pointer; font: inherit; font-size: 12px; }
.demo-controls button[aria-pressed="true"] { background: var(--primary-100); }
.demo-controls button[hidden] { display: none; }
.demo-controls svg { width: 22px; height: 22px; fill: currentColor; }
.demo-icon-pause, .demo-toggle[data-playing="true"] .demo-icon-play { display: none; }
.demo-toggle[data-playing="true"] .demo-icon-pause { display: block; }
.demo-seek { width: 100%; min-width: 0; flex: 1; accent-color: var(--green); cursor: pointer; }
.demo-time { font-size: 11px; font-variant-numeric: tabular-nums; }
.demo-seek:focus-visible { outline: 3px solid var(--green-mid); outline-offset: 3px; }
.demo-player:fullscreen { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 12px; }
.demo-player:fullscreen .demo-screen { width: 100%; height: calc(100% - 52px); aspect-ratio: auto; }
.demo-player:fullscreen .demo-controls { width: min(100%, 480px); }
.demo-status:empty { display: none; }
.demo-player .demo-status { position: absolute; bottom: 12px; left: 12px; right: 12px; margin: 0; padding: 10px; border-radius: 8px; background: white; color: var(--text); font-size: 0.85rem; line-height: 1.4; }
.hero-video .demo-player { width: min(100%, 340px); }
/* Offset the encoded caption inset so its visible text aligns with the hero copy. */
@media (min-width: 961px) { .hero-video .demo-player { margin-top: -38px; } }
@media (max-width: 700px) { .hero-video .demo-player { max-width: 310px; } }
@media (prefers-reduced-motion: reduce) { .demo-play-circle { transition: none; } }