:root {
  --easycompare-logo-image: url('/assets/easycompare_logo_apr_19_2026.png');
  --easycompare-logo-ratio: 3.433447098976109;
}

.ec-brand-logo {
  /* Bumped from 32px → 44px so the wordmark stays legible even at the
     default size. Individual placements (landing nav, app header,
     password lock screen) can still override `--brand-logo-display-height`
     to go bigger, but they can no longer go meaningfully smaller — the
     `min-height` floor below clamps any accidentally-tiny override at a
     readable size on desktop. */
  --brand-logo-display-height: 44px;
  --brand-logo-min-height: 36px;
  display: block;
  flex: 0 0 auto;
  height: var(--brand-logo-display-height);
  min-height: var(--brand-logo-min-height);
  width: calc(var(--brand-logo-display-height) * var(--easycompare-logo-ratio));
  min-width: calc(var(--brand-logo-min-height) * var(--easycompare-logo-ratio));
  max-width: 100%;
  background-image: var(--easycompare-logo-image);
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
}