/* Desktop demos share the space left below the fixed navigation. */
@media (min-width: 1025px) {
    :root {
        --capabilities-demo-height: max(0px,
            calc(100svh - var(--capabilities-nav-height, 76px) - 48px));
    }

    .capability-section--offer > .receipt-showcase-card,
    #sequence-stage > .video-card {
        top: calc(50% + var(--capabilities-nav-height, 76px) / 2);
        width: min(600px, 43vw, var(--capabilities-demo-height));
        min-height: 0;
        aspect-ratio: 1;
    }

    #umi-recommendation .video-card {
        flex: none;
        width: min(600px, 43vw, var(--capabilities-demo-height));
        min-width: 0;
        height: auto;
        top: 0;
        aspect-ratio: 1;
    }

    #umi-recommendation.automation-section {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: clamp(24px, 3vw, 64px);
        height: 100svh;
        min-height: 0;
        padding-top: calc(var(--capabilities-nav-height, 76px) + 24px);
        padding-bottom: 24px;
    }

    #umi-recommendation .automation-text {
        flex: 0 1 44%;
        max-width: 560px;
        text-align: left;
    }

    #umi-recommendation .automation-text h2 {
        text-align: left;
    }

    #capabilities-bridge {
        --bridge-fit-gap: clamp(16px, 3svh, 40px);
        --bridge-fit-row-height: calc((var(--capabilities-demo-height) - var(--bridge-fit-gap)) / 2);
        height: 100svh;
        min-height: 0;
        padding-top: calc(var(--capabilities-nav-height, 76px) + 24px);
        padding-bottom: 24px;
    }

    #capabilities-bridge .ai-section-content {
        height: 100%;
        min-height: 0;
        margin-top: 0;
    }

    #capabilities-bridge .bridge-rect-stack {
        height: 100%;
        gap: var(--bridge-fit-gap);
    }

    #capabilities-bridge .bridge-row {
        height: var(--bridge-fit-row-height);
        min-height: 0;
        gap: 24px;
    }

    #capabilities-bridge .bridge-title {
        min-width: 0;
        max-width: 44%;
        margin-block: 0;
    }

    #capabilities-bridge .bridge-rect {
        width: min(580px, 52%, calc(var(--bridge-fit-row-height) * 16 / 9));
        min-height: 0;
        max-height: 100%;
    }
}

/* The stacked layout scrolls naturally instead of retaining desktop offsets. */
@media (max-width: 1024px) {
    #umi-recommendation.automation-section {
        justify-content: flex-start;
        height: auto;
        min-height: 100svh;
        padding: calc(var(--capabilities-nav-height, 76px) + 24px) 5vw 32px;
    }

    #umi-recommendation .video-card {
        align-self: center;
        inset: auto;
        width: min(100%, 600px,
            max(0px, calc(100svh - var(--capabilities-nav-height, 76px) - 48px)));
        margin-inline: auto;
        transform: none;
    }

    #umi-recommendation .video-card-inner,
    #umi-recommendation .mounting-13 {
        min-width: 0;
        min-height: 0;
        max-width: 100%;
    }

    #umi-recommendation .video-card-inner {
        height: 100%;
        max-height: none;
    }
}