/* ── Font Fallback Metric Overrides ── */
        @font-face {
            font-family: 'Inter Fallback';
            src: local('Arial');
            size-adjust: 107.64%;
            ascent-override: 90%;
            descent-override: 22.43%;
            line-gap-override: 0%;
        }
        body, .font-inter { font-family: 'Inter', 'Inter Fallback', system-ui, sans-serif; }

        /* ── Hero ── */
        .hero-section { background: #ffffff; position: relative; overflow: hidden; }
        .hero-blob { position: absolute; border-radius: 50%; filter: blur(100px); opacity: 0.7; pointer-events: none; z-index: 0; }
        .hero-blob-1 { width: 500px; height: 500px; background: rgba(4,107,252,0.3); top: -180px; left: -120px; }
        .hero-blob-2 { width: 400px; height: 400px; background: rgba(255,153,0,0.2); top: 40px; right: -80px; }
        .hero-blob-3 { width: 350px; height: 350px; background: rgba(4,107,252,0.2); bottom: -80px; left: 30%; }
        @media (max-width: 768px) {
            .hero-blob { opacity: 0.35; filter: blur(120px); }
            .hero-blob-1 { width: 300px; height: 300px; }
            .hero-blob-2 { width: 250px; height: 250px; }
            .hero-blob-3 { width: 220px; height: 220px; }
        }
        .hero-content { position: relative; z-index: 10; }
        .hero-grid { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-image: linear-gradient(rgba(4,107,252,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(4,107,252,0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 1; }

        /* ── Section blobs ── */
        .section-blob { position: absolute; border-radius: 50%; filter: blur(120px); pointer-events: none; z-index: 0; }
        .section-blob-blue { background: rgba(4,107,252,0.15); }
        .section-blob-orange { background: rgba(255,153,0,0.12); }
        .section-blob-green { background: rgba(16,185,129,0.12); }
        .section-blob-amber { background: rgba(245,158,11,0.12); }

        /* ── Macrobox dark ── */
        .macrobox-dark { background: #04143d; position: relative; overflow: hidden; }
        .macrobox-dark::before { content: ''; position: absolute; top: -20%; right: -10%; width: 600px; height: 600px; background: radial-gradient(circle, rgba(4,107,252,0.45) 0%, transparent 60%); pointer-events: none; }
        .macrobox-dark::after { content: ''; position: absolute; bottom: -20%; left: -8%; width: 550px; height: 550px; background: radial-gradient(circle, rgba(255,153,0,0.30) 0%, transparent 60%); pointer-events: none; }
        @media (max-width: 640px) {
            .macrobox-dark::before { width: 300px; height: 300px; top: -30%; right: -15%; opacity: 0.6; }
            .macrobox-dark::after { width: 280px; height: 280px; bottom: -35%; left: -15%; opacity: 0.4; }
        }

        /* ── Hero rotating text ── */
        @keyframes heroTextIn { 0% { opacity: 0; transform: translateY(18px); } 100% { opacity: 1; transform: translateY(0); } }
        @keyframes heroTextOut { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-18px); } }
        .hero-rotate { display: inline-block; animation: heroTextIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }
        .hero-rotate.out { animation: heroTextOut 0.4s cubic-bezier(0.7,0,0.84,0) forwards; }
        @media (prefers-reduced-motion: reduce) { .hero-rotate, .hero-rotate.out { animation: none !important; opacity: 1 !important; transform: none !important; } }

        /* ── Buttons ── */
        .btn-pill { border-radius: 50px; }
        @keyframes ctaPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(4,107,252,.45); } 70% { box-shadow: 0 0 0 10px rgba(4,107,252,0); } }
        .cta-hero-pulse { animation: ctaPulse 2s ease-in-out infinite; }
        @media (prefers-reduced-motion: reduce) { .cta-hero-pulse { animation: none !important; } }

        /* ── Exit-Intent Popup ── */
        .exit-intent-overlay {
            position: fixed; inset: 0; z-index: 90;
            background: rgba(0, 0, 0, .6);
            display: flex; align-items: center; justify-content: center;
            padding: 1.5rem;
            opacity: 0; pointer-events: none;
            transition: opacity .3s ease;
        }
        .exit-intent-overlay.visible { opacity: 1; pointer-events: auto; }
        .exit-intent-card {
            background: #fff; border-radius: 1.5rem;
            max-width: 480px; width: 100%; padding: 2.5rem;
            text-align: center;
            box-shadow: 0 25px 60px rgba(0, 0, 0, .3);
            transform: translateY(24px) scale(.96);
            transition: transform .4s cubic-bezier(.16, 1, .3, 1);
            position: relative;
            max-height: min(90vh, calc(100dvh - 3rem));
            overflow-y: auto; -webkit-overflow-scrolling: touch;
        }
        .exit-intent-overlay.visible .exit-intent-card { transform: translateY(0) scale(1); }
        .exit-intent-close {
            position: absolute; top: 1rem; right: 1rem;
            width: 44px; height: 44px; border-radius: 50%;
            background: #f1f5f9; border: none; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            color: #64748b; transition: background .2s, color .2s;
        }
        .exit-intent-close:hover { background: #e2e8f0; color: #1e293b; }
        .exit-intent-close:focus-visible { outline: 2px solid #046bfc; outline-offset: 2px; }
        .exit-intent-email {
            width: 100%; height: 44px;
            padding: 0 1rem 0 2.5rem;
            border: 1.5px solid #e2e8f0; border-radius: 9999px;
            font-size: 1rem; font-family: inherit; color: #1e293b;
            background: #fff;
            transition: border-color .2s, box-shadow .2s;
            -webkit-appearance: none; appearance: none;
        }
        .exit-intent-email::placeholder { color: #94a3b8; }
        .exit-intent-email:focus { outline: none; border-color: #046bfc; box-shadow: 0 0 0 3px rgba(4, 107, 252, .15); }

        /* Comparison table fix */
        #comparison table td:first-child,
        #comparison table th:first-child {
          box-shadow: none !important;
        }
        #comparison table tr.bg-slate-50 td:first-child,
        #comparison table tr.bg-slate-50 th:first-child {
          background: #f8fafc !important;
        }
        #comparison table tr:hover td:first-child {
          background: #eff6ff !important;
        }/* ── FAQ ── */
        .faq-item .faq-answer { transition: max-height 0.4s cubic-bezier(0.4,0,0.2,1); }
        .faq-tab { padding: 10px 20px; border: 2px solid #e2e8f0; border-radius: 30px; background: white; font-size: 14px; font-weight: 600; color: #64748b; cursor: pointer; transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease; display: flex; align-items: center; gap: 8px; min-height: 44px; }
        .faq-tab:hover { border-color: #046bfc; color: #046bfc; }
        .faq-tab.active { background: #046bfc; border-color: #046bfc; color: white; }
        .faq-tab:focus-visible { outline-offset: 3px; border-radius: 50px; }
        .faq-category:not(.active) { display: none; }
        .faq-item:not(.active) .faq-answer > div { max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; }
        .faq-item.active .faq-answer > div { max-height: 2000px; transition: max-height 0.4s ease; }
        .faq-item.active .faq-icon { background: #046bfc; color: #fff; border-radius: 50%; }
        .faq-question { cursor: pointer; }
        .faq-question:hover { color: #046bfc; }
        .faq-question:active { background: rgba(4,107,252,0.04); }
        /* -- Wheel carousel -- */
        .src-perspective { perspective: 800px; }
        .src-wheel-container { position: relative; overflow: visible; overscroll-behavior: contain; touch-action: pan-y pinch-zoom; }
        .src-wheel-card { position: absolute; width: 88%; left: 6%; transition: transform .5s cubic-bezier(.4,0,.2,1), opacity .5s cubic-bezier(.4,0,.2,1), filter .5s cubic-bezier(.4,0,.2,1); pointer-events: none; }
        .src-wheel-card[data-position=center] { z-index: 10; transform: translateY(0) scale(1); opacity: 1; filter: blur(0); pointer-events: auto; cursor: zoom-in; }
        .src-wheel-card[data-position=top] { z-index: 5; transform: translateY(-65%) scale(.82); opacity: .5; filter: blur(3px); }
        .src-wheel-card[data-position=bottom] { z-index: 5; transform: translateY(65%) scale(.82); opacity: .5; filter: blur(3px); }
        .src-wheel-card[data-position=hidden] { z-index: 1; transform: translateY(0) scale(.6); opacity: 0; filter: blur(6px); }
        @keyframes bounceY { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
        .animate-bounce-y { animation: bounceY 1.5s ease-in-out infinite; }
        .src-swipe-hint { transition: opacity .3s ease; }
        .src-swipe-hint.hidden-hint { opacity: 0; pointer-events: none; }
        .src-lightbox { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; background: rgba(0,0,0,0); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); opacity: 0; pointer-events: none; transition: opacity .3s ease, background .3s ease; }
        .src-lightbox.visible { opacity: 1; pointer-events: auto; background: rgba(0,0,0,.75); }
        .src-lightbox img { max-width: 90vw; max-height: 85vh; border-radius: 12px; box-shadow: 0 25px 60px rgba(0,0,0,.4); transform: scale(.92); transition: transform .35s cubic-bezier(.4,0,.2,1); }
        .src-lightbox.visible img { transform: scale(1); }
        .src-lightbox-close { position: fixed; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.15); color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: background .2s, transform .2s; z-index: 10000; }
        .src-lightbox-close:hover { background: rgba(255,255,255,.3); transform: scale(1.1); }
        .src-dot { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; background: transparent !important; border: none; padding: 0; cursor: pointer; }
        .src-dot::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #cbd5e1; transition: background .3s ease, width .3s ease, border-radius .3s ease; }
        .src-dot.active::after { background: #046bfc; width: 14px; border-radius: 4px; }

        /* â"€â"€ Capability card thumbnails â"€â"€ */
        .cap-thumb .cap-thumb-fallback { display: none; }
        .cap-thumb--fallback img { display: none !important; }
        .cap-thumb--fallback .cap-thumb-fallback { display: flex; }
        .cap-thumb--fallback .cap-thumb-fallback + div { display: none; } /* hide expand hint when fallback */


        /* ── Counter ── */
        /* Bento gradient glow borders */
        .bento-glow { position: relative; }
        .bento-glow::after {
            content: '';
            position: absolute;
            inset: 0;
            z-index: 2;
            border-radius: inherit;
            padding: 1px;
            background: var(--glow);
            -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
            -webkit-mask-composite: xor;
            mask-composite: exclude;
            opacity: .65;
            transition: opacity .3s ease;
            pointer-events: none;
        }
        .bento-glow:hover::after { opacity: 1; }

        .counter { font-variant-numeric: tabular-nums; }

        /* ── Toast ── (styled via Tailwind classes in HTML) */

        /* ── Submenu ── */
        .submenu { position: fixed; top: 72px; left: 0; right: 0; z-index: 40; background: rgba(4,20,61,0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255,255,255,0.1); transform: translateY(calc(-100% - 80px)); opacity: 0; pointer-events: none; transition: transform 0.3s ease, opacity 0.3s ease; }
        .submenu.visible { transform: translateY(0); opacity: 1; pointer-events: auto; }
        .submenu-link { color: rgba(255,255,255,0.85); font-size: 13px; font-weight: 500; padding: 14px 16px; min-height: 44px; display: flex; align-items: center; transition: color 0.2s; white-space: nowrap; position: relative; }
        .submenu-link:hover, .submenu-link.active { color: white; }
        .submenu-link.active::after { content: ''; position: absolute; bottom: 0; left: 16px; right: 16px; height: 2px; background: #046bfc; border-radius: 2px; }
        .progress-bar { position: absolute; bottom: 0; left: 0; height: 2px; background: linear-gradient(90deg, #046bfc, #3d8bfd); width: 0%; transition: width 0.1s linear; }
        .submenu > div:first-child { scrollbar-width: none; -ms-overflow-style: none; mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%); -webkit-mask-image: linear-gradient(to right, transparent 0, black 16px, black calc(100% - 16px), transparent 100%); }
        .submenu > div:first-child::-webkit-scrollbar { display: none; }

        /* ── Feature card ── */
        .feature-card { transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), box-shadow 0.3s cubic-bezier(0.4,0,0.2,1); }
        .feature-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -12px rgba(0,0,0,0.08), 0 8px 20px -6px rgba(4,20,61,0.12); }

        /* ── Bridge card ── */
        .bridge-card { transition: transform 0.3s cubic-bezier(0.34,1.56,0.64,1), box-shadow 0.3s ease, border-color 0.3s ease; }
        .bridge-card:hover { transform: translateY(-6px); box-shadow: 0 25px 50px -12px rgba(4,20,61,0.12); border-color: rgba(4,107,252,0.3); }

        /* ── Accessibility ── */
        .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); clip-path: inset(50%); white-space: nowrap; border-width: 0; }
        :focus-visible { outline: 2px solid #046bfc; outline-offset: 2px; }
        .btn-pill:focus-visible { outline-offset: 3px; border-radius: 50px; }
        .btn-pill:active { transform: scale(0.97); }

        /* ── Scroll-reveal ── */
        .reveal { opacity: 0; transform: translateY(32px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
        .reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
        .reveal-right { opacity: 0; transform: translateX(40px); transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); }
        .reveal.visible, .reveal-left.visible, .reveal-right.visible { opacity: 1; transform: translate(0,0); }
        .reveal-d1 { transition-delay: 0.1s; }
        .reveal-d2 { transition-delay: 0.2s; }
        .reveal-d3 { transition-delay: 0.3s; }
        .reveal-d4 { transition-delay: 0.4s; }
        .reveal-d5 { transition-delay: 0.5s; }
        .reveal-d6 { transition-delay: 0.6s; }

        /* ── Hero text rotation (CSS-driven) ── */
        .hero-rotate { transition: opacity 0.3s ease, transform 0.3s ease; }
        .hero-rotate-out { opacity: 0; transform: translateY(10px); }

        /* ── Scroll-margin for fixed nav ── */
        section[id] { scroll-margin-top: 140px; }

        /* ── Sticky CTA ── */
        .sticky-cta-mobile { transform: translateY(100%); transition: transform 0.4s cubic-bezier(.4,0,.2,1); padding-bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
        .sticky-cta-mobile.visible { transform: translateY(0); }
        .sticky-cta-desktop { position: fixed; bottom: 0; left: 0; right: 0; z-index: 40; background: #fff; border-top: 1px solid #e2e8f0; box-shadow: 0 -1px 4px rgba(0,0,0,.08); transform: translateY(100%); transition: transform 0.4s ease-out; }
        .sticky-cta-desktop.visible { transform: translateY(0); }
        @media (max-width: 767px) { .sticky-cta-desktop { display: none !important; } }

        /* ── Reduced motion ── */
        @media (prefers-reduced-motion: reduce) {
            *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
            .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
        }

        /* ── Touch active states ── */
        @media (hover: none) {
            .btn-pill:active { transform: scale(0.97); }
            .feature-card:active, .bridge-card:active { transform: scale(0.98); }
            .submenu-link:active { color: white; }
            .faq-question:active { background: rgba(4,107,252,0.04); }
        }

        /* ── Content visibility for below-fold sections ── */
        #what-is, #why-it-matters { content-visibility: auto; contain-intrinsic-size: auto 700px; }
        #capabilities { content-visibility: auto; contain-intrinsic-size: auto 550px; }
        #profit-calculator-deep, #price-history-deep, #competition-deep { content-visibility: auto; contain-intrinsic-size: auto 800px; }
        #how-it-works { content-visibility: auto; contain-intrinsic-size: auto 650px; }
        #chrome-extension, #value-props { content-visibility: auto; contain-intrinsic-size: auto 600px; }

        #comparison { content-visibility: auto; contain-intrinsic-size: auto 900px; }
        #suite { content-visibility: auto; contain-intrinsic-size: auto 550px; }
        #sourcing-guide { content-visibility: auto; contain-intrinsic-size: auto 1200px; }
        #who-its-for { content-visibility: auto; contain-intrinsic-size: auto 600px; }
        #fee-calculator-bridge { content-visibility: auto; contain-intrinsic-size: auto 900px; }
        #faq { content-visibility: auto; contain-intrinsic-size: auto 1000px; }
        #final-cta { content-visibility: auto; contain-intrinsic-size: auto 500px; }

        /* ── Print ── */
        @media print {
            nav, .submenu, .sticky-cta-mobile, .sticky-cta-desktop, .hero-blob, .hero-grid, .section-blob, .macrobox-dark::before, .macrobox-dark::after, footer, #submenu, .toast, .exit-intent-overlay { display: none !important; }
            body { background: white !important; color: #000 !important; font-size: 12pt; }
            section { background: white !important; box-shadow: none !important; break-inside: avoid; page-break-inside: avoid; }
            .macrobox-dark { background: #f5f5f5 !important; color: #000 !important; }
            h1, h2, h3, h4, p, li, span, a { color: #000 !important; }
            h2, h3 { page-break-after: avoid; }
            a[href]::after { content: " (" attr(href) ")"; font-size: 0.85em; color: #666 !important; }
            a[href^="#"]::after, a[href^="javascript"]::after { content: "" !important; }
            img { max-width: 100% !important; }
            .faq-answer { max-height: none !important; overflow: visible !important; }
            .faq-category { display: block !important; }
            * { overflow: visible !important; }
        }

        /* ── Pillar expand / collapse ── */
        .pillar-detail { max-height: 0; overflow: hidden; opacity: 0; transition: max-height .4s ease, opacity .3s ease; }
        [data-aeo^="pillar-"].expanded .pillar-detail { max-height: 800px; opacity: 1; }
        [data-aeo^="pillar-"].expanded .pillar-toggle svg { transform: rotate(180deg); transition: transform .3s ease; }
        .pillar-toggle svg { transition: transform .3s ease; }


        /* ── Animated gradient mesh (B2) ── */
        @keyframes meshDrift { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-20px) scale(1.05); } 66% { transform: translate(-20px,15px) scale(0.95); } 100% { transform: translate(0,0) scale(1); } }
        .mesh-blob { position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; animation: meshDrift 12s ease-in-out infinite; animation-play-state: paused; }
        .mesh-blob-reverse { animation-direction: reverse; animation-duration: 15s; }
        .mesh-blob.anim-play { animation-play-state: running; }
        .cta-hero-pulse { animation-play-state: paused; }
        .cta-hero-pulse.anim-play { animation-play-state: running; }
        .animate-ping { animation-play-state: paused; }
        .animate-ping.anim-play { animation-play-state: running; }

        /* ── Dot pattern (B3) ── */
        .dot-pattern::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(4,107,252,0.04) 1px, transparent 1px); background-size: 24px 24px; pointer-events: none; z-index: 1; }

        /* ── M3: FAQ text size mobile ── */
        @media (max-width: 640px) { .faq-answer p, .faq-answer li { font-size: 0.9375rem; line-height: 1.65; } }

        /* ── M3: Exit-intent padding mobile ── */
        @media (max-width: 480px) { .exit-intent-card > div:last-child { padding-left: 1rem !important; padding-right: 1rem !important; } }

        /* ── P4: Reduce GPU cost of backdrop-filter on mobile ── */
        @media (max-width: 768px) {
            .submenu { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(4,20,61,0.98); }
        }