:root {
  --journey-bg: #e3f2f9; /* panel */
  --journey-shadow: #bae0f1; /* wedge between panels */
  --journey-pad: 1.5rem;
  --journey-gap: 0.75rem;
  --journey-skew: 2rem; /* controls wedge slant */
}

.journey-steps {
  /* inherit your page constraints by living inside .info-main-content / .info-blocks */
  margin-block: 1.5rem;
}

.journey-steps__list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Panel */
.journey-step {
  background: var(--journey-bg);
  padding: var(--journey-pad);
}

/* Title strip */
.journey-step__head {
  background: #fff;
  padding: 0.75rem 1rem;
  margin: -0.5rem -0.5rem 1rem; /* subtle bleed effect */
  border-radius: 0.5rem; /* can remove if you want square */
}

.journey-step__title {
  margin: 0;
  color: var(--almost-black, #121212);
  font-size: 1.25rem; /* ~20px */
  line-height: 1.3;
  font-weight: 700;
}

.journey-step__num {
  margin-right: 0.5rem;
}

/* Body: icon + text */
.journey-step__body {
  display: grid;
  grid-template-columns: 1fr; /* mobile-first */
  gap: var(--journey-gap);
  align-items: start;
}

.journey-step__icon img {
  display: block;
  width: 3rem;
  height: auto;
}

/* Text */
.journey-step__text {
  font-size: 1rem;
  line-height: 1.55;
}
.journey-step__text p {
  margin: 0 0 0.75rem;
}
.journey-step__text a {
  text-decoration: underline;
}

/* Shadow wedge between panels */
.journey-step__shadow {
  height: 1.25rem;
  background: var(--journey-shadow);
  /* Right-leaning parallelogram (flat top/bottom, 45-ish sides) */
  clip-path: polygon(var(--journey-skew) 0%, 100% 0%, calc(100% - var(--journey-skew)) 100%, 0% 100%);
}

.journey-step:first-of-type {
  border-radius: 0.75rem 0.75rem 0 0;
  overflow: hidden;
}

.journey-step:last-of-type {
  border-radius: 0 0 0.75rem 0.75rem;
  overflow: hidden;
}

/* Final panel pointer (20% right triangle) */
/* .journey-step--final {
  position: relative;
  padding-right: calc(var(--journey-pad) + 20%); 
}
.journey-step--final .journey-step__tail {
  position: absolute;
  top: 0;
  right: 0;
  width: 20%;
  height: 100%;
  background: var(--journey-bg);
  clip-path: polygon(0% 0%, 100% 50%, 0% 100%);
} */

/* Desktop layout */
@media (min-width: 64rem) {
  :root {
    --journey-skew: 4rem;
  }
  .journey-step__body {
    grid-template-columns: 0.15fr 1fr; /* 15% / 85% split */
    gap: 1.25rem;
  }

  /* show larger icons on desktop */
  .journey-step__icon img {
    width: 5rem;
  }

  .journey-step__shadow {
    height: 2rem;
  }
}

/* Mobile: hide icon column completely to simplify */
@media (max-width: 63.999rem) {
  .journey-step__icon {
    display: none;
  }
}

/* Optional: keep wedges flush with panels by canceling extra spacing around list items */
.journey-step + .journey-step__shadow {
  margin-top: 0;
}
.journey-step__shadow + .journey-step {
  margin-top: 0;
}

/* Respect your site’s focus styles */
.journey-step a:focus-visible {
  outline: 3px solid var(--yellow, #ffd400);
  outline-offset: 2px;
  background: #fff8cc;
}