/* Peloton accessibility foundation v1.
   Scope: keyboard focus, skip navigation, reduced motion, and AA contrast repairs. */

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 10000;
  transform: translateY(-180%);
  padding: 12px 16px;
  border: 2px solid #ffffff;
  border-radius: 4px;
  background: #073e40;
  color: #ffffff;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 0 0 3px #073e40;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
}

:where(a, button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #073e40;
}

:where(input, select, textarea):focus-visible {
  border-color: #073e40;
}

#main-content {
  scroll-margin-top: 8rem;
}

/* Shared accent labels were visually consistent but too light on pale surfaces.
   This preserves the palette while moving the text token into AA contrast range. */
:where(
  .eyebrow,
  .proof-label,
  .step-number,
  .badge,
  .section-title,
  article > span,
  .contact-method > span,
  .sw-related-grid a > span,
  .sw-at-glance span,
  .sprint-fit-list strong,
  li > strong
) {
  color: #245153 !important;
}

/* Interior page heroes use the approved dark teal surface. */
:where(
  .page-hero-content,
  .page-hero
) .eyebrow {
  color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}