.lpo-hiw-scroll{position:relative}.lpo-hiw-scroll__intro{margin-bottom:var(--space-32)}.lpo-hiw-scroll__title{margin:0 0 var(--space-32);font-family:var(--fondly-f-sans);font-size:var(--t-h2);line-height:var(--lh-h2);letter-spacing:var(--ls-heading);color:var(--lpo-text, var(--text-heading));max-width:22ch;font-weight:600}.lpo-hiw-scroll__tabs{display:inline-flex;align-items:center;background:var(--fondly-paper-soft);border-radius:var(--radius-pill);padding:var(--space-8);margin-bottom:var(--space-32);box-shadow:var(--shadow-card)}.lpo-hiw-scroll__tab{display:inline-flex;align-items:center;justify-content:center;padding:var(--space-16) var(--space-32);border-radius:var(--radius-pill);border:none;background:transparent;font-family:var(--fondly-f-sans);font-size:var(--t-meta);font-weight:600;line-height:1;color:var(--text-soft);cursor:pointer;transition:background .2s ease,color .2s ease}.lpo-hiw-scroll__tab.is-active{background:var(--fondly-ink);color:var(--fondly-paper)}.lpo-hiw-scroll__panel{display:none}.lpo-hiw-scroll__panel.is-active{display:block}.lpo-hiw-scroll__panel{position:relative}.lpo-hiw-scroll__lede{max-width:var(--prose-max, 42rem);margin:0;font-family:var(--fondly-f-serif);font-size:var(--t-lede);line-height:var(--lh-lede);color:var(--lpo-muted, var(--text-body));font-weight:400}.lpo-hiw-scroll__lede p{margin:0}.lpo-hiw-scroll__progress{position:sticky;top:calc(var(--header-height, 72px) + var(--space-24));z-index:2;margin-top:var(--space-32);margin-bottom:var(--space-32);transition:opacity .3s ease}.lpo-hiw-scroll__progress.is-hidden{opacity:0;pointer-events:none}.lpo-hiw-scroll__progress-line{position:absolute;left:0;top:50%;height:2px;width:0;background:var(--fondly-coral);transform:translateY(-50%);z-index:1}.lpo-hiw-scroll__progress-rail{position:relative;display:flex;align-items:center;width:100%;gap:0}.lpo-hiw-scroll__progress-rail:before{content:"";position:absolute;left:0;right:0;top:50%;height:2px;background:var(--fondly-line);transform:translateY(-50%);z-index:0}.lpo-hiw-scroll__progress-number{position:relative;z-index:1;flex:1;display:flex;justify-content:center}.lpo-hiw-scroll__progress-number span{display:flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:50%;font-family:var(--fondly-f-sans);font-size:var(--t-meta);font-weight:600;background:var(--fondly-coral);color:var(--fondly-paper);transition:background .2s ease,color .2s ease}.lpo-hiw-scroll__progress-number.is-complete span{background:var(--fondly-coral-tint);color:var(--fondly-coral)}.lpo-hiw-scroll__progress-connector{flex:1;height:2px}.lpo-hiw-scroll__step{position:sticky;top:calc(var(--header-height, 72px) + var(--space-24));min-height:calc(100vh - var(--header-height, 72px) - var(--space-24));display:flex;align-items:center;padding:var(--space-32) 0;z-index:1}.lpo-hiw-scroll__step:last-child{z-index:2}.lpo-hiw-scroll__step-inner{display:grid;grid-template-columns:1fr;gap:var(--space-32);width:100%;transform-origin:center center;will-change:transform,opacity}.lpo-hiw-scroll__step-media{border-radius:6px;overflow:hidden;background:var(--fondly-paper-soft);box-shadow:var(--shadow-card)}.lpo-hiw-scroll__step-img{display:block;width:100%;height:auto;aspect-ratio:16 / 10;object-fit:cover}.lpo-hiw-scroll__step-content{display:flex;flex-direction:column;gap:var(--space-16)}.lpo-hiw-scroll__step-label span{display:inline-block;font-family:var(--fondly-f-sans);font-size:var(--t-meta);font-weight:600;letter-spacing:var(--ls-meta);text-transform:uppercase;color:var(--lpo-em, var(--fondly-coral))}.lpo-hiw-scroll__step-title{margin:0;font-family:var(--fondly-f-sans);font-size:var(--t-h3);line-height:var(--lh-h3);letter-spacing:var(--ls-heading);color:var(--lpo-text, var(--text-heading))}.lpo-hiw-scroll__step-body{font-size:var(--t-base);line-height:var(--lh-body);color:var(--lpo-muted, var(--text-body))}.lpo-hiw-scroll__step-body p{margin:0 0 var(--space-16)}.lpo-hiw-scroll__step-body p:last-child{margin-bottom:0}@media(min-width:880px){.lpo-hiw-scroll__step-inner{grid-template-columns:1.1fr .9fr;align-items:center;gap:var(--space-64)}.lpo-hiw-scroll__progress-number span{width:48px;height:48px}}@media(prefers-reduced-motion:reduce){.lpo-hiw-scroll__step-inner{will-change:auto;transform:none!important;opacity:1!important}.lpo-hiw-scroll__progress-line{width:100%!important}.js-lpo-hiw-words span{opacity:1!important;transform:none!important}}
/*# sourceMappingURL=/cdn/shop/t/10/assets/lpo-how-it-works-scroll.css.map */