@import "variables-pc.css";

.navigator .menu .price-link {
    border-bottom: 2px #FFFFFF solid;
}

.navigator, .navigator .title, .menu-item {
    color: var(--color-text-inverse);
}

.promo-hero {
    border: 0 solid rgba(173, 173, 173, 0.10);
    background-image: url(../images/recharge/bg1.webp), url(../images/recharge/bg1.png);
    background-color: #221b14;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding-bottom: var(--spacing-64);
}

.promo-content {
    width: 100%;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
}

.promo-title {
    color: #fbd5a9;
    font-weight: var(--font-weight-bold);
     font-size: var(--font-size-7xl);
    line-height: var(--line-height-tight);
    margin: var(--spacing-32) 0 0 0;
}


.promo-price-unit {
    color: #fae8ca;
}


.promo-price-number {
    color: #fae8ca;
    font-size: 5.625rem;
}


.promo-subtitle {
    color: var(--color-text-inverse);
    text-align: justify;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-4xl);
}


.promo-cta-btn {
    background-image: linear-gradient(90deg, #FFCFA1 0%, #E9C29E 100%);
    color: #050302;
    text-align: justify;
    font-weight: var(--font-weight-bold);
    border-radius: var(--spacing-2_5);
    padding: var(--spacing-5) var(--spacing-20);
    font-size: var(--font-size-xl);
}

.promo-cta-btn:hover {
    background-image: linear-gradient(90deg, #FCD9BB 0%, #F2D8C0 100%);
}


.main {
    width: 100%;
}


.commodity-container {
    display: flex;
    flex-flow: row;
    align-items: flex-start;
    justify-content: center;
    margin-top: -9.375rem;
    gap: var(--spacing-5);
}


.pricing-section {
    display: flex;
    flex-flow: column;
    background-image: url(../images/recharge/bg2.webp), url(../images/recharge/bg2.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    width: 21.5%;
    padding: var(--spacing-14) var(--spacing-8);
}


.pricing-section-title {
    color: #fbd5a9;
    font-weight: var(--font-weight-bold);
        font-size: var(--font-size-4xl);
    margin: 0 0 var(--spacing-5) 0;
}


.pricing-plans {
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-3_5);
}


.pricing-plan {
    background-image: linear-gradient(180deg, #62626b 0%, #414660 100%);
    box-shadow: 0 1px 6px 0 #292a33;
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 88%;
    border-radius: var(--border-radius-2xl);
    padding: var(--spacing-8) var(--spacing-6);
}


.pricing-plan:hover {
    background-image: linear-gradient(180deg, #848493 0%, #565d81 100%);
}


.plan-title-group {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: flex-start;
}


.plan-name {
    color: #f7e4b9;
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
}


.plan-tag {
    color: #cac7bf;
    text-align: center;
    font-weight: var(--font-weight-extralight);
     font-size: var(--font-size-md);
}


.plan-pricing {
    color: #f7e4b9;
    text-align: justify;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
}


.pricing-plan .plan-pricing {
    display: flex;
    align-items: baseline;
    justify-content: center;
    padding-top: var(--spacing-2_5);
}


.pricing-plan-featured {
    width: 100%;
    background-image: linear-gradient(180deg, #59586c 0%, #272637 100%);
     border-radius: var(--border-radius-2xl);
    padding-bottom: var(--spacing-6);
    margin-bottom: var(--spacing-1_5);
}


.pricing-plan-featured:hover {
    background-image: linear-gradient(180deg, #68677f 0%, #2f2e43 100%);
}


.pricing-plan-featured .plan-header {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    background-image: url(../images/recharge/bg4.webp), url(../images/recharge/bg4.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
        gap: var(--spacing-2_5);
    padding: var(--spacing-7) var(--spacing-6);
}


.pricing-plan-featured .plan-badge {
    color: #221b14;
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-3xl);
}


.pricing-plan-featured .plan-title-group {
    display: flex;
    flex-flow: row;
    justify-content: space-between;
    width: 100%;
}


.plan-header .plan-name, .plan-header .plan-tag {
    color: #4f4d57;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-xl);
}


.pricing-plan-featured .plan-pricing {
    display: flex;
    flex-flow: column;
    align-items: center;
}


.pricing-plan-featured .price-amount {
    color: #f7e4b9;
    text-align: justify;
    font-weight: var(--font-weight-bold);
        font-size: var(--font-size-xl);
    margin: 0 0 var(--spacing-2_5) 0;
}


.pricing-plan-featured .price-condition {
    color: #ff6b6b;
    text-align: justify;
    font-weight: var(--font-weight-normal);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-1_5);
}


.pricing-plan-featured .price-description {
    color: var(--color-text-inverse);
    text-align: justify;
    font-weight: var(--font-weight-normal);
    white-space: nowrap;
    font-size: var(--font-size-xs);
}


.benefits-section {
    display: flex;
    flex-flow: column;
    justify-content: flex-start;
    align-items: flex-start;
    background-image: url(../images/recharge/bg3.webp), url(../images/recharge/bg3.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    padding: var(--spacing-16) var(--spacing-7);
}


.benefits-section-title {
    color: #f3cba7;
    text-align: center;
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-4xl);
    margin: 0 0 var(--spacing-5) 0;
}


.benefits-content .benefits-header {
    background: #282a37;
    text-align: center;
    color: var(--color-text-inverse);
    font-weight: var(--font-weight-bold);
    border-radius: 1.25rem 1.25rem 0 0;
    font-size: var(--font-size-xl);
    padding: var(--spacing-6) 21.938rem;
}


.benefits-table {
    display: flex;
    background: var(--color-bg-primary);
    width: 100%;
    border-radius: 0 0 1.25rem 1.25rem;
}


.table-header {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    white-space: nowrap;
    padding-left: var(--spacing-12);
    padding-right: var(--spacing-12);
}


.table-row-wrapper {
    display: flex;
    flex-flow: row;
    width: 100%;
    gap: var(--spacing-1_5);
}


.table-column {
    color: #221b14;
    text-align: center;
    font-weight: var(--font-weight-bold);
    white-space: nowrap;
    font-size: var(--font-size-md);
    line-height: 4.55;
}


.table-row {
    display: flex;
    flex-flow: column;
    flex: 1;
    padding-left: var(--spacing-8);
    padding-right: var(--spacing-8);
}


.table-row.table-row-free, .table-row.table-row-pro {
    background: #ececec;
}


.table-row.table-row-team, .table-row.table-row-enterprise {
    background: #f7f7f7;
    border-radius: 0 0 1.25rem 0;
}


.last-section {
    color: #000000;
    background-image: none;
    background-color: #fbfbfb;
    margin-top: var(--spacing-24);
    line-height: var(--line-height-loose);
}


.product-info-container .img-container {
    background-image: url(../images/common/logo.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
}


.wechatImg-container {
    background-repeat: no-repeat;
    background-image: url(../images/common/vx2.webp), url(../images/common/vx2.png);
    background-size: 100% 100%;
}


.zhihuImg-container {
    background-repeat: no-repeat;
    background-image: url(../images/common/zhihu2.webp), url(../images/common/zhihu2.png);
    background-size: 100% 100%;
}


.footer a {
    color: #000000;
}

.price-number {
    font-size: var(--font-size-5xl);
}

.pricing-plan-featured .price-number {
    font-size: var(--font-size-8xl);
}


.table-header, .table-row {
    padding-top: var(--spacing-3);
    padding-bottom: var(--spacing-6);
}

.benefit-icon {
    width: 1rem;
    height: 0.75rem;
}

.product-info-wrapper {
    border-bottom: 1px solid #000000;
}