/* Full-width section textures with consistent spacing around inner containers. */
:root {
  --section-space: 3rem;
  --section-teal: #eef4f5;
  --section-yellow: #fff9e8;
  --section-green: #eff8f3;
  --section-grid: rgb(34 64 77 / 6%);
}

.section,
.page-banner .page-hero {
  padding-block: var(--section-space);
}

.section-heading {
  margin-bottom: 2rem;
}

.content-process {
  margin-top: 2rem;
}

.hero {
  background-color: var(--section-teal);
  background-image:
    linear-gradient(
      90deg,
      #f7faf9 4%,
      rgb(247 250 249 / 96%) 30%,
      transparent 70%
    ),
    radial-gradient(ellipse at 94% 12%, rgb(255 193 7 / 13%), transparent 46%),
    linear-gradient(var(--section-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--section-grid) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    32px 32px,
    32px 32px;
  background-position: center;
  border-bottom-color: #d9e4e5;
}

.page-banner {
  background-color: #f3f6f6;
  background-image:
    radial-gradient(ellipse at center, #f3f6f6 28%, rgb(243 246 246 / 10%) 85%),
    radial-gradient(circle, rgb(34 64 77 / 16%) 1px, transparent 1.5px);
  background-size:
    auto,
    18px 18px;
}

#platform-preview {
  background-color: #fff;
  background-image:
    linear-gradient(#fff 10%, rgb(255 255 255 / 85%) 55%, transparent),
    radial-gradient(circle, rgb(34 64 77 / 10%) 1px, transparent 1.5px);
  background-size:
    auto,
    20px 20px;
}

#immersive-views {
  background-color: var(--section-teal);
  background-image:
    linear-gradient(90deg, var(--section-teal), rgb(238 244 245 / 24%) 70%),
    linear-gradient(var(--section-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--section-grid) 1px, transparent 1px);
  background-size:
    auto,
    28px 28px,
    28px 28px;
}

#protected-content {
  background-color: var(--section-yellow);
  background-image:
    linear-gradient(90deg, var(--section-yellow), rgb(255 249 232 / 24%) 75%),
    radial-gradient(circle, rgb(118 86 0 / 13%) 1px, transparent 1.5px);
  background-size:
    auto,
    16px 16px;
}

#learning-journeys {
  background-color: var(--section-green);
  background-image:
    linear-gradient(90deg, var(--section-green), rgb(239 248 243 / 24%) 85%),
    repeating-linear-gradient(
      135deg,
      transparent 0 21px,
      rgb(8 119 75 / 5%) 21px 22px,
      transparent 22px 43px
    );
}

.pricing-band {
  padding-top: 0;
  background-color: #f3f6f6;
  background-image:
    linear-gradient(180deg, #f3f6f6 5%, rgb(243 246 246 / 40%) 70%),
    linear-gradient(var(--section-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--section-grid) 1px, transparent 1px);
  background-size:
    auto,
    32px 32px,
    32px 32px;
}

.pricing-content,
.journal-list {
  padding-block: 0;
}

.journal-section {
  background-color: var(--section-yellow);
  background-image:
    linear-gradient(90deg, var(--section-yellow) 28%, rgb(255 249 232 / 24%)),
    radial-gradient(circle, rgb(118 86 0 / 13%) 1px, transparent 1.5px);
  background-size:
    auto,
    18px 18px;
  border-top-color: #ece4ce;
}

.journal-band,
.contact-band {
  background-color: #f7f9f8;
  background-image:
    linear-gradient(90deg, #f7f9f8 10%, rgb(247 249 248 / 24%) 80%),
    radial-gradient(circle, rgb(34 64 77 / 10%) 1px, transparent 1.5px);
  background-size:
    auto,
    22px 22px;
}

.contact-band .contact-intro {
  padding-top: 0;
}

.cta-section {
  background-color: var(--ink);
  background-image:
    linear-gradient(90deg, var(--ink) 26%, rgb(34 64 77 / 24%)),
    radial-gradient(
      ellipse at 95% 100%,
      rgb(30 205 130 / 12%),
      transparent 65%
    ),
    linear-gradient(rgb(255 255 255 / 6%) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 6%) 1px, transparent 1px);
  background-size:
    auto,
    auto,
    32px 32px,
    32px 32px;
  border-top: 1px solid rgb(255 255 255 / 10%);
}

/* Solid surfaces keep the subtle patterns clear of text and controls. */
.pricing-content .seat-calculator,
.pricing-content .faq-list details,
.contact-layout .contact-form-card,
.journal-list .empty-state {
  background-color: #fff;
}

.pricing-content .faq-list details {
  padding: 1rem;
  border: 1px solid var(--line);
  border-radius: var(--bs-border-radius);
}

.pricing-content .faq-list details + details {
  margin-top: 0.75rem;
}

@media (max-width: 767.98px) {
  :root {
    --section-space: 2rem;
  }

  .hero {
    background-image:
      linear-gradient(#f7faf9 12%, rgb(247 250 249 / 96%) 35%, transparent 85%),
      radial-gradient(
        ellipse at 94% 88%,
        rgb(255 193 7 / 13%),
        transparent 55%
      ),
      linear-gradient(var(--section-grid) 1px, transparent 1px),
      linear-gradient(90deg, var(--section-grid) 1px, transparent 1px);
  }
}

@media print {
  .section,
  .page-banner .page-hero {
    padding-block: 20px;
  }

  .hero,
  .section-band,
  .journal-section,
  .cta-section {
    background-image: none;
  }
}