/*
============================================================
NOYTRIX BILLING V84
PRO / API SEPARATE
ONE SCREEN DESKTOP
PREMIUM MINIMALISM
============================================================
*/


#screen-billing {

    --b84-bg:
        #020b18;

    --b84-card:
        #071b30;

    --b84-card-2:
        #0a2139;

    --b84-border:
        rgba(89, 151, 207, .28);

    --b84-border-strong:
        rgba(89, 170, 236, .52);

    --b84-text:
        #f6f9ff;

    --b84-muted:
        #8eacd0;

    --b84-soft:
        #6685a8;

    --b84-gold:
        #ffba32;

    --b84-green:
        #31dca0;

    --b84-blue:
        #49a8ff;


    width:
        100% !important;

    height:
        calc(100vh - 8px) !important;

    min-height:
        0 !important;

    overflow:
        hidden !important;
}


#screen-billing,
#screen-billing * {

    box-sizing:
        border-box;
}


#screen-billing
.billing-app {

    width:
        100% !important;

    height:
        100% !important;

    max-width:
        none !important;

    margin:
        0 !important;

    padding:
        0 !important;

    overflow:
        hidden !important;
}


#screen-billing
.billing-premium-v84 {

    width:
        100%;

    height:
        100%;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        14px 20px 16px;

    overflow:
        hidden;

    color:
        var(--b84-text);

    background:
        var(--b84-bg);

    font-family:
        inherit;
}


#screen-billing
.billing-premium-v84
button,

#screen-billing
.billing-premium-v84
a {

    font:
        inherit;
}


/* ============================================================
   HEADER
   ============================================================ */


#screen-billing
.p84-header {

    flex:
        0 0 auto;

    min-height:
        92px;

    display:
        grid;

    grid-template-columns:
        minmax(0, 1fr)
        auto;

    align-items:
        center;

    gap:
        24px;

    padding:
        2px 4px 10px;
}


#screen-billing
.p84-title {

    min-width:
        0;
}


#screen-billing
.p84-title > span,

#screen-billing
.p84-kicker {

    display:
        block;

    color:
        var(--b84-gold);

    font-size:
        11px;

    font-weight:
        900;

    line-height:
        1.15;

    letter-spacing:
        .1em;

    text-transform:
        uppercase;
}


#screen-billing
.p84-title h1 {

    margin:
        4px 0 0;

    color:
        var(--b84-text);

    font-size:
        30px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.035em;
}


#screen-billing
.p84-title p {

    margin:
        7px 0 0;

    color:
        var(--b84-muted);

    font-size:
        14px;

    font-weight:
        650;

    line-height:
        1.25;
}


/* ============================================================
   FIXED ACCOUNT HEADER
   ============================================================ */


#screen-billing
.p84-account {

    min-width:
        310px;

    height:
        62px;

    display:
        flex;

    align-items:
        center;

    gap:
        12px;

    padding:
        8px 14px;

    border:
        1px solid
        var(--b84-border);

    border-radius:
        14px;

    background:
        rgba(8, 28, 48, .78);
}


#screen-billing
.p84-account-avatar {

    width:
        42px;

    height:
        42px;

    min-width:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    overflow:
        hidden;

    border:
        1.5px solid
        var(--b84-gold);

    border-radius:
        50%;

    color:
        var(--b84-text);

    background:
        #0c2742;

    font-size:
        12px;

    font-weight:
        900;

    line-height:
        1;
}


#screen-billing
.p84-account-copy {

    min-width:
        0;

    display:
        flex;

    flex:
        1 1 auto;

    flex-direction:
        column;

    justify-content:
        center;
}


#screen-billing
.p84-account-copy > strong {

    display:
        block;

    max-width:
        245px;

    overflow:
        hidden;

    color:
        var(--b84-text);

    font-size:
        13px;

    font-weight:
        800;

    line-height:
        1.2;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


#screen-billing
.p84-account-status {

    display:
        flex;

    flex-wrap:
        wrap;

    align-items:
        center;

    gap:
        4px 9px;

    margin-top:
        4px;
}


#screen-billing
.p84-account-status span {

    position:
        relative;

    padding-left:
        10px;

    color:
        var(--b84-green);

    font-size:
        10px;

    font-weight:
        800;

    line-height:
        1;
}


#screen-billing
.p84-account-status span::before {

    content:
        "";

    position:
        absolute;

    top:
        50%;

    left:
        0;

    width:
        5px;

    height:
        5px;

    border-radius:
        50%;

    background:
        currentColor;

    transform:
        translateY(-50%);
}


#screen-billing
.p84-account-status span.neutral {

    color:
        var(--b84-muted);
}


#screen-billing
.p84-header-login {

    width:
        130px !important;

    margin:
        0 !important;
}


/* ============================================================
   CENTER SWITCH
   ============================================================ */


#screen-billing
.p84-switch {

    flex:
        0 0 42px;

    width:
        330px;

    align-self:
        center;

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        3px;

    padding:
        3px;

    margin:
        0 auto 12px;

    border:
        1px solid
        var(--b84-border);

    border-radius:
        12px;

    background:
        #06172a;
}


#screen-billing
.p84-switch button {

    min-width:
        0;

    height:
        34px;

    padding:
        0 14px;

    border:
        0;

    border-radius:
        9px;

    color:
        var(--b84-muted);

    background:
        transparent;

    font-size:
        12px;

    font-weight:
        800;

    cursor:
        pointer;

    white-space:
        nowrap;
}


#screen-billing
.p84-switch button:hover {

    color:
        var(--b84-text);
}


#screen-billing
.p84-switch button.active {

    color:
        var(--b84-text);

    background:
        linear-gradient(
            180deg,
            #17436b,
            #103454
        );

    box-shadow:
        inset 0 0 0 1px
        rgba(73, 168, 255, .24);
}


/* ============================================================
   VIEW
   ============================================================ */


#screen-billing
.p84-view {

    flex:
        1 1 auto;

    min-height:
        0;

    overflow:
        hidden;
}


/* ============================================================
   PRO
   ============================================================ */


#screen-billing
.p84-pro-view {

    display:
        flex;

    justify-content:
        center;

    align-items:
        stretch;
}


#screen-billing
.p84-pro-card {

    width:
        min(
            1060px,
            100%
        );

    height:
        100%;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255, 186, 50, .38);

    border-radius:
        18px;

    background:
        linear-gradient(
            145deg,
            rgba(28, 36, 45, .86),
            rgba(5, 25, 44, .99) 48%
        );
}


#screen-billing
.p84-pro-main {

    flex:
        1 1 auto;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        .9fr
        1.1fr;

    gap:
        0;
}


#screen-billing
.p84-pro-intro,

#screen-billing
.p84-pro-benefits {

    min-width:
        0;

    padding:
        28px 30px;
}


#screen-billing
.p84-pro-intro {

    display:
        flex;

    flex-direction:
        column;

    border-right:
        1px solid
        var(--b84-border);
}


#screen-billing
.p84-pro-intro h2 {

    margin:
        8px 0 0;

    color:
        var(--b84-text);

    font-size:
        34px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.03em;
}


#screen-billing
.p84-description {

    margin:
        11px 0 0;

    color:
        #bfd0e5;

    font-size:
        13px;

    font-weight:
        600;

    line-height:
        1.4;
}


