/* How it works page. */

/* How it works */
.how-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.how-grid article { position: relative; display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--highlight), var(--shadow); }
.step-large { display: block; margin-bottom: 18px; color: var(--violet-text); font: 800 2.25rem/1 var(--font-display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; transition: color .25s; }
.how-grid article { transition: border-color .2s var(--ease), transform .2s var(--ease); }
@media (hover: hover) { .how-grid article:hover { border-color: var(--violet-line); transform: translateY(-2px); } }
.how-grid article:nth-child(3)::before { content: ''; position: absolute; top: 24px; right: 24px; width: 10px; height: 10px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 4px color-mix(in srgb, var(--lime) 30%, transparent); }
.how-grid h2 { margin-bottom: 8px; font-size: 1.25rem; }
.how-grid p { color: var(--muted); font-size: .9375rem; line-height: 1.6; }


@media (max-width: 1120px) { .how-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .how-grid { grid-template-columns: minmax(0, 1fr); }
  .step-large { margin-bottom: 12px; font-size: 2rem; }
}