.page-designer .how-it-works-scroll-sequence{padding-top:106px;overflow:hidden}.page-designer .how-it-works-scroll-sequence .wrapper{max-width:2048px;margin-left:auto;margin-right:auto;padding:0 30px}@media(min-width: 1024px){.page-designer .how-it-works-scroll-sequence .wrapper{padding:0 40px}}@media(min-width: 1440px){.page-designer .how-it-works-scroll-sequence .wrapper{padding:0 70px}}.page-designer .how-it-works-scroll-sequence .grid-container{align-items:center;display:grid;grid-template-columns:repeat(4, calc((100% - 72px) / 4));grid-template-rows:auto;grid-column-gap:24px;-webkit-column-gap:24px;-moz-column-gap:24px;column-gap:24px}@media(min-width: 576px){.page-designer .how-it-works-scroll-sequence .grid-container{grid-template-columns:repeat(12, calc((100% - 264px) / 12))}}.page-designer .how-it-works-scroll-sequence .how-start-text{text-align:center;margin-bottom:150px}.page-designer .how-it-works-scroll-sequence .how-title{grid-column:2/11;font-weight:500;font-size:4.2rem;line-height:4.8rem;letter-spacing:-0.08rem}@media(min-width: 1024px){.page-designer .how-it-works-scroll-sequence .how-title{font-size:7.6rem;line-height:8rem;letter-spacing:-0.15rem}}@media(min-width: 1440px){.page-designer .how-it-works-scroll-sequence .how-title{font-size:11rem;line-height:11.5rem;letter-spacing:-0.2rem}}.page-designer .how-it-works-scroll-sequence .how-title.title-spacing{margin-bottom:24px}.page-designer .how-it-works-scroll-sequence .how-description{grid-row-start:2;grid-column:4/9;font-size:1.8rem;line-height:2.8rem;letter-spacing:0rem}@media(min-width: 1024px){.page-designer .how-it-works-scroll-sequence .how-description{font-size:1.9rem;line-height:2.8rem;letter-spacing:0rem}}@media(min-width: 1440px){.page-designer .how-it-works-scroll-sequence .how-description{font-size:2rem;line-height:3rem;letter-spacing:0rem}}.page-designer .how-it-works-scroll-sequence .how-pinned{position:relative;height:0;padding-bottom:22%}.page-designer .how-it-works-scroll-sequence .how-pinned .wrapper{height:100%;position:absolute;width:100%;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}.page-designer .how-it-works-scroll-sequence .how-sections-container{position:absolute;width:calc(100% - 140px);height:100%;top:0}.page-designer .how-it-works-scroll-sequence .how-sections-container>*{height:100%}.page-designer .how-it-works-scroll-sequence .how-visuals{position:relative;grid-column:2/8}.page-designer .how-it-works-scroll-sequence .how-visuals.wide{grid-column:1/9}.page-designer .how-it-works-scroll-sequence .how-visual,.page-designer .how-it-works-scroll-sequence .how-text{position:absolute;width:100%;left:0;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);will-change:opacity,transform}.page-designer .how-it-works-scroll-sequence .how-visual{height:140%}.page-designer .how-it-works-scroll-sequence .how-visual img{width:100%;height:100%;position:absolute;top:0;left:0;-o-object-fit:contain;object-fit:contain}.page-designer .how-it-works-scroll-sequence .how-visual picture:nth-child(n+2) img{position:absolute;left:0;top:0;width:100%;height:100%}.page-designer .how-it-works-scroll-sequence .how-svg-bg{position:absolute;width:100%;height:100%;top:0;left:0;overflow:visible;z-index:-1}.page-designer .how-it-works-scroll-sequence .how-svg-bg>*{opacity:0}.page-designer .how-it-works-scroll-sequence .how-texts{position:relative;grid-column:9/13}.page-designer .how-it-works-scroll-sequence .how-text h3{margin-bottom:16px;font-size:3.4rem}@media(min-width: 1440px){.page-designer .how-it-works-scroll-sequence .how-text h3{font-weight:500;font-size:4.2rem;line-height:4.8rem;letter-spacing:-0.08rem}}@media(min-width: 1440px)and (min-width: 1024px){.page-designer .how-it-works-scroll-sequence .how-text h3{font-size:7.6rem;line-height:8rem;letter-spacing:-0.15rem}}@media(min-width: 1440px)and (min-width: 1440px){.page-designer .how-it-works-scroll-sequence .how-text h3{font-size:11rem;line-height:11.5rem;letter-spacing:-0.2rem}}.page-designer .how-it-works-scroll-sequence .how-text p{font-size:2.2rem}@media(min-width: 1440px){.page-designer .how-it-works-scroll-sequence .how-text p{font-size:1.8rem;line-height:2.8rem;letter-spacing:0rem}}@media(min-width: 1440px)and (min-width: 1024px){.page-designer .how-it-works-scroll-sequence .how-text p{font-size:1.9rem;line-height:2.8rem;letter-spacing:0rem}}@media(min-width: 1440px)and (min-width: 1440px){.page-designer .how-it-works-scroll-sequence .how-text p{font-size:2rem;line-height:3rem;letter-spacing:0rem}}@media screen and (min-width: 1660px){.page-designer .how-it-works-scroll-sequence .how-pinned{max-width:1908px}}@media screen and (max-width: 1024px){.page-designer .how-it-works-scroll-sequence{padding-top:64px}.page-designer .how-it-works-scroll-sequence .how-title{grid-column:1/9}.page-designer .how-it-works-scroll-sequence .how-description{grid-column:2/8}.page-designer .how-it-works-scroll-sequence .how-sections-container{width:calc(100% - 80px)}.page-designer .how-it-works-scroll-sequence .how-visuals{grid-column:1/5;box-sizing:border-box}.page-designer .how-it-works-scroll-sequence .how-visuals.wide{grid-column-end:6}.page-designer .how-it-works-scroll-sequence .how-texts{grid-column:6/9}}@media screen and (max-width: 576px){.page-designer .how-it-works-scroll-sequence .how-title{grid-column:1/5}.page-designer .how-it-works-scroll-sequence .how-title.title-spacing{margin-bottom:16px}.page-designer .how-it-works-scroll-sequence .how-description{grid-column:1/5}.page-designer .how-it-works-scroll-sequence .how-pinned{height:auto;padding-bottom:0}.page-designer .how-it-works-scroll-sequence .how-pinned .wrapper{position:static;-webkit-transform:none;transform:none}.page-designer .how-it-works-scroll-sequence .how-start-text{margin-bottom:50px}.page-designer .how-it-works-scroll-sequence .how-sections-container{position:relative;width:100%;height:100vw;max-height:500px}.page-designer .how-it-works-scroll-sequence .how-visuals{height:0;padding-bottom:59%;grid-column-end:5}.page-designer .how-it-works-scroll-sequence .how-texts{grid-row-start:2;grid-column:1/5}.page-designer .how-it-works-scroll-sequence .how-visual,.page-designer .how-it-works-scroll-sequence .how-text{top:auto;-webkit-transform:none;transform:none}}@media(prefers-reduced-motion: reduce){.page-designer .how-it-works-scroll-sequence .how-pinned{height:auto;padding-bottom:0}.page-designer .how-it-works-scroll-sequence .how-pinned .wrapper{height:auto;position:relative;left:auto;-webkit-transform:none;transform:none}.page-designer .how-it-works-scroll-sequence .how-sections-container{position:static;grid-template-areas:"gap1 visual1 visual1 visual1 visual1 visual1 visual1 gap2 text1 text1 text1 text1" "gap1 visual2 visual2 visual2 visual2 visual2 visual2 gap2 text2 text2 text2 text2" "gap1 visual3 visual3 visual3 visual3 visual3 visual3 gap2 text3 text3 text3 text3";align-items:center;row-gap:100px}.page-designer .how-it-works-scroll-sequence .how-visuals,.page-designer .how-it-works-scroll-sequence .how-texts{display:contents}.page-designer .how-it-works-scroll-sequence .how-visuals>:nth-child(1){grid-area:visual1}.page-designer .how-it-works-scroll-sequence .how-visuals>:nth-child(2){grid-area:visual2}.page-designer .how-it-works-scroll-sequence .how-visuals>:nth-child(3){grid-area:visual3}.page-designer .how-it-works-scroll-sequence .how-texts>:nth-child(1){grid-area:text1}.page-designer .how-it-works-scroll-sequence .how-texts>:nth-child(2){grid-area:text2}.page-designer .how-it-works-scroll-sequence .how-texts>:nth-child(3){grid-area:text3}.page-designer .how-it-works-scroll-sequence .how-visual,.page-designer .how-it-works-scroll-sequence .how-text{position:static;-webkit-transform:none;transform:none}}@media screen and (prefers-reduced-motion: reduce)and (max-width: 1024px){.page-designer .how-it-works-scroll-sequence .how-sections-container{grid-template-areas:"visual1 visual1 visual1 visual1 gap2 text1 text1 text1" "visual2 visual2 visual2 visual2 gap2 text2 text2 text2" "visual3 visual3 visual3 visual3 gap2 text3 text3 text3"}}@media screen and (prefers-reduced-motion: reduce)and (max-width: 576px){.page-designer .how-it-works-scroll-sequence .how-sections-container{grid-template-areas:"visual1" "text1" "visual2" "text2" "visual3" "text3";grid-template-columns:1fr;row-gap:0;max-height:none;height:auto}.page-designer .how-it-works-scroll-sequence .how-text:not(:last-child){margin-bottom:100px}}@media(prefers-reduced-motion: reduce){.page-designer .how-it-works-scroll-sequence .how-pinned{height:auto;padding-bottom:0}.page-designer .how-it-works-scroll-sequence .how-pinned .wrapper{height:auto;position:relative;left:auto;-webkit-transform:none;transform:none}.page-designer .how-it-works-scroll-sequence .how-sections-container{position:static;grid-template-areas:"gap1 visual1 visual1 visual1 visual1 visual1 visual1 gap2 text1 text1 text1 text1" "gap1 visual2 visual2 visual2 visual2 visual2 visual2 gap2 text2 text2 text2 text2" "gap1 visual3 visual3 visual3 visual3 visual3 visual3 gap2 text3 text3 text3 text3";align-items:center;row-gap:100px}.page-designer .how-it-works-scroll-sequence .how-visuals,.page-designer .how-it-works-scroll-sequence .how-texts{display:contents}.page-designer .how-it-works-scroll-sequence .how-visuals>:nth-child(1){grid-area:visual1}.page-designer .how-it-works-scroll-sequence .how-visuals>:nth-child(2){grid-area:visual2}.page-designer .how-it-works-scroll-sequence .how-visuals>:nth-child(3){grid-area:visual3}.page-designer .how-it-works-scroll-sequence .how-texts>:nth-child(1){grid-area:text1}.page-designer .how-it-works-scroll-sequence .how-texts>:nth-child(2){grid-area:text2}.page-designer .how-it-works-scroll-sequence .how-texts>:nth-child(3){grid-area:text3}.page-designer .how-it-works-scroll-sequence .how-visual,.page-designer .how-it-works-scroll-sequence .how-text{position:static;-webkit-transform:none;transform:none}}@media screen and (prefers-reduced-motion: reduce)and (max-width: 1024px){.page-designer .how-it-works-scroll-sequence .how-sections-container{grid-template-areas:"visual1 visual1 visual1 visual1 gap2 text1 text1 text1" "visual2 visual2 visual2 visual2 gap2 text2 text2 text2" "visual3 visual3 visual3 visual3 gap2 text3 text3 text3"}}@media screen and (prefers-reduced-motion: reduce)and (max-width: 576px){.page-designer .how-it-works-scroll-sequence .how-sections-container{grid-template-areas:"visual1" "text1" "visual2" "text2" "visual3" "text3";grid-template-columns:1fr;row-gap:0;max-height:none;height:auto}.page-designer .how-it-works-scroll-sequence .how-text:not(:last-child){margin-bottom:100px}}
