/* Miracle v3 — merchants page styles. OWNER: MCL-V3-001-T14. Do not edit css/base.css.
   Mobile-first, min-width only, and only the four chassis breakpoints (621/851/1151).
   Every colour is a base.css token; every tracking value is in em (README §5). */

/* ---------- hero ----------------------------------------------------------- */
.m-hero__inner { display:grid; gap:var(--s6); grid-template-columns:1fr; align-items:center; }
.m-hero__copy  { gap:var(--s4); min-width:0; }
.m-hero__media { min-width:0; width:100%; }

/* ---------- how Miracle works (round 6: 4 steps) ---------------------------- */
.m-steps { list-style:none; margin-top:var(--s6); }
.m-steps > li { position:relative; }
.m-steps__n {
  font-family:var(--heading); font-weight:800;
  font-size:.8125rem; letter-spacing:.14em;
  color:var(--teal); display:block; margin-bottom:var(--s3);
}

/* ---------- round 6 (Amit 2026-10-29): benefits, lists, closing lines ------- */
.m-benefits { list-style:none; margin-top:var(--s6); }
.m-list { margin-top:var(--s6); max-width:72ch; }
.m-close { margin-top:var(--s6); }
.m-strong strong, .m-close strong { color:var(--ink); }
.m-free { font-family:var(--heading); font-size:.9375rem; color:var(--ink); }
.m-signoff { color:var(--ink); }

/* ---------- categories ------------------------------------------------------ */
.m-cats {
  list-style:none;
  display:flex; flex-wrap:wrap; gap:var(--s2);
  margin-top:var(--s6);
}
.m-cats > li {
  display:inline-flex; align-items:center;
  padding:9px 15px;
  border:1px solid var(--line);
  border-radius:var(--r-pill);
  background:var(--surface);
  font-family:var(--heading); font-weight:700;
  font-size:.8125rem; letter-spacing:.005em;
  color:var(--ink-2);
  min-width:0;
}

/* ---------- 851px and up ---------------------------------------------------- */
@media (min-width:851px) {
  .m-hero__inner { grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); gap:var(--s7); }
}