:root {
  --wave-deep: linear-gradient(180deg, #07172c, #102d4d 65%, #194874);
  /* The light stops mirror the wave fill in header-gradient-wave.svg. */
  --wave-light: linear-gradient(180deg, #194874, #31699c 26%, #74afd8 59%, #b9ddf3 84%, #dfedf9);
  --blue-panel: linear-gradient(110deg, #07172c, #102d4d 65%, #194874);
  --blue-caption: linear-gradient(115deg, #07172cf5, #194874ed);
}

.step-panel, .media, .contact, .footer {
  --fade-depth: clamp(44px, 6vw, 88px);
  background:
    var(--wave-deep) top / 100% calc(100% - var(--fade-depth) + 1px) no-repeat,
    var(--wave-light) bottom / 100% var(--fade-depth) no-repeat #dfedf9;
}
.step-panel { --fade-depth: clamp(36px, 4vw, 58px); }
.step-copy {
  padding-block-end: max(clamp(29px, 5vw, 68px), calc(var(--fade-depth) + 24px));
}
.footer {
  --fade-depth: clamp(36px, 4.5vw, 62px);
  padding-block-end: var(--fade-depth);
}
.film-card::after {
  background: linear-gradient(0deg, #07172cf7 1%, #19487432 52%, #07172c44 100%);
}
dialog { background: var(--wave-deep); }