#screen-billing
.p84-pro-price {

    margin-top:
        22px;
}


#screen-billing
.p84-price {

    display:
        flex;

    align-items:
        baseline;

    gap:
        7px;
}


#screen-billing
.p84-price strong {

    color:
        var(--b84-text);

    font-size:
        40px;

    font-weight:
        900;

    line-height:
        .95;

    letter-spacing:
        -.045em;
}


#screen-billing
.p84-price span {

    color:
        var(--b84-muted);

    font-size:
        12px;

    font-weight:
        750;
}


#screen-billing
.p84-pro-price > small {

    display:
        block;

    margin-top:
        7px;

    color:
        var(--b84-gold);

    font-size:
        10px;

    font-weight:
        800;
}


#screen-billing
.p84-terms {

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        8px;

    margin-top:
        auto;

    padding-top:
        22px;
}


#screen-billing
.p84-terms button {

    min-width:
        0;

    min-height:
        68px;

    display:
        flex;

    flex-direction:
        column;

    align-items:
        flex-start;

    justify-content:
        center;

    gap:
        3px;

    padding:
        10px 11px;

    border:
        1px solid
        var(--b84-border);

    border-radius:
        11px;

    color:
        var(--b84-muted);

    background:
        #06192c;

    cursor:
        pointer;
}


#screen-billing
.p84-terms button.active {

    color:
        var(--b84-text);

    border-color:
        var(--b84-gold);

    background:
        rgba(255, 186, 50, .08);
}


#screen-billing
.p84-terms span {

    font-size:
        10px;

    font-weight:
        750;
}


#screen-billing
.p84-terms strong {

    color:
        inherit;

    font-size:
        14px;

    font-weight:
        900;
}


#screen-billing
.p84-terms small {

    color:
        var(--b84-soft);

    font-size:
        8px;

    font-weight:
        700;
}


/* ============================================================
   PRO BENEFITS
   ============================================================ */


#screen-billing
.p84-pro-benefits {

    display:
        flex;

    flex-direction:
        column;

    justify-content:
        center;
}


#screen-billing
.p84-pro-feature-grid {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        17px 24px;

    margin:
        22px 0 0;

    padding:
        0;

    list-style:
        none;
}


#screen-billing
.p84-pro-feature-grid li {

    position:
        relative;

    padding-left:
        23px;

    color:
        #d8e4f1;

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.35;
}


#screen-billing
.p84-pro-feature-grid li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    top:
        -1px;

    color:
        var(--b84-green);

    font-size:
        15px;

    font-weight:
        900;
}


/* ============================================================
   PRO FOOTER
   ============================================================ */


#screen-billing
.p84-pro-footer {

    flex:
        0 0 74px;

    display:
        grid;

    grid-template-columns:
        1fr
        auto;

    align-items:
        center;

    gap:
        18px;

    padding:
        12px 18px;

    border-top:
        1px solid
        var(--b84-border);

    background:
        rgba(3, 16, 29, .55);
}


#screen-billing
.p84-pro-actions {

    min-width:
        250px;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;
}


#screen-billing
.p84-pro-actions
.p84-primary,

#screen-billing
.p84-pro-actions
.p84-secondary {

    width:
        210px;

    margin:
        0;
}


#screen-billing
.p84-live-status,

#screen-billing
.p84-pro-note {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        8px;

    color:
        var(--b84-muted);

    font-size:
        11px;

    font-weight:
        750;
}


#screen-billing
.p84-live-status {

    color:
        var(--b84-green);
}


#screen-billing
.p84-live-status i {

    width:
        7px;

    height:
        7px;

    border-radius:
        50%;

    background:
        var(--b84-green);

    box-shadow:
        0 0 12px
        rgba(49, 220, 160, .45);
}


/* ============================================================
   API VIEW
   ============================================================ */


#screen-billing
.p84-api-view {

    display:
        flex;

    flex-direction:
        column;
}


#screen-billing
.p84-api-heading {

    flex:
        0 0 60px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0 4px 10px;
}


#screen-billing
.p84-api-heading h2 {

    margin:
        4px 0 0;

    color:
        var(--b84-text);

    font-size:
        19px;

    font-weight:
        850;

    line-height:
        1.1;
}


#screen-billing
.p84-docs-link {

    padding:
        0;

    border:
        0;

    color:
        var(--b84-muted);

    background:
        transparent;

    font-size:
        11px;

    font-weight:
        750;

    cursor:
        pointer;
}


#screen-billing
.p84-docs-link:hover {

    color:
        var(--b84-blue);
}


#screen-billing
.p84-api-grid {

    flex:
        1 1 auto;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        14px;
}


/* ============================================================
   API CARDS
   ============================================================ */


#screen-billing
.p84-plan {

    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        20px 21px 16px;

    overflow:
        hidden;

    border:
        1px solid
        var(--b84-border);

    border-radius:
        17px;

    background:
        linear-gradient(
            180deg,
            #09213a,
            #06182b
        );
}


#screen-billing
.p84-plan.p84-featured {

    border-color:
        rgba(73, 168, 255, .58);

    background:
        linear-gradient(
            180deg,
            #153f63,
            #08213a
        );
}


#screen-billing
.p84-current-plan {

    box-shadow:
        inset 0 0 0 1px
        rgba(49, 220, 160, .12);
}


#screen-billing
.p84-badge {

    position:
        absolute;

    top:
        14px;

    right:
        14px;

    min-height:
        23px;

    display:
        flex;

    align-items:
        center;

    padding:
        0 9px;

    border:
        1px solid
        rgba(255, 186, 50, .48);

    border-radius:
        999px;

    color:
        var(--b84-gold);

    background:
        rgba(255, 186, 50, .08);

    font-size:
        8px;

    font-weight:
        900;

    letter-spacing:
        .05em;
}


#screen-billing
.p84-badge-active {

    color:
        var(--b84-green);

    border-color:
        rgba(49, 220, 160, .42);

    background:
        rgba(49, 220, 160, .08);
}


#screen-billing
.p84-plan-head {

    flex:
        0 0 auto;

    min-height:
        178px;

    padding-right:
        18px;
}


#screen-billing
.p84-plan-head h2 {

    margin:
        7px 0 0;

    color:
        var(--b84-text);

    font-size:
        24px;

    font-weight:
        900;

    line-height:
        1.05;

    letter-spacing:
        -.025em;
}


#screen-billing
.p84-plan-head
.p84-price {

    margin-top:
        14px;
}


#screen-billing
.p84-plan-head
.p84-price strong {

    font-size:
        36px;
}


#screen-billing
.p84-plan-head
.p84-description {

    margin-top:
        10px;

    font-size:
        12px;

    line-height:
        1.35;
}


#screen-billing
.p84-features {

    flex:
        1 1 auto;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        7px;

    margin:
        10px 0 12px;

    padding:
        0;

    list-style:
        none;
}


#screen-billing
.p84-features li {

    position:
        relative;

    padding-left:
        21px;

    color:
        #d9e5f2;

    font-size:
        11.5px;

    font-weight:
        650;

    line-height:
        1.25;
}


#screen-billing
.p84-features li::before {

    content:
        "✓";

    position:
        absolute;

    left:
        0;

    color:
        var(--b84-green);

    font-size:
        13px;

    font-weight:
        900;
}


