/* ============================================================
    HERO
============================================================ */

.hero{

    max-width:760px;

    margin:0 auto 60px;

    text-align:center;

}

.hero-badge{

    display:inline-flex;

    align-items:center;

    gap:8px;

    padding:8px 18px;

    border-radius:999px;

    background:rgba(37,99,235,.08);

    color:var(--primary);

    font-size:.85rem;

    font-weight:700;

    margin-bottom:22px;

}

.hero h1{

    font-size:clamp(2rem,5vw,3rem);

    line-height:1.1;

    margin-bottom:18px;

}

.hero-text{

    max-width:620px;

    margin:0 auto;

    color:var(--text-secondary);

    font-size:1.05rem;

    line-height:1.75;

}

.hero-highlights{

    display:flex;

    justify-content:center;

    flex-wrap:wrap;

    gap:14px;

    margin-top:32px;

}

.hero-highlight{

    padding:12px 18px;

    border-radius:999px;

    background:#fff;

    border:1px solid var(--gray-200);

    box-shadow:0 4px 12px rgba(0,0,0,.04);

    font-size:.9rem;

    font-weight:600;

}

@media(max-width:768px){

    .hero{

        margin-bottom:48px;

    }

    .hero-highlights{

        flex-direction:column;

        align-items:stretch;

    }

    .hero-highlight{

        text-align:center;

    }

}

/* ============================================================
    EMAIL STATUS
============================================================ */

