@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600&family=Space+Grotesk:wght@500;600;700&display=swap');

        :root {
            --pp-purple: #6B2D8B;
            --pp-green: #00C853;
            --pp-purple-light: rgba(107, 45, 139, 0.15);
            --pp-green-light: rgba(0, 200, 83, 0.12);
        }

        #positionpay-demo { font-family: 'Inter', system-ui, sans-serif; }
        .logo-font { font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif; font-weight: 700; letter-spacing: -0.03em; }
        .pp-position { color: var(--pp-purple); }
        .pp-pay { color: var(--pp-green); }
        .bg-pp-green { background-color: var(--pp-green); }
        .bg-pp-purple { background-color: var(--pp-purple); }
        .text-pp-green { color: var(--pp-green); }
        .text-pp-purple { color: var(--pp-purple); }
        .border-pp-green { border-color: var(--pp-green); }
        .border-pp-purple { border-color: var(--pp-purple); }
        .accent-pp-green { accent-color: var(--pp-green); }
        .accent-pp-purple { accent-color: var(--pp-purple); }

        .hero-bg {
            background: radial-gradient(at center, #1e1135 0%, #0f0a1f 70%);
            position: relative;
            overflow: hidden;
        }
        .hero-orb {
            position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.35;
            animation: orb-float 12s ease-in-out infinite; pointer-events: none;
        }
        .hero-orb-1 { width: 380px; height: 380px; background: #7C3AED; top: -15%; left: 5%; }
        .hero-orb-2 { width: 280px; height: 280px; background: #22C55E; bottom: 0; right: 10%; animation-delay: -4s; }
        @keyframes orb-float {
            0%, 100% { transform: translate(0,0) scale(1); }
            50% { transform: translate(20px,-15px) scale(1.04); }
        }

        .energy-gradient {
            background: linear-gradient(135deg, #a78bfa 0%, #34d399 50%, #6ee7b7 100%);
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
        }
        .animated-gradient {
            background: linear-gradient(270deg, #4C1D95, #7C3AED, #22C55E, #16A34A, #4C1D95);
            background-size: 300% 300%;
            -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
            animation: gradient-move 6s ease infinite;
        }
        @keyframes gradient-move {
            0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; }
        }

        .ticker-content { display: inline-flex; animation: ticker-slide 28s linear infinite; }
        @keyframes ticker-slide { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

        .premium-card { transition: all 0.35s cubic-bezier(0.4,0,0.2,1); }
        .premium-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 20px 40px -10px rgb(34 197 94 / 0.12);
            border-color: rgb(34 197 94 / 0.25);
        }

        .plan-card {
            transition: all 0.25s ease;
            border: 2px solid rgb(51 65 85);
            background: rgb(15 23 42 / 0.6);
        }
        .plan-card.selected {
            border-color: var(--pp-green);
            box-shadow: 0 0 0 3px var(--pp-green-light);
            background: var(--pp-green-light);
        }
        #plan-fixed.plan-card { overflow: hidden; }
        #plan-fixed .fixed-schedule-body { min-width: 0; max-width: 100%; }
        #plan-fixed #fixed-estimate {
            font-size: 1.125rem;
            line-height: 1.375;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        #plan-fixed #fixed-apr {
            font-size: 0.75rem;
            line-height: 1.4;
            word-break: break-word;
            overflow-wrap: anywhere;
        }
        #plan-fixed #term-select {
            font-size: 0.875rem;
            height: 2.25rem;
            max-width: 100%;
            padding-left: 0.75rem;
            padding-right: 1.75rem;
        }

        .modal { animation: modalPopIn 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); }
        @keyframes modalPopIn {
            from { opacity: 0; transform: scale(0.95) translateY(10px); }
            to { opacity: 1; transform: scale(1) translateY(0); }
        }

        .step { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 500; }
        .step-dot {
            width: 1.75rem; height: 1.75rem; border-radius: 9999px;
            display: flex; align-items: center; justify-content: center;
            font-size: 0.75rem; font-weight: 700;
        }

        .demo-table th { background-color: rgb(15 23 42); font-weight: 600; color: #94a3b8; }
        .demo-table tbody tr:hover { background-color: rgb(30 41 59 / 0.5); }

        .fintech-shadow { box-shadow: 0 20px 40px -15px rgb(0 0 0 / 0.4); }

        .modern-input {
            background: rgb(30 41 59); border: 1px solid rgb(51 65 85); color: #fff;
            transition: all 0.15s ease;
        }
        .modern-input:focus {
            outline: none; border-color: var(--pp-green);
            box-shadow: 0 0 0 3px var(--pp-green-light);
        }

        .amount-slider {
            -webkit-appearance: none; appearance: none; width: 100%; height: 8px;
            border-radius: 999px;
            background: linear-gradient(90deg, var(--pp-green) var(--pct, 20%), rgba(0, 200, 83, 0.28) var(--pct, 20%));
            outline: none;
        }
        .amount-slider::-webkit-slider-thumb {
            -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
            background: var(--pp-green); cursor: pointer;
            border: 2px solid #fff;
            box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.45);
        }
        .amount-slider::-webkit-slider-runnable-track {
            height: 8px; border-radius: 999px;
            background: linear-gradient(90deg, var(--pp-green) var(--pct, 20%), rgba(0, 200, 83, 0.28) var(--pct, 20%));
        }
        .amount-slider::-moz-range-track {
            height: 8px; border-radius: 999px;
            background: rgba(0, 200, 83, 0.28);
        }
        .amount-slider::-moz-range-progress {
            height: 8px; border-radius: 999px;
            background: var(--pp-green);
        }
        .amount-slider::-moz-range-thumb {
            width: 22px; height: 22px; border-radius: 50%;
            background: var(--pp-green); cursor: pointer;
            border: 2px solid #fff;
            box-shadow: 0 0 0 3px rgba(0, 200, 83, 0.45);
        }

        .loan-summary { background: linear-gradient(145deg, rgb(15 23 42), rgb(30 41 59)); }

        .cta-pulse { animation: cta-glow 2.5s ease-in-out infinite; }
        @keyframes cta-glow {
            0%, 100% { box-shadow: 0 0 0 0 rgba(0, 200, 83, 0.45), 0 8px 25px -5px rgba(0, 200, 83, 0.25); }
            50% { box-shadow: 0 0 0 10px rgba(0, 200, 83, 0), 0 8px 30px -5px rgba(0, 200, 83, 0.35); }
        }

        .tab-active { border-bottom: 2px solid var(--pp-green); color: var(--pp-green); }
        .platform-active { border-bottom: 2px solid var(--pp-green); color: var(--pp-green); }

        .status-badge {
            display: inline-block; padding: 0.25rem 0.75rem; border-radius: 9999px;
            font-size: 0.75rem; font-weight: 600;
        }
        .status-active { background: var(--pp-green-light); color: var(--pp-green); border: 1px solid rgba(0, 200, 83, 0.3); }
        .status-resolved { background: var(--pp-purple-light); color: #c084fc; border: 1px solid rgba(107, 45, 139, 0.35); }
        .status-converted { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.35); }

        .modal-dark { background: rgb(15 23 42); border: 1px solid rgb(51 65 85); color: #fff; }
        .modal-dark .modern-input { background: rgb(30 41 59); border-color: rgb(51 65 85); color: #fff; }
        .modal-dark label { color: #94a3b8; }

        .pp-finance-btn {
            background: rgb(15 23 42);
            border: 2px solid rgb(51 65 85);
            color: #fff;
            transition: all 0.2s ease;
        }
        .pp-finance-btn:hover {
            background: rgb(2 6 23);
            border-color: var(--pp-green);
            box-shadow: 0 0 24px rgba(0, 200, 83, 0.2);
        }
        .pp-finance-btn .pp-position { color: #c084fc; }
        .pp-finance-btn .pp-pay { color: var(--pp-green); }

        .pp-dark-btn {
            background: rgb(15 23 42);
            border: 2px solid rgb(51 65 85);
            color: #fff;
            transition: all 0.2s ease;
        }
        .pp-dark-btn:hover {
            background: rgb(2 6 23);
            border-color: var(--pp-green);
            box-shadow: 0 0 24px rgba(0, 200, 83, 0.2);
        }
        .pp-dark-btn .pp-position { color: #c084fc; }
        .pp-dark-btn .pp-pay { color: var(--pp-green); }

        .bg-pp-green-10 { background: var(--pp-green-light); }
        .bg-pp-green-15 { background: rgba(0, 200, 83, 0.15); }
        .bg-pp-green-20 { background: rgba(0, 200, 83, 0.2); }
        .bg-pp-purple-15 { background: var(--pp-purple-light); }
        .bg-pp-purple-20 { background: rgba(107, 45, 139, 0.2); }
        .bg-pp-purple-25 { background: rgba(107, 45, 139, 0.25); }
        .border-pp-green-30 { border-color: rgba(0, 200, 83, 0.3); }
        .border-pp-green-40 { border-color: rgba(0, 200, 83, 0.4); }
        .border-pp-purple-30 { border-color: rgba(107, 45, 139, 0.3); }
        .border-pp-purple-40 { border-color: rgba(107, 45, 139, 0.4); }
        .hover-bg-pp-green-20:hover { background: rgba(0, 200, 83, 0.2); }

        .uw-checkout-checks { margin-top: 14px; }
        .uw-check-row {
            display: flex; align-items: center; justify-content: space-between; gap: 10px;
            padding: 8px 12px; margin-bottom: 6px; border-radius: 10px;
            background: rgb(30 41 59); border: 1px solid rgb(51 65 85);
            font-size: 0.78rem; color: #cbd5e1;
        }
        .uw-check-row.pass { border-color: rgba(0, 200, 83, 0.35); color: #86efac; }
        .uw-check-row.fail { border-color: rgba(244, 63, 94, 0.45); background: rgba(244, 63, 94, 0.1); color: #fda4af; }
        .uw-check-row.review { border-color: rgba(251, 191, 36, 0.4); color: #fcd34d; }
        .uw-check-row.running { color: #94a3b8; }
        .verify-afford-warn { color: #f43f5e; font-weight: 600; }
        .verify-afford-ok { color: var(--pp-green); font-weight: 600; }

        .integration-code {
            background: rgb(2 6 23);
            border: 1px solid rgb(51 65 85);
            color: var(--pp-green);
            font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
            font-size: 0.75rem;
            line-height: 1.6;
        }

        .price-chart-wrap {
            background: rgb(2 6 23 / 0.6);
            border: 1px solid rgb(51 65 85);
            border-radius: 1rem;
            padding: 1rem;
        }
        #price-chart { width: 100%; height: 120px; display: block; }
        .contracts-line-yes { color: #34d399; }
        .contracts-line-no { color: #fb7185; }
        .duration-banner {
            background: rgba(107, 45, 139, 0.15);
            border: 1px solid rgba(107, 45, 139, 0.35);
            border-radius: 0.75rem;
            padding: 0.65rem 0.85rem;
            font-size: 0.75rem;
            color: #c084fc;
        }
        .duration-banner.short { background: rgba(0, 200, 83, 0.1); border-color: rgba(0, 200, 83, 0.3); color: #34d399; }
        .duration-banner.medium { background: rgba(251, 191, 36, 0.1); border-color: rgba(251, 191, 36, 0.35); color: #fbbf24; }
        .duration-banner.long { background: rgba(107, 45, 139, 0.15); border-color: rgba(107, 45, 139, 0.35); color: #c084fc; }
        .term-option-disabled { color: #64748b; }

/* WordPress theme isolation */
body.positionpay-demo-page {
    margin: 0 !important;
    padding: 0 !important;
    background: #020617 !important;
}
body.positionpay-demo-page #positionpay-demo {
    width: 100%;
    overflow-x: hidden;
}