#screen-billing
.p84-plan-bottom {

    flex:
        0 0 auto;

    margin-top:
        auto;
}


/* ============================================================
   BUTTONS
   ============================================================ */


#screen-billing
.p84-primary,

#screen-billing
.p84-secondary,

#screen-billing
.p84-mini-button {

    min-height:
        42px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 14px;

    border:
        0;

    border-radius:
        10px;

    text-decoration:
        none;

    font-size:
        11px;

    font-weight:
        850;

    line-height:
        1;

    cursor:
        pointer;
}


#screen-billing
.p84-primary {

    width:
        100%;

    color:
        #06121e;

    background:
        var(--b84-gold);
}


#screen-billing
.p84-featured
.p84-primary:not(
    .p84-active-button
) {

    background:
        #55b0fa;
}


#screen-billing
.p84-secondary {

    color:
        #dce8f5;

    border:
        1px solid
        var(--b84-border);

    background:
        #071d33;
}


#screen-billing
.p84-active-button {

    color:
        #05251a;

    background:
        var(--b84-green);

    opacity:
        .88;

    cursor:
        default;
}


#screen-billing
.p84-api-actions {

    display:
        grid;

    grid-template-columns:
        1fr
        1fr;

    gap:
        6px;

    margin-top:
        6px;
}


#screen-billing
.p84-mini-button {

    min-height:
        34px;

    color:
        var(--b84-muted);

    border:
        1px solid
        var(--b84-border);

    background:
        #06182b;

    font-size:
        9px;
}


/* ============================================================
   API KEY BOX
   ============================================================ */


#screen-billing
.p84-key-box {

    flex:
        0 0 52px;

    display:
        grid;

    grid-template-columns:
        230px
        minmax(0, 1fr)
        90px;

    align-items:
        center;

    gap:
        12px;

    margin-top:
        8px;

    padding:
        7px 10px;

    border:
        1px solid
        rgba(49, 220, 160, .35);

    border-radius:
        11px;

    background:
        #071d2e;
}


#screen-billing
.p84-key-box div span,

#screen-billing
.p84-key-box div strong {

    display:
        block;
}


#screen-billing
.p84-key-box div span {

    color:
        var(--b84-green);

    font-size:
        8px;

    font-weight:
        900;
}


#screen-billing
.p84-key-box div strong {

    margin-top:
        2px;

    color:
        var(--b84-text);

    font-size:
        9px;
}


#screen-billing
.p84-key-box code {

    min-width:
        0;

    overflow:
        hidden;

    color:
        #d7e7f7;

    font-size:
        10px;

    text-overflow:
        ellipsis;

    white-space:
        nowrap;
}


#screen-billing
.p84-key-box
.p84-secondary {

    min-height:
        32px;
}


/* ============================================================
   1600x900 / NORMAL DESKTOP
   ============================================================ */


@media (
    min-width: 1200px
) and (
    max-height: 900px
) {

    #screen-billing
    .billing-premium-v84 {

        padding-top:
            10px;

        padding-bottom:
            10px;
    }


    #screen-billing
    .p84-header {

        min-height:
            82px;
    }


    #screen-billing
    .p84-title h1 {

        font-size:
            27px;
    }


    #screen-billing
    .p84-switch {

        flex-basis:
            38px;

        margin-bottom:
            8px;
    }


    #screen-billing
    .p84-plan {

        padding-top:
            17px;

        padding-bottom:
            13px;
    }


    #screen-billing
    .p84-plan-head {

        min-height:
            155px;
    }


    #screen-billing
    .p84-plan-head h2 {

        font-size:
            22px;
    }


    #screen-billing
    .p84-plan-head
    .p84-price strong {

        font-size:
            33px;
    }


    #screen-billing
    .p84-features {

        gap:
            5px;
    }


    #screen-billing
    .p84-features li {

        font-size:
            10.5px;
    }


    #screen-billing
    .p84-pro-intro,

    #screen-billing
    .p84-pro-benefits {

        padding-top:
            22px;

        padding-bottom:
            22px;
    }


    #screen-billing
    .p84-pro-feature-grid {

        gap:
            13px 20px;
    }
}


/* ============================================================
   SMALL DESKTOP
   ============================================================ */


