/* Site-wide page atmosphere.
 * Match the homepage's cool neutral pastels while retaining brand green on
 * controls, illustrations, data marks, and footer surfaces.
 */
:root {
  --color-bg-subtle: #f8f9fc;
  --color-pastel-blue: #e7f0f8;
  --color-pastel-purple: #f0e8f8;
  --color-pastel-pink: #dff4f2;
  --color-pastel-yellow: #fcf4db;
}

body::after {
  background-image:
    radial-gradient(ellipse 58% 48% at 0% 10%, rgba(219, 239, 242, 0.72) 0%, rgba(219, 239, 242, 0) 72%),
    radial-gradient(ellipse 54% 46% at 100% 17%, rgba(240, 232, 248, 0.66) 0%, rgba(240, 232, 248, 0) 72%),
    radial-gradient(ellipse 48% 42% at 7% 94%, rgba(252, 244, 219, 0.5) 0%, rgba(252, 244, 219, 0) 72%),
    radial-gradient(ellipse 50% 44% at 96% 90%, rgba(223, 244, 242, 0.58) 0%, rgba(223, 244, 242, 0) 72%);
}

/* Homepage keeps its local hero atmosphere; use the same colours everywhere
 * else without stacking another tinted layer over it.
 */
body.home-page::after {
  background: #fff;
}

.hero::before {
  background-image:
    radial-gradient(ellipse 48% 70% at 0% 14%, rgba(219, 239, 242, 0.72) 0%, rgba(219, 239, 242, 0) 72%),
    radial-gradient(ellipse 48% 68% at 100% 18%, rgba(240, 232, 248, 0.68) 0%, rgba(240, 232, 248, 0) 72%),
    radial-gradient(ellipse 42% 46% at 8% 96%, rgba(252, 244, 219, 0.54) 0%, rgba(252, 244, 219, 0) 72%),
    radial-gradient(ellipse 44% 48% at 94% 94%, rgba(223, 244, 242, 0.62) 0%, rgba(223, 244, 242, 0) 72%),
    linear-gradient(180deg, #fff 0%, #fbfcfc 100%);
}

.page-pricing-1,
.page-404 {
  background:
    radial-gradient(900px 520px at 8% 0%, rgba(219, 239, 242, 0.72), transparent 64%),
    radial-gradient(820px 500px at 96% 12%, rgba(240, 232, 248, 0.64), transparent 62%),
    radial-gradient(780px 460px at 12% 94%, rgba(252, 244, 219, 0.46), transparent 64%),
    radial-gradient(760px 440px at 92% 88%, rgba(223, 244, 242, 0.52), transparent 62%),
    #fff;
}

/* The long-form research templates have their own scoped themes. Their page
 * and hero surfaces follow the homepage atmosphere; chart/data colours remain
 * untouched.
 */
.sotmw {
  --s-bg: #fff;
  background: transparent;
}

.sotmw .hero,
.hreflang-bench .hero {
  color: var(--color-text);
  background:
    radial-gradient(ellipse 58% 86% at 0% 12%, rgba(219, 239, 242, 0.78) 0%, rgba(219, 239, 242, 0) 72%),
    radial-gradient(ellipse 54% 82% at 100% 18%, rgba(240, 232, 248, 0.72) 0%, rgba(240, 232, 248, 0) 72%),
    radial-gradient(ellipse 46% 58% at 8% 96%, rgba(252, 244, 219, 0.58) 0%, rgba(252, 244, 219, 0) 72%),
    radial-gradient(ellipse 48% 62% at 94% 92%, rgba(223, 244, 242, 0.66) 0%, rgba(223, 244, 242, 0) 72%),
    linear-gradient(180deg, #fff 0%, #fbfcfc 100%);
  border-bottom: 1px solid rgba(40, 55, 43, 0.08);
}

.sotmw .hero::after,
.hreflang-bench .hero::after {
  opacity: 0.3;
  background-image:
    linear-gradient(rgba(40, 55, 43, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(40, 55, 43, 0.06) 1px, transparent 1px);
}

.sotmw .hero h1,
.hreflang-bench .hero h1 {
  color: var(--color-text);
}

.sotmw .dek,
.hreflang-bench .dek,
.sotmw .research-meta span,
.hreflang-bench .hero-meta {
  color: var(--color-text-muted);
}

.hreflang-bench .hero-meta strong {
  color: var(--color-text);
}

.sotmw .eyebrow,
.sotmw .research-meta span {
  color: var(--color-primary);
  border-color: rgba(40, 55, 43, 0.1);
  background: rgba(255, 255, 255, 0.72);
}

.hreflang-bench .eyebrow {
  color: var(--color-primary);
}

.sotmw .s-btn-primary,
.hreflang-bench .btn-primary {
  color: var(--color-text);
  background: var(--color-accent);
}

.sotmw .s-btn-ghost,
.hreflang-bench .btn-secondary {
  color: var(--color-text);
  border-color: rgba(40, 55, 43, 0.12);
  background: rgba(255, 255, 255, 0.76);
}

@media (max-width: 768px) {
  body::after {
    background-image:
      radial-gradient(ellipse 88% 36% at 0% 8%, rgba(219, 239, 242, 0.68) 0%, rgba(219, 239, 242, 0) 72%),
      radial-gradient(ellipse 84% 34% at 100% 18%, rgba(240, 232, 248, 0.62) 0%, rgba(240, 232, 248, 0) 72%),
      radial-gradient(ellipse 82% 30% at 8% 92%, rgba(252, 244, 219, 0.42) 0%, rgba(252, 244, 219, 0) 72%),
      radial-gradient(ellipse 80% 30% at 96% 84%, rgba(223, 244, 242, 0.5) 0%, rgba(223, 244, 242, 0) 72%);
  }

  body.home-page::after {
    background: #fff;
  }
}