#site-content {
    overflow: visible;
}

.how-it-works-compact-intro {
    max-width: 75rem;
    margin: 0 auto 8rem auto;
}



.how-it-works-compact-visual-steps-wrapper {
	display: grid;
	grid-template-columns: 1fr 1fr;
    align-items: flex-start;
	gap: 4rem;
        position: relative;

}

.how-it-works-compact-visual-steps-wrapper:before {
    content: "";
    position: absolute;
    width: 50rem;
    height: 60rem;
    left: -11rem;
    top: -28rem;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='UTF-8'%3F%3E%3Csvg id='Layer_1' data-name='Layer 1' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 244.19 207.4'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %2307ca7b; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M243.17,55.01c-1.81-9.55-8.15-16.44-14.61-23.14-1.17-1.22-2.63-2.43-4.19-2.95-6.7-2.23-13.39-4.7-20.28-6.14-12.83-2.68-24.17,1.46-34.45,9.05-.64.48-1.24,1.09-1.68,1.76-9.93,15.07-11.29,30.78-2.74,46.81,2.87,5.38,6.95,10.11,10.51,15.18-1.13.72-2.82,1.5-4.09,2.72-.71.68-1.06,2.12-.92,3.13.08.58,1.4,1.3,2.25,1.43,5.11.8,10.3,1.15,15.35,2.23,8.66,1.85,18.1,1.03,25.97,7.61.55-1.42,1.44-2.53,1.23-3.36-1.33-5.31,2.18-7.05,6-8.75.97-.43,1.9-1.12,2.64-1.9,4.34-4.5,8.78-8.92,12.87-13.63,7.64-8.8,8.2-19.26,6.16-30.04Z'/%3E%3Cpath class='cls-1' d='M121.23,13.14c-4.02-1.88-7.92-4-11.9-5.96-.71-.35-1.56-.59-2.35-.6-6.76-.09-13.57-1.44-20.11,1.16Q84.05.26,82.1,0c-.1.15-.21.3-.31.45-6.57,10.58-12.8,21.47-25.48,26.13-.77.28-1.74,1.69-1.6,2.38.21,1.08,1.09,2.28,2.04,2.9,1.06.69,2.5.8,3.93,1.21-.79,2.41-1.66,4.61-2.24,6.88-1.75,6.86-3.79,13.73-2.16,20.92,3.52,15.49,21.41,28.88,37.24,27.38,5.8-.55,11.7-1.9,17.15-3.95,9.14-3.45,16.52-9.5,19.73-19.06,2.57-7.64,4.42-15.56,6.01-23.47.71-3.54.94-7.73-.3-10.98-2.84-7.44-7.2-14.04-14.9-17.65Z'/%3E%3Cpath class='cls-1' d='M71.97,135.24c-1.68-3.19-4.15-6.59-7.16-8.33-6.9-3.98-14.45-6.35-22.69-4.29-4.3,1.07-8.67,1.89-12.99,2.88-.77.18-1.58.53-2.2,1.02-5.3,4.19-11.43,7.45-14.86,13.59q-6.91-4.02-8.58-2.99c.01.18.02.36.05.54,1.58,12.35,3.62,24.73-3.28,36.35-.42.71-.28,2.41.26,2.86.84.71,2.28,1.08,3.41.96,1.26-.13,2.44-.96,3.81-1.54.91,2.37,1.62,4.62,2.6,6.75,2.97,6.43,5.72,13.04,11.53,17.59,12.5,9.79,34.84,8.89,46.16-2.26,4.15-4.09,7.88-8.85,10.81-13.89,4.91-8.45,6.82-17.79,3.29-27.24-2.83-7.55-6.39-14.86-10.15-22Z'/%3E%3C/svg%3E");
}




.how-it-works-compact-visual {
    position: sticky;
    top: 4rem;
	transition: .4s;
}

.how-it-works-compact-visual figure {
    position: relative;
    height: 0;
    padding-bottom: 100%;
    overflow: hidden;
    width: 100%;

}

.how-it-works-compact-visual figure img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.how-it-works-compact-steps {
    margin-left: auto;
    position: relative;
    z-index: 1;
	transition: .4s;
}

