/* Pricing. Three tiers in one row, one account panel under them.
   The billing scripts inject into this page, in this order, so the selectors
   below name what they create rather than classes they do not set:
     .planTier[individual]  label > select   (property picker, before the button)
     .planTier              p.planOfferTerms, label.planOffer > select
     .plansPage > section   grant recovery (h2 + button + p[role=status])
     .plansPage > section   subscription management (button.pt-btn + p[role=status])
     .plansPage > div       sign-in widget host (fallback when the header
                            account menu is absent)
*/
.plansPage{max-width:1080px;margin:0 auto}
.plansHeading{display:flex;align-items:baseline;justify-content:space-between;gap:20px;margin:22px 0 4px}
.plansHeading h1{margin:0}
.plansHeading a{font-size:14px;white-space:nowrap}
.plansIntro{margin:0 0 18px;font-size:15px}

/* ---- tiers ---- */
.plansComparison{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:22px}
.planTier{min-width:0;display:flex;flex-direction:column;align-items:stretch;
  background:var(--pt-panel);border:1px solid var(--pt-border);border-radius:var(--pt-radius-card);padding:26px 24px 24px}
.planTier h2{margin:0 0 4px;font-size:1.25rem}
.planTagline{margin:0 0 20px;color:var(--pt-muted);font-size:14px;min-height:2.6em}
.planPrice{font-size:34px;font-weight:700;line-height:1.1;margin:0 0 4px;letter-spacing:-.02em;color:var(--pt-ink);font-variant-numeric:tabular-nums}
.planPeriod{display:block;font-size:14px;font-weight:400;letter-spacing:normal;margin-top:6px;color:var(--pt-muted)}
.planPeriod[hidden]{display:none}
.planAnnualPrice{font-size:13px;color:var(--pt-muted);margin:0 0 4px}
.planTier ul{list-style:none;padding:0;margin:18px 0 24px;flex:1;display:grid;align-content:end;gap:9px}
.planTier li{position:relative;padding-left:24px;font-size:15px;line-height:1.5;color:var(--pt-ink)}
.planTier li::before{content:"";position:absolute;left:2px;top:.55em;width:11px;height:6px;
  border-left:2px solid var(--pt-accent);border-bottom:2px solid var(--pt-accent);transform:rotate(-45deg)}
.planTier button,.planCta{width:100%;min-height:46px;font-size:15px}
.planCta{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;text-decoration:none;font-weight:600;
  color:var(--pt-ink);background:var(--pt-paper);border:1px solid var(--pt-border);border-radius:var(--pt-radius-control);padding:10px 12px}
.planCta:hover{border-color:var(--pt-accent);color:var(--pt-accent)}
.planTier button[data-purchase]:not(:disabled){background:var(--pt-accent);color:var(--pt-on-accent);border-color:var(--pt-accent)}
.planTier button[data-purchase]:not(:disabled):hover{background:var(--pt-accent-hover);border-color:var(--pt-accent-hover)}
.planTier>a:not(.planCta){font-size:13px;margin-top:12px;text-align:center}
/* billing switch (Professional): two buttons, one pressed */
.planBilling{display:inline-flex;align-self:flex-start;gap:4px;padding:3px;margin:10px 0 0;background:var(--pt-surface);border:1px solid var(--pt-border);border-radius:10px}
.pt-controls .planBilling button{min-height:32px;padding:5px 16px;font-size:13px;border:0;border-radius:7px;background:transparent;color:var(--pt-muted);width:auto}
.pt-controls .planBilling button[aria-pressed="true"]{background:var(--pt-paper);color:var(--pt-ink);box-shadow:var(--pt-shadow-small)}
.pt-controls .planBilling button:hover{border:0}
.planOffer{display:block;font-size:13px;font-weight:600;margin:0 0 12px}
.planOffer select{display:block;width:100%;max-width:100%;min-width:0;margin-top:6px;font-weight:400}
.planOfferTerms{overflow-wrap:anywhere;font-size:13px;color:var(--pt-muted);margin:0 0 12px}
.planOfferTerms[hidden]{display:none}

/* ---- account row under the tiers ---- */
.planAccountActions{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px}
.planAccountActions[hidden]{display:none}
.planAccountActions button{min-height:40px;padding:8px 16px}
#billingNotice{margin:12px 0 0;min-height:1.5em;font-size:14px}
.plansPage>section{margin-top:28px;padding-top:22px;border-top:1px solid var(--pt-border)}
.plansPage>section[hidden]{display:none}
.plansPage>section h2{font-size:16px;margin:0 0 12px}
.plansPage>section button{min-height:40px;padding:8px 16px}
.plansPage>section p[role=status]{margin:10px 0 0;font-size:14px}
.plansPage>section p[role=status]:empty{display:none}
.plansPage>section .projectActions{display:flex;flex-wrap:wrap;align-items:end;gap:12px;margin-top:14px}
.plansPage>section .projectActions label{display:grid;gap:6px;font-size:13px;font-weight:600}

@media(max-width:860px){.plansComparison{grid-template-columns:1fr;gap:14px}.planTagline{min-height:0}}
@media(max-width:580px){.plansHeading{display:block}.plansHeading a{display:inline-block;margin-top:10px}.planPrice{font-size:30px}.planTier{padding:22px 18px}}