.how-it-works{margin:10px 0 30px;border:1px solid #393939;border-radius:8px;background:#131313;overflow:hidden}
.how-it-works h2{margin:22px 24px 8px;font-size:11px;font-weight:850;letter-spacing:.13em;text-transform:uppercase;color:#bdbdbd}
.how-intro{margin:0 24px 22px;font-size:clamp(23px,4vw,34px);font-weight:850;line-height:1.15;letter-spacing:-.035em}.how-intro strong{color:var(--redlight);font-weight:inherit}
.how-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));list-style:none;padding:0 24px;margin:0;gap:12px}
.how-step{--step-color:#eee;position:relative;display:flex;flex-direction:column;min-width:0;padding:17px 15px 16px;border:1px solid #414141;border-radius:6px;background:#1a1a1a}
.how-step__copy{flex:1;display:grid;grid-template-rows:auto auto 1fr auto}.how-step__copy>.how-preview{justify-self:start;align-self:end}
.how-step--action{--step-color:#ff7676;border-color:#8f3939;background:linear-gradient(145deg,#351a1a,#211616)}.how-step--confirm{--step-color:var(--green)}
.how-step__visual{position:relative;width:48px;height:48px;margin:0 0 15px;color:var(--step-color);display:grid;place-items:center;border:1px solid currentColor;border-radius:12px;background:#0003}
.how-step__visual>svg{width:29px;height:29px}.how-number{position:absolute;top:-7px;left:-7px;display:grid;place-items:center;width:20px;height:20px;background:var(--step-color);color:#111;border-radius:50%;font-size:11px;font-weight:900;border:2px solid #181818}
.how-location{font-size:9px;font-weight:850;letter-spacing:.09em;text-transform:uppercase;color:var(--step-color)}.how-step h3{margin:5px 0 8px;font-size:17px;font-weight:850;line-height:1.2}.how-step p{margin:0;font-size:13px;line-height:1.55;color:#c6c6c6}.how-step b{color:#f7f7f7;font-weight:750}
.how-preview{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:6px 10px;min-height:30px;border-radius:4px;border:1px solid #777;background:#242424;font-size:11px;font-weight:800;color:#fff;user-select:none;pointer-events:none}.how-preview svg{width:16px;height:16px}.how-preview--block{color:#ff8585;border-color:#a34949;background:#401a1a}.how-preview--block>span{font-size:20px;line-height:.5;align-self:center}.how-preview--done{color:var(--green);border-color:#4c7d61;background:#1a3023}
.how-notice{display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;padding:15px 24px;background:#271616;border-top:1px solid #653030;font-size:12px;line-height:1.6;color:#d8bebe}.how-notice>svg{width:21px;height:21px;flex:0 0 21px;margin-top:1px;color:#ff7676}.how-notice strong{display:block;color:#fff;font-size:13px;font-weight:800}
@media(max-width:650px){.how-it-works h2{margin:18px 17px 8px}.how-intro{margin:0 17px 19px;font-size:25px}.how-steps{grid-template-columns:minmax(0,1fr);gap:10px;padding:0 17px}.how-step{display:grid;grid-template-columns:42px minmax(0,1fr);gap:14px;padding:15px 13px}.how-step__visual{width:42px;height:42px;margin:3px 0 0;border-radius:10px}.how-step__visual>svg{width:26px;height:26px}.how-step h3{font-size:16px;margin:4px 0 6px}.how-step p{font-size:12px;line-height:1.5}.how-preview{margin-top:9px;padding:4px 9px;min-height:27px}.how-notice{padding:14px 17px;margin-top:17px;font-size:11px}.how-notice strong{font-size:12px}}
