.version.subscription { color: #0000FD; background-color: #179728; }

.subscription-main {
    position: relative;
    z-index: 2;
    max-width: 1120px;
    margin: 0 auto 80px;
    padding: 0 20px 60px;
    font-family: '__Montserrat_5', Arial, Helvetica, sans-serif;
    color: #333333;
    float: none !important;
    clear: both !important;
    box-sizing: border-box;
}

.subscription-hero {
    text-align: center;
    margin-bottom: 48px;
}

.subscription-hero h1 {
    font-size: 36px;
    font-weight: 500;
    line-height: 1.25;
    margin: 0 0 16px;
    letter-spacing: -0.02em;
}

.subscription-hero .lead {
    font-size: 18px;
    line-height: 1.55;
    color: #555555;
    max-width: 720px;
    margin: 0 auto;
    font-weight: 400;
}

.subscription-plans {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-bottom: 56px;
}

.subscription-plan {
    background: #ffffff;
    border: 1px solid #e8e8e8;
    border-radius: 20px;
    padding: 28px 22px 26px;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.06);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
    position: relative;
}

.subscription-plan:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.1);
    border-color: #ffd4c4;
}

.subscription-plan--featured {
    border-color: #FF7F50;
    box-shadow: 0 16px 48px rgba(255, 127, 80, 0.18);
}

.subscription-plan--trial {
    background: linear-gradient(165deg, #fff9f6 0%, #ffffff 55%);
}

.subscription-plan__badge {
    position: absolute;
    top: -11px;
    left: 50%;
    transform: translateX(-50%);
    background: #FF7F50;
    color: #ffffff;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    white-space: nowrap;
}

.subscription-plan__badge--muted {
    background: #333333;
}

.subscription-plan__name {
    font-size: 22px;
    font-weight: 500;
    margin: 8px 0 4px;
    text-align: center;
}

.subscription-plan__period {
    font-size: 14px;
    color: #888888;
    text-align: center;
    margin: 0 0 20px;
}

.subscription-plan__price {
    text-align: center;
    margin-bottom: 8px;
}

.subscription-plan__amount {
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -0.03em;
}

.subscription-plan__amount small {
    font-size: 22px;
    font-weight: 400;
    vertical-align: super;
}

.subscription-plan__amount--free {
    font-size: 36px;
    color: #FF7F50;
}

.subscription-plan__note {
    font-size: 13px;
    color: #777777;
    text-align: center;
    margin: 0 0 20px;
    min-height: 36px;
    line-height: 1.4;
}

.subscription-plan__note:last-child {
    margin-bottom: 0;
}

.subscription-features {
    background: #f7f7f7;
    border-radius: 24px;
    padding: 40px 48px;
}

.subscription-features h2 {
    font-size: 24px;
    font-weight: 500;
    margin: 0 0 12px;
    text-align: center;
}

.subscription-features .features-intro {
    text-align: center;
    font-size: 16px;
    line-height: 1.55;
    color: #555555;
    max-width: 640px;
    margin: 0 auto 32px;
}

.subscription-features ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 32px;
}

.subscription-features li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 15px;
    line-height: 1.45;
}

.subscription-features li::before {
    content: "";
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    background: #FF7F50;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='%23fff' d='M6.2 11.2 3.4 8.4l1.4-1.4 1.4 1.4 4-4 1.4 1.4z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 14px;
}

.subscription-footer-note {
    text-align: center;
    margin-top: 32px;
    font-size: 13px;
    color: #999999;
    line-height: 1.5;
}

.subscription-footer-note a {
    color: #FF7F50;
    text-decoration: underline;
}

.subscription-footer-note a:hover {
    color: #e86a3a;
}

@media (min-width: 769px) and (max-width: 1160px) {
    #subscription-content.subscription-main,
    #pu3306-102 .subscription-main {
        max-width: calc(100vw - 40px) !important;
        float: none !important;
    }
}

@media (min-width: 769px) and (max-width: 1100px) {
    .subscription-plans {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    #pu3306-102,
    #pu3306-102 .site-page-fill {
        display: block !important;
    }

    .subscription-main,
    #subscription-content.subscription-main {
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 0 !important;
        margin-bottom: 24px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding: 0 16px 24px;
        float: none !important;
        box-sizing: border-box;
    }

    .subscription-hero h1 {
        font-size: 25px;
        line-height: 1.3;
    }

    .subscription-hero .lead {
        font-size: 15px;
        line-height: 1.5;
    }

    .subscription-plans {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 20px;
        max-width: 100%;
        margin-left: auto;
        margin-right: auto;
    }

    .subscription-plan {
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
        padding: 24px 18px 22px;
        box-sizing: border-box;
    }

    .subscription-features {
        padding: 24px 16px;
        border-radius: 16px;
    }

    .subscription-features h2 {
        font-size: 22px;
        line-height: 1.3;
    }

    .subscription-features ul {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .subscription-features li {
        display: block;
        position: relative;
        padding-left: 30px;
        font-size: 15px;
        line-height: 1.5;
        word-break: normal;
        overflow-wrap: break-word;
    }

    .subscription-features li::before {
        position: absolute;
        top: 1px;
        left: 0;
        width: 20px;
        height: 20px;
        margin-top: 0;
        background-size: 12px;
    }

    .subscription-features strong {
        white-space: nowrap;
    }

}

