/* Accessibility and interaction hygiene shared by every ClusterSignal page (2026-09-23).
   Deliberately additive: rules use :where() (zero specificity) wherever possible so a
   page's own CSS always wins. Nothing here changes colours, layout or copy. */

/* Skip link: first thing keyboard users reach, invisible until focused. */
.skip-link {
  position: absolute; left: 12px; top: -64px; z-index: 10000;
  padding: 10px 16px; border-radius: 8px;
  background: #00d4aa; color: #07090f;
  font: 600 14px/1.2 Inter, -apple-system, Arial, sans-serif; text-decoration: none;
}
.skip-link:focus { top: 12px; }
html:not([lang="en"]) .skip-en, html[lang="en"] .skip-fr { display: none; }
main:focus { outline: none; }

.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* One consistent, clearer focus ring. (Browsers already drew a thin 1px default ring; this replaces it with a 2px on-brand one.) */
:where(a, button, input, select, textarea, summary, [role="button"], [tabindex]):focus-visible {
  outline: 2px solid var(--teal, #00d4aa);
  outline-offset: 2px;
}

/* No 300 ms double-tap delay on touch. */
:where(a, button, input, select, label, summary, [role="button"]) { touch-action: manipulation; }

/* Pressed feedback on the main call-to-action buttons. */
:where(.hero-cta, .nav-cta, .nav-download, .btn-primary, .btn-plan, .modal-btn, .cta-bottom-secondary):active {
  transform: scale(.98);
}

/* Anchor jumps (#pricing ...) must not land underneath the sticky header. */
html { scroll-padding-top: 76px; }

/* No single-word last lines in headings. */
:where(h1, h2, h3) { text-wrap: balance; }

/* Numbers line up in columns and don't jitter as values change. */
:where(td, th, .stat-value, .ti, [class*="score"], [class*="return"], [class*="price"]) {
  font-variant-numeric: tabular-nums;
}

/* Scrolling inside a popup must not scroll the page behind it. */
.modal-bg, .detail-modal-bg, .modal, .detail-modal { overscroll-behavior: contain; }

/* Controls that were links without an address are real buttons now; keep the look. */
button.linklike {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: inherit; letter-spacing: inherit; text-decoration: inherit; cursor: pointer;
}

/* People who ask their system for less motion get it: no looping animation, no smooth-scroll,
   and the results ticker becomes a manually scrollable row instead of an endless marquee. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .ticker-track { animation: none !important; }
  .ticker-viewport { overflow-x: auto !important; }
}