<!DOCTYPE html><html lang="en"><head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">

    <!-- Preconnect hints - MUST be first after meta tags -->
    <link rel="preconnect" href="https://fonts.googleapis.com" crossorigin="">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin="">
    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
    <link rel="dns-prefetch" href="https://connect.facebook.net">
    <link rel="dns-prefetch" href="https://t.contentsquare.net">
    <link rel="dns-prefetch" href="https://d64gsuwffb70l.cloudfront.net">
    <link rel="preconnect" href="https://res.cloudinary.com" crossorigin="">
    <link rel="dns-prefetch" href="https://res.cloudinary.com">

    <!-- Critical CSS - inline for immediate rendering -->
    <style>
      /* Critical above-the-fold styles */
      *,::before,::after{box-sizing:border-box;border:0 solid #e5e7eb}
      html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji"}
      body{margin:0;line-height:inherit}
      h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}
      a{color:inherit;text-decoration:inherit}
      img,video{max-width:100%;height:auto}
      button{background-color:transparent;cursor:pointer}
      
      /* Loading state */
      #root:empty::after{content:"";position:fixed;top:50%;left:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}
      @keyframes spin{to{transform:rotate(360deg)}}
      
      /* Critical layout classes */
      .min-h-screen{min-height:100vh}
      .flex{display:flex}
      .flex-col{flex-direction:column}
      .items-center{align-items:center}
      .justify-center{justify-content:center}
      .text-center{text-align:center}
      .font-bold{font-weight:700}
      .text-4xl{font-size:2.25rem;line-height:2.5rem}
      .text-5xl{font-size:3rem;line-height:1}
      .text-6xl{font-size:3.75rem;line-height:1}
      .leading-tight{line-height:1.25}
      .bg-white{background-color:#fff}
      .text-gray-500{color:#6b7280}
      
      @media(min-width:768px){.md\:text-5xl{font-size:3rem;line-height:1}}
      @media(min-width:1024px){.lg\:text-6xl{font-size:3.75rem;line-height:1}}
    </style>

    <!-- Preload critical font (Poppins) -->
    <link rel="preload" href="https://fonts.gstatic.com/s/poppins/v22/pxiEyp8kv8JHgFVrJJfecg.woff2" as="font" type="font/woff2" crossorigin="">
    
    <!-- Load Poppins font with swap -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&amp;display=swap" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;700&amp;display=swap"></noscript>

    <!-- Load Inter + JetBrains Mono non-blocking (moved from CSS @import) -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;600&amp;display=swap" media="print" onload="this.media='all'">
    <noscript><link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&amp;family=JetBrains+Mono:wght@400;500;600&amp;display=swap"></noscript>

    <!-- Editor fonts - load only when needed (after user interaction) -->
    <link rel="prefetch" href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&amp;family=Open+Sans:wght@400;700&amp;family=Lato:wght@400;700&amp;family=Montserrat:wght@400;700&amp;family=Oswald:wght@400;700&amp;family=Raleway:wght@400;700&amp;family=PT+Sans:wght@400;700&amp;family=Merriweather:wght@400;700&amp;family=Playfair+Display:wght@400;700&amp;family=Nunito:wght@400;700&amp;family=Ubuntu:wght@400;700&amp;family=Mukta:wght@400;700&amp;family=Rubik:wght@400;700&amp;family=Work+Sans:wght@400;700&amp;family=Noto+Sans:wght@400;700&amp;family=Fira+Sans:wght@400;700&amp;family=Quicksand:wght@400;700&amp;family=Karla:wght@400;700&amp;family=Barlow:wght@400;700&amp;family=Oxygen:wght@400;700&amp;family=Cabin:wght@400;700&amp;family=Bebas+Neue&amp;family=Anton&amp;family=Pacifico&amp;family=Dancing+Script:wght@400;700&amp;family=Lobster&amp;family=Righteous&amp;family=Permanent+Marker&amp;family=Indie+Flower&amp;family=Shadows+Into+Light&amp;family=Satisfy&amp;family=Caveat:wght@400;700&amp;family=Amatic+SC:wght@400;700&amp;family=Architects+Daughter&amp;family=Kalam:wght@400;700&amp;family=Roboto+Mono:wght@400;700&amp;family=Source+Code+Pro:wght@400;700&amp;family=IBM+Plex+Mono:wght@400;700&amp;family=JetBrains+Mono:wght@400;700&amp;display=swap" as="style">

    <title>Banners On The Fly - Professional Banners • Free Next-Day Air • 24-Hour Production</title>
    <meta name="description" content="Professional vinyl banners with free next-day air shipping and 24-hour production. Design custom banners online with live preview.">
    <link rel="icon" type="image/x-icon" href="/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">

    <meta property="og:title" content="Banners On The Fly - Professional Banners • Free Next-Day Air • 24-Hour Production">
    <meta property="og:description" content="Professional vinyl banners with free next-day air shipping and 24-hour production. Design custom banners online with live preview.">
    <meta property="og:type" content="website">
    <meta property="og:url" content="https://bannersonthefly.com">
    <!-- TODO: Replace /images/og-default.png with a real 1200x630 PNG/JPG social image -->
    <meta property="og:image" content="https://bannersonthefly.com/images/og-default.png">
    <meta property="og:image:secure_url" content="https://bannersonthefly.com/images/og-default.png">
    <meta property="og:image:type" content="image/png">
    <meta property="og:image:width" content="1200">
    <meta property="og:image:height" content="630">
    <meta property="og:site_name" content="Banners on the Fly">

    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Banners On The Fly - Professional Banners • Free Next-Day Air • 24-Hour Production">
    <meta name="twitter:description" content="Professional vinyl banners with free next-day air shipping and 24-hour production. Design custom banners online with live preview.">
    <meta name="twitter:image" content="https://bannersonthefly.com/images/og-default.png">
    <!-- Facebook Pixel stub — synchronous so early fbq() calls are queued -->
    <script>
      !function(f,b,e,v,n)
      {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=[];}(window, document,'script',
      'https://connect.facebook.net/en_US/fbevents.js');
      fbq('init', '1487321805934457');
      fbq('track', 'PageView');
    </script>

    <!-- Google Analytics stub — must be defined before any component calls gtag() -->
    <script>
      window.dataLayer = window.dataLayer || [];
      function gtag(){dataLayer.push(arguments);}
      gtag('js', new Date());
      gtag('config', 'G-2TQ6JYYZV7');
    </script>
    <script type="module" crossorigin="" src="/assets/index-Bu1MBIN7.js"></script>
    <link rel="modulepreload" crossorigin="" href="/assets/react-core-CbSIQEUy.js">
    <link rel="modulepreload" crossorigin="" href="/assets/radix-ui-BIuQaSMS.js">
    <link rel="modulepreload" crossorigin="" href="/assets/utils--BulIq_u.js">
    <link rel="modulepreload" crossorigin="" href="/assets/state-EOYMiCrc.js">
    <link rel="modulepreload" crossorigin="" href="/assets/react-router-D8LxJs6z.js">
    <link rel="modulepreload" crossorigin="" href="/assets/pdf-libs-CIAr3tGa.js">
    <link rel="stylesheet" crossorigin="" href="/assets/index-ByLXOsf3.css">
  </head>

  <body>
    <!-- Meta Pixel Noscript -->
    <noscript><img height="1" width="1" style="display:none" src="https://res.cloudinary.com/dtrxl120u/image/fetch/f_auto,q_auto/https://www.facebook.com/tr%3Fid%3D1487321805934457%26ev%3DPageView%26noscript%3D1?_a=BBFAAAAA0" loading="lazy"></noscript>
    <div id="root"></div>

    <!-- Defer Google Tag Manager to after page load -->
    <script>
      window.addEventListener('load', function() {
        var s = document.createElement('script');
        s.src = 'https://www.googletagmanager.com/gtag/js?id=G-2TQ6JYYZV7';
        s.async = true;
        document.head.appendChild(s);
      });
    </script>

    <!-- Defer remaining analytics to after page is interactive -->
    <script>
    // Wait for page to be fully loaded and idle
    if ('requestIdleCallback' in window) {
      requestIdleCallback(loadAnalytics, { timeout: 5000 });
    } else {
      setTimeout(loadAnalytics, 3000);
    }

    function loadAnalytics() {
      // Meta Pixel — only the script download is deferred; stub is already in <head>
      var fbScript = document.createElement('script');
      fbScript.async = true;
      fbScript.src = 'https://connect.facebook.net/en_US/fbevents.js';
      document.head.appendChild(fbScript);

      // Contentsquare - defer by 3 seconds
      setTimeout(function() {
        var csScript = document.createElement('script');
        csScript.src = 'https://t.contentsquare.net/uxa/f68a18990d1b7.js';
        document.head.appendChild(csScript);
      }, 3000);

      // LinkedIn - defer by 5 seconds
      setTimeout(function() {
        _linkedin_partner_id = "8163164";
        window._linkedin_data_partner_ids = window._linkedin_data_partner_ids || [];
        window._linkedin_data_partner_ids.push(_linkedin_partner_id);
        (function(l) {
          if (!l){window.lintrk = function(a,b){window.lintrk.q.push([a,b])};
          window.lintrk.q=[]}
          var s = document.getElementsByTagName("script")[0];
          var b = document.createElement("script");
          b.type = "text/javascript";b.async = true;
          b.src = "https://snap.licdn.com/li.lms-analytics/insight.min.js";
          s.parentNode.insertBefore(b, s);})(window.lintrk);
      }, 5000);
    }
    </script>
    <noscript>
    <img height="1" width="1" style="display:none;" alt="" src="https://res.cloudinary.com/dtrxl120u/image/fetch/f_auto,q_auto/https://px.ads.linkedin.com/collect/%3Fpid%3D8163164%26fmt%3Dgif?_a=BBFAAAAA0" loading="lazy">
    </noscript>
  

</body></html>