.login-page {
    min-height: calc(100vh - 84px);
    background: var(--background);
}

.login-layout {
    min-height: calc(100vh - 84px);
    display: grid;
    grid-template-columns: minmax(420px, 1.05fr) minmax(420px, .95fr);
}

.login-visual {
    position: relative;
    min-height: 680px;
    overflow: hidden;
    border-radius: 0 120px 0 0;
}

.login-visual::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 45%, rgba(31, 16, 22, .72));
}

.login-visual > video,
.login-visual-photo {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 48% center;
}

.login-visual-photo {
    position: absolute;
    inset: 0;
}

.login-visual-overlay {
    position: absolute;
    z-index: 2;
    left: clamp(32px, 6vw, 90px);
    right: 60px;
    bottom: 55px;
    max-width: 510px;
    color: var(--white);
}

.login-visual-overlay span {
    color: var(--accent);
    font-size: 24px;
}

.login-visual-overlay p {
    margin: 10px 0 0;
    font: 36px/1.08 var(--serif);
}

.login-content {
    display: grid;
    place-items: center;
    padding: 64px clamp(32px, 7vw, 110px);
}

.login-layout:has(#login-video) .login-content,
.login-layout:has(.login-visual-photo) .login-content {
    align-items: start;
    padding-block: clamp(48px, 8vh, 92px);
}

.login-card {
    width: min(100%, 460px);
}

.login-kicker {
    margin: 0 0 10px;
    color: var(--primary);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 1.4px;
    text-transform: uppercase;
}

.login-card h1 {
    margin: 0;
    font: 54px/1 var(--serif);
}

.login-intro {
    margin: 17px 0 34px;
    color: var(--muted);
    line-height: 1.65;
}

.form-alert {
    margin-bottom: 22px;
    padding: 13px 15px;
    border-left: 4px solid var(--primary-dark);
    border-radius: 8px;
    color: #711f34;
    background: #f7e7eb;
    font-size: 14px;
}

.login-form {
    display: grid;
    gap: 22px;
}

.form-group {
    display: grid;
    gap: 8px;
}

.form-group label {
    font-size: 14px;
    font-weight: 700;
}

.label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
}

.future-link {
    color: var(--primary-dark);
    font-size: 13px;
}

.form-group input,
.form-group select {
    width: 100%;
    height: 54px;
    padding: 0 17px;
    border: 1px solid #d9ced1;
    border-radius: 14px;
    outline: none;
    color: var(--dark);
    background: var(--white);
    font: 15px var(--sans);
    transition: border-color .2s, box-shadow .2s;
}

