.harvester-video-section {
    padding: 5rem 1rem 4.5rem;
    overflow: hidden;
    border-top: 1px solid #242124;
    background:
        radial-gradient(ellipse at 50% 40%, rgba(115, 20, 29, .13), transparent 58%),
        linear-gradient(180deg, #101012 0%, #0b0b0c 100%);
}

.harvester-video-inner {
    max-width: 72rem;
    margin: 0 auto;
}

.harvester-video-heading {
    margin: 0 auto 2rem;
    text-align: center;
}

.harvester-video-kicker {
    margin: 0 0 .65rem;
    color: #ef626a;
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .2em;
    text-transform: uppercase;
}

.harvester-video-heading h2 {
    margin: 0 0 .75rem;
    color: #fff;
    font-size: clamp(1.8rem, 4.6vw, 3rem);
    font-weight: 800;
    line-height: 1.05;
    letter-spacing: -.035em;
}

.harvester-video-heading > p:last-child {
    margin: 0 auto;
    color: #b8b4b6;
    font-size: .95rem;
    line-height: 1.65;
}

.video-carousel.harvester-video-carousel {
    --video-radius: 280px;
    --video-side-scale: .72;
    --video-red: #e50914;
    max-width: 860px;
    margin: 0 auto;
}

.harvester-video-carousel .video-stage {
    min-height: 590px;
}

.harvester-video-carousel .video-stage::before {
    background: radial-gradient(ellipse, rgba(126, 19, 30, .28), rgba(17, 17, 19, 0) 68%);
}

.harvester-video-carousel .video-slider {
    width: 100%;
    gap: 1.5rem;
    padding: 0 0 1rem;
}

.harvester-video-carousel .video-card {
    box-sizing: border-box;
    flex: 0 0 320px;
    width: 320px;
    height: 560px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .13);
    border-radius: .9rem;
}

.harvester-video-carousel .video-card iframe {
    width: 100%;
    height: 100%;
}

.harvester-video-carousel .video-card.is-selected {
    border-color: rgba(229, 9, 20, .78);
}

.harvester-video-carousel:not(.is-ready) .video-stage {
    min-height: 0;
    justify-content: flex-start;
    overflow-x: auto;
}

.harvester-video-carousel:not(.is-ready) .video-slider {
    display: flex;
    align-items: stretch;
    overflow-x: auto;
}

.harvester-video-carousel:not(.is-ready) .video-card {
    position: relative;
    flex: 0 0 min(320px, calc(100vw - 48px));
    height: auto;
}

.harvester-video-carousel:not(.is-ready) .video-card iframe {
    height: min(560px, calc((100vw - 48px) * 1.75));
}

.harvester-video-fallback-link {
    display: block;
    padding: .75rem;
    color: #f6d4d6;
    background: #191618;
    font-size: .8rem;
    text-align: center;
    text-decoration: underline;
}

.harvester-video-carousel.is-ready .harvester-video-fallback-link {
    display: none;
}

.harvester-video-watch-wrap {
    display: flex;
    justify-content: center;
    margin-top: 1.5rem;
}

.harvester-video-watch {
    display: inline-flex;
    min-height: 3rem;
    align-items: center;
    justify-content: center;
    gap: .65rem;
    padding: .8rem 1.2rem;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: .5rem;
    color: #f4eeee;
    background: #211719;
    font-size: .88rem;
    font-weight: 700;
    text-decoration: none;
    transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.harvester-video-watch:hover {
    transform: translateY(-2px);
    border-color: #e50914;
    background: #35191c;
}

.harvester-video-watch:focus-visible,
.harvester-video-carousel button:focus-visible {
    outline: 2px solid #ff8e94;
    outline-offset: 4px;
}

.harvester-video-carousel .video-card-select:focus-visible {
    outline-offset: -4px;
}

@media (max-width: 700px) {
    .harvester-video-section {
        padding: 4rem .75rem 3.5rem;
    }

    .video-carousel.harvester-video-carousel {
        --video-radius: 188px;
        --video-side-scale: .42;
    }

    .harvester-video-carousel .video-stage,
    .harvester-video-carousel.is-ready .video-slider {
        height: min(560px, calc((100vw - 24px) * 1.75));
        min-height: 0;
    }

    .harvester-video-carousel.is-ready .video-card {
        width: min(320px, calc(100vw - 24px)) !important;
        height: 100% !important;
        border-radius: .85rem;
    }

    .harvester-video-carousel:not(.is-ready) .video-card {
        height: auto;
    }

    .harvester-video-carousel .video-controls {
        gap: .75rem;
        margin-top: .85rem;
    }

    .harvester-video-carousel .video-status {
        max-width: calc(100vw - 150px);
        min-width: 8rem;
        font-size: .68rem;
    }
}

@media (max-width: 380px) {
    .video-carousel.harvester-video-carousel {
        --video-radius: 176px;
        --video-side-scale: .36;
    }
}

@media (prefers-reduced-motion: reduce) {
    .harvester-video-watch {
        transition-duration: .01ms !important;
    }
}