html, body { max-width: 100%; overflow-x: hidden; }
@media (width < 600px) {
  body.page { align-content: start; }
}

.sign-in-card { display: grid; min-inline-size: 0; gap: var(--space-step-24); }
.sign-in-head { display: grid; min-inline-size: 0; justify-items: start; }
.sign-in-lockup { margin-block-end: var(--space-step-24); font-size: var(--space-step-24); }
#agent-name { overflow-wrap: anywhere; }
#sign-in-subtitle { margin-block-start: var(--space-step-4); }

.sign-in-column, #sign-in, #sign-in form { display: grid; min-inline-size: 0; gap: var(--space-step-16); }
.sign-in-column { overflow-wrap: anywhere; }
#sign-in form:has(#phone, #email):not(:has(.sign-in-actions))::after { content: ''; block-size: calc(var(--type-button-size) * var(--type-button-line) + var(--button-padding-y) * 2); }
#clerk-captcha { display: grid; justify-items: center; }
#clerk-captcha:empty { display: none; }
#clerk-captcha iframe { max-inline-size: 100%; }

.sign-in-field { display: grid; min-inline-size: 0; }
.sign-in-code { text-align: center; }

.sign-in-intro { display: grid; gap: var(--space-step-4); }
.sign-in-resend, .sign-in-actions { display: grid; justify-items: center; gap: var(--space-step-4); }
.sign-in-resend .btn { max-inline-size: 100%; block-size: auto; white-space: normal; overflow-wrap: anywhere; text-align: center; }

.sign-in-notice > p { flex: 1; min-inline-size: 0; }
