/* One compact Hero Pro monogram across public, access, customer and staff surfaces. */
:is(.phone-brand > span, .real-brand > span, .console-brand > b, .customer-brand > b) {
  display: inline-block !important;
  flex: 0 0 auto;
  background: url('/assets/brand/hero-pro-mark.svg?v=hero23') center / contain no-repeat !important;
  color: transparent !important;
  box-shadow: none !important;
  overflow: hidden;
  text-indent: -9999px;
}

.phone-brand > span { width: 43px; height: 43px; border-radius: 12px; }
.real-brand > span { width: 39px; height: 39px; border-radius: 11px; }
.console-brand > b,
.customer-brand > b { width: 39px !important; height: 39px !important; border-radius: 11px !important; }

.phone-brand strong,
.real-brand strong,
.console-brand > div,
.customer-brand > div { text-rendering: geometricPrecision; }

@media (max-width: 720px) {
  .phone-brand > span { width: 38px; height: 38px; }
  .real-brand > span { width: 36px; height: 36px; }
}