/* ============================================================
       Pricing variables
    ============================================================ */

    .wg-pricing-page {
        --wg-border: rgba(148, 163, 184, 0.16);
        --wg-border-strong: rgba(96, 165, 250, 0.32);
        --wg-muted: #94a3b8;
        --wg-blue: #60a5fa;
        --wg-blue-strong: #3b82f6;
        --wg-green: #34d399;
    }

    .wg-pricing-page * {
        box-sizing: border-box;
    }

    /* ============================================================
       Hero
    ============================================================ */

    .wg-pricing-hero {
        padding-top: 4.5rem;
        padding-bottom: 2.5rem;
    }

    .wg-pricing-hero-inner {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 2rem;
        align-items: start;
    }

    .wg-pricing-hero-copy {
        max-width: 780px;
    }

    .wg-pricing-hero-copy h1 {
        margin: .45rem 0 .8rem;
        font-size: clamp(2.2rem, 5vw, 4rem);
        line-height: 1.04;
        letter-spacing: -0.045em;
    }

    .wg-pricing-hero-copy > p {
        max-width: 680px;
        margin: 0;
        font-size: 1.08rem;
        line-height: 1.7;
        color: var(--wg-muted);
    }

    .wg-pricing-currency {
        min-width: 160px;
        padding: 1rem;
        border: 1px solid var(--wg-border);
        border-radius: 16px;
        background: rgba(15, 23, 42, .32);
        backdrop-filter: blur(14px);
    }

    .wg-pricing-currency label {
        display: block;
        margin-bottom: .5rem;
        color: var(--wg-muted);
        font-size: .78rem;
        font-weight: 700;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .wg-pricing-currency select {
        width: 100%;
    }

    /* ============================================================
       Cloud / PC selector
    ============================================================ */

    .wg-product-choice-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        margin-top: 2rem;
    }

    .wg-product-choice {
        position: relative;
        display: flex;
        flex-direction: column;
        min-height: 360px;
        padding: 2rem;
        overflow: hidden;
        border: 1px solid var(--wg-border);
        border-radius: 24px;
        background:
            radial-gradient(
                circle at top right,
                rgba(59, 130, 246, .13),
                transparent 38%
            ),
            rgba(15, 23, 42, .36);
    }

    .wg-product-choice::after {
        content: "";
        position: absolute;
        width: 220px;
        height: 220px;
        right: -90px;
        bottom: -120px;
        border-radius: 999px;
        background: rgba(96, 165, 250, .07);
        pointer-events: none;
    }

    .wg-product-choice--pc {
        background:
            radial-gradient(
                circle at top right,
                rgba(52, 211, 153, .11),
                transparent 38%
            ),
            rgba(15, 23, 42, .36);
    }

    .wg-product-choice--pc::after {
        background: rgba(52, 211, 153, .06);
    }

    .wg-choice-top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 1rem;
        margin-bottom: 1.4rem;
    }

    .wg-choice-icon {
        width: 58px;
        height: 58px;
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        border: 1px solid rgba(96, 165, 250, .22);
        border-radius: 18px;
        background: rgba(59, 130, 246, .11);
        font-size: 1.75rem;
    }

    .wg-product-choice--pc .wg-choice-icon {
        border-color: rgba(52, 211, 153, .2);
        background: rgba(52, 211, 153, .09);
    }

    .wg-choice-kicker {
        padding: .38rem .7rem;
        border: 1px solid var(--wg-border);
        border-radius: 999px;
        color: var(--wg-muted);
        font-size: .76rem;
        font-weight: 700;
    }

    .wg-product-choice h2 {
        margin: 0 0 .55rem;
        font-size: 1.55rem;
    }

    .wg-product-choice > p {
        margin: 0;
        color: var(--wg-muted);
        line-height: 1.65;
    }

    .wg-best-for {
        margin-top: 1.5rem;
        padding: 1rem 1.05rem;
        border: 1px solid var(--wg-border);
        border-radius: 14px;
        background: rgba(15, 23, 42, .28);
    }

    .wg-best-for span {
        display: block;
        margin-bottom: .28rem;
        color: var(--wg-blue);
        font-size: .75rem;
        font-weight: 800;
        letter-spacing: .08em;
        text-transform: uppercase;
    }

    .wg-product-choice--pc .wg-best-for span {
        color: var(--wg-green);
    }

    .wg-best-for strong {
        line-height: 1.45;
    }

    .wg-choice-tags {
        display: flex;
        flex-wrap: wrap;
        gap: .5rem;
        margin-top: 1.25rem;
    }

    .wg-choice-tags span {
        padding: .4rem .7rem;
        border: 1px solid var(--wg-border);
        border-radius: 999px;
        color: var(--wg-muted);
        font-size: .78rem;
    }

    .wg-choice-actions {
        display: flex;
        flex-wrap: wrap;
        gap: .75rem;
        margin-top: auto;
        padding-top: 1.6rem;
    }

    /* ============================================================
       Quick comparison
    ============================================================ */

    .wg-quick-compare {
        margin-top: 1.5rem;
        padding: 1.35rem;
        border: 1px solid var(--wg-border);
        border-radius: 20px;
        background: rgba(15, 23, 42, .26);
    }

    .wg-quick-compare-head {
        margin-bottom: 1rem;
        text-align: center;
    }

    .wg-quick-compare-head strong {
        display: block;
        margin-bottom: .25rem;
        font-size: 1rem;
    }

    .wg-quick-compare-head span {
        color: var(--wg-muted);
        font-size: .88rem;
    }

    .wg-compare-grid {
        display: grid;
        grid-template-columns: 1.2fr 1fr 1fr;
        overflow: hidden;
        border: 1px solid var(--wg-border);
        border-radius: 14px;
    }

    .wg-compare-cell {
        padding: .8rem 1rem;
        border-right: 1px solid var(--wg-border);
        border-bottom: 1px solid var(--wg-border);
        font-size: .88rem;
    }

    .wg-compare-cell:nth-child(3n) {
        border-right: 0;
    }

    .wg-compare-cell:nth-last-child(-n + 3) {
        border-bottom: 0;
    }

    .wg-compare-cell--head {
        font-weight: 800;
        background: rgba(148, 163, 184, .05);
    }

    .wg-compare-cell--label {
        color: var(--wg-muted);
    }

    /* ============================================================
       Plan sections
    ============================================================ */

    .wg-plan-section {
        padding-top: 4.2rem;
        padding-bottom: 4.2rem;
        scroll-margin-top: 90px;
    }

    .wg-plan-section--cloud {
        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(59, 130, 246, .025),
                transparent
            );
    }

    .wg-plan-section--pc {
        background:
            linear-gradient(
                180deg,
                transparent,
                rgba(52, 211, 153, .025),
                transparent
            );
    }

    .wg-section-heading {
        display: flex;
        justify-content: space-between;
        align-items: end;
        gap: 1.5rem;
        margin-bottom: 1.75rem;
    }

    .wg-section-heading-copy {
        max-width: 700px;
    }

    .wg-section-heading h2 {
        margin: .35rem 0 .55rem;
        font-size: clamp(1.8rem, 4vw, 2.6rem);
        letter-spacing: -0.03em;
    }

    .wg-section-heading p {
        margin: 0;
        color: var(--wg-muted);
        line-height: 1.65;
    }

    .wg-section-link {
        white-space: nowrap;
    }

    .wg-plan-grid {
        display: grid;
        grid-template-columns: repeat(
            auto-fit,
            minmax(min(100%, 320px), 1fr)
        );
        gap: 1.25rem;
        align-items: stretch;
    }

    .wg-plan-card {
        position: relative;
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 1.6rem;
        border: 1px solid var(--wg-border);
        border-radius: 22px;
        background:
            radial-gradient(
                circle at top right,
                rgba(148, 163, 184, .055),
                transparent 42%
            ),
            rgba(15, 23, 42, .36);
    }

    /* ============================================================
       Featured plans
    ============================================================ */

    .wg-plan-card.is-featured {
        border-color: rgba(96, 165, 250, .52);
        box-shadow:
            0 0 0 1px rgba(59, 130, 246, .08),
            0 22px 65px rgba(15, 23, 42, .22),
            0 0 36px rgba(59, 130, 246, .08);
    }

    .wg-plan-card.is-featured::before {
        content: "";
        position: absolute;
        inset: -1px;
        z-index: -1;
        border-radius: 22px;
        background: linear-gradient(
            135deg,
            rgba(59, 130, 246, .17),
            transparent 38%,
            transparent 65%,
            rgba(96, 165, 250, .08)
        );
    }

    .wg-plan-card.is-featured .wg-plan-name-row h3 {
        color: #bfdbfe;
    }

    .wg-featured-badge {
        position: absolute;
        top: -12px;
        right: 18px;

        display: inline-flex;
        align-items: center;
        gap: .35rem;

        padding: .4rem .8rem;

        border-radius: 999px;

        background: var(--wg-blue-strong);
        color: #fff;

        font-size: .74rem;
        font-weight: 800;
        letter-spacing: .04em;
        text-transform: uppercase;

        box-shadow: 0 8px 25px rgba(59, 130, 246, .25);
    }

    .wg-featured-badge::before {
        content: "★";
        font-size: .68rem;
    }

    .wg-featured-reason {
        margin: .45rem 0 0;
        color: var(--wg-blue);
        font-size: .78rem;
        font-weight: 700;
        line-height: 1.4;
    }

    .wg-plan-name-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .8rem;
        margin-bottom: .6rem;
    }

    .wg-plan-card h3 {
        margin: 0;
        font-size: 1.45rem;
    }

    .wg-plan-description {
        min-height: 3.2em;
        margin: 0;
        color: var(--wg-muted);
        line-height: 1.55;
    }

    .wg-price-wrap {
        margin: 1.45rem 0 .45rem;
    }

    .wg-price {
        display: flex;
        align-items: baseline;
        flex-wrap: wrap;
        gap: .4rem;
    }

    .wg-price strong {
        font-size: clamp(2rem, 5vw, 2.75rem);
        letter-spacing: -0.045em;
    }

    .wg-price span {
        color: var(--wg-muted);
        font-size: .88rem;
    }

    .wg-price-note {
        margin-top: .45rem;
        color: var(--wg-muted);
        font-size: .76rem;
    }

    .wg-feature-list {
        display: grid;
        gap: .7rem;
        margin: 1.4rem 0 1.6rem;
        padding: 0;
        list-style: none;
    }

    .wg-feature-list li {
        position: relative;
        padding-left: 1.55rem;
        line-height: 1.45;
        font-size: .9rem;
    }

    .wg-feature-list li::before {
        content: "✓";
        position: absolute;
        left: 0;
        top: 0;
        color: var(--wg-green);
        font-weight: 900;
    }

    .wg-plan-actions {
        margin-top: auto;
    }

    /* ============================================================
       Cloud
    ============================================================ */

    .wg-form-group {
        margin-bottom: 1rem;
    }

    .wg-form-group label {
        display: block;
        margin-bottom: .45rem;
        font-size: .82rem;
        font-weight: 700;
    }

    .wg-form-group select {
        width: 100%;
    }

    .wg-cloud-selector {
        margin: 1rem 0;
        padding: 1rem;
        border: 1px solid var(--wg-border);
        border-radius: 16px;
        background: rgba(15, 23, 42, .24);
    }

    .wg-cloud-selector-head {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;
        margin-bottom: .85rem;
    }

    .wg-cloud-selector-title {
        font-size: .82rem;
        font-weight: 700;
    }

    .wg-cloud-count {
        padding: .35rem .6rem;
        border: 1px solid var(--wg-border);
        border-radius: 999px;
        color: var(--wg-blue);
        font-size: .78rem;
        font-weight: 800;
    }

    .wg-cloud-range {
        width: 100%;
        margin: .25rem 0 .85rem;
    }

    .wg-cloud-presets {
        display: grid;
        grid-template-columns: repeat(5, 1fr);
        gap: .4rem;
    }

    .wg-cloud-preset {
        padding: .48rem .35rem;
        border: 1px solid var(--wg-border);
        border-radius: 9px;
        background: transparent;
        color: inherit;
        cursor: pointer;
        font-weight: 700;
    }

    .wg-cloud-preset.active {
        border-color: rgba(96, 165, 250, .42);
        background: rgba(59, 130, 246, .12);
        color: var(--wg-blue);
    }

    .wg-total-box {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 1rem;

        margin: 1rem 0;
        padding: 1rem;

        border: 1px solid var(--wg-border-strong);
        border-radius: 16px;

        background: rgba(59, 130, 246, .06);
    }

    .wg-total-label {
        display: block;
        margin-bottom: .3rem;
        color: var(--wg-muted);
        font-size: .82rem;
        font-weight: 700;
    }

    .wg-cloud-calculation {
        color: var(--wg-muted);
        font-size: .78rem;
    }

    .wg-cloud-calculation strong {
        color: inherit;
    }

    .wg-total-value {
        text-align: right;
    }

    .wg-total-value strong {
        display: block;
        font-size: 1.5rem;
    }

    .wg-total-value small {
        display: block;
        margin-top: .15rem;
        color: var(--wg-muted);
        font-size: .72rem;
    }

    /* ============================================================
       PC billing
    ============================================================ */

    .wg-pc-price-preview {
        display: flex;
        align-items: baseline;
        justify-content: space-between;
        gap: 1rem;
        margin: 1.35rem 0 .45rem;
    }

    .wg-pc-price-preview > span {
        color: var(--wg-muted);
        font-size: .8rem;
        font-weight: 700;
    }

    .wg-pc-price-preview strong {
        font-size: 1.75rem;
        letter-spacing: -0.035em;
    }

    .wg-billing-selector {
        display: grid;
        gap: .6rem;
        margin: 1rem 0;
    }

    .wg-billing-option {
        position: relative;
        display: block;
        cursor: pointer;
    }

    .wg-billing-option input {
        position: absolute;
        opacity: 0;
        pointer-events: none;
    }

    .wg-billing-option-box {
        display: block;
        padding: .9rem 1rem;

        border: 1px solid var(--wg-border);
        border-radius: 13px;

        background: rgba(15, 23, 42, .18);

        transition:
            border-color .15s ease,
            background .15s ease,
            transform .15s ease;
    }

    .wg-billing-option:hover .wg-billing-option-box {
        border-color: rgba(96, 165, 250, .28);
        transform: translateY(-1px);
    }

    .wg-billing-option input:checked + .wg-billing-option-box {
        border-color: rgba(96, 165, 250, .48);
        background: rgba(59, 130, 246, .085);
    }

    .wg-billing-main {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: .8rem;
    }

    .wg-billing-label-row {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        gap: .45rem;
    }

    .wg-billing-label {
        display: block;
        font-size: .87rem;
        font-weight: 800;
    }

    .wg-billing-note {
        display: block;
        margin-top: .15rem;
        color: var(--wg-muted);
        font-size: .72rem;
    }

    .wg-billing-price {
        white-space: nowrap;
        font-weight: 800;
    }

    .wg-billing-badge {
        display: inline-flex;
        align-items: center;
        padding: .22rem .48rem;

        border: 1px solid rgba(52, 211, 153, .22);
        border-radius: 999px;

        background: rgba(52, 211, 153, .11);
        color: #6ee7b7;

        font-size: .64rem;
        font-weight: 800;
        line-height: 1;
    }

    .wg-billing-badge--lifetime {
        border-color: rgba(96, 165, 250, .22);
        background: rgba(96, 165, 250, .10);
        color: #93c5fd;
    }

    .wg-billing-saving {
        display: block;
        margin-top: .3rem;
        color: #6ee7b7;
        font-size: .72rem;
        font-weight: 700;
    }

    .wg-billing-break-even {
        display: block;
        margin-top: .3rem;
        color: #93c5fd;
        font-size: .72rem;
        font-weight: 700;
    }

    .wg-charge-note {
        display: block;
        margin-top: .45rem;
        color: var(--wg-muted);
        font-size: .7rem;
    }

    /* ============================================================
       Purchase reassurance
    ============================================================ */

    .wg-purchase-reassurance {
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: .75rem;
        margin-top: 1.5rem;
    }

    .wg-reassurance-item {
        padding: .9rem;

        border: 1px solid var(--wg-border);
        border-radius: 14px;

        background: rgba(15, 23, 42, .22);

        text-align: center;
    }

    .wg-reassurance-icon {
        display: block;
        margin-bottom: .3rem;
        font-size: 1rem;
    }

    .wg-reassurance-item strong {
        display: block;
        margin-bottom: .15rem;
        font-size: .78rem;
    }

    .wg-reassurance-item span:last-child {
        color: var(--wg-muted);
        font-size: .7rem;
        line-height: 1.35;
    }

    /* ============================================================
       Logged-out actions
    ============================================================ */

    .wg-auth-action {
        margin-top: auto;
    }

    .wg-auth-action-note {
        margin: .65rem 0 0;
        text-align: center;
        color: var(--wg-muted);
        font-size: .76rem;
    }

    .wg-auth-footer {
        margin-top: 2rem;
        padding: 1.25rem;

        border: 1px solid var(--wg-border);
        border-radius: 18px;

        text-align: center;

        background: rgba(15, 23, 42, .22);
    }

    .wg-auth-footer p {
        margin: 0 0 .75rem;
        color: var(--wg-muted);
    }

    .wg-auth-footer-actions {
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
        gap: .65rem;
    }

    /* ============================================================
       Help CTA
    ============================================================ */

    .wg-pricing-help {
        padding-bottom: 4.5rem;
    }

    .wg-pricing-help-card {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        gap: 1.5rem;
        align-items: center;

        padding: 1.6rem;

        border: 1px solid var(--wg-border);
        border-radius: 22px;

        background:
            radial-gradient(
                circle at right center,
                rgba(59, 130, 246, .1),
                transparent 38%
            ),
            rgba(15, 23, 42, .3);
    }

    .wg-pricing-help-card h3 {
        margin: 0 0 .35rem;
    }

    .wg-pricing-help-card p {
        margin: 0;
        color: var(--wg-muted);
    }

    .wg-help-actions {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-end;
        gap: .65rem;
    }

    /* ============================================================
       Tablet
    ============================================================ */

    @media (max-width: 900px) {
        .wg-pricing-hero-inner {
            grid-template-columns: 1fr;
        }

        .wg-pricing-currency {
            width: 100%;
        }

        .wg-product-choice-grid {
            grid-template-columns: 1fr;
        }

        .wg-section-heading {
            align-items: start;
            flex-direction: column;
        }

        .wg-pricing-help-card {
            grid-template-columns: 1fr;
        }

        .wg-help-actions {
            justify-content: flex-start;
        }

        .wg-purchase-reassurance {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }

    /* ============================================================
       Mobile
    ============================================================ */

    @media (max-width: 640px) {
        .wg-pricing-hero {
            padding-top: 2.8rem;
        }

        .wg-product-choice {
            min-height: 0;
            padding: 1.35rem;
            border-radius: 18px;
        }

        .wg-choice-actions {
            flex-direction: column;
        }

        .wg-choice-actions .btn {
            width: 100%;
        }

        /* Mobile quick comparison */

        .wg-quick-compare {
            padding: 1rem;
            border-radius: 18px;
        }

        .wg-quick-compare-head {
            margin-bottom: 1rem;
        }

        .wg-quick-compare-head strong {
            font-size: 1rem;
        }

        .wg-quick-compare-head span {
            font-size: .82rem;
        }

        .wg-compare-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0;

            overflow: hidden;

            border: 1px solid var(--wg-border);
            border-radius: 14px;
        }

        .wg-compare-cell--head {
            display: none;
        }

        .wg-compare-cell--label {
            grid-column: 1 / -1;

            padding: .7rem .8rem;

            border-right: 0;
            border-bottom: 1px solid var(--wg-border) !important;

            background: rgba(148, 163, 184, .06);

            color: var(--wg-muted);

            font-size: .75rem;
            font-weight: 800;
            letter-spacing: .02em;
        }

        .wg-compare-cell:not(.wg-compare-cell--head):not(.wg-compare-cell--label) {
            position: relative;

            padding: 1.65rem .75rem .75rem;

            border-bottom: 1px solid var(--wg-border) !important;

            font-size: .82rem;
            line-height: 1.35;
        }

        .wg-compare-cell:not(.wg-compare-cell--head):not(.wg-compare-cell--label):nth-of-type(3n + 2) {
            border-right: 1px solid var(--wg-border);
        }

        .wg-compare-cell:not(.wg-compare-cell--head):not(.wg-compare-cell--label):nth-of-type(3n + 2)::before {
            content: "☁️ Cloud";

            position: absolute;
            top: .45rem;
            left: .75rem;

            color: var(--wg-blue);

            font-size: .66rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .wg-compare-cell:not(.wg-compare-cell--head):not(.wg-compare-cell--label):nth-of-type(3n)::before {
            content: "💻 PC";

            position: absolute;
            top: .45rem;
            left: .75rem;

            color: var(--wg-green);

            font-size: .66rem;
            font-weight: 800;
            text-transform: uppercase;
            letter-spacing: .04em;
        }

        .wg-compare-cell:nth-last-child(-n + 2) {
            border-bottom: 0 !important;
        }

        /* Cards */

        .wg-plan-card {
            padding: 1.25rem;
            border-radius: 18px;
        }

        .wg-featured-badge {
            right: 12px;
        }

        .wg-cloud-presets {
            grid-template-columns: repeat(5, minmax(0, 1fr));
        }

        .wg-cloud-preset {
            min-height: 42px;
            font-size: .84rem;
        }

        .wg-total-box {
            align-items: flex-start;
            flex-direction: column;
        }

        .wg-total-value {
            text-align: left;
        }

        .wg-pc-price-preview {
            align-items: flex-start;
            flex-direction: column;
        }

        .wg-billing-main {
            align-items: flex-start;
        }

        .wg-purchase-reassurance {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
    }