/*
 * Unifies legacy page canvases with the MVRPAY navy brand system.
 * Original section spacing is intentionally preserved.
 */

:root {
  --bg-black: #06111f;
  --black-bg: #06111f;
  --deep-black: #06111f;
  --bg-dark: #06111f;
  --bg-dark-canvas: #06111f;
  --bg-surface: #0a192b;
}

html,
body,
#root,
.Home_Container,
.mvrpay-page-container,
.careers-page-wrapper,
.pricing-main-container,
.policy-page-wrapper {
  background-color: #06111f !important;
}

:where(
  .ab-container,
  .api-ecosystem,
  .api_hero_wrapper,
  .automation-container,
  .banking-container,
  .bpg-container,
  .career-details,
  .comp-section-container,
  .comparison-container,
  .compliance-container,
  .cs-section,
  .dashboard-container,
  .dev-container,
  .ecosystem-container,
  .enterprise-section,
  .fpipe-hub-wrapper,
  .gh-hero-wrapper,
  .hero-wrapper,
  .home-section3,
  .hw_wrapper,
  .ind_wrapper,
  .industry-section-one,
  .industry-top,
  .invoicing-container,
  .launchnew_section7,
  .mvrpay-container,
  .page-wrapper,
  .pay_section_wrapper,
  .payouts_wrapper,
  .provenideas-wrapper,
  .reconciliation-container,
  .rt-section-container,
  .security-section-two,
  .sp-container,
  .templates-section-container,
  .wc_wrapper,
  .wrapper
) {
  background-color: #06111f !important;
}

footer,
.footer,
.footer-wrapper,
.footer-container {
  background-color: #06111f !important;
}

/*
 * The homepage hero contains black video artwork. Extend that black canvas
 * across the viewport so its bounded media never reads as accidental spacing.
 */
.section1-container {
  margin-top: 6.5rem !important;
  background: #000 !important;
  box-shadow: 0 0 0 100vmax #000;
  clip-path: inset(0 -100vmax);
}

.section1-container .video-wrapper {
  background: #000 !important;
}

@media (max-width: 992px) {
  .section1-container {
    margin-top: 5.75rem !important;
  }
}

@media (max-width: 768px) {
  .section1-container {
    margin-top: 5rem !important;
  }
}

/*
 * Legacy scroll scenes used multiple viewport heights and 16rem gaps. Those
 * values create empty screens once the pages are served without the original
 * branded motion sequence. Keep deliberate breathing room without forcing
 * visitors through blank viewport-sized intervals.
 */
.section1-container {
  margin-top: 6.5rem !important;
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.section1-container .video-wrapper {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.section1-container .Hero-video {
  display: block;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: 16 / 9 !important;
  margin-top: 0 !important;
  object-fit: cover !important;
  object-position: center !important;
}

.section1-container .hero-text {
  top: 52% !important;
}

.section1-container .black-container {
  display: none !important;
}

.hs4-products-list {
  gap: clamp(4rem, 7vw, 7rem) !important;
}

.hs4-product-row,
.hs4-row-reverse,
.hs4-home2-adjust {
  gap: clamp(2.5rem, 5vw, 5rem) !important;
}

.ecosystem-container,
.automation-container {
  min-height: auto !important;
}

.ecosystem-container,
.automation-container,
.comparison-container,
.pay_section_wrapper,
.payouts_wrapper,
.reconciliation-container,
.banking-container,
.invoicing-container {
  padding-top: clamp(3.5rem, 6vw, 6rem) !important;
  padding-bottom: clamp(3.5rem, 6vw, 6rem) !important;
}

@media (max-width: 768px) {
  .section1-container {
    padding-bottom: 0 !important;
  }

  .section1-container .video-wrapper,
  .section1-container .Hero-video {
    aspect-ratio: 4 / 5 !important;
  }

  .section1-container .hero-text {
    top: 54% !important;
  }

  .hs4-products-list {
    gap: 4rem !important;
  }
}