/* Sign-in: one centred column. The customer's mobile-number form is the default; the other sign-ins are a quiet row of chips below. */
body.page-login .login { max-width: 400px; margin: 0 auto; }
body.page-login .login .page-head { display: block; text-align: center; padding-top: 72px; margin-bottom: 32px; }
body.page-login .login .page-head__desc { margin-left: auto; margin-right: auto; }
body.page-login .login-form .field + .field { margin-top: 18px; }
body.page-login .login-form > .alert { margin-top: 16px; }
body.page-login .login-form .input, body.page-login .login-form .select { height: 50px; padding: 0 16px; font-size: 17px; border-radius: 12px; }
body.page-login .login-form .field > label { font-size: 14px; }

/* Actions: a full-width primary pill, then a quiet secondary link or button under it. */
body.page-login .login-actions { margin-top: 24px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
body.page-login .login-actions .btn--primary { width: 100%; height: 50px; font-size: 16px; font-weight: 600; }
body.page-login .login-actions .btn--ghost { min-height: 44px; }
body.page-login .login-link { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; }

/* Sign-up: the "what we carry" text sits in a quiet grey panel above the tick. */
body.page-login .login-terms { font-size: 13px; line-height: 1.5; color: var(--text-2); margin: 0 0 12px; padding: 14px 16px; background: var(--surface); border-radius: var(--radius); }
body.page-login .checkbox { min-height: 44px; align-items: center; }

/* Other sign-ins: a hairline, a small title and one row of chips. */
body.page-login .login-other { margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--border); text-align: center; }
body.page-login .login-other__title { font-size: 14px; font-weight: 500; color: var(--text-2); letter-spacing: 0; margin-bottom: 14px; }
body.page-login .login-roles { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
body.page-login .login-roles .chip { height: 44px; padding: 0 14px; font-size: 14px; border-color: var(--border); background: transparent; cursor: pointer; transition: background-color .2s ease, border-color .2s ease, color .2s ease, transform .25s var(--ease-out); }
body.page-login .login-roles .chip .icon { width: 16px; height: 16px; color: var(--text-3); transition: color .2s ease; }
body.page-login .login-roles .chip:active { transform: scale(.97); }
body.page-login .login-roles .chip:focus-visible { box-shadow: var(--focus); outline: none; }
@media (hover: hover) {
  body.page-login .login-roles .chip:hover { background: var(--surface); border-color: var(--border-strong); color: var(--text); }
  body.page-login .login-roles .chip:hover .icon { color: var(--brand); }
}
@media (max-width: 720px) {
  body.page-login main .login .page-head { padding-top: 40px; margin-bottom: 28px; }
  body.page-login .login-other { margin-top: 40px; }
}
@media (max-width: 480px) { body.page-login .login-roles .chip .icon { display: none; } }   /* four chips fit one row on a phone */