/* Membership comparison: deliberately scoped to retain billing controls and prices. */
#membershipDialog{box-sizing:border-box;width:min(1280px,calc(100vw - 32px));max-width:none;max-height:92dvh;padding:0;border:1px solid #9db9cc55;border-radius:22px;background:#0b1321;color:#eaf0f8;overflow:auto;box-shadow:0 32px 120px #000a}
#membershipDialog::backdrop{background:#030811cf;backdrop-filter:blur(6px)}
#membershipDialog .membership-dialog{box-sizing:border-box;width:100%;max-height:none;overflow:visible;border:0;border-radius:0;padding:clamp(22px,3.5vw,44px);background:radial-gradient(ellipse at 90% 0,#47345266,transparent 50%),linear-gradient(135deg,#0d1a29,#0c1320);box-shadow:none}
#membershipDialog .dialog-heading{position:relative;display:block;padding-right:48px;margin-bottom:25px}
#membershipDialog .dialog-heading .eyebrow{font:600 .65rem/1.7 system-ui;letter-spacing:.2em;color:#b8d4df;margin:0 0 14px}
#membershipDialog .dialog-heading h2{max-width:690px;font:400 clamp(2.2rem,4.1vw,3.65rem)/1.08 Georgia,serif;letter-spacing:-.045em;margin:0 0 15px;color:#f3edf6;text-wrap:balance}
#membershipDialog .dialog-heading p:last-child{font:.9rem/1.7 system-ui;color:#b9c8d8;max-width:600px}
#membershipDialog #closeMembership{position:absolute;right:0;top:0;display:grid;place-items:center;width:44px;height:44px;padding:0;min-width:44px;border:1px solid #aab7cc44;border-radius:50%;background:#182436;color:#eef6ff;font:1.6rem system-ui;cursor:pointer}
#membershipDialog .billing-frequency{padding:16px 0;margin:0 0 24px;border-block:1px solid #adc2d52b;color:#b9c8d8;font:.72rem/1.7 system-ui;letter-spacing:.015em}
#membershipDialog .plan-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;align-items:stretch}
#membershipDialog .plan-card{box-sizing:border-box;position:relative;min-width:0;min-height:0;display:flex;flex-direction:column;padding:27px 21px 21px;border:1px solid #a5b9cf38;border-radius:15px;background:linear-gradient(150deg,#192a3a99,#0e172699);box-shadow:inset 0 1px #e7f3ff0c;overflow:hidden}
#membershipDialog .plan-card:before{content:"";position:absolute;left:21px;top:0;width:38px;height:2px;background:#9abecb;box-shadow:0 0 14px #a3dbf155}
#membershipDialog .plan-card.featured{border-color:#af9bc28c;background:linear-gradient(145deg,#332b4688,#152537);box-shadow:inset 0 1px #e7f3ff12}
#membershipDialog .plan-card.featured:before{background:#d1b6df}
#membershipDialog .plan-card:last-child:before{background:#dabbb0}
#membershipDialog .plan-label{margin:4px 0 14px;color:#bcdae3;font:650 .65rem/1.6 system-ui;letter-spacing:.14em;min-height:17px}
#membershipDialog .plan-card.featured .plan-label{color:#d9c9e8}
#membershipDialog .plan-card:last-child .plan-label{color:#dfc4b9}
#membershipDialog .plan-card h3{margin:0 0 20px;min-height:54px;color:#f1eff5;font:400 1.45rem/1.2 Georgia,serif;letter-spacing:-.025em;text-wrap:balance}
#membershipDialog .price{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px;margin:0;min-height:46px;color:#f5f1f7;font:450 clamp(1.85rem,2.6vw,2.6rem)/1.15 system-ui;letter-spacing:-.055em;font-variant-numeric:tabular-nums}
#membershipDialog .price small{font:400 .67rem/1.5 system-ui;letter-spacing:0;color:#b7c7da}
#membershipDialog .popular{position:static;order:0;align-self:flex-start;max-width:100%;box-sizing:border-box;background:#c7b0dd14;color:#dacee8;border:1px solid #c7b0dd33;border-radius:5px;padding:5px 7px;font:550 .49rem/1.5 system-ui;letter-spacing:.08em;margin:14px 0 0}
#membershipDialog .plan-card .popular{order:4}
#membershipDialog .plan-card ul{list-style:none;padding:19px 0 0;margin:19px 0 22px;border-top:1px solid #b9cadd29;flex:1}
#membershipDialog .plan-card li{position:relative;padding:0 0 0 17px;margin:0 0 12px;border:0;color:#c1cede;font:400 .76rem/1.6 system-ui;overflow-wrap:anywhere}
#membershipDialog .plan-card li:last-child{margin-bottom:0}
#membershipDialog .plan-card li:before{content:"✓" / "";position:absolute;left:0;top:0;margin:0;color:#adccd5;font-size:.68rem}
#membershipDialog .plan-button{display:block;width:100%;min-height:48px;border:1px solid #b4cada66;border-radius:8px;padding:12px 8px;background:#29445488;color:#f2f5fa;font:600 .75rem/1.4 system-ui;cursor:pointer;white-space:normal;transition:background .18s,border-color .18s}
#membershipDialog .plan-card.featured .plan-button{border:1px solid #c6b8d477;background:linear-gradient(105deg,#39586c,#685371);color:white}
#membershipDialog .plan-button:hover:not(:disabled){background:#39566d;border-color:#d1e4ed}
#membershipDialog .plan-button:disabled{opacity:.55;cursor:not-allowed}
#membershipDialog .plan-selected{outline:2px solid #c4eaf0;outline-offset:2px;box-shadow:none}
#membershipDialog .plan-button[aria-pressed=true]:before{content:"✓ ";color:inherit}
#membershipDialog .billing-note{margin:24px auto 0;max-width:760px;color:#bdc9d8;font:.74rem/1.8 system-ui;text-align:center}
#membershipDialog #manageBilling{display:block;min-height:44px;width:auto;max-width:100%;margin:12px auto 0;padding:11px 18px;border:1px solid #a6bed344;border-radius:8px;background:#142233;color:#d7e7ee;font:.74rem/1.5 system-ui}
#membershipDialog [hidden]{display:none!important}
#membershipDialog .plan-selection{margin-top:24px;padding:22px;border:1px solid #aed6e766;border-radius:12px;background:#1b2d3f}
#membershipDialog .plan-selection h3{font:400 1.5rem/1.25 Georgia,serif}
#membershipDialog .plan-selection p{font:.8rem/1.7 system-ui;color:#c5d2e2}
#membershipDialog :focus-visible{outline:2px solid #c5ecf4;outline-offset:3px}
@media(min-width:1001px){#membershipDialog .plan-card.featured .popular{position:absolute;bottom:79px;left:21px;right:21px;text-align:center;margin:0}#membershipDialog .plan-card ul{margin-bottom:53px}}
@media(max-width:1000px){#membershipDialog{width:min(800px,calc(100vw - 28px))}#membershipDialog .plan-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}#membershipDialog .plan-card .popular{order:initial;margin:0 0 14px}#membershipDialog .plan-card.featured .popular{position:absolute;right:18px;top:18px;font-size:.44rem;padding:4px}#membershipDialog .plan-card.featured .plan-label{padding-top:20px}#membershipDialog .plan-card h3{min-height:0}#membershipDialog .price{font-size:2.3rem}#membershipDialog .plan-card{padding:24px}}
@media(max-width:560px){#membershipDialog{width:calc(100vw - 20px);max-height:94dvh;border-radius:16px}#membershipDialog .membership-dialog{padding:22px 16px}#membershipDialog .dialog-heading{padding-right:40px}#membershipDialog .dialog-heading h2{font-size:2.2rem}#membershipDialog .dialog-heading .eyebrow{font-size:.55rem}#membershipDialog .dialog-heading p:last-child{font-size:.81rem}#membershipDialog .plan-grid{grid-template-columns:1fr;gap:16px}#membershipDialog .plan-card{padding:24px}#membershipDialog .plan-card h3{font-size:1.65rem;margin-bottom:14px}#membershipDialog .plan-card li{font-size:.82rem}#membershipDialog .price{font-size:2.5rem}#membershipDialog .plan-button{font-size:.82rem}#membershipDialog .plan-card.featured .plan-label{padding-top:0}#membershipDialog .plan-card.featured .popular{top:24px;max-width:65%}#membershipDialog .billing-frequency{font-size:.68rem}#membershipDialog .billing-note{text-align:left}}
@media(prefers-reduced-motion:reduce){#membershipDialog .plan-button{transition:none}#membershipDialog::backdrop{backdrop-filter:none}}

/* Keep the Pro annotation beside its tier label, clear of prices and controls. */
#membershipDialog .plan-card.featured .popular{position:absolute;top:27px;right:16px;bottom:auto;left:auto;max-width:67%;margin:0;padding:4px 5px;font-size:.44rem;line-height:1.5;text-align:center}
#membershipDialog .plan-card ul{margin-bottom:24px}
#membershipDialog .plan-card.featured .plan-label{padding-top:0}
#membershipDialog .plan-card li{font-size:.82rem}
