/* One background rhythm: ivory / soft green. Dark green marks our history;
   warm yellow marks the final invitation. Supplied artwork is never recoloured. */
:root {
  --surface-base: #fcfbf5;
  --surface-soft: #eaf0e3;
  --surface-history: #173e31;
  --surface-invitation: #f4efd9;
  --paper: var(--surface-base);
  --trust-paper: var(--surface-soft);
  --pr-stage: var(--surface-soft);
}

body,
.hero,
.hero-foot,
.welcome,
.coach-section,
.place-section,
.faq-section,
body > footer {
  background: var(--surface-base);
}

.trust-scene,
.pr-section,
.pr-intro,
.pr-section .pr-chapter,
.pr-invitation,
.system-section,
.steps-section {
  background: var(--surface-soft);
}

/* The four reassurance chapters form one calm, continuous green scene. */
.pr-section .pr-chapter-dark { color: var(--deep); }
.pr-chapter-dark .pr-ink { color: var(--pr-accent); }
.pr-chapter-dark .pr-chapter-label { color: var(--green); }
.pr-section .pr-fact strong { color: var(--green); }
.pr-fact { border-top-color: var(--line); }
.pr-invitation { border-top-color: var(--line); }
.pr-chapter-warm .pr-closing {
  background: var(--surface-base);
  border-left-color: var(--green);
}

.family-story { background: var(--surface-history); }
.final-section { background: var(--surface-invitation); }

/* Functional panels use ivory inside green sections, with green accents. */
.ticket-demo,
.course-grid { background: var(--surface-base); }
.progress-stepper {
  --ps-stage: var(--surface-base);
  --ps-circle-bg: var(--surface-soft);
}
.renewal-note,
.coach-note,
.coach-portrait:before,
.hero .age-label > span { background: var(--surface-soft); }
.coach-note { border-left-color: var(--green); }

@media (max-width: 900px) {
  /* Each mobile course stays on the same ivory comparison surface as desktop. */
  .course-grid { background: var(--surface-base); }
}