/* MM Steps — numbered sequence cards. */
.mm-steps { padding: 110px 0; }
.mm-steps .steps__list { margin-top: 56px; display: grid; grid-template-columns: repeat(var(--mm-steps, 3), minmax(0, 1fr)); gap: 20px; }
.mm-steps .step { padding: 34px 30px 36px; border-radius: var(--mm-r-lg); background: var(--mm-mist); }
.mm-steps.tone-mist .step { background: var(--mm-white); }
.mm-steps.tone-black .step { background: #1d1d1f; }
.mm-steps .step__n { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--mm-navy); color: #fff; font-weight: 600; font-size: 17px; }
.mm-steps .step h3 { margin-top: 26px; font-size: 24px; font-weight: 650; letter-spacing: -0.022em; line-height: 1.17; }
.mm-steps .step p { margin-top: 10px; color: var(--mm-grey); font-size: 16px; }
.mm-steps.tone-black .step p { color: #a1a1a6; }

@media (max-width: 1068px) {
	.mm-steps .steps__list--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 833px) {
	.mm-steps { padding: var(--mm-sec) 0; }
	.mm-steps .steps__list { grid-template-columns: minmax(0, 1fr); margin-top: 34px; gap: 12px; }
	.mm-steps .step { padding: 26px 24px; display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 18px; }
	.mm-steps .step__n { grid-row: span 2; }
	.mm-steps .step h3 { margin-top: 6px; font-size: 20px; }
	.mm-steps .step p { margin-top: 6px; }
}
