/* Extracted from pricing.html during portal refactor v1. */

/* ── Pricing-page-specific styles ── */
        .pricing-hero {
            background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
            padding: 7rem 0 5rem;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        .pricing-hero::before {
            content: '';
            position: absolute;
            inset: 0;
            background:
                radial-gradient(ellipse 60% 70% at 70% 20%, rgba(102, 126, 234, 0.18) 0%, transparent 70%),
                radial-gradient(ellipse 50% 50% at 20% 80%, rgba(118, 75, 162, 0.14) 0%, transparent 70%);
            pointer-events: none;
        }

        .pricing-hero .hero-title {
            color: #fff;
            margin-bottom: 1rem;
        }

        .pricing-hero .hero-subtitle {
            color: rgba(255, 255, 255, 0.75);
            max-width: 600px;
            margin: 0 auto 2rem;
        }

        /* Billing toggle — reused from index */
        .billing-toggle {
            display: flex;
            gap: 1.5rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-bottom: 3rem;
        }

        .billing-cycle-option {
            display: flex;
            align-items: center;
            gap: 0.5rem;
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-medium);
            color: var(--text-secondary);
            cursor: pointer;
        }

        .billing-cycle-option input {
            cursor: pointer;
        }

        .billing-save-badge {
            font-size: 0.7rem;
            font-weight: var(--font-weight-semibold);
            background: var(--success);
            color: #fff;
            padding: 1px 7px;
            border-radius: var(--radius-full);
            margin-left: 4px;
        }

        .billing-cycle-hint {
            font-size: 0.7rem;
            color: var(--text-muted);
            margin-left: 4px;
        }

        /* Plans grid */
        .pricing-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 2rem;
            max-width: 1000px;
            margin: 0 auto;
        }

        .pricing-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-lg);
            box-shadow: var(--shadow-md);
            transition: transform 0.25s ease, box-shadow 0.25s ease;
            position: relative;
            overflow: visible;
        }

        .pricing-card:hover {
            transform: translateY(-4px);
            box-shadow: var(--shadow-lg);
        }

        .pricing-card-featured {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.25), var(--shadow-lg);
            overflow: visible;
        }

        .pricing-card-enterprise {
            border-color: var(--gray-700);
            background: linear-gradient(135deg, #0f172a, #1e293b);
            color: #e2e8f0;
        }

        .pricing-card-enterprise .pricing-edition,
        .pricing-card-enterprise .pricing-sub,
        .pricing-card-enterprise .pricing-description,
        .pricing-card-enterprise .pricing-usecase {
            color: #cbd5e1;
        }

        .pricing-card-enterprise .pricing-currency,
        .pricing-card-enterprise .pricing-amount {
            color: #fff;
        }

        .pricing-card-enterprise .pricing-period,
        .pricing-card-enterprise .pricing-annual-note,
        .pricing-card-enterprise .pricing-alt-price {
            color: #94a3b8;
        }

        .pricing-card-enterprise .pf-included,
        .pricing-card-enterprise .pf-star {
            color: #cbd5e1;
        }

        .pricing-card-enterprise .pf-locked {
            color: #475569;
        }

        .pricing-popular-badge {
            position: absolute;
            top: 0;
            left: 50%;
            transform: translate(-50%, -50%);
            background: var(--gradient-primary);
            color: #fff;
            font-size: 0.68rem;
            font-weight: var(--font-weight-bold);
            letter-spacing: 0.08em;
            text-transform: uppercase;
            padding: 3px 16px;
            border-radius: var(--radius-full);
            white-space: nowrap;
            z-index: 2;
        }

        .pricing-card-inner {
            padding: 2.25rem 2rem;
        }

.pricing-cta-panel {
    background: var(--gradient-primary);
    border-radius: var(--radius-xl);
    padding: 4rem 3rem;
    text-align: center;
    color: #fff;
    max-width: 720px;
    margin: 0 auto;
    box-shadow: var(--shadow-xl);
}

.pricing-cta-title {
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-black);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.pricing-cta-text {
    font-size: var(--font-size-lg);
    opacity: 0.88;
    margin-bottom: 2rem;
}

.pricing-cta-actions {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

.pricing-cta-link-primary,
.pricing-cta-link-secondary {
    font-weight: 600;
    padding: 0.875rem 2rem;
    border-radius: var(--radius-full);
    text-decoration: none;
    font-size: var(--font-size-base);
}

.pricing-cta-link-primary {
    background: #fff;
    color: var(--primary);
}

.pricing-cta-link-secondary {
    border: 2px solid rgba(255, 255, 255, 0.6);
    color: #fff;
}

        .pricing-edition {
            font-size: var(--font-size-lg);
            font-weight: var(--font-weight-bold);
            color: var(--text-primary);
            margin-bottom: 0.25rem;
        }

        .pricing-sub {
            font-size: var(--font-size-xs);
            color: var(--text-muted);
            text-transform: uppercase;
            letter-spacing: 0.07em;
            margin-bottom: 1.5rem;
        }

        .pricing-price-wrap {
            display: flex;
            align-items: baseline;
            gap: 2px;
            margin-bottom: 0.25rem;
        }

        .pricing-currency {
            font-size: var(--font-size-xl);
            font-weight: var(--font-weight-bold);
            color: var(--primary);
        }

        .pricing-amount {
            font-size: 3rem;
            font-weight: var(--font-weight-black);
            color: var(--primary);
            line-height: 1;
        }

        .pricing-period {
            font-size: var(--font-size-sm);
            color: var(--text-muted);
            margin-left: 4px;
        }

        .pricing-annual-note {
            font-size: var(--font-size-xs);
            color: var(--text-muted);
            min-height: 1.2em;
            margin-bottom: 0.25rem;
        }

        .pricing-alt-price {
            font-size: var(--font-size-xs);
            color: var(--text-muted);
            min-height: 1.2em;
            margin-bottom: 1.25rem;
        }

        .pricing-description {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            margin-bottom: 0.5rem;
        }

        .pricing-usecase {
            font-size: var(--font-size-xs);
            color: var(--text-muted);
            font-style: italic;
            margin-bottom: 1.5rem;
        }

        .pricing-features {
            list-style: none;
            padding: 0;
            margin: 0 0 2rem;
            display: flex;
            flex-direction: column;
            gap: 0.6rem;
        }

        .pricing-features li {
            display: flex;
            align-items: flex-start;
            gap: 0.5rem;
            font-size: var(--font-size-sm);
            line-height: 1.4;
        }

        .pricing-features li::before {
            content: '';
            flex-shrink: 0;
            width: 16px;
            height: 16px;
            margin-top: 1px;
            border-radius: 50%;
            background-size: contain;
            background-repeat: no-repeat;
        }

        .pf-included {
            color: var(--text-primary);
        }

        .pf-included::before {
            background-color: var(--success);
            -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4L12 14.01L9 11.01' stroke='white' stroke-width='2.5'/%3E%3Ccircle cx='12' cy='12' r='10' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M22 4L12 14.01L9 11.01' stroke='white' stroke-width='2.5'/%3E%3Ccircle cx='12' cy='12' r='10' stroke='white' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
        }

        .pf-star {
            color: var(--primary);
            font-weight: var(--font-weight-medium);
        }

        .pf-star::before {
            background-color: var(--primary);
            -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26' stroke='%23667eea' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpolygon points='12,2 15.09,8.26 22,9.27 17,14.14 18.18,21.02 12,17.77 5.82,21.02 7,14.14 2,9.27 8.91,8.26' stroke='%23667eea' stroke-width='2' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;
        }

        .pf-locked {
            color: var(--text-muted);
        }

        .pf-locked::before {
            background-color: var(--gray-300);
            -webkit-mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' stroke='%239ca3af' stroke-width='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4' stroke='%239ca3af' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' stroke='%239ca3af' stroke-width='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4' stroke='%239ca3af' stroke-width='2'/%3E%3C/svg%3E") center/contain no-repeat;
        }

        .btn-pricing {
            display: block;
            width: 100%;
            text-align: center;
            padding: 0.875rem;
            border-radius: var(--radius-full);
            font-weight: var(--font-weight-semibold);
            font-size: var(--font-size-sm);
            text-decoration: none;
            transition: opacity 0.2s, background 0.2s;
        }

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

        .btn-pricing-outline:hover {
            background: var(--primary-light) !important;
            color: var(--primary) !important;
        }

        .btn-pricing-primary {
            background: var(--gradient-primary) !important;
            color: #fff !important;
            border: none !important;
        }

        .btn-pricing-primary:hover {
            opacity: 0.88;
        }

        .btn-pricing-enterprise {
            background: linear-gradient(135deg, #667eea, #764ba2) !important;
            color: #fff !important;
            border: none !important;
        }

        .btn-pricing-enterprise:hover {
            opacity: 0.88;
        }

        /* Add-ons strip */
        .addons-strip {
            margin-top: 3rem;
            text-align: center;
        }

        .addons-strip-title {
            font-size: var(--font-size-sm);
            font-weight: var(--font-weight-semibold);
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.08em;
            margin-bottom: 1rem;
        }

        .addons-strip-list {
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: center;
        }

        .addon-chip {
            display: flex;
            align-items: center;
            gap: 0.375rem;
            font-size: var(--font-size-sm);
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-full);
            padding: 6px 14px;
            color: var(--text-secondary);
        }

        .addon-chip-icon {
            font-size: 1rem;
        }

        /* Credits section */
        .credits-section {
            margin-top: 4rem;
            padding-top: 3rem;
            border-top: 1px solid var(--border-color);
        }

        .credits-header {
            text-align: center;
            max-width: 640px;
            margin: 0 auto 2rem;
        }

        .credits-title {
            font-size: var(--font-size-2xl);
            font-weight: var(--font-weight-bold);
            margin-bottom: 0.75rem;
        }

        .credits-desc {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
            line-height: 1.7;
        }

        .credits-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
            gap: 1.25rem;
            max-width: 840px;
            margin: 0 auto;
        }

        .credit-card {
            background: var(--bg-card);
            border: 1px solid var(--border-color);
            border-radius: var(--radius-md);
            padding: 1.5rem 1.25rem;
            text-align: center;
            box-shadow: var(--shadow-sm);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.5rem;
            position: relative;
        }

        .credit-card-popular {
            border-color: var(--primary);
            box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2), var(--shadow-md);
        }

        .credit-popular {
            position: absolute;
            top: -11px;
            background: var(--gradient-primary);
            color: #fff;
            font-size: 0.65rem;
            font-weight: var(--font-weight-bold);
            letter-spacing: 0.07em;
            text-transform: uppercase;
            padding: 2px 10px;
            border-radius: var(--radius-full);
        }

        .credit-icon {
            font-size: 1.5rem;
        }

        .credit-amount {
            font-size: var(--font-size-3xl);
            font-weight: var(--font-weight-black);
            color: var(--primary);
            line-height: 1;
        }

        .credit-label {
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            color: var(--text-primary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        .credit-desc {
            font-size: var(--font-size-xs);
            color: var(--text-secondary);
            line-height: 1.5;
        }

        .btn-credit {
            margin-top: 0.5rem;
            padding: 0.5rem 1rem;
            font-size: var(--font-size-xs);
            font-weight: var(--font-weight-semibold);
            border: 1.5px solid var(--primary);
            color: var(--primary);
            background: transparent;
            border-radius: var(--radius-full);
            cursor: pointer;
            transition: background 0.2s;
        }

        .btn-credit:hover {
            background: var(--primary-light);
        }

        .btn-credit-featured {
            background: var(--gradient-primary);
            color: #fff;
            border-color: transparent;
        }

        .btn-credit-featured:hover {
            opacity: 0.88;
            background: var(--gradient-primary);
        }

        .credits-note {
            display: flex;
            align-items: flex-start;
            gap: 6px;
            max-width: 640px;
            margin: 1.5rem auto 0;
            font-size: var(--font-size-xs);
            color: var(--text-muted);
            line-height: 1.6;
        }

        .credits-note svg {
            flex-shrink: 0;
            margin-top: 2px;
        }

        /* Solutions link bar */
        .solutions-bar {
            background: var(--primary-light);
            border: 1px solid rgba(102, 126, 234, 0.25);
            border-radius: var(--radius-md);
            padding: 1.25rem 2rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1.5rem;
            flex-wrap: wrap;
            margin-top: 4rem;
        }

        .solutions-bar-text {
            font-size: var(--font-size-sm);
            color: var(--text-secondary);
        }

        .solutions-bar-text strong {
            color: var(--text-primary);
        }