.guide-trail {
  --trail-offset: 34px;
  counter-reset: trail-step;
  display: grid;
  gap: 20px;
  list-style: none;
  margin: 34px 0 54px;
  padding: 8px 0 8px 62px;
  position: relative;
}

.guide-trail::before {
  background: repeating-linear-gradient(
    to bottom,
    var(--orange) 0 12px,
    transparent 12px 20px
  );
  border-radius: 999px;
  content: "";
  inset: 30px auto 30px 22px;
  opacity: 0.55;
  position: absolute;
  width: 4px;
}

.steps.guide-trail li {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 12px 28px rgba(38, 60, 50, 0.08);
  counter-increment: trail-step;
  padding: 24px 26px;
  position: relative;
}

.steps.guide-trail li:nth-child(even) {
  margin-left: var(--trail-offset);
}

.steps.guide-trail li::before {
  align-items: center;
  background: var(--orange);
  border: 5px solid var(--cream);
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(239, 90, 40, 0.22);
  color: #fff;
  content: counter(trail-step);
  display: grid;
  font-weight: 900;
  height: 48px;
  justify-items: center;
  left: -64px;
  top: 20px;
  width: 48px;
  z-index: 1;
}

.steps.guide-trail li:nth-child(even)::before {
  left: calc(-64px - var(--trail-offset));
}

.steps.guide-trail li::after {
  border-top: 2px dotted rgba(239, 90, 40, 0.5);
  content: "";
  left: -16px;
  position: absolute;
  top: 44px;
  width: 16px;
}

.steps.guide-trail li:nth-child(even)::after {
  left: calc(-16px - var(--trail-offset));
  width: calc(16px + var(--trail-offset));
}

.guide-trail .trail-stage {
  color: var(--orange);
  display: block;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.13em;
  margin-bottom: 5px;
  text-transform: uppercase;
}

.steps.guide-trail li:last-child {
  background: var(--forest);
  border-color: var(--forest);
  box-shadow: 0 16px 34px rgba(38, 60, 50, 0.2);
  color: #fff;
}

.prose .steps.guide-trail li:last-child,
.prose .steps.guide-trail li:last-child strong {
  color: #fff;
}

.steps.guide-trail li:last-child::before {
  background: var(--forest);
  box-shadow: 0 0 0 2px rgba(38, 60, 50, 0.25);
}

@media (max-width: 620px) {
  .guide-trail {
    --trail-offset: 0px;
    gap: 16px;
    margin-top: 26px;
    padding-left: 54px;
  }

  .guide-trail::before {
    left: 18px;
  }

  .steps.guide-trail li,
  .steps.guide-trail li:nth-child(even) {
    margin-left: 0;
    padding: 21px 20px;
  }

  .steps.guide-trail li::before,
  .steps.guide-trail li:nth-child(even)::before {
    height: 42px;
    left: -56px;
    top: 18px;
    width: 42px;
  }

  .steps.guide-trail li::after,
  .steps.guide-trail li:nth-child(even)::after {
    left: -14px;
    top: 39px;
    width: 14px;
  }
}