.microsoft-signin {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 11px;
  border: 1px solid #ccd0d8;
  border-radius: 7px;
  background: #fff;
  color: #17191f;
  text-decoration: none;
  font-weight: 650;
}

.microsoft-primary {
  padding: 13px 16px;
  border-color: #17191f;
  background: #17191f;
  color: #fff;
}

.microsoft-primary:hover {
  border-color: #000;
  background: #000;
}

.microsoft-signin:hover {
  border-color: #8f96a3;
  background: #f4f5f7;
}

.microsoft-mark {
  display: grid;
  grid-template-columns: repeat(2, 7px);
  gap: 2px;
}

.microsoft-mark i { width: 7px; height: 7px; background: #f25022; }
.microsoft-mark i:nth-child(2) { background: #7fba00; }
.microsoft-mark i:nth-child(3) { background: #00a4ef; }
.microsoft-mark i:nth-child(4) { background: #ffb900; }

.login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #7c8290;
  font-size: 12px;
  text-align: center;
}

.login-divider::before,
.login-divider::after {
  content: "";
  height: 1px;
  flex: 1;
  background: #dfe2e7;
}

.new-asn-logo {
  width: 280px !important;
  padding: 10px 16px;
  object-fit: contain;
}

.new-brand-lockup {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 22px;
}

.new-brand-lockup > img { width: min(320px, 48%); height: auto; }
.new-brand-lockup > div { display: grid; gap: 7px; padding-left: 22px; border-left: 1px solid #565b66; }
.new-brand-lockup strong { color: #fff; font-size: clamp(20px, 2.3vw, 32px); white-space: nowrap; }
.new-brand-lockup small { color: #e51b2b; letter-spacing: .16em; font-weight: 700; }

.legacy-login { border-top: 1px solid #dfe2e7; padding-top: 4px; }
.legacy-login summary { padding: 9px 4px; color: #596171; text-align: center; cursor: pointer; font-weight: 650; list-style: none; }
.legacy-login summary::-webkit-details-marker { display: none; }
.legacy-login summary::after { content: "  ›"; color: #e51b2b; }
.legacy-login[open] summary::after { content: "  ⌄"; }
.legacy-fields { display: grid; gap: 13px; padding-top: 8px; }

@media (max-width: 760px) {
  .new-asn-logo { width: 240px !important; justify-self: center; }
}