/* Icons are drawn paths, independent of the device's text/emoji fonts. */
.ui-arrow{display:inline-block;width:1.15em;height:1.15em;min-width:1.15em;vertical-align:-.18em;flex-shrink:0;pointer-events:none;overflow:visible}
.button .ui-arrow{width:22px;height:22px;min-width:22px}
.text-link .ui-arrow,.contact-links .ui-arrow{margin-left:5px}
.scene-open .ui-arrow,.screen-expand .ui-arrow{width:16px;height:16px;min-width:16px;margin-left:4px}
.scene-chrome .ui-arrow{width:15px;height:15px;min-width:15px}

/* The desktop collage becomes a normal document flow on phones and tablets. */
@media(max-width:850px){
 .product-story .story-intro{display:block;margin-bottom:30px}
 .product-story .story-intro h2{font-size:clamp(36px,7.4vw,58px);overflow-wrap:normal}
 .product-story .story-intro>p{margin-top:22px;max-width:520px}
 .product-story .chapter-nav{position:static;grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:14px}
 .product-story .chapter-nav a{gap:9px;padding:16px 10px;font-size:13px;min-width:0}
 .product-story .chapter-nav a:nth-child(3){border-left:0;border-top:1px solid var(--line)}
 .product-story .chapter-nav a:nth-child(4){border-top:1px solid var(--line)}
 .product-story .product-scene{grid-template-columns:48px minmax(0,1fr);gap:22px 16px;min-height:0;padding:36px 0 42px;scroll-margin-top:20px}
 .product-story .scene-rail{padding-top:0}
 .product-story .scene-number{font-size:45px;letter-spacing:-3px}
 .product-story .scene-label{writing-mode:vertical-rl;font-size:12px;letter-spacing:1px;margin:16px 0 0 12px}
 .product-story .scene-rail:after,.product-story .scene-progress{display:none}
 .product-story .scene-copy{padding-bottom:0;min-width:0}
 .product-story .scene-copy h3{font-size:clamp(26px,5.8vw,34px);margin-bottom:16px}
 .product-story .scene-copy>p{max-width:none;font-size:16px}
 .product-story .scene-stage{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr);gap:18px;position:relative;perspective:none;height:auto;min-height:0;width:100%;max-width:600px;margin:4px 0 0;isolation:auto;justify-self:center}
 .product-story .scene-stage:before,.product-story .stage-coordinate{display:none}
 .product-story .scene-stage .scene-window{position:relative;inset:auto;width:100%;min-width:0;max-width:none;height:auto;min-height:0;max-height:none;display:block;transform:none;translate:none;rotate:none;scale:none;animation:none;transition:border-color 180ms ease;will-change:auto;z-index:auto;box-shadow:0 10px 28px #0002;border-radius:10px}
 .product-story .scene-stage .scene-window:hover,.product-story .scene-stage .scene-window:focus-visible{transform:none;translate:none;scale:none;z-index:auto}
 .product-story .scene-stage .scene-chrome{position:static;inset:auto;display:flex;transform:none;white-space:normal;gap:10px;padding:12px;font-size:12px;line-height:1.4}
 .product-story .scene-chrome>span:nth-child(2){overflow:visible;text-overflow:clip;min-width:0;flex:1}
 .product-story .scene-chrome .chrome-dots{display:none}
 .product-story .scene-stage .scene-window picture{display:block;width:100%}
 .product-story .scene-stage .scene-window img{display:block;width:100%;height:auto;min-height:0;max-height:none;object-fit:contain;filter:none}
 .product-story .scene-stage .scene-open{position:static;inset:auto;display:flex;align-items:center;justify-content:flex-end;gap:4px;margin:0;padding:11px 13px;min-height:42px;transform:none;opacity:1;border:0;border-top:1px solid var(--line);border-radius:0;background:var(--panel);color:var(--ink);box-shadow:none;font-size:12px;line-height:1.5;white-space:normal;transition:none}
 .product-story .stage-footer{position:static;inset:auto;font-size:10px;line-height:1.5;letter-spacing:.7px;text-align:right;margin-top:-5px}
 /* Keep the separate hero demo's phase content from clipping on narrow screens. */
 .hero .demo-viewport{height:auto;min-height:410px;overflow:hidden}
 .hero .demo-panel-heading{flex-wrap:wrap;row-gap:8px}
 .hero .demo-steps{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:16px}
 .hero .demo-steps button{display:flex;align-items:center;gap:8px;min-height:36px;font-size:13px}
 .hero .demo-steps button span{display:inline;margin:0}
 .hero .demo-dashboard{max-height:none}
 .hero .demo-dashboard>span{position:static;display:flex;align-items:center;justify-content:center;gap:4px;inset:auto;transform:none;border-radius:0;border:0;padding:12px;white-space:normal;font-size:13px;box-shadow:none}
}