.hero-video.hero.lemon {
    --hero-lemon-padding-top: clamp(2.5rem, 6vh, 6rem);
    --hero-lemon-padding-bottom: clamp(2rem, 5vh, 4.5rem);
    --hv-radius: var(--innerContainerBorderRadius, 30px);

    .content-box {
        max-width: var(--page-max-width);
    }

    &:not([data-iframe-mode="true"]) .hero-viewport-wrapper {
        > .content-box {
            gap: 0;
            justify-content: flex-start;
            padding-top: clamp(1.5rem, 7vh, 6rem);
        }

        .hero-form {
            width: 100%;
            min-width: 0;
            max-width: 100%;
            padding: 0;
            overflow: visible;
            text-align: start;
            display: grid;
            grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr);
            grid-template-rows: auto auto;
            grid-template-areas:
                "content media"
                "actions media";
            align-items: center;
            align-content: center;
            column-gap: clamp(3rem, 6vw, 7rem);
            row-gap: clamp(2.25rem, 4vw, 3.25rem);
            background: none;
        }

        .header-section {
            grid-area: content;
            margin: 0;
            text-align: start;
        }

        .content-area {
            margin-inline: 0;
            align-items: flex-start;
            gap: clamp(1rem, 2vw, 1.5rem);
            width: 100;
        }

        .section-header,
        .section-header.center {
            text-align: start;
            align-items: flex-start;
            margin-bottom: 0;
            gap: clamp(0.85rem, 1.6vw, 1.35rem);
        }

        .section-header .section-subtitle,
        .section-header.center .section-subtitle {
            margin-inline: 0;
            max-width: 46ch;
        }

        .section-title {
            width: 100%;
            margin: 0;
            line-height: 1.1;
            letter-spacing: -0.01em;
        }

        .hero-video-cta {
            grid-area: actions;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            flex-wrap: wrap;
            gap: 1rem;

            .cta {
                font-size: var(--font-md);
            }
        }

        .upload-section {
            grid-area: media;
            align-self: stretch;
            justify-content: center;
            min-height: 0;
            padding: 0;
        }

        .hero-video-media {
            position: relative;
            width: 100%;
            height: 100%;
            min-height: 0;
        }

        .hero-video-orbs {
            position: absolute;
            inset: 0;
            z-index: 0;
            pointer-events: none;
        }

        .hv-orb {
            position: absolute;
            border-radius: 50%;
            filter: blur(60px);
            opacity: 0.55;

            html.dark-mode & {
                opacity: 0.45;
                mix-blend-mode: hard-light;
            }
        }

        .hv-orb-blue {
            width: 48%;
            height: 48%;
            top: -18%;
            left: -15%;
            background: var(--maestra-blue);
        }

        .hv-orb-green {
            width: 44%;
            height: 44%;
            top: 32%;
            right: -18%;
            background: var(--maestra-green);
        }

        .hv-orb-yellow {
            width: 46%;
            height: 46%;
            bottom: -18%;
            left: 16%;
            background: var(--maestra-yellow);
        }

        .hero-video-media-frame {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            min-height: 0;
            border-radius: var(--hv-radius);
            overflow: hidden;
            background: var(--ncs-container-weak);
            box-shadow:
                0 28px 64px rgba(2, 20, 44, 0.16),
                0 10px 28px rgba(2, 20, 44, 0.08),
                0 0 0 1px color-mix(in srgb, var(--text) 7%, transparent);

            &[data-hero-video-open] {
                cursor: pointer;
            }

            html.dark-mode & {
                box-shadow:
                    0 28px 64px rgba(0, 0, 0, 0.42),
                    0 10px 28px rgba(0, 0, 0, 0.32),
                    0 0 0 1px color-mix(in srgb, white 8%, transparent);
            }
        }

        .hero-video-player {
            display: block;
            width: 100%;
            height: 100%;
            min-height: 0;
            object-fit: cover;
        }

        @media (max-width: 900px) {
            height: auto;
            max-height: none;
            min-height: calc(100dvh - var(--ms-header-height));

            > .content-box {
                min-height: 0;
                justify-content: flex-start;
                padding-top: clamp(1.5rem, 5vh, 3rem);
                padding-bottom: clamp(2rem, 5vh, 3.5rem);
                padding-inline: clamp(1.25rem, 5vw, 2rem);
            }

            .header-section,
            .content-area,
            .section-header,
            .section-header.center {
                display: contents;
            }

            .hero-form {
                grid-template-columns: minmax(0, 1fr);
                grid-template-rows: auto auto auto auto;
                grid-template-areas:
                    "title"
                    "media"
                    "desc"
                    "actions";
                justify-items: center;
                text-align: center;
                column-gap: 0;
                row-gap: clamp(1.75rem, 5vw, 2.5rem);
            }

            .section-title {
                grid-area: title;
                text-align: center;
            }

            .upload-section {
                grid-area: media;
                align-self: auto;
            }

            .hero-video-media {
                height: auto;
                aspect-ratio: 16 / 10;
            }

            .hero-video-with-form & {
                .hero-form {
                    grid-template-areas:
                        "title"
                        "desc"
                        "actions"
                        "media";
                }

                .hero-video-media {
                    aspect-ratio: unset;
                    width: 100%;
                }
            }

            .section-header .section-subtitle,
            .section-header.center .section-subtitle {
                grid-area: desc;
                max-width: 60ch;
                margin-inline: auto;
                text-align: center;
            }

            .hero-video-cta {
                grid-area: actions;
                justify-content: center;
            }
        }

        @media (max-width: 540px) {
            .hero-video-media {
                aspect-ratio: 4 / 3;
            }

            .hero-video-media-frame {
                border-radius: calc(var(--hv-radius) * 0.7);
            }

            .hero-video-cta {
                width: 100%;

                .cta {
                    width: 100%;
                    justify-content: center;
                }
            }

            .hero-video-with-form & .hero-video-cta {
                width: auto;
                flex-wrap: wrap;

                .cta {
                    width: auto;
                    padding-inline: 18px;
                    min-height: 46px;
                }
            }
        }
    }

    .hs-form-container {
        margin-block: auto;
    }

    .hero-video-hubspot-form {
        position: relative;
        width: 100%;
        min-height: 387px;
    }

    @media (max-width: 500px) {
        .hero-video-hubspot-form {
            min-height: 536px;
        }
    }

    .hero-video-hubspot-form .hv-lightbox-source {
        position: absolute;
        width: 0;
        height: 0;
        opacity: 0;
        pointer-events: none;
    }

    .hero-video-hubspot-form .hs-form {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        width: 100%;
        text-align: left;
    }

    .hero-video-hubspot-form fieldset {
        max-width: none;
        width: 100%;
        margin: 0;
        padding: 0;
        border: 0;
    }

    .hero-video-hubspot-form fieldset.form-columns-2 {
        display: flex;
        gap: 0.75rem;
    }

    .hero-video-hubspot-form fieldset .hs-form-field {
        float: none;
        width: 100%;
        padding: 0;
    }

    .hero-video-hubspot-form fieldset.form-columns-2 .hs-form-field {
        width: 50%;
    }

    .hero-video-hubspot-form .hs-form-field > label {
        display: block;
        margin-bottom: 0.35rem;
        font-size: var(--font-xs);
        font-weight: var(--font-weight-medium);
        color: var(--text);
    }

    .hero-video-hubspot-form .hs-form-required {
        margin-left: 2px;
        color: var(--ncs-primary);
    }

    .hero-video-hubspot-form .hs-form-field > .input {
        margin: 0;
    }

    .hero-video-hubspot-form .hs-input:not([type="checkbox"]):not([type="radio"]) {
        box-sizing: border-box;
        width: 100%;
        height: 42px;
        padding: 0.5rem 1rem;
        border: 1px solid var(--ncs-container-strong);
        border-radius: var(--border-radius);
        background: var(--background);
        color: var(--text);
        font-family: inherit;
        font-size: var(--font-sm);
        text-align: left;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .hero-video-hubspot-form .hs-input:not([type="checkbox"]):not([type="radio"]):focus {
        outline: none;
        border-color: var(--ncs-primary);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--ncs-primary) 25%, transparent);
    }

    .hero-video-hubspot-form .hs-input.invalid.error {
        border-color: #e6104d;
    }

    .hero-video-hubspot-form textarea.hs-input {
        height: auto;
        min-height: 4.5rem;
        padding: 0.6rem 1rem;
        border-radius: 20px;
        resize: vertical;
    }

    .hero-video-hubspot-form select.hs-input {
        appearance: none;
        -webkit-appearance: none;
        padding-right: 2.25rem;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23697386' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
        background-repeat: no-repeat;
        background-position: right 1rem center;
        cursor: pointer;
    }

    .hero-video-hubspot-form select.hs-input.is-placeholder {
        color: color-mix(in srgb, var(--text) 45%, transparent);
    }

    .hero-video-hubspot-form .inputs-list {
        list-style: none;
        margin: 0;
        padding: 0;
        display: flex;
        flex-direction: column;
        gap: 0.4rem;
    }

    .hero-video-hubspot-form .hs-form-booleancheckbox label,
    .hero-video-hubspot-form .hs-form-checkbox label,
    .hero-video-hubspot-form .hs-form-radio label {
        display: flex;
        align-items: flex-start;
        gap: 0.5rem;
        margin: 0;
        font-size: var(--font-sm);
        font-weight: var(--font-weight-regular);
        color: var(--text);
        cursor: pointer;
    }

    .hero-video-hubspot-form .inputs-list .hs-input[type="checkbox"],
    .hero-video-hubspot-form .inputs-list .hs-input[type="radio"] {
        width: auto;
        height: auto;
        margin: 0.2rem 0 0;
        flex-shrink: 0;
        accent-color: var(--ncs-primary);
    }

    .hero-video-hubspot-form .hs-richtext,
    .hero-video-hubspot-form .legal-consent-container {
        font-size: var(--font-xs);
        color: var(--text-faded);
        line-height: 1.5;
    }

    .hero-video-hubspot-form .hs-richtext {
        margin: 0;
    }

    .hero-video-hubspot-form .hs-error-msgs {
        list-style: none;
        margin: 0.3rem 0 0;
        padding: 0;
    }

    .hero-video-hubspot-form .hs-error-msg,
    .hero-video-hubspot-form .hs-error-msgs label {
        font-size: var(--font-xxs);
        color: #e6104d;
    }

    .hero-video-hubspot-form .hs_submit .actions {
        margin: 0.25rem 0 0;
        padding: 0;
    }

    .hero-video-hubspot-form .hs-button.primary {
        --cta-bg: var(--ncs-primary);
        --cta-text: var(--ncs-on-primary);
        --cta-size: var(--font-md);
        appearance: none;
        width: fit-content;
        min-height: 52px;
        padding: 14px 28px;
        border: none;
        border-radius: 500px;
        background-color: var(--cta-bg);
        color: var(--cta-text);
        font-size: var(--font-md);
        font-weight: var(--font-weight-bold);
        line-height: 1.2;
        cursor: pointer;
        transition: all 0.2s;
    }

    /* input can't carry ::before/::after, so the multilayered CTA's concentric rings
       are recreated as a single multi-value box-shadow */
    .hero-video-hubspot-form .hs-button.primary:hover:not(:disabled) {
        box-shadow:
            0 0 0 calc(var(--cta-size) * 0.5) color-mix(in srgb, var(--cta-bg), transparent 70%),
            0 0 0 calc(var(--cta-size) * 1) color-mix(in srgb, var(--cta-bg), transparent 80%),
            0 0 0 calc(var(--cta-size) * 1.5) color-mix(in srgb, var(--cta-bg), transparent 90%);
    }

    .hero-video-hubspot-form .hs-button.primary:disabled {
        opacity: 0.5;
        cursor: not-allowed;
        box-shadow: none;
    }

    @media (max-width: 600px) {
        .hero-video-hubspot-form fieldset.form-columns-2 {
            flex-direction: column;
            gap: 0.75rem;
        }

        .hero-video-hubspot-form fieldset.form-columns-2 .hs-form-field {
            width: 100%;
        }
    }

    .hero-video-ghost-btn.cta {
        --cta-bg: transparent;
        --cta-text: var(--text);
        --cta-shadow: transparent;
        border-radius: var(--cta-radius, 999px);

        &:hover,
        &:focus-visible {
            --cta-bg: color-mix(in srgb, var(--text) 8%, transparent);
        }

        @media (max-width: 540px) {
            width: 100%;
            justify-content: center;
        }
    }

    .hero-video-play-btn {
        position: absolute;
        inset: 0;
        margin: auto;
        width: clamp(64px, 9vw, 88px);
        height: clamp(64px, 9vw, 88px);
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        border-radius: 50%;
        background: color-mix(in srgb, var(--background) 70%, transparent);
        backdrop-filter: blur(8px) saturate(140%);
        box-shadow: 0 10px 30px rgba(2, 20, 44, 0.25);
        color: var(--text);
        cursor: pointer;
        z-index: 2;
        transition: transform 0.2s ease, background 0.2s ease;

        &:hover,
        &:focus-visible {
            transform: scale(1.06);
            background: color-mix(in srgb, var(--background) 55%, transparent);
            outline: none;
        }

        .hv-play-icon {
            width: 40%;
            height: 40%;
            background: currentColor;
            mask: url("https://cdn.maestra.ai/astro-images/icons/Solar%20Bold/Video,%20Audio,%20Sound/Play.svg") center / contain no-repeat;
        }
    }
}

