/* Per-treatment pricing backgrounds, loaded only by services.html.
   Replaces the tan radial gradient with quiet cream so the tier cards and the
   prices lead, and crossfades a large faint motif as the visitor switches tabs.

   isolation:isolate is required: .pricing is position:relative with no
   z-index, so without its own stacking context a z-index:-1 child paints
   behind the section background and disappears. With it, the motif layer sits
   above the background and below .pricing::before (z0 noise) and
   .pricing__inner (z1 content).

   Loaded after styles.css, so the plain .pricing selector wins on source
   order — no !important needed. */
.pricing{isolation:isolate;background:#efe6d7}
.pricing-motifs{position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse at 50% 40%,#fffaf0aa,transparent 60%)}
/* Only opacity and transform animate, and only on tab change: no per-frame
   work, nothing driven by scroll or pointer. */
.pricing-motif{position:absolute;inset:0;width:100%;height:100%;
  color:#ae8651;stroke-width:1;opacity:0;transform:scale(1.06);
  transition:opacity 1.1s ease,transform 1.6s ease}
.pricing[data-motif="hair"] .motif-hair,
.pricing[data-motif="skin"] .motif-skin,
.pricing[data-motif="joint"] .motif-joint{opacity:.36;transform:scale(1)}
/* Keep the cards and footnote above the motif layer. */
.pricing .tiers,.pricing__foot{position:relative}
/* Narrow screens: widen the motif so its lines still read at small scale. */
@media(max-width:800px){.pricing-motif{width:180%;left:-40%}}
@media(prefers-reduced-motion:reduce){.pricing-motif{transition:none;transform:none}}

/* Match the data-count specificity so three tiers can stack on phones. */
@media (max-width:560px){.pricing .tiers[data-count="3"]{grid-template-columns:1fr;max-width:100%}}

/* Darker labels on cream; warm ivory labels on the featured brown card. */
.pricing__eyebrow { color: #795735; font-size: 0.75rem; }
.tier__blurb { font-size: 0.9375rem; line-height: 1.6; }
.tier__badge { font-size: 0.6875rem; letter-spacing: 0.1em; }
.tier__badge--subtle { opacity: 1; }
.tier__price-tube,
.dots__label { font-size: 0.75rem; letter-spacing: 0.06em; }
.tier__price-note { font-size: 0.8125rem; letter-spacing: 0.06em; line-height: 1.5; }
.tier__includes-toggle { color: #795735; opacity: 1; font-size: 0.8125rem; }
.tier--tailored .tier__blurb,
.tier--tailored .tier__price-note,
.tier--tailored .tier__price-tube,
.tier--tailored .dots__label,
.tier--tailored .tier__includes-toggle,
.tier--tailored .tier__idx { color: #F2E8DC; }
.tier--tailored .tier__badge { color: #F2E8DC; }
.tier__top { flex-wrap: wrap; }
.pricing { scroll-margin-top: 80px; }