/* ============================================================
   ENGAGE JOURNEYS — Bob's scroll story (scoped .ej-)
   Inlined on the Engage module page. Brand navy/gold/Lato.
   ============================================================ */
.ej-grid{ display:grid; grid-template-columns:0.96fr 1.04fr; gap:clamp(24px,5vw,64px); align-items:start; max-width:1280px; margin:0 auto; padding:0 clamp(16px,4vw,40px); }
.ej-sticky{ position:sticky; top:0; height:100vh; display:flex; flex-direction:column; justify-content:center; gap:18px; padding:34px 0; overflow-y:auto; overflow-x:hidden; }
.ej-bob{ display:flex; align-items:center; gap:14px; border:1px solid var(--hairline-dark2); border-radius:14px; padding:14px 16px; flex:none;
  background:linear-gradient(120deg,rgba(38,61,105,.42),rgba(10,23,40,.5)); }
.ej-avatar{ width:54px; height:54px; border-radius:50%; flex:none; display:grid; place-items:center; font-weight:900; font-size:23px;
  color:var(--navy-950); background:linear-gradient(140deg,var(--gold-bright),var(--gold)); box-shadow:0 0 0 2px rgba(205,163,102,.35); }
.ej-bob .ej-bob-name{ font-size:17px; font-weight:900; letter-spacing:-.01em; color:#fff; }
.ej-bob .ej-bob-status{ display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; color:var(--gold-bright); margin-top:3px; }
.ej-bob .ej-status-dot{ width:8px; height:8px; border-radius:50%; background:var(--gold); flex:none; transition:background .4s; }
.ej-bob .ej-status-dot.exit{ background:#7bb65a; }
.ej-bob .ej-bob-prog{ margin-left:auto; font-size:12px; font-weight:800; color:#fff; font-variant-numeric:tabular-nums; opacity:.8; }
.ej-phone{ position:relative; width:212px; margin:0 auto; border-radius:28px; border:9px solid #0c1626; background:#0a1322; box-shadow:0 22px 54px rgba(0,0,0,.42); overflow:hidden; flex:none; }
.ej-phone .ej-notch{ height:20px; display:flex; align-items:center; justify-content:center; }
.ej-phone .ej-notch::after{ content:""; width:58px; height:5px; border-radius:3px; background:#1d2940; }
.ej-screen{ position:relative; height:288px; background:linear-gradient(180deg,#101d35,#0a1322); }
.ej-msg{ position:absolute; inset:0; padding:14px; display:flex; flex-direction:column; gap:9px; opacity:0; transform:translateY(8px);
  transition:opacity .45s var(--ease), transform .45s var(--ease); pointer-events:none; overflow:hidden; }
.ej-msg.show{ opacity:1; transform:none; }
.ej-msg .ej-ch{ display:inline-flex; align-items:center; gap:6px; align-self:flex-start; font-size:9px; font-weight:900; letter-spacing:.07em;
  text-transform:uppercase; color:var(--navy-950); background:var(--gold); border-radius:30px; padding:4px 9px; flex:none; }
.ej-msg .ej-ch svg{ width:11px; height:11px; }
.ej-msg .ej-ch.wait{ background:rgba(243,241,234,.14); color:var(--on-dark-soft); }
.ej-msg .ej-ch.exit{ background:#4a7d34; color:#fff; }
.ej-msg .ej-bubble{ background:rgba(255,255,255,.05); border:1px solid var(--hairline-dark2); border-radius:12px; padding:12px; min-height:0; }
.ej-msg.win .ej-bubble{ border-color:var(--gold); }
.ej-msg .ej-bubble .ej-from{ font-size:9.5px; font-weight:800; color:var(--gold-bright); margin-bottom:5px; }
.ej-msg .ej-bubble .ej-subj{ font-size:12.5px; font-weight:800; color:var(--on-dark); line-height:1.3; margin-bottom:6px; }
.ej-msg .ej-bubble .ej-body{ font-size:11px; line-height:1.5; color:var(--on-dark-soft); }
.ej-msg .ej-bubble .ej-cta{ display:inline-block; margin-top:9px; font-size:10.5px; font-weight:800; color:var(--navy-950); background:var(--gold-bright); border-radius:6px; padding:6px 11px; }
.ej-msg .ej-meta{ font-size:9.5px; color:var(--on-dark-mute); margin-top:auto; display:flex; align-items:center; gap:6px; flex:none; }
.ej-msg .ej-meta .star{ width:10px; height:10px; }
.ej-narr{ padding:4vh 0; }
.ej-step{ min-height:74vh; display:flex; flex-direction:column; justify-content:center; padding:3vh 0; }
.ej-step .ej-type{ display:inline-flex; align-items:center; gap:9px; align-self:flex-start; font-size:11px; font-weight:900; letter-spacing:.06em;
  text-transform:uppercase; color:var(--gold-bright); border:1px solid var(--gold); border-radius:30px; padding:6px 13px; margin-bottom:16px; }
.ej-step .ej-type svg{ width:14px; height:14px; }
.ej-step .ej-type .ej-grp{ color:var(--on-dark-mute); font-weight:700; }
.ej-step .ej-kicker{ font-size:12px; font-weight:900; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); margin:0 0 10px; }
.ej-step h2{ font-size:clamp(27px,3.4vw,42px); font-weight:900; letter-spacing:-.02em; line-height:1.06; margin:0 0 16px; max-width:16ch; text-wrap:balance; color:var(--on-dark); }
.ej-step p.ej-lead{ font-size:clamp(15px,1.45vw,18px); line-height:1.62; color:var(--on-dark-soft); max-width:48ch; margin:0; }
.ej-step.is-final h2{ color:var(--gold-bright); }
.ej-branch{ margin-top:22px; display:grid; grid-template-columns:1fr 1fr; gap:12px; max-width:460px; }
.ej-branch .ej-path{ border:1px solid var(--hairline-dark2); border-radius:12px; padding:14px 16px; background:rgba(255,255,255,.02); position:relative; }
.ej-branch .ej-path.taken{ border-color:var(--gold); background:rgba(181,135,80,.1); }
.ej-branch .ej-path .ej-p-cond{ font-size:10.5px; font-weight:900; letter-spacing:.06em; text-transform:uppercase; color:var(--on-dark-mute); margin-bottom:6px; }
.ej-branch .ej-path.taken .ej-p-cond{ color:var(--gold-bright); }
.ej-branch .ej-path .ej-p-out{ font-size:13px; font-weight:800; color:var(--on-dark); }
.ej-branch .ej-path .ej-p-tag{ font-size:10px; color:var(--on-dark-mute); margin-top:4px; }
.ej-branch .ej-path.taken::after{ content:"Bob \2192"; position:absolute; top:-9px; right:12px; font-size:9px; font-weight:900; letter-spacing:.08em;
  background:var(--gold); color:var(--navy-950); border-radius:30px; padding:2px 8px; }
@media (max-width:920px){
  .ej-grid{ grid-template-columns:1fr; gap:0; }
  .ej-sticky{ position:sticky; top:0; height:auto; padding:12px 0; background:linear-gradient(180deg,var(--navy-950) 86%, transparent); z-index:5; flex-direction:row; gap:12px; align-items:center; }
  .ej-bob{ flex:1; } .ej-bob .ej-bob-prog{ display:none; } .ej-phone{ display:none; }
  .ej-step{ min-height:auto; padding:8vh 0; } .ej-step h2{ font-size:26px; } .ej-branch{ grid-template-columns:1fr; }
}