.how { padding: 112px 0 72px; }

.how-card { border-radius: 32px; background: var(--surface); border: 1px solid rgba(10, 10, 10, .07); padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 40px; }

.how-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px; flex-wrap: wrap; }

.how-title { font: 700 clamp(32px, 3.6vw, 44px)/1.05 var(--sans); letter-spacing: -1.4px; color: var(--title); text-wrap: balance; }

.how-cta { height: 44px; padding: 0 18px; border-radius: 12px; font-size: 15px; }
.how-cta .ico { width: 18px; height: 18px; }

.how-steps { padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 28px; }
.how-steps li { display: flex; flex-direction: column; gap: 14px; padding-top: 20px; border-top: 2px solid rgba(10, 10, 10, .1); font: 400 15px/1.6 var(--sans); color: var(--text-2); }
.how-steps li:first-child { border-top-color: var(--brand); }
.how-steps .n { font-size: 13px; font-weight: 600; color: var(--muted); }
.how-steps li:first-child .n { color: var(--brand); }
.how-steps strong { font: 600 19px/1.3 var(--sans); letter-spacing: -.3px; color: var(--title); }

@media (max-width: 479px) {
  .how { padding: 72px 0 48px; }
}