.hero-video-lightbox {
    --hv-radius: var(--innerContainerBorderRadius, 30px);
    --hv-lightbox-pad: clamp(1rem, 4vw, 3rem);
    position: fixed;
    inset: 0;
    z-index: 100000; /* above the site header/navbar (tops out around 10010) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--hv-lightbox-pad);
    opacity: 0;
    transition: opacity 0.25s ease;

    &[hidden] {
        display: none;
    }

    &.is-open {
        opacity: 1;
    }

    .hero-video-lightbox-backdrop {
        position: absolute;
        inset: 0;
        background: rgba(2, 8, 20, 0.78);
        backdrop-filter: blur(6px);
        cursor: pointer;
    }

    .hero-video-lightbox-stage {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        max-width: 100%;
        max-height: 100%;
        transform: scale(0.96);
        transition: transform 0.25s ease;

        .hero-video-player {
            display: block;
            width: auto;
            height: auto;
            max-width: calc(100vw - 2 * var(--hv-lightbox-pad));
            max-height: calc(100vh - 2 * var(--hv-lightbox-pad));
            object-fit: contain;
            border-radius: var(--hv-radius);
            overflow: hidden;
            box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
            background: transparent;
        }
    }

    &.is-open .hero-video-lightbox-stage {
        transform: scale(1);
    }

    .hero-video-lightbox-close {
        position: absolute;
        top: clamp(0.75rem, 2vw, 1.5rem);
        right: clamp(0.75rem, 2vw, 1.5rem);
        z-index: 2;
        width: 44px;
        height: 44px;
        padding: 0;
        border: none;
        background: transparent;
        color: #fff;
        cursor: pointer;
        transition: opacity 0.2s ease, transform 0.2s ease;

        &:hover,
        &:focus-visible {
            opacity: 0.85;
            transform: scale(1.06);
            outline: none;
        }

        .hvc-close-icon {
            display: block;
            width: 100%;
            height: 100%;
            background: currentColor;
            mask: url("https://cdn.maestra.ai/astro-images/icons/Solar%20Bold/Essentional,%20UI/Close%20Circle.svg") center / contain no-repeat;
        }
    }
}

body.hero-video-lightbox-open {
    overflow: hidden;
}