/* Motion adds feedback while configured prices and checkout links stay authoritative. */
.ssx #pricing .ssx-billing{position:relative;isolation:isolate;padding:5px;display:flex;width:max-content;max-width:100%;margin:36px auto 14px;gap:0}
.ssx #pricing .ssx-billing::before{content:"";position:absolute;inset:5px auto 5px 5px;width:calc((100% - 10px)/2);border-radius:7px;background:#13796d;box-shadow:0 3px 10px #126d6224;transition:transform .3s cubic-bezier(.2,.8,.2,1);z-index:-1}
.ssx #pricing .ssx-billing[data-billing="annual"]::before{transform:translateX(100%)}
.ssx #pricing .ssx-billing button{background:transparent;width:112px;min-height:44px;transition:color .2s}
.ssx #pricing .ssx-billing button[aria-pressed="true"]{background:transparent;color:#fff}
.ssx #pricing .ssx-billing button[aria-pressed="false"]{color:#14343b}
.ssx #pricing .ssx-billing-status{margin:0 auto 32px;text-align:center;font-size:13px;color:#46665f;line-height:1.5}
.ssx #pricing .ssx-plan{position:relative;isolation:isolate;overflow:hidden;transition:box-shadow .3s,border-color .3s;--plan-glow:#bde6db}
.ssx #pricing .ssx-plan::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(380px circle at var(--plan-x,50%) var(--plan-y,0%),var(--plan-glow),transparent 76%);opacity:0;transition:opacity .35s}
.ssx #pricing .ssx-plan::after{content:"";position:absolute;top:0;left:0;width:100%;height:3px;background:linear-gradient(90deg,#14796d,#d4ac55,#14796d);transform:scaleX(0);transform-origin:left;transition:transform .45s}
.ssx #pricing .ssx-plan.is-featured{background:linear-gradient(165deg,#eff9f4 0%,#fff 35%);box-shadow:0 16px 50px #163d3010}
.ssx #pricing .ssx-plan.is-featured::after{transform:scaleX(1)}
.ssx #pricing .ssx-plan[data-plan-card="elite"]{--plan-glow:#f0dfb8}
.ssx #pricing .ssx-plan:focus-within{border-color:#14796d;box-shadow:0 20px 50px #143b3826}
.ssx #pricing .ssx-plan:focus-within::before{opacity:.3}
.ssx #pricing .ssx-plan:focus-within::after{transform:scaleX(1)}
.ssx #pricing .ssx-plan-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:10px}
.ssx #pricing .ssx-plan-icon{display:grid;place-items:center;flex:none;width:48px;height:48px;border-radius:13px;color:#14796d;background:#e5f3ee;border:1px solid #cee5db;transition:transform .3s,background .3s}
.ssx #pricing [data-plan-card="elite"] .ssx-plan-icon{color:#806027;background:#f6efdf;border-color:#e8dbbb}
.ssx #pricing .ssx-plan-purpose{font-size:12px;line-height:1.5;color:#526e66;margin:2px 0 14px}
.ssx #pricing .ssx-plan h3{margin-top:0}
.ssx #pricing .ssx-price{font-variant-numeric:tabular-nums;margin-bottom:16px}
.ssx #pricing .ssx-plan-value{min-height:64px;margin-bottom:18px;padding:11px 13px;border-radius:8px;background:#edf6f1;color:#176557}
.ssx #pricing .ssx-plan-value strong{display:block;font-size:13px;line-height:1.5}
.ssx #pricing .ssx-plan-value small{display:block;margin-top:3px;font-size:11px;line-height:1.5;color:#4a6b60}
.ssx #pricing .ssx-plan>.ssx-button{display:flex;justify-content:center;align-items:center;gap:8px;position:relative;overflow:hidden;min-height:48px}
.ssx #pricing .ssx-plan>.ssx-button span{display:inline-block;transition:transform .25s}
.ssx #pricing .ssx-plan>.ssx-button:hover span,.ssx #pricing .ssx-plan>.ssx-button:focus-visible span{transform:translate(3px,-3px)}
.ssx #pricing .ssx-plan-preview{align-self:center;text-align:center;font-size:12px;line-height:1.5;color:#196f63;padding:14px 4px;text-decoration:underline;text-underline-offset:4px}
.ssx #pricing .ssx-plan ul{border-top:1px solid #dce9e2;padding-top:22px;margin-top:6px}
.ssx #pricing .ssx-plan a:focus-visible,.ssx #pricing button:focus-visible{outline:3px solid #bd9240;outline-offset:4px}
.ssx #pricing .ssx-plan.is-in-view{animation:ssx-plan-enter .7s cubic-bezier(.2,.75,.25,1) backwards}
.ssx #pricing .ssx-plan:nth-child(2).is-in-view{animation-delay:.12s}
.ssx #pricing .ssx-plan:nth-child(3).is-in-view{animation-delay:.24s}
@keyframes ssx-plan-enter{from{opacity:.4;transform:translateY(24px)}to{opacity:1;transform:translateY(0)}}
@media(hover:hover) and (pointer:fine){
 .ssx #pricing .ssx-plan:hover{border-color:#14796d;box-shadow:0 20px 50px #143b3826}
 .ssx #pricing .ssx-plan:hover::before{opacity:.42}
 .ssx #pricing .ssx-plan:hover::after{transform:scaleX(1)}
 .ssx #pricing .ssx-plan:hover .ssx-plan-icon{transform:translateY(-3px) rotate(-4deg)}
}
@media(max-width:900px){.ssx #pricing .ssx-plan{display:flex;flex-direction:column}.ssx #pricing .ssx-plan h3,.ssx #pricing .ssx-plan>p{min-height:0}.ssx #pricing .ssx-plan-value{min-height:0}}
@media(prefers-reduced-motion:reduce){.ssx #pricing .ssx-plan,.ssx #pricing .ssx-plan.is-in-view,.ssx #pricing .ssx-plan *,.ssx #pricing .ssx-plan::before,.ssx #pricing .ssx-plan::after,.ssx #pricing .ssx-billing::before{animation:none;transition:none}.ssx #pricing .ssx-plan:hover .ssx-plan-icon,.ssx #pricing .ssx-plan>.ssx-button span{transform:none!important}}
