:root {
  --zl-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --zl-bg: #09111f;
  --zl-surface: #111c2e;
  --zl-surface-raised: #172338;
  --zl-text: #f4f7fb;
  --zl-muted: #a6b3c6;
  --zl-line: #26364e;
  --zl-brand: #67cbbc;
  --zl-action: #276fe8;
  --zl-focus: #91b5ff;
  --zl-danger: #e06b65;
  --zl-radius-control: 12px;
  --zl-radius-card: 20px;
  --zl-radius-feature: 26px;
  --zl-space-1: 4px;
  --zl-space-2: 8px;
  --zl-space-3: 12px;
  --zl-space-4: 16px;
  --zl-space-5: 20px;
  --zl-space-6: 24px;
  --zl-space-8: 32px;
  --zl-space-10: 40px;
  --zl-shadow-raised: 0 24px 64px rgba(0, 0, 0, .28);
  --zl-content: 1160px;
  --zl-type-display: clamp(44px, 6vw, 76px);
  --zl-type-title: clamp(34px, 4vw, 50px);
  --zl-type-heading: 20px;
  --zl-type-body: 16px;
  --zl-type-small: 13px;
  --zl-leading-display: 1.03;
  --zl-leading-body: 1.6;
  --zl-tracking-display: -.05em;
  --zl-duration-fast: 140ms;
  --zl-duration-base: 200ms;
  --zl-ease: cubic-bezier(.2, .8, .2, 1);
}

html { font-family: var(--zl-font); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
a, button, input, select, textarea { font: inherit; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--zl-focus) !important;
  outline-offset: 3px !important;
}
button, [role="button"], a { -webkit-tap-highlight-color: transparent; }
button, [role="button"], a[href] {
  transition: color var(--zl-duration-fast) var(--zl-ease),
    background-color var(--zl-duration-fast) var(--zl-ease),
    border-color var(--zl-duration-fast) var(--zl-ease),
    opacity var(--zl-duration-fast) var(--zl-ease),
    transform var(--zl-duration-fast) var(--zl-ease);
}
button:disabled, [aria-disabled="true"] { cursor: not-allowed; opacity: .52; }
button[aria-busy="true"] { cursor: progress; }
@media (hover: hover) {
  button:not(:disabled):active, [role="button"]:not([aria-disabled="true"]):active { transform: translateY(1px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

@media (forced-colors: active) {
  a, button, input, select, textarea { forced-color-adjust: auto; }
}

@media (max-width: 620px) {
  :root {
    --zl-type-display: clamp(38px, 12vw, 54px);
    --zl-type-title: clamp(30px, 9vw, 40px);
  }
}