/* Shared content-page surfaces. Opt-in only; homepage keeps its approved stylesheet. */
body.site-backgrounds {
  --surface-hero-image: url('deployment-background-v1.png');
}

body.site-backgrounds[data-surface-theme="custom"],
body.site-backgrounds[data-surface-theme="contact"] {
  --surface-hero-image: url('contact-background-v1.png');
}

body.site-backgrounds[data-surface-theme="data"] {
  --surface-hero-image: url('ai-market-background-v1.png');
}

body.site-backgrounds[data-surface-theme="resources"],
body.site-backgrounds[data-surface-theme="news"] {
  --surface-hero-image: url('industries/news-background-v1.png');
}

body.site-backgrounds[data-surface-theme="policy"] {
  --surface-hero-image: url('industries/policy-background-v1.png');
}

body.site-backgrounds[data-surface-theme="industry"] {
  --surface-hero-image: url('industries/solutions-background-v1.png');
}

body.site-backgrounds[data-surface-theme="cases"] {
  --surface-hero-image: url('industries/cases-background-v1.png');
}

/* Existing hero image styles are deliberately left in charge on preserved pages. */
.site-backgrounds[data-surface-hero="fill"] main > :is(.phead, .saas-hero, .hero, .industry-hero) {
  background-color: #f8fbff;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.78) 39%, rgba(255,255,255,.1) 100%),
    var(--surface-hero-image);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center, center 38%;
}

.site-backgrounds main > :is(.sec, .sec-sm, .section, .industry-section) {
  position: relative;
  background:
    radial-gradient(ellipse at 2% 45%, rgba(96,165,250,.08), transparent 32%),
    linear-gradient(180deg, #fff, #fbfdff 72%, #f7faff);
}

.site-backgrounds main > :is(.sec, .sec-sm, .section, .industry-section) > .wrap {
  position: relative;
  z-index: 1;
}

.site-backgrounds main > :is(.sec, .sec-sm, .section, .industry-section)::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(37,99,235,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37,99,235,.045) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(90deg, #000, transparent 30%, transparent 70%, #000);
}

.site-backgrounds main > :is(.sec, .sec-sm, .section, .industry-section):is(.sec-alt, .alt) {
  background:
    radial-gradient(ellipse at 100% 24%, rgba(147,197,253,.18), transparent 38%),
    linear-gradient(135deg, #f3f7ff, #f8faff 54%, #edf4fe);
}

.site-backgrounds main > :is(.sec, .sec-sm, .section, .industry-section):is(.sec-alt, .alt)::before {
  background: url('home-section-network.svg') center / cover no-repeat;
  mask-image: none;
  opacity: .75;
}

/* Detail pages have no standalone hero. Place an image band behind their existing title region. */
.site-backgrounds[data-surface-hero="detail"] main > .sec {
  background-color: #fbfdff;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.9) 42%, rgba(255,255,255,.58)),
    var(--surface-hero-image);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 100% 420px, 100% 420px;
}

.site-backgrounds main > .industry-cta {
  background-color: #172a4d;
  background-image:
    linear-gradient(110deg, rgba(23,42,77,.95), rgba(29,65,128,.85)),
    url('home-section-network.svg');
  background-size: cover;
  background-position: center;
}

@media (max-width: 820px) {
  .site-backgrounds main > :is(.sec, .sec-sm, .section, .industry-section)::before,
  .site-backgrounds main > :is(.sec, .sec-sm, .section, .industry-section):is(.sec-alt, .alt)::before {
    display: none;
  }

  .site-backgrounds[data-surface-hero="fill"] main > :is(.phead, .saas-hero, .hero, .industry-hero),
  .site-backgrounds[data-surface-hero="detail"] main > .sec {
    background-image:
      linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,255,255,.85)),
      var(--surface-hero-image);
    background-position: center, 67% 30%;
  }

  .site-backgrounds[data-surface-hero="detail"] main > .sec {
    background-position: top center;
    background-size: 100% 420px, auto 420px;
  }
}

@media print {
  .site-backgrounds[data-surface-hero] main > :is(.phead, .saas-hero, .hero, .industry-hero, .sec, .sec-sm, .section, .industry-section) {
    background: #fff;
  }

  .site-backgrounds main > :is(.sec, .sec-sm, .section, .industry-section)::before {
    display: none;
  }
}