/* Shared by the React app and the generated legal pages. Fonts are local. */
.brand-mark { display: inline-flex; flex-direction: column; align-items: center; max-width: 100%; vertical-align: middle; }
.brand-wordmark {
  display: inline-block;
  white-space: nowrap;
  padding: .08em .16em .12em;
  font-family: 'Outfit', sans-serif;
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  transform: skewX(-10deg);
  color: #eaf2fa;
}
.brand-wordmark-letter {
  background: linear-gradient(180deg, #f5f8fc 25%, #b6c5d4);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.brand-wordmark-accent { font-size: inherit; line-height: inherit; color: #24dfff; }
.brand-mark-large { display: flex; padding: 8px 0 14px; }
.brand-mark-large .brand-wordmark { font-size: clamp(1.65rem, 7vw, 2.7rem); }
.brand-tagline { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: .68rem; font-weight: 700; letter-spacing: .32em; color: #eaf2fa; }
.brand-tagline::before, .brand-tagline::after { content: ''; width: 28px; height: 2px; background: #24dfff; }
@media (forced-colors: active) {
  .brand-wordmark-letter { background: none; -webkit-text-fill-color: currentColor; }
  .brand-wordmark-accent { color: Highlight; }
}