/*
 * Shared full-width surfaces for regular page sections.
 *
 * Service and pricing page sections live inside a centered container. The
 * pseudo-element extends their semantic surface to the viewport edges. The
 * section class also owns the shared vertical rhythm for these page templates.
 */
:root {
  --site-section-surface-white: #ffffff;
  --site-section-surface-muted: #f8fafc;
  --site-section-padding-block: 88px;
  --site-section-padding-block-compact: 74px;
  --site-final-cta-surface: linear-gradient(135deg, #ffffff 0%, #fff7ed 54%, #eff6ff 100%);
  --site-final-cta-border: #e2e8f0;
  --site-final-cta-radius: 28px;
  --site-final-cta-shadow: 0 24px 70px -42px var(--landing-color-shadow-elevated);
}

.section-surface {
  position: relative;
  isolation: isolate;
  padding-block: var(--site-section-padding-block);
  --site-section-surface: var(--site-section-surface-white);
}

@media (max-width: 920px) {
  .section-surface {
    padding-block: var(--site-section-padding-block-compact);
  }
}

.section-surface::before {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--site-section-surface);
  box-shadow: 0 0 0 100vmax var(--site-section-surface);
  clip-path: inset(0 -100vmax);
  content: "";
  pointer-events: none;
}

.section-surface--white {
  --site-section-surface: var(--site-section-surface-white);
}

.section-surface--muted {
  --site-section-surface: var(--site-section-surface-muted);
}

/*
 * Service and pricing pages share one final CTA composition, including the
 * warm-to-cool panel surface used by the refined design.
 */
.final-cta-inner {
  border: 1px solid var(--site-final-cta-border);
  border-radius: var(--site-final-cta-radius);
  background: var(--site-final-cta-surface);
  box-shadow: var(--site-final-cta-shadow);
}