/* Product videos: hero screen loop + "see it in action" section (home, how-it-works). */
.phone-screen.hero-screen {
    aspect-ratio: 1080 / 2338;
    background: #fff;
}

.phone-screen.hero-screen video {
    object-fit: cover;
    background: #fff;
}

.demo-video {
    padding: 100px 0 60px;
}

.demo-video .section-header {
    margin-bottom: 40px;
}

.demo-video-frame {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    border-radius: 24px;
    overflow: hidden;
    background: #0f172a;
    box-shadow: 0 30px 80px rgba(15, 23, 42, 0.18), 0 8px 24px rgba(15, 23, 42, 0.08);
    aspect-ratio: 16 / 9;
}

.demo-video-frame video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.guide-video {
    margin: 32px 0 0;
}

.guide-video .demo-video-frame {
    max-width: 100%;
    border-radius: 18px;
}

@media (max-width: 640px) {
    .demo-video {
        padding: 64px 0 32px;
    }

    .demo-video-frame {
        border-radius: 14px;
    }
}