/* Plan cards that turn over in 3D. Front: the price summary. Back: what is included and the actions.
   The card itself stays the box the plan selector moves; only the inner layer turns. Transform-only. */
.price-card.has-flip{padding:0;background:transparent!important;border-color:transparent!important;box-shadow:none!important;overflow:visible;perspective:1600px}
.price-card.has-flip:hover{transform:none;box-shadow:none}
.price-flip{display:grid;height:100%;transform-style:preserve-3d;transition:transform .85s cubic-bezier(.2,.75,.15,1)}
.price-face{grid-area:1/1;display:flex;flex-direction:column;padding:34px;border:1px solid #444449;border-radius:var(--corner-card,22px);background:#0f0f11;color:#fff;-webkit-backface-visibility:hidden;backface-visibility:hidden;box-shadow:0 22px 70px #00000047;position:relative;overflow:hidden}
.price-featured .price-face{border-color:#eee}
.price-face-back{transform:rotateY(180deg);background:#17171a}
.price-featured .price-face-back{background:#b72a2a;border-color:#b72a2a}
.price-card.is-flipped .price-flip,.price-card:has(.price-face-back :focus-visible) .price-flip{transform:rotateY(180deg)}
@media(hover:hover) and (pointer:fine){
  .price-card.has-flip:hover .price-flip{transform:rotateY(180deg)}
  .price-card.has-flip:hover .price-face{box-shadow:0 34px 90px #00000075}
}
.price-card.is-plan-focused .price-face{border-color:#fff;box-shadow:0 36px 95px #00000080}

/* Light sweep and staggered content as the back turns into view. */
.price-face-back::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgb(255 255 255/.12) 50%,transparent 65%);transform:translateX(-120%);pointer-events:none}
.price-face-back>*:not(.price-turn-back){opacity:0;transform:translateY(10px);transition:opacity .45s cubic-bezier(.16,1,.3,1),transform .55s cubic-bezier(.16,1,.3,1)}
.price-card.is-flipped .price-face-back::after,.price-card:has(.price-face-back :focus-visible) .price-face-back::after{transition:transform 1.1s cubic-bezier(.16,1,.3,1) .25s;transform:translateX(120%)}
.price-card.is-flipped .price-face-back>*,.price-card:has(.price-face-back :focus-visible) .price-face-back>*{opacity:1;transform:none;transition-delay:calc(.3s + var(--d,0) * 70ms)}
@media(hover:hover) and (pointer:fine){
  .price-card.has-flip:hover .price-face-back::after{transition:transform 1.1s cubic-bezier(.16,1,.3,1) .25s;transform:translateX(120%)}
  .price-card.has-flip:hover .price-face-back>*{opacity:1;transform:none;transition-delay:calc(.3s + var(--d,0) * 70ms)}
}

.price-facts{display:grid;gap:8px;margin:0 0 22px;padding:14px 0 0;border-top:1px solid #343438;list-style:none;font-size:13px;color:#c6c6ca}
.price-facts strong{color:#fff;font-weight:650}
.price-turn{display:inline-flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:50px;margin-top:auto;padding:0 18px;border:1px solid #55555b;border-radius:999px;background:transparent;color:#fff;font:inherit;font-size:13px;font-weight:700;cursor:pointer;transition:background-color .2s,border-color .2s}
.price-turn:hover{background:#ffffff14;border-color:#fff}
.price-turn svg{width:16px;height:16px;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.price-turn:hover svg{transform:rotate(180deg)}
.price-back-label{margin:0 0 4px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#d0d0d4;--d:0}
.price-face-back .feature-list{margin-top:16px;--d:1}
.price-face-back .feature-list svg{color:#fff}
.price-back-actions{display:grid;gap:4px;margin-top:auto;padding-top:24px;--d:2}
.price-face-back .button{width:100%}
.price-featured .price-face-back .button-primary{background:#fff;color:#b72a2a;border-color:#fff}
.price-face-back .plan-whatsapp-link{color:#fff;border-color:#ffffff40}
.price-turn-back{position:absolute;top:16px;right:16px;width:40px;min-height:40px;padding:0;margin:0;border-color:#ffffff4d;z-index:2}
@media(max-width:999px){.price-face{padding:27px}}
@media(prefers-reduced-motion:reduce){
  .price-flip,.price-face-back>*{transition:none!important}
  .price-flip,.price-card.is-flipped .price-flip,.price-card.has-flip:hover .price-flip,.price-card:has(.price-face-back :focus-visible) .price-flip{transform:none!important}
  .price-face{transition:opacity .2s}
  .price-face-back{transform:none;opacity:0;visibility:hidden}
  .price-face-back>*{opacity:1;transform:none}
  .price-face-back::after{display:none}
  .price-card.is-flipped .price-face-front{opacity:0;visibility:hidden}
  .price-card.is-flipped .price-face-back{opacity:1;visibility:visible}
}