/* Native scroll scenes. Resting dimensions and hero motion stay unchanged. */
:root { --motion-header-offset:108px; --motion-ease:cubic-bezier(.22,.72,.18,1); }
.motion-word-mask { display:inline-block; overflow:clip; vertical-align:bottom; padding-bottom:.1em; margin-bottom:-.1em; }
.motion-word { display:inline-block; }
/* Grid slots keep the original card geometry and its independent 3D context. */
.motion-fade-slot { min-width:0; position:relative; }
#results .motion-fade-slot > .case-card { height:100%; }
#pricing .pricing-stage { position:relative; isolation:isolate; }
#pricing .center-heading { position:relative; z-index:0; margin-bottom:56px; }
/* Extend the mask box below the baseline so descenders remain visible. */
#pricing-title { font-size:clamp(3.25rem,9.4vw,8.75rem); font-weight:550; line-height:1.03; letter-spacing:-.072em; text-wrap:balance; padding-bottom:.18em; margin-bottom:-.18em; }
#pricing .pricing-grid { position:relative; z-index:1; }

@media (prefers-reduced-motion:no-preference) {
  /* Fade the complete surface without changing size, position or card tilt. */
  .motion-ready .scene-gallery, .motion-ready .scene-fade { opacity:var(--fade-ink,1); }
  /* The controller already eases opacity; do not add a second CSS delay. */
  .motion-ready #pricing .price-card.scene-fade { transition-property:translate; }
  .motion-ready .scene-heading .motion-word {
    transform:translateY(var(--word-lift,0%)) rotate(var(--word-turn,0deg));
    transform-origin:0 100%;
  }
  .motion-ready .scene-number .number-value {
    transform:perspective(800px) rotateX(var(--scene-fold,0deg));
    transform-origin:50% 100%; opacity:var(--scene-opacity,1);
  }
  .motion-ready .scene-step { position:relative; }
  .motion-ready .scene-step::after {
    content:''; position:absolute; top:-1px; left:0; right:0; height:1px;
    background:var(--accent,#e3ad79); transform:scaleX(var(--step-progress,0)); transform-origin:left;
  }
  .motion-ready .scene-step .step-number { color:var(--step-color,#777); }
  .motion-ready .scene-step h3, .motion-ready .scene-step p { opacity:var(--step-opacity,1); }
  .motion-ready .scene-faq { clip-path:inset(0 var(--faq-cover,0%) 0 0); }
  #faq summary > span { transition:transform 220ms var(--motion-ease); }
}

@media (min-width:781px) and (min-height:640px) and (prefers-reduced-motion:no-preference) {
  .motion-ready #pricing .center-heading { position:sticky; top:var(--motion-header-offset); }
  .motion-ready #pricing-title {
    opacity:var(--pricing-ink,1); filter:blur(var(--pricing-blur,0px));
    /* Lower strokes dissolve before the top, including letters in card gaps. */
    mask-image:linear-gradient(to bottom,#000 0%,rgb(0 0 0 / var(--pricing-bottom,1)) 90%);
  }
  @supports ((backdrop-filter:blur(6px)) or (-webkit-backdrop-filter:blur(6px))) {
    .motion-ready #pricing .price-card {
      background:linear-gradient(165deg,#262626b8,#1b1b1beb 36%,#181818fa 70%);
      -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
      box-shadow:inset 0 1px 0 #ffffff0f,0 16px 42px #0003;
    }
    .motion-ready #pricing .price-card.featured {
      background:radial-gradient(ellipse at 50% 0,#e3ad7917,transparent 65%),linear-gradient(165deg,#292724ba,#222120ee 36%,#222222fa 70%);
      box-shadow:inset 0 1px 0 #e3ad7924,0 16px 42px #0003;
    }
  }
}
@media (max-width:780px) {
  #pricing-title { font-size:clamp(2.8rem,9.4vw,5rem); line-height:1.08; }
  #pricing .center-heading { margin-bottom:36px; }
}
@media (prefers-reduced-motion:reduce) {
  .motion-word,.scene-number .number-value { transform:none!important; opacity:1!important; }
  .scene-gallery,.scene-fade { opacity:1!important; }
  .scene-faq { clip-path:none!important; }
  .scene-step h3,.scene-step p { opacity:1!important; }
  .scene-step::after { display:none; }
  #pricing .center-heading { position:relative; }
  #pricing-title { opacity:1; filter:none; mask-image:none; }
}