.membership-page {
        --mp-primary: #0a1b2f;
        --mp-accent: #ef725f;
        --mp-muted: #64748b;
        --mp-border: #e5eaf0;
        color: var(--mp-primary);
        background: #f8fafc;
        overflow-x: hidden;
    }

    .membership-page * {
        box-sizing: border-box;
    }

    .membership-page .mp-container {
        width: min(1160px, calc(100% - 36px));
        margin: auto;
    }

    .membership-page .mp-hero {
        padding: 76px 0 65px;
        text-align: center;
        background:
            radial-gradient(circle at 15% 15%, #e6f2f5 0, transparent 32%),
            linear-gradient(135deg, #fff 0%, #f4f8fb 100%);
    }

    .membership-page .mp-eyebrow {
        display: inline-block;
        padding: 8px 14px;
        border: 1px solid #dce7ed;
        border-radius: 30px;
        color: #177d83;
        background: #fff;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1.3px;
        text-transform: uppercase;
    }

    .membership-page .mp-hero h1 {
        max-width: 780px;
        margin: 22px auto 16px;
        color: var(--mp-primary);
        font-size: clamp(34px, 5vw, 54px);
        font-weight: 800;
        line-height: 1.12;
        letter-spacing: -1.7px;
    }

    .membership-page .mp-hero h1 span {
        color: #16838a;
    }

    .membership-page .mp-hero p {
        max-width: 670px;
        margin: 0 auto;
        color: var(--mp-muted);
        font-size: 16px;
        line-height: 1.8;
    }

    .membership-page .mp-trust {
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        gap: 24px;
        margin-top: 28px;
        color: #475569;
        font-size: 13px;
        font-weight: 600;
    }

    .membership-page .mp-trust span {
        display: inline-flex;
        align-items: center;
        gap: 7px;
    }

    .membership-page .mp-check {
        color: #13867d;
        font-weight: 900;
    }

    .membership-page .mp-section {
        padding: 68px 0;
    }

    .membership-page .mp-section-heading {
        margin-bottom: 35px;
        text-align: center;
    }

    .membership-page .mp-section-heading h2 {
        margin: 0 0 12px;
        color: var(--mp-primary);
        font-size: clamp(27px, 4vw, 38px);
        font-weight: 800;
        letter-spacing: -0.8px;
    }

    .membership-page .mp-section-heading p {
        max-width: 650px;
        margin: auto;
        color: var(--mp-muted);
        line-height: 1.7;
    }

    .membership-page .mp-benefits {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 22px;
    }

    .membership-page .mp-benefit {
        padding: 28px;
        border: 1px solid var(--mp-border);
        border-radius: 18px;
        background: #fff;
        transition: transform .2s ease, box-shadow .2s ease;
    }

    .membership-page .mp-benefit:hover {
        transform: translateY(-4px);
        box-shadow: 0 15px 35px rgb(10 27 47 / 7%);
    }

    .membership-page .mp-benefit-icon {
        display: grid;
        width: 48px;
        height: 48px;
        place-items: center;
        margin-bottom: 20px;
        border-radius: 14px;
        color: #147b81;
        background: #eaf6f5;
        font-size: 22px;
    }

    .membership-page .mp-benefit h3 {
        margin: 0 0 10px;
        font-size: 17px;
        font-weight: 750;
    }

    .membership-page .mp-benefit p {
        margin: 0;
        color: var(--mp-muted);
        font-size: 14px;
        line-height: 1.8;
    }

    .membership-page .mp-plans-section {
        padding: 76px 0;
        background: #f0f5f8;
    }

    .membership-page .mp-plans {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        align-items: stretch;
        gap: 22px;
    }

    .membership-page .mp-plan {
        position: relative;
        display: flex;
        flex-direction: column;
        padding: 30px 26px;
        border: 1px solid #e0e7ee;
        border-radius: 20px;
        background: #fff;
        box-shadow: 0 5px 20px rgb(10 27 47 / 3%);
    }

    .membership-page .mp-plan.mp-featured {
        border: 2px solid #13858a;
        box-shadow: 0 18px 45px rgb(19 133 138 / 12%);
    }

    .membership-page .mp-popular {
        position: absolute;
        top: -14px;
        left: 50%;
        padding: 7px 15px;
        border-radius: 30px;
        color: #fff;
        background: #13858a;
        font-size: 11px;
        font-weight: 800;
        letter-spacing: .7px;
        white-space: nowrap;
        transform: translateX(-50%);
    }

    .membership-page .mp-plan-label {
        margin-bottom: 10px;
        color: #16838a;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 1.1px;
        text-transform: uppercase;
    }

    .membership-page .mp-plan h3 {
        margin: 0 0 10px;
        font-size: 25px;
        font-weight: 800;
    }

    .membership-page .mp-plan-desc {
        min-height: 48px;
        margin: 0 0 22px;
        color: var(--mp-muted);
        font-size: 13px;
        line-height: 1.7;
    }

    .membership-page .mp-price {
        display: flex;
        align-items: baseline;
        gap: 5px;
        margin-bottom: 6px;
    }

    .membership-page .mp-price strong {
        font-size: 38px;
        font-weight: 850;
        letter-spacing: -1.4px;
    }

    .membership-page .mp-price span {
        color: var(--mp-muted);
        font-size: 13px;
    }

    .membership-page .mp-billing {
        margin-bottom: 23px;
        color: var(--mp-muted);
        font-size: 12px;
    }

    .membership-page .mp-divider {
        height: 1px;
        margin-bottom: 23px;
        background: var(--mp-border);
    }

    .membership-page .mp-feature-title {
        margin-bottom: 15px;
        font-size: 13px;
        font-weight: 800;
    }

    .membership-page .mp-plan ul {
        display: grid;
        gap: 14px;
        margin: 0 0 28px;
        padding: 0;
        list-style: none;
    }

    .membership-page .mp-plan li {
        display: flex;
        align-items: flex-start;
        gap: 10px;
        color: #475569;
        font-size: 13px;
        line-height: 1.6;
    }

    .membership-page .mp-plan li .mp-check {
        flex-shrink: 0;
        margin-top: 1px;
    }

    .membership-page .mp-buy {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 48px;
        margin-top: auto;
        padding: 12px 18px;
        border: 1px solid var(--mp-primary);
        border-radius: 10px;
        color: #fff;
        background: var(--mp-primary);
        font-size: 14px;
        font-weight: 750;
        text-align: center;
        text-decoration: none;
        transition: .2s ease;
    }

    .membership-page .mp-buy:hover {
        border-color: #13858a;
        color: #fff;
        background: #13858a;
    }

    .membership-page .mp-featured .mp-buy {
        border-color: #13858a;
        background: #13858a;
    }

    .membership-page .mp-featured .mp-buy:hover {
        background: #0e6c71;
    }

    .membership-page .mp-note {
        margin-top: 26px;
        color: #64748b;
        font-size: 12px;
        line-height: 1.7;
        text-align: center;
    }

    .membership-page .mp-comparison-wrap {
        overflow-x: auto;
        border: 1px solid var(--mp-border);
        border-radius: 16px;
        background: #fff;
    }

    .membership-page .mp-comparison {
        width: 100%;
        border-collapse: collapse;
        text-align: center;
    }

    .membership-page .mp-comparison th,
    .membership-page .mp-comparison td {
        padding: 17px 20px;
        border-bottom: 1px solid #edf1f5;
        font-size: 13px;
    }

    .membership-page .mp-comparison th {
        color: var(--mp-primary);
        background: #f7fafc;
        font-weight: 800;
    }

    .membership-page .mp-comparison th:first-child,
    .membership-page .mp-comparison td:first-child {
        text-align: left;
    }

    .membership-page .mp-comparison td:first-child {
        color: #475569;
        font-weight: 600;
    }

    .membership-page .mp-comparison tr:last-child td {
        border-bottom: 0;
    }

    .membership-page .mp-yes {
        color: #12816f;
        font-size: 17px;
        font-weight: 900;
    }

    .membership-page .mp-no {
        color: #94a3b8;
    }

    .membership-page .mp-faq {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 18px;
    }

    .membership-page .mp-faq-item {
        padding: 23px;
        border: 1px solid var(--mp-border);
        border-radius: 15px;
        background: #fff;
    }

    .membership-page .mp-faq-item h3 {
        margin: 0 0 9px;
        font-size: 15px;
        font-weight: 800;
    }

    .membership-page .mp-faq-item p {
        margin: 0;
        color: var(--mp-muted);
        font-size: 13px;
        line-height: 1.8;
    }

    .membership-page .mp-bottom-cta {
        padding: 55px 25px;
        border-radius: 22px;
        color: #fff;
        background: #0a1b2f;
        text-align: center;
    }

    .membership-page .mp-bottom-cta h2 {
        margin: 0 0 12px;
        color: #fff;
        font-size: clamp(26px, 4vw, 36px);
        font-weight: 800;
    }

    .membership-page .mp-bottom-cta p {
        max-width: 600px;
        margin: 0 auto 24px;
        color: #c4d0dd;
        font-size: 14px;
        line-height: 1.8;
    }

    .membership-page .mp-bottom-cta a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-height: 46px;
        padding: 12px 24px;
        border-radius: 9px;
        color: #fff;
        background: #ed735f;
        font-size: 14px;
        font-weight: 750;
        text-decoration: none;
    }

    @media (max-width: 900px) {
        .membership-page .mp-benefits,
        .membership-page .mp-plans {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .membership-page .mp-plan:last-child {
            grid-column: 1 / -1;
        }
    }

    @media (max-width: 600px) {
        .membership-page .mp-container {
            width: min(100% - 28px, 1160px);
        }

        .membership-page .mp-hero {
            padding: 52px 0 45px;
        }

        .membership-page .mp-hero h1 {
            letter-spacing: -1px;
        }

        .membership-page .mp-trust {
            gap: 12px 18px;
            font-size: 12px;
        }

        .membership-page .mp-section,
        .membership-page .mp-plans-section {
            padding: 48px 0;
        }

        .membership-page .mp-benefits,
        .membership-page .mp-plans,
        .membership-page .mp-faq {
            grid-template-columns: 1fr;
        }

        .membership-page .mp-plan:last-child {
            grid-column: auto;
        }

        .membership-page .mp-benefit {
            padding: 23px;
        }

        .membership-page .mp-plan {
            padding: 27px 22px;
        }

        .membership-page .mp-comparison {
            min-width: 580px;
        }

        .membership-page .mp-bottom-cta {
            padding: 40px 20px;
        }
    }