.how-diagram{background:linear-gradient(135deg,rgba(223,77,132,.08),transparent 45%),#0e0d13;max-width:none;padding-left:max(32px,calc((100vw - 1176px)/2));padding-right:max(32px,calc((100vw - 1176px)/2));border:0}.how-diagram .section-intro{max-width:670px;text-align:center;margin:0 auto}.how-diagram .section-intro>p:last-child{margin:16px auto 0;color:var(--muted);font-size:.91rem;max-width:510px}.diagram-steps{position:relative;display:grid;grid-template-columns:repeat(3,1fr);gap:19px;max-width:1000px;margin:55px auto 0;padding:0;list-style:none}.diagram-steps:before{content:'';position:absolute;z-index:0;top:57px;left:17%;right:17%;height:1px;background:linear-gradient(90deg,var(--hot),var(--warm),#a181e5)}.diagram-step{position:relative;z-index:1;padding:27px 25px 29px;background:#17151e;border:1px solid var(--line);border-radius:17px}.step-one{border-color:rgba(223,77,132,.5)}.step-two{border-color:rgba(246,184,140,.5)}.step-three{border-color:rgba(161,129,229,.5)}.step-number{position:absolute;top:15px;right:17px;color:var(--muted);font:500 .64rem monospace}.step-icon{display:grid;place-items:center;width:60px;height:60px;border-radius:50%;font-size:1.35rem}.step-one .step-icon{background:rgba(223,77,132,.18);color:#ff82ae}.step-two .step-icon{background:rgba(246,184,140,.17);color:var(--warm)}.step-three .step-icon{background:rgba(161,129,229,.18);color:#cfb6ff}.diagram-step h3{margin:25px 0 8px;font-size:1rem}.diagram-step p{margin:0;color:var(--muted);font-size:.81rem;line-height:1.6}.diagram-action{display:flex;align-items:center;justify-content:center;gap:23px;margin:37px auto 0;color:var(--muted);font-size:.69rem}.diagram-action span:before{content:'•';margin-right:6px;color:var(--hot)}@media(max-width:720px){.how-diagram{padding:74px 23px}.how-diagram .section-intro{text-align:left}.how-diagram .section-intro>p:last-child{margin-left:0}.diagram-steps{grid-template-columns:1fr;gap:11px;margin-top:36px}.diagram-steps:before{top:16%;bottom:16%;left:30px;right:auto;width:1px;height:auto;background:linear-gradient(var(--hot),var(--warm),#a181e5)}.diagram-step{padding:21px 20px 21px 82px;min-height:142px}.step-icon{position:absolute;top:22px;left:17px;width:45px;height:45px;font-size:1.05rem}.diagram-step h3{margin:0 0 7px}.diagram-action{gap:13px;flex-wrap:wrap;margin-top:27px}.diagram-action span{font-size:.63rem}}