/* Extra CSS only for Sinus Lift landing page */
.hero{
    position:relative;
    overflow:hidden;
}

.hero::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    z-index:1;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0) 55%,
            rgba(0,0,0,.18) 72%,
            rgba(0,0,0,.45) 88%,
            rgba(0,0,0,.72) 100%
        );
}

.hero .wrap{
    position:relative;
    z-index:2;
}
.process-cta{
    margin-top:48px;
    text-align:center;
}
.hero-grid{
    display:grid;
    grid-template-columns:1.1fr .9fr;
    gap:clamp(1.5rem,4vw,3.5rem);
    align-items:center;
}

.hero-media{
    display:flex;
    align-items:center;
    justify-content:center;
    min-width:0;
}

.hero-demo{
    display:block;
    width:100%;
    height:auto;
    mix-blend-mode:lighten;
}

.hero-media .hero-demo{
    max-width:520px;
}

.hero-demo--inline{
    display:none;
    max-width:240px;
    margin:.3rem auto 1.2rem;
    position:relative;
    left:-12px;
}

@media (max-width:860px){
    .hero-grid{
        grid-template-columns:1fr;
    }

    .hero-media{
        display:none;
    }

    .hero-demo--inline{
        display:block;
    }
}