/* Homepage background handoffs. Adjacent sections share the same edge color;
   only their background paint blends, leaving content and product UI intact. */
body[data-page="home"] {
  --home-section-fade: clamp(96px, 10vw, 160px);
  --home-market-wash: #fff8f5;
  --home-footer-entry: #fff4ec;
}

/* White hero, See / Watch / Act and platform sections already share a surface.
   Ease into Slack's existing diagonal wash, then into Market Pulse's peach. */
.home-page > .slack-section {
  background: linear-gradient(180deg,
      #fff 0%,
      #ffffff00 var(--home-section-fade),
      #fff8f500 calc(100% - var(--home-section-fade)),
      var(--home-market-wash) 100%),
    linear-gradient(140deg, #fffcf9 0%, #fcf7f8 55%, #f7edf1 100%);
}

.home-page > .market-section.market-digest {
  background: linear-gradient(180deg,
    var(--home-market-wash) 0%,
    var(--home-market-wash) calc(100% - var(--home-section-fade)),
    #fff 100%);
}

/* The FAQ meets white at both edges. The closing section gradually warms the
   surrounding page to the footer, echoing the commerce artwork's ember tones. */
.home-page > .home-close {
  background: linear-gradient(180deg,
    #fff 0%, #fff 4%, #fffbf8 48%, var(--home-footer-entry) 100%);
}

body[data-page="home"] .svf::before {
  background: linear-gradient(to bottom,
    var(--home-footer-entry),
    rgb(255 244 236 / .8) 32%,
    rgb(255 244 236 / 0));
}