/* ============================================================
   Connected by Design — the 6-step journey loop.

   Shared by the home page, features, and how-it-works. The home page
   also renders six scene cards under the stepper (.scenes / .scene /
   .scard*, which stay in sections.css); the other two show the stepper
   and its rotating caption alone. js/journey-loop.js drives all three
   and no-ops cleanly when there are no scenes.
   ============================================================ */

.journey {
  background: linear-gradient(180deg, #0F2544 0%, #1B3A5C 55%, #0F2544 100%);
  color: #fff;
  padding: 100px 0;
  border-bottom: 1px solid var(--border-light);
}
.journey__header { max-width: 760px; margin: 0 auto 44px; text-align: center; }
.journey__kicker { color: var(--sky-light); }
.journey__title {
  font-family: var(--font-heading);
  font-size: clamp(30px, 3.2vw, 42px);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #fff;
  margin: 10px 0 0;
}
.journey__lead { margin: 14px 0 0; color: rgba(255, 255, 255, .65); font-size: 17px; }
.journey__wrap { max-width: 980px; margin: 0 auto; }
.stepper { position: relative; padding: 6px 0 2px; }
.conn {
  position: absolute;
  top: 22px;
  width: calc(16.6667% - 68px);
  height: 3px;
  border-radius: 99px;
  background: rgba(255, 255, 255, .12);
  overflow: hidden;
}
.conn:nth-child(1) { left: calc(8.3333% + 34px); }
.conn:nth-child(2) { left: calc(25% + 34px); }
.conn:nth-child(3) { left: calc(41.6667% + 34px); }
.conn:nth-child(4) { left: calc(58.3333% + 34px); }
.conn:nth-child(5) { left: calc(75% + 34px); }
.conn__fill {
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: linear-gradient(90deg, var(--sky), var(--sky-light));
  box-shadow: 0 0 8px rgba(126, 200, 227, .55);
  transition: width .55s cubic-bezier(.4, 0, .2, 1);
}
.conn.is-done .conn__fill { width: 100%; }
.steps { display: grid; grid-template-columns: repeat(6, 1fr); position: relative; }
.step {
  background: none;
  border: none;
  display: grid;
  justify-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
  cursor: pointer;
  padding: 0;
  font-family: var(--font-body);
}
.step__tile {
  position: relative;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  transition: all .35s cubic-bezier(.32, .72, 0, 1);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .45);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .14);
}
.step.is-active .step__tile {
  background: var(--sky);
  color: var(--navy);
  transform: translateY(-2px);
  box-shadow: 0 0 0 4px rgba(126, 200, 227, .22), 0 10px 24px rgba(126, 200, 227, .35);
}
.step.is-done .step__tile {
  background: rgba(126, 200, 227, .13);
  color: var(--sky-light);
  box-shadow: inset 0 0 0 1.5px rgba(126, 200, 227, .45);
  transform: none;
}
.step__badge {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 17px;
  height: 17px;
  border-radius: 99px;
  display: grid;
  place-items: center;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 9px;
  transition: all .35s;
  background: #22405f;
  color: rgba(255, 255, 255, .6);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.step.is-active .step__badge {
  background: var(--navy);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
}
.step.is-done .step__badge {
  background: var(--sky);
  color: var(--navy);
  box-shadow: none;
}
.step__label {
  font-size: 11px;
  font-weight: 700;
  transition: color .35s;
  line-height: 1.3;
  text-align: center;
  max-width: 11ch;
  color: rgba(255, 255, 255, .45);
}
.step.is-active .step__label { color: #fff; }

/* Scene cards — stacked in one grid cell, crossfade + rise */

.journey__caption { max-width: 640px; margin: 22px auto 0; text-align: center; min-height: 74px; }
.journey__scene-title { font-family: var(--font-heading); font-weight: 800; font-size: 17px; color: #fff; }
.journey__scene-caption {
  margin: 7px 0 0;
  color: rgba(255, 255, 255, .68);
  font-size: 14.5px;
  line-height: 1.55;
  text-wrap: pretty;
}
.journey__hint { text-align: center; margin-top: 10px; font-size: 11px; color: rgba(255, 255, 255, .4); }

/* Stepper without scene cards (features / how-it-works): the caption
   would otherwise sit tight under the tiles. */
.stepper--bare + .journey__caption { margin-top: 34px; }

@media (max-width: 960px) {
  .steps { grid-template-columns: repeat(3, 1fr); row-gap: 24px; }
  .conn { display: none; }
}