/* Geometry matches docs/media/hero157-source.html (768 x 837). */
.l-workout-hero { position: relative; aspect-ratio: 768 / 837; }
.l-workout-hero-phone { position: absolute; left: 26.041667%; top: 4.181601%; width: 47.916667%; height: 91.517324%; transform: rotate(-6deg); pointer-events: none; }
.l-workout-hero-display { position: absolute; left: 2.98913%; top: 1.436031%; width: 94.021739%; height: 97.127937%; border-radius: 13.00578% / 6.048387%; overflow: hidden; }
.l-workout-hero-video { position: absolute; left: 0; top: 6.048387%; width: 100%; height: 92.473118%; object-fit: fill; opacity: 0; }
.l-workout-hero.is-playing .l-workout-hero-video,
.l-workout-hero.has-played .l-workout-hero-video { opacity: 1; }
.l-workout-hero-control { position: absolute; right: 3%; bottom: 3%; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 15px; border: 1px solid var(--l-border); border-radius: 100px; background: var(--l-surface); color: var(--l-text); font: 500 12px/1.25 'DM Sans',sans-serif; cursor: pointer; box-shadow: 0 3px 14px #0000000a; }
.l-workout-hero-control[hidden] { display: none; }
.l-workout-hero-control:hover { border-color: var(--l-accent); }
.l-workout-hero-control:focus-visible { outline: 3px solid var(--l-accent); outline-offset: 4px; }
@media (max-width: 600px) {
    .l-workout-hero { margin-bottom: 52px; }
    .l-workout-hero-control { right: 50%; bottom: -48px; transform: translateX(50%); }
}
@media (prefers-reduced-motion: reduce) { .l-hero-visual--pub { animation: none; } }