/* ============================================================================
   The Process — four steps on one line that draws itself.
   ========================================================================= */

.tl { background: var(--bg); }

/* The centred header is capped at 46rem, which wraps this heading in two;
   the design sets it on one line at desktop widths. */
.tl__head { margin-bottom: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
.tl__head.sec-head--center { max-width: 64rem; }
/* The shared header caps titles at 22ch, which breaks this one-line heading
   in three. Released, and set heavy as the design sets it. */
.tl__head .sec-head__title { max-width: none; font-weight: 700; }
.tl__head .sec-head__body { max-width: 60ch; }

/* --- Steps ---------------------------------------------------------------- */

.tl__steps {
  --dot: 3.5rem;
  /* The line arrives at step i at i/3 of its run; each number fills then. */
  --run: 1.3s;
  --lead: 0.15s;
  position: relative;
  display: grid;
  gap: 2rem;
  max-width: 66rem;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* Phone first: numbers down the left, each beside its copy. */
.tl__step {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: var(--dot) minmax(0, 1fr);
  column-gap: 1.1rem;
  align-items: start;
}
.tl__body { padding-top: 0.55rem; }

@media (min-width: 860px) {
  .tl__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1rem, 0.5rem + 1.5vw, 2rem); }
  .tl__step { display: flex; flex-direction: column; align-items: center; text-align: center; }
  .tl__body { padding-top: 0; }
}

/* --- The line -------------------------------------------------------------
   Positioned from the first number's centre (--rail-x, --rail-y) for
   --rail-len, all measured in Timeline.tsx, along whichever axis the steps
   are laid out on (`data-axis`). Not drawn until it has been measured. */
.tl__rail {
  position: absolute;
  z-index: 0;
  display: none;
  left: var(--rail-x);
  top: var(--rail-y);
  background: var(--blue-200);
}
.tl__steps[data-axis] .tl__rail { display: block; }
.tl__steps[data-axis='x'] .tl__rail { width: var(--rail-len); height: 2px; translate: 0 -1px; }
.tl__steps[data-axis='y'] .tl__rail { width: 2px; height: var(--rail-len); translate: -1px 0; }

.tl__fill {
  position: absolute;
  inset: 0;
  transition: transform var(--run) var(--ease-in-out) var(--lead);
}
.tl__steps[data-axis='x'] .tl__fill {
  background: linear-gradient(90deg, var(--blue-300), var(--blue-500));
  transform: scaleX(0);
  transform-origin: left;
}
.tl__steps[data-axis='y'] .tl__fill {
  background: linear-gradient(180deg, var(--blue-300), var(--blue-500));
  transform: scaleY(0);
  transform-origin: top;
}
.tl__steps.is-in .tl__fill { transform: none; }

/* --- Number --------------------------------------------------------------- */

/* A white disc with a pale double ring; it fills blue when the line reaches
   it. Colour changes here are on a 56px disc, not on text blocks. */
.tl__dot {
  display: grid;
  place-items: center;
  width: var(--dot);
  height: var(--dot);
  border-radius: 50%;
  background: #fff;
  color: var(--blue-500);
  font-size: var(--fs-lead);
  font-weight: 600;
  box-shadow: 0 0 0 5px var(--blue-100), 0 0 0 6px var(--blue-300);
  opacity: 0;
  transform: scale(0.6);
  transition:
    opacity 0.45s var(--ease-out-soft),
    transform 0.7s var(--ease-out-expo),
    background-color 0.45s var(--ease-out-soft),
    color 0.45s var(--ease-out-soft);
  transition-delay: calc(var(--lead) + var(--run) * var(--i) / 3);
}
.is-in .tl__dot {
  opacity: 1;
  transform: none;
  background: var(--blue-500);
  color: #fff;
}
.is-in .tl__step:hover .tl__dot { transform: scale(1.06); transition-delay: 0s; }

/* --- Copy ----------------------------------------------------------------- */

.tl__body {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s var(--ease-out-soft), transform 0.7s var(--ease-out-expo);
  transition-delay: calc(var(--lead) + 0.15s + var(--run) * var(--i) / 3);
}
.is-in .tl__body { opacity: 1; transform: none; }

.tl__title { margin: 0 0 0.55rem; font-weight: 700; color: var(--ink-900); }
@media (min-width: 860px) {
  .tl__title { margin-top: 1.4rem; }
  .tl__text { max-width: 27ch; margin-inline: auto; }
}
.tl__text { line-height: 1.6; color: var(--text-secondary); text-wrap: pretty; }
.tl__when {
  display: inline-block;
  margin-top: 0.85rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: var(--fs-xs);
  font-weight: 600;
}

.tl__cta { display: flex; justify-content: center; margin-top: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); }

@media (prefers-reduced-motion: reduce) {
  .tl__fill, .tl__dot, .tl__body { transition: none; }
}