/* Home hero per theme. The light art and a light overlay are the default and the light theme; dark theme restores
   the original dark art and overlay. Text keeps 4.5:1 by changing the overlay, never the art. */
.hero { background:#E8EFF7; color:var(--ink) }
.hero p { color:#334155 }
.hero .button { background:#1B2A4A; color:#F8FAFC }
.hero .button.secondary { background:transparent; color:#1B2A4A; border-color:#5A6577 }
.hero:after { background:linear-gradient(90deg,rgba(248,250,252,.94),rgba(248,250,252,.72) 50%,rgba(248,250,252,.10)) }
.hero-art--dark { display:none }
.hero-art--light { display:block }

:root[data-theme=dark] .hero { background:#0F172A; color:#F8FAFC }
:root[data-theme=dark] .hero p { color:#E2E8F0 }
:root[data-theme=dark] .hero .button { background:#F8FAFC; color:#1B2A4A }
:root[data-theme=dark] .hero .button.secondary { background:transparent; color:#F8FAFC; border-color:#94A3B8 }
:root[data-theme=dark] .hero:after { background:linear-gradient(90deg,rgba(15,23,42,.90),rgba(15,23,42,.46) 50%,rgba(15,23,42,.04)) }
:root[data-theme=dark] .hero-art--dark { display:block }
:root[data-theme=dark] .hero-art--light { display:none }

@media(max-width:1100px) {
  :root[data-theme=dark] .hero:after { background:linear-gradient(90deg,rgba(15,23,42,.90),rgba(15,23,42,.74) 70%,rgba(15,23,42,.40)) }
}
@media(max-width:700px) {
  .hero:after { background:rgba(248,250,252,.80) }
  :root[data-theme=dark] .hero:after { background:rgba(15,23,42,.72) }
}