.hero-section{
    padding-bottom: 0;
}

.pricing-section{
    padding-top: 0;
}

.pricing-card{
    display: flex;
    align-items: start;
    gap: var(--sp-lg);
    justify-content: center;
    align-items: center;
    max-width: var(--br-xl);
    margin: 0 auto;
}

.pricing-group{
    display: flex;
    width: 100%;
    flex-direction: column;
    gap: var(--sp-lg);
}

.pricing-toggle-group{
    display: flex;
    align-items: center;
    max-width: fit-content;
    width: 100%;
    margin: 0 auto;
}

.pricing-toggle-group .pricing-toggle-list{
    display: flex;
    align-items: center;
    padding: var(--sp-s);
    border-radius: var(--radius-rounded);
    border: 1px solid var(--border-soft);
    background-color: var(--surface-brand-soft);
    gap: var(--sp-s);
}

.pricing-toggle-list .badge{
    cursor: pointer;
}

.pricing-price-detail{
    display: flex;
    align-items: flex-end;
    gap: var(--sp-s);
}

.pricing-price-detail .currency{
    align-self: flex-start;
}

.pricing-price-group{
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
}

.pricing-card-list{
    display: flex;
    align-items: stretch;
    gap: var(--sp-sm);
    flex-wrap: wrap;
    flex: 1;
}

.pricing-card-list .pricing-card-item{
    border: 1px solid var(--border-soft);
    display: flex;
    flex-direction: column;
    padding: 14px 18px;
    gap: var(--sp-sm);
    border-radius: var(--radius-lg);
    flex: 0 0 calc(33.33% - var(--sp-sm));
}

.pricing-card-list .pricing-card-item.is-popular{
    background-color: var(--surface-brand);
}

.pricing-card-item.is-popular .text{
    color: var(--base-white);
}

.pricing-card-item.is-popular .pricing-price-note .price-old-note,
.pricing-price-note .price-old-note{
    text-decoration: line-through;
    color: var(--text-ghost);
}

.pricing-price-note{
    display: flex;
    align-items: center;
    gap: var(--sp-s);
}

.pricing-price-note .price-note{
    font-weight: 700;
}

.pricing-detail-group{
    display: flex;
    align-items: start;
    gap: var(--sp-sm);
    justify-content: space-between;
    flex-wrap: wrap;
    width: 100%;
}

.pricing-card-item.is-popular .pricing-detail-group .pricing-detail{
    flex: 0 0 calc(60% - var(--sp-sm));
}

.pricing-card-item.is-popular .pricing-detail-group .pricing-popular-badge{
    flex: 0 0 calc(40% - var(--sp-sm));
    display: flex;
    justify-content: end;
}

.pricing-card-list .pricing-card-item.enterprise{
    flex: 0 0 calc(100%);
    flex-direction: row;
    align-items: center;
    gap: var(--sp-lg);
    background-color: #323232;
}

.pricing-card-list .pricing-card-item.enterprise .text{
    color: var(--base-white);
}

.pricing-cta-group{
    margin-top: auto;
}

.pricing-cta-group .cta-group{
    width: 100%;
    max-width: 100%;
}

.pricing-cta-group .cta-group .button{
    width: 100%;
    max-width: 100%;
}

.pricing-cta-group .cta-group .button.btn-secondary.dark{
    border-color: var(--base-white);
    background-color: var(--base-white);
    text-decoration: none;
}

.pricing-cta-group .cta-group .button.btn-secondary.dark .text{
    color: var(--text-primary);
}

.pricing-highlight-value-list{
    display: flex;
    flex-direction: column;
    gap: var(--sp-sm);
    margin-top: var(--sp-sm);
    padding-top: var(--sp-sm);
    padding-bottom: var(--sp-sm);
    border-top: 1px solid var(--border-soft);
}

.pricing-highlight-value-list .badge.badge-dark:hover .text{
    color: var(--base-black);
}

.pricing-highlight-value-item .highlight-value-title{
    font-weight: 500;
}

.pricing-highlight-value-item .highlight-value-title b{
    font-weight: 600;
}

.pricing-card-item.enterprise .pricing-detail{
    flex: 0 0 calc(70% - var(--sp-lg));
}

.pricing-card-item.enterprise .pricing-price-group{
    flex: 0 0 calc(30% - var(--sp-lg));
}

.pricing-card-item.enterprise .pricing-detail .pricing-highlight-value-list{
    flex-direction: row;
    flex-wrap: wrap;
    margin-top: var(--sp-md);
    padding-top: var(--sp-md);
}

.pricing-card.pricing-card-table{
    flex-direction: column;
    align-items: start;
}

.pricing-table-group{
    width: 100%;
}

.pricing-table-group .pricing-comparison-table{
    width: 100%;
}

.pricing-comparison-table .comparison-sticky{
    position: sticky;
    background-color: var(--surface-brand-soft);
}

.plan-price{
    display: flex;
    flex-wrap: wrap;
    align-items: start;
    gap: var(--sp-s);
}

.plan-price .plan-name{
    flex: 0 0 calc(50% - var(--sp-s));
    text-align: start;
}

.plan-price .plan-price-detail{
    flex: 0 0 calc(50% - var(--sp-s));
    text-align: start;
    display: flex;
    justify-content: end;
    flex-direction: row-reverse;
}

.plan-price-detail .plan-note{
    text-decoration: line-through;
}

.plan-cta-group{
    margin-top: var(--sp-sm);
}

.plan-cta-group .cta-group{
    width: 100%;
}

.plan-cta-group .cta-group .button{
    max-width: 100%;
}

.pricing-table-toggle-wrap{
    margin-top: var(--sp-sm);
}

@media (max-width: 991px){
	
	.pricing-card-list{
		flex-direction: column;
	}
	
	.pricing-card-list .pricing-card-item.is-popular{
		order: 1;
	}
	
	.pricing-card-list .pricing-card-item{
		order: 2;
	}
	
	.pricing-card-list .pricing-card-item.enterprise{
		flex-direction: column-reverse;
		align-items: start;
	}
	
	.pricing-card-item.enterprise .pricing-price-group {
		flex: 0 0 calc(100%);
		width: 100%;
	}
	
	.pricing-card-item.enterprise .pricing-detail{
		flex: 0 0 calc(100%);
	}
	
    .pricing-table-group{
        width: 100%;
        overflow-x: auto;
        overflow-y: visible;
        -webkit-overflow-scrolling: touch;
    }

    .pricing-table-group .pricing-comparison-table{
        width: 100%;
        min-width: 1280px;
        border-collapse: separate;
        border-spacing: 0;
    }

    .pricing-comparison-table .comparison-sticky{
        position: static;
    }
	
	.hero .hero-detail{
		align-items: center;
	}
	
	.head-detail-group .hero-title .text, .head-detail-group .hero-desc .text{
		text-align: center;
	}
}