.login-premium {
    --login-daylight-sky: #dceef7;
    --login-daylight-surface: rgba(255, 255, 255, 0.76);
    --login-daylight-border: rgba(38, 54, 67, 0.14);
    --login-daylight-ink: #1d2a34;
    --login-daylight-muted: #5f707d;
    --login-daylight-logo-panel-padding: var(--premium-space-lg);
    --login-daylight-logo-panel-radius: var(--premium-radius-md);
    --login-daylight-logo-panel-width: min(32rem, 94%);
    --login-daylight-logo-panel-shadow: 0 1rem 3rem rgba(29, 42, 52, 0.08);
    --login-daylight-logo-brightness: 1;
    --login-daylight-logo-saturation: 100%;
    --login-daylight-logo-shadow: 0 0.08rem 0.16rem rgba(29, 42, 52, 0.42);
    --login-daylight-brand-height: auto;
    --login-daylight-brand-max-height: none;
    --login-daylight-scene-image: image-set(url('../../img/login/rail-daylight-evening-backplate-v1.webp') type('image/webp') 1x, url('../../img/login/rail-daylight-evening-backplate-v1.png') type('image/png') 1x);
    --login-daylight-city-foreground-image: image-set(url('../../img/login/rail-daylight-city-foreground-v1.webp') type('image/webp') 1x, url('../../img/login/rail-daylight-city-foreground-v1.png') type('image/png') 1x);
    --login-daylight-scene-position: center bottom;
    --login-daylight-scene-size: cover;
    --login-daylight-scene-source-width: 1086;
    --login-daylight-scene-source-height: 1448;
    --login-daylight-scene-horizon-y: 1098;
    --login-daylight-city-layer: 1;
    --login-brand-background: var(--login-daylight-sky);
    --login-brand-text: var(--login-daylight-ink);
    --login-brand-muted: var(--login-daylight-muted);
}

.login-premium .login-branding {
    height: var(--login-daylight-brand-height);
    max-height: var(--login-daylight-brand-max-height);
    color: var(--login-daylight-ink);
    background-color: var(--login-daylight-sky);
    background-image: var(--login-daylight-scene-image);
    background-position: var(--login-daylight-scene-position);
    background-repeat: no-repeat;
    background-size: var(--login-daylight-scene-size);
}

.login-premium .login-city-foreground {
    position: absolute;
    inset: var(--premium-zero);
    z-index: var(--login-daylight-city-layer);
    background-image: var(--login-daylight-city-foreground-image);
    background-position: var(--login-daylight-scene-position);
    background-repeat: no-repeat;
    background-size: var(--login-daylight-scene-size);
    pointer-events: none;
}

.login-premium .login-branding::before {
    inset: var(--premium-space-xl) auto var(--premium-space-xl) var(--premium-zero);
    background: var(--login-brand-line);
    opacity: 0.72;
}

.login-premium .login-branding__content {
    width: var(--login-daylight-logo-panel-width);
    padding: var(--login-daylight-logo-panel-padding);
    border: var(--premium-border-width) solid var(--login-daylight-border);
    border-radius: var(--login-daylight-logo-panel-radius);
    background: var(--login-daylight-surface);
    box-shadow: var(--login-daylight-logo-panel-shadow);
}

.login-premium .login-logo {
    filter: brightness(var(--login-daylight-logo-brightness)) saturate(var(--login-daylight-logo-saturation)) drop-shadow(var(--login-daylight-logo-shadow));
}

.login-premium .login-branding-title,
.login-premium .login-branding-subtitle {
    color: var(--login-daylight-ink);
}

.login-premium .login-branding-title {
    display: none;
}

.login-premium .login-branding-subtitle {
    color: var(--login-daylight-muted);
}

@media (max-width: 900px) {
    .login-premium {
        --login-daylight-logo-panel-width: min(27rem, 92%);
        --login-daylight-logo-panel-padding: var(--premium-space-md);
        --login-daylight-logo-render-source: var(--company-login-logo-mobile-width-lg, var(--login-logo-max-width));
        --login-daylight-logo-render-scale: 1.34;
        --login-daylight-logo-render-width: min(var(--company-login-logo-width, var(--login-logo-max-width)), calc(var(--login-daylight-logo-render-source) * var(--login-daylight-logo-render-scale)));
    }

    .login-premium .login-logo {
        width: min(var(--login-daylight-logo-render-width), 100%);
        max-width: var(--login-daylight-logo-render-width);
    }
}

@media (max-width: 575.98px) {
    .login-premium {
        --login-daylight-logo-panel-width: fit-content;
        --login-daylight-logo-render-source: var(--company-login-logo-mobile-width-sm, var(--login-logo-max-width));
        --login-daylight-logo-render-scale: 1.5;
        --login-daylight-logo-render-width: min(var(--company-login-logo-width, var(--login-logo-max-width)), calc(var(--login-daylight-logo-render-source) * var(--login-daylight-logo-render-scale)));
        --login-daylight-logo-panel-max-width: min(100%, var(--login-daylight-logo-render-width));
        --login-daylight-logo-panel-padding: var(--premium-space-xs);
        --login-daylight-logo-panel-surface-share: 64%;
        --login-daylight-logo-panel-border-share: 78%;
        --login-daylight-logo-panel-surface: color-mix(in srgb, var(--premium-surface) var(--login-daylight-logo-panel-surface-share), transparent);
        --login-daylight-logo-panel-border: color-mix(in srgb, var(--login-daylight-border) var(--login-daylight-logo-panel-border-share), transparent);
        --login-daylight-logo-panel-shadow: var(--premium-shadow-sm);
        --login-daylight-logo-panel-blur: var(--premium-space-xs);
        --login-daylight-logo-panel-mobile-lift: calc(-1 * var(--premium-space-2xl));
    }

    .login-premium .login-branding__content {
        width: var(--login-daylight-logo-panel-width);
        max-width: var(--login-daylight-logo-panel-max-width);
        padding: var(--login-daylight-logo-panel-padding);
        border-color: var(--login-daylight-logo-panel-border);
        background: var(--login-daylight-logo-panel-surface);
        box-shadow: var(--login-daylight-logo-panel-shadow);
        backdrop-filter: blur(var(--login-daylight-logo-panel-blur));
        transform: translateY(var(--login-daylight-logo-panel-mobile-lift));
    }

    .login-premium .login-logo-wrapper {
        width: auto;
        max-width: var(--login-daylight-logo-panel-max-width);
    }

    .login-premium .login-logo {
        width: min(var(--login-daylight-logo-render-width), 100%);
        max-width: var(--login-daylight-logo-render-width);
        margin: var(--premium-zero);
    }
}