.public-page .login-card {
    margin: 40px auto;
    width: 100%;
    max-width: 440px;
    padding: 36px;
    background: #fff;
    border: 1px solid #dce3dc;
    border-radius: 18px;
    box-shadow: 0 12px 36px #25362f0a;
}
.brand { color: var(--text-link); font-size: var(--text-small); font-weight: var(--weight-bold); text-decoration: none; }
h1 { margin: 28px 0 8px; }
.intro { margin: 0 0 24px; color: var(--text-secondary); }
.availability, .password-guidance { color: var(--text-secondary); font-size: var(--text-small); line-height: 1.5; }
.availability { text-align: center; }
button, input { width: 100%; min-height: 46px; border-radius: 8px; font: inherit; }
button { font-size: var(--text-control); padding: 12px; font-weight: var(--weight-semibold); }
button:disabled, fieldset:disabled button { cursor: not-allowed; }
.google-button { margin-top: 8px; background: #f5f6f4; border: 1px solid var(--control-border); color: var(--text-primary); }
.divider { display: flex; align-items: center; gap: 12px; margin: 24px 0; color: var(--text-secondary); font-size: var(--text-small); }
.divider::before, .divider::after { content: ""; height: 1px; flex: 1; background: #e2e7e1; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
label { display: block; margin-bottom: 8px; font-size: var(--text-control); font-weight: var(--weight-semibold); }
input { font-size: var(--text-body); padding: 12px; margin-bottom: 18px; border: 1px solid var(--control-border); background: #f8f9f7; color: var(--text-primary); }
input::placeholder { color: var(--text-secondary); opacity: 1; }
.primary-button { border: 0; background: #dde5dc; color: var(--text-primary); }
.invitation { margin: 24px 0 0; text-align: center; font-size: var(--text-small); line-height: 1.7; color: var(--text-secondary); }
.text-link { color: var(--text-link); font-weight: var(--weight-semibold); }
.recovery-card { text-align: center; }
.recovery-icon { display: grid; place-items: center; width: 60px; height: 60px; margin: 0 auto; border-radius: 16px; background: #edf2eb; color: var(--text-link); }
.recovery-card .intro { line-height: var(--leading-body); }
.recovery-action { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 12px 16px; border-radius: 8px; font-weight: var(--weight-semibold); text-decoration: none; }
.recovery-action:hover { background: #cfdccc; }
.recovery-signout { margin-top: 12px; }
.recovery-secondary { border: 1px solid var(--control-border); background: #fff; color: var(--text-link); cursor: pointer; }
.recovery-secondary:hover { background: #f3f5f1; }
.recovery-home { display: inline-block; margin-top: 24px; font-size: var(--text-small); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid #345744; outline-offset: 3px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
@media (max-width: 400px) { .login-card { padding: 24px; } }

@media (max-width: 480px) { .public-page .login-card { width: calc(100% - 32px); } }

/* A welcoming entry point, with shared recovery forms kept compact. */
.signin-shell { display: grid; grid-template-columns: 1fr 1fr; max-width: 1120px; padding: 0; margin: 48px auto; overflow: hidden; background: #fff; border: 1px solid #dce3dc; border-radius: 24px; box-shadow: 0 20px 70px #25362f0b; }
.signin-story { position: relative; min-height: 740px; overflow: hidden; background: #eee5d5; }
.studio-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.story-copy { position: relative; z-index: 1; padding: 42px; background: #f2ebdf; }
.auth-eyebrow { margin: 0 0 18px; font-size: var(--text-caption); font-weight: var(--weight-bold); letter-spacing: var(--tracking-label); color: #345744; }
.story-copy h2 { margin: 0; font-family: var(--font-display); font-size: clamp(38px, 4vw, 54px); font-weight: 400; line-height: 1.05; letter-spacing: -1.8px; color: #263d2f; }
.story-copy > p:last-child { font-size: var(--text-small); line-height: var(--leading-body); color: #304335; }
.story-caption { position: absolute; bottom: 24px; left: 32px; padding: 8px 12px; border-radius: 20px; background: #faf5e9ed; font-size: var(--text-caption); color: #304335; }
.signin-form { align-self: center; padding: 48px 56px; min-width: 0; }
.signin-form h1 { margin: 0 0 10px; }
.signin-form .intro { margin-bottom: 28px; font-size: var(--text-small); }
.signin-form .primary-button { background: #345744; color: #fff; cursor: pointer; box-shadow: 0 4px 10px #34574418; }
.signin-form .primary-button:hover { background: #264332; }
.signin-form .google-button { margin: 0; background: #fff; cursor: pointer; }
.signin-form .google-button:hover:not(:disabled) { background: #f3f5f1; }
.signin-form .google-button:disabled { color: #626b63; background: #f6f7f4; cursor: not-allowed; }
.signin-form input { background: #fcfcfa; }
.signin-form .invitation { border-top: 1px solid #e7ebe4; padding-top: 20px; }
@media (max-width: 1168px) { .signin-shell { width: calc(100% - 48px); } }
@media (max-width: 800px) { .signin-shell { grid-template-columns: .85fr 1fr; } .signin-form { padding: 36px 28px; } .story-copy { padding: 32px 24px; } }
@media (max-width: 620px) {
    .signin-shell { grid-template-columns: 1fr; width: calc(100% - 32px); margin: 24px auto; border-radius: 18px; }
    .signin-story { min-height: 220px; }
    .studio-art { object-position: center 56%; }
    .story-copy { padding: 26px; width: 100%; background: #f2ebdf; }
    .story-copy h2 { font-size: 34px; }
    .story-copy > p:last-child, .story-caption { display: none; }
    .story-copy .auth-eyebrow { max-width: 190px; line-height: 1.7; }
    .signin-form { padding: 32px 24px; }
}