/* Forward-loop logo: use logo.svg on light surfaces and logo-on-dark.svg on dark.
   Keep both colors intact and preserve the supplied 90:50 aspect ratio. */
.brand,
.invite-brand,
.logo-text,
.app-veil-brand,
.auth-panel .auth-brand .logo-text,
.activation-header .logo-text {
  font-family: "Red Hat Display", sans-serif;
  font-weight: 900;
  letter-spacing: -0.02em;
}

.brand,
.invite-brand {
  gap: 0.4em;
}

.brand-mark,
.site-header.is-compact .brand-mark,
.invite-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 2em;
  height: auto;
  background: transparent;
  border-radius: 0;
  box-shadow: none;
}

.brand-mark img,
.site-header.is-compact .brand-mark img,
.invite-brand-mark img {
  display: block;
  width: 100%;
  height: auto;
}

.logo-mark,
.logo-mark--lg,
.auth-panel .auth-brand .logo-mark--lg,
.activation-header .logo-mark--lg {
  width: 42px;
  height: auto;
}

.logo-mark img,
.logo-mark--lg img,
.auth-panel .auth-brand .logo-mark--lg img,
.activation-header .logo-mark--lg img {
  width: 100%;
  height: auto;
}

.auth-brand,
.activation-header .auth-brand {
  gap: 8px;
}

.auth-panel .auth-brand .logo-text,
.activation-header .logo-text {
  color: #072b2e;
  font-size: 22px;
}

.app-veil-logo {
  width: 90px;
  height: 50px;
}

.app-veil-logo img {
  width: 100%;
  height: auto;
}