/* ============================================
   The pricing page (pricing.html): VFT's index.css, trimmed to the
   rules the page uses (decision 59). Its colours are style.css's.
   ============================================ */

/* ---- Hero Section ---- */
.landing-hero {
    background: linear-gradient(135deg, var(--dmsp-primary) 0%, var(--dmsp-secondary) 100%);
    color: white;
    padding: 5rem 0 6rem;
    position: relative;
    overflow: hidden;
}

.landing-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><path d="M0,0v46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1047.58,5.33,1100,1.36V0Z"/></svg>') repeat-x;
    background-size: 1000px 100px;
    animation: wave 20s linear infinite;
}

@keyframes wave {
    0% { background-position-x: 0; }
    100% { background-position-x: 1000px; }
}

.landing-hero .hero-content {
    position: relative;
    z-index: 1;
}

.landing-hero h1 {
    font-size: 2.75rem;
    font-weight: 800;
    line-height: 1.2;
    margin-bottom: 1.25rem;
}

/* ---- Section Shared ---- */
.landing-section {
    padding: 5rem 0;
}

.landing-section.bg-light {
    background: var(--dmsp-bg-light);
}

/* ---- Pricing Cards ---- */
.pricing-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    max-width: 1100px;
    margin: 0 auto;
}

.pricing-card {
    background: white;
    border-radius: 15px;
    padding: 2rem 1.5rem;
    text-align: center;
    border: 1px solid #e2e8f0;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.pricing-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}

.pricing-card.highlighted {
    border: 2px solid var(--dmsp-primary);
    position: relative;
    transform: scale(1.03);
    box-shadow: 0 10px 30px rgba(20,121,227,0.15);
}

.pricing-card.highlighted:hover {
    transform: scale(1.03) translateY(-5px);
}

.pricing-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, var(--dmsp-primary), var(--dmsp-secondary));
    color: white;
    padding: 0.25rem 1rem;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.pricing-card.pioneer {
    border: 2px solid #f59e0b;
    background: linear-gradient(180deg, #fffbeb 0%, white 30%);
}

.pricing-card.pioneer .pricing-badge {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.pricing-tier-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--dmsp-text-dark);
    margin-bottom: 0.5rem;
}

.pricing-price {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--dmsp-primary);
    margin-bottom: 0.25rem;
}

.pricing-price small {
    font-size: 0.9rem;
    font-weight: 400;
    color: #64748b;
}

.pricing-features {
    list-style: none;
    padding: 0;
    margin: 1.25rem 0;
    text-align: left;
    flex-grow: 1;
}

.pricing-features li {
    padding: 0.35rem 0;
    font-size: 0.85rem;
    color: #475569;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.pricing-features li i {
    color: var(--dmsp-primary);
    font-size: 1rem;
    flex-shrink: 0;
}

.pricing-features li i.mdi-close {
    color: #cbd5e1;
}

.btn-pricing {
    width: 100%;
    padding: 0.6rem;
    border-radius: 10px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s ease;
    margin-top: auto;
}

.btn-pricing-primary {
    background: linear-gradient(135deg, var(--dmsp-primary), var(--dmsp-secondary));
    color: white;
    border: none;
}

.btn-pricing-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(20,121,227,0.3);
    color: white;
}

.btn-pricing-outline {
    background: transparent;
    color: var(--dmsp-primary);
    border: 2px solid var(--dmsp-primary);
}

.btn-pricing-outline:hover {
    background: var(--dmsp-primary);
    color: white;
    transform: translateY(-2px);
}

.btn-pricing-pioneer {
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    border: none;
}

.btn-pricing-pioneer:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(245,158,11,0.3);
    color: white;
}

.pricing-footer-note {
    color: #64748b;
    font-size: 0.9rem;
    margin-top: 2rem;
}

/* ---- Pricing: value banner ---- */
.pricing-value-banner {
    max-width: 760px;
    margin: 0 auto 2rem;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    background: rgba(20, 121, 227, 0.07);
    border: 1px solid rgba(20, 121, 227, 0.18);
    color: var(--dmsp-text-dark);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
}

.pricing-value-banner i {
    color: #f59e0b;
    margin-right: 0.35rem;
}

.pricing-promo-banner {
    max-width: 760px;
    margin: 0 auto 1.25rem;
    padding: 0.85rem 1.4rem;
    border-radius: 999px;
    background: rgba(16, 185, 129, 0.08);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: var(--dmsp-text-dark);
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.5;
}

