/* A fixed, responsive lane for the client-journey message on larger screens.
   It intentionally begins beneath the header border and ends before the hero
   headline, so no stage can cover either piece of brand information. */
.hero-journey-copy {
  position: absolute;
  z-index: 2;
  top: 100px;
  left: 55%;
  width: min(420px, 52vw);
  min-height: 82px;
  transform: translateX(-50%);
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 5px;
  padding: 12px 18px;
  text-align: center;
  color: #effcff;
  background: rgba(2, 13, 24, .62);
  border: 1px solid rgba(72, 205, 255, .68);
  box-shadow: 0 0 18px rgba(29, 188, 255, .17), inset 0 0 16px rgba(88, 191, 255, .05);
  pointer-events: none;
}

.hero-journey-component {
  margin: 0;
  color: #9feaff;
  font: 600 10px 'DM Mono', monospace;
  letter-spacing: .13em;
}

.hero-journey-stage {
  color: #f0fcff;
  font: 800 25px Manrope, sans-serif;
  letter-spacing: .045em;
  line-height: 1;
  text-shadow: 0 0 12px rgba(48, 207, 255, .75);
}

.hero-journey-line {
  margin: 0;
  color: #c2e8f6;
  font: 500 10px 'DM Mono', monospace;
  letter-spacing: .04em;
}

.hero-journey-copy[data-accent="red"] { border-color: rgba(255, 87, 87, .76); box-shadow: 0 0 18px rgba(255, 63, 63, .18), inset 0 0 16px rgba(255, 84, 84, .06); }
.hero-journey-copy[data-accent="red"] .hero-journey-component { color: #ffabab; }
.hero-journey-copy[data-accent="yellow"] { border-color: rgba(255, 224, 97, .78); box-shadow: 0 0 18px rgba(255, 211, 67, .18), inset 0 0 16px rgba(255, 221, 93, .06); }
.hero-journey-copy[data-accent="yellow"] .hero-journey-component { color: #ffe98e; }
.hero-journey-copy[data-accent="green"] { border-color: rgba(103, 255, 167, .78); box-shadow: 0 0 18px rgba(83, 255, 157, .18), inset 0 0 16px rgba(101, 255, 166, .06); }
.hero-journey-copy[data-accent="green"] .hero-journey-component { color: #aaffcf; }

@media (max-width: 750px) {
  .hero-journey-copy { display: none; }
}