/* Pricing page: interactive tiers, monthly/annual toggle, Custom stepper,
   promo banner. Uses the site's dark/acid tokens from legal.css with fallbacks. */
:root{
  --pr-acid:var(--acid,#d6ff4b);
  --pr-ink:var(--ink,#f4f1ea);
  --pr-mute:var(--mute,#8b8796);
  --pr-line:var(--line,rgba(244,241,234,.12));
  --pr-panel:#0d0d13;
  --pr-good:#5ee6a8;
}

/* Promo banner. The [hidden] rule must win over the display:flex below —
   an author rule outranks the UA [hidden]{display:none}, so state it here. */
.promo-banner[hidden]{display:none}
.promo-banner{display:flex;align-items:center;justify-content:center;gap:14px;flex-wrap:wrap;
  background:linear-gradient(90deg,rgba(214,255,75,.14),rgba(214,255,75,.05));
  border:1px solid rgba(214,255,75,.35);border-radius:12px;padding:12px 18px;margin:0 auto 26px;max-width:780px}
.promo-banner.solid{background:var(--pr-acid);border-color:var(--pr-acid)}
.promo-text{font-size:13.5px;font-weight:600;color:var(--pr-ink)}
.promo-text b{color:var(--pr-acid)}
.promo-banner.solid .promo-text,.promo-banner.solid .promo-text b{color:#0b0b10}
.promo-code{display:inline-flex;align-items:center;gap:8px;border:1px dashed var(--pr-acid);border-radius:8px;
  padding:6px 12px;font-family:"Sora","Manrope",sans-serif;font-weight:800;letter-spacing:.14em;color:var(--pr-acid);
  background:rgba(0,0,0,.25);cursor:pointer;font-size:13px}
.promo-banner.solid .promo-code{color:#0b0b10;border-color:#0b0b10;background:rgba(0,0,0,.08)}

/* Purchases-paused kill-switch: greyed, non-interactive plan CTAs + notice. */
.plan-cta.disabled,.plan-cta:disabled{background:transparent;border-color:var(--pr-line);
  color:var(--pr-mute);cursor:not-allowed;opacity:.55;pointer-events:none;box-shadow:none}
.plan-cta.disabled.primary,.plan-cta.primary:disabled{background:rgba(244,241,234,.06);border-color:var(--pr-line)}
.sales-paused{margin:14px auto 0;max-width:640px;font-size:13.5px;font-weight:600;color:var(--pr-mute);
  border:1px dashed var(--pr-line);border-radius:10px;padding:10px 16px}

/* Billing toggle */
.bill-toggle{display:inline-flex;align-items:center;gap:0;border:1px solid var(--pr-line);border-radius:999px;
  padding:4px;background:var(--pr-panel);margin:22px 0 10px}
.bill-toggle button{appearance:none;border:0;background:transparent;color:var(--pr-mute);
  font:700 13px/1 "Manrope",sans-serif;letter-spacing:.03em;padding:9px 18px;border-radius:999px;cursor:pointer;transition:.16s}
.bill-toggle button.on{background:var(--pr-acid);color:#0b0b10}
/* The Lifetime tab holds a single one-of-one plan, so it gets its own accent
   rather than the acid used for the two billing periods. */
.bill-toggle button#tgLifetime.on{background:var(--pr-coral,#ff7a59);color:#1a0b06}
.plan-wide .pw-id{position:relative}
.plan-wide .badge{position:absolute;top:-10px;left:26px;background:var(--pr-acid);color:#0b0b10;
  font:800 10px/1 "Manrope",sans-serif;letter-spacing:.12em;text-transform:uppercase;padding:6px 10px;border-radius:999px}
/* The Lifetime tab holds one card. Left in the auto-fit grid it would either
   stretch across the whole row or sit hard against the left edge, so the grid
   steps aside and the card keeps a card's width, centred. */
.ptable.solo{display:flex;justify-content:center}
.ptable.solo .plan{width:min(360px,100%)}
.bill-save{margin-left:10px;font-size:11px;color:var(--pr-acid);border:1px solid rgba(214,255,75,.35);
  padding:5px 10px;border-radius:999px;letter-spacing:.04em}
.vat-note{font-size:12px;color:var(--pr-mute);margin:6px 0 0}
.vat-note b{color:var(--pr-ink)}
/* The billing note sits under the plans rather than under the toggle, so it no
   longer inherits the centred head; centre and cap it on its own. */
.vat-note.below-plans{max-width:760px;margin:18px auto 0;text-align:center}
/* Beta disclosure. Sits with the billing note but is set apart, so it reads as a
   notice people see before paying rather than fine print under the prices. */
.beta-note{border:1px solid rgba(138,109,255,.35);background:rgba(138,109,255,.08);border-radius:10px;padding:10px 12px;margin-top:10px;line-height:1.5}
.beta-note a{color:inherit;text-decoration:underline}

/* Plan grid */
.ptable{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-top:28px;align-items:stretch}
.plan{position:relative;display:flex;flex-direction:column;background:var(--pr-panel);border:1px solid var(--pr-line);
  border-radius:16px;padding:22px 20px}
.plan.featured{border-color:rgba(214,255,75,.5);box-shadow:0 0 0 1px rgba(214,255,75,.15),0 22px 55px rgba(0,0,0,.4)}
.plan .badge{position:absolute;top:-10px;left:20px;background:var(--pr-acid);color:#0b0b10;font:800 10px/1 "Manrope",sans-serif;
  letter-spacing:.1em;text-transform:uppercase;padding:6px 9px;border-radius:6px}
.plan-name{font-family:"Sora","Manrope",sans-serif;font-weight:700;font-size:17px}
.plan-desc{color:var(--pr-mute);font-size:12px;min-height:32px;margin:2px 0 12px}
.plan-price{display:flex;align-items:baseline;gap:4px;margin-bottom:2px}
.plan-price .amt{font-family:"Sora","Manrope",sans-serif;font-weight:800;font-size:32px;letter-spacing:-.02em;color:var(--pr-ink)}
.plan-price .per{color:var(--pr-mute);font-size:12px;font-weight:600}
.plan-year{font-size:11px;color:var(--pr-mute);min-height:16px;margin-bottom:16px}
.plan-year b{color:var(--pr-acid);font-weight:700}
.plan .feat{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:8px;font-size:12.5px;color:#cfccd6}
.plan .feat li{display:flex;gap:8px;align-items:flex-start}
.plan .feat li i{position:relative;flex:0 0 auto;width:15px;height:15px;margin-top:1px;border-radius:4px;background:rgba(214,255,75,.14)}
.plan .feat li i::after{content:"";position:absolute;left:5px;top:2px;width:4px;height:8px;
  border:solid var(--pr-acid);border-width:0 2px 2px 0;transform:rotate(45deg)}
.plan-cta{margin-top:auto;display:block;text-align:center;border:1px solid var(--pr-line);background:transparent;
  color:var(--pr-ink);font:700 13px/1 "Manrope",sans-serif;letter-spacing:.02em;padding:13px;border-radius:10px;
  cursor:pointer;transition:.16s;text-decoration:none;width:100%}
.plan-cta:hover{border-color:var(--pr-acid);color:var(--pr-acid)}
.plan-cta.primary{background:var(--pr-acid);color:#0b0b10;border-color:var(--pr-acid)}
.plan-cta.primary:hover{filter:brightness(1.08);color:#0b0b10}
.plan-cta[aria-disabled="true"]{opacity:.5;pointer-events:none}

/* Custom stepper */
.cust-stepper{display:flex;align-items:center;border:1px solid var(--pr-line);border-radius:10px;overflow:hidden;margin:2px 0 8px;width:fit-content}
.cust-stepper button{appearance:none;border:0;background:#11111a;color:var(--pr-ink);width:34px;height:34px;font-size:18px;cursor:pointer}
.cust-stepper button:hover{background:#1a1a26;color:var(--pr-acid)}
.cust-stepper .val{min-width:42px;text-align:center;font-family:"Sora","Manrope",sans-serif;font-weight:700;font-size:15px}
.cust-line{font-size:11.5px;color:var(--pr-mute);margin-bottom:10px}

/* Custom as a full-width horizontal band: spans the whole grid row and splits
   into identity | controls | CTA. Only this one card changes. */
.plan-wide{grid-column:1/-1;display:grid;grid-template-columns:1.05fr 1.9fr .9fr;padding:0;align-items:stretch}
.plan-wide>div{display:flex;flex-direction:column;padding:24px 26px;min-width:0}
.plan-wide>div+div{border-left:1px solid var(--pr-line)}
.plan-wide .plan-desc{min-height:0;margin:4px 0 0}
.plan-wide .pw-id .plan-price{margin-top:auto}
.plan-wide .pw-break{margin:8px 0 0}
.plan-wide .pw-ctrl{display:grid;grid-template-columns:1fr 1fr;gap:24px;justify-content:center}
.plan-wide .pw-step{min-width:0}
.plan-wide .pw-steplabel{color:var(--pr-ink);font-weight:600;margin-bottom:8px}
.plan-wide .cust-stepper{margin:0 0 8px}
/* Horizon buys the same add-ons outright, so its card carries the two steppers
   inline rather than in the full-width Custom band. */
.hz-add{margin:6px 0 4px;display:grid;gap:8px}
.hz-step .cust-line{margin-bottom:4px}
.hz-step .cust-line:first-child{color:var(--pr-ink);font-weight:600;font-size:12px}
.hz-step .cust-stepper{margin:4px 0 4px}
.plan-wide .pw-cta{justify-content:flex-start}
.plan-wide .pw-cta .feat{margin:0 0 18px}
.plan-wide .pw-cta .plan-cta{margin-top:auto}
.plan-wide .pw-total{text-align:center;margin:10px 0 0}
@media (max-width:760px){
  .plan-wide{grid-template-columns:1fr}
  .plan-wide>div+div{border-left:0;border-top:1px solid var(--pr-line)}
  .plan-wide .pw-ctrl{grid-template-columns:1fr}
}

@media (prefers-reduced-motion:reduce){.plan-cta,.bill-toggle button{transition:none}}