.pricing-promo-banner i {
    color: #10b981;
    margin-right: 0.35rem;
}

/* ---- Pricing: billing toggle ---- */
.billing-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem;
    margin: 0 auto 2.5rem;
    background: #eef2f7;
    border-radius: 999px;
    border: 1px solid #e2e8f0;
}

.billing-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: none;
    background: transparent;
    color: #475569;
    font-weight: 600;
    font-size: 0.95rem;
    padding: 0.55rem 1.4rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}

.billing-toggle-btn:hover {
    color: var(--dmsp-primary);
}

.billing-toggle-btn.is-active {
    background: white;
    color: var(--dmsp-primary);
    box-shadow: 0 2px 8px rgba(20, 121, 227, 0.18);
}

.billing-toggle-save {
    font-size: 0.7rem;
    font-weight: 700;
    color: #b45309;
    background: #fef3c7;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    white-space: nowrap;
}

.billing-toggle-btn.is-active .billing-toggle-save {
    background: #fde68a;
}

/* ---- Pricing card: tagline, annual block, badges ---- */
.pricing-tier-tagline {
    font-size: 0.8rem;
    color: #64748b;
    margin-bottom: 1rem;
    min-height: 2.2em;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
}

.price-strike {
    text-decoration: line-through;
    color: #94a3b8;
    font-size: 1.15rem;
    font-weight: 600;
    margin-right: 0.4rem;
}

.pricing-annual-note {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 0.15rem;
}

.pricing-annual-note .annual-total {
    font-weight: 700;
    color: var(--dmsp-text-dark);
}

.pricing-save-badge {
    display: inline-block;
    margin: 0.6rem auto 0;
    font-size: 0.72rem;
    font-weight: 700;
    color: #b45309;
    background: #fef3c7;
    padding: 0.18rem 0.7rem;
    border-radius: 999px;
}

/* Toggle state: hide annual-only elements when NOT showing annual (monthly view).
   Cards ship WITH .show-annual, so these are visible on first paint (pre-JS). */
.pricing-card:not(.show-annual) .pricing-annual-note,
.pricing-card:not(.show-annual) .pricing-save-badge {
    display: none;
}

/* ---- Final CTA ---- */
.final-cta {
    background: linear-gradient(135deg, var(--dmsp-primary) 0%, var(--dmsp-secondary) 100%);
    color: white;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.final-cta::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" fill="white" opacity="0.1"><path d="M0,0v46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1047.58,5.33,1100,1.36V0Z"/></svg>') repeat-x;
    background-size: 1000px 100px;
    animation: wave 20s linear infinite;
}

.final-cta .hero-content {
    position: relative;
    z-index: 1;
}

.final-cta h2 {
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 1rem;
}

.final-cta p {
    font-size: 1.1rem;
    opacity: 0.9;
    margin-bottom: 2rem;
}

/* ---- Fade-in Animation ---- */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.fade-in-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---- Responsive ---- */
/* 993-1199px: the Bootstrap container caps at 960px, so the 4-up pricing grid gets
   ~936px (its own max-width:1100px never applies) while the 2-up switch below only
   kicks in at <=992px. The price line (struck future price + current price) cannot
   soft-wrap, so its min-content width blows out the 1fr columns and the widest card
   spills past the grid. Trim the price type in this band so the two prices stay on
   one line inside a 4-up column. */
@media (min-width: 993px) and (max-width: 1199.98px) {
    .pricing-price {
        font-size: 1.65rem;
    }

    .price-strike {
        font-size: 0.9rem;
        margin-right: 0.3rem;
    }
}

@media (max-width: 992px) {
    .landing-hero {
        padding: 3rem 0 4rem;
    }

    .landing-hero h1 {
        font-size: 2.25rem;
    }

    .pricing-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .pricing-card.highlighted {
        transform: scale(1);
    }

    .pricing-card.highlighted:hover {
        transform: translateY(-5px);
    }
}

@media (max-width: 768px) {
    .landing-hero {
        padding: 2.5rem 0 3rem;
        text-align: center;
    }

    .landing-hero h1 {
        font-size: 1.85rem;
    }

    .landing-section {
        padding: 3rem 0;
    }

    .pricing-grid {
        grid-template-columns: 1fr;
        max-width: 350px;
        margin: 0 auto;
    }

    .final-cta h2 {
        font-size: 1.6rem;
    }
}