/* SPONTI | Design System 2026-11-07
   Approved mockup: cream canvas, fine green corner arcs, soft peach/lime glows,
   floating white cards, dark-teal typography and restrained orange accents.
   Keep existing page structure, forms and booking integrations intact. */
:root{
  --sponti-canvas:#f7f3ec;
  --sponti-forest:#15554d;
  --sponti-peach:#f8ac77;
  --sponti-lime:#d9e9a4;
  --sponti-paper:rgba(255,255,255,.88);
  --sponti-edge:rgba(34,79,68,.10);
  --sponti-shadow:0 18px 48px rgba(51,57,44,.085);
}
/* Use explicit high-specificity rules to supersede previous global background tests. */
html{background:#f7f3ec!important;}
html body,
html body:has(.hero),
html body:not(:has(.hero)),
html body.sponti-detail-page,
html body:not(.sponti-detail-page){
  background-color:#f7f3ec!important;
  background-image:
    radial-gradient(circle 350px at -9% -1%,transparent 99.20%,rgba(19,85,76,.68) 99.42%,transparent 99.64%),
    radial-gradient(circle 490px at -9% -1%,transparent 99.20%,rgba(19,85,76,.50) 99.42%,transparent 99.64%),
    radial-gradient(circle 420px at 110% 107%,transparent 99.19%,rgba(19,85,76,.65) 99.40%,transparent 99.62%),
    radial-gradient(circle 570px at 110% 107%,transparent 99.20%,rgba(19,85,76,.27) 99.42%,transparent 99.64%),
    radial-gradient(ellipse 58% 61% at 107% 0%,rgba(255,171,102,.37),rgba(255,198,151,.13) 41%,transparent 79%),
    radial-gradient(ellipse 58% 59% at -6% 99%,rgba(220,238,156,.38),rgba(220,238,156,.11) 43%,transparent 79%),
    linear-gradient(120deg,#f8f5ef 0%,#f8f4ee 47%,#f8f2eb 100%)!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%,100% 100%!important;
  background-attachment:fixed!important;
}
/* Navigation follows the reference: floating pill, glass-white, active orange line. */
html body .site-header.sponti-unified-header{
  max-width:1280px;
  background:rgba(255,255,255,.84)!important;
  border:1px solid rgba(255,255,255,.72)!important;
  border-radius:29px!important;
  box-shadow:0 14px 44px rgba(59,58,46,.085)!important;
  backdrop-filter:blur(16px);
}
html body .site-header.sponti-unified-header .logo span{color:#15554d!important}
html body .site-header.sponti-unified-header .sponti-global-nav a[aria-current=page]::after{background:#f36d3f;}
/* Typography & color across content, without overriding semantic control labels. */
html body :is(.courses-heading h1,.info-page h1,.provider-hero h1,.account-intro h1,.why-intro h1,
                .provider-directory-heading h2,.provider-section-heading h2,.locations-heading h2){
  color:#15554d;
  letter-spacing:-.04em;
}
html body :is(.courses-heading>p,.provider-hero p,.why-intro p,.account-intro p,.provider-section-heading p){
  color:#596e65;line-height:1.72;
}
/* Consistent floating paper surfaces — do not change actual information or controls. */
html body :is(.course-card,.provider-directory-card,.provider-benefit-card,.provider-cost-card,
              .info-card,.account-card,.step-card,.story-card,.review-card,.provider-hero-card,
              .hero-card,.whatsapp-community-card,.detail-media-card,.booking-summary,
              .booking-step,.review-form-section,.provider-public-card){
  background-color:rgba(255,255,255,.88)!important;
  border:1px solid rgba(255,255,255,.78)!important;
  border-radius:26px!important;
  box-shadow:0 19px 48px rgba(48,60,49,.09)!important;
}
html body :is(.course-card,.provider-directory-card,.story-card,.provider-public-card){overflow:hidden;}
html body :is(.account-card,.booking-step,.review-form-section,.info-card,.provider-cost-card,.provider-benefit-card){
  backdrop-filter:blur(9px);
}
html body :is(.info-card,.provider-benefit-card,.provider-cost-card,.step-card,.review-form-section){
  padding:clamp(20px,2.4vw,32px);
}
html body .courses-heading{
  max-width:1220px;
  background:rgba(255,255,255,.54)!important;
  border:1px solid rgba(255,255,255,.66)!important;
  border-radius:32px!important;
  box-shadow:0 18px 49px rgba(48,60,49,.058)!important;
}
html body .course-grid{gap:clamp(18px,2.1vw,28px);}
html body .course-card .course-card-body{padding:clamp(20px,2vw,27px);}
html body .course-card .course-image{border-radius:22px 22px 0 0;}
html body .course-card h2{color:#15554d;letter-spacing:-.025em;}
html body .course-card .course-short-description{line-height:1.65;}
html body :is(.course-filters .filter,.detail-chips span,.provider-offer-pill){
  border-radius:999px;
}
html body :is(.booking-primary,.course-book,.provider-directory-more-button,.provider-hero .button-primary){
  border-radius:999px!important;
  background:linear-gradient(110deg,#14554c,#1a675b)!important;
  color:#fff!important;
  border:1px solid transparent!important;
  box-shadow:0 9px 20px rgba(21,85,76,.14);
}
html body :is(.booking-primary,.course-book,.provider-directory-more-button):not(.is-disabled):hover{
  background:linear-gradient(110deg,#216e60,#185a50)!important;
}
html body :is(.booking-primary,.course-book,.provider-directory-more-button,.button-primary,
              .provider-hero .button-primary):focus-visible{
  outline:3px solid #eb8455;outline-offset:3px;
}
html body :is(.info-grid,.provider-benefit-grid,.provider-costs-grid,.provider-directory-grid,.story-grid){
  gap:clamp(18px,2.5vw,28px);
}
html body :is(.info-page,.account-shell,.provider-section,.provider-directory,.course-guide){
  position:relative;z-index:1;
}
html body :is(.account-shell,.info-page,.provider-directory){max-width:1220px;}
html body :is(.account-shell,.info-page) :is(input,textarea,select){
  border-radius:12px;
}
/* Hero and supporting sections: soften the original dense color panels.
   Reserve special illustrations, badges and colored cards intentionally. */
html body .hero .hero-news-board{background:rgba(255,255,255,.92)!important;}
html body :is(.categories-section,.testimonial-section,.cta-section,.how-section-band){
  border-radius:30px;
}
html body :is(.provider-benefit-card,.provider-cost-card,.info-card,.step-card,.course-card,.provider-directory-card){
  transition:transform .2s ease,box-shadow .2s ease;
}
@media(hover:hover) and (pointer:fine){
  html body :is(.provider-benefit-card,.provider-cost-card,.info-card,.step-card,.course-card,.provider-directory-card):hover{
    transform:translateY(-3px);
    box-shadow:0 24px 54px rgba(48,60,49,.13)!important;
  }
}
@media(max-width:850px){
  html body .site-header.sponti-unified-header{border-radius:22px!important;}
  html body .courses-heading{margin:16px 12px 28px;border-radius:24px!important;padding:26px 18px;}
  html body :is(.categories-section,.testimonial-section,.cta-section,.how-section-band){border-radius:22px;}
  html body :is(.info-card,.provider-benefit-card,.provider-cost-card,.step-card,.review-form-section){padding:20px;}
}
@media(max-width:480px){
  html body :is(.course-card,.provider-directory-card,.provider-benefit-card,.provider-cost-card,.info-card,.account-card,.step-card,
                .story-card,.review-card,.detail-media-card,.booking-summary,.booking-step){border-radius:20px!important;}
  html body .course-grid{gap:18px;}
}
@media(prefers-reduced-motion:reduce){
  html body :is(.provider-benefit-card,.provider-cost-card,.info-card,.step-card,.course-card,.provider-directory-card){
    transition:none!important;transform:none!important;
  }
}

/* V2: sampled from approved 1672×941 reference:
   cream ~ #FAF4EC, peach glow ~ #FED7B6, lime ~ #E9EEBE.
   Preserve legibility by keeping visual elements behind content. */
html body,
html body:has(.hero),
html body:not(:has(.hero)),
html body.sponti-detail-page,
html body:not(.sponti-detail-page){
  background-color:#faf4ec!important;
  background-image:
    radial-gradient(circle 425px at -15% -12%,transparent 99.48%,rgba(20,83,75,.70) 99.65%,transparent 99.85%),
    radial-gradient(circle 590px at -15% -12%,transparent 99.48%,rgba(20,83,75,.52) 99.65%,transparent 99.85%),
    radial-gradient(circle 480px at 116% 110%,transparent 99.48%,rgba(20,83,75,.70) 99.65%,transparent 99.85%),
    radial-gradient(circle 620px at 116% 110%,transparent 99.48%,rgba(20,83,75,.28) 99.65%,transparent 99.85%),
    radial-gradient(ellipse 55% 65% at 108% 8%,rgba(255,174,113,.47),rgba(255,205,169,.20) 45%,transparent 78%),
    radial-gradient(ellipse 55% 65% at -8% 101%,rgba(215,234,145,.49),rgba(224,236,179,.19) 43%,transparent 77%),
    linear-gradient(125deg,#faf4ec 0%,#f9f1e9 58%,#f8f0e7 100%)!important;
}
/* Consistent, readable rhythm between separate information groups. */
html body main > :is(section,article):not(.hero):not(.courses-heading),
html body main > .provider-directory {
  margin-block:clamp(35px,5vw,84px);
}
html body main > :is(section,article):first-child {margin-top:0;}
html body :is(.provider-section,.provider-directory,.course-guide,.review-form-section,.why-values,.why-team-voices) {
  padding-block:clamp(34px,4.8vw,72px);
}
html body :is(.provider-section-heading,.provider-directory-heading,.why-values-heading,.why-team-voices-heading,
              .locations-heading,.sponti-faq-heading) {
  margin-bottom:clamp(20px,3vw,36px);
}
html body :is(.provider-section-heading,.provider-directory-heading,.why-values-heading,.why-team-voices-heading,
              .locations-heading,.sponti-faq-heading) h2 {
  color:#15554d;
  font-size:clamp(29px,3.5vw,48px);
  line-height:1.13;
  letter-spacing:-.035em;
}
html body :is(.provider-benefit-grid,.provider-costs-grid,.provider-directory-grid,.info-grid,.story-grid,.why-values-grid){
  align-items:stretch;
  gap:clamp(16px,2.5vw,28px);
}
html body :is(.provider-benefit-card,.provider-cost-card,.info-card,.step-card,.account-card,.review-form-section,.booking-step){
  padding:clamp(22px,2.7vw,36px);
}
html body :is(.provider-benefit-card,.provider-cost-card,.info-card,.step-card,.account-card,.review-form-section,.booking-step) :is(h2,h3){
  color:#15554d;line-height:1.22;
}
html body :is(.provider-benefit-card,.provider-cost-card,.info-card,.step-card,.account-card) p{
  line-height:1.72;
}
/* Keep panels distinct from the canvas, without overpowering the mockup's soft paper surfaces. */
html body :is(.provider-hero-card,.course-card,.provider-directory-card,.info-card,.account-card,.provider-benefit-card,
              .provider-cost-card,.booking-summary,.booking-step,.review-form-section){
  background:rgba(255,255,255,.90)!important;
  border:1px solid rgba(255,255,255,.86)!important;
  box-shadow:0 17px 46px rgba(60,55,45,.085)!important;
}
html body :is(.course-card,.provider-directory-card,.provider-benefit-card,.provider-cost-card,.info-card,.account-card) {
  min-width:0;
}
html body :is(.categories-section,.how-section-band,.testimonial-section,.cta-section,.provider-costs,.why-values){
  margin-inline:auto;
  max-width:1280px;
}
html body .course-grid{align-items:stretch;}
html body .course-card{display:flex;flex-direction:column;}
html body .course-card .course-card-body{display:flex;flex:1;flex-direction:column;}
html body .course-card .course-bottom{margin-top:auto;}
html body .account-shell{padding-bottom:clamp(50px,7vw,110px);}
html body .info-page{padding-bottom:clamp(48px,6vw,94px);}
html body .booking-main{padding-bottom:clamp(65px,8vw,120px);}
@media(max-width:850px){
  html body main > :is(section,article):not(.hero):not(.courses-heading){margin-block:34px;}
  html body :is(.provider-section,.provider-directory,.course-guide,.why-values,.why-team-voices){padding-block:34px;}
  html body :is(.provider-benefit-card,.provider-cost-card,.info-card,.step-card,.account-card,.review-form-section,.booking-step){padding:21px;}
  html body :is(.provider-benefit-grid,.provider-costs-grid,.provider-directory-grid,.info-grid,.story-grid,.why-values-grid){gap:17px;}
}

/* Section panels — approved warm sage/cream/peach sample, 07.11.2026.
   Background layers replace decorative pseudo-elements to keep links, form controls
   and interactive overlays clickable and accessible. */
:root{
 --sponti-section-border:rgba(182,157,138,.32);
 --sponti-section-shadow:0 12px 32px rgba(82,70,56,.055);
 --sponti-section-background:
   radial-gradient(circle 520px at 110% 55%,transparent 76.4%,rgba(183,164,150,.23) 76.55%,transparent 76.8%),
   radial-gradient(circle 670px at 110% 55%,transparent 76.4%,rgba(183,164,150,.14) 76.55%,transparent 76.8%),
   radial-gradient(ellipse 34% 105% at 108% 50%,rgba(233,204,186,.53),transparent 90%),
   radial-gradient(ellipse 33% 115% at -4% 52%,rgba(195,219,190,.62),transparent 90%),
   linear-gradient(100deg,#e9ebdd 0%,#efe8de 35%,#efe5da 70%,#ecdacf 100%);
}
html body :is(
  .categories-section,.locations-section,.how-section-band,.testimonial-section,
  .cta-section,.provider-section,.provider-directory,.course-guide,.why-problem,
  .why-values,.why-team-voices,.review-form-section,.provider-costs,.sponti-faq-inner,
  .info-page > .info-grid,.account-shell > section
) {
  box-sizing:border-box;
  border:1px solid var(--sponti-section-border)!important;
  border-radius:36px!important;
  background:var(--sponti-section-background)!important;
  box-shadow:var(--sponti-section-shadow)!important;
  background-repeat:no-repeat!important;
}
/* Main sections should have a visible breathing-space inset. Existing content remains. */
html body :is(
  .categories-section,.locations-section,.how-section-band,.testimonial-section,
  .cta-section,.provider-section,.provider-directory,.course-guide,.why-problem,
  .why-values,.why-team-voices,.provider-costs,.sponti-faq-inner
) {
  padding:clamp(28px,4vw,56px)!important;
}
html body :is(
  .categories-section,.locations-section,.how-section-band,.testimonial-section,
  .cta-section,.provider-section,.provider-directory,.course-guide,.why-problem,
  .why-values,.why-team-voices,.provider-costs,.sponti-faq-inner
) > * {max-width:100%;min-width:0;}
html body :is(.info-page > .info-grid,.account-shell > section,.review-form-section) {
  padding:clamp(20px,3vw,36px)!important;
}
html body :is(.categories-section,.locations-section,.how-section-band,.testimonial-section,
  .cta-section,.provider-section,.provider-directory,.course-guide,.why-problem,
  .why-values,.why-team-voices,.review-form-section,.provider-costs,.sponti-faq-inner)
  :is(h2,h3,p) {max-width:100%;}
/* Nested cards remain light for separation and readability. */
html body :is(
  .course-card,.provider-directory-card,.provider-benefit-card,.provider-cost-card,
  .info-card,.account-card,.story-card,.review-card,.step-card,.booking-summary,
  .booking-step,.provider-hero-card
){
  background:rgba(255,255,255,.88)!important;
  border:1px solid rgba(255,255,255,.84)!important;
  box-shadow:0 12px 29px rgba(78,67,54,.065)!important;
  border-radius:24px!important;
}
html body :is(.testimonial-section,.cta-section,.why-problem,.why-values,
 .why-team-voices,.provider-costs) :is(h2,h3) {color:#15554d;}
html body :is(.testimonial-section,.cta-section,.why-problem,.why-values,
 .why-team-voices,.provider-costs) p {color:#4e675c;}
/* Keep controls and chips visually distinct from section canvas. */
html body :is(.cta-section,.testimonial-section,.provider-costs) a.button,
html body :is(.cta-section,.testimonial-section,.provider-costs) button {
  position:relative;
}
@media(max-width:850px){
  html body :is(
   .categories-section,.locations-section,.how-section-band,.testimonial-section,
   .cta-section,.provider-section,.provider-directory,.course-guide,.why-problem,
   .why-values,.why-team-voices,.provider-costs,.sponti-faq-inner
  ){
   border-radius:24px!important;
   padding:clamp(18px,4.5vw,28px)!important;
  }
  html body :is(.info-page > .info-grid,.account-shell > section,.review-form-section){
   border-radius:24px!important;padding:20px!important;
  }
}

/* FAQ: outer section must not mask the new sage–cream–peach panel.
   Keep native <details> accordion, FAQ content and interactions unchanged. */
html body .sponti-faq {
  width:min(1280px,calc(100% - 40px));
  max-width:1280px;
  margin:clamp(35px,5vw,80px) auto!important;
  padding:0!important;
  border:0!important;
  border-radius:36px;
  background:transparent!important;
  box-shadow:none!important;
  overflow:visible;
}
html body .sponti-faq::before,
html body .sponti-faq::after { content:none!important; display:none!important; }
html body .sponti-faq-inner {
  position:relative;
  width:100%;
  max-width:none;
  margin:0;
  padding:clamp(28px,4.5vw,62px)!important;
  box-sizing:border-box;
  overflow:hidden;
  border-radius:36px!important;
  background:var(--sponti-section-background)!important;
  border:1px solid var(--sponti-section-border)!important;
  box-shadow:var(--sponti-section-shadow)!important;
  grid-template-columns:minmax(225px,.8fr) minmax(0,1.4fr);
  gap:clamp(28px,5vw,78px);
}
html body .sponti-faq-heading {min-width:0;}
html body .sponti-faq-heading h2 {color:#15554d;}
html body .sponti-faq-heading p {color:#526b5e;}
html body .sponti-faq-items {
  min-width:0;
  border-top:0;
  display:grid;
  align-content:start;
  gap:12px;
}
html body .sponti-faq-items details {
  min-width:0;
  margin:0;
  padding:0 19px;
  border:1px solid rgba(255,255,255,.85);
  border-radius:17px;
  background:rgba(255,255,255,.85);
  box-shadow:0 7px 19px rgba(78,67,54,.045);
  overflow:hidden;
}
html body .sponti-faq-items summary {
  padding:17px 0;
  color:#1d5047;
}
html body .sponti-faq-items details[open] {
  background:rgba(255,255,255,.94);
  border-color:rgba(21,85,76,.17);
}
html body .sponti-faq-items details p {
  margin:0 0 20px;
  color:#51695e;
  overflow-wrap:anywhere;
}
html body .sponti-faq-items summary span {
  border-color:rgba(21,85,76,.19);
  background:#f5f5ec;
}
@media(max-width:800px) {
  html body .sponti-faq {width:calc(100% - 24px);border-radius:24px;}
  html body .sponti-faq-inner {
    grid-template-columns:minmax(0,1fr);
    gap:25px;
    padding:clamp(20px,4.5vw,32px)!important;
    border-radius:24px!important;
  }
  html body .sponti-faq-heading {position:static;}
}
@media(max-width:520px) {
  html body .sponti-faq-items details {padding:0 14px;border-radius:14px;}
  html body .sponti-faq-items summary {padding:15px 0;font-size:15px;}
  html body .sponti-faq-items details p {font-size:14px;margin-bottom:17px;}
}

/* Unified side gutters for large section panels, as on the CTA/FAQ screenshot.
   Only outer, top-level sections are constrained; nested cards and grids retain
   their existing widths. */
:root {
  --sponti-section-gutter:clamp(22px,3vw,48px);
  --sponti-section-max-width:1280px;
}
html body main > :is(
  .categories-section,.locations-section,.how-section-band,.testimonial-section,
  .cta-section,.provider-section,.provider-directory,.course-guide,.why-problem,
  .why-values,.why-team-voices,.provider-costs,.review-form-section,
  .courses-heading,.partner-section
),
html body main > .sponti-faq {
  box-sizing:border-box!important;
  width:min(var(--sponti-section-max-width),calc(100% - (2 * var(--sponti-section-gutter))))!important;
  max-width:var(--sponti-section-max-width)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
/* FAQ content uses the same side gutter, avoiding the previous wider edge. */
html body main > .sponti-faq .sponti-faq-inner {
  width:100%;
  max-width:100%;
}
@media(max-width:800px) {
  :root {--sponti-section-gutter:12px;}
  html body main > :is(
    .categories-section,.locations-section,.how-section-band,.testimonial-section,
    .cta-section,.provider-section,.provider-directory,.course-guide,.why-problem,
    .why-values,.why-team-voices,.provider-costs,.review-form-section,
    .courses-heading,.partner-section
  ),
  html body main > .sponti-faq {
    width:calc(100% - 24px)!important;
    margin-left:auto!important;
    margin-right:auto!important;
  }
}

/* Reduced editorial layout — 07.11.2026.
   Keep the approved global background, floating navigation, and smaller cards.
   Reserve the colored section panel only for focused calls to action. */
html body main :is(
 .categories-section,.locations-section,.how-section-band,.testimonial-section,
 .provider-section,.provider-directory,.course-guide,.why-problem,.why-values,
 .why-team-voices,.provider-costs,.partner-section
),
html body .sponti-faq-inner,
html body .info-page > .info-grid,
html body .account-shell > section,
html body main > .review-form-section {
 background:transparent!important;
 background-image:none!important;
 border-color:transparent!important;
 border-width:0!important;
 box-shadow:none!important;
}
/* Restore an open editorial canvas between major sections. */
html body main > :is(
 .categories-section,.locations-section,.how-section-band,.testimonial-section,
 .provider-section,.provider-directory,.course-guide,.why-problem,.why-values,
 .why-team-voices,.provider-costs,.partner-section
),
html body main > .sponti-faq {
 border-radius:0!important;
 overflow:visible!important;
}
html body main :is(
 .categories-section,.locations-section,.how-section-band,.testimonial-section,
 .provider-section,.provider-directory,.course-guide,.why-problem,.why-values,
 .why-team-voices,.provider-costs,.partner-section
)::before,
html body main :is(
 .categories-section,.locations-section,.how-section-band,.testimonial-section,
 .provider-section,.provider-directory,.course-guide,.why-problem,.why-values,
 .why-team-voices,.provider-costs,.partner-section
)::after {
 content:none!important;
 display:none!important;
}
/* FAQ questions remain distinct white cards, but the enclosing panel is gone. */
html body .sponti-faq {
 background:transparent!important;
 box-shadow:none!important;
 border:0!important;
 overflow:visible!important;
}
html body .sponti-faq-inner {
 padding:clamp(16px,2vw,28px) 0!important;
 border-radius:0!important;
 overflow:visible!important;
}
html body .sponti-faq-items details{
 background:rgba(255,255,255,.90)!important;
 border:1px solid rgba(255,255,255,.85)!important;
 box-shadow:0 10px 28px rgba(48,60,49,.07)!important;
}
/* Pricing and provider content now sit directly on the page background. */
html body .provider-costs,
html body .provider-section,
html body .provider-directory {background:transparent!important;}
/* Preserve the warm accent on the one large conversion banner. */
html body .cta-section {
 background:var(--sponti-section-background)!important;
 border:1px solid var(--sponti-section-border)!important;
 border-radius:36px!important;
 box-shadow:var(--sponti-section-shadow)!important;
 overflow:hidden!important;
}
html body .cta-section::before,
html body .cta-section::after {pointer-events:none!important;}
/* White elements inside the clean sections provide hierarchy. */
html body :is(
 .course-card,.category-card,.provider-directory-card,.provider-benefit-card,
 .provider-cost-card,.info-card,.account-card,.story-card,.step-card,
 .review-card,.booking-summary,.booking-step
){
 border-radius:24px!important;
 box-shadow:0 12px 30px rgba(48,60,49,.065)!important;
}
html body :is(.course-guide,.provider-directory,.provider-section,.why-values,.why-team-voices){
 padding-block:clamp(28px,4vw,58px)!important;
}
html body .sponti-faq-heading h2,
html body :is(.provider-directory-heading,.provider-section-heading,.locations-heading) h2{
 color:#15554d;
}
@media(max-width:800px){
 html body .sponti-faq-inner{padding:14px 0!important;}
 html body .cta-section{border-radius:24px!important;}
 html body :is(.course-guide,.provider-directory,.provider-section,.why-values,.why-team-voices){
   padding-block:28px!important;
 }
}

/* Explicit homepage cleanup: override legacy page-specific section backgrounds and ring pseudo-elements.
   CTA alone keeps the featured colored panel. */
html body:has(> main .hero) main > :is(
 .categories-section,.locations-section,.how-section-band,
 .testimonial-section,.sponti-faq
) {
 background:transparent!important;
 background-image:none!important;
 border:0!important;
 box-shadow:none!important;
 border-radius:0!important;
 overflow:visible!important;
}
html body:has(> main .hero) main > :is(
 .categories-section,.locations-section,.how-section-band,
 .testimonial-section,.sponti-faq
)::before,
html body:has(> main .hero) main > :is(
 .categories-section,.locations-section,.how-section-band,
 .testimonial-section,.sponti-faq
)::after{
 content:none!important;
 display:none!important;
}
html body:has(> main .hero) main > .sponti-faq .sponti-faq-inner{
 background:transparent!important;
 border:0!important;
 box-shadow:none!important;
 border-radius:0!important;
 overflow:visible!important;
 padding:20px 0!important;
}
html body:has(> main .hero) main > .how-section-band .split-section {
 background:transparent!important;
 background-image:none!important;
 border:0!important;
 box-shadow:none!important;
 border-radius:0!important;
}
html body:has(> main .hero) main > .how-section-band .split-section::before,
html body:has(> main .hero) main > .how-section-band .split-section::after{
 content:none!important;
 display:none!important;
}
html body:has(> main .hero) main > :is(
 .categories-section,.locations-section,.how-section-band,.sponti-faq
){
 padding:clamp(30px,4.5vw,64px) clamp(16px,3vw,45px)!important;
}
html body:has(> main .hero) main > .cta-section{
 background:var(--sponti-section-background)!important;
 border:1px solid var(--sponti-section-border)!important;
 border-radius:36px!important;
 box-shadow:var(--sponti-section-shadow)!important;
}
@media(max-width:800px){
 html body:has(> main .hero) main > :is(
  .categories-section,.locations-section,.how-section-band,.sponti-faq
 ){padding:28px 12px!important;}
 html body:has(> main .hero) main > .cta-section{border-radius:24px!important;}
}

/* Deep green footer redesign – real brand symbol from /logo.png. */
html body .site-footer,
html body.provider-page .site-footer {
  box-sizing:border-box;
  width:100%;
  max-width:none;
  margin:0;
  padding:0 clamp(22px,5vw,86px)!important;
  border:0!important;
  background:#193f37!important;
  background-image:none!important;
  color:#f6f1e8!important;
  border-radius:0!important;
  box-shadow:none!important;
  overflow:hidden;
}
html body .site-footer::before,
html body .site-footer::after {content:none!important;display:none!important;}
html body .site-footer .footer-main{
  display:grid;
  grid-template-columns:minmax(230px,1fr) minmax(0,1.65fr);
  gap:clamp(45px,8vw,145px);
  align-items:start;
  max-width:1380px;
  margin-inline:auto;
  padding:clamp(64px,7vw,106px) 0 clamp(46px,5vw,76px)!important;
}
html body .site-footer .footer-brand .logo{
  display:inline-flex;
  gap:12px;
  align-items:center;
  text-decoration:none;
  margin:0 0 20px;
  color:#fbf5e9!important;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(37px,3.4vw,54px);
  font-weight:700;
  line-height:1.1;
  letter-spacing:-.045em;
}
html body .site-footer .footer-brand .logo img{
  display:block;
  height:clamp(52px,5vw,74px)!important;
  width:auto!important;
  max-width:90px;
  object-fit:contain;
}
html body .site-footer .footer-brand p{
  max-width:395px;
  margin:0;
  color:#d7e3da!important;
  font-size:clamp(14px,1.15vw,17px);
  line-height:1.8;
}
html body .site-footer .footer-nav{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(20px,3vw,50px);
  width:100%;
}
html body .site-footer .footer-column {
  display:flex;
  flex-direction:column;
  min-width:0;
  align-items:flex-start;
  gap:13px;
}
html body .site-footer .footer-column > strong {
  display:block;
  margin:0 0 12px!important;
  padding:0 0 12px!important;
  background:transparent!important;
  border:0!important;
  border-bottom:2px solid #f18b5f!important;
  color:#faf4ea!important;
  font-family:'Playfair Display',Georgia,serif;
  font-size:clamp(19px,1.5vw,25px);
  line-height:1.25;
  font-weight:600;
  letter-spacing:-.01em;
  text-transform:none;
}
html body .site-footer .footer-column a {
  color:#e3ebe4!important;
  text-decoration:none;
  font-size:clamp(13px,1.06vw,16px);
  line-height:1.5;
  font-weight:400;
  transition:color .2s ease,transform .2s ease;
}
html body .site-footer .footer-column a:hover,
html body .site-footer .footer-column a:focus-visible {
  color:#ffaf83!important;
}
html body .site-footer .footer-column a:focus-visible {
  outline:2px solid #ffaf83;
  outline-offset:5px;
  border-radius:3px;
}
html body .site-footer .footer-bottom{
  display:flex;
  justify-content:space-between;
  gap:18px;
  max-width:1380px;
  margin:0 auto;
  padding:23px 0 33px!important;
  border-top:1px solid rgba(250,244,234,.38)!important;
  color:#d7e3da!important;
  font-size:12px;
  letter-spacing:.015em;
}
html body .site-footer .footer-bottom span {color:inherit!important;}
@media(max-width:1050px) {
  html body .site-footer .footer-main{grid-template-columns:1fr;gap:40px;}
  html body .site-footer .footer-nav{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media(max-width:640px) {
  html body .site-footer{padding:0 24px!important;}
  html body .site-footer .footer-main {padding:54px 0 38px!important;gap:37px;}
  html body .site-footer .footer-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 18px;}
  html body .site-footer .footer-column:last-child{grid-column:1/-1;}
  html body .site-footer .footer-column > strong{font-size:20px;}
  html body .site-footer .footer-column a{font-size:14px;}
  html body .site-footer .footer-bottom {padding:20px 0 27px!important;flex-wrap:wrap;}
  html body .site-footer .footer-brand .logo img{height:55px!important;}
}
@media(max-width:370px) {
  html body .site-footer .footer-nav {grid-template-columns:1fr;}
  html body .site-footer .footer-column:last-child{grid-column:auto;}
}

/* Compact WhatsApp announcement, aligned with the refined Sponti visual language.
   The full bar remains a single accessible link to the existing community. */
html body > a.top-announcement {
  display:flex!important;
  box-sizing:border-box;
  min-height:44px!important;
  width:100%;
  margin:0;
  padding:7px 18px!important;
  align-items:center;
  justify-content:center;
  gap:9px;
  border:0!important;
  border-bottom:1px solid rgba(30,82,67,.10)!important;
  background:linear-gradient(95deg,#e7eedc 0%,#f8f2e7 53%,#f4e6d8 100%)!important;
  color:#215447!important;
  font-family:'DM Sans',sans-serif;
  font-size:12.5px!important;
  font-weight:600;
  letter-spacing:.004em!important;
  line-height:1.4;
  text-decoration:none!important;
  transition:background .2s ease;
}
html body > a.top-announcement::before {
  content:"";
  display:inline-block;
  width:8px;
  height:8px;
  flex:0 0 8px;
  background:#3c8b68;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(60,139,104,.10);
  margin-right:5px;
}
html body > a.top-announcement :is(.top-announcement-desktop,.top-announcement-mobile){
  color:inherit!important;
  line-height:1.4;
}
html body > a.top-announcement strong {
  display:inline-flex;
  align-items:center;
  min-height:28px;
  margin-left:6px;
  padding:5px 13px;
  border:1px solid rgba(30,82,67,.14);
  border-radius:999px;
  background:#1a5948;
  color:#fffaf1!important;
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  box-shadow:0 3px 9px rgba(24,75,58,.10);
  transition:transform .2s ease,background .2s ease;
}
html body > a.top-announcement:hover {
  background:linear-gradient(95deg,#dfead2 0%,#f5eddf 53%,#f1e0d0 100%)!important;
}
html body > a.top-announcement:hover strong,
html body > a.top-announcement:focus-visible strong {
  background:#124b3b;
  transform:translateY(-1px);
}
html body > a.top-announcement:focus-visible {
  outline:2px solid #ef8c5d;
  outline-offset:-3px;
}
@media(max-width:620px) {
  html body > a.top-announcement{
    min-height:42px!important;
    padding:6px 10px!important;
    font-size:11.5px!important;
  }
  html body > a.top-announcement::before {width:7px;height:7px;flex-basis:7px;margin-right:0;}
  html body > a.top-announcement strong{
    min-height:26px;
    padding:4px 11px;
    font-size:11px;
    margin-left:5px;
  }
}
@media(prefers-reduced-motion:reduce) {
 html body > a.top-announcement,
 html body > a.top-announcement strong{transition:none!important;}
}

/* Refined WhatsApp announcement: strong contrast without orange background. */
html body > a.top-announcement {
  min-height:44px!important;
  padding:7px 18px!important;
  background:#18483e!important;
  color:#faf5e9!important;
  border-bottom:1px solid rgba(255,255,255,.13)!important;
  box-shadow:0 3px 12px rgba(22,61,51,.09)!important;
  font-size:12.5px!important;
  font-weight:600!important;
}
html body > a.top-announcement::before {
  background:#d9e8bd!important;
  box-shadow:0 0 0 4px rgba(217,232,189,.15)!important;
}
html body > a.top-announcement strong {
  background:#f9f3e9!important;
  color:#18483e!important;
  border:1px solid rgba(255,255,255,.5)!important;
  box-shadow:none!important;
}
html body > a.top-announcement:hover {background:#205b4c!important;}
html body > a.top-announcement:hover strong,
html body > a.top-announcement:focus-visible strong {background:#e9efdc!important;color:#123f34!important;}
@media(max-width:620px) {
  html body > a.top-announcement {min-height:42px!important;padding:7px 10px!important;font-size:11px!important;}
}

/* Consistent outline SVG symbols instead of font-dependent pictograms. */
html body .sponti-inline-icon {
 display:inline-block;
 width:1.1em;
 height:1.1em;
 fill:none;
 stroke:currentColor;
 stroke-width:2;
 stroke-linecap:round;
 stroke-linejoin:round;
 flex-shrink:0;
 vertical-align:-.16em;
}
html body .partner-check {
 display:inline-flex;
 align-items:center;
 justify-content:center;
}
html body .partner-check .sponti-inline-icon{
 width:17px;
 height:17px;
}
html body .provider-cost-icon .sponti-inline-icon{
 width:28px;
 height:28px;
}
html body .booking-fact-icon{
 display:inline-flex;
 align-items:center;
 justify-content:center;
 width:21px;
 height:21px;
 color:#15554d;
 flex-shrink:0;
 margin-right:7px;
 vertical-align:middle;
}

/* WhatsApp CTA arrow is a consistent SVG, not a font symbol. */
html body > a.top-announcement .sponti-banner-arrow{
  display:inline-block;
  width:15px;
  height:15px;
  vertical-align:-3px;
  margin-left:7px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Footer brand legibility: keep Sponti wordmark readable on dark green. */
html body .site-footer .footer-brand a.logo,
html body .site-footer .footer-brand a.logo span,
html body.provider-page .site-footer .footer-brand a.logo,
html body.provider-page .site-footer .footer-brand a.logo span {
  color:#fff9ed!important;
  -webkit-text-fill-color:#fff9ed!important;
  opacity:1!important;
  visibility:visible!important;
  text-shadow:none!important;
  background-image:none!important;
  filter:none!important;
}