/*
 * Three selectively added architectural backgrounds for the gotEM editorial
 * homepage: the introduction atrium, folded titanium marketplace, and closing
 * aperture. All other chapter backgrounds remain defined by their originals.
 */
.el-page #about-gotem,
.el-page #next-step {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
  color: #e7eae5;
  background: #0a1114;
}

.el-page #about-gotem::before,
.el-page #next-step::before {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}
.el-page #about-gotem::before {
  background-image: url("/static/images/homepage/atmosphere-intro-architecture.webp");
  background-size: auto 138%;
  background-position: right 48%;
}
.el-page #next-step::before {
  background-image: url("/static/images/homepage/atmosphere-next-aperture.webp");
  background-size: auto 150%;
  background-position: right 54%;
}

.el-page #about-gotem::after,
.el-page #next-step::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
}
.el-page #about-gotem::after {
  background:
    linear-gradient(90deg, #0a1114 0%, rgba(10,17,20,.94) 34%, rgba(10,17,20,.58) 61%, rgba(10,17,20,.22) 100%),
    linear-gradient(180deg, rgba(10,17,20,.18), transparent 25%, transparent 75%, rgba(10,17,20,.46));
}
.el-page #next-step::after {
  background:
    linear-gradient(90deg, rgba(10,17,20,.76) 0%, rgba(10,17,20,.62) 42%, rgba(10,17,20,.22) 76%, rgba(10,17,20,.14) 100%),
    linear-gradient(180deg, rgba(10,17,20,.18), transparent 35%, rgba(10,17,20,.34));
}

.el-page #about-gotem > *,
.el-page #next-step > * {
  position: relative;
  z-index: 1;
}
.el-page #about-gotem .el-section-label,
.el-page #next-step .el-cta-label { color: #b6e5d7; }
.el-page #about-gotem .el-copy,
.el-page #next-step .el-cta-copy { color: #c2cdca; }
.el-page #about-gotem .el-copy > p,
.el-page #about-gotem .el-copy .el-textlink,
.el-page #next-step .el-cta-path { text-shadow: 0 1px 13px rgba(4,10,12,.62); }

.el-page #el-services {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;
}
.el-page #el-services::before,
.el-page #el-services::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.el-page #el-services::before {
  z-index: -2;
  background: url("/static/images/homepage/atmosphere-marketplace-metal.webp") right 52% / auto 140% no-repeat;
}
.el-page #el-services::after {
  z-index: -1;
  background:
    linear-gradient(90deg, rgba(10,17,20,.92) 0%, rgba(10,17,20,.78) 33%, rgba(10,17,20,.52) 65%, rgba(10,17,20,.34) 100%),
    linear-gradient(180deg, rgba(10,17,20,.22), transparent 24%, transparent 78%, rgba(10,17,20,.4));
}
.el-page #el-services .el-marketplace-story > p,
.el-page #el-services .el-marketplace-foot {
  color: #c2cdca;
  text-shadow: 0 1px 10px rgba(4,10,12,.8);
}

.el-page #next-step {
  background-color: #0a1114;
  border-bottom-color: rgba(231,234,229,.22);
}
.el-page #next-step .el-cta-path + .el-cta-path { border-left-color: rgba(231,234,229,.32); }

@media (max-width: 767px) {
  .el-page #about-gotem::before { background-size: auto 112%; background-position: 82% center; }
  .el-page #about-gotem::after {
    background:
      linear-gradient(180deg, rgba(10,17,20,.28) 0%, rgba(10,17,20,.38) 30%, rgba(10,17,20,.88) 100%),
      linear-gradient(90deg, rgba(10,17,20,.5), rgba(10,17,20,.16));
  }
  .el-page #el-services::before {
    background-size: auto 112%;
    background-position: 78% center;
  }
  .el-page #el-services::after {
    background:
      linear-gradient(180deg, rgba(10,17,20,.36), rgba(10,17,20,.58) 48%, rgba(10,17,20,.88)),
      linear-gradient(90deg, rgba(10,17,20,.34), rgba(10,17,20,.08));
  }
  .el-page #next-step::before { background-size: auto 110%; background-position: 80% center; }
  .el-page #next-step::after {
    background:
      linear-gradient(180deg, rgba(10,17,20,.25), rgba(10,17,20,.52) 45%, rgba(10,17,20,.88)),
      linear-gradient(90deg, rgba(10,17,20,.3), rgba(10,17,20,.08));
  }
  .el-page #next-step .el-cta-path + .el-cta-path {
    border-left: 0;
    border-top-color: rgba(231,234,229,.32);
  }
}