/* Shared Free BGRemover brand asset styling. Kept independent from page bundles
   so the mark remains consistent in authority pages and future landing pages. */
.brand {
  gap: 9px;
  color: var(--navy, var(--ink, #12213e));
  letter-spacing: 0;
}

.brand-mark {
  display: block;
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  overflow: visible;
}

.brand-mark__board { fill: #d9d5ff; }
.brand-mark__image { fill: #655cf6; }
.brand-mark__transparent { fill: #f5f6fa; }
.brand-mark__checker { fill: #d5dae6; }
.brand-mark__eraser { fill: #ff7968; }
.brand-mark__eraser-cap { fill: #ffd1c8; }
.brand-mark__spark { fill: #9be5e7; }

.brand-wordmark {
  color: currentColor;
  font-family: "Bricolage Grotesque", Arial, sans-serif;
  font-size: 22px;
  font-weight: 780;
  letter-spacing: -.065em;
  line-height: 1;
  white-space: nowrap;
}

.brand-wordmark b { color: #655cf6; font-weight: 800; }
.footer-brand .brand-wordmark { font-size: 19px; }

@media (max-width: 540px) {
  .brand-mark { width: 33px; height: 33px; }
  .brand-wordmark { font-size: 20px; }
}