.brand-lockup {
  --logo-size: 34px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #163d30;
  font-weight: 900;
  letter-spacing: -.5px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}

.brand-logo-crop {
  position: relative;
  display: inline-block;
  flex: 0 0 var(--logo-size);
  width: var(--logo-size);
  height: var(--logo-size);
  overflow: hidden;
  border-radius: 50%;
  background: #fff;
}

.brand-logo-crop img {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 142%;
  height: 142%;
  max-width: none;
  transform: translate(-50%, -50%);
}

.brand-on-dark { color: #fff; }
.brand-label-accent { color: #1e6a4d; }
.brand-on-dark .brand-label { color: #fff; }
.brand-on-dark .brand-label-accent { color: #dff39f; }
.auth-brand { --logo-size: 76px; display: flex; width: max-content; margin: 0 auto 20px; flex-direction: column; gap: 10px; font-size: 22px; }
.topnav .topnav-brand { --logo-size: 30px; padding: 3px 9px 3px 4px; }
.share-brand { --logo-size: 32px; font-size: 17px; }

@media (max-width: 600px) {
  .brand-lockup { gap: 6px; }
  .topnav .topnav-brand { padding-right: 7px; }
}

@media (max-width: 800px) {
  .app-brand .brand-label { display: none; }
}