@import '/design-tokens.css';

html {
  -webkit-text-size-adjust: 100%;
}
body {
  min-width: 0;
  color: var(--ds-text);
  background: var(--ds-canvas);
  font-family: var(--ds-font);
}
.skip-link {
  position: fixed;
  z-index: 10000;
  top: 12px;
  left: 12px;
  transform: translateY(calc(-100% - 16px));
  padding: 12px 16px;
  border: 2px solid var(--ds-accent);
  border-radius: 12px;
  color: var(--ds-text);
  background: var(--ds-surface);
  font-weight: 700;
}
.skip-link:focus {
  transform: translateY(0);
}
button,
input,
select,
textarea {
  font-family: inherit;
}
:is(button, a, input, select, textarea, summary):focus-visible {
  outline: 3px solid var(--ds-accent);
  outline-offset: 3px;
}
.legal-card,
.beta-card {
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-card);
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.legal-card :is(h1, h2, h3),
.beta-intro h1,
.beta-step h2 {
  color: var(--ds-text);
  letter-spacing: -0.035em;
  line-height: 1.15;
}
.legal-card h1,
.beta-intro h1 {
  font-size: var(--ds-title);
}
.legal-card h2,
.beta-step h2 {
  font-size: var(--ds-section);
}
.legal-lead,
.legal-meta,
.legal-site-footer {
  color: var(--ds-muted);
}
.legal-eyebrow,
.legal-card a,
.legal-nav a,
.legal-footer-links a {
  color: var(--ds-accent);
}
.legal-owner-input {
  color: var(--ds-warning);
  background: var(--ds-warning-tint);
}
.legal-owner-input strong {
  color: inherit;
}
.legal-site-header {
  padding-top: max(20px, env(safe-area-inset-top));
}
.legal-site-footer {
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.beta-shell {
  --beta-canvas: var(--ds-canvas);
  --beta-frost: var(--ds-text);
  --beta-mist: var(--ds-muted);
  --beta-edge: var(--ds-line);
  --beta-panel: var(--ds-surface);
  --beta-input: var(--ds-surface);
  color: var(--ds-text);
  background: var(--ds-canvas);
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(24px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
.beta-shell::before,
.beta-shell::after,
.beta-kicker::after {
  display: none;
}
.beta-brand img,
.beta-brand:hover img,
.beta-brand:focus-visible img {
  filter: none;
  opacity: 1;
}
.beta-kicker,
.beta-summary strong,
.beta-consent a {
  color: var(--ds-accent);
}
.beta-helper {
  font-family: inherit;
}
.beta-field :is(input, select, textarea) {
  color: var(--ds-text);
  background: var(--ds-surface);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-control);
  font-size: var(--ds-body);
}
.beta-field :is(input, textarea)::placeholder {
  color: var(--ds-muted);
}
.beta-option,
.beta-return {
  color: var(--ds-text);
  background: var(--ds-surface);
  border-color: var(--ds-line);
  border-radius: var(--ds-radius-control);
  min-height: var(--ds-touch);
}
.beta-option:has(input:checked),
.beta-option:hover,
.beta-summary {
  color: var(--ds-text);
  background: var(--ds-tint);
  border-color: var(--ds-accent);
}
.beta-button {
  min-height: 48px;
  border-radius: var(--ds-radius-control);
  font-weight: 650;
}
.beta-button-primary,
.beta-button-primary:hover:not(:disabled) {
  color: var(--ds-on-accent);
  background: var(--ds-accent);
  border-color: var(--ds-accent);
}
.beta-button-secondary,
.beta-button-secondary:hover:not(:disabled) {
  color: var(--ds-accent);
  background: var(--ds-tint);
  border-color: var(--ds-line);
}
.beta-progress span {
  background: var(--ds-line);
}
.beta-progress span[data-active='true'] {
  background: var(--ds-accent);
  box-shadow: none;
}
.beta-error {
  color: var(--ds-danger);
  background: var(--ds-danger-tint);
  border-color: var(--ds-danger);
}

/* Public introduction uses the same materials; illustrations retain their colors. */
:root {
  --authkit-font-label: var(--ds-font);
  --authkit-font-display: var(--ds-font);
  --authkit-font-ui: var(--ds-font);
  --cycling-ink: var(--ds-text);
  --cycling-muted: var(--ds-muted);
  --cycling-paper: var(--ds-canvas);
  --cycling-white: var(--ds-surface);
  --cycling-line: var(--ds-line);
  --cycling-active: var(--ds-accent);
}
.cycling-header,
.cycling-hero,
.cycling-section,
.cycling-footer {
  color: var(--ds-text);
  background: var(--ds-canvas);
}
.cycling-hero::before,
.cycling-hero::after,
.cycling-hero-art::before {
  display: none;
}
.cycling-hero h1,
.cycling-section-heading h2,
.cycling-feature-copy h3 {
  color: var(--ds-text);
}
.cycling-hero h1 em {
  color: var(--ds-accent);
  background: none;
  -webkit-text-fill-color: currentColor;
}
.cycling-hero .cycling-lead,
.cycling-hero .cycling-facts dd {
  color: var(--ds-muted);
}
.cycling-hero .cycling-kicker,
.cycling-hero .cycling-text-link,
.cycling-hero .cycling-facts dt {
  color: var(--ds-accent);
}
.cycling-header .cycling-brand img,
.cycling-header .cycling-brand:hover img {
  filter: none;
}
.cycling-button-primary,
.cycling-hero .cycling-button-primary,
.cycling-header .cycling-header-cta {
  color: var(--ds-on-accent);
  background: var(--ds-accent);
  border: 1px solid var(--ds-accent);
  border-radius: var(--ds-radius-control);
  box-shadow: none;
  min-height: 48px;
}
.cycling-header .cycling-header-cta {
  font-family: var(--ds-font);
}
.cycling-hero {
  --authkit-font-label: var(--ds-font);
  --authkit-font-display: var(--ds-font);
  --authkit-font-ui: var(--ds-font);
}
.cycling-privacy,
.cycling-final-cta {
  color: var(--ds-text);
  background: var(--ds-surface);
  border: 1px solid var(--ds-line);
  border-radius: var(--ds-radius-card);
  box-shadow: none;
}
.cycling-privacy h2,
.cycling-final-cta h2,
.cycling-privacy-list strong {
  color: var(--ds-text);
}
.cycling-privacy > div > p:last-child,
.cycling-privacy-list small,
.cycling-final-cta > p:not(.cycling-kicker) {
  color: var(--ds-muted);
}
.cycling-final-cta .cycling-kicker,
.cycling-kicker-light {
  color: var(--ds-accent);
}
.cycling-final-cta .cycling-button-primary {
  color: var(--ds-on-accent);
  background: var(--ds-accent);
}
.cycling-header .cycling-header-cta:hover {
  color: var(--ds-on-accent);
  background: var(--ds-accent);
}
/* Demo rows must reflow when visitors enlarge text from the hero. */
.cycling-group-header,
.cycling-group-code {
  flex-wrap: wrap;
}
.cycling-radar-demo {
  overflow: hidden;
}
.cycling-section-heading h2,
.cycling-final-cta h2,
.cycling-telemetry-metrics {
  overflow-wrap: anywhere;
}
.cycling-telemetry-metrics > div {
  min-width: 0;
}
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}