.how-it-works-section{overflow:hidden;padding:100px 24px;position:relative}.how-it-works-section.bg-white{background-color:var(--oj-bg-secondary)}.how-it-works-section.bg-transparent{background-color:transparent}.how-it-works-container{margin:0 auto;max-width:var(--oj-container-max)}.how-it-works-header{margin-bottom:72px;text-align:center}.how-it-works-headline{color:var(--oj-text-primary);font-family:var(--oj-font-heading);font-size:48px;font-weight:700;line-height:1.15;margin:0}.how-it-works-headline-accent{background:var(--oj-gradient-accent);height:5px;margin:24px auto 0;width:80px}.how-it-works-content{align-items:stretch;display:grid;gap:64px;grid-template-columns:1fr 1.2fr}.how-it-works-steps{display:flex;flex-direction:column;gap:16px}.how-it-works-step{align-items:flex-start;background:var(--oj-bg-white);border:2px solid var(--oj-border-light);cursor:pointer;display:flex;gap:20px;overflow:hidden;padding:24px 28px;position:relative;text-align:left;transition:all var(--oj-transition-smooth)}.how-it-works-step:before{background:linear-gradient(180deg,var(--oj-purple-primary) 0,var(--oj-purple-dark) 100%);content:"";height:100%;left:0;opacity:0;position:absolute;top:0;transition:opacity var(--oj-transition-base);width:4px}.how-it-works-step:hover{border-color:rgba(124,58,237,.3);box-shadow:0 4px 20px rgba(124,58,237,.08)}.how-it-works-step.is-active{background:linear-gradient(135deg,rgba(124,58,237,.04),rgba(99,102,241,.02));border-color:var(--oj-border-purple-hover);box-shadow:0 4px 24px rgba(124,58,237,.12),0 0 0 1px var(--oj-purple-tint-10) inset}.how-it-works-step.is-active:before{opacity:1}.how-it-works-step-number{align-items:center;background:#f0f0f0;display:flex;height:48px;justify-content:center;min-width:48px;transition:all var(--oj-transition-base);width:48px}.how-it-works-step.is-active .how-it-works-step-number{background:var(--oj-gradient-badge);box-shadow:var(--oj-shadow-purple-lg)}.how-it-works-step-number span{color:var(--oj-text-light);font-family:var(--oj-font-heading);font-size:20px;font-weight:700;transition:color var(--oj-transition-base)}.how-it-works-step.is-active .how-it-works-step-number span{color:#fff}.how-it-works-step-info{flex:1;min-width:0}.how-it-works-step-title{color:var(--oj-text-secondary);font-family:var(--oj-font-heading);font-size:22px;font-weight:600;line-height:1.3;margin:0 0 8px;transition:color var(--oj-transition-base)}.how-it-works-step.is-active .how-it-works-step-title{color:var(--oj-text-primary)}.how-it-works-step-description{color:var(--oj-text-muted);font-family:var(--oj-font-body);font-size:15px;font-weight:400;line-height:1.5;margin:0;transition:color var(--oj-transition-base)}.how-it-works-step.is-active .how-it-works-step-description{color:var(--oj-text-muted)}.how-it-works-step-indicator{align-items:center;color:#ccc;display:flex;height:32px;justify-content:center;margin-top:8px;min-width:32px;opacity:0;transform:translateX(-8px);transition:all var(--oj-transition-base);width:32px}.how-it-works-step.is-active .how-it-works-step-indicator{color:var(--oj-purple-primary);opacity:1;transform:translateX(0)}.how-it-works-visual{background:none;min-height:400px;position:relative}.how-it-works-visual-item{align-items:center;background:none;display:flex;height:100%;justify-content:center;left:0;opacity:0;pointer-events:none;position:absolute;top:0;transform:scale(.95) translateY(10px);transition:all var(--oj-transition-smooth);width:100%;z-index:1}.how-it-works-visual-item.is-active{opacity:1;pointer-events:auto;transform:scale(1) translateY(0)}.how-it-works-visual-image{background:none;height:auto;max-height:100%;object-fit:contain;width:100%}.how-it-works-visual-placeholder{align-items:center;aspect-ratio:16/10;background:none;color:#bbb;display:flex;flex-direction:column;gap:16px;justify-content:center;width:100%}.how-it-works-visual-placeholder svg{height:48px;width:48px}.how-it-works-visual-placeholder span{font-family:var(--oj-font-body);font-size:14px;font-weight:500}@media (max-width:991px){.how-it-works-section{padding:80px 24px}.how-it-works-header{margin-bottom:56px}.how-it-works-headline{font-size:40px}.how-it-works-content{gap:48px}.how-it-works-step{gap:16px;padding:20px 24px}.how-it-works-step-number{height:44px;min-width:44px;width:44px}.how-it-works-step-number span{font-size:18px}.how-it-works-step-title{font-size:20px}.how-it-works-step-description{font-size:14px}.how-it-works-visual{min-height:350px}}@media (max-width:768px){.how-it-works-section{padding:64px 20px}.how-it-works-header{margin-bottom:48px}.how-it-works-headline{font-size:32px}.how-it-works-headline-accent{height:4px;margin-top:20px;width:60px}.how-it-works-content{gap:40px;grid-template-columns:1fr}.how-it-works-steps{gap:12px;order:2}.how-it-works-visual{min-height:280px;order:1}.how-it-works-step{padding:18px 20px}.how-it-works-step:before{width:3px}.how-it-works-step-number{height:40px;min-width:40px;width:40px}.how-it-works-step-number span{font-size:16px}.how-it-works-step-title{font-size:18px;margin-bottom:4px}.how-it-works-step-description{font-size:14px}.how-it-works-step-indicator{display:none}}@media (max-width:480px){.how-it-works-section{padding:56px 16px}.how-it-works-header{margin-bottom:40px}.how-it-works-headline{font-size:28px}.how-it-works-headline-accent{height:3px;margin-top:16px;width:50px}.how-it-works-content{gap:32px}.how-it-works-steps{gap:10px}.how-it-works-step{gap:14px;padding:16px 18px}.how-it-works-step-number{height:36px;min-width:36px;width:36px}.how-it-works-step-number span{font-size:15px}.how-it-works-step-title{font-size:16px}.how-it-works-step-description{font-size:13px}.how-it-works-visual{min-height:220px}}