/* Load after the supplied roadmap style block. Content stays readable at zoom. */
html, body { height: auto; min-height: 100%; overflow: auto; }
.app { height: auto; min-height: 100dvh; grid-template-rows: auto 3px 1fr auto; }
.stage-wrap { overflow: visible; }
.track { display: block; height: auto; transform: none !important; transition: none; }
.slide { min-height: 65vh; height: auto; overflow: hidden; padding: 40px 0; }
.slide[hidden] { display: none; }
.inner { position: relative; left: auto; top: auto; transform: none !important; margin: auto; }
.ctrl { flex-wrap: wrap; }
.app .btn-solid { color: var(--ink); }
.rotation-toggle { min-height: 44px; padding: 10px 18px; border: 2px solid #C9C6F5; border-radius: 999px; background: transparent; color: white; font: 600 15px Barlow, sans-serif; cursor: pointer; }
.dots { gap: 0; flex-wrap: wrap; justify-content: center; }
.dots button, .dots button[aria-current="true"] { width: 32px; height: 44px; border-radius: 0; background: transparent; }
.dots button::before { inset: 16px 10px; background: #9994be; border-radius: 50%; }
.dots button[aria-current="true"]::before { background: #F06414; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
@media(max-width: 820px) { .slide { min-height: 0; padding: 28px 0; } .bar { flex-wrap: wrap; gap: 16px; } .ctrl { gap: 8px; } .chain { grid-template-columns: 1fr; } }
@media(prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }