/* HERO */
.hero {
    padding: 140px 56px 90px;
    text-align: center
}

.hero-title {
    font-size: clamp(2.8rem, 5.5vw, 4.4rem);
    letter-spacing: -2.5px
}

/* PRICING SECTION */
.pricing-section {
    padding: 90px 56px
}

.pricing-grid {
    display: grid;
    grid-template-columns:1fr 1fr;
    gap: 24px;
    max-width: 840px;
    margin: 56px auto 0
}

.price-card {
    border-radius: var(--radius);
    padding: 40px 36px;
    border: 1.5px solid var(--border);
    background: #fff;
    transition: transform .25s, box-shadow .25s;
    position: relative
}

.price-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 48px rgba(0, 0, 0, .07)
}

.price-card.early {
    border-color: rgba(0, 0, 0, .1)
}

.early-ribbon {
    position: absolute;
    top: -1px;
    left: -1px;
    right: -1px;
    background: linear-gradient(90deg, #0b0f1a, #1a3dff);
    border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0;
    padding: 9px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between
}

.early-ribbon span {
    font-family: var(--ff);
    font-size: .68rem;
    color: rgba(255, 255, 255, .9);
    letter-spacing: .5px;
    text-transform: uppercase
}

.early-ribbon .timer {
    font-size: .68rem;
    color: rgba(255, 255, 255, .5);
    font-weight: 500
}

.early-body {
    margin-top: 44px
}

.price-card.feat-p {
    background: var(--blue);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 20px 60px rgba(26, 61, 255, .3)
}

.price-card.feat-p:hover {
    box-shadow: 0 28px 72px rgba(26, 61, 255, .4)
}

.price-badge-label {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: #ff4b4b;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 50px;
    white-space: nowrap
}

.price-tier {
    font-family: var(--ff);
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: 1px;
    text-transform: uppercase;
    opacity: .5;
    margin-bottom: 6px
}

.price-amt {
    font-family: var(--ff);
    font-size: 3rem;
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px
}

.price-amt small {
    font-size: .9rem;
    font-weight: 400;
    opacity: .5
}

.price-desc {
    font-size: .84rem;
    opacity: .55;
    margin-bottom: 28px;
    line-height: 1.55
}

.price-feats {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 32px
}

.price-feats li {
    font-size: .85rem;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    line-height: 1.45
}

.pcheck {
    width: 19px;
    height: 19px;
    border-radius: 50%;
    background: var(--blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px
}

.feat-p .pcheck {
    background: rgba(255, 255, 255, .22)
}

.pcheck svg {
    display: block
}

.price-feats li.locked {
    opacity: .35
}

.plock {
    width: 19px;
    height: 19px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: .68rem;
    margin-top: 1px
}

.btn-price {
    width: 100%;
    padding: 14px;
    border-radius: 50px;
    font-family: var(--fs);
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all .2s;
    border: 1.5px solid var(--border);
    background: transparent;
    color: var(--text)
}

.btn-price:hover {
    border-color: var(--blue);
    color: var(--blue)
}

.feat-p .btn-price {
    background: #fff;
    color: var(--blue);
    border-color: transparent
}

.btn-price.btn-dark {
    background: var(--bg-dark);
    color: #fff;
    border-color: transparent
}

.btn-price.btn-dark:hover {
    background: #1a2040
}

.price-note {
    font-size: .73rem;
    color: var(--text-muted);
    margin-top: 12px;
    line-height: 1.55;
    font-style: italic;
    text-align: center
}

.feat-p .price-note {
    color: rgba(255, 255, 255, .4)
}

/* COMPARISON TABLE */
.compare-section {
    padding: 0 56px 100px;
    background: var(--bg)
}

.compare-inner {
    max-width: 840px;
    margin: 0 auto
}

.compare-title {
    font-family: var(--ff);
    font-size: 1.5rem;
    font-weight: 900;
    letter-spacing: -1px;
    margin-bottom: 28px;
    text-align: center
}

table {
    width: 100%;
    border-collapse: collapse
}

thead th {
    padding: 12px 18px;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .6px;
    color: var(--text-muted);
    text-align: left;
    border-bottom: 2px solid var(--border)
}

thead th:not(:first-child) {
    text-align: center
}

thead th.col-pro {
    color: var(--blue)
}

tbody tr {
    border-bottom: 1px solid var(--border)
}

tbody tr:last-child {
    border-bottom: none
}

tbody td {
    padding: 14px 18px;
    font-size: .86rem;
    color: var(--text)
}

tbody td:not(:first-child) {
    text-align: center
}

.check-yes {
    color: var(--blue);
    font-size: 1rem;
    font-weight: 700
}

.check-no {
    color: #d1d5db;
    font-size: 1rem
}

.check-soon {
    font-size: .72rem;
    font-weight: 600;
    color: #92400e;
    background: rgba(255, 165, 0, .1);
    border: 1px solid rgba(255, 165, 0, .25);
    border-radius: 50px;
    padding: 2px 8px;
    white-space: nowrap
}

tbody tr:hover td {
    background: rgba(26, 61, 255, .02)
}

/* FAQ */
.faq-section {
    background: #fff;
    padding: 90px 56px
}

@media (max-width: 1024px) {
    .hero {
        padding: 110px 22px 72px
    }

    .pricing-section {
        padding: 64px 22px
    }

    .pricing-grid {
        grid-template-columns:1fr;
        max-width: 480px
    }

    .compare-section {
        padding: 0 22px 72px
    }

    .faq-section {
        padding: 64px 22px
    }

    table {
        font-size: .8rem
    }

    tbody td, thead th {
        padding: 10px 10px
    }
}