.pricing-header { text-align: center; margin-bottom: 64px; max-width: 600px; margin: 0 auto; width: 100%; }
.pricing-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; justify-content: center; align-items: stretch; flex-wrap: wrap; position: relative; z-index: 1; padding-top: 30px; }
.pricing-card.recommended { background-color: #F3FAFB; }
.pricing-card { background-color: #ffffff; border: 2px solid var( --e-global-color-primary ); border-radius: 30px; padding: 40px 24px; flex: 1; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; }
.recommended-badge { position: absolute; top: -30px; left: 0; right: 0; background-color: var( --e-global-color-primary ); color: #ffffff; border-radius: 30px 30px 0 0; text-align: center; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 5px 10px 70px; width: calc(100% + 4px); margin-left: -2px; z-index: -1; }
.star-icon { width: 16px; height: 16px; }
.recommended-icon { width: 16px; height: 16px; display: inline-flex; align-items: center; justify-content: center; }
.recommended-icon svg,
.recommended-icon i { width: 16px; height: 16px; font-size: 16px; }
.card-content { display: flex; flex-direction: column; height: 100%; gap: 20px; }
.card-content .button-with-arrow.blue-btn { margin-top: auto; width: 100%; }
.pricing-cards .pricing-card .plan-name { font-family: var(--e-global-font-family-secondary); font-size: 16px; font-weight: 700; color: var( --e-global-color-primary ); margin-bottom: 0; text-transform: uppercase; }
.price-section { margin: 10px 0; display: flex; align-items: center; gap: 2px; }
.price { font-size: clamp(28px, 6vw, 32px); font-weight: 700; color: var( --e-global-color-primary ); line-height: 1; font-family: var(--e-global-font-family); font-weight: 400; }
.period { font-size: 16px; font-weight: 600; color: var( --e-global-color-primary ); margin-left: 4px; }
.pricing-container .pricing-card .plan-details p { font-size: 18px; margin-bottom: 10px; } 
.plan-details strong { font-weight: 700; color: var( --e-global-color-primary ); }
.pricing-footer { text-align: center; max-width: 600px; margin: 0 auto; }
.pricing-footer p { font-size: 16px; line-height: 1.6; text-align: center; }
.pricing-footer strong { font-weight: 700; color: var( --e-global-color-primary ); }
.pricing-footer p a { font-size: 14px; font-weight: 400; text-decoration: underline; transition: color 0.3s ease; }
.pricing-footer p a:hover { text-decoration: none; }
.pricing-section-title { padding-top: 150px; }
.only-content-section { padding-bottom: 150px; }
@media (max-width: 1300px) {
    .pricing-cards { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
}

@media (max-width: 1123px){
    .pricing-card { width: 100%; flex: inherit; }
    .pricing-card.recommended { margin-top: 28px;}
    .pricing-section-title { padding-top: 100px; }
    .only-content-section { padding-bottom: 100px; }
}
@media (max-width: 767px) {
    .pricing-card .button-with-arrow { max-width: 230px; width: 100%; margin: 0 auto; }
    .pricing-card { padding: 40px 20px; }
    .pricing-header { margin-bottom: 20px; }
    .pricing-section-title { padding-top: 70px; }
    .only-content-section { padding-bottom: 70px; }
    .pricing-cards { grid-template-columns: 1fr; }
}