/*
 * Sign in, sign up and password reset: the app's own look, in two halves: the yellow pitch and the form.
 */

.lp-auth { min-height: 100vh; }
.auth-grid { display: grid; grid-template-columns: minmax(0, 1fr); min-height: 100vh; }
@media (min-width: 56rem) { .auth-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }

.auth-pitch { background: var(--tag); color: var(--ink); padding: clamp(1.5rem, 4vw, 3.5rem); display: flex; flex-direction: column; justify-content: space-between; gap: 2rem; }
.auth-pitch h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 3rem); line-height: 1.02; font-weight: 700; letter-spacing: -0.035em; text-wrap: balance; max-width: 20ch; }
.auth-pitch .lp-facts { margin-top: 1.5rem; }
.auth-pitch .lp-facts li::before { background: var(--ink); }
@media (max-width: 55.99rem) { .auth-pitch > div, .auth-pitch > p { display: none; } .auth-pitch { padding-block: 1rem; } }

.auth-main { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 1rem; padding: clamp(1.5rem, 4vw, 3.5rem); }
.auth-main > section, .auth-main > .auth-flash { width: min(100%, 26rem); }
.auth-main h1 { font-size: clamp(1.8rem, 1.4rem + 1.4vw, 2.4rem); font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; }
.auth-main h1 + p { margin-top: 0.6rem; }
.auth-main .stack { margin-top: 1.25rem; }
.auth-main .btn-primary { width: 100%; min-height: 3rem; justify-content: center; }
.auth-alt { margin-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; font-size: 0.95rem; }
.auth-flash { margin: 0; padding: 0.7rem 0.9rem; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line-2); font-weight: 500; }
.auth-flash.is-alert { border-color: var(--bad); color: var(--bad); }
.auth-trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.auth-pitch .lp-mark i { color: var(--ink); }