.auth { padding: clamp(32px, 6vw, 80px) 0 var(--section); display: grid; justify-items: center; }
.auth__card { width: 100%; max-width: 440px; }
.auth__card h1 { font-size: var(--step-3); }
.auth__card form { margin-top: 24px; }
.auth__switch { margin: 22px 0 6px; font-weight: 500; }

/* Show password: a word button inside the field's right end */
.password { position: relative; }
.password .input { padding-right: 76px; }
.password .input::-ms-reveal { display: none; }
.password__toggle {
  position: absolute; top: 6px; right: 6px; bottom: 6px; width: 62px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 4px;
  background: transparent; color: var(--ink); font-weight: 600; font-size: 0.9375rem;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color 160ms ease, transform 160ms var(--ease-out);
}
.password__toggle:active { transform: scale(0.97); }
.password__toggle:focus-visible { outline-offset: -3px; }
@media (hover: hover) and (pointer: fine) { .password__toggle:hover { background: var(--paper); transition-duration: 70ms, 160ms; } }