.welcome-page {
  background: #eff6f8;
  min-height: 100vh;
}

.welcome-page::before {
  background: linear-gradient(145deg, #006784, #00a3cb);
  content: '';
  height: 42vh;
  left: 0;
  position: fixed;
  right: 0;
  top: 0;
}

.welcome-shell {
  margin: 0 auto;
  max-width: 690px;
  padding: 40px 20px 25px;
  position: relative;
}

.welcome-brand {
  align-items: center;
  display: flex;
  gap: 18px;
  margin-bottom: 48px;
}

.welcome-brand img {
  background: white;
  border-radius: 9px;
  height: 70px;
  object-fit: contain;
  padding: 7px 11px;
  width: 138px;
}

.welcome-brand span {
  color: white;
  font-family: Nunito, Arial, sans-serif;
  font-size: .9rem;
  font-weight: 900;
}

.welcome-card {
  background: white;
  border: 1px solid #dce9ed;
  border-radius: 18px;
  box-shadow: 0 25px 55px rgba(5, 69, 91, .15);
  overflow: hidden;
  padding: 58px 60px 50px;
  position: relative;
}

.welcome-accent {
  background: linear-gradient(90deg, #d25a64 0 19%, #00a3cb 19% 100%);
  height: 5px;
  left: 0;
  position: absolute;
  right: 0;
  top: 0;
}

.welcome-kicker {
  color: #008bb0;
  font-family: Nunito, Arial, sans-serif;
  font-size: .75rem;
  font-weight: 900;
  letter-spacing: .15em;
  margin-bottom: 13px;
}

.welcome-card h1 {
  color: #004e65;
  font-size: clamp(2.15rem, 5vw, 3rem);
  font-weight: 900;
  letter-spacing: -.035em;
  line-height: 1.12;
  margin-bottom: 17px;
}

.welcome-card h1 em {
  color: #008cb0;
  font-style: normal;
}

.welcome-description {
  color: #637e87;
  font-size: .93rem;
  line-height: 1.65;
  margin-bottom: 31px;
  max-width: 470px;
}

.welcome-login {
  align-items: center;
  background: #006784;
  border-radius: 9px;
  color: white;
  display: inline-flex;
  font-family: Nunito, Arial, sans-serif;
  font-size: .95rem;
  font-weight: 900;
  gap: 14px;
  min-height: 49px;
  padding: 0 18px;
  text-decoration: none;
}

.welcome-login:hover { background: #004e65; }
.welcome-login > span:last-child { font-size: 1.2rem; margin-left: 4px; }
.microsoft-mark { display: grid; gap: 2px; grid-template-columns: repeat(2, 7px); }
.microsoft-mark i { background: white; display: block; height: 7px; width: 7px; }
.welcome-hint { color: #78909a; font-size: .77rem; line-height: 1.55; margin: 25px 0 0; }
.welcome-hint strong { color: #376c7a; font-family: 'Open Sans', Arial, sans-serif; }
.welcome-footer { color: #829ca5; font-size: .7rem; margin: 25px 0 0; text-align: center; }

@media (max-width: 600px) {
  .welcome-shell { padding: 24px 15px; }
  .welcome-brand { gap: 12px; margin-bottom: 32px; }
  .welcome-brand img { height: 58px; width: 114px; }
  .welcome-brand span { font-size: .74rem; }
  .welcome-card { padding: 42px 24px 35px; }
  .welcome-card h1 { font-size: 2.1rem; }
  .welcome-description { font-size: .86rem; }
  .welcome-login { font-size: .81rem; gap: 9px; padding: 0 13px; }
}