/* The investment section uses the same continuously changing film language as the hero. */
.pricing-contact-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #101211;
}
.pricing {
  isolation: isolate;
  overflow: hidden;
  background: transparent !important;
  color: #f4f3ee !important;
  z-index: 2;
}
.pricing-motion,
.pricing::before {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.pricing-motion { z-index: 0; background: #101211; }
.pricing-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: saturate(.78) contrast(1.06) brightness(.725);
}
.pricing::before {
  content: "";
  z-index: 1;
  background: linear-gradient(110deg, rgba(9, 12, 11, .39) 0%, rgba(9, 12, 11, .255) 47%, rgba(9, 12, 11, .36) 100%), linear-gradient(to bottom, rgba(9, 12, 11, .06), rgba(9, 12, 11, .31));
}
.pricing > :not(.pricing-motion) { position: relative; z-index: 4; }
.pricing::after {
  content: "";
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: clamp(11rem, 20vw, 22rem);
  pointer-events: none;
  background: linear-gradient(to bottom, rgba(22, 22, 22, 0) 0%, rgba(22, 22, 22, .16) 28%, rgba(22, 22, 22, .62) 68%, #161616 100%);
}
.pricing .pricing-main,
.pricing .pricing-list,
.pricing .pricing-list article,
.pricing .pricing-link { border-color: rgba(244, 243, 238, .34) !important; color: #f4f3ee !important; }
.pricing .pricing-main > p,
.pricing .pricing-list > article > p,
.pricing .pricing-list > article > span,
.pricing .pricing-kicker,
.pricing .pricing-note { color: rgba(244, 243, 238, .72) !important; }

/* Contact is the solid theme panel; only pricing owns the video field. */
.contact {
  isolation: isolate;
  z-index: 1;
  background: #161616 !important;
}
body:not(.theme-dark) .contact { background: #161616 !important; }

/* Dark mode swaps only the contact panel and its short transition colour. */
body.theme-dark .contact {
  color: #17211d;
  background: #efeee8 !important;
}
body.theme-dark .pricing::after {
  background: linear-gradient(to bottom, rgba(239, 238, 232, 0) 0%, rgba(239, 238, 232, .16) 28%, rgba(239, 238, 232, .62) 68%, #efeee8 100%);
}

@media (max-width: 700px) {
  .pricing-video { filter: saturate(.72) contrast(1.04) brightness(.7); }
}