@media (
    max-width: 1199px
) {

    #screen-billing {

        height:
            auto !important;

        min-height:
            100vh !important;

        overflow-y:
            auto !important;
    }


    #screen-billing
    .billing-app,

    #screen-billing
    .billing-premium-v84 {

        height:
            auto !important;

        overflow:
            visible !important;
    }


    #screen-billing
    .p84-api-grid {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-pro-main {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-pro-intro {

        border-right:
            0;

        border-bottom:
            1px solid
            var(--b84-border);
    }
}


/* ============================================================
   MOBILE
   ============================================================ */


@media (
    max-width: 700px
) {

    #screen-billing
    .billing-premium-v84 {

        padding:
            12px;
    }


    #screen-billing
    .p84-header {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-account {

        min-width:
            0;
    }


    #screen-billing
    .p84-switch {

        width:
            100%;
    }


    #screen-billing
    .p84-pro-feature-grid {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-terms {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-pro-footer {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p84-pro-actions {

        min-width:
            0;

        flex-direction:
            column;
    }


    #screen-billing
    .p84-pro-actions
    .p84-primary,

    #screen-billing
    .p84-pro-actions
    .p84-secondary {

        width:
            100%;
    }
}


/*
============================================================
NOYTRIX BILLING V85
THREE SEPARATE PRO PLAN CARDS
============================================================
*/


/* ============================================================
   PRO VIEW
   ============================================================ */


#screen-billing
.p85-pro-view {

    display:
        flex;

    flex-direction:
        column;

    min-height:
        0;

    overflow:
        hidden;
}


/* ============================================================
   PRO HEADING
   ============================================================ */


#screen-billing
.p85-pro-heading {

    flex:
        0 0 58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        24px;

    padding:
        0 4px 9px;
}


#screen-billing
.p85-pro-heading h2 {

    margin:
        4px 0 0;

    color:
        var(--b84-text);

    font-size:
        20px;

    font-weight:
        900;

    line-height:
        1.05;
}


#screen-billing
.p85-pro-heading > p {

    max-width:
        380px;

    margin:
        0;

    color:
        var(--b84-muted);

    font-size:
        11px;

    font-weight:
        650;

    line-height:
        1.3;

    text-align:
        right;
}


/* ============================================================
   ACTIVE STATUS
   ============================================================ */


#screen-billing
.p85-pro-status {

    flex:
        0 0 58px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        20px;

    padding:
        0 4px 9px;
}


#screen-billing
.p85-pro-status-left {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;
}


#screen-billing
.p85-live-dot {

    width:
        8px;

    height:
        8px;

    flex:
        0 0 8px;

    border-radius:
        50%;

    background:
        var(--b84-green);

    box-shadow:
        0 0 14px
        rgba(49, 220, 160, .42);
}


#screen-billing
.p85-pro-status-left
strong,

#screen-billing
.p85-pro-status-left
span {

    display:
        block;
}


#screen-billing
.p85-pro-status-left
strong {

    color:
        var(--b84-green);

    font-size:
        12px;

    font-weight:
        850;
}


#screen-billing
.p85-pro-status-left
div > span {

    margin-top:
        2px;

    color:
        var(--b84-muted);

    font-size:
        10px;

    font-weight:
        650;
}


#screen-billing
.p85-pro-status-manage {

    min-width:
        190px;
}


#screen-billing
.p85-pro-status-manage
.p84-secondary {

    min-height:
        36px;

    margin:
        0;
}


/* ============================================================
   THREE PRO CARDS
   ============================================================ */


#screen-billing
.p85-pro-grid {

    flex:
        1 1 auto;

    min-height:
        0;

    display:
        grid;

    grid-template-columns:
        repeat(
            3,
            minmax(0, 1fr)
        );

    gap:
        14px;

    align-items:
        stretch;
}


/* ============================================================
   PLAN CARD
   ============================================================ */


#screen-billing
.p85-pro-card {

    position:
        relative;

    min-width:
        0;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    padding:
        22px 23px 17px;

    overflow:
        hidden;

    border:
        1px solid
        var(--b84-border);

    border-radius:
        17px;

    background:
        linear-gradient(
            180deg,
            #091f36,
            #06182b
        );

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


#screen-billing
.p85-pro-card:hover {

    border-color:
        var(--b84-border-strong);

    transform:
        translateY(-2px);
}


#screen-billing
.p85-pro-featured {

    border-color:
        rgba(73, 168, 255, .62);

    background:
        linear-gradient(
            180deg,
            #153f63,
            #08213a
        );
}


#screen-billing
.p85-pro-yearly {

    border-color:
        rgba(255, 186, 50, .46);

    background:
        linear-gradient(
            180deg,
            rgba(48, 43, 29, .44),
            #071a2d
        );
}


/* ============================================================
   BADGES
   ============================================================ */


#screen-billing
.p85-plan-badge {

    position:
        absolute;

    top:
        15px;

    right:
        15px;

    min-height:
        24px;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0 9px;

    border:
        1px solid
        rgba(73, 168, 255, .55);

    border-radius:
        999px;

    color:
        #78c5ff;

    background:
        rgba(73, 168, 255, .10);

    font-size:
        8px;

    font-weight:
        950;

    letter-spacing:
        .06em;
}


#screen-billing
.p85-best-value {

    color:
        var(--b84-gold);

    border-color:
        rgba(255, 186, 50, .50);

    background:
        rgba(255, 186, 50, .09);
}


/* ============================================================
   CARD HEAD
   ============================================================ */


#screen-billing
.p85-card-head {

    flex:
        0 0 auto;

    min-height:
        190px;

    padding-right:
        10px;
}


#screen-billing
.p85-card-head h2 {

    margin:
        7px 0 0;

    color:
        var(--b84-text);

    font-size:
        28px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.03em;
}


/* ============================================================
   PRICE
   ============================================================ */


#screen-billing
.p85-price {

    display:
        flex;

    align-items:
        baseline;

    gap:
        7px;

    margin-top:
        20px;
}


#screen-billing
.p85-price strong {

    color:
        var(--b84-text);

    font-size:
        40px;

    font-weight:
        900;

    line-height:
        .95;

    letter-spacing:
        -.045em;
}


#screen-billing
.p85-price span {

    color:
        var(--b84-muted);

    font-size:
        11px;

    font-weight:
        750;
}


#screen-billing
.p85-equivalent {

    min-height:
        15px;

    margin:
        7px 0 0;

    color:
        var(--b84-muted);

    font-size:
        10px;

    font-weight:
        750;
}


#screen-billing
.p85-saving {

    color:
        var(--b84-green);
}


#screen-billing
.p85-description {

    max-width:
        380px;

    margin:
        14px 0 0;

    color:
        #bfd0e4;

    font-size:
        12px;

    font-weight:
        600;

    line-height:
        1.4;
}


/* ============================================================
   FEATURES
   ============================================================ */


#screen-billing
.p85-features {

    flex:
        1 1 auto;

    min-height:
        0;

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

    margin:
        14px 0 16px;

    padding:
        0;

    list-style:
        none;
}


#screen-billing
.p85-features li {

    position:
        relative;

    padding-left:
        22px;

    color:
        #d9e5f2;

    font-size:
        12px;

    font-weight:
        650;

    line-height:
        1.3;
}


#screen-billing
.p85-features li::before {

    content:
        "✓";

    position:
        absolute;

    top:
        -1px;

    left:
        0;

    color:
        var(--b84-green);

    font-size:
        14px;

    font-weight:
        950;
}


/* ============================================================
   CARD BOTTOM
   ============================================================ */


#screen-billing
.p85-card-bottom {

    flex:
        0 0 auto;

    margin-top:
        auto;
}


#screen-billing
.p85-card-bottom
.p84-primary {

    min-height:
        44px;

    font-size:
        11px;
}


/* ============================================================
   FOOTER
   ============================================================ */


#screen-billing
.p85-pro-footer {

    flex:
        0 0 34px;

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

    gap:
        18px;

    padding:
        8px 4px 0;

    color:
        var(--b84-soft);

    font-size:
        9px;

    font-weight:
        700;
}


/* ============================================================
   FIT 900PX HEIGHT
   ============================================================ */


@media (
    min-width: 1200px
) and (
    max-height: 900px
) {

    #screen-billing
    .p85-pro-status,

    #screen-billing
    .p85-pro-heading {

        flex-basis:
            50px;
    }


    #screen-billing
    .p85-pro-card {

        padding:
            17px 19px 13px;
    }


    #screen-billing
    .p85-card-head {

        min-height:
            158px;
    }


    #screen-billing
    .p85-card-head h2 {

        font-size:
            24px;
    }


    #screen-billing
    .p85-price {

        margin-top:
            14px;
    }


    #screen-billing
    .p85-price strong {

        font-size:
            34px;
    }


    #screen-billing
    .p85-description {

        margin-top:
            9px;

        font-size:
            10.5px;
    }


    #screen-billing
    .p85-features {

        gap:
            6px;

        margin-top:
            9px;

        margin-bottom:
            10px;
    }


    #screen-billing
    .p85-features li {

        font-size:
            10.5px;

        line-height:
            1.2;
    }


    #screen-billing
    .p85-pro-footer {

        flex-basis:
            28px;

        padding-top:
            5px;
    }

}


/* ============================================================
   SMALL DESKTOP
   ============================================================ */


@media (
    max-width: 1199px
) {

    #screen-billing
    .p85-pro-view {

        overflow:
            visible;
    }


    #screen-billing
    .p85-pro-grid {

        grid-template-columns:
            1fr;
    }


    #screen-billing
    .p85-pro-card {

        min-height:
            500px;
    }

}


/* ============================================================
   MOBILE
   ============================================================ */


@media (
    max-width: 700px
) {

    #screen-billing
    .p85-pro-status,

    #screen-billing
    .p85-pro-heading {

        align-items:
            flex-start;

        flex-direction:
            column;

        height:
            auto;

        flex-basis:
            auto;
    }


    #screen-billing
    .p85-pro-status-manage {

        width:
            100%;

        min-width:
            0;
    }


    #screen-billing
    .p85-pro-footer {

        align-items:
            flex-start;

        flex-direction:
            column;

        height:
            auto;

        flex-basis:
            auto;
    }

}


/*
============================================================
NOYTRIX BILLING V86
PREMIUM DESIGN POLISH
============================================================
*/


/* ============================================================
   PREMIUM VARIABLES
   ============================================================ */

#screen-billing {

    --p86-blue:
        66, 169, 255;

    --p86-cyan:
        74, 218, 255;

    --p86-gold:
        255, 186, 50;

    --p86-green:
        49, 220, 160;

}


/* ============================================================
   ALL THREE PRO CARDS
   DEEPER PREMIUM BACKGROUND
   ============================================================ */

#screen-billing
.p85-pro-card {

    isolation:
        isolate;

    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid
        rgba(91, 153, 211, .32);

    background:

        radial-gradient(
            900px 420px
            at -10% -10%,
            rgba(
                var(--p86-blue),
                .10
            ),
            transparent 58%
        ),

        radial-gradient(
            600px 360px
            at 110% 110%,
            rgba(
                var(--p86-cyan),
                .055
            ),
            transparent 62%
        ),

        linear-gradient(
            155deg,
            #0a223a 0%,
            #071a2d 52%,
            #051525 100%
        );

    box-shadow:

        inset 0 1px 0
        rgba(255, 255, 255, .035),

        0 18px 50px
        rgba(0, 0, 0, .18);

    transform:
        translateZ(0);

    transition:

        transform .28s
        cubic-bezier(.2,.8,.2,1),

        border-color .28s ease,

        box-shadow .28s ease,

        background .28s ease;
}


/* ============================================================
   SUBTLE LIGHT LAYER
   ============================================================ */

#screen-billing
.p85-pro-card::before {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    inset:
        0;

    pointer-events:
        none;

    opacity:
        .7;

    background:

        linear-gradient(
            120deg,
            transparent 0%,
            rgba(255,255,255,.025) 30%,
            rgba(255,255,255,.07) 49%,
            rgba(255,255,255,.02) 63%,
            transparent 100%
        );

    background-size:
        240% 100%;

    background-position:
        100% 0;

    transition:
        opacity .3s ease;
}


/* ============================================================
   EDGE GLOW
   ============================================================ */

#screen-billing
.p85-pro-card::after {

    content:
        "";

    position:
        absolute;

    z-index:
        -1;

    pointer-events:
        none;

    width:
        280px;

    height:
        280px;

    top:
        -180px;

    right:
        -150px;

    border-radius:
        50%;

    background:
        rgba(
            var(--p86-blue),
            .14
        );

    filter:
        blur(70px);

    opacity:
        .45;

    transition:
        opacity .3s ease,
        transform .4s ease;
}


/* ============================================================
   CARD HOVER
   ============================================================ */

#screen-billing
.p85-pro-card:hover {

    transform:
        translateY(-4px);

    border-color:
        rgba(
            var(--p86-blue),
            .58
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.06),

        0 24px 65px
        rgba(0,0,0,.28),

        0 0 34px
        rgba(
            var(--p86-blue),
            .075
        );
}


#screen-billing
.p85-pro-card:hover::before {

    animation:
        p86-card-shine
        1.15s
        cubic-bezier(.2,.8,.2,1)
        forwards;
}


#screen-billing
.p85-pro-card:hover::after {

    opacity:
        .72;

    transform:
        translate(
            -18px,
            18px
        );
}


/* ============================================================
   MONTHLY — CLEAN BLUE
   ============================================================ */

#screen-billing
.p85-pro-monthly {

    background:

        radial-gradient(
            700px 380px
            at 0% 0%,
            rgba(
                var(--p86-blue),
                .11
            ),
            transparent 60%
        ),

        linear-gradient(
            155deg,
            #0a223a 0%,
            #071a2d 54%,
            #051525 100%
        );
}


/* ============================================================
   6 MONTHS — PREMIUM BLUE
   ============================================================ */

#screen-billing
.p85-pro-featured {

    border-color:
        rgba(
            var(--p86-blue),
            .65
        );

    background:

        radial-gradient(
            800px 440px
            at 10% 0%,
            rgba(
                var(--p86-cyan),
                .13
            ),
            transparent 58%
        ),

        radial-gradient(
            540px 320px
            at 100% 100%,
            rgba(
                var(--p86-blue),
                .10
            ),
            transparent 62%
        ),

        linear-gradient(
            155deg,
            #18496f 0%,
            #103652 33%,
            #09243c 66%,
            #06182a 100%
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.07),

        0 20px 55px
        rgba(0,0,0,.23),

        0 0 34px
        rgba(
            var(--p86-blue),
            .065
        );
}


#screen-billing
.p85-pro-featured::after {

    background:
        rgba(
            var(--p86-cyan),
            .18
        );

    opacity:
        .58;
}


/* ============================================================
   YEARLY — PREMIUM GOLD
   ============================================================ */

#screen-billing
.p85-pro-yearly {

    border-color:
        rgba(
            var(--p86-gold),
            .48
        );

    background:

        radial-gradient(
            800px 400px
            at 5% 0%,
            rgba(
                var(--p86-gold),
                .10
            ),
            transparent 57%
        ),

        radial-gradient(
            500px 300px
            at 100% 100%,
            rgba(
                var(--p86-gold),
                .055
            ),
            transparent 65%
        ),

        linear-gradient(
            155deg,
            #28261f 0%,
            #171e24 28%,
            #0b1c2b 62%,
            #061624 100%
        );
}


#screen-billing
.p85-pro-yearly::after {

    background:
        rgba(
            var(--p86-gold),
            .16
        );

    opacity:
        .48;
}


#screen-billing
.p85-pro-yearly:hover {

    border-color:
        rgba(
            var(--p86-gold),
            .72
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.055),

        0 24px 65px
        rgba(0,0,0,.28),

        0 0 34px
        rgba(
            var(--p86-gold),
            .075
        );
}


/* ============================================================
   LARGE PLAN TITLES
   ============================================================ */

#screen-billing
.p85-card-head h2 {

    margin-top:
        8px;

    font-size:
        29px;

    font-weight:
        900;

    line-height:
        1;

    letter-spacing:
        -.035em;

    text-shadow:
        0 2px 18px
        rgba(0,0,0,.16);
}


/* ============================================================
   PRICE
   ============================================================ */

#screen-billing
.p85-price {

    margin-top:
        18px;
}


#screen-billing
.p85-price strong {

    font-size:
        42px;

    font-weight:
        950;

    letter-spacing:
        -.05em;

    text-shadow:
        0 5px 24px
        rgba(0,0,0,.22);
}


#screen-billing
.p85-price span {

    font-size:
        12px;

    font-weight:
        800;
}


/* ============================================================
   DESCRIPTION — BIGGER
   THIS IS WHAT YOU ASKED FOR
   ============================================================ */

#screen-billing
.p85-description {

    max-width:
        420px;

    margin-top:
        15px;

    color:
        #c9d9eb;

    font-size:
        14px;

    font-weight:
        600;

    line-height:
        1.48;

    letter-spacing:
        -.005em;
}


/* ============================================================
   EFFECTIVE PRICE / SAVING
   ============================================================ */

#screen-billing
.p85-equivalent {

    margin-top:
        8px;

    font-size:
        11px;

    font-weight:
        800;

    line-height:
        1.2;
}


#screen-billing
.p85-saving {

    color:
        #42e4ac;

    text-shadow:
        0 0 18px
        rgba(
            var(--p86-green),
            .14
        );
}


/* ============================================================
   FEATURE LIST — BETTER READABILITY
   ============================================================ */

#screen-billing
.p85-features {

    gap:
        11px;

    margin-top:
        18px;
}


#screen-billing
.p85-features li {

    padding-left:
        24px;

    color:
        #dfebf6;

    font-size:
        13px;

    font-weight:
        650;

    line-height:
        1.32;

    letter-spacing:
        -.006em;
}


/* ============================================================
   CHECKMARK
   ============================================================ */

#screen-billing
.p85-features li::before {

    top:
        -1px;

    font-size:
        15px;

    color:
        #37e3a6;

    text-shadow:
        0 0 14px
        rgba(
            var(--p86-green),
            .25
        );
}


/* ============================================================
   KICKER
   ============================================================ */

#screen-billing
.p85-card-head
.p84-kicker {

    font-size:
        11px;

    letter-spacing:
        .12em;
}


/* ============================================================
   RECOMMENDED / BEST VALUE BADGES
   ============================================================ */

#screen-billing
.p85-plan-badge {

    top:
        15px;

    right:
        15px;

    min-height:
        27px;

    padding:
        0 11px;

    backdrop-filter:
        blur(10px);

    -webkit-backdrop-filter:
        blur(10px);

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.08);

    font-size:
        8.5px;
}


#screen-billing
.p85-pro-featured
.p85-plan-badge {

    color:
        #a7dcff;

    border-color:
        rgba(
            var(--p86-cyan),
            .48
        );

    background:
        rgba(
            var(--p86-blue),
            .14
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.08),

        0 0 20px
        rgba(
            var(--p86-blue),
            .08
        );
}


#screen-billing
.p85-best-value {

    color:
        #ffd36f;

    background:
        rgba(
            var(--p86-gold),
            .105
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.06),

        0 0 20px
        rgba(
            var(--p86-gold),
            .075
        );
}


/* ============================================================
   BUTTONS — PREMIUM
   ============================================================ */

#screen-billing
.p85-card-bottom
.p84-primary {

    position:
        relative;

    min-height:
        48px;

    overflow:
        hidden;

    border:
        1px solid
        rgba(255,255,255,.07);

    border-radius:
        11px;

    font-size:
        12px;

    font-weight:
        850;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.15),

        0 7px 22px
        rgba(0,0,0,.12);

    transition:
        transform .2s ease,
        filter .2s ease,
        box-shadow .2s ease;
}


#screen-billing
.p85-card-bottom
.p84-primary:hover:not(:disabled) {

    transform:
        translateY(-1px);

    filter:
        brightness(1.06);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.18),

        0 10px 28px
        rgba(0,0,0,.19);
}


/* ============================================================
   ACTIVE BUTTON
   ============================================================ */

#screen-billing
.p85-card-bottom
.p84-active-button {

    color:
        #042319;

    background:

        linear-gradient(
            135deg,
            #42dfae,
            #27c897
        );

    border-color:
        rgba(
            var(--p86-green),
            .42
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.16),

        0 0 28px
        rgba(
            var(--p86-green),
            .08
        );
}


/* ============================================================
   CARD BOTTOM SEPARATION
   ============================================================ */

#screen-billing
.p85-card-bottom {

    position:
        relative;

    padding-top:
        14px;
}


#screen-billing
.p85-card-bottom::before {

    content:
        "";

    position:
        absolute;

    top:
        0;

    left:
        0;

    right:
        0;

    height:
        1px;

    background:

        linear-gradient(
            90deg,
            transparent,
            rgba(114,171,223,.20),
            transparent
        );
}


/* ============================================================
   HEADER / SWITCH ALSO SLIGHTLY MORE PREMIUM
   ============================================================ */

#screen-billing
.p84-switch {

    border-color:
        rgba(
            var(--p86-blue),
            .28
        );

    background:

        linear-gradient(
            180deg,
            rgba(9,31,53,.94),
            rgba(5,22,39,.94)
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.03),

        0 7px 24px
        rgba(0,0,0,.13);
}


#screen-billing
.p84-switch button.active {

    background:

        linear-gradient(
            135deg,
            #1c507a,
            #123d61
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.07),

        0 4px 15px
        rgba(
            var(--p86-blue),
            .07
        );
}


/* ============================================================
   ACCOUNT BOX
   ============================================================ */

#screen-billing
.p84-account {

    border-color:
        rgba(
            var(--p86-blue),
            .30
        );

    background:

        radial-gradient(
            260px 120px
            at 0% 0%,
            rgba(
                var(--p86-blue),
                .07
            ),
            transparent 70%
        ),

        rgba(
            7,
            27,
            47,
            .88
        );

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.035),

        0 8px 26px
        rgba(0,0,0,.11);
}


/* ============================================================
   ANIMATED FEATURED CARD
   VERY SLOW — EXPENSIVE, NOT FLASHY
   ============================================================ */

#screen-billing
.p85-pro-featured {

    animation:
        p86-featured-breathe
        7s ease-in-out
        infinite;
}


/* ============================================================
   KEYFRAMES
   ============================================================ */

@keyframes p86-card-shine {

    0% {

        background-position:
            100% 0;

    }

    100% {

        background-position:
            -120% 0;

    }

}


@keyframes p86-featured-breathe {

    0%,
    100% {

        box-shadow:

            inset 0 1px 0
            rgba(255,255,255,.065),

            0 20px 55px
            rgba(0,0,0,.22),

            0 0 30px
            rgba(
                var(--p86-blue),
                .045
            );

    }


    50% {

        box-shadow:

            inset 0 1px 0
            rgba(255,255,255,.08),

            0 22px 60px
            rgba(0,0,0,.24),

            0 0 42px
            rgba(
                var(--p86-blue),
                .09
            );

    }

}


/* ============================================================
   KEEP EVERYTHING INSIDE 900PX SCREEN
   DESCRIPTION IS BIGGER,
   SO WE COMPACT UNUSED SPACING INSTEAD.
   ============================================================ */

@media
(
    min-width: 1200px
)
and
(
    max-height: 900px
) {

    #screen-billing
    .p85-pro-card {

        padding:
            17px 20px 13px;

    }


    #screen-billing
    .p85-card-head {

        min-height:
            175px;

    }


    #screen-billing
    .p85-card-head h2 {

        font-size:
            27px;

    }


    #screen-billing
    .p85-price {

        margin-top:
            13px;

    }


    #screen-billing
    .p85-price strong {

        font-size:
            38px;

    }


    #screen-billing
    .p85-description {

        margin-top:
            10px;

        font-size:
            12.5px;

        line-height:
            1.4;

    }


    #screen-billing
    .p85-features {

        gap:
            7px;

        margin-top:
            11px;

        margin-bottom:
            8px;

    }


    #screen-billing
    .p85-features li {

        font-size:
            11.5px;

        line-height:
            1.22;

    }


    #screen-billing
    .p85-card-bottom {

        padding-top:
            9px;

    }


    #screen-billing
    .p85-card-bottom
    .p84-primary {

        min-height:
            46px;

    }

}


/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media
(
    prefers-reduced-motion:
    reduce
) {

    #screen-billing
    .p85-pro-card,

    #screen-billing
    .p85-pro-featured {

        animation:
            none !important;

        transition:
            none !important;

    }


    #screen-billing
    .p85-pro-card:hover {

        transform:
            none;

    }


    #screen-billing
    .p85-pro-card:hover::before {

        animation:
            none;

    }

}


/*
============================================================
NOYTRIX BILLING V87 SAFE SWITCH
============================================================
*/


#screen-billing
.p87-change-plan {

    width:
        100% !important;

    min-height:
        48px !important;

    margin:
        0 !important;

    display:
        flex !important;

    align-items:
        center !important;

    justify-content:
        center !important;

    border:
        1px solid
        rgba(75, 173, 249, .48)
        !important;

    border-radius:
        11px !important;

    color:
        #ddecff !important;

    background:

        linear-gradient(
            135deg,
            rgba(24, 75, 115, .95),
            rgba(8, 37, 62, .98)
        )
        !important;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.05),

        0 8px 24px
        rgba(0,0,0,.12)
        !important;

    text-decoration:
        none !important;

    font-size:
        12px !important;

    font-weight:
        850 !important;

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease,
        filter .2s ease
        !important;
}


