/* A phone-first tap-through journey. Desktop retains its pinned vertical route. */
.story-phone-route,.story-phone-label,.story-phone-controls{display:none}
@media(max-width:760px){
 .story-compact.story-track{background:#f3f8ff}
 .story-compact .story-frame{gap:16px;padding-block:28px}
 .story-compact .story-intro h2{font-size:28px;line-height:1.12}
 .story-compact .story-intro>p:not(.eyebrow){font-size:14px;line-height:1.5;max-width:310px;margin-top:10px}
 .story-compact .story-timeline{position:relative;gap:0;max-width:none;min-height:70px;isolation:isolate}
 .story-compact .story-curve{display:none}
 .story-phone-route{display:block;position:absolute;inset:0 0 auto;width:100%;height:44px;fill:none;pointer-events:none;z-index:-1}
 .phone-route-base{stroke:#cedef1;stroke-width:2;vector-effect:non-scaling-stroke}
 .phone-route-travel{stroke:#ff6900;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:var(--phone-route-offset,100);transition:stroke-dashoffset .55s cubic-bezier(.22,1,.36,1)}
 .story-compact .story-step{display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:8px;min-height:70px;color:#60758e;outline-offset:2px}
 .story-compact .story-node{width:44px;height:44px;border:4px solid #f3f8ff;flex-shrink:0;font-size:13px;background:#e1edff;scale:1;transition:background .5s,color .5s,scale .5s cubic-bezier(.22,1,.36,1)}
 .story-compact .story-step[aria-current="step"] .story-node{background:#ff6900;color:#fff;scale:1.1}
 .story-compact .story-step.is-complete .story-node{background:#ffe0ca;color:#a33e00}
 .story-phone-label{display:block;font-size:11px;line-height:1.4;font-weight:600;transition:color .4s,font-size .5s cubic-bezier(.22,1,.36,1)}
 .story-step[aria-current="step"] .story-phone-label{font-size:13px;color:#102d54;font-weight:700}
 .story-compact .story-stage{display:grid;position:relative;min-width:0}
 .story-compact .story-scene{display:grid;grid-area:1/1;grid-template-rows:clamp(245px,34svh,300px) 108px;gap:16px;opacity:0;visibility:hidden;pointer-events:none;translate:12px 0;transition:none}
 .story-compact.story-phone-ready .story-scene{transition:opacity .55s cubic-bezier(.22,1,.36,1),translate .55s cubic-bezier(.22,1,.36,1),visibility .55s}
 .story-compact[data-story-direction="backward"] .story-scene{translate:-12px 0}
 .story-compact .story-scene.is-active{display:grid;opacity:1;visibility:visible;pointer-events:auto;translate:0 0}
 .story-compact .story-visual{grid-row:1;width:calc(100% + 24px);height:100%;margin:0 -12px}
 .story-compact .story-visual img{height:100%;width:100%;max-height:none;object-fit:contain;object-position:center center;transform:none}
 .story-compact .story-mobile-copy{grid-row:2;margin:0;max-width:none;align-self:start}
 .story-compact .story-mobile-copy h3,.story-compact .story-scene.is-current h3{font-size:24px;line-height:1.2;letter-spacing:-.035em;color:#102d54;margin:0 0 10px}
 .story-compact .story-mobile-copy p,.story-compact .story-scene.is-current p{font-size:15px;line-height:1.5;max-width:335px;color:#526b86;margin:0}
 .story-compact .story-caption{display:none}
 .story-compact .story-phone-controls{order:3;display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-top:0}
 .story-phone-controls button{display:flex;align-items:center;justify-content:center;gap:7px;min-height:44px;padding:10px 12px;border:1px solid #cbdcf0;border-radius:999px;background:#fff;color:#005bdb;font-size:13px;font-weight:700;transition:background .2s,color .2s}
 .story-phone-controls .story-next{background:#005bdb;color:#fff;border-color:#005bdb}
 .story-phone-controls button:disabled{opacity:.4;cursor:default}
 .story-phone-controls button:enabled:hover{background:#e1edff;color:#005bdb}
 .story-phone-controls svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
 .story-phone-count{font-size:11px;color:#60758e;white-space:nowrap;font-variant-numeric:tabular-nums}
}
@media(max-width:360px){
 .story-compact .story-intro h2{font-size:26px}
 .story-compact .story-scene{grid-template-rows:245px 116px}
 .story-compact .story-mobile-copy h3,.story-compact .story-scene.is-current h3{font-size:22px}
 .story-phone-controls{gap:6px}
 .story-phone-controls button{font-size:12px;padding-inline:9px;gap:5px}
}
@media(max-width:760px) and (max-height:760px){
 .story-compact .story-frame{gap:14px;padding-block:24px}
 .story-compact .story-intro h2{font-size:26px}
 .story-compact .story-intro>p:not(.eyebrow){font-size:13px}
 .story-compact .story-scene{grid-template-rows:clamp(220px,30svh,245px) 100px;gap:12px}
 .story-compact .story-mobile-copy h3,.story-compact .story-scene.is-current h3{font-size:22px}
 .story-compact .story-mobile-copy p,.story-compact .story-scene.is-current p{font-size:14px}
}
@media(prefers-reduced-motion:reduce){
 .story-compact .story-scene,.story-compact.story-phone-ready .story-scene,.phone-route-travel,.story-phone-label,.story-compact .story-node{transition:none}
 .story-compact .story-scene{translate:none}
}