/* 06-components/_steps.css — .c-steps: "Så fungerar det". Three to five numbered steps in a row, one line
   each. The number is mono on a small pine-washed square, because a step number is a value; the text is
   Sans. Wraps to two rows, then one column. */
.c-steps { display: grid; gap: var(--space-lg); grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); counter-reset: step; padding: var(--space-lg); background: var(--surface); border: var(--stroke) solid var(--rule); border-radius: var(--radius-md); }
.c-steps__item { display: flex; flex-direction: column; gap: var(--space-xs); min-width: 0; counter-increment: step; }
.c-steps__num { display: inline-grid; place-items: center; width: 2rem; height: 2rem; font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--accent-ink); background: var(--accent-wash); border-radius: var(--radius-sm); }
.c-steps__num::before { content: counter(step); }
.c-steps__title { font-weight: var(--weight-semibold); font-size: var(--text-base); line-height: var(--leading-snug); }
.c-steps__text { font-size: var(--text-sm); color: var(--ink-muted); }