/* Subscription page + upgrade sheet + PlanBanner (Pro paywall handoff rev 3,
   2026-10-05; design: Pro Paywall - Portal v3, D1/D2/X2, C1–C5/X4/X10–X12,
   E1/X13, F1–F3/X3/X14/X15, G1/G2/X16, PlanBanner §4). Tokens match
   pro-components.css: ink #212735, body #565656, muted #7A7E84, purple #8833FF,
   tint #F3EBFF, tint-ink #501C9A, line #E0E1E3, sheet #F6F5F9. */

/* ---------- PlanBanner: full-width strip under the header ---------- */
.pl-banner{display:flex;align-items:center;gap:14px;padding:11px 18px;font-size:13px;line-height:1.45;border-radius:12px;margin:0 0 14px}
.pl-banner b{font-weight:700}
.pl-banner-text{flex:1;min-width:0}
.pl-banner-cta{flex:none;font-size:12.5px;font-weight:700;padding:7px 12px;border-radius:9px;text-decoration:none;white-space:nowrap}
.pl-banner-past_due{background:#FDEDEF;color:#B00B20;border:1px solid #F5B8C0}
.pl-banner-past_due .pl-banner-cta{background:#B00B20;color:#fff}
.pl-banner-trial_ending{background:#F3EBFF;color:#501C9A;border:1px solid #DCC6FF}
.pl-banner-trial_ending .pl-banner-cta{background:#8833FF;color:#fff}
.pl-banner-canceling{background:#F1F0F4;color:#212735;border:1px solid #E0E1E3}
.pl-banner-canceling .pl-banner-cta{background:#8833FF;color:#fff}

/* ---------- page ---------- */
.pl-page{max-width:980px}
.pl-label{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#7A7E84;margin:18px 0 8px}
.pl-section-row{display:flex;align-items:center;justify-content:space-between;gap:12px}
.pl-section-row .pl-label{margin:18px 0 8px}
.pl-grid{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:900px){.pl-grid-cards{grid-template-columns:1fr 1fr}.pl-grid-pro{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}}
.pl-plan-card,.pl-plan-block{display:flex;flex-direction:column;gap:12px;padding:20px}
.pl-plan-card-pro{border:1px solid #DCC6FF}
.pl-plan-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pl-plan-name{font-size:20px;font-weight:700;color:#212735}
.pl-tag{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:999px;font-size:11.5px;font-weight:700;white-space:nowrap}
.pl-tag-grey{background:#F1F0F4;color:#565656}
.pl-tag-purple{background:#F3EBFF;color:#8833FF}
.pl-tag-green{background:#E8F7E9;color:#17AE25}
.pl-tag-red{background:#FDEDEF;color:#B00B20}
.pl-plan-line{font-size:13.5px;color:#565656;line-height:1.5}
.pl-plan-line b{color:#212735}
.pl-legacy-note{font-size:12px;font-weight:700;color:#17AE25}
.pl-price-line{font-size:15px;color:#212735;line-height:1.4}
.pl-price-line b{font-size:22px;font-weight:700}
.pl-price-sub{display:block;font-size:12.5px;color:#565656;margin-top:2px}
.pl-seg{display:flex;background:#F1F0F4;border-radius:10px;padding:3px;gap:3px}
.pl-seg-btn{flex:1;border:0;background:transparent;border-radius:8px;padding:8px 10px;font-size:13px;font-weight:700;color:#565656;cursor:pointer;font-family:inherit}
.pl-seg-btn.is-on{background:#fff;color:#212735;box-shadow:0 1px 3px rgba(23,16,48,.12)}
.pl-bullets{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.pl-bullets li{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;color:#565656;line-height:1.45}
.pl-bullets b{color:#212735}
.pl-dot{flex:none;width:18px;height:18px;border-radius:50%;background:#F3EBFF;margin-top:1px;position:relative}
.pl-dot::after{content:"";position:absolute;left:6px;top:3px;width:4px;height:8px;border:solid #8833FF;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pl-cta{display:flex;align-items:center;justify-content:center;width:100%;height:48px;font-size:15px;font-weight:700;border-radius:12px;text-decoration:none}
.pl-cta[disabled]{opacity:.5;cursor:default}
.pl-fine{font-size:12px;color:#7A7E84;line-height:1.5}
.pl-center{text-align:center}
.pl-secure{font-size:11.5px;color:#7A7E84;text-align:center}
.pl-quiet-btn{display:block;width:100%;border:0;background:transparent;color:#565656;font-size:13.5px;font-weight:700;padding:10px;cursor:pointer;font-family:inherit;text-align:center;text-decoration:none}
.pl-quiet-btn:hover{color:#212735}
.pl-quiet-link{display:block}
.pl-outline-btn{display:block;width:100%;height:48px;border:1px solid #E0E1E3;background:#fff;color:#212735;font-size:15px;font-weight:700;border-radius:12px;cursor:pointer;font-family:inherit}
.pl-outline-btn:hover{border-color:#8833FF;color:#8833FF}
.pl-link-btn{border:0;background:transparent;padding:0;font-size:13px;font-family:inherit}

/* Pro block */
.pl-card-row{display:flex;align-items:center;gap:10px;border:1px solid #E0E1E3;border-radius:10px;padding:10px 12px}
.pl-card-brand{font-size:9px;font-weight:800;background:#1A1F71;color:#fff;border-radius:4px;padding:3px 5px;letter-spacing:.5px}
.pl-card-label{flex:1;font-size:13.5px;color:#212735}
.pl-plan-actions{display:flex;flex-direction:column;gap:6px}
.pl-plan-actions .op-btn{width:100%;justify-content:center}
.pl-invoice-card{padding:4px 16px}
.pl-invoice-row{display:flex;align-items:center;gap:12px;padding:11px 0;border-top:1px solid #F0F0F2;font-size:13.5px;color:#212735}
.pl-invoice-row:first-child{border-top:0}
.pl-invoice-amt{flex:1;font-weight:600}

/* Compare + FAQ */
.pl-compare-card{padding:4px 16px}
.pl-compare-row{display:grid;grid-template-columns:minmax(0,1fr) 92px 92px;gap:8px;align-items:center;padding:10px 0;border-top:1px solid #F0F0F2;font-size:13.5px}
.pl-compare-row:first-child{border-top:0}
.pl-compare-head{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:#7A7E84}
.pl-compare-f{font-weight:600;color:#212735}
.pl-compare-free{color:#565656}
.pl-compare-pro{font-weight:700;color:#8833FF}
.pl-compare-row.is-coming .pl-compare-f{color:#B0B3B8}
.pl-compare-row.is-coming .pl-compare-pro{color:#7A7E84}
.pl-purple{color:#8833FF}
.pl-faq-card{padding:4px 16px}
.pl-faq-item{padding:12px 0;border-top:1px solid #F0F0F2}
.pl-faq-item:first-child{border-top:0}
.pl-faq-q{font-size:14px;font-weight:700;color:#212735}
.pl-faq-a{font-size:13px;color:#565656;line-height:1.5;margin-top:3px}

/* ---------- overlay: bottom sheet on phones, centered modal from 720px ---------- */
.pl-overlay{position:fixed;inset:0;z-index:60;background:rgba(23,16,48,.62);display:flex;align-items:flex-end;justify-content:center;padding:0}
.pl-overlay[hidden]{display:none}
.pl-sheet,.pl-dialog{background:#fff;width:100%;max-height:92vh;overflow:auto;border-radius:22px 22px 0 0;padding:10px 20px 24px;display:flex;flex-direction:column;gap:14px;box-shadow:0 -8px 40px rgba(20,10,40,.25)}
.pl-sheet>*,.pl-dialog>*{flex-shrink:0}
/* Phone pass (2026-10-05) */
.pl-mobile-bar{padding:14px 20px 0;margin-bottom:0}
.pl-card-label,.pl-card-row .pl-link-btn{white-space:nowrap}
.pl-card-label{overflow:hidden;text-overflow:ellipsis}
@media (max-width:479px){.pl-compare-row{grid-template-columns:minmax(0,1fr) 68px 68px;gap:6px;font-size:12.5px}}
.pl-dialog{padding:24px 20px}
@media (min-width:720px){
  .pl-overlay{align-items:center;padding:24px}
  .pl-sheet,.pl-dialog{width:440px;border-radius:22px;padding:20px 24px 24px;max-height:90vh}
  .pl-sheet-grab{display:none}
}
.pl-sheet-grab{width:40px;height:4px;border-radius:2px;background:#E0E1E3;margin:4px auto 2px}
.pl-sheet-head{display:flex;align-items:center;gap:8px;padding-bottom:12px;border-bottom:1px solid #E0E1E3}
.pl-sheet-logo{height:22px;width:auto}
.pl-sheet-who{flex:1;font-size:11.5px;color:#7A7E84;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pl-x{border:0;background:transparent;font-size:18px;color:#7A7E84;cursor:pointer;padding:2px 4px;line-height:1}
.pl-step{display:flex;flex-direction:column;gap:14px}
.pl-step[hidden]{display:none}
.pl-sheet-title{font-size:23px;font-weight:700;color:#212735;line-height:1.2;margin:0}
.pl-pay-head{display:flex;align-items:center;gap:10px}
.pl-back{border:0;background:transparent;font-size:24px;color:#565656;cursor:pointer;padding:0 6px;line-height:1}
.pl-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;background:#F6F6F7;border-radius:12px;padding:12px 14px}
.pl-summary-title{font-size:14px;font-weight:700;color:#212735}
.pl-summary-sub{font-size:12px;color:#7A7E84;margin-top:2px}
.pl-summary-amt{font-size:18px;font-weight:700;color:#212735;white-space:nowrap}
.pl-element-box{background:#FCFCFD;border:1px solid #E0E1E3;border-radius:12px;padding:14px;min-height:120px}
.pl-terms{font-size:12.5px;color:#565656;line-height:1.5}
.pl-error{font-size:13px;background:#FDEDEF;color:#B00B20;border:1px solid #F5B8C0;border-radius:10px;padding:10px 12px;line-height:1.45}
.pl-error[hidden]{display:none}
.pl-note{font-size:13px;background:#F3EBFF;color:#501C9A;border-radius:10px;padding:10px 12px;line-height:1.45}
.pl-dialog-body{font-size:14px;color:#565656;line-height:1.5;margin:0}

/* ---------- welcome (E1 / X13): dark canvas, one card ---------- */
.pl-welcome{display:flex;justify-content:center}
.pl-welcome-card{width:100%;max-width:520px;display:flex;flex-direction:column;gap:14px;background:#fff;border-radius:20px;padding:28px 24px;box-shadow:0 2px 12px rgba(23,16,48,.05)}
.pl-welcome-chip{display:flex}
.pl-welcome-title{font-size:30px;font-weight:700;color:#212735;line-height:1.15;margin:0}
.pl-welcome-sub{font-size:14.5px;color:#565656;line-height:1.5;margin:0}