/* Molo Steps */
.molo-steps__header {
  margin-bottom: clamp(32px, 5vw, 60px);
  max-width: 62ch;
}

/* section+element+class specificity so Avada's global heading styles
   (.fusion-body .post-content h2/h3 …) can't restyle our headings */
section.molo-steps h2.molo-steps__headline {
  margin: 0;
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  line-height: 1.15;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-transform: none;
  text-wrap: balance;
}

.molo-steps__intro {
  margin: .9em 0 0;
  line-height: 1.6;
}

/* the <ol> is the grid; numbering comes from a CSS counter, so source order
   IS the step order */
.molo-steps__list {
  --molo-steps-gap: clamp(28px, 4vw, 44px);
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: molo-step;
  position: relative;
  display: grid;
  gap: var(--molo-steps-gap);
}
.molo-steps--row .molo-steps__list {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}
.molo-steps--stack .molo-steps__list {
  grid-template-columns: 1fr;
  max-width: 62ch;
}

/* desktop row layout: lock to 4-across and draw the connecting line behind
   the numbers, ending at the LAST circle (not the grid edge) */
@media (min-width: 1024px) {
  .molo-steps--row .molo-steps__list {
    grid-template-columns: repeat(4, 1fr);
  }
  .molo-steps--row .molo-steps__list::before {
    content: "";
    position: absolute;
    top: 30px;
    left: 30px;
    /* right endpoint = last column width minus the circle inset */
    right: calc((100% - 3 * var(--molo-steps-gap)) / 4 - 30px);
    height: 2px;
    background: var(--molo-line);
  }
  .molo-theme-dark .molo-steps__list::before,
  .molo-theme-deep .molo-steps__list::before {
    background: var(--molo-line-inverse);
  }
}

.molo-steps__step {
  counter-increment: molo-step;
  position: relative;
}

/* big number in an orange circle-outline; opaque background masks the line */
.molo-steps__number {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 2px solid var(--molo-orange);
  color: var(--molo-orange);
  font-weight: 700;
  font-size: 1.45rem;
  background: var(--molo-paper-dim);
}
.molo-steps__number::before { content: counter(molo-step); }
.molo-theme-light .molo-steps__number { background: var(--molo-paper); }
.molo-theme-dark  .molo-steps__number { background: var(--molo-navy); }
.molo-theme-deep  .molo-steps__number { background: var(--molo-navy-deep); }

section.molo-steps h3.molo-steps__title {
  margin: 20px 0 0;
  font-size: 1.28rem;
  font-weight: 700;
  line-height: 1.25;
  text-transform: none;
}

.molo-steps__kicker {
  margin: .55em 0 0;
  font-weight: 700;
  line-height: 1.45;
}

.molo-steps__desc {
  margin: .6em 0 0;
  font-size: .97rem;
  line-height: 1.62;
}