/* One optical size for both artworks; CARE has additional width for its label.
   The measured artwork heights are 243 px (general) and 401 px (CARE).
   Normalize those, rather than the differently padded source image boxes. */
header { --brand-mark-height: 44px; }
body:has(#landing:not([hidden])) > header {
  --brand-mark-height: clamp(44px, calc(42px + .6vw), 52px);
}
header img.brand-logo-care { display: none; }
html.care-brand header img.brand-logo-general { display: none; }
html.care-brand header img.brand-logo-care { display: block; }

html header img.brand-logo-general,
html body:has(#landing:not([hidden])) > header .brand img.brand-logo-general {
  width: calc(var(--brand-mark-height) * 4.115226337) !important;
  height: calc(var(--brand-mark-height) * 1.12) !important;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  max-width: 100%;
}
html header img.brand-logo-care,
html body:has(#landing:not([hidden])) > header .brand img.brand-logo-care {
  width: calc(var(--brand-mark-height) * 5.416458853) !important;
  height: calc(var(--brand-mark-height) * 1.12) !important;
  aspect-ratio: auto;
  object-fit: cover;
  object-position: center;
  mix-blend-mode: multiply;
  max-width: 100%;
}
header .brand { max-width: 100%; }
html.care-brand .help-header a:has(.brand-logo-care) { max-width: 60%; }

/* A status badge in the existing discovery heading, with no extra click step. */
#landing .care-discovery h2 {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
#landing .care-discovery .care-new-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: 4px 9px;
  border-radius: 999px;
  background: #c5353f;
  color: #fff;
  font-size: .6875rem;
  font-weight: 750;
  line-height: 1;
  letter-spacing: .04em;
}