<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- viewport-fit=cover lets the page paint into iOS' safe-area
         (status bar + home indicator). Required for the PWA full-
         screen treatment to work — without it the standalone web
         app shows an opaque grey bar at the top on iPhone. Pages
         that need to keep content out of the safe area use
         padding: env(safe-area-inset-top/bottom). -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />

    <!-- Favicons -->
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16.png" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />

    <!-- Primary meta -->
    <title>Cheeze | Save the date</title>
    <meta name="description" content="Stay tuned as we get ready to rethink the world of rewards." />
    <meta name="theme-color" content="#3333FF" />

    <!-- PWA manifest — Cheeze iD installable web app (scope: /id/) -->
    <link rel="manifest" href="/manifest.webmanifest" />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- black-translucent makes iOS render the status bar as a
         transparent overlay on top of the page rather than an opaque
         bar above it. Combined with viewport-fit=cover above and
         safe-area padding in CSS, the page can paint behind the
         status bar so the web app feels truly full-screen. White
         status-bar text is enforced — page colours need enough
         contrast at the very top edge. -->
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    <meta name="apple-mobile-web-app-title" content="Cheeze iD" />
    <link rel="apple-touch-icon" sizes="192x192" href="/id-icon-192.png" />

    <!-- Open Graph (Facebook, LinkedIn, iMessage, Slack, WhatsApp) -->
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://cheeze.com/" />
    <meta property="og:title" content="Cheeze | Save the date" />
    <meta property="og:description" content="Stay tuned as we get ready to rethink the world of rewards." />
    <meta property="og:image" content="https://cheeze.com/save-the-date.jpg" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />

    <!-- Twitter -->
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:url" content="https://cheeze.com/" />
    <meta name="twitter:title" content="Cheeze | Save the date" />
    <meta name="twitter:description" content="Stay tuned as we get ready to rethink the world of rewards." />
    <meta name="twitter:image" content="https://cheeze.com/save-the-date.jpg" />

    <!-- Preload images visible in the first paint to eliminate layout shift -->
    <link rel="preload" as="image" href="/issuers-studio.webp" fetchpriority="high" />
    <link rel="preload" as="image" href="/hero-restaurant.webp" fetchpriority="high" />

    <!-- Auth SDKs — used by /claim page. Loaded async so they don't block the holding page. -->
    <script async src="https://appleid.cdn-apple.com/appleauth/static/jsapi/appleid/1/en_US/appleid.auth.js"></script>
    <script async src="https://accounts.google.com/gsi/client?hl=en"></script>
    <script type="module" crossorigin src="/assets/index-DX-v7kFM.js"></script>
    <link rel="stylesheet" crossorigin href="/assets/index-DZLJrecy.css">
  </head>
  <body>
    <!-- .cz-dots styles — used by the React <DotLoader /> and
         <LoadingDots /> components. No pre-React boot splash uses
         them anymore (we removed the splash to kill the visible jolt
         between boot animation and React-mounted loader). Kept inline
         so React loaders work even before the Vite CSS bundle loads. -->
    <style>
      .cz-dots {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 6px;
      }
      .cz-dots span {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #3333FF;
        animation: cz-dots-bounce 0.9s infinite ease-in-out;
      }
      .cz-dots span:nth-child(1) { animation-delay: 0s; }
      .cz-dots span:nth-child(2) { animation-delay: 0.15s; }
      .cz-dots span:nth-child(3) { animation-delay: 0.3s; }
      @keyframes cz-dots-bounce {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-8px); }
      }
      /* Background colour of the empty #root area while React is
         downloading. Matches the in-app page background so there's no
         white flash on first paint. */
      html, body { background: #FBFBFD; }
    </style>
    <!-- No pre-React splash. Empty white #root until main.tsx mounts and
         renders its own loader. The previous .cz-dots boot splash
         caused a visible jolt when React replaced the splash DOM with
         its own loader — animation engines can't share an animation
         timeline across element replacement, so the dots reset phase
         and "bounced in". Cleaner to skip the splash entirely; the
         html background (#FBFBFD via body styles) keeps the screen
         from flashing white. -->
    <div id="root"></div>
  </body>
</html>
