/* ================================
   Pricing Page — Premium Design
================================ */

.packages-pro {
    padding: 120px 0;
    background: linear-gradient(180deg, #ffffff 0%, #f6f3fb 100%);
    position: relative;
}

.packages-pro::before {
    content: "";
    position: absolute;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(88,28,135,0.15) 0%, transparent 70%);
    top: -200px;
    left: -200px;
    z-index: 0;
}

/* .section-badge is defined globally in style.css */

.pkg-title {
    font-size: 42px;
    font-weight: 700;
}

.pkg-sub {
    max-width: 600px;
    margin: auto;
    color: #666;
}

/* Billing toggle */
.billing-toggle {
    width: 300px;
    max-width: 100%;
    margin: 32px auto 0;
    background: #f1f2f8;
    border-radius: 50px;
    position: relative;
    display: flex;
    padding: 6px;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
}
.toggle-option {
    flex: 1;
    text-align: center;
    padding: 10px 0;
    font-weight: 600;
    font-size: 14px;
    position: relative;
    z-index: 2;
    transition: .3s;
    color: #555;
    user-select: none;
}
/* (audit) This was `.toggle-option:last-child`, but the last child of the toggle is
   the .toggle-indicator, not the Yearly label — so in yearly mode NEITHER option was
   highlighted and the pill lost its "you are here" cue entirely. (The bug was hidden
   until now only because the malformed markup had ejected the indicator from the
   button.) Match on the option itself so the indicator's position is irrelevant. */
