.sideup-how-it-works-module{background-color:transparent;font-family:Inter,sans-serif;padding:4rem 0}@media (min-width:1024px){.sideup-how-it-works-module{padding:6rem 0}}.how-it-works-header{margin:0 auto 3rem;max-width:800px;text-align:center}@media (min-width:1024px){.how-it-works-header{margin-bottom:4rem}}.section-title{color:#111827;font-size:1.875rem;font-weight:700;line-height:1.2;margin-bottom:.75rem}@media (min-width:1024px){.section-title{font-size:2.25rem;margin-bottom:1rem}}.section-subtitle{color:#4b5563;font-size:1rem;line-height:1.6;padding:0 1rem}@media (min-width:1024px){.section-subtitle{font-size:1.125rem}}.how-it-works-grid{align-items:center;display:grid;gap:2rem;grid-template-columns:1fr}@media (min-width:1024px){.how-it-works-grid{gap:4rem;grid-template-columns:1fr 1fr}}.how-it-works-visuals{align-items:center;background-color:transparent;border-radius:1rem;display:flex;height:300px;justify-content:center;overflow:hidden;position:relative}@media (min-width:1024px){.how-it-works-visuals{border-radius:1.5rem;height:500px}}.step-image-container{align-items:center;display:flex;height:100%;justify-content:center;left:0;opacity:0;padding:1rem;pointer-events:none;position:absolute;top:0;transform:translateY(20px);transition:opacity .4s ease,transform .4s ease;width:100%}@media (min-width:1024px){.step-image-container{padding:2rem}}.step-image-container.active{opacity:1;pointer-events:auto;transform:translateY(0);z-index:10}.step-image-container img{border-radius:.75rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1),0 4px 6px -2px rgba(0,0,0,.05);max-height:100%;max-width:100%;object-fit:contain}.placeholder-image{align-items:center;background-color:hsla(0,0%,100%,.5);border:2px dashed #9ca3af;border-radius:1rem;color:#6b7280;display:flex;font-weight:500;height:100%;justify-content:center;width:100%}.how-it-works-steps{display:flex;flex-direction:column;gap:.75rem}@media (min-width:1024px){.how-it-works-steps{gap:1rem}}.step-item{background-color:#fff;border:1px solid transparent;border-radius:1rem;cursor:pointer;overflow:hidden;transition:all .3s ease}.step-item:hover{border-color:#e5e7eb}.step-item.active{border-color:rgba(168,78,247,.2);box-shadow:0 10px 15px -3px rgba(168,78,247,.1),0 4px 6px -2px rgba(168,78,247,.05)}.step-content-wrapper{align-items:flex-start;display:flex;gap:1rem;padding:1.25rem}@media (min-width:1024px){.step-content-wrapper{gap:1.5rem;padding:1.5rem}}.step-number{padding-top:.25rem;position:relative}.number-text{color:#d1d5db;font-size:1.25rem;font-weight:700;transition:color .3s ease}@media (min-width:1024px){.number-text{font-size:1.5rem}}.step-item:hover .number-text{color:#9ca3af}.step-item.active .number-text{color:var(--sideup-purple,#a84ef7)}.active-indicator-bar{background-color:var(--sideup-purple,#a84ef7);border-bottom-right-radius:9999px;border-top-right-radius:9999px;bottom:0;left:-1.25rem;opacity:0;position:absolute;top:0;transition:opacity .3s ease;width:.375rem}@media (min-width:1024px){.active-indicator-bar{left:-1.5rem}}.step-item.active .active-indicator-bar{opacity:1}.step-text{flex:1}.step-title{color:#6b7280;font-size:1.125rem;font-weight:700;margin:0 0 .5rem;transition:color .3s ease}@media (min-width:1024px){.step-title{font-size:1.25rem}}.step-item:hover .step-title{color:#374151}.step-item.active .step-title{color:#111827}.step-description{color:#4b5563;line-height:1.625;max-height:0;opacity:0;overflow:hidden;transition:max-height .4s ease,opacity .4s ease}.step-item.active .step-description{max-height:200px;opacity:1;padding-bottom:.5rem}