/**
 * Developed by Mohammad Rameez Imdad (Rameez Scripts)
 * WhatsApp: https://whatsapp.rameezscripts.com/ (For Custom Projects)
 * YouTube: https://www.youtube.com/@rameezimdad (Subscribe for more!)
 * TikTok: https://www.tiktok.com/@aiwithrameez (Follow for more!)
 *
 * Membership plans — user_plans.php (body.page-plans, signed-in + public view).
 * Loaded after styles.css; every rule is body-class scoped so the legacy .plan-card / .action-btn
 * gradients in styles.css never reach these cards.
 */

body.page-plans { --pl-line: #e5e9f0; --pl-wash: color-mix(in srgb, var(--c-accent, #0074D9) 5%, #fff); --pl-muted: #64748b; }
body.page-plans .content-wrapper { width: 100%; min-width: 0; }
body.page-plans .pl-bal { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1px solid var(--pl-line); background: var(--pl-wash); color: var(--pl-muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
body.page-plans .pl-bal i { color: var(--c-accent, #0074D9); }
body.page-plans .pl-bal b { font-size: 16px; color: var(--c-primary, #001f3f); }
body.page-plans .pl-alert { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 16px; background: #fffbeb; border: 1px solid #fde68a; color: #92400e; font-size: 14px; line-height: 1.45; }
body.page-plans .pl-alert > span { flex: 1 1 240px; }
body.page-plans .pl-timer { padding: 4px 10px; background: #fff; border: 1px solid #fde68a; font-variant-numeric: tabular-nums; }

/* public (signed-out) view */
body.page-plans.pl-public { background: #f4f7fb; }
body.page-plans .public-header { position: fixed; inset: 0 0 auto 0; z-index: 1000; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 24px; background: var(--c-primary, #001f3f); color: #fff; }
body.page-plans .public-header-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.page-plans .public-header-brand img { flex-shrink: 0; border-radius: 50% !important; }
body.page-plans .public-header-brand h2 { margin: 0; font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.page-plans .public-header-actions { display: flex; align-items: center; gap: 10px; }
body.page-plans .public-header-actions a { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font-weight: 600; text-decoration: none; }
body.page-plans .public-header-actions .whatsapp-header-btn { background: #25d366; color: #fff; }
body.page-plans.pl-public .content-wrapper { max-width: 1400px; margin: 0 auto; padding: 84px 24px 30px; }

/* points purchase receipt */
body.page-plans .pl-rcpt { position: fixed; inset: 0; z-index: 10000; padding: 20px 16px; background: rgba(2, 12, 27, .6); overflow-y: auto; animation: plFade .2s ease; }
body.page-plans .pl-rcpt-card { display: flex; width: 100%; max-width: 700px; margin: 6vh auto; background: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.3); }
body.page-plans .pl-rcpt-slip { flex: 1 1 0; min-width: 0; padding: 22px 20px; background: #f8fafc; border-right: 1px dashed #d5dce6; }
body.page-plans .pl-rcpt-title { display: flex; flex-direction: column; align-items: center; gap: 2px; padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid #1e293b; color: #1e293b; }
body.page-plans .pl-rcpt-title i { font-size: 30px; margin-bottom: 4px; }
body.page-plans .pl-rcpt-title b { font-size: 17px; letter-spacing: .5px; }
body.page-plans .pl-rcpt-title small { font-family: ui-monospace, monospace; font-size: 12px; color: var(--pl-muted); }
body.page-plans .pl-rcpt-slip dl { margin: 0; }
body.page-plans .pl-rcpt-slip dt { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: #94a3b8; }
body.page-plans .pl-rcpt-slip dd { margin: 0 0 10px; padding: 8px 10px; background: #fff; border: 1px solid var(--pl-line); font-size: 14px; font-weight: 600; color: #1e293b; overflow-wrap: anywhere; }
body.page-plans .pl-rcpt-sum { border-top: 1px solid #1e293b; padding-top: 10px; }
body.page-plans .pl-rcpt-sum div { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; color: #475569; }
body.page-plans .pl-rcpt-sum .neg { color: #dc2626; }
body.page-plans .pl-rcpt-sum .pos { color: #15803d; }
body.page-plans .pl-rcpt-txn { margin: 12px 0 0; font-family: ui-monospace, monospace; font-size: 11px; color: #94a3b8; text-align: center; overflow-wrap: anywhere; }
body.page-plans .pl-rcpt-side { flex: 1 1 0; min-width: 0; position: relative; display: flex; flex-direction: column; gap: 14px; padding: 22px 20px; }
body.page-plans .pl-rcpt-x { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; background: #f1f3f5; color: #475569; font-size: 22px; cursor: pointer; }
body.page-plans .pl-rcpt-ok { text-align: center; padding-top: 10px; }
body.page-plans .pl-rcpt-ok i { font-size: 38px; color: #16a34a; }
body.page-plans .pl-rcpt-ok h2 { margin: 6px 0 2px; font-size: 20px; color: var(--c-primary, #001f3f); }
body.page-plans .pl-rcpt-ok p { margin: 0; font-size: 14px; color: var(--pl-muted); }
body.page-plans .pl-rcpt-terms { padding: 12px; background: var(--pl-wash); border: 1px solid var(--pl-line); }
body.page-plans .pl-rcpt-terms h4 { margin: 0 0 6px; font-size: 13px; color: #1e293b; }
body.page-plans .pl-rcpt-terms h4 i { color: #d97706; }
body.page-plans .pl-rcpt-terms ul { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.5; color: #475569; }
body.page-plans #receiptContinueBtn { width: 100%; margin-top: auto; min-height: 44px; }
@keyframes plFade { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) { body.page-plans .pl-rcpt { animation: none; } }
@media (max-width: 768px) {
    body.page-plans .up-head-actions .pl-bal { flex: 1 1 auto; justify-content: center; min-height: 44px; }
    body.page-plans .public-header { padding: 8px 12px; }
    body.page-plans .public-header-brand h2 { font-size: 16px; }
    body.page-plans .public-header-actions { gap: 6px; flex-shrink: 0; }
    body.page-plans .public-header-actions .support-pair { display: flex; gap: 6px; }
    body.page-plans .public-header-actions .support-pair a { justify-content: center; width: 44px; padding: 0; font-size: 0; }
    body.page-plans .public-header-actions .support-pair a i { font-size: 18px; }
    body.page-plans .public-header-actions .sup-num { display: none; }
    body.page-plans.pl-public .content-wrapper { padding: 72px 12px 24px; }
    body.page-plans .pl-rcpt { padding: 0; }
    body.page-plans .pl-rcpt-card { flex-direction: column; margin: 0; min-height: 100vh; min-height: 100dvh; box-shadow: none; }
    body.page-plans .pl-rcpt-slip { flex: none; border-right: 0; border-bottom: 1px dashed #d5dce6; }
    body.page-plans .pl-rcpt-side { flex: none; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); }
}
/* ===== plan cards — the landing.php plan card (card-in-card: tinted panel with name pill, big price,
   channel line, pay buttons, then the tick list) in portal tokens: palette colours, 20px card, 14px panel,
   pill buttons. status / my-plan tiles follow the user dashboard tiles ===== */
body.page-plans {
    --pp-a: var(--c-accent, #0074D9);
    --pp-p: var(--c-primary, #001f3f);
    --pp-card: var(--c-card, #fff);
    --pp-wash: color-mix(in srgb, var(--pp-a) 5%, var(--pp-card));
    --pp-panel: color-mix(in srgb, var(--pp-p) 3.5%, var(--pp-card));
    --pp-hline: color-mix(in srgb, var(--pp-a) 16%, var(--gray-200, #e2e8f0));
    --pp-line: color-mix(in srgb, var(--pp-p) 10%, var(--pp-card));
    --pp-line-2: color-mix(in srgb, var(--pp-p) 18%, var(--pp-card));
    --pp-ink: var(--c-text, #1a1a1a);
    --pp-muted: var(--c-text-muted, #6b7280);
    --pp-ok: color-mix(in srgb, var(--success, #34a853) 62%, #000);
    --pp-ok-bg: color-mix(in srgb, var(--success, #34a853) 12%, var(--pp-card));
    --pp-ok-line: color-mix(in srgb, var(--success, #34a853) 45%, var(--pp-card));
    --pp-warn: color-mix(in srgb, var(--warning, #fbbc04) 55%, #000);
    --pp-warn-line: color-mix(in srgb, var(--warning, #fbbc04) 60%, var(--pp-card));
    --pp-shadow: 0 1px 2px rgba(var(--c-primary-rgb, 0,31,63), .04), 0 18px 40px -24px rgba(var(--c-primary-rgb, 0,31,63), .22);
}
body.page-plans .up-head h1 { font-family: 'Space Grotesk', 'Inter', sans-serif; }
body.page-plans .pp-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* my plan — the dashboard tile look */
body.page-plans .pp-status { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0 0 18px; }
body.page-plans .pp-status > div { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 16px 18px; background: var(--pp-wash); border: 1px solid var(--pp-hline); border-radius: var(--up-r, 20px); }
body.page-plans .pp-status span { display: flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--pp-muted); }
body.page-plans .pp-status span i { width: 15px; text-align: center; color: var(--pp-a); }
body.page-plans .pp-status b { font-size: 19px; font-weight: 800; line-height: 1.25; color: var(--pp-p); overflow-wrap: anywhere; }
body.page-plans .pp-status.is-on > div:first-child b { color: var(--pp-ok); }
body.page-plans .pp-status.is-off > div:first-child b { color: var(--pp-warn); }

/* cards */
body.page-plans .pp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 18px; margin: 0 0 18px; align-items: stretch; }
body.page-plans .pp-card.plan-card { display: flex; flex-direction: column; position: relative; min-width: 0; margin: 0; padding: 10px; text-align: left; background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: var(--up-r, 20px); box-shadow: var(--pp-shadow); overflow: visible; transform: none; transition: border-color .2s, box-shadow .2s; }
body.page-plans .pp-card.plan-card::before,
body.page-plans .pp-card.plan-card::after { display: none; }
body.page-plans .pp-card.plan-card:hover { transform: none; translate: none; background: var(--pp-card); border-color: var(--pp-line-2); box-shadow: var(--pp-shadow); }
body.page-plans .pp-card.plan-card.featured { border-color: color-mix(in srgb, var(--pp-a) 55%, var(--pp-card)); box-shadow: 0 0 0 1px color-mix(in srgb, var(--pp-a) 20%, transparent), 0 30px 60px -34px rgba(var(--c-accent-rgb, 0,116,217), .55); }
body.page-plans .pp-card.plan-card.current,
body.page-plans .pp-card.plan-card.current:hover { border-color: var(--pp-ok-line); box-shadow: 0 0 0 1px var(--pp-ok-line), var(--pp-shadow); }
/* inner panel — hero, channel line, pay buttons, promo */
body.page-plans .pp-top { display: flex; flex-direction: column; padding: 8px 8px 14px; background: var(--pp-panel); border: 1px solid var(--pp-line); border-radius: var(--up-r-box, 14px); }
body.page-plans .pp-hero { display: flex; flex-direction: column; justify-content: space-between; gap: 22px; min-height: 140px; padding: 18px; border-radius: 10px; background: var(--pp-panel); }
body.page-plans .pp-card.featured .pp-hero { background: color-mix(in srgb, var(--pp-a) 13%, var(--pp-card)); }
body.page-plans .pp-card.current .pp-hero { background: var(--pp-ok-bg); }
body.page-plans .pp-tags { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
body.page-plans .pp-name { margin: 0; padding: 5px 12px; min-width: 0; background: var(--pp-card); border: 1px solid var(--pp-line); border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--pp-ink); overflow-wrap: anywhere; }
body.page-plans .pp-tag { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 0; border-radius: 999px; background: var(--pp-a); color: var(--c-on-accent, #fff); font-size: 11.5px; font-weight: 700; }
body.page-plans .pp-tag.is-current { background: var(--pp-ok); color: #fff; }
body.page-plans .pp-price { display: flex; flex-direction: column; gap: 8px; }
body.page-plans .pp-amt { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 6px; }
body.page-plans .pp-amt b { font-family: 'Space Grotesk', 'Inter', sans-serif; font-size: 40px; font-weight: 700; line-height: 1; letter-spacing: -.035em; color: var(--pp-p); overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
body.page-plans .pp-amt small { font-size: 15px; font-weight: 500; color: var(--pp-muted); }
body.page-plans .pp-pts { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: var(--pp-muted); }
body.page-plans .pp-pts i { color: var(--pp-warn); }
body.page-plans .pp-sub { margin: 14px 10px; font-size: 14px; line-height: 1.45; color: var(--pp-muted); }
/* tick list */
body.page-plans .pp-feats { flex: 1 1 auto; display: flex; flex-direction: column; gap: 11px; margin: 0; padding: 20px 14px 10px; list-style: none; }
body.page-plans .pp-feats li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; line-height: 1.45; color: var(--pp-ink); overflow-wrap: anywhere; }
body.page-plans .pp-feats li i { flex-shrink: 0; width: 18px; margin-top: 3px; text-align: center; font-size: 12px; color: var(--pp-a); }
body.page-plans .pp-feats li.is-no, body.page-plans .pp-feats li.is-no i { color: var(--pp-muted); } /* this plan doesn't have it */
body.page-plans .pp-feats li.is-course { font-weight: 600; } /* the course row a plan carries */

/* promo — a quiet link under the buttons until asked for */
body.page-plans .pp-promo { margin: 6px 2px 0; padding: 0; border: 0; text-align: center; }
body.page-plans .pp-promo summary { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 40px; padding: 0 6px; font-size: 13px; font-weight: 600; color: var(--pp-muted); cursor: pointer; list-style: none; touch-action: manipulation; }
body.page-plans .pp-promo summary::-webkit-details-marker { display: none; }
body.page-plans .pp-promo summary::after { content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: 10px; transition: transform .2s; }
body.page-plans .pp-promo summary:hover, body.page-plans .pp-promo[open] summary { color: var(--pp-p); }
body.page-plans .pp-promo[open] summary::after { transform: rotate(180deg); }
body.page-plans .pp-promo .promo-box { margin: 4px 0 2px; }
body.page-plans .pp-promo .promo-input-row { display: flex; gap: 8px; }
body.page-plans .pp-promo .promo-code-field { flex: 1 1 auto; min-width: 0; min-height: 44px; padding: 0 14px; border: 1px solid var(--pp-line-2); background: var(--pp-card); color: var(--pp-ink); font-size: 16px; }
body.page-plans .pp-promo .promo-code-field:focus { outline: 0; border-color: var(--pp-a); box-shadow: 0 0 0 3px color-mix(in srgb, var(--pp-a) 18%, transparent); }
body.page-plans .pp-promo .promo-apply-btn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 16px; border: 0; background: var(--pp-a); color: var(--c-on-accent, #fff); font-size: 14px; font-weight: 700; cursor: pointer; }
body.page-plans .pp-promo .promo-msg { margin-top: 6px; text-align: left; }

/* pay buttons — renderPlanPayGrid prints them, so they are styled by class. one accent primary,
   black google pay, outline rails 2-up — the landing card's button set */
body.page-plans .pp-card .plan-action { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0 2px; border: 0; }
body.page-plans .pp-card .action-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 48px; margin: 0; padding: 0 16px; border: 1px solid var(--pp-line-2); border-radius: 999px; background: var(--pp-card); color: var(--pp-ink); font-family: inherit; font-size: 14.5px; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; touch-action: manipulation; box-shadow: none; transform: none; transition: filter .2s, background .2s, border-color .2s; }
body.page-plans .pp-card .action-btn:hover { transform: none; box-shadow: none; }
body.page-plans .pp-card .action-btn::before { display: none; }
body.page-plans .pp-card .action-btn:focus-visible { outline: 2px solid var(--pp-a); outline-offset: 2px; }
body.page-plans .pp-card .action-btn .pay-btn-label { display: inline-flex; align-items: center; gap: 8px; }
body.page-plans .pp-card :is(.upgrade-btn, .card-pay-btn),
body.page-plans .pp-card .plan-pay-grid .card-pay-btn { background: var(--pp-a); border-color: var(--pp-a); color: var(--c-on-accent, #fff); }
body.page-plans .pp-card :is(.upgrade-btn, .card-pay-btn):hover,
body.page-plans .pp-card .plan-pay-grid .card-pay-btn:hover { filter: brightness(1.08); background: var(--pp-a); color: var(--c-on-accent, #fff); }
body.page-plans .pp-card .points-buy-btn { background: var(--pp-p); border-color: var(--pp-p); color: var(--c-on-primary, #fff); }
body.page-plans .pp-card .points-buy-btn:hover { filter: brightness(1.18); color: var(--c-on-primary, #fff); }
body.page-plans .pp-card .points-buy-btn i { color: color-mix(in srgb, var(--warning, #fbbc04) 70%, #fff); }
/* points already cover the plan — the card button steps back to an outline, one primary per card */
body.page-plans .pp-card .plan-action:has(.points-buy-btn) .upgrade-btn { background: var(--pp-card); border-color: var(--pp-line-2); color: var(--pp-ink); }
body.page-plans .pp-card .plan-action:has(.points-buy-btn) .upgrade-btn:hover { filter: none; background: color-mix(in srgb, var(--pp-a) 6%, var(--pp-card)); border-color: color-mix(in srgb, var(--pp-a) 55%, var(--pp-card)); color: var(--pp-ink); }
body.page-plans .pp-card .points-insufficient-btn { background: var(--pp-card); border-color: var(--pp-warn-line); color: var(--pp-warn); }
body.page-plans .pp-card .points-insufficient-btn:hover { background: color-mix(in srgb, var(--warning, #fbbc04) 10%, var(--pp-card)); }
body.page-plans .pp-card .free-btn { background: #25D366; border-color: #25D366; color: #06301F; }
body.page-plans .pp-card .free-btn:hover { filter: brightness(1.05); color: #06301F; }
body.page-plans .pp-card .current-plan-btn { background: var(--pp-ok-bg); border-color: var(--pp-ok-line); color: var(--pp-ok); cursor: default; }
body.page-plans .pp-card .plan-locked-btn { background: var(--pp-card); border-color: var(--pp-line); color: var(--pp-muted); font-size: 13.5px; cursor: default; }
body.page-plans .pp-card .plan-locked-info { margin: -2px 0 0; font-size: 12.5px; text-align: center; color: var(--pp-muted); }
body.page-plans .pp-card .plan-gpay-btn { display: flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 18px; border: 1px solid #000; border-radius: 999px; background: #000; color: #fff; text-decoration: none; touch-action: manipulation; transition: background .2s; }
body.page-plans .pp-card .plan-gpay-btn:hover { background: #1f1f1f; color: #fff; }
body.page-plans .pp-card .plan-gpay-btn:focus-visible { outline: 2px solid #4285F4; outline-offset: 2px; }
body.page-plans .pp-card .plan-gpay-btn .gpay-mark { font-size: 15px; font-weight: 500; }
body.page-plans .pp-card .plan-pay-heading { display: flex; align-items: center; gap: 10px; margin: 6px 0 0; font-size: 12px; font-weight: 600; color: var(--pp-muted); }
body.page-plans .pp-card .plan-pay-heading i { display: none; }
body.page-plans .pp-card .plan-pay-heading::before,
body.page-plans .pp-card .plan-pay-heading::after { content: ''; flex: 1; height: 1px; background: var(--pp-line); }
body.page-plans .pp-card .plan-pay-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
body.page-plans .pp-card .plan-pay-grid .action-btn { min-height: 42px; gap: 7px; padding: 0 10px; background: transparent; font-size: 13px; }
body.page-plans .pp-card .plan-pay-grid .plan-pay-btn:hover { background: color-mix(in srgb, var(--pp-a) 6%, var(--pp-card)); border-color: color-mix(in srgb, var(--pp-a) 55%, var(--pp-card)); }
body.page-plans .pp-card .plan-pay-grid .card-pay-btn { grid-column: 1 / -1; min-height: 48px; font-size: 14.5px; }
body.page-plans .pp-card .plan-pay-grid :is(.ppm-logo img, .dp-method-logo) { width: 22px; height: 22px; object-fit: contain; }
body.page-plans .pp-card .plan-pay-grid .ppm-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* rights line under the cards — the landing's note */
body.page-plans .pp-rights { display: flex; align-items: center; justify-content: center; gap: 10px; max-width: 760px; margin: 4px auto 22px; font-size: 14px; line-height: 1.6; text-align: center; color: var(--pp-muted); }
body.page-plans .pp-rights i { flex: none; color: var(--pp-a); }
body.page-plans .pp-rights strong { color: var(--pp-ink); }

/* trust line */
body.page-plans .pp-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; margin: 4px 0 8px; padding: 12px 16px; background: var(--pp-card); border: 1px solid var(--pp-hline); border-radius: var(--up-r-box, 14px); font-size: 13px; font-weight: 600; color: var(--pp-muted); }
body.page-plans .pp-trust span { display: inline-flex; align-items: center; gap: 6px; }
body.page-plans .pp-trust i { color: var(--pp-ok); }
body.page-plans .pp-trust .fa-cc-visa { color: #1a1f71; }
body.page-plans .pp-trust .fa-cc-mastercard { color: #eb001b; }

@media (prefers-reduced-motion: reduce) { body.page-plans .pp-promo summary::after { transition: none; } }
@media (max-width: 600px) {
    body.page-plans .pp-status { grid-template-columns: 1fr; gap: 8px; }
    body.page-plans .pp-status > div { flex-direction: row; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; }
    body.page-plans .pp-status b { font-size: 15px; text-align: right; }
    body.page-plans .pp-grid { gap: 14px; }
    body.page-plans .pp-hero { min-height: 0; gap: 18px; padding: 16px; }
    body.page-plans .pp-amt b { font-size: 36px; }
    body.page-plans .pp-sub { margin: 12px 8px; }
    body.page-plans .pp-feats { padding: 16px 10px 8px; font-size: 14px; }
    body.page-plans .pp-rights { align-items: flex-start; text-align: left; }
    body.page-plans .pp-rights i { margin-top: 5px; }
    body.page-plans .pp-trust { justify-content: flex-start; }
}
@media (max-width: 380px) { body.page-plans .pp-card .plan-pay-grid { grid-template-columns: 1fr; } }