/* Opt-in light hero treatment, matching the account-opening header. */
.gd5-header--light:not(:is(.is-scrolled, :hover, :focus-within, .has-open-menu, .mobile-open)) {
    color: #172033;
    background: rgba(255, 255, 255, .18);
    box-shadow: 0 8px 26px rgba(7, 17, 31, .04);
    backdrop-filter: blur(14px);
}
.gd5-header--light:not(:is(.is-scrolled, :hover, :focus-within, .has-open-menu, .mobile-open)) :is(.gd5-menu-trigger, .gd5-utility-links, .gd5-utility-links a, .gd5-language, .gd5-login, .gd5-mobile-toggle) {
    color: #172033;
}
.gd5-header--light:not(:is(.is-scrolled, :hover, :focus-within, .has-open-menu, .mobile-open)) :is(.gd5-login, .gd5-mobile-toggle) {
    border-color: rgba(23, 32, 51, .24);
    background: rgba(255, 255, 255, .24);
}
.gd5-header--light:not(:is(.is-scrolled, :hover, :focus-within, .has-open-menu, .mobile-open)) :is(.gd5-language img, .gd5-login img) {
    filter: brightness(0) saturate(100%);
}
.gd5-header--light:not(:is(.is-scrolled, :hover, :focus-within, .has-open-menu, .mobile-open)) .gd5-utility-links > * + * {
    border-left-color: rgba(23, 32, 51, .18);
}
.gd5-header--light .gd5-brand .gd5-brand-default { opacity: 1; }
.gd5-header--light .gd5-brand .gd5-brand-active { clip-path: none; opacity: 0; }
.gd5-header--light :is(.gd5-utility, .gd5-utility-inner, .gd5-utility-links) { background: transparent; }
.gd5-header--light:is(:hover, :focus-within, .has-open-menu, .mobile-open, .is-scrolled) :is(.gd5-utility-links, .gd5-utility-links a, .gd5-language) { color: #fff; }
.gd5-header--light:is(:hover, :focus-within, .has-open-menu, .mobile-open, .is-scrolled) .gd5-utility-links a:is(:hover, [aria-current="page"]) { color: var(--gd5-accent); }
.gd5-header--light:is(:hover, :focus-within, .has-open-menu, .mobile-open, .is-scrolled) .gd5-brand .gd5-brand-default { opacity: 0; }
.gd5-header--light:is(:hover, :focus-within, .has-open-menu, .mobile-open, .is-scrolled) .gd5-brand .gd5-brand-active { opacity: 1; }

/* Reserve the fixed header's initial height, including its desktop utility bar. */
[data-gd5-light-hero] {
    --gd5-hero-header-space: 124px;
    --gd5-hero-content-gap: 64px;
    padding-top: calc(var(--gd5-hero-header-space) + var(--gd5-hero-content-gap));
}
/* These layouts already provide their content gap on an inner grid. */
:is(.forex-hero, .indices-hero, .commodities-hero, .stocks-hero)[data-gd5-light-hero],
body.zh-mt5-redesign .platform-hero.mt5-hero-redesign[data-gd5-light-hero] {
    padding-top: var(--gd5-hero-header-space);
}
/* Keep the top of the split-color social hero readable beneath the glass header. */
.gs-hero[data-gd5-light-hero]::after {
    position: absolute;
    z-index: 1;
    inset: 0 0 auto;
    height: calc(var(--gd5-hero-header-space) + 48px);
    background: linear-gradient(#fff 0%, rgba(255, 255, 255, .96) 65%, transparent 100%);
    pointer-events: none;
    content: "";
}
@media (max-width: 1100px) {
    [data-gd5-light-hero] { --gd5-hero-header-space: 80px; --gd5-hero-content-gap: 48px; }
}
@media (max-width: 600px) {
    [data-gd5-light-hero] { --gd5-hero-header-space: 72px; --gd5-hero-content-gap: 40px; }
}