.image-journey { color:#192e48; --journey-blue:#3566b8; --journey-line:#ccddeb; }
.image-journey [hidden] { display:none!important; }
.journey-overview>h3 { font-size:clamp(23px,2.5vw,32px); margin:28px 0 12px; }
.journey-gallery { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; margin:26px 0; }
.image-journey .journey-gallery-card { position:relative; display:flex; flex-direction:column; align-items:flex-start; text-align:left; padding:0 0 22px; border-radius:18px; overflow:hidden; background:#f6f9fd; transition:transform .18s ease,border-color .18s ease; }
.journey-gallery-card img { display:block; width:100%; height:auto; aspect-ratio:3/2; object-fit:cover; }
.journey-gallery-card strong { font-size:21px; letter-spacing:-.04em; padding:0 20px; margin:18px 0 8px; }
.journey-gallery-card .journey-card-copy { padding:0 20px; font-size:13px; color:#536d88; line-height:1.6; }
.journey-card-number { position:absolute; top:12px; left:12px; display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:#fff; color:#3566b8; box-shadow:0 3px 12px #192e4818; font-weight:700; }
.journey-gallery-card:hover { transform:translateY(-3px); border-color:#3566b8; }
.image-journey .journey-start { display:block; margin:24px auto 36px; background:#3566b8; color:white; border-color:#3566b8; padding:16px 28px; }
.journey-illustration { margin:0; }
.journey-illustration img { display:block; width:100%; height:auto; border-radius:14px; aspect-ratio:3/2; object-fit:contain; background:#f5f9fd; }
.journey-illustration figcaption { font-size:12px; color:#647b93; padding:14px 4px 0; }
.journey-illustration>p { padding:60px 20px; background:#f5f9fd; }
.image-journey .journey-layout { grid-template-columns:minmax(0,1.6fr) minmax(300px,1fr); align-items:start; }
[data-overview=true] .journey-lifecycle { display:none; }
@media(max-width:1100px) { .journey-gallery { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:900px) { .image-journey .journey-layout { grid-template-columns:1fr; } }
@media(max-width:480px) { .journey-gallery { gap:10px; } .journey-gallery-card strong { font-size:17px; padding:0 12px; } .journey-gallery-card .journey-card-copy { font-size:12px; padding:0 12px; } .journey-card-number { width:28px; height:28px; font-size:12px; top:8px;left:8px; } }
@media(prefers-reduced-motion:reduce) { .journey-gallery-card { transition:none!important; } .journey-gallery-card:hover { transform:none; } }
.journey-patient { background:#e5f3ed; border:1px solid #bbdcd0; border-radius:14px; padding:18px; margin-bottom:14px; display:grid; gap:9px; text-align:center; color:#215f54; }
.journey-patient small { line-height:1.6; font-size:12px; }
.journey-gate-facts { border-top:1px solid #d3e1ec; margin-top:24px; padding-top:16px; }
.journey-gate-facts dt { color:#536d88; font-size:12px; margin:16px 0 8px; }
.journey-gate-facts dd { margin:0; font-size:14px; line-height:1.7; }
.journey-audit-rail { margin-top:20px; border-left:4px solid #294a6d; padding:20px; background:#eaf0f7; border-radius:0 12px 12px 0; }
.journey-audit-rail small { display:block; margin-top:12px; color:#536d88; line-height:1.6; }
.journey-steps button { padding:8px!important; font-size:12px!important; width:100%; }
.journey-heading { display:flex; justify-content:space-between; align-items:center; gap:24px; margin:8px 0 24px; }
#hospital-saas-app .journey-heading h2 { font-size:clamp(27px,3vw,42px); letter-spacing:-.055em; margin:0 0 12px; }
.image-journey p { color:#536d88; line-height:1.7; font-size:15px; }
.journey-notice { max-width:290px; background:#e4effc; border-radius:12px; padding:16px 20px; }
.journey-notice strong { color:#245795; display:block; margin-bottom:8px; }
.journey-notice span { font-size:13px; color:#486783; line-height:1.6; }
.journey-controls { display:flex; justify-content:space-between; gap:16px; margin:24px 0; flex-wrap:wrap; }
.journey-controls>div,.journey-scenarios [role=group] { display:flex; gap:8px; flex-wrap:wrap; }
.image-journey button { font:inherit; font-size:14px; cursor:pointer; padding:12px 18px; min-height:46px; border:1px solid #c5d6e7; border-radius:10px; background:white; color:#264664; }
.image-journey button[aria-pressed=true] { background:#3566b8; color:#fff; border-color:#3566b8; }
.image-journey button:disabled { opacity:.5; cursor:default; }
.image-journey button:focus-visible,.image-journey summary:focus-visible { outline:3px solid #3566b8; outline-offset:3px; }
.journey-layout { display:grid; grid-template-columns:minmax(0,2.4fr) minmax(280px,1fr); gap:20px; }
.journey-stage { border:1px solid #d3e1ee; padding:16px; border-radius:20px; background:#fff; min-width:0; }
.image-journey h3 { font-size:19px; margin:0 0 8px; letter-spacing:-.03em; }
.journey-control-lane { display:grid; grid-template-columns:1fr 180px; align-items:center; position:relative; gap:16px; padding:24px; background:#e9f3fc; border-radius:14px; }
.journey-control-lane p { margin:0 0 10px; }
.journey-control-lane small { color:#54728c; font-size:12px; }
.journey-cloud { border:1px solid #bfd5eb; box-shadow:0 8px 18px #467eae16; border-radius:44px; padding:16px; text-align:center; background:linear-gradient(#fff,#dfeefd); display:grid; gap:6px; }
.journey-cloud>span { font-size:25px; color:#3566b8; }
.journey-cloud strong { font-size:22px; }
.journey-signals { grid-column:1/-1; border-top:1px dashed #8caed0; padding-top:12px; display:flex; justify-content:space-between; color:#3566b8; font-size:12px; }
.journey-data-lane { border-radius:14px; background:linear-gradient(120deg,#f5faff,#e9f2fb); margin-top:14px; padding:24px 22px 14px; }
.journey-data-lane>p { margin:0; font-size:13px; }
.journey-route { display:grid; grid-template-columns:minmax(0,1fr) minmax(100px,1fr) minmax(0,1fr); align-items:center; min-height:220px; gap:8px; }
.journey-endpoint { display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center; min-width:0; }
.journey-endpoint>strong { font-size:19px; }
.journey-endpoint>span { font-size:11px; color:#55728c; }
.journey-hospital { width:100%; max-width:185px; filter:drop-shadow(0 12px 8px #28435f18); }
.journey-monitor { width:135px; max-width:100%; border:8px solid #20384f; border-radius:10px; background:#102637; box-shadow:5px 8px 0 #b4c8d9; margin:30px 0 16px; }
.journey-monitor svg { display:block; width:100%; }
.journey-store-label { display:none; }
[data-mode=store] .journey-view-label { display:none; }
[data-mode=store] .journey-store-label { display:block; }
[data-mode=store] .journey-monitor { background:#d7e6f3; border-color:#48729b; }
[data-mode=store] .journey-monitor svg { opacity:.25; }
.journey-conduit { position:relative; text-align:center; }
.journey-wire { position:absolute; top:42px; left:-24%; width:148%; border-top:6px solid #9ac8ed; box-shadow:0 3px 8px #72ace845; }
.journey-package { position:relative; width:68px; height:82px; margin:0 auto 20px; background:linear-gradient(135deg,#35658c,#172d47); border:2px solid #87aeca; border-radius:6px; box-shadow:-7px -6px 0 #c3d7e7,-12px -11px 0 #6d92b1,8px 12px 14px #18385123; display:grid; place-items:center; color:white; transition:transform .35s ease; }
.journey-package>span { font-size:33px; }
.journey-package::after { content:''; width:13px; height:12px; border:3px solid #fff; border-bottom:0; border-radius:10px 10px 0 0; position:absolute; top:17px; left:25px; }
.journey-conduit strong,.journey-conduit small { display:block; font-size:13px; position:relative; margin:8px 0; }
.journey-conduit small { color:#53738f; font-size:11px; }
[data-step="0"] .journey-package,[data-step="1"] .journey-package { transform:translateX(-25px); }
[data-step="6"] .journey-package,[data-step="7"] .journey-package { transform:translateX(25px); }
[data-scenario=denied] .journey-package { border-color:#b47743; }
[data-scenario=unavailable] .journey-package { opacity:.45; }
.journey-route-note { font-size:11px!important; text-align:center; }
.journey-steps { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; padding:24px 0 4px; margin:0; list-style:none; }
.journey-steps li { text-align:center; color:#647b93; font-size:13px; }
.journey-steps span { display:grid; place-items:center; width:32px; height:32px; border:1px solid #adbed1; border-radius:50%; margin:0 auto 10px; background:#fff; }
.journey-steps li[data-active=true] { color:#275c9e; }
.journey-steps li[data-active=true] span { color:white; background:#3566b8; border-color:#3566b8; }
.journey-explanation { padding:26px; border:1px solid #d3e1ee; border-radius:18px; background:#fff; min-width:0; }
.journey-current { display:inline-block; background:#e6f1fc; border-radius:20px; font-size:12px; padding:8px 12px; margin:16px 0 6px; color:#285c9d; }
.journey-explanation h4 { font-size:26px; line-height:1.45; letter-spacing:-.04em; margin:16px 0; }
.journey-explain-art { font-size:75px; color:#315d86; padding:12px 0; }
.journey-explain-art span { font-size:35px; color:#16796b; }
.image-journey summary,.journey-existing>summary { cursor:pointer; padding:16px 0; line-height:1.6; }
.journey-explanation details { border-top:1px solid #d2dfeb; }
.journey-explanation details p { font-size:13px; }
.journey-lifecycle { border:1px solid #d3e1ee; border-radius:16px; padding:24px; margin-top:20px; background:#f4f8fc; }
.journey-lifecycle h3 small { font-weight:400; font-size:12px; margin-left:12px; color:#3566b8; }
.journey-lifecycle ol { display:grid; grid-template-columns:repeat(6,1fr); list-style:none; padding:18px 0 10px; gap:12px; counter-reset:life; }
.journey-lifecycle li { font-size:14px; counter-increment:life; border-top:2px solid #d4e1ed; padding-top:14px; }
.journey-lifecycle li::before { content:counter(life,decimal-leading-zero); display:block; color:#69819a; font-size:12px; margin-bottom:9px; }
.journey-lifecycle p,.journey-scenarios p { font-size:12px; margin-bottom:0; }
.journey-scenarios,.journey-existing { border-top:1px solid #cbd9e6; margin-top:22px; padding:6px 0; }
.journey-existing>p { color:#536d88; font-size:14px; }
.journey-existing [hidden] { display:none!important; }
@media(max-width:1000px) { .journey-layout { grid-template-columns:1fr; } .journey-explain-art { display:none; } .journey-heading { align-items:flex-start; } }
@media(max-width:600px) { .journey-heading { flex-direction:column; gap:8px; } .journey-notice { max-width:none; } .journey-stage { padding:10px; } .journey-control-lane { grid-template-columns:1fr 125px; padding:16px; gap:8px; } .journey-cloud { padding:12px; } .journey-cloud strong { font-size:18px; } .journey-data-lane { padding:18px 10px; } .journey-route { grid-template-columns:1fr 80px 1fr; min-height:210px; gap:3px; } .journey-endpoint>strong { font-size:14px; } .journey-endpoint>span { font-size:10px; } .journey-package { width:44px; height:62px; } .journey-package::after { left:14px;top:8px; } .journey-package span { font-size:28px; } .journey-monitor { border-width:5px; } .journey-wire { top:30px; } .journey-steps strong { font-size:11px; } .journey-lifecycle { padding:18px; } .journey-lifecycle ol { grid-template-columns:repeat(3,1fr); } .journey-lifecycle h3 small { display:block;margin:10px 0; } .journey-explanation { padding:20px; } }
@media(prefers-reduced-motion:reduce) { .journey-package { transition:none; } }