/* ==========================================================================
   Screen 13a — Stage 3 Badge · ప్యాక్ హౌస్ (PackHouse)
   ========================================================================== */

.page-head--center {
  background:
    radial-gradient(420px 300px at 50% 38%, rgba(255, 213, 79, 0.22), transparent 70%),
    var(--hero-bg);
}

/* Diagonal hatch layer carried over from the mobile hero */
.hero-stripes {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: repeating-linear-gradient(
    135deg,
    rgba(255, 255, 255, 0.045) 0,
    rgba(255, 255, 255, 0.045) 2px,
    transparent 2px,
    transparent 16px
  );
  mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
  -webkit-mask-image: radial-gradient(120% 90% at 50% 40%, #000 30%, transparent 85%);
}

.badge-title {
  font-size: clamp(32px, 3.4vw, var(--fs-4xl));
}

/* ---- Journey stepper ---------------------------------------------------- */

.journey .stepper__step {
  width: 96px;
}

/* Current stage carries the screen's own colour (filled, as in the original) */
.journey .stepper__dot.is-active {
  color: #fff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 0 6px rgba(191, 54, 12, 0.16);
}

/* ---- Next stage checklist ---------------------------------------------- */

.next-stage .card__title {
  margin-bottom: 14px;
}

.next-steps {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  list-style: none;
}

.next-steps li {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: var(--fs-sm);
  font-weight: 550;
  color: var(--tone-ink);
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--tone-line);
}

@media (max-width: 720px) {
  .journey .stepper__step {
    width: 72px;
  }
}