<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- SEO Metas -->
    <title>Wine Subscriptions Paired To Your Tastes | Good Pair Days</title>

    <!-- General Metas -->
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, shrink-to-fit=no, maximum-scale=1.0, user-scalable=0, viewport-fit=cover"
    />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- Social Media Metas -->
    <meta name="author" content="Good Pair Days" />
    <meta property="og:site_name" content="Good Pair Days" />
    <meta property="og:type" content="website" />

    <!-- Google Search Console Metas -->
    <meta name="google-site-verification" content="cMvA11HqEx5xfbjAFzYl0D1b8R9lWarbqyZZA_ApTT4" />

    <!-- Crawling Metas -->
    <meta name="robots" content="all" />

    <!-- Manifest -->
    <link rel="manifest" href="/manifest.json" />

    <!-- Favicon -->
    <link rel="apple-touch-icon" sizes="180x180" href="/favicon/apple-touch-icon.png" />
    <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon-32x32.png" />
    <link rel="icon" type="image/png" sizes="16x16" href="/favicon/favicon-16x16.png" />
    <link rel="mask-icon" href="/favicon/safari-pinned-tab.svg" color="#ff8361" />
    <meta name="msapplication-TileColor" content="#ff8361" />
    <meta name="theme-color" content="#ff8361" />

    <!-- Preload the two hero-region fonts so the .woff2 fetch starts during
         HTML parse rather than after the inline @font-face below is matched
         against the DOM. Targets LCP: Interstate-BlackCompressed renders the
         big page title, BauPro-Medium the subtitle / CTA copy. The other
         three faces declared below stay on lazy discovery — preloading every
         font burns critical-path bandwidth the JS chunks need.
         crossorigin is required even though the fonts are same-origin —
         fonts are fetched in CORS mode unconditionally; without the
         attribute the preload won't be reused and we'd double-fetch. -->
    <link
      rel="preload"
      href="/fonts/Interstate/InterstateBlackCompressed.woff2"
      as="font"
      type="font/woff2"
      crossorigin
    />
    <link rel="preload" href="/fonts/BauPro/BauPro-Medium.woff2" as="font" type="font/woff2" crossorigin />

    <!-- Inline critical font-face declarations to avoid render-blocking CSS -->
    <style>
      @font-face {
        font-family: BauPro-Regular;
        src: url("/fonts/BauPro/BauPro.woff2") format("woff2"),
          url("/fonts/BauPro/BauPro.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: BauPro-Medium;
        src: url("/fonts/BauPro/BauPro-Medium.woff2") format("woff2"),
          url("/fonts/BauPro/BauPro-Medium.woff") format("woff");
        font-weight: 500;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Interstate-BlackCompressed";
        src: url("/fonts/Interstate/InterstateBlackCompressed.woff2") format("woff2"),
          url("/fonts/Interstate/InterstateBlackCompressed.woff") format("woff");
        font-weight: 900;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: "Interstate-UltraBlack";
        src: url("/fonts/Interstate/Interstate-UltraBlack.woff2") format("woff2"),
          url("/fonts/Interstate/Interstate-UltraBlack.woff") format("woff");
        font-weight: 900;
        font-style: normal;
        font-display: swap;
      }
      @font-face {
        font-family: Concept-Regular;
        src: url("/fonts/Concept/Concept-Regular.woff2") format("woff2"),
          url("/fonts/Concept/Concept-Regular.woff") format("woff");
        font-weight: normal;
        font-style: normal;
        font-display: swap;
      }

      /* Initial loading spinner — paints on the first frame after HTML parse,
         well before JS executes. Replaced by React's <StyledLoading /> when
         createRoot first commits (the spinner SVG and animation are
         intentionally identical to src/components/atoms/Loading so the
         swap is visually invisible). Update both spots together if either
         changes. */
      @keyframes gpd-initial-loader-spin {
        to {
          transform: rotate(360deg);
        }
      }
      .gpd-initial-loader {
        text-align: center;
        min-width: 100%;
        min-height: 200px;
        display: flex;
        justify-content: center;
        align-items: center;
      }
      .gpd-initial-loader svg {
        height: 30px;
        width: 30px;
        animation: gpd-initial-loader-spin 1s linear infinite;
      }
    </style>

    <!-- External domains  -->
    <link rel="preconnect" href="https://js.stripe.com" />
    <link rel="preconnect" href="https://m.stripe.network" />
    <link rel="preconnect" href="https://base.goodpairdays.com" />
    <link rel="preconnect" href="https://www.google.com.au" />

    <!-- Capacitor native app detection. Used to flag features that
         only exist inside the native shell (the bottom tab bar, the
         toast offset above it). Standalone-mode CSS rules — anything
         tied to safe-area-inset-* — use @media (display-mode: ...)
         instead, which catches Capacitor (Android WebView reports
         fullscreen) and installed PWAs (report standalone) without
         a JS bridge. -->
    <script>
      window.__IS_CAPACITOR_NATIVE__ =
        window.Capacitor && window.Capacitor.isNativePlatform && window.Capacitor.isNativePlatform();
      if (window.__IS_CAPACITOR_NATIVE__) {
        document.documentElement.setAttribute("data-capacitor-native", "true");
        document.addEventListener("DOMContentLoaded", function () {
          document.body.setAttribute("data-capacitor-native", "true");
        });
      }
    </script>

    <!-- Stub global tracking functions so call sites don't crash when scripts are disabled -->
    <script>
      window.dataLayer = window.dataLayer || [];
      window.gtag =
        window.gtag ||
        function () {
          window.dataLayer.push(arguments);
        };
    </script>

    <!-- Google tag (gtag.js) - disabled in native app -->
    <script>
      if ("G-XE9TPQGFPG" && !window.__IS_CAPACITOR_NATIVE__) {
        var s = document.createElement("script");
        s.async = true;
        s.src = "https://www.googletagmanager.com/gtag/js?id=G-XE9TPQGFPG";
        document.head.appendChild(s);

        window.gtag("js", new Date());
        window.gtag("config", "G-XE9TPQGFPG");
        window.gtag("consent", "default", {
          analytics_storage: "denied",
          region: ["GB"],
        });
        window.gtag("consent", "default", {
          analytics_storage: "granted",
        });
      }
    </script>
    <!-- End Google tag -->

    <!-- CookieYes - UK pages only, production only, disabled in native app -->
    <script>
      (function () {
        if (window.__IS_CAPACITOR_NATIVE__) return;
        const isUKPage = window.location.href.includes("/uk");
        const isProduction = "production" === "production";
        if (isUKPage && isProduction) {
          const script = document.createElement("script");
          script.id = "cookieyes";
          script.type = "text/javascript";
          script.src = "https://cdn-cookieyes.com/client_data/a8ff77f802dfe4a56dd17e1f/script.js";
          document.head.appendChild(script);
          document.addEventListener("cookieyes_consent_update", function (eventData) {
            const data = eventData.detail;
            const isAnalyticsAccepted = data.accepted.includes("analytics");
            window.localStorage.setItem("userHasSeenCookieBox", isAnalyticsAccepted);
          });
        }
      })();
    </script>
    <script type="module" crossorigin src="/assets/index-CGfOqm01.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/_polyfill-node.global-CL4hvcq6.js">
    <link rel="modulepreload" crossorigin href="/assets/preload-helper-BFIh8LAo.js">
    <link rel="modulepreload" crossorigin href="/assets/dist-BUBSxGKv.js">
    <link rel="modulepreload" crossorigin href="/assets/variables-DuT_fOCP.js">
    <link rel="modulepreload" crossorigin href="/assets/urls.helper-Cf-HGCZw.js">
    <link rel="modulepreload" crossorigin href="/assets/queries-BRiLhjI6.js">
    <link rel="modulepreload" crossorigin href="/assets/context-DrSJGayW.js">
    <link rel="modulepreload" crossorigin href="/assets/urls-qB7Dc-F6.js">
    <link rel="modulepreload" crossorigin href="/assets/client-DtMIQmyw.js">
    <link rel="modulepreload" crossorigin href="/assets/useQuery-yDv3Xysx.js">
    <link rel="modulepreload" crossorigin href="/assets/useMutation-B7J5ajV3.js">
    <link rel="modulepreload" crossorigin href="/assets/jsx-runtime-7l-x9gZ0.js">
    <link rel="modulepreload" crossorigin href="/assets/Mutation-DFpE4C_n.js">
    <link rel="modulepreload" crossorigin href="/assets/Query-BhP-SXca.js">
    <link rel="modulepreload" crossorigin href="/assets/graphql-D3XTJiWf.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-CsMsnRDc.js">
    <link rel="modulepreload" crossorigin href="/assets/useTranslation-CEb7oPFL.js">
    <link rel="modulepreload" crossorigin href="/assets/react-router-dom-BWoYZX15.js">
    <link rel="modulepreload" crossorigin href="/assets/typeof-DJVQKBQo.js">
    <link rel="modulepreload" crossorigin href="/assets/esm-F6Z2oHvS.js">
    <link rel="modulepreload" crossorigin href="/assets/_polyfill-node.process-DtnLewf7.js">
    <link rel="modulepreload" crossorigin href="/assets/styled-components.browser.esm-BQb30V86.js">
    <link rel="modulepreload" crossorigin href="/assets/index.browser-21s6Fpsi.js">
    <link rel="modulepreload" crossorigin href="/assets/react-outside-click-handler-BcyXmFt2.js">
    <link rel="modulepreload" crossorigin href="/assets/classnames-Dx9B0ZDd.js">
    <link rel="modulepreload" crossorigin href="/assets/react-dom-DNgD_P6X.js">
    <link rel="modulepreload" crossorigin href="/assets/dist-C8r-1IxD.js">
    <link rel="modulepreload" crossorigin href="/assets/alerts-LRoosJUH.js">
    <link rel="modulepreload" crossorigin href="/assets/headerLogo-DM9CPmC6.js">
    <link rel="modulepreload" crossorigin href="/assets/breakpoints-DODtzQUZ.js">
    <link rel="modulepreload" crossorigin href="/assets/HeaderLogo-CG_LbIvT.js">
    <link rel="modulepreload" crossorigin href="/assets/cross-B1Y8otze.js">
    <link rel="modulepreload" crossorigin href="/assets/Loading-axhPmPYD.js">
    <link rel="modulepreload" crossorigin href="/assets/sub_box-KWtDerC1.js">
    <link rel="modulepreload" crossorigin href="/assets/Button-CKEzI2T8.js">
    <link rel="modulepreload" crossorigin href="/assets/Container-CKgw8Z9X.js">
    <link rel="modulepreload" crossorigin href="/assets/safeArea-CEO6TfJ2.js">
    <link rel="modulepreload" crossorigin href="/assets/CloseButton-DZMHPtvZ.js">
    <link rel="modulepreload" crossorigin href="/assets/TrayContainer-CraruWAQ.js">
    <link rel="modulepreload" crossorigin href="/assets/StyledBoxTray-Cw_hPVQ4.js">
    <link rel="modulepreload" crossorigin href="/assets/nativeBackHandler-DO4vA5CD.js">
    <link rel="modulepreload" crossorigin href="/assets/SideTray-CdzpB7GH.js">
    <link rel="modulepreload" crossorigin href="/assets/OffCanvasTray-EJYsCHnf.js">
    <link rel="modulepreload" crossorigin href="/assets/ModalContainer-C-JPIoGK.js">
    <link rel="modulepreload" crossorigin href="/assets/externalUrls-DAADYRo-.js">
    <link rel="stylesheet" crossorigin href="/assets/index-CQsXJrgc.css">
  </head>
  <body>
    <noscript>
      You need to enable JavaScript to run this app.
      <img
        height="1"
        width="1"
        style="display: none"
        src="https://www.facebook.com/tr?id=8248264078589623&ev=PageView&noscript=1"
      />
    </noscript>
    <div id="root">
      <div class="gpd-initial-loader" aria-hidden="true">
        <svg height="32" viewBox="0 0 32 32" width="32" xmlns="http://www.w3.org/2000/svg">
          <path
            d="m188 1195c8.284271 0 15-6.71573 15-15s-6.715729-15-15-15-15 6.71573-15 15"
            fill="none"
            stroke="#000"
            stroke-linecap="round"
            stroke-linejoin="round"
            stroke-width="1.5"
            transform="matrix(0 1 -1 0 1196 -172)"
          />
        </svg>
      </div>
    </div>
  </body>
</html>
