/* Process steps (design-direction.md #8). Root class: .mm-steps */
.mm-steps { display: grid; gap: var(--mm-space-5); list-style: none; margin: 0; padding: 0; }
.mm-steps--row .mm-step { position: relative; display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); gap: var(--mm-space-4); align-items: start; align-content: start; min-width: 0; }
.mm-steps--row .mm-step::before { content: ""; position: absolute; left: calc(1.375rem - 1px); top: 2.75rem; bottom: calc(-1 * var(--mm-space-5)); width: 2px; background: var(--mm-border); }
.mm-steps--row .mm-step:last-child::before { display: none; }
.mm-step__chip { position: relative; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--mm-border-strong); border-radius: var(--mm-radius-round); background: var(--mm-bg); color: var(--mm-text); font: 700 1rem/1 var(--mm-font-display); }
.mm-steps--row .mm-step:last-child .mm-step__chip { background: var(--mm-accent); border-color: var(--mm-accent); color: var(--mm-white); }
.mm-step__title { display: block; font-family: var(--mm-font-display); font-size: var(--mm-font-size-h4); line-height: 1.3; font-weight: var(--mm-weight-semibold); color: var(--mm-text); }
.mm-step__text { display: block; margin-top: 0.25rem; font-size: 1.0625rem; line-height: 1.55; }
@media (min-width: 1000px) {
  /* One row with as many equal columns as there are steps (four to six across the site). */
  .mm-steps--row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
  .mm-steps--row .mm-step { grid-template-columns: minmax(0, 1fr); }
  .mm-steps--row .mm-step::before { left: 2.75rem; right: calc(-1 * var(--mm-space-5)); top: calc(1.375rem - 1px); bottom: auto; width: auto; height: 2px; }
  /* Titles reserve 2 lines' worth of height (1.3 line-height * 2) whether they wrap or not, so
     .mm-step__text starts at the same y in every column regardless of a longer title wrapping
     ("A look under the hood.", "Measure and report.") next to shorter ones that don't. Only
     needed once steps stack vertically within a column (this breakpoint); at narrower widths
     each step is its own full-width row with nothing beside it to misalign against. */
  .mm-step__title { min-height: 2.6em; }
}
/* compact layout reuses the base .mm-next/.mm-chip utility classes from base.css */
.mm-steps--compact { gap: var(--mm-space-4); }
.mm-steps--compact .mm-step--compact { display: grid; grid-template-columns: 2.25rem minmax(0, 1fr); gap: var(--mm-space-3); align-items: start; font: 400 var(--mm-font-size-ui)/1.45 var(--mm-font-ui); color: var(--mm-text-body); }
.mm-steps--compact .mm-step--compact:last-child .mm-chip { background: var(--mm-accent); border-color: var(--mm-accent); color: var(--mm-white); }