/* Browser-ready foundation. Content is visible before any enhancement runs. */
:root {
    --motion-duration: 180ms;
    --focus-color: #b5f1d6;
    --header-clearance: 112px;
}

html { scroll-padding-top: var(--header-clearance); }
main:focus { outline: none; }
:where(a, button, input, select, textarea):focus-visible {
    outline: 2px solid var(--focus-color);
    outline-offset: 5px;
}
.skip-link {
    position: fixed;
    top: 12px;
    left: 16px;
    z-index: 100;
    padding: 14px 20px;
    color: #08131f;
    background: #b5f1d6;
    transform: translateY(-160%);
}
.skip-link:focus { transform: none; }
.lang-btn { min-width: 44px; min-height: 44px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.integration-logo { aspect-ratio: auto; }
.metric { font-variant-numeric: tabular-nums; animation: none; }
.metrics, .metrics2 { text-shadow: none; }
.signal-dot, .live-badge span:first-child { animation: none; }
.feed-status { margin: 0 0 20px; color: var(--muted); font-size: .78rem; line-height: 1.6; }
.feed-status[data-state="error"], .feed-status[data-state="stale"] { color: #ffc1a5; }
.feed-status[data-state="ready"] { color: #a7d5c4; }

@media (max-width: 720px) {
    :root { --header-clearance: 130px; }
    .metrics, .metrics2 { flex-direction: row; flex-wrap: wrap; gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}