/* Interaction surfaces only. The outer CTA and intake panel keep their own
   positioning/FLIP animations; feedback never scales or moves their boxes. */
#cta-morph a{border-radius:999px}
#cta-morph .cta-morph-inner{
  transition:background-color 220ms ease-out,box-shadow 220ms ease-out;
}
#cta-morph .cta-arrow,.sc-cta-arrow,.ending-start span{
  display:inline-block;
  transition:translate 220ms cubic-bezier(.23,1,.32,1);
}
.sc-cta,.next-move .ending-start{
  transition:box-shadow 180ms ease-out;
}
.next-move .ending-start:hover,.next-move .ending-start:hover span{
  transform:none;box-shadow:none;
}
:is(.sc-step-back,.sc-form-close,.tab-btn,.csl-close,.csl-nav,.cs-close,.vpl-close,.carousel-btn){
  transition:background-color 180ms ease-out,border-color 180ms ease-out,color 180ms ease-out,box-shadow 180ms ease-out;
}
/* Listen on the link: all of its descendants deliberately have pointer-events:
   none, so the former .cta-morph-inner:hover rules could never match. */
@media(hover:hover) and (pointer:fine){
  #cta-morph a:hover .cta-morph-inner{
    background-color:rgba(184,255,0,.12);
    box-shadow:inset 0 1px 0 rgba(226,255,175,.38),inset 0 12px 20px -12px rgba(184,255,0,.26);
  }
  #cta-morph a:hover .cta-arrow{translate:5px 0}
  .sc-cta:not(.loading,.error-state,[disabled],[aria-disabled="true"]):hover,
  .next-move .ending-start:hover{
    box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 10px 15px -8px rgba(255,255,255,.48),inset 0 -2px 0 rgba(8,8,8,.14);
  }
  .sc-cta:not(.loading,.error-state,[disabled],[aria-disabled="true"]):hover .sc-cta-arrow{translate:3px 0}
  .next-move .ending-start:hover span{translate:3px -3px}
  :is(.sc-step-back,.sc-form-close,.tab-btn,.csl-close,.csl-nav,.cs-close,.vpl-close,.carousel-btn):hover{
    color:var(--accent);background-color:rgba(184,255,0,.08);
    border-color:var(--accent-line);
  }
  .tab-btn.active:hover{background-color:rgba(184,255,0,.2)}
}
/* Keyboard gets the same lit surface, plus a stable inset ring that survives
   the cards' overflow clipping and the lime footer surround. */
#cta-morph a:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
#cta-morph a:focus-visible .cta-morph-inner{
  background-color:rgba(184,255,0,.12);
  box-shadow:inset 0 1px 0 rgba(226,255,175,.38);
}
#cta-morph a:focus-visible .cta-arrow{translate:5px 0}
.sc-cta:focus-visible,.next-move .ending-start:focus-visible{
  outline:2px solid var(--bg);outline-offset:-4px;
  box-shadow:inset 0 0 0 1px var(--accent);
}
.sc-cta.custom:focus-visible,.sc-cta.error-state:focus-visible{outline-color:currentColor}
.sc-cta:focus-visible .sc-cta-arrow{translate:3px 0}
.next-move .ending-start:focus-visible span{translate:3px -3px}
:is(.sc-step-back,.sc-form-close,.tab-btn,.csl-close,.csl-nav,.cs-close,.vpl-close,.carousel-btn):focus-visible{
  outline:2px solid var(--accent);outline-offset:-3px;color:var(--accent);
}
/* Native press state responds quickly. Only the surface and arrow
   settle inward, leaving the hit target and nested geometry stationary. */
#cta-morph a:active .cta-morph-inner{
  background-color:rgba(184,255,0,.2);
  box-shadow:inset 0 3px 8px rgba(0,0,0,.42),inset 0 -1px 0 rgba(226,255,175,.3);
  transition-duration:70ms;
}
#cta-morph a:active .cta-arrow{translate:2px 0;transition-duration:70ms}
.sc-cta:not(.loading,.error-state,[disabled],[aria-disabled="true"]):active,
.next-move .ending-start:active{
  box-shadow:inset 0 3px 6px rgba(8,8,8,.3),inset 0 -1px 0 rgba(255,255,255,.4);
  transition-duration:70ms;
}
.sc-cta:active .sc-cta-arrow,.next-move .ending-start:active span{translate:1px 0;transition-duration:70ms}
:is(.sc-step-back,.sc-form-close,.tab-btn,.csl-close,.csl-nav,.cs-close,.vpl-close,.carousel-btn):active{
  transform:none;box-shadow:inset 0 2px 5px rgba(0,0,0,.35);
  background-color:rgba(184,255,0,.16);transition-duration:70ms;
}
/* Keep opacity's existing panel entrance timing. Pointer feedback has no delay. */
.svc-card .sc-top.is-pinned .sc-form-close{
  transition:opacity 200ms ease-in 140ms,color 180ms ease-out,border-color 180ms ease-out,background-color 180ms ease-out,box-shadow 70ms ease-out;
}
@media(prefers-reduced-motion:reduce){
  #cta-morph .cta-morph-inner,#cta-morph .cta-arrow,
  .sc-cta,.sc-cta-arrow,.next-move .ending-start,.next-move .ending-start span,
  :is(.sc-step-back,.sc-form-close,.tab-btn,.csl-close,.csl-nav,.cs-close,.vpl-close,.carousel-btn){
    transition:none!important;
  }
  #cta-morph a .cta-arrow,.sc-cta:is(:hover,:focus-visible,:active) .sc-cta-arrow,
  .next-move .ending-start:is(:hover,:focus-visible,:active) span{translate:none!important}
}