.flow {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 700px;
  position: relative;
}

/* Base li */
.flow li {
  position: relative;
  padding: 1rem;
  border-radius: 4px;
  background: #f5f5f5;
  width: 320px;
  text-align: center;
  margin-bottom: 3rem;
}

/* Vertical arrows for all steps */
.flow li::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -3rem;
  transform: translateX(-50%);
  width: 20px;
  height: 60px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='60' viewBox='0 0 20 60'><line x1='10' y1='0' x2='10' y2='50' stroke='%23444' stroke-width='2'/><polygon points='5,50 15,50 10,60' fill='%23444'/></svg>") no-repeat center;
  background-size: contain;
  z-index: -1;
}

/* Remove arrow for last step */
.flow li:last-child::after {
  content: none;
}

/* Desktop: shift learners to right */
@media (min-width: 700px) {
  .flow li.learner {
    position: relative;
    left: 200px; /* shift right visually */
    text-align: left;
    background: #eef;
  }

  /* Optional horizontal arrow to show relation */
  .flow li.learner::before {
    content: "";
    position: absolute;
    top: 50%;
    left: -120px; /* arrow points from main step to learner */
    transform: translateY(-50%);
    width: 120px;
    height: 20px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='20' viewBox='0 0 120 20'><line x1='0' y1='10' x2='100' y2='10' stroke='%23f90' stroke-width='2' stroke-dasharray='6,4'/><polygon points='100,5 100,15 120,10' fill='%23f90'/></svg>") no-repeat center;
    background-size: contain;
    z-index: -1;
  }
}

/* Mobile: stack learners under main steps */
@media (max-width: 699px) {
  .flow li.learner {
    position: static;
    left: 0;
    background: #eef;
  }
  .flow li.learner::before {
    display: none;
  }
}