/* Login: white brand side (matches the logo's own background) + gradient panel built from the logo palette. */
:root {
    --mv-navy: #052250; --mv-navy-2: #0a3577; --mv-blue: #0a6fe0; --mv-sky: #00b8f0; --mv-teal: #0d9a90; --mv-green: #3fbf55;
}
.lp { min-height: 100vh; background: #fff; }
.lp-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); min-height: 100vh; }

/* Brand side */
.lp-brand { position: relative; background: #fff; overflow: hidden; display: flex; align-items: center; }
.lp-streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-brand-inner { position: relative; width: 100%; max-width: 44rem; margin: 0 auto; padding: 3rem 3rem 3.5rem; }
.lp-logo { width: min(26rem, 80%); height: auto; display: block; }
.lp-lead { font-size: 1.0625rem; line-height: 1.55; color: #3d5370; max-width: 32rem; margin: 1.5rem 0 0; }
.lp-route { width: 100%; max-width: 36rem; height: auto; margin-top: .5rem; }
.lp-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.25rem; max-width: 36rem; }
.lp-feature { display: flex; align-items: center; gap: .625rem; background: #fff; border-radius: .75rem; padding: .625rem .75rem;
    box-shadow: 0 0 0 1px #e3ebf5, 0 .25rem .75rem rgba(5,34,80,.06); font-size: .8125rem; font-weight: 600; color: var(--mv-navy); line-height: 1.2; }
.lp-feature-icon { width: 2.125rem; height: 2.125rem; flex: none; border-radius: .625rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; font-size: 1rem; }
.lp-c0 { background: linear-gradient(135deg, #0a84ff, #0a4fb0); }
.lp-c1 { background: linear-gradient(135deg, #00b8f0, #0a6fe0); }
.lp-c2 { background: linear-gradient(135deg, #0aa6c8, #0d7f9a); }
.lp-c3 { background: linear-gradient(135deg, #12b39a, #0d8a80); }
.lp-c4 { background: linear-gradient(135deg, #3fbf55, #0d9a90); }
.lp-c5 { background: linear-gradient(135deg, #0a3577, #052250); }

/* Sign-in panel */
.lp-panel { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 3rem 2rem;
    background: linear-gradient(155deg, var(--mv-navy) 0%, var(--mv-navy-2) 30%, var(--mv-blue) 62%, var(--mv-teal) 100%); }
.lp-ribbon { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-panel-inner { position: relative; width: 100%; max-width: 25rem; }
.lp-card { border-radius: 1.25rem !important; padding: 2rem; box-shadow: 0 1.25rem 3rem rgba(2,16,40,.35) !important; }
.lp-card-mark { width: 3rem; height: auto; }
.lp-card h1 { color: var(--mv-navy); font-size: 1.375rem; }
.lp-submit { --bs-btn-bg: var(--mv-blue); --bs-btn-border-color: transparent; --bs-btn-hover-border-color: transparent; --bs-btn-active-border-color: transparent;
    background-image: linear-gradient(90deg, var(--mv-blue), #0a8fd6 55%, var(--mv-teal)); padding: .625rem; font-size: .9375rem; }
.lp-submit:hover { background-image: linear-gradient(90deg, #0860c4, #087fbe 55%, #0b8a80); }
.lp-live { display: flex; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--sapContent_LabelColor); justify-content: center; }
.lp-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mv-green); box-shadow: 0 0 0 .25rem rgba(63,191,85,.2); }
.lp-benefits { display: grid; grid-template-columns: 1fr 1fr; gap: .625rem; margin-top: 1.25rem; }
.lp-benefit { display: flex; align-items: center; gap: .5rem; padding: .625rem .75rem; border-radius: .75rem; font-size: .8125rem; font-weight: 600;
    color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(4px); line-height: 1.2; }
.lp-benefit i { font-size: 1rem; color: #9ff0d6; }

@media (max-width: 1199.98px) { .lp-features { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 991.98px) {
    .lp-split { grid-template-columns: 1fr; }
    .lp-brand-inner { padding: 2rem 1.5rem 1.5rem; text-align: center; }
    .lp-logo { margin: 0 auto; width: min(18rem, 75%); }
    .lp-lead { margin-left: auto; margin-right: auto; }
    .lp-route, .lp-features { display: none !important; }
    .lp-panel { padding: 2rem 1rem 2.5rem; }
}
@media (max-width: 575.98px) { .lp-card { padding: 1.5rem; } .lp-benefits { grid-template-columns: 1fr 1fr; } }

/* ---------- One screen, no scrolling, on every device ---------- */
html, body.lp { height: 100%; overflow: hidden; }
.lp-split { height: 100vh; height: 100dvh; min-height: 0; }
.lp-brand, .lp-panel { min-height: 0; }
.lp-panel { padding-top: max(1.5rem, env(safe-area-inset-top)); padding-bottom: max(1.5rem, env(safe-area-inset-bottom)); }

/* Shorter laptop screens: shrink, then drop the decorative parts */
@media (min-width: 992px) and (max-height: 860px) {
    .lp-brand-inner { padding-top: 1.5rem; padding-bottom: 1.5rem; }
    .lp-logo { width: min(22rem, 70%); }
    .lp-lead { margin-top: 1rem; }
    .lp-route { max-width: 30rem; }
}
@media (min-width: 992px) and (max-height: 760px) {
    .lp-route { display: none !important; }
    .lp-features { margin-top: 1.5rem; }
    .lp-card { padding: 1.5rem; }
}
@media (min-width: 992px) and (max-height: 620px) {
    .lp-features, .lp-benefits { display: none; }
    .lp-logo { width: min(17rem, 60%); }
}

/* Phones and tablets: compact logo header on white, sign-in fills the rest */
@media (max-width: 991.98px) {
    .lp-split { grid-template-rows: auto 1fr; }
    .lp-brand-inner { padding: max(1rem, env(safe-area-inset-top)) 1rem .875rem; }
    .lp-logo { width: min(15rem, 62%); }
    .lp-lead { font-size: .875rem; margin-top: .5rem; max-width: 22rem; }
    .lp-panel { align-items: center; padding: 1rem; }
    .lp-card { padding: 1.25rem 1.25rem 1rem; }
    .lp-card .mb-3 { margin-bottom: .75rem !important; }
    .lp-benefits { margin-top: .875rem; gap: .5rem; }
    .lp-benefit { padding: .5rem .625rem; font-size: .75rem; }
}
@media (max-width: 991.98px) and (max-height: 820px) {
    .lp-lead { display: none; }
}
@media (max-width: 991.98px) and (max-height: 740px) {
    .lp-benefits { display: none; }
    .lp-logo { width: min(12rem, 55%); }
}
@media (max-width: 991.98px) and (max-height: 620px) {
    .lp-card p.text-secondary, .lp-live, .lp-card .form-check { display: none !important; }
    .lp-logo { width: min(9.5rem, 45%); }
    .lp-brand-inner { padding-bottom: .5rem; }
}

.lp-getapp { display: flex; align-items: center; justify-content: center; gap: .375rem; margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #eef2f7;
    font-size: .8125rem; font-weight: 600; color: var(--mv-teal); }
@media (max-height: 620px) { .lp-getapp { display: none; } }