/* Jompom Pricing: springy billing switch, rolling digits, spinning starburst. */
.jp-pricing{background:var(--light);color:var(--ink);padding:110px 0 120px;position:relative;overflow:hidden}
.jp-pricing .pr-head{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:end;margin-bottom:56px}
.jp-pricing .pr-head p{color:#3f4a52;font-size:17px;max-width:30em}
.jp-pricing .switch-row{display:flex;align-items:center;gap:14px;font-weight:600;font-size:16px;margin-bottom:46px;flex-wrap:wrap}
.jp-pricing .lbl{cursor:pointer;transition:color .2s;color:#5a5a5a}
.jp-pricing .lbl.on{color:var(--ink)}
.jp-pricing .switch{position:relative;width:86px;height:46px;padding:0;border-radius:999px;border:3px solid var(--ink);background:#fff;cursor:pointer;box-shadow:3px 3px 0 var(--ink);transition:background .3s}
.jp-pricing .switch[aria-checked="true"]{background:var(--blue)}
.jp-pricing .knob{position:absolute;top:4px;left:4px;width:32px;height:32px;border-radius:50%;background:var(--ink);transition:transform .7s var(--spring),width .25s var(--out)}
.jp-pricing .switch:active .knob{width:40px}
.jp-pricing .switch[aria-checked="true"] .knob{transform:translateX(40px)}
.jp-pricing .switch[aria-checked="true"]:active .knob{transform:translateX(32px)}
.jp-pricing .save{display:inline-block;background:var(--sun);border:2px solid var(--ink);padding:5px 12px;border-radius:999px;font-size:13px;transform:rotate(-4deg);transition:transform .6s var(--spring)}
.jp-pricing .save.pop{transform:rotate(4deg) scale(1.15)}
.jp-pricing .plans{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;align-items:center}
.jp-pricing .plan{position:relative;background:#fff;border:3px solid var(--ink);border-radius:30px;padding:34px 30px;box-shadow:8px 8px 0 var(--ink);transition:transform .6s var(--spring),box-shadow .4s}
.jp-pricing .plan:hover{transform:translate(-4px,-6px) rotate(-1deg);box-shadow:12px 14px 0 var(--ink)}
.jp-pricing .plan.pop{background:var(--blue);padding-block:50px;transform:rotate(-1.5deg)}
.jp-pricing .plan.pop:hover{transform:translate(-4px,-6px) rotate(-3deg)}
.jp-pricing .plan h3{font-size:34px}
.jp-pricing .hrs{display:flex;align-items:center;gap:10px;margin:14px 0 22px;font-weight:600}
.jp-pricing .clock{width:46px;height:46px;flex-shrink:0}
.jp-pricing .clock .hand{transform-origin:23px 23px;animation:jp-pricing-tick 4s steps(12) infinite}
.jp-pricing .plan:hover .clock .hand{animation-duration:.8s}
@keyframes jp-pricing-tick{to{transform:rotate(360deg)}}
.jp-pricing .price{display:flex;align-items:flex-start;font:800 clamp(64px,7vw,88px)/1 var(--jp-display);letter-spacing:-.04em}
.jp-pricing .price .cur{font-size:.42em;margin:.18em .06em 0 0}
.jp-pricing .slot{display:inline-block;height:1em;overflow:hidden;width:.6em;transition:width .5s var(--spring)}
.jp-pricing .slot.blank{width:0}
.jp-pricing .reel{display:flex;flex-direction:column;font-variant-numeric:tabular-nums;transition:transform .9s var(--spring)}
.jp-pricing .reel span{height:1em;display:block;text-align:center}
.jp-pricing .per{font-size:15px;color:#3f4a52;margin-top:8px}
.jp-pricing .plan.pop .per{color:#14384f}
.jp-pricing .min{display:inline-block;margin:18px 0 26px;font-size:14px;font-weight:600;padding:6px 12px;border-radius:10px;background:var(--light);border:2px dashed #9aa4ab}
.jp-pricing .plan.pop .min{background:rgba(255,255,255,.55);border-color:var(--ink)}
.jp-pricing .plan .btn{width:100%;justify-content:center}
.jp-pricing .plan.pop .btn{background:var(--ink);color:#fff}
.jp-pricing .burst{position:absolute;right:-22px;top:-30px;width:104px;height:104px;display:grid;place-items:center}
.jp-pricing .burst svg{position:absolute;inset:0;animation:jp-pricing-spin 12s linear infinite}
.jp-pricing .burst b{position:relative;font:800 17px/1 var(--jp-display);transform:rotate(12deg)}
@keyframes jp-pricing-spin{to{transform:rotate(360deg)}}
.jp-pricing .incl{margin-top:44px;display:flex;gap:16px;align-items:center;flex-wrap:wrap;font-size:16px;color:#3f4a52}
.jp-pricing .incl a{font-weight:600;color:var(--navy);text-decoration:underline;text-underline-offset:4px}

@media (max-width:980px){
  .jp-pricing .pr-head{grid-template-columns:minmax(0,1fr)}
  .jp-pricing .plans{grid-template-columns:minmax(0,1fr);max-width:440px;margin-inline:auto}
  .jp-pricing .plan.pop{transform:none}
}
@media (max-width:560px){
  .jp-pricing .burst{right:-8px}
}