/* ══════════════════════════════════════════════════════════════════════
   Price cards — device tabs (1–4) + 3 / 6 / 12-month cards
   Markup is generated by scripts/build-price-cards.py from data/pricing.json.
   Tabs are CSS-only radio buttons, so every panel works without JavaScript.
   ══════════════════════════════════════════════════════════════════════ */
.price-cards{max-width:var(--w-wide,1100px);margin:36px auto 44px;padding:0 20px;color:#e2e8f0}

/* ── Tabs ───────────────────────────────────────────────────────────── */
.pc-radio{position:absolute;width:1px;height:1px;margin:0;opacity:0;pointer-events:none}
.pc-tabs{display:flex;justify-content:center;margin:0 0 26px}
.pc-tabs__track{display:inline-grid;grid-template-columns:repeat(4,auto);gap:4px;padding:6px;border-radius:999px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.09);box-shadow:inset 0 1px 0 rgba(255,255,255,0.04)}
.pc-tab{display:block;padding:12px 26px;border-radius:999px;color:#94a3b8;font-size:1.05rem;font-weight:600;line-height:1.2;white-space:nowrap;cursor:pointer;user-select:none;transition:color .15s ease,background-color .15s ease,box-shadow .15s ease}
.pc-tab:hover{color:#e2e8f0}
#pc-dev-1:checked~.pc-tabs .pc-tab[for="pc-dev-1"],
#pc-dev-2:checked~.pc-tabs .pc-tab[for="pc-dev-2"],
#pc-dev-3:checked~.pc-tabs .pc-tab[for="pc-dev-3"],
#pc-dev-4:checked~.pc-tabs .pc-tab[for="pc-dev-4"]{color:#fff;background:linear-gradient(135deg,#818cf8 0%,#c084fc 100%);box-shadow:0 10px 30px -8px rgba(129,140,248,0.7)}
#pc-dev-1:focus-visible~.pc-tabs .pc-tab[for="pc-dev-1"],
#pc-dev-2:focus-visible~.pc-tabs .pc-tab[for="pc-dev-2"],
#pc-dev-3:focus-visible~.pc-tabs .pc-tab[for="pc-dev-3"],
#pc-dev-4:focus-visible~.pc-tabs .pc-tab[for="pc-dev-4"]{outline:2px solid #c4b5fd;outline-offset:2px}

.pc-panel{display:none}
#pc-dev-1:checked~.pc-panel--1,
#pc-dev-2:checked~.pc-panel--2,
#pc-dev-3:checked~.pc-panel--3,
#pc-dev-4:checked~.pc-panel--4{display:block}
.price-cards .pc-intro{margin:0 0 40px;padding:0;border:0;text-align:center;font-size:1.08rem;font-weight:400;line-height:1.4;letter-spacing:0;color:#94a3b8}
.price-cards .pc-intro strong{color:#e2e8f0;font-weight:700}

/* ── Cards ──────────────────────────────────────────────────────────── */
.pc-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:30px;align-items:start}
.pc-card{position:relative;display:flex;flex-direction:column;overflow:hidden;border-radius:22px;background:linear-gradient(180deg,#151a33 0%,#11162c 100%);border:1px solid rgba(255,255,255,0.09);box-shadow:0 28px 60px -34px rgba(0,0,0,0.85)}
.pc-card--popular{transform:translateY(-12px);border-color:rgba(168,85,247,0.55);box-shadow:0 0 0 1px rgba(168,85,247,0.22),0 34px 80px -34px rgba(129,140,248,0.6)}
.pc-card--best{border-color:rgba(129,140,248,0.38)}

.pc-ribbon{position:absolute;top:30px;right:-50px;z-index:2;width:200px;padding:7px 0;transform:rotate(45deg);background:linear-gradient(135deg,#818cf8 0%,#c084fc 100%);color:#fff;text-align:center;font-size:.7rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 8px 18px -8px rgba(0,0,0,0.7)}

.pc-head{padding:42px 28px 64px;text-align:center;background:#080c1f;clip-path:polygon(0 0,100% 0,100% calc(100% - 40px),0 100%)}
.price-cards .pc-name{margin:0;padding:0;border:0;color:#fff;font-size:2.35rem;font-weight:800;line-height:1.1;letter-spacing:-.02em}
.pc-tag{margin:10px 0 0;color:#94a3b8;font-size:1.02rem}
.pc-price-row{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:26px 0 0}
.pc-price{display:inline-flex;align-items:flex-start;color:#fff;font-weight:800;line-height:.95;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.pc-cur{margin:6px 3px 0 0;color:#a5b4fc;font-size:1.9rem;line-height:1;vertical-align:baseline;letter-spacing:0;white-space:nowrap}
.pc-cur--long{margin:10px 6px 0 0;font-size:1.1rem;letter-spacing:.02em}
.pc-amt{font-size:4.6rem}
.pc-card--popular .pc-amt,.pc-card--best .pc-amt{background:linear-gradient(135deg,#a5b4fc 0%,#c084fc 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.pc-per{margin-bottom:9px;color:#94a3b8;font-size:1.15rem;font-weight:600;white-space:nowrap}
.pc-billed{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 12px;margin:24px 0 0;color:#94a3b8;font-size:1.02rem}
.pc-save{display:inline-block;padding:6px 12px;border-radius:999px;background:linear-gradient(135deg,#818cf8 0%,#c084fc 100%);color:#fff;font-size:.85rem;font-weight:700;line-height:1;white-space:nowrap}

.pc-features{flex:1;margin:0;padding:6px 28px 4px;list-style:none}
.pc-features li{display:flex;align-items:center;gap:16px;margin:0;padding:20px 0;border-bottom:1px solid rgba(255,255,255,0.07);color:#e2e8f0;font-size:1.05rem;line-height:1.4}
.pc-features li::before{content:"";flex:0 0 28px;height:28px;border-radius:50%;background:rgba(129,140,248,0.16) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a5b4fc' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat;box-shadow:inset 0 0 0 1px rgba(129,140,248,0.28)}
.pc-features li.pc-hot{margin:0 -28px;padding-left:28px;padding-right:28px;border-bottom-color:transparent;background:linear-gradient(90deg,rgba(129,140,248,0.18) 0%,rgba(192,132,252,0.10) 100%);color:#fff;font-weight:700}
.pc-features li.pc-bonus{border-bottom:0;color:#a5b4fc}
.pc-features li.pc-bonus a{color:inherit;text-decoration:underline;text-underline-offset:2px}

.pc-foot{padding:26px 28px 32px}
.price-cards .pc-btn{display:block;padding:19px 20px;border-radius:999px;background:linear-gradient(135deg,#818cf8 0%,#c084fc 100%);box-shadow:0 14px 32px -14px rgba(129,140,248,0.75);color:#fff;font-size:1.2rem;font-weight:700;line-height:1.2;text-align:center;text-decoration:none;transition:transform .15s ease,filter .15s ease,background-color .15s ease}
.price-cards .pc-btn:hover{transform:translateY(-2px);filter:brightness(1.08);color:#fff}
.price-cards .pc-btn:focus-visible{outline:2px solid #c4b5fd;outline-offset:3px}
.price-cards .pc-btn--ghost{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.2)}
.price-cards .pc-btn--ghost:hover{background:rgba(255,255,255,0.06);filter:none}

/* ── Responsive ─────────────────────────────────────────────────────── */
@media (max-width:959px){
  .pc-grid{grid-template-columns:minmax(0,460px);justify-content:center;gap:26px}
  .pc-card--popular{transform:none}
}
@media (max-width:560px){
  .price-cards{padding:0 16px}
  .pc-tabs__track{gap:2px;padding:5px}
  .pc-tab{padding:10px 14px;font-size:.95rem}
  .price-cards .pc-intro{margin-bottom:28px;font-size:1rem}
  .pc-head{padding:36px 22px 58px}
  .price-cards .pc-name{font-size:2.05rem}
  .pc-amt{font-size:4rem}
  .pc-cur{font-size:1.6rem}
  .pc-cur--long{font-size:1rem}
  .pc-features{padding:4px 22px}
  .pc-features li{gap:14px;padding:16px 0;font-size:1rem}
  .pc-features li.pc-hot{margin:0 -22px;padding-left:22px;padding-right:22px}
  .pc-foot{padding:22px 22px 26px}
}
@media (max-width:380px){
  .pc-tab{padding:9px 9px;font-size:.84rem}
  .pc-ribbon{right:-58px}
}
@media (max-width:359px){
  .pc-tabs__track{grid-template-columns:repeat(2,1fr);border-radius:24px}
  .pc-tab{text-align:center}
}
@media (prefers-reduced-motion:reduce){
  .pc-tab,.price-cards .pc-btn{transition:none}
  .price-cards .pc-btn:hover{transform:none}
}