/* v49.0.38 — visual storytelling & calm motion layer */
:root{--v4938-soft:#f3fbfa;--v4938-soft-gold:#fff9e8;--v4938-ink:#18304a}
.v4938-visual-story{position:relative;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) minmax(260px,390px);gap:24px;align-items:center;margin:0 0 18px;padding:22px 24px;border:1px solid #dfeceb;border-radius:22px;background:linear-gradient(135deg,#f7fcfb 0%,#fff 52%,#fffaf0 100%);box-shadow:0 16px 42px rgba(27,66,79,.06);isolation:isolate}
.v4938-visual-story:before{content:"";position:absolute;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(24,166,154,.12),transparent 68%);inset-inline-start:-70px;bottom:-120px;z-index:-1}
.v4938-visual-story:after{content:"";position:absolute;width:190px;height:190px;border-radius:50%;background:radial-gradient(circle,rgba(216,170,40,.13),transparent 68%);inset-inline-end:-40px;top:-105px;z-index:-1}
.v4938-visual-copy{min-width:0;max-width:720px}.v4938-visual-kicker{display:inline-flex;align-items:center;gap:7px;padding:6px 10px;border-radius:999px;background:#eaf8f6;color:var(--teal-dark,#0d7f76);font-size:12px;font-weight:800}.v4938-visual-copy h3{margin:10px 0 7px;color:var(--navy);font-size:clamp(20px,2.1vw,29px);line-height:1.35}.v4938-visual-copy p{max-width:680px;margin:0;color:var(--muted);line-height:1.8}.v4938-visual-chips{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.v4938-visual-chips span{padding:7px 10px;border:1px solid #dce9e8;border-radius:999px;background:#fff;color:#40586a;font-size:12px;font-weight:700;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.v4938-visual-chips span:hover{transform:translateY(-2px);border-color:#badfd9;box-shadow:0 7px 16px rgba(24,166,154,.08)}
.v4938-visual-figure{position:relative;display:flex;align-items:center;justify-content:center;min-height:180px;margin:0;border-radius:18px;background:linear-gradient(145deg,rgba(255,255,255,.82),rgba(233,249,247,.8));overflow:hidden;transform:translate3d(var(--visual-x,0),var(--visual-y,0),0);transition:transform .25s ease}.v4938-visual-figure img{position:relative;z-index:2;display:block;width:100%;max-width:390px;height:210px;object-fit:contain;filter:drop-shadow(0 12px 18px rgba(20,35,60,.09));animation:v4938Float 5.5s ease-in-out infinite alternate}.v4938-visual-story--admin .v4938-visual-figure img,.v4938-visual-story--manager .v4938-visual-figure img{height:210px;object-fit:cover;border-radius:14px;filter:none;opacity:.94}
.v4938-orbit{position:absolute;border-radius:50%;border:1px solid rgba(24,166,154,.17);z-index:1}.v4938-orbit-a{width:150px;height:150px;inset-inline-start:14px;top:20px;animation:v4938Orbit 9s linear infinite}.v4938-orbit-b{width:84px;height:84px;inset-inline-end:18px;bottom:16px;border-color:rgba(216,170,40,.25);animation:v4938Orbit 7s linear infinite reverse}
@keyframes v4938Float{from{transform:translateY(2px)}to{transform:translateY(-8px)}}@keyframes v4938Orbit{to{transform:rotate(360deg)}}

/* Trainee hero becomes more visual without sacrificing the learning metrics. */
.v4938-design-pass .v49-trainee-hero{position:relative;overflow:hidden}.v4938-design-pass .v49-trainee-hero:after{content:"";position:absolute;inset-inline-end:-60px;bottom:-100px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(24,166,154,.10),transparent 70%);pointer-events:none}.v4938-design-pass .progress-course-row,.v4938-design-pass .v42-session-card,.v4938-design-pass .v42-action-grid a,.v4938-design-pass .quick-grid a{transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.v4938-design-pass .progress-course-row:hover,.v4938-design-pass .v42-session-card:hover,.v4938-design-pass .v42-action-grid a:hover,.v4938-design-pass .quick-grid a:hover{transform:translateY(-3px);box-shadow:0 12px 24px rgba(24,49,70,.07)}
.v4938-design-pass .rich-empty{position:relative;overflow:hidden;min-height:132px;background:linear-gradient(145deg,#fbfefe,#f7fbfa)}.v4938-design-pass .rich-empty:after{content:"";position:absolute;width:76px;height:76px;border-radius:24px;background:linear-gradient(145deg,rgba(24,166,154,.09),rgba(216,170,40,.09));inset-inline-end:-18px;bottom:-24px;transform:rotate(18deg)}

/* Public experience illustration uses the generated training artwork but keeps the page compact. */
.v4938-public-visual{position:relative;margin-top:18px;min-height:190px;border-radius:26px;overflow:hidden;border:1px solid rgba(255,255,255,.65);background:linear-gradient(145deg,#eafafa,#fff8df);box-shadow:0 22px 50px rgba(20,50,75,.11)}.v4938-public-visual img{display:block;width:100%;height:clamp(220px,35vw,390px);object-fit:contain;object-position:center;animation:v4938Float 6s ease-in-out infinite alternate}.v4938-public-visual-badge{position:absolute;display:flex;align-items:center;gap:7px;padding:9px 12px;border-radius:999px;background:rgba(255,255,255,.93);box-shadow:0 10px 24px rgba(20,50,75,.10);backdrop-filter:blur(10px);font-size:12px;font-weight:800}.v4938-public-visual-badge.one{inset-inline-start:18px;top:18px}.v4938-public-visual-badge.two{inset-inline-end:18px;bottom:18px}

/* Subtle load/reveal for visual storytelling only. */
[data-visual-story]{opacity:0;transform:translateY(14px);transition:opacity .55s ease,transform .55s ease}[data-visual-story].is-visible{opacity:1;transform:none}
@media(max-width:900px){.v4938-visual-story{grid-template-columns:1fr}.v4938-visual-figure{min-height:150px}.v4938-visual-figure img,.v4938-visual-story--admin .v4938-visual-figure img,.v4938-visual-story--manager .v4938-visual-figure img{height:180px}.v4938-public-visual img{height:260px}}
@media(max-width:520px){.v4938-visual-story{padding:18px 16px;border-radius:18px;gap:12px}.v4938-visual-copy h3{font-size:20px}.v4938-visual-figure{min-height:132px}.v4938-visual-figure img,.v4938-visual-story--admin .v4938-visual-figure img,.v4938-visual-story--manager .v4938-visual-figure img{height:150px}.v4938-public-visual{border-radius:19px}.v4938-public-visual-badge{font-size:11px;padding:7px 9px}.v4938-public-visual-badge.one{inset-inline-start:10px;top:10px}.v4938-public-visual-badge.two{inset-inline-end:10px;bottom:10px}}
@media(prefers-reduced-motion:reduce){.v4938-visual-figure img,.v4938-orbit,.v4938-public-visual img{animation:none!important}.v4938-visual-chips span,.v4938-design-pass .progress-course-row,.v4938-design-pass .v42-session-card,.v4938-design-pass .v42-action-grid a,.v4938-design-pass .quick-grid a{transition:none!important}[data-visual-story]{opacity:1;transform:none;transition:none}}

/* Generated public illustration replaces the old wireframe inside the existing hero height. */
.v4938-generated-hero .v4918-browser,.v4938-generated-hero .v4918-device-shadow{display:none}.v4938-generated-hero{overflow:visible}.v4938-hero-art{display:block;width:min(100%,650px);max-height:390px;object-fit:contain;filter:drop-shadow(0 22px 28px rgba(20,50,75,.12));animation:v4938Float 5.8s ease-in-out infinite alternate}.v4938-generated-hero .v4918-float{z-index:3}.v4938-generated-hero .v4918-float-live{inset-inline-start:3%;top:15%}.v4938-generated-hero .v4918-float-recorded{inset-inline-end:2%;top:16%}.v4938-generated-hero .v4918-float-hybrid{inset-inline-end:9%;bottom:9%}
@media(max-width:640px){.v4938-hero-art{max-height:275px}.v4938-generated-hero{min-height:280px}}
@media(max-width:390px){.v4938-hero-art{max-height:235px}.v4938-generated-hero{min-height:245px}}
@media(prefers-reduced-motion:reduce){.v4938-hero-art{animation:none!important}}

/* v49.0.40 — role-specific dashboard illustrations */
.v4938-visual-story--admin .v4938-visual-figure img,
.v4938-visual-story--manager .v4938-visual-figure img{object-fit:contain;border-radius:0;filter:drop-shadow(0 12px 18px rgba(20,35,60,.07));opacity:1}