:root {
  color-scheme: light;
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #111827;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: #f7f8fa; }
button, input { font: inherit; }

.login-page { min-height: 100vh; padding: 32px; display: grid; place-items: center; border-top: 5px solid #263d48; }
.login-card { width: min(430px, 100%); padding: 42px; background: #fff; border: 1px solid #e5e8ed; border-radius: 16px; box-shadow: 0 18px 60px rgba(20, 34, 53, .08); }
.brand { display: flex; flex-direction: column; line-height: 1; }
.wordmark { font-size: 24px; font-weight: 400; letter-spacing: .22em; white-space: nowrap; }
.product { margin-top: 9px; color: #168bb6; font-size: 10px; font-weight: 750; letter-spacing: .38em; }
.intro { margin: 48px 0 30px; }
.eyebrow { margin: 0 0 9px; color: #158bb8; font-size: 10px; font-weight: 750; letter-spacing: .11em; text-transform: uppercase; }
h1 { margin: 0 0 10px; font-size: 30px; letter-spacing: -.03em; }
.intro > p:last-child { margin: 0; color: #6f7786; font-size: 13px; line-height: 1.6; }
label { display: block; margin-bottom: 8px; color: #47505c; font-size: 11px; font-weight: 650; }
.password-field { position: relative; }
input { width: 100%; min-height: 48px; padding: 0 68px 0 14px; color: #111827; background: #fff; border: 1px solid #d7dbe1; border-radius: 9px; outline: none; }
input:focus { border-color: #55b3d3; box-shadow: 0 0 0 3px rgba(20, 150, 196, .1); }
.password-field button { position: absolute; top: 7px; right: 7px; height: 34px; padding: 0 9px; color: #5d6673; background: transparent; border: 0; border-radius: 7px; font-size: 10px; font-weight: 700; cursor: pointer; }
.password-field button:hover { background: #f2fbfe; color: #137fa8; }
.form-error { min-height: 20px; margin: 8px 0; color: #b83b45; font-size: 11px; }
.login-button { width: 100%; min-height: 48px; color: #fff; background: #101827; border: 0; border-radius: 9px; box-shadow: 0 4px 12px rgba(16, 24, 39, .16); font-size: 13px; font-weight: 650; cursor: pointer; }
.login-button:hover { background: #202b3c; }
.login-button:disabled { opacity: .65; cursor: wait; }

@media (max-width: 520px) {
  .login-page { padding: 18px; }
  .login-card { padding: 30px 24px; }
  .wordmark { font-size: 19px; }
  .intro { margin-top: 40px; }
}