.how-it-works-compact-step {
    padding: 4rem;
    background-image: url("data:image/svg+xml,%3Csvg width='631' height='316' preserveAspectRatio='none' viewBox='0 0 631 316' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M629.853 94.2995V120.485V256.665C629.853 256.665 629.853 281.979 617.798 294.2C605.744 306.42 595.698 308.166 595.698 308.166C557.937 310.822 551.89 312.2 522.366 314.277C487.478 316.731 451.465 311.138 406.843 314.277H234.06C150.648 319.17 94.4277 312.531 60.273 308.166C26.1183 303.802 17.0773 300.31 11.05 287.217C5.02277 274.123 6.02728 229.605 6.02728 229.605L0 130.968V67.2463C0 67.2463 5.02277 51.5341 11.05 38.4406C17.0773 25.3472 37.1684 17.4911 37.1684 17.4911L68.3094 6.1434C68.3094 6.1434 91.9536 0.486163 107.487 0.0331157C126.604 -0.524453 155.964 6.1434 155.964 6.1434C155.964 6.1434 192.835 12.2537 217.949 12.2537H273.936H368.67H431.899H522.366C522.366 12.2537 599.098 6.14341 617.798 30.5846C636.499 55.0257 629.853 94.2995 629.853 94.2995Z' fill='white'/%3E%3C/svg%3E%0A");
    background-size: 100% 100%;
	    margin-bottom: 2rem;
}
.how-it-works-compact-step:nth-of-type(even) {
   background-image: url("data:image/svg+xml,%3Csvg width='626' height='347' preserveAspectRatio='none' viewBox='0 0 626 347' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0.22116 103.716V132.45V281.889C0.22116 281.889 0.221314 309.667 12.0637 323.078C23.906 336.488 33.7754 338.404 33.7754 338.404C70.8723 341.318 76.8134 342.83 105.818 345.109C140.092 347.802 175.472 341.664 219.31 345.109H389.054C470.999 350.479 526.231 343.193 559.785 338.404C593.339 333.614 602.221 329.783 608.142 315.414C614.064 301.046 618.998 253.395 618.998 253.395C618.998 253.395 626.176 197.109 625.997 160.853C625.828 126.822 618.998 74.0287 618.998 74.0287C618.998 74.0287 614.064 56.7869 608.142 42.4187C602.221 28.0505 582.483 19.4296 582.483 19.4296L551.89 6.97711C551.89 6.97711 528.661 0.769106 513.401 0.271952C494.62 -0.3399 461.023 0.271883 461.023 0.271883L389.054 0.271952H324.044H242.056L176.067 6.97711L105.818 13.6823C105.818 13.6823 26.7473 20.9816 12.0637 42.4187C-2.61991 63.8558 0.22116 103.716 0.22116 103.716Z' fill='white'/%3E%3C/svg%3E%0A");
background-size: 100% 100%;
}

.how-it-works-compact-step img {
    height: 6rem;
    width: auto;
}

.how-it-works-compact-step h3 {
    margin: 2rem 0;
    max-width: 45rem;
}

.how-it-works-compact-step p {
    margin: 0;
}

/* Desktop small */
@media only screen and (max-width: 1100px) {
  .how-it-works-compact-visual-steps-wrapper:before {
    top: -20rem;
}
}

/* Tablet */
@media only screen and (max-width: 700px) {
  .how-it-works-compact-visual-steps-wrapper {
    grid-template-columns: 1fr;
}

.how-it-works-compact-visual {
 
}

.how-it-works-compact-steps {
    background: linear-gradient(rgb(251 250 227 / 0%), rgb(251 250 227 / 100%) 20%);
}
    
.how-it-works-compact-step.is-in-top {
    transform: scale(0.9);
}
.how-it-works-compact-visual.is-in-top {
    transform: scale(0.9);
}
.how-it-works-compact-visual-steps-wrapper:before {
        top: -22rem;
        width: 90vw;
    }
}


/* Iphone */
@media only screen and (max-width: 450px) {
  
}