/* CellHub Pro — pricing page (v1, 2026-10-10): the page is built from the homepage pieces (home.v3.css: hero, pill,
   gradient headline, .op panel with the CSS planet, chips, two-column FAQ, .final) so Pricing reads as one site with
   the front page. This file adds only what the homepage does not have: a CSS starfield, the checklist and the
   invitation box inside the panel, the plan card for the optional purchase, and small helpers. No inline JS (CSP). */
.price-hero{padding-bottom:48px}
.price-hero .hero-copy{padding-top:16px}
.stars{position:absolute;inset:0;pointer-events:none;opacity:.75;
  background-image:
    radial-gradient(1.6px 1.6px at 8% 18%,rgba(255,255,255,.95),transparent 70%),
    radial-gradient(1.2px 1.2px at 22% 64%,rgba(255,255,255,.8),transparent 70%),
    radial-gradient(1.8px 1.8px at 31% 28%,rgba(186,230,253,.95),transparent 70%),
    radial-gradient(1.2px 1.2px at 44% 80%,rgba(255,255,255,.7),transparent 70%),
    radial-gradient(1.5px 1.5px at 57% 12%,rgba(255,255,255,.9),transparent 70%),
    radial-gradient(1.2px 1.2px at 66% 52%,rgba(233,213,255,.85),transparent 70%),
    radial-gradient(2px 2px at 78% 30%,rgba(255,255,255,.95),transparent 70%),
    radial-gradient(1.2px 1.2px at 86% 74%,rgba(255,255,255,.7),transparent 70%),
    radial-gradient(1.4px 1.4px at 93% 10%,rgba(186,230,253,.9),transparent 70%),
    radial-gradient(1.2px 1.2px at 14% 88%,rgba(255,255,255,.6),transparent 70%),
    radial-gradient(1.6px 1.6px at 50% 44%,rgba(255,255,255,.55),transparent 70%),
    radial-gradient(1.2px 1.2px at 72% 90%,rgba(233,213,255,.7),transparent 70%);
  background-size:1100px 760px;background-repeat:repeat;
  -webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.op-col{display:flex;flex-direction:column;gap:22px}
.checks{grid-template-columns:minmax(0,1fr)}
.checks .op-feat{display:flex;gap:14px;align-items:flex-start;font-size:1rem;color:#EDE9FE;line-height:1.45}
.checks i{flex-shrink:0;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,#22D3EE,#818CF8);color:#0E1024;font-style:normal;font-weight:900;font-size:.85rem;display:inline-flex;align-items:center;justify-content:center;margin-top:1px}
.invite{border-radius:26px;background:rgba(14,16,36,.55);border:1px solid rgba(255,255,255,.14);padding:30px;display:flex;flex-direction:column;gap:16px;backdrop-filter:blur(10px);box-shadow:0 40px 80px -40px rgba(0,0,0,.8)}
.invite h3{font-size:1.45rem;line-height:1.1}
.invite-ctas{display:flex;flex-direction:column;gap:12px}
.invite .legal{font-size:.9rem;color:#D4CDEB}
.invite .legal a{color:#C4B5FD;text-decoration:underline;text-underline-offset:3px}
.invite hr{border:0;border-top:1px solid rgba(255,255,255,.12);margin:4px 0}
.invite p{color:#D4CDEB}
/* Optional purchase (a signed-in dealer arriving from My CellHub): the same card language as the homepage panels. */
.plans-head{display:flex;flex-direction:column;gap:12px;max-width:760px;margin-bottom:28px}
.plans-head h2{font-size:clamp(2rem,4.5vw,3.2rem);line-height:1.02}
.row{display:flex;gap:.75rem;align-items:center;flex-wrap:wrap}
.toggle{display:inline-flex;border:1px solid var(--bd2);border-radius:12px;overflow:hidden;background:var(--s3)}
.toggle button{background:transparent;color:var(--m1);border:none;padding:.6rem 1.1rem;font-weight:800;cursor:pointer;font-family:var(--display);font-size:.85rem;letter-spacing:.02em}
.toggle button.on{background:linear-gradient(90deg,var(--pos1),var(--pos2));color:#fff}
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,420px));gap:1.25rem;margin-top:1.5rem}
.plan{display:flex;flex-direction:column;gap:.8rem;border-radius:26px;padding:28px;background:linear-gradient(155deg,#1A1C38,#141630);border:1px solid var(--bd2);box-shadow:0 40px 80px -40px rgba(124,58,237,.45)}
.plan .price{font-family:var(--display);font-size:2.8rem;font-weight:900;letter-spacing:-.03em;display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem;font-variant-numeric:tabular-nums}
.plan .price small{font-size:.9rem;color:var(--m1);font-family:var(--body);font-weight:500;letter-spacing:0}
.plan .per{font-size:.85rem;color:var(--m1)}
.badge{display:inline-block;font-family:var(--mono);font-size:.62rem;font-weight:800;letter-spacing:.08em;padding:4px 9px;border-radius:20px;background:rgba(168,85,247,.16);border:1px solid rgba(192,132,252,.35);color:#E9D5FF;text-transform:uppercase}
ul.plain{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}
ul.plain li{padding-left:1.4rem;position:relative;color:#D4CDEB}
ul.plain li::before{content:"✓";position:absolute;left:0;color:var(--cyan);font-weight:900}
.btn.block{width:100%}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;transform:none;filter:none}
button.btn{border:0;cursor:pointer}
.msg{margin-top:.9rem;font-size:.92rem;padding:.75rem .95rem;border-radius:12px;line-height:1.5}
.msg.err{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35);color:#FECACA}
#disclosure{font-size:.85rem;color:var(--m1)}
#disclosure a{color:#C4B5FD;text-decoration:underline}
.small{font-size:.85rem}
.hidden{display:none!important}
[hidden]{display:none!important}
.faq-head{display:flex;flex-direction:column;gap:16px}
footer.site{margin-top:0}
.btn:focus-visible,.toggle button:focus-visible,summary:focus-visible,a:focus-visible{outline:2px solid var(--cyan);outline-offset:3px}
@media (max-width:640px){.invite{padding:22px}.price-hero{padding-top:84px}}