/*
 * Blend white public headers into tinted mobile page surfaces.
 *
 * The header stays white. Only the first page background is softened so the
 * handoff does not read as a hard horizontal color cut on narrow screens.
 */
@media (max-width: 800px) {
  .party-finder-page {
    background: linear-gradient(180deg, #fff 0, var(--finder-page, #f6f8fc) 48px);
  }

  .create-party-page {
    background:
      linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 48px),
      radial-gradient(circle at 8% 7%, rgba(51, 156, 255, .09), transparent 25rem),
      linear-gradient(180deg, #f8fbff 0, #fff 430px);
  }

  .ranking-hero {
    background:
      linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 48px),
      linear-gradient(125deg, #edf7ff, #e8efff);
  }

  .about-hero {
    background:
      linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 48px),
      radial-gradient(circle at 82% 13%, rgba(51, 156, 255, .18), transparent 29%),
      linear-gradient(145deg, #fff 4%, #f9fcff 52%, #edf7ff 100%);
  }

  .about-safe-hero {
    background:
      linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 48px),
      radial-gradient(circle at 86% 22%, rgba(151, 205, 255, .34), transparent 25%),
      linear-gradient(135deg, #f8fbff 0%, #eef7ff 52%, #f8fcff 100%);
  }

  .usage-guide-hero {
    background: linear-gradient(180deg, #fff 0, #f4f9ff 48px);
  }

  .policy-page > .sub-head {
    background-image:
      linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 42px),
      linear-gradient(rgba(51, 156, 255, .04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(51, 156, 255, .04) 1px, transparent 1px);
    background-size: auto, 12px 12px, 12px 12px;
  }

  .profile-edit-page,
  .mogoo-wallet-page {
    background: linear-gradient(180deg, #fff 0, #f6f9fc 48px);
  }

  .checkout-v2-page {
    background:
      linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 48px),
      radial-gradient(circle at 88% 4%, rgba(51, 156, 255, .1), transparent 22rem),
      #f7f9fc;
  }

  .protection-hero {
    background-image:
      linear-gradient(180deg, #fff 0, rgba(255, 255, 255, 0) 48px),
      linear-gradient(rgba(51, 156, 255, .04) 1px, transparent 1px),
      linear-gradient(90deg, rgba(51, 156, 255, .04) 1px, transparent 1px);
    background-size: auto, 12px 12px, 12px 12px;
  }
}