/* =========================================================
   PRICING PAGE
   ========================================================= */

.pricing-page .section{
    padding:55px 0;
}

.pricing-page .hero{
    padding:50px 0 40px;
}

.pricing-page .hero-grid{
    gap:30px;
}

.pricing-page .section-title{
    margin-bottom:42px;
}

.pricing-page .section-title h2{
    font-size:42px;
}

.pricing-page .section-title p{
    font-size:18px;
    max-width:760px;
}

.compact-cards{
    gap:20px;
}

.compact-highlight{
    margin-top:28px;
}

/* =========================================================
   PRICING CARDS
   ========================================================= */

.pricing-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(260px,320px));

    justify-content:center;

    gap:22px;

    margin-bottom:40px;
}

.pricing-card{

    position:relative;

    background:white;

    border-radius:18px;

    padding:26px 24px;

    border:1px solid #e5e7eb;

    box-shadow:
        0 10px 28px rgba(0,0,0,.05);

    transition:.18s ease;
}

.pricing-card:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(0,0,0,.08);
}

.featured-plan{

    border:2px solid #2563eb;
}

.featured-badge{

    position:absolute;

    top:-12px;
    right:18px;

    background:#2563eb;
    color:white;

    padding:7px 12px;

    border-radius:999px;

    font-size:10px;
    font-weight:700;

    letter-spacing:.5px;
}

.pricing-name{

    font-size:28px;
    font-weight:800;

    color:#172033;

    margin-bottom:8px;
}

.pricing-price{

    font-size:38px;
    font-weight:800;

    color:#2563eb;

    margin-bottom:6px;
}

.pricing-subtitle{

    color:#6b7280;

    font-size:15px;

    margin-bottom:20px;
}

.pricing-features{

    list-style:none;

    padding:0;
    margin:0 0 24px 0;
}

.pricing-features li{

    padding:7px 0;

    border-bottom:1px solid #f1f5f9;

    color:#374151;

    font-size:14px;
}

.pricing-button{

    width:100%;

    justify-content:center;

    padding:12px 16px;

    font-size:14px;
}

/* =========================================================
   RENEWALS
   ========================================================= */

.renewals-title{

    text-align:center;

    font-size:28px;
    font-weight:800;

    color:#172033;

    margin-bottom:24px;
}

.renewals-grid{

    display:grid;

    grid-template-columns:
        repeat(auto-fit,minmax(240px,280px));

    justify-content:center;

    gap:20px;
}

.renewal-card{

    background:white;

    border-radius:16px;

    padding:22px;

    border:1px solid #e5e7eb;

    text-align:center;

    box-shadow:
        0 8px 24px rgba(0,0,0,.04);
}

.renewal-name{

    font-size:22px;
    font-weight:700;

    color:#172033;

    margin-bottom:8px;
}

.renewal-price{

    font-size:30px;
    font-weight:800;

    color:#2563eb;

    margin-bottom:10px;
}

.renewal-desc{

    color:#6b7280;

    font-size:14px;

    margin-bottom:18px;
}

.renewal-button{

    width:100%;

    justify-content:center;
}

/* =========================================================
   FAQ
   ========================================================= */

.faq-list{

    display:flex;
    flex-direction:column;

    gap:18px;

    max-width:900px;
    margin:auto;
}

.faq-item{

    background:white;

    border-radius:18px;

    padding:24px 28px;

    border:1px solid #e5e7eb;

    box-shadow:
        0 8px 24px rgba(0,0,0,.04);
}

.faq-item h3{

    font-size:22px;

    margin-bottom:10px;

    color:#172033;
}

.faq-item p{

    color:#4b5563;

    font-size:16px;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:768px){

.pricing-page .section-title h2{
    font-size:34px;
}

.pricing-name{
    font-size:24px;
}

.pricing-price{
    font-size:34px;
}

.featured-plan{
    transform:none;
}

}