:root {
  --werainbow-rail-gradient: linear-gradient(
    90deg,
    rgb(152 175 186 / 10.2%) 0 33.84%,
    rgb(152 175 186 / 2.7%) 33.84% 34.34%,
    transparent 34.34% 46.46%,
    rgb(152 175 186 / 2.7%) 46.46% 46.97%,
    rgb(152 175 186 / 10.2%) 46.97% 72.73%,
    rgb(152 175 186 / 2.7%) 72.73% 73.23%,
    transparent 73.23% 85.86%,
    rgb(152 175 186 / 10.2%) 85.86% 100%
  );
}

/* Shared straight-edged three-rail page watermark. */

main#main-content {
  position: relative;
  isolation: isolate;
}

main#main-content::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: 0;
  right: 48px;
  bottom: 0;
  width: 198px;
  background: var(--werainbow-rail-gradient);
  pointer-events: none;
  user-select: none;
}

/*
 * Every page section sits in its own layer above the watermark. This keeps
 * the rail visible on transparent page background while preventing it from
 * painting over maps, cards, images, forms, videos, or section backgrounds.
 */
main#main-content > * {
  position: relative;
  z-index: 1;
}

/*
 * Retire the older generic section rails to prevent gaps and double shapes.
 * About keeps its own rail elements because its opaque section backgrounds
 * otherwise cover the shared main-level watermark. Those rails already sit
 * below each section's container, so they never paint over page content.
 */
main#main-content .section-rail,
main#main-content .oem-rail {
  display: none !important;
}

.why-section,
.product-detail-main {
  background-image: none !important;
}

@media (max-width: 1600px) {
  main#main-content::after {
    right: 24px;
    width: 150px;
  }
}

@media (max-width: 1180px) {
  main#main-content::after {
    display: none;
  }
}