.email-status-card{

    display:flex;

    align-items:center;

    gap:18px;

    padding:22px;

    margin:0 auto 42px;

    border-radius:16px;

    border:1px solid var(--gray-200);

    background:#fff;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

.email-status-icon{

    width:56px;

    height:56px;

    border-radius:50%;

    display:flex;

    align-items:center;

    justify-content:center;

    font-size:1.5rem;

    font-weight:700;

    flex-shrink:0;

}

.email-status-content{

    flex:1;

}

.email-status-content h3{

    margin:0 0 6px;

    font-size:1.1rem;

}

.email-status-content p{

    margin:0;

    color:var(--text-secondary);

    word-break:break-word;

}

.email-warning{

    border-color:#fbbf24;

    background:#fffbeb;

}

.email-warning .email-status-icon{

    background:#fef3c7;

}

.email-success{

    border-color:#bbf7d0;

    background:#f0fdf4;

}

.email-success .email-status-icon{

    background:#dcfce7;

    color:#15803d;

}

@media (max-width:768px){

    .email-status-card{

        flex-direction:column;

        text-align:center;

    }

    .email-status-content{

        width:100%;

    }

    .email-status-card button{

        width:100%;

    }

}

/* ============================================================
    PENDING VERIFICATIONS
============================================================ */

.pending-verifications{

    margin-bottom:48px;

}

.pending-header{

    text-align:center;

    margin-bottom:24px;

}

.pending-header h2{

    margin-bottom:8px;

}

.pending-header p{

    color:var(--text-secondary);

    max-width:680px;

    margin:0 auto;

    line-height:1.6;

}

.pending-grid{

    display:grid;

    gap:22px;

}

.pending-card{

    position:relative;

    padding:24px;

    background:#fff;

    border:1px solid var(--gray-200);

    border-radius:18px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

    display:flex;

    flex-direction:column;

    gap:18px;

}

.pending-badge{

    align-self:flex-start;

    padding:6px 12px;

    border-radius:999px;

    background:#fff7ed;

    color:#c2410c;

    font-size:.78rem;

    font-weight:700;

}

.pending-main{

    display:flex;

    justify-content:space-between;

    align-items:center;

    gap:20px;

}

.pending-pages{

    font-size:1.45rem;

    font-weight:700;

}

.pending-amount{

    font-size:1.5rem;

    font-weight:800;

    color:var(--primary);

}

.pending-meta{

    display:grid;

    grid-template-columns:repeat(2,1fr);

    gap:18px;

    padding-top:18px;

    border-top:1px solid var(--gray-200);

}

.pending-meta strong{

    display:block;

    margin-bottom:4px;

    font-size:.85rem;

    color:var(--text-secondary);

}

.pending-meta span{

    font-family:monospace;

    font-size:.95rem;

    word-break:break-all;

}

.verify-payment{

    width:100%;

    min-height:46px;

    margin-top:6px;

}

@media (max-width:768px){

    .pending-main{

        flex-direction:column;

        align-items:flex-start;

    }

    .pending-meta{

        grid-template-columns:1fr;

    }

}

/* ============================================================
    SECTIONS
============================================================ */

.section {

    margin-bottom: 56px;

}

.section h2 {

    text-align: center;

    margin-bottom: 24px;

}

/* ==========================
   Currency Tabs
   ========================== */

.currency-tabs {
    display: inline-flex;

    gap: .35rem;

    padding: .3rem;

    margin: 0 auto 1.5rem;

    background: #F3F4F6;

    border: 1px solid #E5E7EB;

    border-radius: 999px;
}

.currency-tabs-wrapper {
    display: flex;

    justify-content: center;
}

.currency-tab {
    border: 0;

    background: transparent;

    color: #6B7280;

    font: inherit;

    font-size: .8em;

    font-weight: 600;

    padding: .65rem 1.2rem;

    border-radius: 999px;

    cursor: pointer;

    transition:
        background .2s,
        color .2s,
        box-shadow .2s;
}

.currency-tab:hover {
    color: #111827;
}

.currency-tab.active {
    background: #2563EB;

    color: white;

    box-shadow:
        0 2px 8px rgba(37, 99, 235, .25);
}


/* ============================================================
    PRICING GRID
============================================================ */

.pricing-grid {

    display: grid;

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

    gap: 24px;

}

/* ============================================================
    PLAN CARD
============================================================ */

.plan-card{

    position:relative;

    display:flex;

    flex-direction:column;

    gap:18px;

    padding:32px 26px;

    background:#fff;

    border:1px solid var(--gray-200);

    border-radius:18px;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        border-color .2s ease;

    box-shadow:0 4px 14px rgba(0,0,0,.04);

}

.plan-card:hover{

    transform:translateY(-5px);

    border-color:var(--primary);

    box-shadow:0 16px 32px rgba(0,0,0,.10);

}

.plan-card.featured{

    border:2px solid var(--primary);

    box-shadow:0 16px 34px rgba(37,99,235,.15);

}

.plan-badge{

    position:absolute;

    top:-13px;

    left:50%;

    transform:translateX(-50%);

    padding:7px 16px;

    border-radius:999px;

    background:var(--primary);

    color:#fff;

    font-size:.78rem;

    font-weight:700;

    white-space:nowrap;

}

.plan-header{

    text-align:center;

}

.plan-pages{

    font-size:2.8rem;

    font-weight:800;

    line-height:1;

    color:var(--text-primary);

}

.plan-pages-label{

    margin-top:6px;

    font-size:.95rem;

    color:var(--text-secondary);

}

.plan-price{

    text-align:center;

    font-size:2rem;

    font-weight:800;

    color:var(--primary);

}

.plan-rate{

    text-align:center;

    font-size:.92rem;

    color:var(--text-secondary);

}

.plan-divider{

    height:1px;

    background:var(--gray-200);

}

.plan-features{

    display:flex;

    flex-direction:column;

    gap:12px;

    flex:1;

}

.plan-feature{

    display:flex;

    align-items:center;

    gap:10px;

    font-size:.95rem;

    color:var(--text-primary);

}

.feature-icon{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    width:22px;

    height:22px;

    border-radius:50%;

    background:rgba(37,99,235,.12);

    color:var(--primary);

    font-size:.8rem;

    font-weight:700;

    flex-shrink:0;

}

.buy-plan-btn{

    width:100%;

    margin-top:8px;

    min-height:48px;

    font-weight:700;

}

/* ============================================================
    HOW PAGES WORK
============================================================ */

.info-intro{

    max-width:700px;

    margin:0 auto 34px;

    text-align:center;

    color:var(--text-secondary);

    line-height:1.7;

}

.info-grid{

    display:grid;

    grid-template-columns:repeat(auto-fit,minmax(250px,1fr));

    gap:24px;

}

.info-card{

    background:white;

    border:1px solid var(--gray-200);

    border-radius:18px;

    padding:28px;

    display:flex;

    flex-direction:column;

    align-items:flex-start;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

    transition:.25s;

}

.info-card:hover{

    transform:translateY(-4px);

    box-shadow:0 12px 26px rgba(0,0,0,.08);

}

.info-icon{

    width:60px;

    height:60px;

    border-radius:16px;

    display:flex;

    align-items:center;

    justify-content:center;

    background:rgba(37,99,235,.08);

    font-size:1.8rem;

    margin-bottom:20px;

}

.info-card h3{

    margin-bottom:12px;

    font-size:1.1rem;

}

.info-card p{

    color:var(--text-secondary);

    line-height:1.7;

    margin-bottom:18px;

    flex:1;

}

.info-example{

    width:100%;

    padding:12px 14px;

    border-radius:10px;

    background:#f8fafc;

    border:1px dashed var(--gray-300);

    font-size:.9rem;

    font-weight:600;

    color:var(--primary);

}

@media(max-width:768px){

    .info-grid{

        grid-template-columns:1fr;

    }

}

/* ============================================================
    PAYMENT TIMELINE
============================================================ */

.steps-intro{

    max-width:700px;

    margin:0 auto 36px;

    text-align:center;

    color:var(--text-secondary);

    line-height:1.7;

}

.purchase-timeline{

    position:relative;

    max-width:760px;

    margin:0 auto;

}

.purchase-timeline::before{

    content:"";

    position:absolute;

    left:22px;

    top:0;

    bottom:0;

    width:2px;

    background:var(--gray-200);

}

.timeline-step{

    position:relative;

    display:flex;

    gap:22px;

    margin-bottom:30px;

}

.timeline-circle{

    width:46px;

    height:46px;

    border-radius:50%;

    background:var(--primary);

    color:white;

    display:flex;

    align-items:center;

    justify-content:center;

    font-weight:700;

    flex-shrink:0;

    position:relative;

    z-index:2;

}

.timeline-content{

    flex:1;

    background:white;

    border:1px solid var(--gray-200);

    border-radius:16px;

    padding:20px 22px;

    box-shadow:0 6px 18px rgba(0,0,0,.05);

}

.timeline-content h3{

    margin-bottom:8px;

    font-size:1.05rem;

}

.timeline-content p{

    margin:0;

    color:var(--text-secondary);

    line-height:1.7;

}

.timeline-step:last-child{

    margin-bottom:0;

}

@media(max-width:768px){

    .purchase-timeline::before{

        left:18px;

    }

    .timeline-circle{

        width:38px;

        height:38px;

        font-size:.9rem;

    }

    .timeline-content{

        padding:18px;

    }

}

/* ============================================================
    ACCESS CODE
============================================================ */

.access-code {

    margin: 16px 0;

    padding: 14px;

    border-radius: 8px;

    background: var(--gray-50);

    border: 1px dashed var(--gray-200);

    font-family: monospace;

    font-size: 1rem;

    font-weight: 700;

    text-align: center;

    word-break: break-all;

}

#accessCodeContainer {

    margin-top: 24px;

}


.modal-card {
    text-align: center;
}

.modal-actions button {
    flex: 1;
}

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

@media (max-width: 768px) {

    .pricing-grid {

        grid-template-columns: 1fr;

    }

    .info-grid {

        grid-template-columns: 1fr;

    }

    .plan-pages {

        font-size: 1.8rem;

    }

    .plan-price {

        font-size: 1.6rem;

    }

    .modal-actions {
        flex-direction: column;
    }

    .modal-actions button {
        width: 100%;
        min-height: 42px;
    }

}