/* Systems journey (preview). Uses the approved palette and fonts only. */
.journey-page{max-width:880px}
.journey-intro{margin:0 28px 54px;max-width:560px}
.journey-intro .editorial-label{font-size:11px;letter-spacing:.14em;color:#6836ce;margin-bottom:14px}
.journey-intro h2{font-size:clamp(36px,4.6vw,56px);line-height:1.08;color:#151622;margin-bottom:18px}
.journey-intro p{font-size:18px;color:#1d1d22;line-height:1.6}

.journey{position:relative;margin:0 28px;padding-left:86px}
.track{position:absolute;left:30px;top:0;bottom:0;width:2px;background:repeating-linear-gradient(#d5c8ef 0 5px,transparent 5px 12px)}
.track-fill{position:absolute;left:-1px;top:0;width:4px;height:0;background:#6836ce;border-radius:4px}
.track-dot{position:absolute;left:-9px;top:0;width:20px;height:20px;border-radius:50%;background:#6836ce;box-shadow:0 0 0 7px #eeebf8,0 6px 18px #6836ce44;transform:translateY(0)}

.progress-pill{position:sticky;top:18px;z-index:4;margin:0 0 22px -86px;display:inline-flex;gap:12px;align-items:center;background:#fff;border:1px solid #d5c8ef;border-radius:999px;padding:8px 18px;font-size:14px;box-shadow:0 8px 22px #1516220f}
.progress-pill b{color:#6836ce;font-family:Manrope,sans-serif}
.progress-pill span{color:#60616c}

.stage-head{font:800 30px/1.2 Manrope,sans-serif;letter-spacing:-.03em;color:#151622;margin:34px 0 22px;display:flex;align-items:baseline;gap:14px}
.stage-head small{font:14px DM,sans-serif;letter-spacing:0;color:#60616c;background:#eeebf8;border-radius:999px;padding:3px 12px}
.steps{list-style:none;margin:0;padding:0}
.step{position:relative;display:grid;grid-template-columns:auto 1fr;gap:22px;background:#fff;border:1px solid #e7e4ed;border-radius:14px;padding:26px 30px;margin-bottom:22px;opacity:.38;transform:translateY(26px);transition:opacity .6s ease,transform .6s ease,box-shadow .6s ease,border-color .6s ease}
.step::before{content:"";position:absolute;left:-56px;top:36px;width:56px;height:2px;background:#d5c8ef}
.step.seen{opacity:1;transform:none}
.step.current{border-color:#6836ce;box-shadow:0 14px 34px #6836ce1f}
.step .num{font:800 34px/1 Manrope,sans-serif;color:#d5c8ef;transition:color .5s ease}
.step.current .num{color:#6836ce}
.step h4{font:800 22px/1.25 Manrope,sans-serif;letter-spacing:-.02em;margin:0 0 12px;color:#151622}
.step p{margin:0;font-size:17px;line-height:1.55}
.step .pain{color:#1d1d22;font-weight:700}
.step .fix{color:#60616c;margin-top:8px}

.journey-end{margin-top:56px}
.journey-cta{display:inline-block;background:#6836ce;color:#fff;border-radius:999px;padding:13px 26px;font-weight:700}

@media (max-width:760px){
  .journey-intro,.journey{margin-left:0;margin-right:0}
  .journey{padding-left:46px}
  .track{left:14px}
  .step::before{left:-32px;width:32px}
  .progress-pill{margin-left:-46px;font-size:13px;padding:7px 14px}
  .step{grid-template-columns:1fr;gap:10px;padding:22px 20px}
  .step .num{font-size:26px}
}
@media (prefers-reduced-motion:reduce){
  .step{opacity:1;transform:none;transition:none}
  .track-fill,.track-dot{transition:none}
}