/* Monarch brand mark and the DATA DIALER title, shared by every page. */
/* ---------- Brand: the Monarch mark replaces the signal box ---------- */
.brand--monarch { display: inline-flex; align-items: center; gap: .75rem; color: var(--ink); text-decoration: none; }
.brand.brand--monarch img, .footer-brand .brand--monarch img { width: auto; height: 2.6rem; filter: none; }
/* Title in the logo's own language: solid word + outlined word, with the butterfly's blue as a glow. */
.brand-name { display: inline-flex; gap: .35rem; font-size: 1.3rem; font-weight: 800; letter-spacing: .06em; line-height: 1; text-transform: uppercase; white-space: nowrap; }
.brand-name b { font-weight: 800; color: var(--ink); text-shadow: 0 0 14px rgba(79, 179, 234, .55); }
.brand-name i { font-style: normal; color: var(--white); -webkit-text-stroke: 1.3px var(--ink); paint-order: stroke fill; text-shadow: 0 0 12px rgba(79, 179, 234, .75), 0 0 2px rgba(79, 179, 234, .9); }
.footer-brand .brand-name b { color: var(--white); text-shadow: 0 0 16px rgba(79, 179, 234, .8); }
.footer-brand .brand-name i { color: #080e19; -webkit-text-stroke: 1.3px var(--white); text-shadow: 0 0 14px rgba(79, 179, 234, .9); }
.footer-brand .brand--monarch { color: var(--white); }
.footer-brand .brand--monarch img { height: 3rem; }

@media (max-width: 780px) {
  .brand.brand--monarch img { height: 2.1rem; }
  .brand-name { font-size: 1.1rem; }
}