:root { --mammy-navy:#101b46; --mammy-orange:#ff6814; }
.mammy-login-page { margin:0; min-height:100vh; background:#f4f6fc; color:#101b46; font-family:system-ui,-apple-system,"Segoe UI",Tahoma,sans-serif; }
.mammy-login-shell { min-height:100vh; display:grid; grid-template-columns:1fr 1fr; }
.mammy-welcome { position:relative; overflow:hidden; padding:clamp(28px,5vw,80px); display:flex; flex-direction:column; justify-content:space-between; gap:30px; background:radial-gradient(ellipse at 50% 70%,#2b4085 0%,#101b46 68%); color:white; }
.mammy-welcome::before { content:""; position:absolute; inset:0; background-image:radial-gradient(#ffffff18 1px,transparent 1px); background-size:24px 24px; pointer-events:none; }
.mammy-welcome > * { position:relative; }
.mammy-eyebrow { font-size:.8rem; letter-spacing:.14em; font-weight:700; color:#ffbb89; }
.mammy-speech { background:white; color:#101b46; border-radius:24px; padding:28px 32px; max-width:470px; box-shadow:0 12px 40px #0002; }
.mammy-speech h1 { margin:0 0 12px; font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:1.3; font-weight:750; }
.mammy-speech p { font-size:1.1rem; line-height:1.7; margin:0; color:#475574; }
.mammy-speech strong { color:#b63c00; }
.mammy-hero { width:clamp(220px,28vw,390px); max-width:100%; height:auto; align-self:center; filter:drop-shadow(0 16px 24px #0003); animation:mammy-greet 2.4s ease-in-out 2; }
.mammy-welcome-note { font-size:.95rem; color:#d7def6; margin:0; }
/* Cards on the left; the mascot fills the rest of the panel and runs into its right padding. */
.mammy-stage { --mammy-pad:clamp(28px,5vw,80px); display:grid; grid-template-columns:minmax(150px,190px) 1fr; align-items:end; gap:clamp(12px,1.6vw,24px); }
.mammy-stage-solo { grid-template-columns:1fr; justify-items:center; }
/* 90% of the free width so the mascot does not outweigh the sign-in form; a soft backlight lifts the navy fur off the navy panel and a floor shadow grounds it. */
.mammy-stage:not(.mammy-stage-solo) .mammy-hero { width:calc((100% + var(--mammy-pad) * .8) * .9); max-width:none; justify-self:end; margin-inline-end:calc(var(--mammy-pad) * -.8);
  background:radial-gradient(ellipse 46% 7% at 50% 96%,#03081f80,transparent 70%),radial-gradient(circle at 50% 52%,#6f8fe63d 0%,#4a6bc922 38%,transparent 66%);
  filter:drop-shadow(0 10px 16px #0002); }
.mammy-stats { display:grid; gap:12px; margin:0 0 12px; }
.mammy-stat { display:flex; align-items:baseline; justify-content:space-between; gap:12px; background:#ffffff14; border:1px solid #ffffff26; border-radius:14px; padding:14px 16px; backdrop-filter:blur(2px); }
.mammy-stat dt { font-size:.95rem; font-weight:500; color:#d7def6; margin:0; }
.mammy-stat dd { margin:0; font-size:1.2rem; font-weight:750; color:#ff9a4d; text-align:end; white-space:nowrap; }
.mammy-stat dd small { font-size:.85rem; font-weight:600; margin-inline-start:4px; }
@media(min-width:768px) and (max-width:1199px) {
 .mammy-stage { grid-template-columns:132px 1fr; }
 .mammy-stage:not(.mammy-stage-solo) .mammy-hero { width:calc(100% + var(--mammy-pad) * .8); justify-self:end; margin-inline-end:calc(var(--mammy-pad) * -.8); }
 .mammy-stat { flex-direction:column; align-items:flex-start; gap:2px; padding:10px 14px; }
 .mammy-stat dd { text-align:start; }
}
.mammy-login-panel { display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px clamp(24px,5vw,80px); }
.mammy-login-content { width:100%; max-width:420px; }
.mammy-login-logo { display:block; width:290px; max-width:85%; height:auto; margin:0 auto 38px; }
.mammy-login-content h2 { font-size:1.65rem; margin-bottom:10px; font-weight:750; }
.mammy-login-content .mammy-subtitle { color:#52617a; margin-bottom:28px; line-height:1.6; }
.mammy-login-content .form-control { min-height:52px; border:1px solid #b8c4dd; border-radius:12px; }
.mammy-login-content .form-control:focus { border-color:#243e87; box-shadow:0 0 0 3px #243e8725; }
.mammy-login-content .form-label { font-weight:600; }
.mammy-login-content .mammy-submit { min-height:54px; border:0; border-radius:12px; background:#bf4000; color:white; font-size:1.1rem; font-weight:700; width:100%; margin-top:12px; }
.mammy-login-content .mammy-submit:hover { background:#a53600; }
.mammy-login-help { color:#52617a; text-align:center; margin:24px 0 14px; font-size:.9rem; }
.mammy-motion-button { display:block; margin:12px auto 0; border:1px solid #bbc5d9; border-radius:8px; background:transparent; padding:8px 12px; font:inherit; font-size:.8rem; color:#475574; cursor:pointer; min-height:36px; }
.mammy-motion-button:focus-visible,.mammy-submit:focus-visible { outline:3px solid #4665bb; outline-offset:3px; }
.mammy-login-content .validation-summary-valid { display:none; }
.mammy-message { position:relative; min-height:64px; padding-inline-start:76px !important; }
.mammy-message > .mammy-state-icon { position:absolute; inset-inline-start:12px; top:8px; width:48px; height:48px; object-fit:contain; pointer-events:none; }
.mammy-empty { text-align:start; padding:22px; background:#f4f6fc; border-radius:12px; color:#475574; margin-top:16px; }
.mammy-mobile-hello { width:64px; height:64px; object-fit:contain; display:block; margin:8px auto; }
.mammy-motion-off .mammy-hero { animation:none; }
@keyframes mammy-greet { 0%,100% { transform:translateY(0) rotate(0); } 50% { transform:translateY(-7px) rotate(-2deg); } }
@media(max-width:767px) {
 .mammy-login-shell { display:block; }
 .mammy-welcome { padding:22px 24px; display:grid; grid-template-columns:1fr 84px; align-items:center; gap:12px; }
 .mammy-eyebrow,.mammy-welcome-note,.mammy-stats { display:none; }
 .mammy-stage { display:contents; }
 .mammy-speech { padding:0; box-shadow:none; background:transparent; color:white; }
 .mammy-speech h1 { font-size:1.3rem; margin-bottom:4px; }
 .mammy-speech p { font-size:.88rem; color:#d7def6; }
 .mammy-speech strong { color:#ffb784; }
 .mammy-hero { width:84px; grid-column:2; grid-row:1; animation:none; }
 .mammy-login-panel { padding:28px 24px; }
 .mammy-login-logo { width:205px; margin-bottom:22px; }
 .mammy-message { min-height:52px; padding-inline-start:60px !important; }
 .mammy-message > .mammy-state-icon { width:36px; height:36px; }
}
@media(prefers-reduced-motion:reduce) { .mammy-hero { animation:none !important; } }
@media print { .mammy-state-icon,.mammy-motion-button { display:none !important; } .mammy-message { padding-inline-start:12px !important; } }