/* Sign in, sign up, forgot and reset in the cream design (homepages v1 and v2). Loads after home-v1.css and forms-cream.css. */
body.auth-page { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; }
.auth-page .nav-cta { margin-left: auto; }
.auth { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 48px 20px 72px; }
.auth-card { width: min(500px, 100%); padding: 40px 40px 34px; border-radius: 28px; background: var(--white); border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(24, 33, 27, .35); }
/* Sized so the longest headline stays on one line in the card; a highlight split over two lines is hard to read. */
.auth h1 { font-size: clamp(26px, 7.2vw, 34px); line-height: 1.1; }
.auth-sub { margin: 14px 0 28px; font-size: 16.5px; color: var(--muted); }
.auth .btn-google { width: 100%; }
.auth-form { display: grid; gap: 18px; }
.auth .btn-dark { width: 100%; margin-top: 4px; }
.auth-alt { margin-top: 26px; text-align: center; font-size: 14.5px; color: var(--muted); }
.auth-alt a { color: var(--ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.auth-foot { display: flex; justify-content: center; gap: 24px; padding: 24px 20px; font-size: 13px; color: var(--muted); }
.auth-foot a:hover { color: var(--ink); }

@media (max-width: 640px) {
	.nav-signin { display: none; }
	.auth { padding: 28px 16px 56px; }
	.auth-card { padding: 30px 22px 26px; border-radius: 22px; }
}