@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap");

.zpiframe-container {height: 700px}
@media screen and (max-width: 600px) {
  .zpiframe-container {height: 200px}
}


    

    .mcs-pricing {
        font-family: open sans;
        font-weight: 400;
        color: #1c1c22;
        padding: 18px;
    }

    .mcs-pricing--wrap {
        max-width: 1080px;
        display: flex;
        margin: auto;
        flex-direction: column
    }

    .mcs-pricing--table {
        display: flex;
        justify-content: space-between;
        margin-bottom: 24px
    }

    .mcs-pricing--tier {
        background: #fff;
        box-shadow: 0 4px 12px rgba(0, 0, 0, .05);
        border-radius: 8px;
        padding: 24px;
        width: 24%;
        box-sizing: border-box;
        display: flex;
        flex-direction: column;
        position: relative;
        border: 1px solid transparent;
    }
    
    .mcs-tier--content {
        flex: 1;
        display: flex;
        flex-direction: column;
    }

    .mcs-tier--heading {
        font-size: 24px;
        line-height: 36px;
        font-weight: 600;
        letter-spacing: -.02em;
        margin-bottom: 4px
    }

    .mcs-tier--subheading {
        font-size: 15px;
        line-height: 160%;
        color: #69698c;
        margin-bottom: 16px;
        min-height: 48px;
    }

    .mcs-tier--pricing {
        display: flex;
        flex-direction: column;
        margin-bottom: 16px;
        align-items: baseline;
    }

    .mcs-tier--mcs-pricing-price {
        font-size: 36px;
        letter-spacing: -.02em;
        line-height: 44px;
        margin-right: 6px;
        height: 44px;
        white-space: nowrap;
    }

    .mcs-tier--mcs-pricing-term {
        font-size: 14px;
        line-height: 160%;
        color: #69698c;
        margin-bottom: 16px;
    }

    .mcs-btn {
        border: 1px solid transparent;
        border-radius: 6px;
        padding: 12px 36px;
        display: inline-flex;
        align-items: center;
        font-weight: 600;
        font-size: 14px;
        cursor: pointer;
        text-decoration: none;
        box-shadow: 3px 3px 5px rgba(30, 144, 255, 0);
        transition: .2s all;
    }

    .mcs-btn--regular {
        border-color: #1e90ff;
        color: #1e90ff;
    }

    .mcs-tier--btn {
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
        margin-bottom: 48px;
    }

    .mcs-btn:hover {
        box-shadow: 1px 1px 5px rgba(30, 144, 255, .5);
        border-color: #1e90ff;
        color: #1e90ff;
    }

    .mcs-tier--list-heading {
        font-size: 16px;
        line-height: 20px;
        font-weight: 600;
        color: #1c1c22;
    }

    .mcs-tier--list {
        margin: 12px 0;
        flex: 1;
    }

    .mcs-tier--item {
        font-size: 15px;
        line-height: 25px;
        color: #69698c;
        margin: 6px 0;
        padding: 0 0 0 18px;
        position: relative;
    }

    .mcs-tier--item:before {
        content: '';
        display: block;
        width: 6px;
        height: 6px;
        background: #69698c;
        border-radius: 100%;
        position: absolute;
        top: 9px;
        left: 0;
    }

    .mcs-tier--item a {
        color: #1e90ff;
        text-decoration: none;
    }

    .mcs-link {
        display: inline-flex;
        align-items: center;
        font-weight: 600;
        font-size: 14px;
        color: #1e90ff;
        cursor: pointer;
        text-decoration: none;
        padding: 4px 0;
        position: relative;
    }

    .mcs-tier--more {
        margin: 24px auto 0 auto;
        color: #1e90ff;
    }

    .mcs-link:after {
        content: '';
        display: block;
        position: absolute;
        width: 0;
        height: 2px;
        background: 0 0;
        bottom: 0;
        transition: .2s all;
        color: #1e90ff;
    }

    .mcs-link:hover {
        color: #1e90ff;
    }

    .mcs-link:hover:after {
        background: #1e90ff;
        color: #1e90ff;
        width: 100%;
    }

@media (max-width: 991px) {
        .mcs-pricing--table {
            flex-direction: column;
            gap: 24px;
        }
        .mcs-pricing--tier {
            width: 100%;
        }
    }