/* ===== Vertical timeline behind stage cards ===== */

:root{
  --vtl-line-x: 28px;        /* line X position from container left */
  --vtl-card-offset: 84px;   /* how far cards sit from the left (creates space) */
  --vtl-gap: 6rem;        /* vertical distance between cards */
  --vtl-dot-size: 18px;      /* dot diameter */
  --vtl-line-width: 5px;     /* line thickness */
  --vtl-line: #aeaeae;       /* line color */
  --vtl-dot:  #0d6efd;       /* dot color */
}

.vtl > section{
  margin-bottom: var(--vtl-gap) !important; /* override .mb-4 !important */
}

.vtl{
  position: relative;
  padding-left: var(--vtl-card-offset);
}
.vtl::before{
  content:"";
  position:absolute; z-index:0;
  left: var(--vtl-line-x); top:0; bottom:0;
  width: var(--vtl-line-width);
  background: var(--vtl-line);
  border-radius: 999px;
}

/* more vertical air between steps */
.vtl > section{
  position: relative;
  margin-bottom: var(--vtl-gap);
}

/* ensure cards sit above the line */
.vtl .stage-card{
  position: relative; z-index:1;
  margin-left: 0; /* keep at 0, padding is on wrapper */
}

/* the dot "on the line", aligned near header */
.vtl .stage-card::before{
  content:"";
  position:absolute; z-index:2;
  /* center the dot on the vertical line */
  left: calc( (var(--vtl-line-x) - var(--vtl-card-offset)) - (var(--vtl-dot-size) / 2) );
  top: 1.25rem; /* aligns around the card header; tweak if needed */
  width: var(--vtl-dot-size); height: var(--vtl-dot-size);
  border-radius: 50%;
  background: var(--vtl-dot);
  box-shadow:
    0 0 0 4px #fff,     /* white ring so the dot "punches through" the card edge */
    0 0 0 1px #cfd4da;  /* subtle outline */
}

/* Responsive tweaks: slightly tighter on very small screens */
@media (max-width: 575.98px){
  :root{
    --vtl-line-x: 20px;
    --vtl-card-offset: 64px;
    --vtl-gap: 3rem;
    --vtl-dot-size: 16px;
  }
  .vtl .stage-card::before{
    top: 1rem;
  }
}