.hero {
    color: var(--paragraph);
    position: relative;
}

.hero .background-image {
    width: 100%;
    height: auto;
    position: absolute;
    z-index: -1;
    pointer-events: none;
    inset: 0 0 auto 0;
}

.hero .background-image :is(picture, picture img) {
    display: block;
    width: 100%;
    height: auto;
}

.hero .row {
    padding-block: var(--_padding-row);
    min-height: var(--_height-bg);
    align-items: center;
    position: relative;
}

.hero .txt-box :is(h1:not([class*="text-"]), .text-h1) {
    display: block;
    margin: 0 0 2.4rem;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.25em;
    text-transform: uppercase;
    color: var(--header-2);
}

.hero .txt-box :is(h1:not([class*="text-"]), .text-h1)::before {
    content: '— ';
    color: var(--red);
}

.hero .txt-box :is(h2:not([class*="text-"]), .text-h2) {
    font-weight: 300;
    font-size: 5.5rem;
    line-height: 1.09em;
    letter-spacing: -.07em;
    color: var(--header-2);
    margin: 0 0 1.2rem;
}

.hero .txt-box :is(h2:not([class*="text-"]), .text-h2) strong {
    font-weight: 500;
}

.hero .txt-box p {
    font-weight: 400;
    font-size: 1.6rem;
    line-height: 1.625em;
    margin: 0 0 2.4rem;
    max-width: 58.1rem;
}

.hero .txt-box p strong {
    font-weight: 700;
}

/* section-title module rendered inside .txt-box (layout.php external mode):
   hero's own .txt-box typography above stays authoritative — these only
   neutralize the module/theme.css defaults that would otherwise leak. */
.hero .txt-box .section-title {
    max-width: none;
}

.hero .txt-box .section-title p:not(.text-h1) {
    margin: 0 0 2.4rem;
    color: inherit;
    letter-spacing: normal;
}

.hero .txt-box .section-title .text-h1 {
    letter-spacing: normal;
}

.hero .txt-box .bttns-wrapper {
    display: flex;
    align-items: center;
    gap: 2rem;
}

.hero .image-box {
    pointer-events: none;
}

.hero .image-box .img-box {
    display: inline-block;
}

.hero .image-box :is(.backgroundIcons, .backgroundVideo) {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero .image-box :is(.backgroundVideo, .multiply-image) {
    mix-blend-mode: multiply;
}

.hero .image-box :is(.backgroundIcons, .backgroundVideo) :is(video, img) {
    object-fit: contain;
    object-position: center bottom;
}

.hero .image-box .user {
    position: relative;
    z-index: 2;
}

.hero .image-box:has(.backgroundIcons, .backgroundVideo) .user {
    mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 50%, transparent 100%);
}

.hero .image-box .backgroundVideo {
    transition: opacity .5s;
}

.hero .centered-media {
    width: 100%;
    position: relative;
}

.hero .centered-media :is(.img-box, .video-box, .iframe-box) {
    border-radius: 2.4rem;
    height: auto;
    overflow: hidden;
    width: 100%;
}

.hero .centered-media :is(img, video) {
    display: block;
    height: auto;
    width: 100%;
}

.hero .centered-media .iframe-box {
    filter: drop-shadow(0px 0px 5rem rgba(0, 0, 0, 0.1));
}

.hero .centered-media iframe {
    display: block;
    width: 100%;
    height: 98rem;
    border: 0;
    background: var(--white);
}

.hero .centered-media .logo {
    background: var(--light-gray-1);
    border: 1px solid var(--light-gray-2);
    border-radius: 1rem;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0);
    bottom: var(--_bottom);
    width: var(--_width);
    height: var(--_height);
    --_width: 10rem;
    --_height: 10rem;
    --_bottom: -5rem;
}

.hero .centered-media .logo img {
    object-fit: contain;
    width: 4rem;
    height: 4rem;
}

@media only screen and (min-width: 1024px) and (max-width: 1080px) {
    .hero .centered-media iframe {
        height: 125rem;
    }
}

@media only screen and (min-width: 768px) and (max-width: 1023px) {
    .hero .centered-media iframe {
        height: 164rem;
    }
}

@media only screen and (min-width : 768px) {
    .hero {
        --_padding-row: 26.8rem 0;
        --_height-bg: 81.1rem;
    }

    .hero .row {
        align-items: start;
    }

    .hero .txt-box {
        max-width: 55%;
    }

    .hero .image-box {
        width: clamp(45%, 65rem, 50%);
        height: 52.6rem;
        position: absolute;
        top: calc(50% - 20.3rem);
        right: -6rem;
    }

    .hero .image-box :is(.backgroundIcons, .backgroundVideo) {
        width: 90%;
        height: 90%;
    }

    .hero .image-box .user {
        position: relative;
        width: 100%;
        height: 100%;
    }

    .hero .centered-media {
        margin-top: 8rem;
    }
}

@media only screen and (min-width : 0px) and (max-width : 767px) {
    .hero {
        --_padding-row: 13.8rem 6.4rem;
        --_height-bg: 104.9rem;
    }

    .hero .txt-box {
        padding-inline: 5.7rem;
        text-align: center;
    }

    .hero .txt-box :is(h1:not([class*="text-"]), .text-h1) {
        font-size: 1.2rem;
    }

    .hero .txt-box :is(h2:not([class*="text-"]), .text-h2) {
        font-size: 4rem;
        line-height: 1.2em;
    }

    .hero .txt-box .bttns-wrapper {
        flex-direction: column;
    }

    .hero .image-box {
        margin-top: 3rem;
    }

    .hero .centered-media {
        margin-top: 4rem;
        padding-inline: 3rem;
    }

    .hero .centered-media iframe {
        height: 100rem;
    }

    .hero .centered-media .logo {
        --_width: 5rem;
        --_height: 5rem;
        --_bottom: -2.5rem;
    }

    .hero .centered-media .logo img {
        width: 2rem;
        height: 2rem;
    }
}

/* @group VARIANTS
------------------------------------ */

@media only screen and (min-width : 768px) {
    .hero+.text-and-cta-banner {
        margin-top: -11.6rem;
    }

    .hero+.integrations-faqs {
        padding-top: 10rem;
    }
}

/* @end */