@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Playfair+Display:ital,wght@0,700;1,700&display=swap');

/* ═══════════════════════════════════════════════════════
   PRICING PROMO SECTION — BrutForce Aviation
   Light theme, 3-col cards, recommended elevated
   Responsive: Mobile / Tablet / Desktop
═══════════════════════════════════════════════════════ */

.pp-section.wp-block-group,
.pp-section {
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    overflow: visible !important;
}

.pp-wrap {
    background: #f0f4ff !important;
    position: relative !important;
    overflow: hidden !important;
    padding: 72px 40px 80px !important;
    margin: 0 !important;
    font-family: 'Outfit', sans-serif !important;
    box-sizing: border-box !important;
}

/* Single top-right orb */
.pp-wrap::before {
    content: '' !important;
    position: absolute !important;
    width: 480px; height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(199,210,254,0.45), transparent 65%);
    top: -140px; right: -100px;
    pointer-events: none; z-index: 0;
}
.pp-wrap::after { display: none !important; }

/* ════════════════════════════════════════
   HEADER
════════════════════════════════════════ */
.pp-header {
    text-align: center !important;
    margin-bottom: 52px !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 0 !important;
}

.pp-eyebrow {
    display: inline-flex !important;
    align-items: center !important;
    gap: 7px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    color: #4f5fe0 !important;
    background: #eef2ff !important;
    border: 1px solid #c7d2fe !important;
    border-radius: 99px !important;
    padding: 5px 16px !important;
    margin: 0 0 16px 0 !important;
}

.pp-eyebrow-dot {
    width: 6px !important; height: 6px !important;
    min-width: 6px !important; min-height: 6px !important;
    border-radius: 50% !important;
    background: #4f5fe0 !important;
    flex-shrink: 0 !important;
    display: block !important;
    animation: ppDot 2s ease-in-out infinite !important;
}
@keyframes ppDot { 0%,100%{opacity:1;} 50%{opacity:.3;} }

.pp-wrap h2 {
    font-family: 'Playfair Display', serif !important;
    font-size: clamp(2rem, 4vw, 3rem) !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1.1 !important;
    letter-spacing: -0.01em !important;
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
    text-align: center !important;
    background: none !important;
}
.pp-wrap h2 em {
    color: #f97316 !important;
    font-style: italic !important;
}

.pp-sub {
    font-family: 'Outfit', sans-serif !important;
    font-size: 15px !important;
    color: #64748b !important;
    max-width: 500px !important;
    margin: 0 auto !important;
    line-height: 1.65 !important;
    padding: 0 !important;
}