#screen-billing
.p87-change-plan:hover:not(:disabled) {

    transform:
        translateY(-1px);

    border-color:
        rgba(89, 191, 255, .78)
        !important;

    filter:
        brightness(1.07);

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.07),

        0 11px 30px
        rgba(0,0,0,.18),

        0 0 25px
        rgba(73,168,255,.07)
        !important;
}


#screen-billing
.p87-current-plan {

    width:
        100% !important;

    min-height:
        48px !important;

    color:
        #04251a !important;

    background:

        linear-gradient(
            135deg,
            #46e1af,
            #29ca9a
        )
        !important;

    border:
        1px solid
        rgba(49,220,160,.36)
        !important;

    box-shadow:

        inset 0 1px 0
        rgba(255,255,255,.16),

        0 0 25px
        rgba(49,220,160,.07)
        !important;
}



/*
============================================================
NOYTRIX BILLING V88
BIGGER TEXT INSIDE PRO + API CARDS
============================================================
*/


/* ============================================================
   PRO — MAIN DESCRIPTION
   ============================================================ */

#screen-billing
.p85-description {

    color:
        #d2dfed !important;

    font-size:
        14.5px !important;

    font-weight:
        620 !important;

    line-height:
        1.48 !important;

    letter-spacing:
        -.006em !important;
}