.billing-toggle.yearly       .toggle-option:nth-of-type(2),
.billing-toggle:not(.yearly) .toggle-option:nth-of-type(1) { color: #581c87; }
.toggle-indicator {
    position: absolute;
    top: 6px; left: 6px;
    width: calc(50% - 6px);
    height: calc(100% - 12px);
    background: white;
    border-radius: 40px;
    box-shadow: 0 8px 20px rgba(0,0,0,.08);
    transition: .35s cubic-bezier(.4,0,.2,1);
}
.billing-toggle.yearly .toggle-indicator { transform: translateX(100%); }
.save-badge {
    display: inline-block;
    font-size: 11px;
    background: linear-gradient(90deg, #581c87, #9333ea);
    color: #fff;
    border-radius: 20px;
    padding: 2px 7px;
    margin-left: 5px;
    vertical-align: middle;
    font-weight: 600;
}

/* Price animation */
.rx-price-num {
    transition: opacity .2s ease, transform .2s ease;
    display: inline-block;
}

/* Currency selector */
.rx-currency-wrap {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.rx-currency-dropdown { position: relative; }
.rx-currency-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 18px;
    background: #fff;
    border: 1px solid #e8e4f5;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0,0,0,.06);
    transition: border-color .2s, color .2s;
    white-space: nowrap;
}
.rx-currency-btn:hover { border-color: #9333ea; color: #581c87; }
.rx-currency-caret { font-size: 11px; transition: transform .25s ease; }
.rx-currency-dropdown.open .rx-currency-caret { transform: rotate(180deg); }
.rx-sym-pill {
    background: rgba(88,28,135,.09);
    color: #581c87;
    border-radius: 6px;
    padding: 1px 7px;
    font-size: 13px;
    font-weight: 700;
}
.rx-currency-panel {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 24px 64px rgba(0,0,0,.12);
    border: 1px solid #f0eeff;
    padding: 8px;
    min-width: 230px;
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s;
    z-index: 500;
}
.rx-currency-dropdown.open .rx-currency-panel {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}
.rx-currency-search-wrap { padding: 4px 4px 6px; }
.rx-currency-search {
    width: 100%;
    border: 1px solid #e8e4f5;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 12px;
    color: #374151;
    outline: none;
    background: #faf9ff;
    box-sizing: border-box;
    transition: border-color .2s;
}
.rx-currency-search:focus { border-color: #9333ea; }
.rx-currency-list { max-height: 240px; overflow-y: auto; }
/* (audit) These rows were <div role="option">; an accessibility pass correctly
   turned them into real <button>s, but nothing reset the native button chrome that
   came with them. Every currency rendered on the system ButtonFace grey with a 2px
   `outset` bevel border, centre-aligned, shrink-wrapped to its text instead of
   filling the row — a column of raw OS buttons inside an otherwise soft purple
   panel. Reset the UA styling; keep the semantics. */
.rx-currency-item {
    -webkit-appearance: none;
    appearance: none;
    background: transparent;
    border: 0;
    margin: 0;
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: 1.35;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 13px;
    color: #374151;
    font-weight: 500;
    transition: background .15s, color .15s;
}
.rx-currency-item:hover { background: rgba(111,66,193,.08); color: #6f42c1; }
.rx-currency-item.active { background: rgba(111,66,193,.12); color: #6f42c1; font-weight: 600; }
.rx-currency-item:focus { outline: none; }
.rx-currency-item:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: -2px;
    background: rgba(111,66,193,.08);
}
.rx-cur-code { font-weight: 700; min-width: 38px; }
.rx-cur-name { opacity: .7; font-size: 12px; }
.rx-currency-noresult { font-size: 12px; color: #5f6b7a; text-align: center; padding: 10px 0; margin: 0; }

/* Converted-price disclaimer under the picker. Plans are charged in USD, so the
   converted figures are an estimate and have to say so. */
.rx-currency-note {
    text-align: center;
    font-size: 12px;
    color: #6b7280;
    margin: 0 auto 34px;
    max-width: 420px;
}

/* (audit) DB-unreachable state — replaces three cards that used to quote
   $29 / $49 / $112 for plans that do not exist in the packages table. */
.rx-pkg-unavailable {
    max-width: 560px;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border: 1px dashed rgba(88,28,135,.22);
    border-radius: 22px;
    padding: 44px 32px;
    box-shadow: 0 20px 60px rgba(0,0,0,.05);
}
.rx-pkg-unavailable i { font-size: 30px; color: #9333ea; }
.rx-pkg-unavailable h5 { font-size: 20px; font-weight: 700; color: #1e1b4b; margin: 14px 0 8px; }
.rx-pkg-unavailable p  { color: #5f6b7a; font-size: 14px; margin: 0 0 22px; }
.rx-pkg-unavailable-actions {
    display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center;
}

/* Card */
.package-card-pro {
    background: #ffffff;
    padding: 50px 40px;
    border-radius: 24px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.05);
    transition: all 0.35s ease;
    position: relative;
    z-index: 1;
}

.package-card-pro:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 80px rgba(0,0,0,0.1);
}

.package-card-pro h5 {
    font-size: 20px;
    font-weight: 600;
}

.price {
    font-size: 42px;
    font-weight: 700;
    margin: 20px 0;
    color: #581c87;
}

.price span {
    font-size: 16px;
    font-weight: 400;
    color: #5f6b7a;
}

/* Features list */
.pkg-features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
}

.pkg-features li {
    display: flex;
    align-items: center;
    margin-bottom: 14px;
    font-size: 15px;
    color: #555;
    transition: 0.3s ease;
}

.pkg-features i {
    font-size: 18px;
    margin-right: 10px;
    color: #581c87;
    transition: all 0.3s ease;
    animation: pulseIcon 2.5s infinite ease-in-out;
    flex-shrink: 0;
}

@keyframes pulseIcon {
    0%   { transform: scale(1);    opacity: 1; }
    50%  { transform: scale(1.15); opacity: 0.8; }
    100% { transform: scale(1);    opacity: 1; }
}

.package-card-pro:hover .pkg-features i {
    transform: scale(1.3) rotate(5deg);
    color: #7e22ce;
}

/* Featured card */
.package-card-pro.featured {
    border: 2px solid #581c87;
    transform: scale(1.05);
}

.package-card-pro.featured:hover {
    transform: scale(1.05) translateY(-12px);
}

/* Badge */
.popular-badge {
    position: absolute;
    top: -15px;
    right: 30px;
    background: #581c87;
    color: #fff;
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 500;
}

/* .btn-premium is defined globally in style.css */

/* .pricing-hero-banner & .section-badge now live globally in style.css */

/* Responsive */
@media (max-width: 991px) {
    .pkg-title    { font-size: 28px; }
    .packages-pro { padding: 70px 0; }
}

@media (max-width: 576px) {
    .package-card-pro.featured { transform: none; }
    .package-card-pro.featured:hover { transform: translateY(-12px); }
    .package-card-pro { padding: 35px 22px; }
    .price            { font-size: 34px; }
    .pkg-title        { font-size: 22px; }
}

/* ─── Design Refinements ──────────────────────────────────────── */

/* Plan name — stronger weight, darker tone */
.package-card-pro h5 {
    font-size: 22px;
    font-weight: 700;
    color: #1e1b4b;
    letter-spacing: -0.01em;
}

/* Featured plan name — gradient text */
.package-card-pro.featured h5 {
    background: linear-gradient(90deg, #581c87, #9333ea);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ── Annual info block (strikethrough + billed total + save badge) ── */
.rx-annual-info {
    padding: 10px 0 14px;
    border-bottom: 1px solid rgba(88,28,135,0.09);
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.rx-orig-price-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.rx-orig-price {
    font-size: 13px;
    color: #5f6b7a;
    text-decoration: line-through;
    text-decoration-color: #f87171;
    font-weight: 500;
}
.rx-save-chip {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, #16a34a, #22c55e);
    border-radius: 20px;
    padding: 2px 8px;
    letter-spacing: 0.3px;
}
.rx-yearly-total {
    font-size: 12px;
    font-weight: 600;
    color: #16a34a;
}

/* Thin separator between price and feature list */
.price {
    border-bottom: 1px solid rgba(88,28,135,0.09);
    padding-bottom: 20px;
    margin-bottom: 0;
}
/* Remove double border when annual info block is visible */
.rx-annual-info ~ .pkg-features { padding-top: 20px; }
.price:has(+ .rx-annual-info[style*="block"]) { border-bottom: none; padding-bottom: 0; }

/* Feature list — tighten spacing, add hover row */
.pkg-features {
    padding-top: 20px;
    margin-bottom: 28px;
}

.pkg-features li {
    padding: 5px 8px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    margin-bottom: 4px;
}

.pkg-features li:hover {
    background: rgba(88,28,135,0.05);
    color: #1e1b4b;
}

/* Check icon — cleaner, no pulse */
.pkg-features i {
    font-size: 15px;
    color: #9333ea;
    margin-right: 9px;
    animation: none;
    transition: color 0.2s ease;
}

.package-card-pro.featured .pkg-features i { color: #581c87; }
.package-card-pro:hover .pkg-features i    { transform: none; color: #7c3aed; }

/* Enhanced popular badge — gradient + glow + gem icon */
.popular-badge {
    background: linear-gradient(135deg, #4c1d95 0%, #9333ea 100%);
    padding: 7px 16px 7px 11px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 6px 24px rgba(147,51,234,0.4);
    font-weight: 600;
    letter-spacing: 0.02em;
}

.popular-badge i {
    font-size: 12px;
    opacity: 0.95;
}

/* ═══ Plan Comparison Table — v3 ═══ */
/* ═══ Plan Comparison Table — v3 ════════════════════════════════ */

/* Anchor CTA */
.cmp-anchor-btn {
    display: inline-flex; align-items: center; gap: 8px;
    font-size: 13px; font-weight: 600; color: #7c3aed;
    text-decoration: none; padding: 10px 26px;
    border: 1.5px solid rgba(124,58,237,0.28); border-radius: 50px;
    background: rgba(124,58,237,0.05);
    transition: all 0.25s ease;
    box-shadow: 0 4px 18px rgba(124,58,237,0.12);
}
.cmp-anchor-btn:hover {
    background: rgba(124,58,237,0.1); border-color: rgba(124,58,237,0.5);
    color: #581c87; transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(124,58,237,0.22);
}
.cmp-anchor-btn i:last-child { animation: cmpBounce 2s infinite ease-in-out; }
@keyframes cmpBounce { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* ── Section ──────────────────────────────────────────────────── */
.plan-compare {
    padding: 80px 0 130px;
    background: linear-gradient(180deg, #fdf4ff 0%, #f8f5ff 40%, #fff 100%);
    position: relative; overflow: hidden;
}
.plan-compare::before {
    content: '';
    position: absolute; top: -120px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(168,85,247,0.1) 0%, transparent 65%);
    pointer-events: none;
}
.plan-compare::after {
    content: '';
    position: absolute; bottom: -80px; left: -180px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(99,102,241,0.07) 0%, transparent 65%);
    pointer-events: none;
}
.compare-intro { margin-bottom: 52px; position: relative; z-index: 1; }

/* ── Table wrapper ────────────────────────────────────────────── */
.compare-table-wrap {
    overflow-x: auto;
    border-radius: 22px;
    box-shadow:
        0 2px 4px rgba(88,28,135,0.04),
        0 12px 40px rgba(88,28,135,0.08),
        0 40px 90px rgba(88,28,135,0.1);
    -webkit-overflow-scrolling: touch;
    position: relative; z-index: 1;
    background: #fff;
}
.compare-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    min-width: 740px;
    background: #fff;
    border-radius: 22px;
    overflow: hidden;
}

/* ── Column header cells ──────────────────────────────────────── */
.compare-table thead th {
    position: sticky; top: 0; z-index: 15;
    padding: 28px 20px 22px; text-align: center;
    vertical-align: bottom; background: #fff;
    border-bottom: 1px solid #ede9f8;
}

/* Feature label column */
.col-feat-lbl {
    width: 32%; text-align: left !important;
    background: #fcfaff !important;
    border-right: 1px solid #ede9f8;
    position: sticky; left: 0; z-index: 20 !important;
    padding: 28px 26px 22px !important;
}

/* Per-plan top accent bars */
thead .col-free     { border-top: 3px solid #94a3b8; }
thead .col-basic    { border-top: 3px solid #6366f1; }
thead .col-platinum { border-top: 3px solid #0ea5e9; }

/* ── Premium header — vibrant violet→fuchsia gradient ─────────── */
thead .col-premium {
    background: linear-gradient(145deg, #7c3aed 0%, #a855f7 50%, #d946ef 100%) !important;
    border-top: none !important;
    border-bottom: none !important;
    position: relative;
    overflow: hidden;
}
/* sheen animation */
thead .col-premium::after {
    content: '';
    position: absolute; top: -60%; left: -60%;
    width: 60%; height: 220%;
    background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%);
    animation: cmpSheen 4s ease-in-out infinite;
    pointer-events: none;
}
@keyframes cmpSheen { 0%,100% { transform: translateX(-100%); } 50% { transform: translateX(320%); } }
thead .col-premium > * { position: relative; z-index: 1; }

/* ── Badge (Most Popular) ─────────────────────────────────────── */
.cmp-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em;
    background: rgba(255,255,255,0.22); backdrop-filter: blur(6px);
    color: #fff; padding: 4px 12px; border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.3);
    margin-bottom: 10px;
}

/* ── Plan names ───────────────────────────────────────────────── */
.cmp-plan-name { font-size: 16px; font-weight: 700; color: #1e1b4b; margin-bottom: 4px; }
thead .col-free     .cmp-plan-name { color: #64748b; }
thead .col-basic    .cmp-plan-name { color: #4338ca; }
thead .col-platinum .cmp-plan-name { color: #0369a1; }
thead .col-premium  .cmp-plan-name {
    color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 18px;
}

/* ── Prices ───────────────────────────────────────────────────── */
.cmp-plan-price { font-size: 30px; font-weight: 800; color: #4c1d95; margin: 10px 0 4px; line-height: 1; letter-spacing: -0.5px; }
thead .col-free     .cmp-plan-price { color: #5f6b7a; }
thead .col-basic    .cmp-plan-price { color: #4338ca; }
thead .col-platinum .cmp-plan-price { color: #0369a1; }
thead .col-premium  .cmp-plan-price { color: #fff; }
.cmp-p-sym { font-size: 16px; vertical-align: super; font-weight: 700; line-height: 1; }
.cmp-p-mo  { font-size: 12px; font-weight: 400; color: #5f6b7a; margin-left: 2px; }
thead .col-premium .cmp-p-mo { color: rgba(255,255,255,0.6); }

/* ── Yearly note ──────────────────────────────────────────────── */
.cmp-yr-note { font-size: 11px; color: #9333ea; display: block; min-height: 16px; margin-bottom: 14px; font-weight: 600; }
thead .col-basic    .cmp-yr-note { color: #6366f1; }
thead .col-platinum .cmp-yr-note { color: #0ea5e9; }
thead .col-premium  .cmp-yr-note { color: rgba(255,255,255,0.7); }

/* ── CTA buttons ──────────────────────────────────────────────── */
.btn-cmp-outline {
    display: inline-block; padding: 8px 18px; border-radius: 50px;
    font-size: 12px; font-weight: 600; text-decoration: none;
    border: 1.5px solid rgba(88,28,135,0.22); color: #6d28d9; background: transparent;
    transition: all 0.22s; white-space: nowrap;
}
thead .col-basic    .btn-cmp-outline { border-color: rgba(99,102,241,0.35); color: #4338ca; }
thead .col-platinum .btn-cmp-outline { border-color: rgba(14,165,233,0.35); color: #0369a1; }
.btn-cmp-outline:hover { background: rgba(109,40,217,0.07); border-color: #9333ea; color: #4c1d95; transform: translateY(-1px); }
.btn-cmp-fill {
    display: inline-block; padding: 9px 22px; border-radius: 50px;
    font-size: 12px; font-weight: 700; text-decoration: none;
    background: #fff; color: #7c3aed; border: none;
    box-shadow: 0 4px 18px rgba(0,0,0,0.2); transition: all 0.22s; white-space: nowrap;
    position: relative; z-index: 1;
}
.btn-cmp-fill:hover { box-shadow: 0 8px 28px rgba(0,0,0,0.25); transform: translateY(-2px); color: #6d28d9; background: #fff; }

/* ── Group header rows ────────────────────────────────────────── */
.cmp-group-row td {
    padding: 9px 26px;
    background: linear-gradient(90deg, #f5f0ff 0%, #faf7ff 100%);
    border-top: 1px solid #ede9f8;
    border-bottom: 1px solid #ede9f8;
    font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em;
    color: #7c3aed;
}
/* vibrant left accent bar via box-shadow trick */
.cmp-group-row td:first-child {
    box-shadow: inset 3px 0 0 #a855f7;
}
.cmp-group-row td i { font-size: 13px; margin-right: 8px; color: #a855f7; }

/* ── Feature rows ─────────────────────────────────────────────── */
.cmp-feat-row td {
    padding: 14px 20px; font-size: 13.5px; text-align: center;
    border-bottom: 1px solid #f3f0fb; color: #6b7280;
    vertical-align: middle; transition: background 0.15s ease;
}
/* sticky label column */
.cmp-feat-row td:first-child {
    text-align: left; font-weight: 500; color: #374151; font-size: 14px;
    background: #fff; border-right: 1px solid #f0edff;
    position: sticky; left: 0; z-index: 5;
    padding-left: 26px;
}
/* zebra
   (audit) This was :nth-child(even), which counts EVERY child of <tbody> — and the
   group separator rows sit among the feature rows. Whether a group started shaded
   depended on how many rows the groups above it happened to hold, so the banding
   broke and re-formed its way down the table. The parity is now emitted by PHP as
   .cmp-alt, counted over feature rows only. */
.cmp-feat-row.cmp-alt td             { background: #faf8ff; }
.cmp-feat-row.cmp-alt td:first-child { background: #f8f5ff; }
/* hover */
.cmp-feat-row:hover td             { background: rgba(124,58,237,0.04) !important; }
.cmp-feat-row:hover td:first-child { background: rgba(124,58,237,0.07) !important; border-right-color: #ddd6fe; }
/* premium column body tint */
.cmp-feat-row .col-premium {
    background: rgba(168,85,247,0.05) !important;
    border-left: 1px solid rgba(168,85,247,0.15) !important;
    border-right: 1px solid rgba(168,85,247,0.15) !important;
    font-weight: 600; color: #3b0764;
}
.cmp-feat-row.cmp-alt .col-premium         { background: rgba(168,85,247,0.09) !important; }
.cmp-feat-row:hover .col-premium           { background: rgba(168,85,247,0.13) !important; }

/* ── Cell value types ─────────────────────────────────────────── */
/* Yes — bright gradient circle */
.ci-yes {
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; border-radius: 50%;
    background: linear-gradient(135deg, #8b5cf6, #c084fc);
    color: #fff; font-size: 12px;
    box-shadow: 0 2px 8px rgba(139,92,246,0.4);
}
/* No — subtle dash */
.ci-no {
    display: inline-block; width: 16px; height: 2px;
    background: #e2d9f3; border-radius: 2px; vertical-align: middle;
}
/* Unlimited — icon + gradient text */
.ci-unlim {
    display: inline-flex; align-items: center; gap: 4px;
    font-size: 13px; font-weight: 800;
    background: linear-gradient(90deg, #8b5cf6, #d946ef);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.ci-unlim i { font-size: 14px; color: #a855f7; -webkit-text-fill-color: #a855f7; }
/* Value */
.ci-val { font-size: 13px; font-weight: 700; color: #374151; }
/* Tier pill */
.ci-tier {
    font-size: 11px; font-weight: 700; padding: 3px 11px; border-radius: 20px;
    background: rgba(139,92,246,0.1); color: #6d28d9; display: inline-block;
    border: 1px solid rgba(139,92,246,0.18);
}
.ci-tier-adv {
    background: linear-gradient(135deg, rgba(139,92,246,0.12), rgba(217,70,239,0.1));
    color: #6d28d9;
    border: 1px solid rgba(168,85,247,0.25);
}

/* ── Scroll-in animation ──────────────────────────────────────────
   (audit) The opacity:0 used to be unconditional, so the table's resting state was
   INVISIBLE and only JavaScript could reveal it: with scripting off, or if any
   earlier script on the page threw, all 14 groups and 63 feature rows — the whole
   substance of this page — rendered as a blank white box. The reveal is now gated
   behind .cmp-anim, which the page script adds to the table only once it is
   running and only when the visitor has not asked for reduced motion.
   The rows are also no longer translated: a transform on a <tr> makes that row a
   containing block and knocks the sticky feature-name column out of alignment
   mid-animation. A plain fade reads the same and costs nothing. */
.cmp-anim .cmp-feat-row, .cmp-anim .cmp-group-row {
    opacity: 0;
    transition: opacity 0.4s ease;
}
.cmp-anim .cmp-feat-row.cmp-vis, .cmp-anim .cmp-group-row.cmp-vis { opacity: 1; }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 991px) {
    .compare-table { min-width: 660px; }
    .cmp-plan-price { font-size: 24px; }
    .compare-table thead th { padding: 20px 12px 16px; }
    .cmp-feat-row td, .cmp-group-row td { padding: 11px 12px; }
    .cmp-feat-row td:first-child, .cmp-group-row td:first-child { padding-left: 14px; }
}
@media (max-width: 576px) {
    .compare-table { min-width: 540px; }
    .cmp-plan-name { font-size: 13px; }
    .cmp-plan-price { font-size: 20px; }
    .compare-table thead th { padding: 16px 8px 14px; }
    .cmp-feat-row td, .cmp-feat-row td:first-child { font-size: 12px; padding: 10px 8px; }
    .plan-compare { padding: 52px 0 80px; }
}

/* (audit) Contain the decorative hero glow.
   .packages-pro::before is a 600x600 radial gradient pinned at left:-200px, so its
   right edge lands at 400px — 55px past a 360px viewport, which scrolled the whole
   page sideways on mobile. An earlier pass fixed exactly this pseudo-element but
   scoped the rule to .rx-pricing-home.packages-pro, the homepage variant, so the
   three pages that use the plain .packages-pro section never got it.
   overflow-x:clip contains the glow without turning the section into a scroll
   container, so position:sticky children keep working. */
.packages-pro { overflow-x: clip; }


/* ═══════════════════════════════════════════════════════════════════
   (audit) Pricing-page fix pack
   Everything below corrects a defect found by driving this page in a
   browser at 1440px and 375px. Each block says what was wrong.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1. Plan cards: equal height, aligned tops, CTAs on one baseline ──
   The row carried Bootstrap's .align-items-center, so cards of different
   heights were centred against each other: with a 391px card beside a
   616px one their tops sat 113px apart for no reason a reader could see,
   and the two "Get Started" buttons landed at different heights. The row
   now stretches (default) and each card fills its column, with the CTA
   pushed to the bottom so the buttons line up whatever the feature count. */
.packages-pro .row > [class*="col-"].d-flex { align-items: stretch; }
.package-card-pro {
    display: flex;
    flex-direction: column;
    width: 100%;
}
.package-card-pro .pkg-cta { margin-top: auto; }

/* ── 2. "Most Popular" badge had to be readable off the gradient ──────
   .cmp-badge is white text on rgba(255,255,255,.22) with a white border —
   designed for the violet .col-premium header. The badge is placed by the
   package's is_recommended flag, so on this install it landed on the plain
   white .col-basic header and was literally invisible: white on white, a
   contrast ratio of 1:1, leaving a 26px empty gap where the claim should
   be. Solid purple is now the default; the translucent treatment applies
   only where there is a gradient behind it. */
.cmp-badge {
    background: linear-gradient(135deg, #6d28d9 0%, #a855f7 100%);
    border: 1px solid transparent;
    box-shadow: 0 4px 14px rgba(124,58,237,0.32);
    backdrop-filter: none;
}
thead .col-premium .cmp-badge {
    background: rgba(255,255,255,0.22);
    border-color: rgba(255,255,255,0.3);
    box-shadow: none;
    backdrop-filter: blur(6px);
}

/* ── 3. The sticky feature-name column did not stick ──────────────────
   .compare-table carried overflow:hidden (there only to clip the table to
   its 22px radius). overflow:hidden establishes a scroll container, so it
   — not .compare-table-wrap — became the nearest scrollport for the
   position:sticky cells, and they stuck to a box that never scrolls.
   Measured on a 375px viewport: scrolling the wrapper 150px moved the
   feature-name cell from left:12 to left:-138, i.e. the feature names
   scrolled clean off the screen and left anonymous columns of ticks.
   The wrapper already has border-radius:22px + overflow-x:auto, so it
   clips the corners perfectly well on its own. */
.compare-table { overflow: visible; }

/* Lift the sticky column off the content that now scrolls beneath it. */
.compare-table thead th.col-feat-lbl,
.cmp-feat-row td:first-child {
    box-shadow: 8px 0 14px -12px rgba(88,28,135,0.35);
}

/* Group headings span every column, so the <td> itself cannot be sticky —
   its background would ride over the plans. The label inside it can. */
.cmp-group-lbl {
    position: sticky;
    left: 26px;
    display: inline-flex;
    align-items: center;
}

/* ── 4. Tick / dash / value cells now share one vertical datum ─────────
   Every cell mark was a different height — a 26px circle for a tick, a 2px
   dash for a cross, a bare text node for a number — so each one built a
   different line box and each one sat at a different height inside its
   cell. Measured offsets from the cell's own centre ran from -0.8px to
   +0.8px, and 12 of the 63 rows had their marks out of line with each
   other. It reads as a wobble down the column and it makes the rows
   themselves vary in height for no reason.
   Give every mark the same 26px centring box and the whole grid lines up. */
.ci-yes, .ci-no, .ci-unlim, .ci-tier, .ci-val {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 26px;
    vertical-align: middle;
}
/* the "not included" dash is drawn inside its box rather than being the box */
.ci-no {
    width: 26px;
    height: 26px;
    background: none;
    border-radius: 0;
}
.ci-no::before {
    content: '';
    width: 16px;
    height: 2px;
    background: #e2d9f3;
    border-radius: 2px;
}

/* ── 5. Horizontal-scroll affordance for the comparison table ─────────
   At 375px the table is 540px wide in a 351px box with nothing to say so.
   The wrapper is also focusable now (see the PHP), so it needs a focus
   ring — but only for keyboard users, never on a mouse click. */
.cmp-swipe-hint { display: none; }
.compare-table-wrap:focus { outline: none; }
.compare-table-wrap:focus-visible {
    outline: 2px solid #7c3aed;
    outline-offset: 3px;
}

@media (max-width: 991px) {
    .cmp-swipe-hint {
        display: block;
        text-align: center;
        font-size: 12px;
        font-weight: 600;
        color: #7c3aed;
        margin: -28px 0 16px;
    }
    /* keeps step with the reduced cell padding in the 991px block above */
    .cmp-group-lbl { left: 14px; }
}
@media (max-width: 576px) {
    .cmp-group-lbl { left: 8px; }
}

/* ── 6. Respect prefers-reduced-motion ────────────────────────────────
   This page ran four infinite animations at once — the header sheen, the
   bouncing chevron on the compare CTA, the pulsing feature icons and the
   row reveal — with no reduced-motion escape hatch. */
@media (prefers-reduced-motion: reduce) {
    .cmp-anim .cmp-feat-row,
    .cmp-anim .cmp-group-row { opacity: 1; transition: none; }
    thead .col-premium::after,
    .cmp-anchor-btn i:last-child,
    .pkg-features i { animation: none; }
    .package-card-pro,
    .package-card-pro:hover,
    .rx-price-num,
    .toggle-indicator { transition: none; }
    .package-card-pro:hover { transform: none; }
    .package-card-pro.featured:hover { transform: scale(1.05); }
}