/* ===================== How it works ===================== */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  gap: 24px;
}
.step {
  padding: 26px 22px;
  border-radius: var(--radius);
  background: var(--bg);
  border: 1px solid var(--border);
}
.step__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--on-dark);
  font-weight: 800;
  margin-bottom: 14px;
}
.step h3 { font-size: 1.05rem; margin-bottom: 6px; }
.step p { font-size: .9rem; margin: 0; }