/* Translucent, layered treatment for the development-updates panel. */
.cta {
  background: linear-gradient(120deg, rgba(26, 117, 228, .68), rgba(14, 208, 196, .64));
  backdrop-filter: blur(18px) saturate(125%);
  -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.workflow-stage {
  min-height: 42.34vw;
  background: linear-gradient(180deg, rgba(4, 16, 28, .91), rgba(4, 16, 28, .77)), url('../assets/art-deco-cinema.png') center / auto 100% no-repeat;
}

.hero .theatre-bg {
  background: linear-gradient(90deg, rgba(6, 19, 33, .95), rgba(6, 19, 33, .48)), url('../assets/hero-home-theatre-wide-movie.png') center / auto 100% no-repeat;
  opacity: .68;
}

.hero {
  min-height: 42.34vw;
}

.hero .eyebrow,
.hero h1,
.hero .lede,
.hero .proof,
.workflow-stage .section-head .eyebrow,
.workflow-stage .section-head h2,
.workflow-stage .section-head p {
  text-shadow: none;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, .98));
}

.workflow-stage .section-head,
.workflow-stage .section-head * {
  text-shadow: 0 2px 12px rgba(0, 0, 0, .72);
}

#workflow .flow-diagram .step {
  background: linear-gradient(145deg, rgba(16, 56, 77, .63), rgba(4, 24, 38, .52));
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}

.requirements .requirements-grid {
  background: rgba(5, 28, 42, .48);
  backdrop-filter: blur(18px) saturate(130%);
  -webkit-backdrop-filter: blur(18px) saturate(130%);
}