:root {
  --login-on-secondary: #ffffff;
  --login-on-primary: #111827;
}

@media (min-width: 861px) {
  .auth-layout {
    grid-template-columns: minmax(300px, 0.76fr) minmax(420px, 1.24fr);
  }
}

.auth-brand-panel {
  color: var(--login-on-secondary);
}

.tenant-brand h2 {
  max-width: 14ch;
  margin: 12px 0 0;
  color: var(--login-on-secondary);
  font-size: clamp(28px, 3vw, 42px);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

.auth-heading h1 {
  margin: 9px 0 0;
  color: var(--login-text);
  font-size: clamp(32px, 4vw, 44px);
  line-height: 1.06;
  letter-spacing: -0.035em;
}

.tenant-logo-fallback {
  color: var(--login-on-primary);
}

.tenant-purpose {
  color: color-mix(in srgb, var(--login-on-secondary) 74%, transparent);
}

.tenant-kicker {
  color: color-mix(in srgb, var(--login-primary) 78%, var(--login-on-secondary));
}

@media (max-width: 860px) {
  .tenant-brand h2 {
    max-width: none;
    margin-top: 7px;
    font-size: clamp(28px, 7vw, 40px);
  }
}

@media (max-width: 560px) {
  .tenant-brand h2 {
    font-size: 25px;
  }

  .auth-heading h1 {
    font-size: 32px;
  }
}