/* ---------------------------------------------------------------------
   Hero backdrop + contrast
   The hero sat on a random screenshot pulled from the media library. It
   fought the headline for attention and said nothing about the page, so
   the photo is gone and the backdrop is brand-tinted light on black.
   --------------------------------------------------------------------- */
.hero__bg{background-image:none !important}
.hero__bg::after{
	background:
		radial-gradient(115% 85% at 76% 14%, rgba(249,47,187,.20) 0%, rgba(249,47,187,0) 60%),
		radial-gradient(95% 85% at 6% 98%, rgba(139,92,246,.16) 0%, rgba(139,92,246,0) 62%),
		var(--black) !important;
}

/* White on the brand pink is 3.41:1 and fails AA at this size. Black text
   on the same pink is 5.80:1, so the brand colour is kept as-is. */
.stick--pink{color:var(--black) !important}

/* Placeholder was rgba(10,10,10,.34) on white -- about 2.3:1. */
.hero .ks input::placeholder{color:#6f6f75 !important;opacity:1}

/* ---------------------------------------------------------------------
   Search typeahead results
   #kpop is a white panel, but it lives inside .hero{color:#fff} and no
   rule ever targeted it -- so every row inherited white text on a white
   background (1.00:1) and the app name was invisible. Colours are set
   explicitly here rather than left to inheritance.
   --------------------------------------------------------------------- */
#kpop{color:var(--tx)}
#kpop a{color:var(--tx) !important}
#kpop a b{color:var(--tx) !important}
#kpop a span{color:#6f6f75 !important}
#kpop a:hover b,
#kpop a:focus b,
#kpop a:focus-visible b{color:var(--tx) !important}
#kpop a:hover span,
#kpop a:focus span,
#kpop a:focus-visible span{color:#5a5a62 !important}
/* "No match" line and its link (brand pink is only 3.42:1 on white). */
#kpop p{color:var(--tx) !important}
#kpop p a{color:#D40F9C !important}

/* Bare 1fr means minmax(auto,1fr), so the score panel can push the track
   wider than the viewport and clip the hero instead of reflowing it. */
@media(max-width:1000px){
	.hero__in{grid-template-columns:minmax(0,1fr) !important}
	.hero__in > *{min-width:0}
}