/* ============================================================
   PRO — FEATURE LIST
   ============================================================ */

#screen-billing
.p85-features {

    gap:
        9px !important;
}


#screen-billing
.p85-features li {

    color:
        #e3edf7 !important;

    font-size:
        13.2px !important;

    font-weight:
        680 !important;

    line-height:
        1.30 !important;

    padding-left:
        24px !important;
}


#screen-billing
.p85-features li::before {

    font-size:
        15px !important;

    top:
        0 !important;
}


/* ============================================================
   PRO — SMALL PRICE DESCRIPTION
   ============================================================ */

#screen-billing
.p85-equivalent {

    font-size:
        11.5px !important;

    line-height:
        1.25 !important;
}


/* ============================================================
   API — CARD DESCRIPTION
   ============================================================ */

#screen-billing
.p84-plan-head
.p84-description {

    color:
        #d2dfed !important;

    font-size:
        13.5px !important;

    font-weight:
        620 !important;

    line-height:
        1.42 !important;

    letter-spacing:
        -.006em !important;
}


/* ============================================================
   API — FEATURE LIST
   ============================================================ */

#screen-billing
.p84-features {

    gap:
        7px !important;
}


#screen-billing
.p84-features li {

    color:
        #e3edf7 !important;

    font-size:
        12.5px !important;

    font-weight:
        680 !important;

    line-height:
        1.28 !important;

    padding-left:
        22px !important;
}


