#service-workflow{scroll-margin-top:90px}
.product-demo{padding:22px 0 0}
.demo-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:25px}
.demo-heading p{display:flex;align-items:center;gap:8px;margin:0;font-size:12px;color:var(--muted)}
.demo-status-dot{width:6px;height:6px;border-radius:50%;background:var(--accent)}
.demo-world{display:grid;grid-template-columns:minmax(0,1fr) 70px 240px;align-items:center;gap:16px;padding:30px;background:linear-gradient(135deg,var(--brand-pale),#f9fafb 64%);border-radius:20px;overflow:hidden}
.demo-care,.demo-soomi{min-width:0}
.demo-product-name{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-bottom:18px}
.demo-product-name .product-wordmark{margin:0}.demo-product-name .wordmark-careloop{width:155px;height:auto}.demo-product-name .wordmark-soomi{width:106px;height:auto}
.demo-product-name>span:last-child{font-size:12px;color:var(--muted);margin:0}
.demo-care-frame,.demo-soomi-frame{position:relative;overflow:hidden}
.demo-care-frame{border-radius:10px;box-shadow:0 14px 36px #123d7815;background:var(--wash)}
.demo-care-host,.demo-soomi-host{transform-origin:top left;position:absolute;left:0;top:0}
.demo-care-host{width:1440px}.demo-soomi-host{width:370px}
.demo-soomi-frame{width:220px;margin:auto}
.demo-soomi .demo-product-name{align-items:center}
.demo-owner{display:flex;gap:10px;align-items:center;margin-top:22px;opacity:.6;transition:opacity .5s}
.demo-owner>span{display:grid;place-items:center;width:32px;height:32px;background:white;border:1px solid var(--line);border-radius:50%;color:var(--accent)}
.demo-owner strong{font-size:13px;font-weight:600}.demo-owner p{font-size:12px;margin:3px 0 0;color:var(--muted)}
[data-phase="person"] .demo-owner{opacity:1}[data-phase="person"] .demo-owner>span{background:var(--accent);color:white}
.demo-bridge{align-self:center;color:var(--accent);text-align:center}
.demo-bridge span{font-size:10px;white-space:nowrap}
.demo-bridge svg{display:block;width:100%;height:30px;margin:5px 0 28px;overflow:visible}
.demo-bridge path{fill:none;stroke:currentColor;stroke-width:2;stroke-dasharray:5 4;opacity:.4}
[data-phase="soomi"] .demo-bridge svg:not(.bridge-return) path,[data-phase="return"] .bridge-return path{opacity:1;animation:connection-flow 1s linear infinite}
@keyframes connection-flow{to{stroke-dashoffset:-18}}
.demo-patient-journey{display:flex;gap:5px;justify-content:space-between;list-style:none;margin:17px 0 0;padding:0}
.demo-patient-journey li{font-size:10px;line-height:1.5;text-align:center;color:var(--muted);padding-top:8px;border-top:2px solid var(--line)}
.demo-patient-journey li.is-current{border-color:var(--accent);color:var(--accent);font-weight:600}
.demo-caption{position:relative;padding:28px 0 24px 64px;min-height:126px}
.demo-caption .demo-scene-count{position:absolute;top:30px;left:0;font-size:11px;color:var(--accent);margin:0}
.demo-caption h3{font-size:23px;line-height:1.45;margin:0 0 9px;font-weight:600}
.demo-caption .demo-scene-description{font-size:15px;line-height:1.7;margin:0;color:var(--body)}
.demo-flow{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:22px;list-style:none;padding:0;margin:0}
.demo-flow li{position:relative;border-top:2px solid var(--line);padding-top:14px;display:grid;grid-template-columns:24px 1fr;gap:7px;color:var(--muted)}
.demo-flow li:after{content:"→";position:absolute;right:-18px;top:17px;font-size:14px}
.demo-flow li:last-child:after{display:none}
.demo-flow .demo-flow-number{font-size:10px;margin:0;line-height:20px}
.demo-flow strong{font-size:14px;font-weight:600}.demo-flow li>span:last-child{grid-column:2;font-size:12px;margin:0}
.demo-flow li.is-current{border-color:#173F79;background:#173F79;color:white;border-radius:7px;padding:14px 10px 10px}
.demo-flow li.is-current .demo-flow-number{background:transparent;border:0;border-radius:0;color:white}
.demo-flow li.is-current:after{color:var(--muted)}
.demo-loop-note{font-size:13px!important;color:var(--accent);margin:22px 0 6px!important;text-align:right}
.demo-loop-note>span{font-size:20px;margin-right:8px}
.product-demo.is-paused *,.product-demo.demo-reduced *{animation-play-state:paused!important}
@media(max-width:1100px){.demo-world{grid-template-columns:minmax(0,1fr) 45px 195px;padding:22px;gap:12px}.demo-soomi-frame{width:180px}.demo-product-name .wordmark-careloop{width:135px}.demo-product-name>span:last-child{font-size:11px}.demo-patient-journey{gap:3px}.demo-patient-journey li{font-size:9px}.demo-flow{gap:14px}.demo-flow li:after{right:-13px}}
@media(max-width:760px){
 .product-demo{padding-top:6px}.demo-heading{margin-bottom:18px}.demo-heading p{font-size:11px}
 .demo-world{display:flex;flex-direction:column;padding:22px 16px;gap:20px;border-radius:14px}
 .demo-care{width:100%}.demo-product-name{gap:8px;margin-bottom:14px}
 .demo-owner{margin-top:16px}.demo-bridge{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;height:30px}
 .demo-bridge span{font-size:11px}.demo-bridge svg{width:45px;margin:0;height:24px}.demo-bridge .bridge-return{transform:rotate(0)}
 .demo-soomi{width:100%;display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:16px;align-items:center}
 .demo-soomi .demo-product-name{align-items:flex-start}.demo-soomi-frame{width:190px;grid-column:2;grid-row:1/3}
 .demo-soomi .demo-product-name>span:last-child{font-size:11px;line-height:1.7}
 .demo-patient-journey{display:flex;flex-direction:column;margin:0;gap:14px}
 .demo-patient-journey li{text-align:left;font-size:12px;padding:0 0 0 10px;border-top:0;border-left:2px solid var(--line)}
 .demo-patient-journey li.is-current{border-left-color:var(--accent)}
 .demo-caption{padding:23px 0;min-height:155px}.demo-caption .demo-scene-count{position:static;margin-bottom:9px}
 .demo-caption h3{font-size:20px}.demo-caption .demo-scene-description{font-size:14px}
 .demo-flow{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
 .demo-flow strong{font-size:12px}.demo-flow li{grid-template-columns:18px 1fr;gap:4px}
 .demo-flow li>span:last-child{grid-column:1/-1;font-size:11px}.demo-flow li:after{display:none}
 .demo-loop-note{font-size:12px!important;line-height:1.7;text-align:left}
}
@media(max-width:360px){.demo-world{padding:18px 12px}.demo-soomi{grid-template-columns:minmax(0,1fr) 158px;gap:10px}.demo-soomi-frame{width:158px}.demo-product-name .wordmark-soomi{width:78px}.demo-patient-journey li{font-size:11px}}
@media(prefers-reduced-motion:reduce){.product-demo *{animation:none!important;transition:none!important}}