/* Approved homepage cloud-garden background, scoped to the homepage only. */
.lz-home-body {
  --lz-home-surface: #e7ede6;
}

.lz-home-body .lz-home-dashboard {
  position: relative;
  isolation: isolate;
  overflow: clip;
  padding-top: 64px;
  padding-bottom: 112px;
  background: #e7ede6;
}

.lz-home-body .lz-home-dashboard::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: url('/static/images/lingzhi-redesign/home/cloud-garden-v1.webp') center center / cover no-repeat;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to bottom, transparent, #000 64px, #000 calc(100% - 64px), transparent);
}

.lz-home-body .lz-home-layout {
  max-width: 1320px;
  gap: 28px;
}

.lz-home-body .lz-home-section-heading {
  padding-bottom: 12px;
  border: 0;
}

.lz-home-body .lz-home-section-heading h2 {
  font-size: 34px;
  font-weight: 650;
}

.lz-home-body .lz-feature-grid {
  gap: 16px;
}

.lz-home-body .lz-feature-card {
  min-height: 166px;
  background: rgba(255, 255, 255, .82);
  border-color: rgba(255, 255, 255, .96);
  box-shadow: 0 6px 20px rgba(42, 68, 58, .04);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lz-home-body .lz-feature-card:hover,
.lz-home-body .lz-feature-card:focus-visible {
  background: rgba(255, 255, 255, .96);
  border-color: #b7a9d1;
}

.lz-home-body .lz-side-card {
  background: rgba(255, 255, 255, .79);
  border-color: rgba(255, 255, 255, .92);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.lz-home-body .lz-trust-strip {
  border-top-color: rgba(66, 96, 78, .18);
}

@media (max-width: 900px) {
  .lz-home-body .lz-home-dashboard {
    padding-top: 36px;
    padding-bottom: 48px;
  }

  .lz-home-body .lz-home-dashboard::before {
    background-position: 90% top;
    background-size: auto 1050px;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 760px, transparent 1050px);
    mask-image: linear-gradient(to bottom, transparent, #000 40px, #000 760px, transparent 1050px);
  }

  .lz-home-body .lz-home-section-heading h2 {
    font-size: 28px;
  }

  .lz-home-body .lz-feature-grid {
    gap: 12px;
  }

  .lz-home-body .lz-feature-card {
    min-height: 140px;
    background: rgba(255, 255, 255, .88);
  }
}

@media (prefers-reduced-motion: reduce) {
  .lz-home-body .lz-feature-card {
    transition: none;
  }
}
