/* =====================================================================
   HOMEPAGE EXTRA STYLES (home-v5.css): linked only from index.html.
   Replaces home-v4.css. The desktop hero is now two layers so wide
   monitors never crop Charlie's head: the city is its own background
   (cover) and Charlie is a separate transparent WebP pinned bottom right,
   sized to the hero height. Cloudflare ignores ?v= numbers, so after
   editing, rename the file (home-v6.css, ...) and update the link.
   ===================================================================== */

/* ===== SUPPORTER BUTTONS (Early and Exclusive): even 2x2 grid on phones ===== */
@media(max-width:600px){
  .perk-ctas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;width:100%}
  .perk-ctas .btn{display:flex;align-items:center;justify-content:center;text-align:center;width:100%;min-height:52px;margin:0;padding:.7em .5em;white-space:normal;line-height:1.2}
}

/* ===== HERO (desktop only, 1025px and up): dark gradient, then Charlie, then the snowy city.
   Phones and tablets (1024px and below) keep the original city background. ===== */
@media(min-width:1025px){
  .home-hero{padding-top:65px;background:linear-gradient(90deg,rgba(5,8,14,.9) 0%,rgba(5,8,14,.75) 35%,rgba(5,8,14,.15) 60%,rgba(5,8,14,0) 75%),url(/img/hero-charlie-cutout-v1.webp) right bottom/auto 85.2% no-repeat,url(/img/hero-city-bg-v1.jpg) left top/cover #05080e}
}
/* ===== WIDE MONITORS: sharper city image, and keep Charlie close to the text ===== */
@media(min-width:1700px){
  .home-hero{background:linear-gradient(90deg,rgba(5,8,14,.9) 0%,rgba(5,8,14,.75) 30%,rgba(5,8,14,.15) 50%,rgba(5,8,14,0) 62%),url(/img/hero-charlie-cutout-v1.webp) right max(0px,calc((100% - 1700px)/2)) bottom/auto 85.2% no-repeat,url(/img/hero-city-bg-wide-v1.jpg) left top/cover #05080e}
}