<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5" />
    <title>Pollan - The future of getting paid</title>
    <meta name="description" content="No website. No setup. Just start. Create your Pollan page and get paid in seconds." />
    
    <!-- Explicitly opt all pages in to indexing -->
    <meta name="robots" content="index, follow" />

    <!-- Facebook Domain Verification -->
    <meta name="facebook-domain-verification" content="3j7zvq2pb8fe3s1dopb9z0fhhq1a51" />
    
    <!-- Open Graph / Social Media Meta Tags -->
    <meta property="og:type" content="website" />
    <meta property="og:title" content="Pollan" />
    <meta property="og:description" content="No website. No setup. Just start. Create your Pollan page and get paid in seconds." />
    <meta property="og:site_name" content="Pollan" />
    <meta property="og:image" content="/pollan-lockup-green.png" />
    
    <!-- Twitter Card Meta Tags -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:title" content="Pollan" />
    <meta name="twitter:description" content="No website. No setup. Just start. Create your Pollan page and get paid in seconds." />
    <meta name="twitter:image" content="/pollan-lockup-green.png" />
    
    <!-- Preload critical fonts and hero image for fast LCP -->
    <link rel="preload" href="/fonts/inter-latin.woff2" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="/hero-main.webp" as="image" fetchpriority="high">

    <!-- Favicon -->
    <link rel="icon" type="image/png" sizes="32x32" href="/pollan-icon.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/pollan-icon.png">
    <link rel="shortcut icon" href="/pollan-icon.png">
    
    <!-- Apple Touch Icon -->
    <link rel="apple-touch-icon" sizes="180x180" href="/pollan-icon.png">
    
    <!-- Web App Manifest -->
    <link rel="manifest" href="/site.webmanifest">

    <!--
      Critical CSS — inlined to paint above-the-fold content immediately without
      waiting for the full stylesheet (which loads asynchronously via main.tsx).
      Covers: box-model reset, body defaults, CSS custom properties, and the
      loading screen overlay that stays visible until React + CSS are both ready.
    -->
    <style>
      *, *::before, *::after { box-sizing: border-box; }
      html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; }
      body {
        margin: 0;
        font-family: 'PPNeueMontreal', 'Inter', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
        background-color: #f8f8f4;
        color: #33272a;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
      }
      img, picture, video, canvas, svg { display: block; max-width: 100%; }

      /* CSS custom properties — needed by shadcn components on first paint */
      :root {
        --background: hsl(0, 0%, 98%);
        --foreground: hsl(222.2, 84%, 4.9%);
        --muted: hsl(210, 40%, 96%);
        --muted-foreground: hsl(215.4, 16.3%, 46.9%);
        --popover: hsl(0, 0%, 100%);
        --popover-foreground: hsl(222.2, 84%, 4.9%);
        --card: hsl(0, 0%, 100%);
        --card-foreground: hsl(222.2, 84%, 4.9%);
        --border: hsl(214.3, 31.8%, 91.4%);
        --input: hsl(214.3, 31.8%, 91.4%);
        --primary: hsl(262.1, 83.3%, 57.8%);
        --primary-foreground: hsl(210, 40%, 98%);
        --secondary: hsl(210, 40%, 96%);
        --secondary-foreground: hsl(222.2, 84%, 4.9%);
        --accent: hsl(210, 40%, 96%);
        --accent-foreground: hsl(222.2, 84%, 4.9%);
        --destructive: hsl(0, 84.2%, 60.2%);
        --destructive-foreground: hsl(210, 40%, 98%);
        --ring: hsl(262.1, 83.3%, 57.8%);
        --radius: 0.5rem;
        --kleva-light-grey: #faeee7;
        --kleva-pink: #F2B8C8;
        --kleva-pink-light: #f8d0dc;
        --kleva-green: #C2E8C8;
        --kleva-dark-grey: #33272a;
        --kleva-red: #ef1b58;
        --font-dime: 'BNDimeDisplay', sans-serif;
      }

      /* Loading-screen overlay — visible until React renders AND stylesheet loads */
      #loading-screen {
        position: fixed;
        top: 0; left: 0;
        width: 100%; height: 100%;
        background: #fff;
        z-index: 9999;
        opacity: 1;
        transition: opacity 0.5s ease-out;
      }
      #loading-screen.fade-out {
        opacity: 0;
        pointer-events: none;
      }
      #root {
        opacity: 0;
        transition: opacity 0.45s ease-out;
      }
      #root.visible {
        opacity: 1;
      }
    </style>
    <script type="module" crossorigin src="/assets/index-SxSI8blZ.js"></script>
  </head>
  <body>
    <!-- Meta Pixel noscript fallback (must be in body, not head) -->
    <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=2261174881050212&ev=PageView&noscript=1"/></noscript>
    <div id="loading-screen"></div>
    
    <div id="root"></div>
    <script>
      // Loading screen coordination: dismissed only when BOTH flags are true.
      // _cssLoaded  → set by main.tsx once the async stylesheet finishes loading
      // _reactRendered → set by the MutationObserver below once React renders
      var _cssLoaded = false;
      var _reactRendered = false;

      function dismissLoader() {
        var root = document.getElementById('root');
        var loadingScreen = document.getElementById('loading-screen');
        if (!loadingScreen || loadingScreen._dismissing) return;
        loadingScreen._dismissing = true;
        loadingScreen.classList.add('fade-out');
        if (root) root.classList.add('visible');
        setTimeout(function() { loadingScreen.remove(); }, 550);
      }

      function tryDismiss() {
        if (_cssLoaded && _reactRendered) dismissLoader();
      }

      // Called by main.tsx when the injected <link rel="stylesheet"> fires onload
      window.__tryDismiss = function() {
        _cssLoaded = true;
        tryDismiss();
      };

      // Watch for React mounting any children into #root
      var observer = new MutationObserver(function() {
        var root = document.getElementById('root');
        if (root && root.children.length > 0) {
          _reactRendered = true;
          tryDismiss();
          observer.disconnect();
        }
      });
      observer.observe(document.getElementById('root'), { childList: true });

      // Safety net: if the stylesheet never fires onload (e.g. cached responses
      // that skip the event), treat CSS as loaded 2 s after window.load.
      window.addEventListener('load', function() {
        setTimeout(function() { _cssLoaded = true; tryDismiss(); }, 2000);
        // Absolute fallback: always dismiss after 6 s to avoid stuck screens.
        setTimeout(dismissLoader, 6000);
      });
    </script>

    <!--
      Facebook / Meta Pixel — loaded AFTER window.load + first user interaction
      so it does not compete with LCP for bandwidth or parser time.
      fbevents.js (~73 KB) is deferred by at least 1 s after load.
    -->
    <script>
      function _initFBPixel() {
        if (window._fbPixelLoaded) return;
        window._fbPixelLoaded = true;
        !function(f,b,e,v,n,t,s)
        {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
        n.callMethod.apply(n,arguments):n.queue.push(arguments)};
        if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
        n.queue=[];t=b.createElement(e);t.async=!0;
        t.src=v;s=b.getElementsByTagName(e)[0];
        s.parentNode.insertBefore(t,s)}(window, document,'script',
        'https://connect.facebook.net/en_US/fbevents.js');
        fbq('init', '2261174881050212');
        fbq('track', 'PageView');
      }

      // Load 1 s after window.load (well after LCP)
      window.addEventListener('load', function() {
        setTimeout(_initFBPixel, 1000);
      }, { once: true });

      // Also load immediately on first user interaction (scroll, tap, or click)
      ['scroll', 'touchstart', 'click'].forEach(function(evt) {
        window.addEventListener(evt, _initFBPixel, { once: true, passive: true });
      });
    </script>

    <!-- Replit dev-mode banner (no-op in production) -->
    <script type="text/javascript" src="https://replit.com/public/js/replit-dev-banner.js" defer></script>
  </body>
</html>
