/* Full-bleed hero photo — beats site.css white shells / background:none.
   IMPORTANT: --hero-fill-image urls resolve relative to THIS css file (assets/css/),
   so HTML must use url('../zatra-hero-….jpg'), not url('assets/…').
   Balanced wash: photo stays readable; text stays dark and crisp. */

.page-hero-fill,
#pricing-overview.page-hero-fill,
#page-overview.page-hero-fill,
.legal-hero.page-hero-fill{
  /* Directional wash: stronger behind copy, clearer photo toward the right/bottom */
  --hero-fill-wash:linear-gradient(
    115deg,
    rgba(255,255,255,.72) 0%,
    rgba(255,255,255,.58) 38%,
    rgba(255,255,255,.42) 68%,
    rgba(255,255,255,.48) 100%
  );
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  border:0!important;
  border-bottom:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-color:#dbe4ee!important;
  background-image:none!important; /* real photo lives on ::before so later rules cannot wipe it */
}

/* Dedicated photo layer — always behind content */
.page-hero-fill::before,
#pricing-overview.page-hero-fill::before,
#page-overview.page-hero-fill::before,
.legal-hero.page-hero-fill::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:0!important;
  pointer-events:none!important;
  display:block!important;
  background-color:#dbe4ee!important;
  background-image:var(--hero-fill-wash),var(--hero-fill-image)!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  border:0!important;
  border-radius:0!important;
  opacity:1!important;
  visibility:visible!important;
}

.page-hero-fill > *,
#pricing-overview.page-hero-fill > *,
#page-overview.page-hero-fill > *,
.legal-hero.page-hero-fill > *{
  position:relative!important;
  z-index:1!important;
}

/* Kill bordered white card shells (must beat #page-overview .page-intro-shell) */
#page-overview.page-hero-fill .page-intro-shell,
#page-overview.page-intro-section.page-hero-fill .page-intro-shell,
#pricing-overview.page-hero-fill .pricing-decision-shell,
#pricing-overview.page-hero-fill .pricing-decision-hero,
.page-hero-fill .page-intro-shell,
.page-hero-fill .pricing-decision-shell,
.page-hero-fill .pricing-decision-hero{
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background-color:transparent!important;
  background-image:none!important;
  overflow:visible!important;
}

#page-overview.page-hero-fill .page-intro-shell::before,
#pricing-overview.page-hero-fill .pricing-decision-shell::before,
#pricing-overview.page-hero-fill .pricing-decision-hero::before{
  display:none!important;
  content:none!important;
  background:none!important;
}

/* Text contrast over balanced photo wash */
.page-hero-fill h1,
.page-hero-fill #page-intro-title,
.page-hero-fill #pricing-page-title,
.page-hero-fill .page-intro-shell h1,
.page-hero-fill .pricing-decision-hero h1,
.legal-hero.page-hero-fill h1{
  color:#07111f!important;
  text-shadow:0 1px 0 rgba(255,255,255,.75),0 10px 28px rgba(255,255,255,.35)!important;
}

.page-hero-fill p,
.page-hero-fill .page-intro-shell p,
.page-hero-fill .pricing-decision-hero p,
.legal-hero.page-hero-fill > p,
.legal-hero.page-hero-fill .legal-meta{
  color:#1a2330!important;
  text-shadow:0 1px 0 rgba(255,255,255,.55)!important;
}

/* Legal title band */
.legal-hero.page-hero-fill{
  display:block!important;
  width:100%!important;
  max-width:none!important;
  margin:0 0 clamp(24px,3vw,40px)!important;
  padding:clamp(40px,5vw,72px) clamp(20px,4vw,34px)!important;
  box-sizing:border-box!important;
}
.legal-hero.page-hero-fill .legal-meta,
.legal-hero.page-hero-fill h1,
.legal-hero.page-hero-fill > p{
  width:min(100%,720px)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

@media (max-width:980px){
  .page-hero-fill,
  #pricing-overview.page-hero-fill,
  #page-overview.page-hero-fill,
  .legal-hero.page-hero-fill{
    --hero-fill-wash:linear-gradient(
      180deg,
      rgba(255,255,255,.74) 0%,
      rgba(255,255,255,.58) 45%,
      rgba(255,255,255,.52) 100%
    );
  }
}