/* How It Works — page styles. Only what site.css lacks; tokens via var(--…). */

/* The seven steps are an ordered list for assistive tech; strip the default list chrome. */
.mmp-how-it-works-steps .mm-steps { list-style: none; margin: 0; padding: 0; }
.mmp-how-it-works-steps .mm-step { margin: 0; }
.mmp-how-it-works-steps .mm-step p + p { margin-top: 6px; }

/* A little air between the section head and the photo column. */
.mmp-how-it-works-steps .mm-how { margin-top: 8px; }
/* Off-white section: the step tiles sit on white so they still read as tiles. */
.mmp-how-it-works-steps .mm-step { background: var(--paper); box-shadow: var(--shadow-sm); }

/* Seven steps run tall, so the photo + Minder ID column follows the reader instead of sitting in the middle of a gap. */
@media (min-width: 901px) {
  .mmp-how-it-works-steps .mm-how { align-items: start; }
  .mmp-how-it-works-steps .mm-how__visual { position: sticky; top: calc(var(--header-h) + 24px); }
}

/* Hero stats sit two-up on phones; site.css keeps the figure on one line, so "9–12 Months" and "Day 91" run past
   their tile at 375px. Let the figure wrap and shrink a touch so every tile stays inside its column. */
@media (max-width: 480px) {
  .mm-hero__stats .mm-stat { grid-template-rows: auto auto; }
  .mm-hero__stats .mm-stat__n { white-space: normal; flex-wrap: wrap; row-gap: 0; font-size: clamp(34px, 10.5vw, 44px); }
  .mm-hero__stats .mm-stat__n small { font-size: 0.45em; white-space: nowrap; }
}

/* Next-step buttons under the stepper. */
.mmp-how-it-works-next { margin-top: clamp(28px, 3vw, 40px); }

/* "Want every line?" line under the four rule cards: one row on desktop, centred like the tier foot. */
#rules .mm-tiers-foot { margin-top: clamp(28px, 3vw, 40px); }
#rules .mm-tiers-foot .mm-link { white-space: normal; }