/* Light mode: hero clouds fade out instead of being cut at the hero edge (inner pages) */
html.light #main .x-hero:not(.x-hero-xp) .hero-fx{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 130px,#000 200px,#000 calc(100% - min(260px,40%)),transparent 100%),linear-gradient(90deg,#000 calc(50% - 40px),transparent calc(50% - 8px),transparent calc(50% + 8px),#000 calc(50% + 40px));mask-image:linear-gradient(180deg,transparent 0,transparent 130px,#000 200px,#000 calc(100% - min(260px,40%)),transparent 100%),linear-gradient(90deg,#000 calc(50% - 40px),transparent calc(50% - 8px),transparent calc(50% + 8px),#000 calc(50% + 40px));-webkit-mask-composite:source-in;mask-composite:intersect}
/* Light mode nav: Resources dropdown + current-page link in the mobile menu */
html.light.js body:not(.menu-open) .nav:not(.nav-solid) .nav-dd-btn{color:#fff}
html.light.js body:not(.menu-open) .nav:not(.nav-solid) .nav-dd-btn:hover,html.light.js body:not(.menu-open) .nav:not(.nav-solid) .nav-dd.open .nav-dd-btn{color:#fff;background:#ffffff1f}
html.light .nav .nav-dd-menu a,html.light.js body:not(.menu-open) .nav:not(.nav-solid) .nav-dd-menu a{color:#1e2a44}
html.light .nav .nav-dd-menu a:hover,html.light.js body:not(.menu-open) .nav:not(.nav-solid) .nav-dd-menu a:hover{color:#6364f1;background:#6364f114}
html.light .nav .nav-dd-menu a[aria-current=page]{color:#6364f1;background:#6364f11a}
html.light .menu-open .nav .nav-links a[aria-current=page],html.light .nav-links.open a[aria-current=page]{color:#6364f1!important;background:#6364f11a;box-shadow:inset 0 0 0 1px #6364f14d}
/* Light mode: paint the sky on the whole page (body), not just #main, so the footer sits on the same
   continuous background on every page. Short pages used to cut the gradient off at the end of #main. */
html.light body{background:linear-gradient(180deg,var(--sky-0) var(--ht,0px),var(--sky-1) calc(var(--ht,0px) + var(--hh,1400px) * .3),var(--sky-2) calc(var(--ht,0px) + var(--hh,1400px) * .6),var(--sky-3) calc(var(--ht,0px) + var(--hh,1400px)),var(--sky-4) calc(var(--ht,0px) + var(--hh,1400px) + 250px),var(--sky-page) calc(var(--ht,0px) + var(--hh,1400px) + 550px)) left top/100% calc(var(--ht,0px) + var(--hh,1400px) + 550px) no-repeat,var(--sky-page)!important}
html.light #main{background:none!important}
/* Light mode: earn-xags intro sits on the pale sky, so its heading and copy must be dark (were forced white) */
html.light .ex-intro .split-copy .x-h2{color:#172033!important}
html.light .ex-intro .ex-what p{color:#45516a!important}