/* Match the two original illustrations to the saved theme before first paint. */
:root{
 --lot-illustration:url('ucar-lot-contours-light-v54.png');
 --about-illustration:url('ucar-about-partners-light-v54.png');
 --illustration-surface:#fff;
 --illustration-heading:#142b3c;
 --illustration-copy:#405868;
 --lot-overlay-start:rgba(255,255,255,.94);
 --lot-overlay-mid:rgba(255,255,255,.86);
 --lot-overlay-end:rgba(255,255,255,.3);
 --about-overlay-start:rgba(255,255,255,.94);
 --about-overlay-mid:rgba(255,255,255,.82);
 --illustration-clear:rgba(255,255,255,0);
}
html[data-theme=dark]{
 --lot-illustration:url('ucar-lot-contours-v33.png');
 --about-illustration:url('ucar-about-partners-v40.png');
 --illustration-surface:#02303e;
 --illustration-heading:#fff;
 --illustration-copy:#edf9fc;
 --lot-overlay-start:rgba(2,48,62,.86);
 --lot-overlay-mid:rgba(2,48,62,.72);
 --lot-overlay-end:rgba(2,48,62,.25);
 --about-overlay-start:rgba(2,48,62,.82);
 --about-overlay-mid:rgba(2,48,62,.58);
 --illustration-clear:rgba(2,48,62,0);
}
.hero{
 background-color:var(--illustration-surface);
 background-image:linear-gradient(90deg,var(--lot-overlay-start) 0%,var(--lot-overlay-mid) 30%,var(--lot-overlay-end) 53%,var(--illustration-clear) 68%),var(--lot-illustration);
}
#about .about-hero{
 background-color:var(--illustration-surface);
 background-image:linear-gradient(90deg,var(--about-overlay-start),var(--about-overlay-mid) 30%,var(--illustration-clear) 57%),var(--about-illustration);
}
.hero h1,#about .about-hero h1{color:var(--illustration-heading)}
.hero p,#about .about-hero p{color:var(--illustration-copy)}
html:not([data-theme=dark]) .hero .btn.ghost{background:rgba(255,255,255,.92);border-color:#aac0ce;color:#142b3c}
html:not([data-theme=dark]) .hero .btn.ghost:hover{background:#eef7fb}
@media(max-width:900px){
 .hero{background-image:var(--lot-illustration)}
 #about .about-hero{background-image:var(--about-illustration)}
}