/* Scoped vector stories; no shared site styles. */
[data-viable-stories]{min-width:0;width:100%;border:1px solid #d6e4eb;border-radius:18px;background:#fff;padding:24px;color:#003154;box-sizing:border-box;box-shadow:0 14px 45px #00315408;font-family:var(--font-body,system-ui);container-type:inline-size}
[data-viable-stories] *{box-sizing:border-box}.vs-top{display:flex;justify-content:space-between;gap:12px;align-items:center}.vs-label,.vs-duration{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:#587887}.vs-duration{letter-spacing:.3px;white-space:nowrap}.vs-tabs{display:flex;gap:5px;margin:18px 0}.vs-tabs button{flex:1;border:1px solid transparent;border-radius:6px;background:#f2f7f9;padding:10px 5px;font:500 14px var(--font-body,system-ui);color:#486476;cursor:pointer}.vs-tabs button[aria-pressed=true]{background:#003154;color:#fff}.vs-title{font-size:24px!important;line-height:1.2!important;font-weight:500;margin:0!important;letter-spacing:-.6px;min-height:58px}.vs-scene{margin:12px -5px 8px}.vs-scene>svg{display:block;width:100%;height:auto;overflow:visible}.vs-svg-small{font:13px system-ui;fill:#003154}.vs-svg-title{font:600 12px system-ui;fill:#003154}.vs-svg-tiny{font:10px system-ui;letter-spacing:0;fill:#477789}.vs-svg-label{font:14px system-ui;fill:#587887}.vs-transfer{opacity:0;transition:opacity .4s}.vs-reader .vs-check{stroke-dasharray:50;stroke-dashoffset:50;transition:stroke-dashoffset .65s}.vs-reader [data-vs=outcome]{opacity:0;transition:opacity .4s}.vs-offline{display:flex;justify-content:center;align-items:center;gap:7px;font-size:12px;color:#507581;min-height:28px;opacity:0;transition:opacity .4s}.vs-offline svg{width:17px;height:17px;flex-shrink:0}.vs-scene[data-phase="1"] .vs-transfer,.vs-scene[data-phase="2"] .vs-transfer,.vs-scene[data-phase="1"] .vs-offline,.vs-scene[data-phase="2"] .vs-offline{opacity:1}.vs-scene[data-phase="2"] .vs-check{stroke-dashoffset:0}.vs-scene[data-phase="2"] [data-vs=outcome]{opacity:1}.vs-scene[data-phase="2"] .vs-shield{fill:#e0f4ed;stroke:#007d73}.vs-playing .vs-scene[data-phase="1"] .vs-packet{animation:vs-send 1.3s ease-in-out infinite}.vs-playing .vs-phone{animation:vs-float 3s ease-in-out infinite}.vs-narrative{min-height:94px}.vs-narrative h3{font-size:22px;line-height:1.25;font-weight:500;margin:0 0 7px;letter-spacing:-.3px}.vs-narrative p{font-size:16px;line-height:1.55;color:#5a7180;margin:0;max-width:580px}.vs-controls{display:flex;gap:12px;align-items:center;margin-top:16px}.vs-steps{display:flex;flex:1;gap:7px}.vs-steps button{flex:1;background:none;border:0;border-top:3px solid #dce8ee;padding:10px 0;font:13px var(--font-body,system-ui);color:#5a7180;cursor:pointer;white-space:normal;min-height:44px}.vs-steps button[aria-current=step]{border-color:#009db8;color:#003154}.vs-play{border:1px solid #d6e4eb;background:white;border-radius:6px;padding:9px 10px;font:13px var(--font-body,system-ui);color:#003154;cursor:pointer;min-height:44px;white-space:nowrap}.vs-caption{font-size:12px;line-height:1.5;color:#627c89;margin:12px 0 0!important}.vs-tabs button:focus-visible,.vs-steps button:focus-visible,.vs-play:focus-visible{outline:3px solid #00a7c4;outline-offset:3px}
@keyframes vs-send{0%{transform:translateX(0);opacity:0}20%{opacity:1}80%{opacity:1}100%{transform:translateX(101px);opacity:0}}@keyframes vs-float{50%{transform:translateY(-3px)}}
@container(min-width:650px){.vs-title{font-size:32px!important;min-height:44px}.vs-scene{max-width:590px;margin:8px auto}.vs-narrative{min-height:72px;text-align:center}.vs-narrative p{margin:auto}.vs-controls{max-width:620px;margin:12px auto 0}.vs-caption{text-align:center}.vs-top{margin-bottom:5px}.vs-tabs{max-width:520px;margin:16px auto}.vs-title{text-align:center}}
@media(max-width:480px){[data-viable-stories]{padding:18px 14px;border-radius:12px}.vs-title{font-size:23px!important;min-height:58px}.vs-controls{gap:7px}.vs-steps{gap:4px}.vs-steps button,.vs-play{font-size:12px}.vs-play{padding:8px}.vs-narrative{min-height:105px}.vs-narrative h3{font-size:21px}.vs-offline{font-size:12px}}
@media(prefers-reduced-motion:reduce){[data-viable-stories] *{animation:none!important;transition:none!important}}

/* Stack controls before translated labels become cramped. */
@container(max-width:420px){.vs-controls{flex-wrap:wrap}.vs-steps{flex-basis:100%}.vs-steps button{font-size:13px;padding:10px 4px}.vs-play{margin-left:auto;font-size:13px}.vs-scene{margin:16px -8px 12px}.vs-title{min-height:0}.vs-narrative{min-height:130px}}

/* A single concise homepage example; the full demo retains all three stories. */
[data-viable-stories="compact"]{padding:20px}
[data-viable-stories="compact"] .vs-tabs,[data-viable-stories="compact"] .vs-title,[data-viable-stories="compact"] .vs-narrative p{display:none}
[data-viable-stories="compact"] .vs-scene{max-width:340px;margin:10px auto 4px}
[data-viable-stories="compact"] .vs-narrative{min-height:48px;text-align:center}
[data-viable-stories="compact"] .vs-narrative h3{font-size:19px;margin:0}
[data-viable-stories="compact"] .vs-controls{margin-top:4px;flex-wrap:nowrap}
[data-viable-stories="compact"] .vs-steps{flex-basis:auto}
[data-viable-stories="compact"] .vs-caption{font-size:10px;text-align:center;margin-top:6px!important}
@media(max-width:800px){
.demo-page .vs-top{display:none}.demo-page .vs-tabs{margin:0 0 12px}
.demo-page .vs-title{font-size:22px!important;min-height:0}
.demo-page .vs-scene{max-width:340px;margin:8px auto}
.demo-page .vs-narrative{min-height:95px}.demo-page .vs-narrative h3{font-size:20px}.demo-page .vs-narrative p{font-size:14px}
.demo-page .vs-controls{margin-top:4px;flex-wrap:nowrap}.demo-page .vs-steps{flex-basis:auto}
}

/* Full story selector in the right-hand hero column. */
.demo-page [data-viable-stories]{padding:20px}
.demo-page .vs-top{display:none}.demo-page .vs-tabs{margin:0 0 14px}
.demo-page .vs-title{font-size:22px!important;min-height:54px;text-align:left}
.demo-page .vs-scene{max-width:340px;margin:6px auto}
.demo-page .vs-narrative{min-height:92px;text-align:left}
.demo-page .vs-narrative h3{font-size:19px}.demo-page .vs-narrative p{font-size:14px;margin:0}
.demo-page .vs-controls{margin-top:4px;flex-wrap:nowrap}.demo-page .vs-steps{flex-basis:auto}
.demo-page .vs-caption{font-size:10px;margin-top:6px!important}