/* ================================================================
   SHARED BASE — loaded last on every public page.
   Accessibility essentials that must behave the same everywhere.
   ================================================================ */

/* ── Keyboard focus ──────────────────────────────────────────────
   Two-tone ring: the white gap shows on dark sections, the blue
   ring on light ones. Text inputs keep their own focus styling. */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
[role="button"]:focus-visible,
[tabindex]:not([tabindex="-1"]):focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="file"]:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
  outline: 3px solid #1E56C7;
  outline-offset: 2px;
  box-shadow: 0 0 0 2px #fff;
}

/* Text for screen readers only */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Skip link: hidden until a keyboard user tabs to it */
.skip-link {
  position: absolute;
  left: 16px;
  top: -100px;
  z-index: 10000;
  padding: 10px 16px;
  border-radius: 8px;
  background: #0B1736;
  color: #fff;
  font-weight: 600;
  text-decoration: none;
}

.skip-link:focus {
  top: 12px;
}

/* ── Reduced motion ──────────────────────────────────────────────
   Decorative loops stop; state feedback (loading spinners, typing
   dots) keeps running. Marquee strips become swipe-scrollable so
   no logo or review is lost when they stop. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .marquee-track,
  .partners-track,
  .testi-track,
  .tw-cursor,
  #typing-text::after,
  .mframe.large,
  .chip,
  .landing-logo-card,
  .landing-logo-ring,
  .hero-scroll-hint,
  .page-hero::before,
  .chatbot-toggle,
  .chatbot-toggle::before,
  .svg-bubble,
  .svg-tail,
  .svg-eye-left,
  .svg-eye-right,
  .svg-mouth1,
  .svg-mouth2,
  .svg-mouth3,
  .svg-antenna-dot,
  .chatbot-status::before {
    animation: none !important;
  }

  .tw-cursor,
  #typing-text::after {
    opacity: 1;
  }

  :has(> .marquee-track),
  :has(> .partners-track),
  :has(> .testi-track) {
    overflow-x: auto;
    scrollbar-width: thin;
  }
}

/* ── Phones: the floating share/chat buttons own the bottom-right
   corner, so the last footer line keeps clear of that column. */
@media (max-width: 600px) {
  footer .copyright,
  footer .footer-bottom,
  footer.page-footer {
    text-align: left;
    padding-right: 84px;
    padding-bottom: 40px;
  }
}