/* Use the supplied outlined wordmarks unchanged; keep agency branding separate. */
.brandmark { min-width: 0; max-width: 100%; flex-wrap: wrap; }
.product-brand { display: inline-flex; max-width: 100%; padding: 8px 14px; }
.product-wordmark { display: block; width: clamp(112px, 12vw, 150px); height: auto; }
.product-wordmark--dark { display: none; }
:is(.topbar, .pub-head, .club-hero, .family-hero) .product-wordmark--light { display: none; }
:is(.topbar, .pub-head, .club-hero, .family-hero) .product-wordmark--dark { display: block; }
.brand-agency { display: inline-flex; align-items: center; gap: 8px; min-width: 0; max-width: 100%; }
.brand-agency-name { font: 500 13px/1.4 var(--body); overflow-wrap: anywhere; }
.brand-agency .brand-logo { max-width: 80px; object-fit: contain; }
.demo-family-brand { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.demo-family-brand-logo { display: block; width: 118px; height: auto; padding-block: 6px; }
@media (max-width: 640px) {
  .brandmark { gap: 4px 8px; }
  .product-brand { padding: 8px 12px; }
}
@media print {
  .product-wordmark--light { display: block !important; }
  .product-wordmark--dark { display: none !important; }
  .record-page .product-brand { padding: 0; }
  .record-page .product-wordmark { width: 112px; }
}