#screen-billing
.p84-features li::before {

    font-size:
        14px !important;

    top:
        -1px !important;
}


/* ============================================================
   API — KEEP DESCRIPTION AREA CLEAN
   ============================================================ */

#screen-billing
.p84-plan-head {

    min-height:
        188px !important;
}


/* ============================================================
   DESKTOP 900PX HEIGHT
   BIGGER TEXT WITHOUT BREAKING ONE SCREEN
   ============================================================ */

@media
(
    min-width: 1200px
)
and
(
    max-height: 900px
) {

    /* --------------------------
       PRO
       -------------------------- */

    #screen-billing
    .p85-description {

        font-size:
            13.5px !important;

        line-height:
            1.40 !important;

        margin-top:
            9px !important;
    }


    #screen-billing
    .p85-features {

        gap:
            6px !important;

        margin-top:
            10px !important;

        margin-bottom:
            8px !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            12.5px !important;

        line-height:
            1.22 !important;
    }


    #screen-billing
    .p85-card-head {

        min-height:
            170px !important;
    }


    /* --------------------------
       API
       -------------------------- */

    #screen-billing
    .p84-plan-head {

        min-height:
            164px !important;
    }


    #screen-billing
    .p84-plan-head
    .p84-description {

        margin-top:
            8px !important;

        font-size:
            13px !important;

        line-height:
            1.34 !important;
    }


    #screen-billing
    .p84-features {

        gap:
            5px !important;

        margin-top:
            8px !important;

        margin-bottom:
            8px !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            12px !important;

        line-height:
            1.20 !important;
    }

}


/* ============================================================
   VERY LARGE DESKTOP
   ============================================================ */

@media
(
    min-width: 1700px
)
and
(
    min-height: 950px
) {

    #screen-billing
    .p85-description {

        font-size:
            15px !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            13.5px !important;
    }


    #screen-billing
    .p84-plan-head
    .p84-description {

        font-size:
            14px !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            13px !important;
    }

}


/*
============================================================
NOYTRIX BILLING V89
CARD TEXT 1.5X HARD OVERRIDE
============================================================
*/


/* ============================================================
   PRO DESCRIPTION
   ============================================================ */

#screen-billing
.p85-description {

    font-size:
        20px !important;

    line-height:
        1.30 !important;

    font-weight:
        650 !important;

    color:
        #dbe7f3 !important;

    letter-spacing:
        -.012em !important;

    margin-top:
        10px !important;
}


/* ============================================================
   PRO FEATURE TEXT
   ============================================================ */

#screen-billing
.p85-features {

    gap:
        7px !important;

    margin-top:
        10px !important;

    margin-bottom:
        8px !important;
}


#screen-billing
.p85-features li {

    font-size:
        18px !important;

    line-height:
        1.18 !important;

    font-weight:
        680 !important;

    color:
        #e6eff8 !important;

    padding-left:
        27px !important;

    letter-spacing:
        -.012em !important;
}


#screen-billing
.p85-features li::before {

    font-size:
        18px !important;

    line-height:
        1 !important;

    top:
        2px !important;
}


/* ============================================================
   PRO EFFECTIVE PRICE / SMALL DESCRIPTION
   ============================================================ */

#screen-billing
.p85-equivalent {

    font-size:
        15px !important;

    line-height:
        1.15 !important;

    font-weight:
        800 !important;

    margin-top:
        6px !important;
}


