/* Shared logo for the public site, account screens and app sidebar. */
.sm-brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-family: "Bricolage Grotesque", "Inter", system-ui, sans-serif;
  font-weight: 800;
  font-size: 24px;
  line-height: 1.25;
  letter-spacing: -.03em;
  white-space: nowrap;
  /* App logos follow the active theme; fixed dark surfaces can override it. */
  color: var(--sm-brand-color, var(--text, var(--bs-body-color, #0b0b12))) !important;
}
.sm-mark {
  display: block;
  width: var(--sm-mark-size, 56px);
  height: var(--sm-mark-size, 56px);
  flex: none;
  box-sizing: border-box;
  object-fit: contain;
  object-position: center;
  background: transparent;
  border-radius: 22%;
}

/* Reuse the approved artwork as a free-standing mark on any surface. */
@supports (mask-mode: luminance) {
  .sm-mark {
    mask-image: url("../img/salesmaxxer-logo-128.cd0260f8f1c9.webp");
    mask-mode: luminance;
    mask-size: contain;
    mask-position: center;
    mask-repeat: no-repeat;
    border-radius: 0;
    filter: var(--sm-mark-filter, brightness(0));
  }
}
.sm-dark .sm-brand,
.sm-header .sm-brand,
#sidebar .sm-brand,
#header .admin-brand,
[data-bs-theme="dark"] .sm-brand {
  --sm-mark-filter: none;
}

#header .admin-brand { --sm-brand-color: var(--header-color, #fff); }