/*!
 * Landing chrome — unique filename (nginx caches /css/ immutable).
 *
 * The command-center hero is a transparent shell over the dark tech canvas
 * (#0b1224). .erp-landing-cards-section then painted a solid white rectangle,
 * so the Business catalogue started with a hard navy/white knife-edge.
 *
 * This sheet keeps the white card canvas, but lets the hero navy show through
 * at the top and fade into white over a fixed band. Phone also zeros the
 * hero's leftover 2rem margin so the blend sits flush. Desktop and phone
 * share the same treatment (parity).
 */

html[data-active-module="landing"] {
  --erp-hero-fade-h: 8.5rem;
  --erp-hero-fade-overlap: 2.75rem;
  --erp-hero-fade-from: #0b1224;
}

html[data-active-module="landing"] body.erp-body #landing .erp-hero.erp-hero--command-center,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-hero.erp-hero--command-center {
  margin-bottom: 0 !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-landing-cards-section,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-landing-cards-section {
  position: relative !important;
  isolation: isolate !important;
  overflow: visible !important;
  margin-top: 0 !important;
  padding-top: calc(var(--erp-hero-fade-h) - 1.6rem) !important;
  background-color: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-landing-cards-section::before,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-landing-cards-section::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(-1 * var(--erp-hero-fade-overlap)) !important;
  height: calc(var(--erp-hero-fade-h) + var(--erp-hero-fade-overlap)) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: linear-gradient(
    180deg,
    rgb(11 18 36 / 0%) 0%,
    rgb(11 18 36 / 14%) 18%,
    rgb(15 23 42 / 38%) 36%,
    rgb(51 65 85 / 58%) 54%,
    rgb(226 232 240 / 86%) 76%,
    #ffffff 100%
  ) !important;
  box-shadow: 0 28px 64px -18px rgb(11 18 36 / 40%) !important;
  filter: blur(0.6px);
  opacity: 1 !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-landing-cards-section::after,
html[data-active-module="landing"] body.erp-body #landing.module-section .erp-landing-cards-section::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: calc(var(--erp-hero-fade-h) - 2px) !important;
  bottom: 0 !important;
  height: auto !important;
  pointer-events: none !important;
  z-index: 0 !important;
  background: #ffffff !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
}

html[data-active-module="landing"] body.erp-body #landing .erp-landing-cards-section > * {
  position: relative !important;
  z-index: 1 !important;
}

@media (max-width: 900px) {
  html[data-active-module="landing"] {
    --erp-hero-fade-h: 6.75rem;
    --erp-hero-fade-overlap: 2.25rem;
  }
}