/* HomePlanza hero artwork: warm cream, sage and peach, drawn entirely in CSS. */
.professional-marketing-page .pro-hero,
.planner-premium-page .planner-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 96% 9%, rgba(65, 104, 95, .24), transparent 53%),
    radial-gradient(ellipse at 87% 96%, rgba(245, 177, 116, .32), transparent 47%),
    radial-gradient(ellipse at 3% 6%, rgba(255, 255, 255, .92), transparent 52%),
    linear-gradient(118deg, #fff9ef 0%, #fff8ed 42%, #e8f1e9 76%, #deeee6 100%) !important;
  border-bottom: 1px solid rgba(65, 104, 95, .15);
}

/* A clipped decoration layer keeps artwork behind content, even when a tooltip opens. */
.hp-hero-gradient-art {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.hp-hero-gradient-art::before {
  content: "";
  position: absolute;
  inset: 0 0 0 46%;
  background-image: radial-gradient(circle, rgba(65, 104, 95, .16) .8px, transparent 1px);
  background-size: 24px 24px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 72%);
  mask-image: linear-gradient(90deg, transparent, #000 72%);
}
.hp-hero-gradient-art::after {
  content: "";
  position: absolute;
  top: -320px;
  right: -300px;
  width: 880px;
  height: 880px;
  border: 1px solid rgba(65, 104, 95, .14);
  border-radius: 50%;
  box-shadow:
    0 0 0 48px rgba(255, 255, 255, .17),
    0 0 0 49px rgba(65, 104, 95, .07),
    0 0 0 108px rgba(255, 255, 255, .12),
    0 0 0 109px rgba(65, 104, 95, .05);
}

/* Remove the former photo/pan layers and keep all real content in the foreground. */
.professional-marketing-page .pro-hero::before,
.professional-marketing-page .pro-hero::after,
.planner-premium-page .planner-hero::after {
  content: none !important;
  display: none !important;
}
.professional-marketing-page .pro-hero-grid,
.planner-premium-page .planner-hero-grid {
  position: relative;
  z-index: 1;
  min-width: 0;
}
.professional-marketing-page .pro-hero-grid > *,
.planner-premium-page .planner-hero-grid > * {
  min-width: 0;
}

/* The homeowner hero gets a more expressive sweep of color and concentric lines. */
.planner-premium-page .planner-hero {
  background:
    radial-gradient(ellipse at 95% 0%, rgba(88, 149, 128, .3), transparent 54%),
    radial-gradient(ellipse at 91% 95%, rgba(255, 187, 119, .4), transparent 48%),
    radial-gradient(ellipse at 0% 22%, #fffdf8, transparent 60%),
    linear-gradient(124deg, #fff9ef 0%, #fff6e9 42%, #eef3e8 67%, #dceee5 100%) !important;
}
.planner-premium-page .hp-hero-gradient-art::after {
  top: auto;
  bottom: -510px;
  right: -230px;
  width: 1060px;
  height: 1060px;
  border-color: rgba(65, 104, 95, .18);
  box-shadow:
    0 0 0 62px rgba(255, 255, 255, .22),
    0 0 0 63px rgba(65, 104, 95, .09),
    0 0 0 138px rgba(255, 255, 255, .15),
    0 0 0 139px rgba(65, 104, 95, .06);
}
.planner-premium-page .planner-hero::before {
  background: linear-gradient(90deg, #41685f 0 45%, #82ba9c 45% 73%, #edaa72 73%);
}
.professional-marketing-page .pro-hero-copy h1,
.planner-premium-page .planner-hero h1 {
  color: #10243f !important;
}
.professional-marketing-page .pro-hero-copy > p,
.planner-premium-page .planner-hero-lede {
  color: #425b50 !important;
}

@media (max-width: 760px) {
  .professional-marketing-page .pro-hero-grid {
    grid-template-columns: minmax(0, 1fr);
  }
  .professional-marketing-page .pro-hero,
  .planner-premium-page .planner-hero {
    background:
      radial-gradient(ellipse at 100% 0%, rgba(88, 149, 128, .16), transparent 44%),
      radial-gradient(ellipse at 100% 100%, rgba(255, 187, 119, .23), transparent 42%),
      linear-gradient(155deg, #fffdf8 0%, #fff8ed 58%, #e8f1e9 100%) !important;
  }
  .hp-hero-gradient-art::before { opacity: .45; }
  .hp-hero-gradient-art::after {
    top: -280px;
    right: -380px;
    width: 620px;
    height: 620px;
    opacity: .6;
  }
  .planner-premium-page .hp-hero-gradient-art::after {
    top: auto;
    bottom: -520px;
    right: -440px;
    width: 820px;
    height: 820px;
    opacity: .55;
  }
}