/* Better Together Diabetes - shared hero slideshow CSS.
   Extracted verbatim from apps.html (bead claude-code-anazv, W3 item 7) so
   apps.html and index.html share one hero pager component. Pairs with
   /assets/hero.js (auto-rotate, dots, pause on hover/focus, reduced-motion
   static first slide) and markup: header[data-hero] > .hero-slides >
   figure[data-hero-slide] > img + figcaption.hero-cap, plus .hero-content
   and .hero-dots[data-hero-dots] > button.hero-dot[data-hero-dot]. */
.hero{ position:relative; overflow:hidden; background:#172236; min-height:clamp(420px,58vw,560px); }
.hero-slide{ position:absolute; inset:0; opacity:0; transition:opacity 1.1s ease; }
.hero-slide.is-active{ opacity:1; }
.hero-slide img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.hero-scrim{ position:absolute; inset:0; z-index:1; background:linear-gradient(115deg, rgba(23,34,54,0.94) 0%, rgba(23,34,54,0.82) 38%, rgba(23,34,54,0.58) 66%, rgba(23,34,54,0.4) 100%); }
.hero-cap{ position:absolute; left:32px; bottom:64px; z-index:2; max-width:34ch; font-family:'Montserrat',sans-serif; font-weight:600; font-size:14px; line-height:1.5; color:#fff; background:rgba(23,34,54,0.72); padding:8px 14px; border-radius:6px; text-shadow:0 1px 3px rgba(10,16,28,.85); }
.hero-content{ position:relative; z-index:3; max-width:1200px; margin:0 auto; padding:96px 32px 140px; }
.hero-dots{ position:absolute; right:32px; bottom:22px; z-index:4; display:flex; gap:9px; }
.hero-dot{ width:9px; height:9px; border-radius:50%; border:1.5px solid rgba(255,255,255,0.75); background:rgba(255,255,255,0.18); padding:0; cursor:pointer; }
.hero-dot.is-active{ background:#e8a840; border-color:#e8a840; }
@media (max-width:640px){
  .hero{ min-height:560px; }
  .hero-cap{ left:20px; right:20px; bottom:52px; max-width:none; }
  .hero-content{ padding:72px 20px 140px; }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide{ transition:none; }
}