/* MyStationHub plans: subtle version of the animated neon pricing cards in
   the user's Animaster video. Light UI is retained; plans and billing are not changed.
   Glow follows the mouse, intensifies on hover/focus, featured plan breathes softly. */
.pricing#plans .plan{
  --msh-glow-rgb:31,137,202;
  --msh-glow-x:50%;
  --msh-glow-y:44%;
  position:relative;
  isolation:isolate;
  background-clip:padding-box;
  border:1px solid #d8e5f0!important;
  box-shadow:0 12px 26px rgba(12,77,118,.055)!important;
  transition:transform .32s cubic-bezier(.2,.78,.22,1),
             border-color .32s ease,box-shadow .32s ease!important;
}
.pricing#plans .plan.plan-free{--msh-glow-rgb:65,142,197;}
.pricing#plans .plan:nth-child(2){--msh-glow-rgb:23,140,222;}
.pricing#plans .plan.featured{--msh-glow-rgb:0,181,206;}
.pricing#plans .plan:nth-child(4){--msh-glow-rgb:117,94,216;}
/* Illuminated edges, never on top of features or links. */
.pricing#plans .plan::before{
  content:"";
  position:absolute;
  z-index:2;
  inset:-2px;
  border:2px solid transparent;
  border-radius:inherit;
  pointer-events:none;
  background:radial-gradient(260px circle at var(--msh-glow-x) var(--msh-glow-y),
    rgba(var(--msh-glow-rgb),.85),rgba(var(--msh-glow-rgb),.34) 44%,
    rgba(var(--msh-glow-rgb),.12) 76%,transparent 100%) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  opacity:0;
  transition:opacity .35s ease;
}
.pricing#plans .plan::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  z-index:0;
  background:radial-gradient(340px circle at var(--msh-glow-x) var(--msh-glow-y),
    rgba(var(--msh-glow-rgb),.14),rgba(var(--msh-glow-rgb),.06) 45%,
    transparent 82%);
  opacity:0;
  transition:opacity .36s ease;
}
.pricing#plans .plan > *{position:relative;z-index:1;}
/* The teal Multi-Location card looks highlighted before it is hovered. */
.pricing#plans .plan.featured{
  background:linear-gradient(145deg,#f0fcff 0%,#e8faff 62%,#f7fdff 100%)!important;
  border-color:#9adfea!important;
  box-shadow:0 0 0 1px rgba(0,181,206,.17),0 10px 32px rgba(3,161,185,.12)!important;
}
.pricing#plans .plan.featured::before{animation:msh-pricing-glow-breathe 5.2s ease-in-out infinite;}
.pricing#plans .plan.featured::before{opacity:.47;}
@media(hover:hover) and (pointer:fine){
 .pricing#plans .plan.featured:hover::before{animation:none;opacity:1;}
}
.pricing#plans .plan.featured:focus-within::before{animation:none;opacity:1;}
.pricing#plans .plan.featured::after{opacity:.25;}
/* Hover belongs to the card, not the price text, and keyboard focus gets it too. */
@media (hover:hover) and (pointer:fine){
  .pricing#plans .plan:hover{
    transform:translateY(-6px)!important;
    border-color:rgba(var(--msh-glow-rgb),.58)!important;
    box-shadow:0 0 0 1px rgba(var(--msh-glow-rgb),.35),
               0 12px 36px rgba(var(--msh-glow-rgb),.22),
               0 26px 54px rgba(var(--msh-glow-rgb),.12)!important;
  }
  .pricing#plans .plan:hover::before{opacity:1;}
  .pricing#plans .plan:hover::after{opacity:1;}
}
.pricing#plans .plan:focus-within{
  border-color:rgba(var(--msh-glow-rgb),.66)!important;
  box-shadow:0 0 0 1px rgba(var(--msh-glow-rgb),.35),
             0 10px 29px rgba(var(--msh-glow-rgb),.2)!important;
}
.pricing#plans .plan:focus-within::before,
.pricing#plans .plan:focus-within::after{opacity:1;}
/* The video also shows a soft button aura on hovered pricing cards.
   Keep existing white label/chevron styling and the underlying href actions. */
.pricing#plans .plan a.btn.msh-os{
  box-shadow:0 7px 15px rgba(8,112,166,.10)!important;
  transition:box-shadow .32s ease,filter .32s ease!important;
}
@media(hover:hover) and (pointer:fine){
 .pricing#plans .plan:hover a.btn.msh-os{
    box-shadow:0 0 0 1px rgba(var(--msh-glow-rgb),.2),
               0 7px 23px rgba(var(--msh-glow-rgb),.23)!important;
 }
 .pricing#plans .plan a.btn.msh-os:hover{
    box-shadow:0 0 10px rgba(var(--msh-glow-rgb),.22),
               0 0 29px rgba(var(--msh-glow-rgb),.38),
               0 8px 26px rgba(var(--msh-glow-rgb),.22)!important;
 }
}
/* Small-screen interaction: keep the highlighted plan, avoid accidental hover
   stickiness and preserve readable dark benefits on the cyan background. */
@media(hover:none){
 .pricing#plans .plan:hover{transform:none!important;}
 .pricing#plans .plan:active{
   border-color:rgba(var(--msh-glow-rgb),.5)!important;
   box-shadow:0 8px 30px rgba(var(--msh-glow-rgb),.18)!important;
 }
 .pricing#plans .plan:active::before{opacity:.65;}
 .pricing#plans .plan:active::after{opacity:.6;}
}
@media(max-width:740px){
 .pricing#plans .plan{border-radius:20px;}
 .pricing#plans .plan.featured{
    box-shadow:0 0 0 1px rgba(0,181,206,.19),
               0 9px 23px rgba(3,161,185,.10)!important;
 }
}
@keyframes msh-pricing-glow-breathe{
  0%,100%{opacity:.30;}
  50%{opacity:.68;}
}
@media(prefers-reduced-motion:reduce){
 .pricing#plans .plan,
 .pricing#plans .plan::before,
 .pricing#plans .plan::after,
 .pricing#plans .plan a.btn.msh-os{
   animation:none!important;
   transition:none!important;
   transform:none!important;
 }
}