#bp_infinity.active, #bp_1160.active, #bp_768.active { display: block !important; }

@media (min-width: 769px) and (max-width: 1160px) {
    #page {
        width: 100% !important;
        max-width: 1120px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

@media (min-width: 1161px), print {
    #muse_css_mq { background-color: #FFFFFF; }
    #page {
        width: 1160px;
        margin-left: auto !important;
        margin-right: auto !important;
    }
    #subscription-content.subscription-main,
    #pu3306-102 .subscription-main {
        display: block !important;
        float: none !important;
        clear: both !important;
        max-width: 1120px !important;
        margin-right: 0 !important;
        margin-top: 0 !important;
        margin-bottom: 40px !important;
        left: auto !important;
        right: auto !important;
    }
    #u3748 { z-index: 122; margin-top: 85px; left: -629px; }
    #pu488 { z-index: 107; width: 0.01px; height: 0; padding-bottom: 87px; margin-right: -10000px; margin-top: 20px; }
    #u488 { z-index: 107; width: 960px; height: 87px; position: fixed; top: 20px; left: 50%; margin-left: -480px; }
    #u495 { z-index: 108; top: 39px; margin-left: -436px; position: fixed; left: 50%; width: 188px; }
    body { min-width: 1160px; background-color: #FFFFFF; }
    .css_verticalspacer .verticalspacer { height: calc(100vh - 1200px); min-height: 80px; }
}

@media (max-width: 768px) {
    #muse_css_mq { background-color: #000300; }
    #page { width: 320px; }
    #u3748 { z-index: 135; margin-top: 80px; left: -859px; }
    #u901 { z-index: 107; height: 87px; position: fixed; top: 0; }
    #u901-bw { z-index: 107; }
    #paccordionu923 { z-index: 108; width: 0.01px; height: 0; padding-bottom: 87px; margin-right: -10000px; }
    #accordionu923 { z-index: 108; width: 450px; position: fixed; top: 0; left: 50%; margin-left: -225px; }
    #u924 { z-index: 109; width: 450px; position: relative; }
    #u925-3 { z-index: 110; width: 450px; min-height: 87px; position: relative; }
    #u925-3.AccordionPanelTabOpen { padding-top: 0; padding-bottom: 0; min-height: 87px; width: 450px; margin: 0; }
    #u926 { z-index: 113; width: 322px; position: relative; padding: 64px 64px 59px; }
    #u1208-4 { z-index: 118; width: 321px; margin-left: 1px; position: relative; }
    #u1208-4:hover, #u1208-4.MuseLinkActive { padding-top: 0; padding-bottom: 0; min-height: 0; width: 321px; margin: 0 0 0 1px; }
    #u1214 { z-index: 131; width: 78px; height: 25px; margin-left: 122px; position: relative; }
    #u885-4 { z-index: 114; width: 321px; margin-top: 27px; position: relative; }
    #u885-4:hover, #u885-4.MuseLinkActive { padding-top: 0; padding-bottom: 0; min-height: 0; width: 321px; margin: 27px 0 0; }
    #u991 { z-index: 130; width: 78px; height: 25px; margin-left: 122px; position: relative; }
    #u891-4 { z-index: 122; width: 320px; margin-left: 1px; margin-top: 24px; position: relative; }
    #u891-4:hover, #u891-4.MuseLinkActive { padding-top: 0; padding-bottom: 0; min-height: 0; width: 320px; margin: 24px 0 0 1px; }
    #u995 { z-index: 132; width: 78px; height: 25px; margin-left: 122px; top: -2px; margin-bottom: -2px; position: relative; }
    #u896-4 { z-index: 126; width: 320px; margin-left: 1px; margin-top: 25px; position: relative; }
    #u896-4:hover, #u896-4.MuseLinkActive { padding-top: 0; padding-bottom: 0; min-height: 0; width: 320px; margin: 25px 0 0 1px; }
    #u-cabinet-mobile { z-index: 74; width: 320px; margin-left: 1px; margin-top: 25px; position: relative; }
    #u-cabinet-mobile:hover, #u-cabinet-mobile.MuseLinkActive { padding-top: 0; padding-bottom: 0; min-height: 0; width: 320px; margin: 25px 0 0 1px; }
    #u495-m { z-index: 133; top: 22px; margin-left: -94px; position: fixed; left: 50%; width: 188px; display: block; }
    #u495-m img { width: 100%; height: auto; display: block; }
    body { overflow-x: hidden; min-width: 320px; }
}