/* ActivityLane marketing pages: accessibility layer (round 12 Oct). Loaded after the page styles. */

/* Skip link (WCAG 2.4.1): first stop on every marketing page, visible only on focus. */
.skip-link{position:absolute;left:12px;top:-60px;z-index:10000;padding:10px 16px;border-radius:10px;background:#16306e;color:#fff;font-weight:800;font-size:14px;text-decoration:none;transition:top .12s;font-family:var(--ff,system-ui,sans-serif)}
.skip-link:focus{top:12px;outline:3px solid #fff;box-shadow:0 0 0 6px #16306e}
main#main:focus{outline:none}

/* Pause control for the moving decoration and auto-advancing carousels (WCAG 2.2.2): a small floating button in the bottom corner, so it never
   pushes the page down. It stays the second Tab stop (right after the skip link) and a11y-motion.js drives it. */
.aos-motion-bar{position:fixed;inset-inline-start:12px;bottom:12px;z-index:9999;background:transparent;padding:0}
.aos-motion{min-height:32px;padding:0 12px;border:2px solid #fff;border-radius:999px;background:#16306e;color:#fff;font:700 12.5px/1 var(--ff,system-ui,sans-serif);cursor:pointer;box-shadow:0 2px 10px rgba(0,0,0,.28)}
.aos-motion:hover{color:#ffd23f}
.aos-motion:focus-visible{outline:3px solid #ffd23f;outline-offset:2px}
html.aos-paused *,html.aos-paused *::before,html.aos-paused *::after{animation-play-state:paused !important}

/* Carousel dots keep their look but sit in a 24px target (WCAG 2.5.8) and show against the page (1.4.11). */
.wrap .hs-dots,#runday .rd-dots{gap:0 !important}
/* On phones the previous/next arrows sat on top of the dot row; put them at the two ends of that row instead. */
@media(max-width:860px){#runday .rd-prev{left:0 !important}#runday .rd-next{right:0 !important}}
.wrap .hs-dots button,#runday .rd-dots button{box-sizing:border-box;position:relative;width:24px !important;min-width:24px;height:24px !important;min-height:24px;padding:0;border-radius:0 !important;background:transparent !important}
.wrap .hs-dots button.on,#runday .rd-dots button.on{width:40px !important}
.wrap .hs-dots button::before,#runday .rd-dots button::before{content:"";position:absolute;left:50%;top:50%;width:9px;height:9px;border-radius:50%;transform:translate(-50%,-50%);background:#7e7a96;transition:width .2s,background .2s}
#runday .rd-dots button.on::before{width:26px;border-radius:999px;background:var(--brand)}
.wrap .hs-dots button::before{background:rgba(255,255,255,.62)}
.wrap .hs-dots button.on::before{width:26px;border-radius:999px;background:var(--gold)}