/* Pricing cards — shared by the public site (/pricing, home) and the vendor app (Settings → Plan).
   Structure: pill label, big headline, Monthly / Yearly switch, plan cards with a "Most Recommended" frame. */
:root{--g-100:#E3F2EC;--g-600:#22705C;}
.px-head{text-align:center;max-width:640px;margin:0 auto 26px;}
.px-pill{display:inline-flex;align-items:center;gap:7px;padding:6px 14px;border-radius:999px;background:var(--g-100,#E3F2EC);color:var(--g-600,#22705C);font-weight:700;font-size:12.5px;}
.px-pill .lc{width:15px;height:15px;}
.px-title{font-size:clamp(28px,4vw,46px);font-weight:800;letter-spacing:-.03em;margin:14px 0 10px;color:#13231F;line-height:1.08;}
.px-sub{color:#7A8984;font-size:15px;line-height:1.6;}
.px-toggle{display:inline-flex;align-items:center;gap:4px;padding:5px;border-radius:14px;background:#ECEFED;margin:22px auto 0;}
.px-toggle button{border:none;background:transparent;border-radius:10px;padding:9px 26px;font-weight:600;font-size:14px;color:#3B4A45;cursor:pointer;display:inline-flex;align-items:center;gap:8px;transition:all .2s;font-family:inherit;}
.px-toggle button.on{background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 4px 12px rgba(16,40,33,.08);color:#13231F;}
.px-save{background:var(--g-100,#E3F2EC);color:var(--g-600,#22705C);font-size:11px;font-weight:800;padding:3px 8px;border-radius:999px;}
.px-grid{display:grid;grid-template-columns:repeat(var(--px-cols,4),minmax(0,1fr));gap:20px;align-items:start;margin-top:34px;}
.px-card{background:#fff;border-radius:26px;padding:28px 26px 26px;border:1px solid #EDF0EE;box-shadow:0 1px 2px rgba(16,40,33,.03);transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;margin-top:46px;position:relative;}
.px-card:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(16,40,33,.22);}
.px-reco{border-radius:30px;padding:0 6px 6px;background:linear-gradient(180deg,#DCEFE6,#EAF5F0);border:1px solid #CFE6DB;transition:transform .3s cubic-bezier(.2,.8,.2,1),box-shadow .3s;}
.px-reco:hover{transform:translateY(-4px);box-shadow:0 26px 50px -22px rgba(31,90,75,.4);}
.px-reco .px-ribbon{height:46px;display:flex;align-items:center;justify-content:center;gap:7px;color:var(--g-600,#22705C);font-weight:700;font-size:14.5px;}
.px-reco .px-ribbon .lc{width:17px;height:17px;fill:currentColor;}
.px-reco .px-card{margin-top:0;border-color:#E2EEE8;box-shadow:0 1px 2px rgba(16,40,33,.04);}
.px-reco .px-card:hover{transform:none;box-shadow:none;}
.px-name{font-size:20px;font-weight:700;color:#2B3733;}
.px-price{font-size:clamp(42px,4.4vw,60px);font-weight:700;letter-spacing:-.04em;color:#1C2925;margin:12px 0 4px;line-height:1;display:flex;align-items:baseline;flex-wrap:wrap;}
.px-price small{font-size:19px;font-weight:600;letter-spacing:0;color:#3B4A45;margin-left:2px;}
.px-local{font-size:12px;color:#7A8984;font-weight:600;min-height:16px;}
.px-desc{color:#8A9893;font-size:14px;line-height:1.55;margin:10px 0 22px;min-height:44px;}
.px-cta{display:flex;width:100%;justify-content:center;align-items:center;gap:8px;border:none;border-radius:999px;padding:13px 16px;font-weight:600;font-size:14.5px;cursor:pointer;font-family:inherit;transition:filter .2s,transform .2s,box-shadow .2s;text-decoration:none;}
.px-cta.soft{background:#E5F2EC;color:var(--g-600,#22705C);}
.px-cta.soft:hover{background:#D6EBE1;}
.px-cta.solid{background:linear-gradient(135deg,#2E8B74,#1F5A4B);color:#fff;box-shadow:0 10px 24px -12px rgba(31,90,75,.8);}
.px-cta.solid:hover{filter:brightness(1.07);transform:translateY(-1px);}
.px-cta[disabled]{opacity:.6;cursor:default;}
.px-limits{display:flex;gap:6px;flex-wrap:wrap;margin:22px 0 0;}
.px-limits span{font-size:11.5px;font-weight:700;color:#4A5B55;background:#F3F6F4;border-radius:999px;padding:4px 10px;}
.px-feats{list-style:none;padding:0;margin:22px 0 0;display:flex;flex-direction:column;gap:12px;border-top:1px solid #EEF1EF;padding-top:22px;}
.px-feats li{display:flex;gap:10px;align-items:flex-start;color:#2B3733;font-size:14px;line-height:1.4;}
.px-feats li .lc{width:18px;height:18px;color:#5E6F69;margin-top:1px;flex-shrink:0;}

.px-trust{display:flex;justify-content:center;gap:18px;flex-wrap:wrap;margin-top:30px;color:#5E6F69;font-size:13px;font-weight:600;}
.px-trust span{display:inline-flex;align-items:center;gap:7px;}
.px-trust .lc{width:16px;height:16px;color:var(--g-600);}
.px-section{background:#F5F7F6;}
.lc{width:18px;height:18px;vertical-align:middle;flex-shrink:0;}
@media (max-width:1280px){ .px-grid{grid-template-columns:repeat(2,minmax(0,1fr));} .px-card,.px-reco{margin-top:0;} }
@media (max-width:640px){ .px-grid{grid-template-columns:minmax(0,1fr);} .px-card{padding:24px 20px;} }

/* Icons that replaced emoji on the public site scale with their container's font-size */
.ic > .lc,.e-ic > .lc,.fx-ic > .lc,.th > .lc,.success-icon > .lc,.chk > .lc,.burger > .lc,.modal-close > .lc,.inv-alert > .lc,.mini-row .lc,.hero-trust .lc,td.yes > .lc{width:1.15em;height:1.15em;}
.value-card .ic,.integ-card .ic,.hw-node .ic,.e-ic,.fx-ic{color:#22705C;}
.pos-prod .th > .lc{color:#fff;}
.hero-trust .lc{color:#3FB28F;margin-right:2px;}
td.yes > .lc{color:#22705C;}
.star-f{width:16px;height:16px;color:#C9A84C;fill:#C9A84C;}
.px-price{font-size:clamp(34px,3.3vw,56px);flex-wrap:nowrap;white-space:nowrap;}

/* ============================================================
   Pricing v2 — equal-height cards + magic
   ============================================================ */
@property --px-a{syntax:'<angle>';inherits:false;initial-value:0deg;}
.px-grid{align-items:stretch;}
.px-grid > .px-card{margin:46px 0 6px;}
.px-card{display:flex;flex-direction:column;overflow:hidden;}
.px-reco{display:flex;flex-direction:column;position:relative;isolation:isolate;}
.px-reco > .px-card{flex:1;margin:0;}
.px-feats{flex:1;}
.px-desc{min-height:46px;margin-bottom:20px;}
.px-local{min-height:18px;}
/* limits as a tidy 3-column strip so every card lines up */
.px-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px;border:1px solid #EDF1EE;border-radius:14px;background:#F8FAF9;}
.px-stats div{padding:10px 4px;text-align:center;}
.px-stats div + div{border-left:1px solid #EDF1EE;}
.px-stats b{display:block;font-size:15px;font-weight:800;color:#1C2925;}
.px-stats span{font-size:10.5px;font-weight:700;color:#8A9893;text-transform:uppercase;letter-spacing:.05em;}
/* sliding toggle */
.px-toggle{position:relative;}
.px-toggle .px-ind{position:absolute;left:0;top:5px;bottom:5px;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.06),0 6px 16px rgba(16,40,33,.12);transition:transform .45s cubic-bezier(.2,.9,.2,1.15),width .45s cubic-bezier(.2,.9,.2,1);z-index:0;}
.px-toggle button{position:relative;z-index:1;}
.px-toggle:has(.px-ind) button.on{background:transparent;box-shadow:none;}
/* entrance */
.px-grid > *{animation:px-in .8s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0) * 110ms);}
@keyframes px-in{from{opacity:0;transform:translateY(26px) scale(.97);filter:blur(4px);}to{opacity:1;transform:none;filter:none;}}
.px-amt{display:inline-block;font-variant-numeric:tabular-nums;}
.px-feats li{animation:px-li .6s ease both;animation-delay:calc(var(--i,0) * 110ms + var(--j,0) * 60ms + 300ms);}
@keyframes px-li{from{opacity:0;transform:translateX(-8px);}}
.px-feats li .lc{color:#2E8B74;}
/* hover glow */
.px-card{transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s,border-color .35s;}
.px-grid > .px-card:hover{transform:translateY(-6px);border-color:#CFE6DB;box-shadow:0 24px 48px -22px rgba(31,90,75,.35),0 0 0 1px rgba(63,178,143,.15);}
.px-card.spot::after{background:radial-gradient(320px circle at var(--mx,50%) var(--my,0%),rgba(63,178,143,.10),transparent 60%);}
/* recommended: rotating gold-green border, glow, sparkles */
.px-reco::before{content:"";position:absolute;inset:-1.5px;border-radius:31px;z-index:-1;padding:1.5px;
  background:conic-gradient(from var(--px-a),#CFE6DB,#3FB28F 20%,#E7CF6A 35%,#CFE6DB 50%,#CFE6DB 70%,#3FB28F 85%,#CFE6DB);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:px-rot 6s linear infinite;}
@keyframes px-rot{to{--px-a:360deg;}}
.px-reco{box-shadow:0 30px 60px -30px rgba(31,90,75,.55);animation:px-in .8s cubic-bezier(.2,.8,.2,1) both,px-glow 4s 1s ease-in-out infinite;animation-delay:calc(var(--i,0) * 110ms),1s;}
@keyframes px-glow{0%,100%{box-shadow:0 30px 60px -30px rgba(31,90,75,.55);}50%{box-shadow:0 30px 70px -26px rgba(63,178,143,.65),0 0 0 6px rgba(63,178,143,.06);}}
.px-ribbon{position:relative;}
.px-ribbon .lc{animation:px-zap 2.4s ease-in-out infinite;}
@keyframes px-zap{0%,100%{transform:scale(1);filter:none;}50%{transform:scale(1.18) rotate(-8deg);filter:drop-shadow(0 0 6px rgba(231,207,106,.9));}}
.px-ribbon::before,.px-ribbon::after{content:"";position:absolute;width:8px;height:8px;background:radial-gradient(circle,#E7CF6A 0 30%,transparent 70%);border-radius:50%;animation:px-twinkle 2.2s ease-in-out infinite;}
.px-ribbon::before{left:18%;top:12px;} .px-ribbon::after{right:16%;top:22px;animation-delay:1.1s;}
@keyframes px-twinkle{0%,100%{opacity:0;transform:scale(.4);}50%{opacity:1;transform:scale(1.3);}}
.px-cta.solid{position:relative;overflow:hidden;}
.px-cta.solid::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.45) 50%,transparent 65%);transform:translateX(-130%);animation:lx-shine2 3.6s ease-in-out 1.2s infinite;}
@keyframes lx-shine2{0%,65%{transform:translateX(-130%);}100%{transform:translateX(130%);}}
@media (max-width:640px){ .px-grid > .px-card{margin:0;} }
@media (prefers-reduced-motion:reduce){ .px-grid > *,.px-feats li,.px-reco,.px-reco::before,.px-ribbon .lc,.px-ribbon::before,.px-ribbon::after,.px-cta.solid::after{animation:none !important;} }
.px-stats b .lc{width:20px;height:20px;color:#1C2925;}
.px-stats span{display:block;font-size:9.5px;letter-spacing:.03em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 2px;}