/* Full-width access page, with a product-led brand panel. */
.login-page { min-height: 100vh; background: white; color: #111; }
.login-container { min-height: 100svh; display: grid; grid-template-columns: 1.25fr 1fr; border-top: 4px solid var(--red); }
.login-showcase { min-width: 0; padding: clamp(24px, 4vw, 76px); background: #f7f7f5; display: flex; flex-direction: column; position: relative; overflow: hidden; }
.login-wordmark { font-size: 28px; font-weight: 900; letter-spacing: -1.5px; }
.login-wordmark span { margin-left: 6px; font-size: 13px; letter-spacing: 2px; font-weight: 700; }
.login-wordmark b { color: var(--red); }
.login-story { margin-top: clamp(40px, 7vh, 90px); position: relative; z-index: 1; animation: rise .6s both; }
.login-story .eyebrow { font-size: 11px; color: #333; letter-spacing: 1.5px; }
.login-story .eyebrow::before { content: ''; display: inline-block; background: var(--yellow); width: 7px; height: 7px; border-radius: 50%; margin-right: 10px; }
.login-story h1 { font-size: clamp(40px, 4.5vw, 86px); font-weight: 900; letter-spacing: -.055em; line-height: 1.02; margin: 25px 0; }
.login-story h1 span { color: var(--red); }
.login-description { max-width: 440px; color: #333; font-size: 16px; line-height: 1.8; font-weight: 500; }
.login-product { position: relative; display: grid; place-items: center; margin-top: auto; padding-top: 24px; isolation: isolate; }
.login-watermark { position: absolute; font-size: clamp(120px, 18vw, 320px); font-weight: 900; color: #e5e5e1; letter-spacing: -.08em; z-index: -1; transform: rotate(-10deg); }
.login-product img { width: 100%; height: clamp(220px, 30vh, 350px); object-fit: contain; mix-blend-mode: multiply; transform: rotate(-10deg); transition: transform .6s; }
.login-product:hover img { transform: rotate(-5deg) scale(1.03); }
.login-product p { width: 100%; display: flex; justify-content: space-between; gap: 20px; color: #333; font-weight: 700; font-size: 10px; letter-spacing: 1.2px; margin: 28px 0 0; }
.login-access { min-width: 0; display: grid; place-items: center; padding: clamp(24px, 5vw, 90px); }
.login-card { width: 100%; max-width: 480px; animation: rise .7s both; }
.brand-symbol { font-size: 42px; font-weight: 900; letter-spacing: -4px; margin-bottom: 42px; }
.brand-symbol span, .login-card h2 span { color: var(--red); }
.login-card .eyebrow { color: #333; font-size: 11px; }
.login-card h2 { font-size: clamp(40px, 4vw, 68px); line-height: 1.02; letter-spacing: -.055em; margin: 20px 0; font-weight: 900; }
.login-subtitle { color: #333; font-size: 16px; line-height: 1.7; margin: 22px 0 38px; }
.login-card label { font-size: 12px; font-weight: 800; letter-spacing: 1px; }
.login-card input { width: 100%; display: block; margin: 12px 0 8px; min-height: 56px; padding: 16px; background: #fafafa; color: #111; border: 1px solid #aaa; border-radius: 4px; font-size: 16px; font-weight: 600; transition: border-color .2s, background .2s; }
.login-card input::placeholder { color: #555; opacity: 1; }
.login-card input:focus { background: white; border-color: #111; }
.login-error { min-height: 24px; color: #b01824; font-size: 14px; font-weight: 700; }
.login-card .btn-primary { min-height: 58px; transition: background .25s, transform .25s; }
.login-card .btn-primary:hover { background: var(--red); transform: translateY(-2px); }
.login-card .btn-primary span { color: var(--yellow); font-size: 20px; }
.login-footer { margin-top: 38px; border-top: 1px solid #ddd; padding-top: 22px; color: #333; font-size: 11px; letter-spacing: 1px; font-weight: 700; }
@media(max-width: 1000px) and (min-width: 701px) {
 .login-container { grid-template-columns: 1fr 1fr; }
 .login-showcase, .login-access { padding: 30px; }
 .login-story h1 { font-size: 44px; }
 .login-product p { flex-direction: column; gap: 4px; }
}
@media(max-width: 700px) {
 .login-container { grid-template-columns: minmax(0, 1fr); }
 .login-showcase { padding: 24px; }
 .login-story { margin-top: 24px; }
 .login-story h1 { font-size: clamp(34px, 7.5vw, 50px); margin: 18px 0; }
 .login-story .eyebrow { font-size: 10px; letter-spacing: .8px; }
 .login-description { font-size: 14px; margin-bottom: 0; }
 .login-product { display: none; }
 .login-access { padding: 32px 24px 40px; }
 .brand-symbol { display: none; }
 .login-card h2 { font-size: 40px; }
 .login-subtitle { font-size: 15px; margin-bottom: 28px; }
 .login-footer { font-size: 10px; }
}