/* How it works: numbered steps. */
.steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; counter-reset: step; }
.steps li { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; min-width: 0; }
.step-num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: var(--accent); color: var(--accent-ink); font-weight: 700; }
.steps h3 { font-family: var(--font-head); font-size: 1.1rem; margin: 12px 0 6px; }
.steps p { color: var(--text-soft); margin: 0; font-size: 0.95rem; }