/* steps-four-circles
   Generated from the approved mockup CSS by wp-build/css.py, plus css-fixes/steps-four-circles.css. */
.after-steps .steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 40px; counter-reset: st; }
.after-steps .steps li { counter-increment: st; }
.after-steps .steps li::before { content: counter(st); display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--highlight); color: var(--on-highlight); font: 600 24px/1 var(--head); }
.after-steps .steps h3 { font: 600 20px/1.3 var(--sans); margin-top: 20px; }
.after-steps .steps p { color: var(--muted); font-size: 16px; margin-top: 8px; }
@media (max-width: 1100px) {
  .after-steps .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
  .after-steps .steps { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}