/* Shared Detox/Thermo service-page step and control primitives. */

.storyPanel--expectations .stepsFlow{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  width:min(100%, var(--content-max-width, 1240px));
  max-width:var(--content-max-width, 1240px);
  margin-inline:auto;
  gap:18px;
  padding:18px 0 36px;
  overflow:visible;
  justify-items:stretch;
  scroll-snap-type:none;
  scroll-padding-inline:0;
}

.storyPanel--expectations .stepRow{
  box-sizing:border-box;
  display:flex;
  flex-direction:column;
  align-items:center;
  width:100%;
  min-width:0;
  min-height:clamp(300px, 25vw, 360px);
  margin-right:0;
  gap:14px;
  padding:24px 20px 22px;
  border-radius:28px;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,.20) 0%, rgba(255,255,255,0) 36%),
    linear-gradient(180deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.07) 100%);
  border-color:rgba(255,255,255,.24);
  box-shadow:
    0 18px 38px rgba(20,16,13,.10),
    inset 0 1px 0 rgba(255,255,255,.22),
    inset 0 -1px 0 rgba(255,255,255,.08);
  backdrop-filter:saturate(145%) blur(16px);
  -webkit-backdrop-filter:saturate(145%) blur(16px);
  clip-path:none;
  overflow:visible;
  position:relative;
  isolation:isolate;
  scroll-snap-align:unset;
}

.storyPanel--expectations .stepRow::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.05) 28%, rgba(255,255,255,0) 48%);
  pointer-events:none;
  z-index:0;
}

.storyPanel--expectations .stepRow > *{
  position:relative;
  z-index:1;
}

.storyPanel--expectations .stepBadge,
.storyPanel--expectations .stepTime,
.storyPanel--expectations .stepCopy,
.storyPanel--expectations .stepCopy h3,
.storyPanel--expectations .stepCopy p{
  min-width:0;
  max-width:100%;
}

.storyPanel--expectations .stepBadge{
  overflow-wrap:anywhere;
  text-align:center;
}

.storyPanel--expectations .stepTime{
  width:100%;
  white-space:normal;
  text-align:center;
}

.storyPanel--expectations .stepCopy{
  text-align:center;
}

.storyPanel--expectations .stepCopy p{
  margin-inline:auto;
}

.storyPanel--careGuide .careGuideCards{
  box-sizing:border-box;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  width:min(100%, var(--content-max-width, 1240px));
  max-width:var(--content-max-width, 1240px);
  margin-inline:auto;
  gap:clamp(18px, 2vw, 30px);
  padding:18px 0 42px;
  overflow:visible;
  scroll-snap-type:none;
  scroll-padding-inline:0;
}

.storyPanel--careGuide .careGuideCard{
  width:100%;
  min-width:0;
  max-width:100%;
  background:
    radial-gradient(circle at 50% 6%, rgba(255,255,255,.88) 0%, rgba(255,255,255,0) 35%),
    linear-gradient(180deg, rgba(255,255,255,.76) 0%, rgba(255,255,255,.58) 100%);
  border-color:rgba(255,255,255,.58);
  box-shadow:
    0 18px 36px rgba(71,56,50,.08),
    inset 0 1px 0 rgba(255,255,255,.70),
    inset 0 -1px 0 rgba(255,255,255,.24);
  backdrop-filter:saturate(145%) blur(16px);
  -webkit-backdrop-filter:saturate(145%) blur(16px);
  position:relative;
  overflow:hidden;
  isolation:isolate;
  scroll-snap-align:unset;
}

.storyPanel--careGuide .careGuideCard::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(135deg, rgba(255,255,255,.52) 0%, rgba(255,255,255,.12) 28%, rgba(255,255,255,0) 48%);
  pointer-events:none;
  z-index:0;
}

.storyPanel--careGuide .careGuideCard > *{
  position:relative;
  z-index:1;
}

.beforeAfterTab,
.beforeAfterTabs .beforeAfterTab,
.pricingTab,
.storyPanel--pricingSection .pricingTab,
.pricingAction,
.storyPanel--pricingSection .pricingAction,
.bookingHero .btn,
.btn.ctaOlive{
  min-height:var(--anima-button-min-height, 48px);
}

.beforeAfterTab:focus-visible,
.beforeAfterTabs .beforeAfterTab:focus-visible,
.pricingTab:focus-visible,
.storyPanel--pricingSection .pricingTab:focus-visible,
.pricingAction:focus-visible,
.storyPanel--pricingSection .pricingAction:focus-visible,
.bookingHero .btn:focus-visible,
.btn.ctaOlive:focus-visible{
  outline:2px solid rgba(95, 89, 84, .72);
  outline-offset:3px;
}

@media (max-width:920px){
  .storyPanel--expectations .stepsFlow{
    grid-template-columns:1fr;
    width:100%;
    max-width:100%;
    padding-inline:0;
  }

  .storyPanel--expectations .stepRow{
    min-height:auto;
  }

  .storyPanel--careGuide .careGuideCards{
    grid-template-columns:1fr;
    width:100%;
    max-width:100%;
    padding-inline:0;
  }
}