/* pricing.css — pricing tiers, billing toggle, lifetime offer, fine print.
   Loaded after main.css. */

/* Monthly / Annual toggle (pricing.js) */
.billing{display:flex;align-items:center;gap:4px;width:max-content;margin:0 auto 40px;
  border:1px solid var(--line);border-radius:999px;padding:4px;background:var(--surface)}
.billing button{font-family:var(--font-d);font-weight:600;font-size:14px;color:var(--muted);
  background:none;border:0;border-radius:999px;padding:9px 18px;cursor:pointer;display:inline-flex;align-items:center;gap:8px;
  transition:background .15s,color .15s}
.billing button[aria-pressed=true]{color:#170a16;background:linear-gradient(90deg,var(--magenta-2),var(--cyan))}
.billing .save{font-family:var(--font-d);font-weight:600;font-size:11px;letter-spacing:.04em}
.billing button[aria-pressed=false] .save{color:var(--cyan)}

.plans{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:var(--maxw);margin:0 auto;align-items:start}
.plans>*{min-width:0}
.plan{background:linear-gradient(180deg,var(--surface),rgba(20,40,60,.45));border:1px solid var(--line);
  border-radius:var(--radius-lg);padding:30px 26px;display:flex;flex-direction:column;height:100%;
  transition:transform .3s ease,border-color .3s ease,box-shadow .3s ease}
.plan:hover{border-color:rgba(130,200,255,.5);box-shadow:0 26px 60px rgba(0,0,0,.4)}
.plan--feat{border-color:rgba(220,70,195,.55);box-shadow:0 0 0 1px rgba(220,70,195,.25),0 30px 70px rgba(220,70,195,.18);
  background:linear-gradient(180deg,rgba(220,70,195,.10),rgba(20,40,60,.5));position:relative}
.plan__tag{position:absolute;top:-13px;left:50%;transform:translateX(-50%);font-family:var(--font-d);font-weight:600;
  font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#170a16;background:linear-gradient(90deg,var(--magenta-2),var(--cyan));
  padding:6px 14px;border-radius:999px;white-space:nowrap}
.plan__name{font-family:var(--font-d);font-weight:600;font-size:15px;letter-spacing:.04em;color:var(--muted);text-transform:uppercase}
.plan__price{font-family:var(--font-d);font-weight:700;font-size:42px;margin:10px 0 2px;letter-spacing:-.02em}
.plan__price small{font-size:16px;color:var(--faint);font-weight:500}
.plan__sub{color:var(--faint);font-size:13.5px;min-height:20px}
.plan__annual{color:var(--cyan);font-size:12.5px;min-height:16px;margin-top:2px}
.plan ul{list-style:none;margin:20px 0 24px;padding:0;display:flex;flex-direction:column;gap:11px}
.plan li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--muted)}
.plan li svg{width:18px;height:18px;flex:0 0 auto;color:var(--cyan);margin-top:2px}
.plan li b{color:var(--ink);font-weight:600}
.plan .btn{width:100%;justify-content:center;margin-top:auto}
.lifetime{max-width:var(--maxw);margin:24px auto 0;display:flex;flex-wrap:wrap;align-items:center;gap:10px 20px;justify-content:center;
  text-align:center;background:linear-gradient(90deg,rgba(255,194,71,.10),rgba(130,200,255,.06));
  border:1px solid rgba(255,194,71,.30);border-radius:var(--radius);padding:20px 26px}
.lifetime b{font-family:var(--font-d);font-size:18px}
.lifetime .price{font-family:var(--font-d);font-weight:700;font-size:20px;color:var(--amber)}
.lifetime span{color:var(--muted);font-size:14.5px}
.finely{max-width:760px;margin:22px auto 0;text-align:center;color:var(--faint);font-size:13px}

@media (prefers-reduced-motion: no-preference){
  .plan:hover{transform:translateY(-6px)}
}
@media (max-width:920px){
  .plans{grid-template-columns:1fr;max-width:440px}
}