.pp-divider {
    width: 44px !important; height: 3px !important;
    background: linear-gradient(90deg, #4f5fe0, #818cf8) !important;
    border-radius: 2px !important;
    margin: 18px auto 0 !important;
    padding: 0 !important; border: none !important;
}

/* ════════════════════════════════════════
   PRICING GRID
════════════════════════════════════════ */
.pp-grid {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 20px !important;
    max-width: 960px !important;
    margin: 0 auto !important;
    position: relative !important;
    z-index: 1 !important;
    align-items: start !important;
    padding: 20px 0 8px !important; /* top padding so badge is fully visible */
}

/* ════════════════════════════════════════
   PRICING CARD
════════════════════════════════════════ */
.pp-card {
    background: #ffffff !important;
    border: 1px solid #e8edf5 !important;
    border-radius: 20px !important;
    padding: 32px 28px 28px !important;
    margin: 0 !important;
    position: relative !important;
    overflow: visible !important; /* badge needs to show above card top */
    box-shadow: 0 2px 14px rgba(0,0,0,0.05) !important;
    transition: transform 0.25s cubic-bezier(.22,.68,0,1.3),
                box-shadow 0.25s ease,
                border-color 0.2s !important;
}

/* Clip only the top accent bar, not the whole card */
.pp-card::before {
    border-radius: 20px 20px 0 0 !important;
    overflow: hidden !important;
}

@media (hover: hover) {
    .pp-card:hover {
        transform: translateY(-5px) !important;
        box-shadow: 0 14px 40px rgba(79,95,224,0.12) !important;
        border-color: #c7d2fe !important;
    }
}

/* ── Recommended card ── */
.pp-card.pp-recommended {
    border: 2px solid #4f5fe0 !important;
    background: linear-gradient(160deg, #fafbff 0%, #f0f4ff 100%) !important;
    transform: translateY(-8px) !important;
    box-shadow: 0 12px 40px rgba(79,95,224,0.16) !important;
    overflow: visible !important;
}

@media (hover: hover) {
    .pp-card.pp-recommended:hover {
        transform: translateY(-13px) !important;
        box-shadow: 0 20px 52px rgba(79,95,224,0.22) !important;
    }
}

/* ── Most Popular badge ── */
.pp-badge {
    position: absolute !important;
    top: -13px !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    background: linear-gradient(90deg, #4f5fe0, #6366f1) !important;
    color: #ffffff !important;
    padding: 4px 18px !important;
    border-radius: 99px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    white-space: nowrap !important;
    box-shadow: 0 4px 12px rgba(79,95,224,0.35) !important;
    margin: 0 !important;
    display: block !important;
}

/* ── Plan name ── */
.pp-plan {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    letter-spacing: 0.1em !important;
    text-transform: uppercase !important;
    color: #94a3b8 !important;
    margin: 0 0 14px 0 !important;
    padding: 0 !important;
    display: block !important;
    background: none !important;
}
.pp-card.pp-recommended .pp-plan { color: #4f5fe0 !important; }

/* ── Price ── */
.pp-price {
    font-family: 'Playfair Display', serif !important;
    font-size: 48px !important;
    font-weight: 700 !important;
    color: #0f172a !important;
    line-height: 1 !important;
    margin: 0 0 4px 0 !important;
    letter-spacing: -0.02em !important;
    display: block !important;
    background: none !important;
}
.pp-price span {
    font-family: 'Outfit', sans-serif !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    color: #94a3b8 !important;
}

/* ── Duration row ── */
.pp-duration {
    font-family: 'Outfit', sans-serif !important;
    font-size: 12.5px !important;
    color: #94a3b8 !important;
    font-weight: 500 !important;
    margin: 0 0 22px 0 !important;
    padding: 0 0 20px 0 !important;
    border-bottom: 1px solid #f1f5f9 !important;
    display: block !important;
    background: none !important;
}

.pp-saving {
    display: inline-block !important;
    font-size: 10.5px !important;
    font-weight: 700 !important;
    color: #059669 !important;
    background: #d1fae5 !important;
    border-radius: 99px !important;
    padding: 2px 9px !important;
    margin-left: 6px !important;
    vertical-align: middle !important;
}

/* ── Feature list ── */
.pp-features {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 26px 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
}

.pp-features li {
    display: flex !important;
    align-items: flex-start !important;
    gap: 9px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13.5px !important;
    color: #374151 !important;
    line-height: 1.4 !important;
    list-style: none !important;
    background: none !important;
    margin: 0 !important; padding: 0 !important;
}

.pp-check {
    width: 17px !important; height: 17px !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    margin-top: 1px !important;
    background: #d1fae5 !important;
}
.pp-check svg {
    width: 9px !important; height: 9px !important;
    stroke: #059669 !important;
    stroke-width: 2.5 !important;
    fill: none !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    display: block !important;
}

/* Recommended card — indigo checks */
.pp-card.pp-recommended .pp-check { background: #4f5fe0 !important; }
.pp-card.pp-recommended .pp-check svg { stroke: #ffffff !important; }

/* ── Subscribe button ── */
.pp-btn {
    width: 100% !important;
    padding: 13px !important;
    border-radius: 10px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.18s !important;
    background: #0f172a !important;
    color: #ffffff !important;
    -webkit-appearance: none !important;
    touch-action: manipulation !important;
    letter-spacing: 0.02em !important;
    display: block !important;
    text-align: center !important;
    text-decoration: none !important;
}
.pp-btn:hover {
    background: #1e293b !important;
    box-shadow: 0 4px 14px rgba(15,23,42,0.25) !important;
}

.pp-card.pp-recommended .pp-btn {
    background: linear-gradient(135deg, #4f5fe0, #6366f1) !important;
    box-shadow: 0 4px 16px rgba(79,95,224,0.3) !important;
}
.pp-card.pp-recommended .pp-btn:hover {
    filter: brightness(1.07) !important;
    box-shadow: 0 8px 24px rgba(79,95,224,0.45) !important;
}

/* ── Note below cards ── */
.pp-note {
    text-align: center !important;
    margin-top: 24px !important;
    font-family: 'Outfit', sans-serif !important;
    font-size: 13px !important;
    color: #94a3b8 !important;
    position: relative !important;
    z-index: 1 !important;
    padding: 0 !important;
}
.pp-note a {
    color: #4f5fe0 !important;
    font-weight: 600 !important;
    text-decoration: none !important;
}
.pp-note a:hover { text-decoration: underline !important; }

/* ════════════════════════════════════════
   TABLET  640px – 1023px
════════════════════════════════════════ */
@media (max-width: 1023px) {
    .pp-wrap   { padding: 56px 28px 64px !important; }
    .pp-header { margin-bottom: 40px !important; }
    .pp-grid   { gap: 14px !important; padding: 12px 0 !important; }
    .pp-card   { padding: 26px 22px 22px !important; }
    .pp-price  { font-size: 40px !important; }
    .pp-features li { font-size: 13px !important; }
}

/* ════════════════════════════════════════
   MOBILE  < 640px
   Single column, rec card reset to flat
════════════════════════════════════════ */
@media (max-width: 639px) {
    .pp-wrap   { padding: 48px 16px 56px !important; }
    .pp-wrap h2 { font-size: 1.85rem !important; }
    .pp-header { margin-bottom: 32px !important; }

    /* Stack single column */
    .pp-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
        padding: 14px 0 !important;
    }

    /* Reset recommended elevation on mobile */
    .pp-card.pp-recommended {
        transform: none !important;
        box-shadow: 0 2px 14px rgba(0,0,0,0.05) !important;
    }
    @media (hover: hover) {
        .pp-card.pp-recommended:hover {
            transform: translateY(-5px) !important;
        }
    }

    .pp-card { padding: 28px 20px 22px !important; border-radius: 16px !important; }
    .pp-price { font-size: 42px !important; }
    .pp-features { gap: 8px !important; margin-bottom: 20px !important; }
    .pp-features li { font-size: 13px !important; }
    .pp-btn { padding: 14px !important; font-size: 14px !important; }
}