/* ============================================================
   API DESCRIPTION
   ============================================================ */

#screen-billing
.p84-plan-head
.p84-description {

    font-size:
        19px !important;

    line-height:
        1.27 !important;

    font-weight:
        650 !important;

    color:
        #dbe7f3 !important;

    letter-spacing:
        -.012em !important;

    margin-top:
        8px !important;
}


/* ============================================================
   API FEATURES
   ============================================================ */

#screen-billing
.p84-features {

    gap:
        6px !important;

    margin-top:
        8px !important;

    margin-bottom:
        8px !important;
}


#screen-billing
.p84-features li {

    font-size:
        18px !important;

    line-height:
        1.16 !important;

    font-weight:
        680 !important;

    color:
        #e6eff8 !important;

    padding-left:
        27px !important;

    letter-spacing:
        -.012em !important;
}


#screen-billing
.p84-features li::before {

    font-size:
        18px !important;

    top:
        1px !important;
}


/* ============================================================
   MAKE MORE ROOM INSIDE PRO CARDS
   ============================================================ */

#screen-billing
.p85-card-head {

    min-height:
        185px !important;
}


#screen-billing
.p85-pro-card {

    padding-top:
        16px !important;

    padding-bottom:
        12px !important;
}


#screen-billing
.p85-card-bottom {

    padding-top:
        7px !important;
}


#screen-billing
.p85-card-bottom
.p84-primary,

#screen-billing
.p85-card-bottom
.p84-secondary {

    min-height:
        43px !important;
}


/* ============================================================
   MAKE MORE ROOM INSIDE API CARDS
   ============================================================ */

#screen-billing
.p84-plan {

    padding-top:
        16px !important;

    padding-bottom:
        12px !important;
}


#screen-billing
.p84-plan-head {

    min-height:
        190px !important;
}


#screen-billing
.p84-plan-bottom {

    margin-top:
        auto !important;
}


/* ============================================================
   YOUR 1600x900 / 1680x900 CLASS SCREEN
   FORCE LARGE TEXT THERE TOO
   ============================================================ */

@media
(
    min-width: 1200px
)
and
(
    max-height: 920px
) {

    /* PRO */

    #screen-billing
    .p85-description {

        font-size:
            20px !important;

        line-height:
            1.27 !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            18px !important;

        line-height:
            1.14 !important;
    }


    #screen-billing
    .p85-features {

        gap:
            5px !important;

        margin-top:
            8px !important;
    }


    #screen-billing
    .p85-card-head {

        min-height:
            178px !important;
    }


    /* API */

    #screen-billing
    .p84-plan-head
    .p84-description {

        font-size:
            19px !important;

        line-height:
            1.23 !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            18px !important;

        line-height:
            1.13 !important;
    }


    #screen-billing
    .p84-features {

        gap:
            4px !important;

        margin-top:
            7px !important;
    }


    #screen-billing
    .p84-plan-head {

        min-height:
            184px !important;
    }

}


/* ============================================================
   WIDER DESKTOP
   ============================================================ */

@media
(
    min-width: 1700px
)
and
(
    min-height: 950px
) {

    #screen-billing
    .p85-description {

        font-size:
            21px !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            19px !important;
    }


    #screen-billing
    .p84-plan-head
    .p84-description {

        font-size:
            20px !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            19px !important;
    }

}


/*
============================================================
NOYTRIX BILLING V88
BIGGER TEXT INSIDE PRO + API CARDS
============================================================
*/


/* ============================================================
   PRO — MAIN DESCRIPTION
   ============================================================ */

#screen-billing
.p85-description {

    color:
        #d2dfed !important;

    font-size:
        14.5px !important;

    font-weight:
        620 !important;

    line-height:
        1.48 !important;

    letter-spacing:
        -.006em !important;
}


/* ============================================================
   PRO — FEATURE LIST
   ============================================================ */

#screen-billing
.p85-features {

    gap:
        9px !important;
}


#screen-billing
.p85-features li {

    color:
        #e3edf7 !important;

    font-size:
        13.2px !important;

    font-weight:
        680 !important;

    line-height:
        1.30 !important;

    padding-left:
        24px !important;
}


#screen-billing
.p85-features li::before {

    font-size:
        15px !important;

    top:
        0 !important;
}


/* ============================================================
   PRO — SMALL PRICE DESCRIPTION
   ============================================================ */

#screen-billing
.p85-equivalent {

    font-size:
        11.5px !important;

    line-height:
        1.25 !important;
}


/* ============================================================
   API — CARD DESCRIPTION
   ============================================================ */

#screen-billing
.p84-plan-head
.p84-description {

    color:
        #d2dfed !important;

    font-size:
        13.5px !important;

    font-weight:
        620 !important;

    line-height:
        1.42 !important;

    letter-spacing:
        -.006em !important;
}


/* ============================================================
   API — FEATURE LIST
   ============================================================ */

#screen-billing
.p84-features {

    gap:
        7px !important;
}


#screen-billing
.p84-features li {

    color:
        #e3edf7 !important;

    font-size:
        12.5px !important;

    font-weight:
        680 !important;

    line-height:
        1.28 !important;

    padding-left:
        22px !important;
}


#screen-billing
.p84-features li::before {

    font-size:
        14px !important;

    top:
        -1px !important;
}


/* ============================================================
   API — KEEP DESCRIPTION AREA CLEAN
   ============================================================ */

#screen-billing
.p84-plan-head {

    min-height:
        188px !important;
}


/* ============================================================
   DESKTOP 900PX HEIGHT
   BIGGER TEXT WITHOUT BREAKING ONE SCREEN
   ============================================================ */

@media
(
    min-width: 1200px
)
and
(
    max-height: 900px
) {

    /* --------------------------
       PRO
       -------------------------- */

    #screen-billing
    .p85-description {

        font-size:
            13.5px !important;

        line-height:
            1.40 !important;

        margin-top:
            9px !important;
    }


    #screen-billing
    .p85-features {

        gap:
            6px !important;

        margin-top:
            10px !important;

        margin-bottom:
            8px !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            12.5px !important;

        line-height:
            1.22 !important;
    }


    #screen-billing
    .p85-card-head {

        min-height:
            170px !important;
    }


    /* --------------------------
       API
       -------------------------- */

    #screen-billing
    .p84-plan-head {

        min-height:
            164px !important;
    }


    #screen-billing
    .p84-plan-head
    .p84-description {

        margin-top:
            8px !important;

        font-size:
            13px !important;

        line-height:
            1.34 !important;
    }


    #screen-billing
    .p84-features {

        gap:
            5px !important;

        margin-top:
            8px !important;

        margin-bottom:
            8px !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            12px !important;

        line-height:
            1.20 !important;
    }

}


/* ============================================================
   VERY LARGE DESKTOP
   ============================================================ */

@media
(
    min-width: 1700px
)
and
(
    min-height: 950px
) {

    #screen-billing
    .p85-description {

        font-size:
            15px !important;
    }


    #screen-billing
    .p85-features li {

        font-size:
            13.5px !important;
    }


    #screen-billing
    .p84-plan-head
    .p84-description {

        font-size:
            14px !important;
    }


    #screen-billing
    .p84-features li {

        font-size:
            13px !important;
    }

}