/* Shared white and muted surfaces. Only background colors are defined here. */
:root {
  --s-surface-white: #fff;
  --s-surface-muted: #f5f7f4;
}

body.s-home,
body.s-modern-lower,
body.s-start-guide,
body.en-page,
body.s-home #main,
body.s-modern-lower #main,
body.s-start-guide #main,
body.en-page #main {
  background-color: var(--s-surface-white) !important;
}

/* Homepage: preserve the existing alternation between major sections. */
body.s-home #main > .s-section {
  background-color: var(--s-surface-white) !important;
}
body.s-home #main > #foot-touch-intro,
body.s-home #main > #inspection,
body.s-home #main > #private,
body.s-home #main > #flow,
body.s-home #main > #access,
body.s-home #main > #reserve {
  background-color: var(--s-surface-muted) !important;
}
body.s-home #main #consultation-concerns .s-concern-symptoms li,
body.s-home #main #consultation-concerns .s-concern-life,
body.s-home #main #belief .s-four-reasons .s-reason-card {
  background-color: var(--s-surface-muted) !important;
}
body.s-home #main #foot-touch-intro .s-foot-touch-benefits li,
body.s-home #main #flow .s-flow-preparation-card {
  background-color: var(--s-surface-white) !important;
}

/* Detail pages: white reading areas, muted supplementary and booking areas. */
body.s-modern-lower #main > .page-header,
body.s-modern-lower #main > .breadcrumb,
body.s-modern-lower #main > .section {
  background-color: var(--s-surface-white) !important;
}
body.s-modern-lower #main > .section.section-alt,
body.s-modern-lower #main > .reading-cta,
body.s-modern-lower #main .article-highlight,
body.s-modern-lower #main .availability-alert,
body.s-modern-lower #main .line-reserve-panel {
  background-color: var(--s-surface-muted) !important;
}

/* The treatment detail uses its own section names. */
body.s-treatment-page #main > .treatment-hero,
body.s-treatment-page #main > .treatment-flow,
body.s-treatment-page #main > .treatment-wrap {
  background-color: var(--s-surface-white) !important;
}
body.s-treatment-page #main .treatment-section-soft,
body.s-treatment-page #main > .treatment-reserve {
  background-color: var(--s-surface-muted) !important;
}

/* Beginner guide: concerns, treatment, price, booking, then access. */
body.s-start-guide #main .s-guide-heading,
body.s-start-guide #main .s-guide-section {
  background-color: var(--s-surface-white) !important;
}
body.s-start-guide #main #guide-treatment,
body.s-start-guide #main #guide-booking,
body.s-start-guide #main .s-guide-facts > span,
body.s-start-guide #main .s-guide-price > div {
  background-color: var(--s-surface-muted) !important;
}

/* English page: retain its section grouping with the same two surfaces. */
body.en-page #main > .section {
  background-color: var(--s-surface-white) !important;
}
body.en-page #main > .section.tint,
body.en-page #main > .section.booking {
  background-color: var(--s-surface-muted) !important;
}

/* v137: extend the beginner guide's section backgrounds to both screen edges.
   The backdrop is painted outside the existing content column, preserving layout. */
body.s-start-guide #main .s-guide-heading,
body.s-start-guide #main .s-guide-section {
  --s-guide-band-color: var(--s-surface-white);
  position: relative;
  isolation: isolate;
  border-color: transparent !important;
}
body.s-start-guide #main #guide-treatment,
body.s-start-guide #main #guide-booking {
  --s-guide-band-color: var(--s-surface-muted);
}
body.s-start-guide #main .s-guide-heading::before,
body.s-start-guide #main .s-guide-section::before {
  content: "";
  position: absolute;
  inset: -1px;
  z-index: -1;
  pointer-events: none;
  background-color: var(--s-guide-band-color);
  box-shadow: 0 0 0 100vmax var(--s-guide-band-color);
  clip-path: inset(0 -100vmax);
}

/* v138: include the welcome block in the alternating guide bands. */
body.s-start-guide #main .s-guide-heading {
  --s-guide-band-color: var(--s-surface-muted);
  background-color: var(--s-surface-muted) !important;
}
body.s-start-guide #main .s-guide-facts > span {
  background-color: var(--s-surface-white) !important;
}