.form-group select { appearance: auto; }
.password-wrap { position: relative; }
.password-wrap input { padding-right: 52px; }
.password-toggle { position: absolute; top: 50%; right: 8px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; transform: translateY(-50%); }
.password-toggle:hover { color: var(--primary-dark); background: #f8f1f2; }
.password-toggle svg { width: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.password-toggle.is-visible svg { color: var(--primary); }
.password-toggle .eye-slash { display: block; }
.password-toggle.is-visible .eye-slash { display: none; }
.google-button { width: 100%; min-height: 52px; display: flex; align-items: center; justify-content: center; gap: 12px; border: 1px solid #d9ced1; border-radius: 14px; color: var(--dark); background: white; cursor: pointer; font-weight: 700; }
.google-button:hover { border-color: var(--primary); background: #fdfafa; }
.google-button span { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: white; background: #4285f4; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 19px 0; color: var(--muted); font-size: 11px; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e5dadd; }

.form-group input:focus,
.form-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(167, 85, 101, .13);
}

.login-submit {
    width: 100%;
    border: 0;
    cursor: pointer;
    font: 700 15px var(--sans);
}

.signup-prompt {
    margin: 26px 0 0;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

.signup-prompt span,
.signup-prompt a {
    color: var(--primary-dark);
    font-weight: 700;
}

.signup-prompt a:hover {
    text-decoration: underline;
}

.field-errors,
.errorlist {
    margin: 0;
    padding: 0;
    color: #8f3448;
    font-size: 13px;
    list-style: none;
}

.password-help {
    margin: -2px 0 0;
    color: var(--muted);
    font-size: 12px;
    line-height: 1.45;
}

.signup-content {
    align-items: center;
    padding: 64px clamp(32px, 7vw, 110px);
}

.signup-content .login-intro {
    margin-bottom: 24px;
}

.signup-form {
    gap: 22px;
}

.signup-row { display: grid; grid-template-columns: 1fr; align-items: start; gap: 22px; }
.signup-row .form-group { min-width: 0; }
.signup-layout{align-items:stretch}
.signup-layout .login-visual{position:relative;top:auto;height:auto;min-height:610px;background:#e9ded7}
.signup-layout .login-visual > video,
.signup-layout .signup-visual-photo{object-fit:cover;object-position:center;background:#e9ded7}
.signup-content .login-card{width:min(100%,460px)}
.signup-content .login-card h1{font-size:54px}
.signup-content .form-group{gap:8px}
.signup-content .form-group input,.signup-content .form-group select{height:54px}
.signup-content .auth-divider{margin:19px 0}
.signup-content .signup-prompt{margin-top:26px}
.signup-content .age-notice{margin-top:15px}
.signup-password-row+.password-help{margin-top:-2px}
.age-notice { margin: 15px 0 0; color: var(--muted); text-align: center; font-size: 11px; }
.age-notice a { color: var(--primary); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.signup-birth-date { max-width: 100%; }
.signup-content .form-group > small { color: var(--muted); font-size: 12px; line-height: 1.4; }

@media (max-width: 900px), (max-width: 1024px) and (orientation: portrait) {
    .login-layout {
        grid-template-columns: 1fr;
    }

    .login-visual {
        min-height: 330px;
        border-radius: 0 0 70px 0;
    }
    .login-visual-overlay {
        left: 32px;
        right: 32px;
        bottom: 32px;
    }

    .login-visual-overlay p {
        max-width: 520px;
        font-size: 30px;
    }

    .login-content {
        padding: 52px 24px 70px;
    }
}

/* One mobile layout for both authentication forms. Grid children must be
   allowed to shrink below their intrinsic content width (including date inputs). */
@media (max-width: 768px), (max-width: 960px) and (pointer: coarse) and (orientation: landscape), (max-width: 1024px) and (orientation: portrait) {
    .login-page,
    .login-layout {
        min-height: calc(100dvh - 70px - env(safe-area-inset-top));
    }
    .login-layout {
        grid-template-columns: minmax(0, 1fr);
        align-content: start;
    }
    .login-content,
    .login-card,
    .login-form,
    .signup-row,
    .form-group,
    .password-wrap {
        min-width: 0;
        max-width: 100%;
    }
    .login-page .login-layout .login-content {
        align-items: start;
        padding: clamp(24px, 5vw, 32px) max(20px, env(safe-area-inset-right))
                 calc(32px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
    }
    .login-card,
    .signup-content .login-card {
        width: 100%;
        max-width: 460px;
    }
    .login-visual,
    .signup-layout .login-visual {
        height: clamp(120px, 32vw, 160px);
        min-height: 0;
        border-radius: 0 0 32px 0;
    }
    .signup-layout .signup-visual-photo { object-position: center top; }
    .login-visual-overlay { left: 24px; right: 24px; bottom: 16px; }
    .login-visual-overlay span { display: none; }
    .login-visual-overlay p { margin: 0; max-width: 440px; font-size: 20px; line-height: 1.15; }
    .login-card h1,
    .signup-content .login-card h1 {
        font-size: clamp(30px, 8vw, 36px);
        line-height: 1.08;
        text-wrap: balance;
        margin-bottom: 20px;
    }
    .login-kicker { margin-bottom: 8px; font-size: 11px; letter-spacing: 1px; }
    .login-intro,
    .signup-content .login-intro,
    .login-card > .muted { margin: 12px 0 20px; font-size: 14px; line-height: 1.5; }
    .login-form,
    .signup-form,
    .signup-row { gap: 16px; }
    .form-group,
    .signup-content .form-group { gap: 6px; }
    .form-group label { font-size: 13px; line-height: 1.4; }
    .label-row { flex-wrap: wrap; gap: 4px 12px; }
    .future-link { font-size: 12px; }
    .login-page .form-group input,
    .login-page .form-group select,
    .login-page .form-group textarea {
        box-sizing: border-box;
        min-width: 0;
        width: 100%;
        max-width: 100%;
        font-size: max(16px, 1rem);
        scroll-margin-block: 24px;
    }
    .login-page .form-group input,
    .login-page .form-group select { height: 48px; padding-inline: 14px; }
    .login-page .password-wrap input { padding-right: 52px; }
    .password-toggle { width: 44px; height: 44px; right: 4px; }
    .signup-birth-date input[type="date"] { -webkit-appearance: none; appearance: none; }
    .login-submit,
    .google-button { min-height: 48px; padding: 10px 16px; font-size: 14px; line-height: 1.4; }
    .google-button span { flex: 0 0 24px; }
    .auth-divider,
    .signup-content .auth-divider { margin: 16px 0; }
    .signup-prompt,
    .signup-content .signup-prompt { margin-top: 20px; font-size: 13px; line-height: 1.5; }
    .form-alert { margin-bottom: 16px; font-size: 13px; }
}
.social-error-page{min-height:calc(100vh - 84px);display:grid;place-items:center;padding:48px 20px;background:linear-gradient(135deg,#faf8f5 68%,#f2e5e6 68%)}
.social-error-card{width:min(100%,560px);padding:clamp(30px,5vw,52px);border:1px solid #e4d7da;border-radius:28px;text-align:center;background:#fff;box-shadow:0 24px 70px rgba(31,16,22,.1)}
.social-error-card h1{margin:4px 0 18px;font:clamp(42px,6vw,62px)/.98 var(--serif);color:var(--dark)}
.social-error-card>p:not(.auth-kicker){margin:0 auto 28px;max-width:460px;color:var(--muted);line-height:1.65}
.social-error-card .button{display:flex;justify-content:center;width:100%;margin-bottom:17px}
.social-error-home{color:var(--primary-dark);font-size:14px;font-weight:700}

.registration-gift-card { margin: 0 0 22px; padding: clamp(22px, 4vw, 30px); border: 1px solid #eadfe1; border-radius: 22px; background: var(--rose-tint); text-align: left; }
.registration-gift-eyebrow { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--primary-dark); font-size: 11px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.registration-gift-eyebrow img { width: 18px; height: 18px; }
.registration-gift-card h2 { margin: 0 0 10px; font: 24px/1.2 var(--serif); color: var(--dark); }
.registration-gift-card > p:not(.registration-gift-eyebrow) { margin: 0 0 20px; max-width: none; color: var(--muted); font-size: 14px; line-height: 1.55; }
.registration-gift-skip { display: inline-flex; align-items: center; gap: 6px; color: var(--primary-dark); font-size: 14px; font-weight: 700; }
.signup-resume-link { display: inline-flex; align-items: center; min-height: 44px; color: #6E2637; font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.signup-resume-link:focus-visible { outline: 2px solid #6E2637; outline-offset: 3px; }

/* Keep the actual server password requirements beside the signup field. */
#signup-password-help { margin: 6px 0 0; font-size: 12px; line-height: 1.5; }
.password-help ul { margin: 0; padding-left: 18px; }
.password-help li + li { margin-top: 3px; }