/**
 * USA SuperTech — shared design tokens.
 * "Clean Enterprise SaaS": light-mode-first, high-legibility, form/dashboard-friendly.
 * Deliberately distinct from DoctorVol's dark-terminal palette — different brand,
 * different job (forms/billing/tickets, not a live trading terminal).
 */
:root {
  --ust-bg: #f7f8fa;
  --ust-surface: #ffffff;
  --ust-border: #e5e9f0;
  --ust-text: #0f2440;
  --ust-text-dim: #5a6b80;
  --ust-text-faint: #8a95a5;

  --ust-primary: #0f2440;   /* deep navy — headings, primary text */
  --ust-accent: #2563eb;    /* electric blue — CTAs, links */
  --ust-accent-teal: #0d9488;
  --ust-success: #0d9488;
  --ust-warning: #e0a850;
  --ust-danger: #dc2626;

  --ust-font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --ust-font-head: 'Manrope', 'Inter', system-ui, sans-serif;
}

/* Shared nav brand mark — logo + wordmark, injected by ust-vault.js on every page */
.ust-nav-brand { display: flex; align-items: center; gap: 8px; }
.ust-nav-logo { height: 28px; width: 22px; display: block; }

/* Nav overflow safety net — each page defines its own .ust-nav-inner/.ust-nav-links
   with a bare `display:flex; gap:22px` and no wrap, sized for desktop. On a narrow
   phone (~375px and under) the logo+wordmark+links+CTA button don't fit on one row
   and overflow horizontally. Shrink spacing/text and hide the wordmark's second
   word first; flex-wrap is the fallback safety net if that still isn't enough. */
@media (max-width: 480px) {
  .ust-nav-inner { padding: 12px 16px !important; }
  .ust-nav-brand span { display: none; }
  .ust-nav-links { gap: 10px !important; font-size: 13px !important; flex-wrap: wrap; justify-content: flex-end; row-gap: 6px; }
  .ust-nav-links a.ust-cta { padding: 7px 12px !important; }
}