<!doctype html>
<html lang="en-US" class="scroll-smooth">
  <head>
    <meta charset="UTF-8" />
    <!--
      Frame-0 color mode (inline, zero network). Must run before any external
      script or stylesheet so pinned/system dark never paints browser-default
      light while /boot/theme.js is in flight. Keep tri-state resolution in
      lockstep with public/boot/theme.js + src/lib/colorMode.ts.
    -->
    <script id="zyta-frame0-theme-seed">
      (function () {
        var DARK = "hsl(222 28% 4%)";
        var LIGHT = "hsl(40 24% 94%)";
        var systemDark = false;
        try {
          systemDark =
            typeof window.matchMedia === "function" &&
            window.matchMedia("(prefers-color-scheme: dark)").matches;
        } catch (e) {
          systemDark = false;
        }
        // Accept only a non-null plain object state; corrupt shapes fall back to OS.
        // Never let storage access or parse throw before root paint.
        var state = {};
        try {
          var raw = null;
          try {
            raw = window.localStorage.getItem("Zyta-storage");
          } catch (e) {
            raw = null;
          }
          if (raw) {
            var parsed = JSON.parse(raw);
            if (
              parsed &&
              typeof parsed === "object" &&
              parsed.state !== null &&
              typeof parsed.state === "object" &&
              !Array.isArray(parsed.state)
            ) {
              state = parsed.state;
            }
          }
        } catch (e) {
          state = {};
        }
        var pref = state.colorModePreference;
        var isDark;
        if (pref === "light") isDark = false;
        else if (pref === "dark") isDark = true;
        else if (pref === "system") isDark = systemDark;
        else if (Object.prototype.hasOwnProperty.call(state, "isDarkMode")) {
          isDark = Boolean(state.isDarkMode);
        } else {
          isDark = systemDark;
        }
        var root = document.documentElement;
        root.classList.toggle("dark", isDark);
        root.dataset.themeMode = isDark ? "dark" : "light";
        root.style.colorScheme = isDark ? "dark" : "light";
        // Solid paint for first frame; keep in sync via applyColorModeToDocument.
        root.style.backgroundColor = isDark ? DARK : LIGHT;
        root.style.setProperty("--zyta-boot-surface", isDark ? DARK : LIGHT);
        root.style.setProperty(
          "--zyta-boot-text",
          isDark ? "#f8fafc" : "#1f2937",
        );
      })();
    </script>
    <style id="zyta-theme-critical">
      /* Critical canvas before CSS modules / theme.js prepaint sheet */
      html {
        background-color: var(--zyta-boot-surface, hsl(40 24% 94%));
      }
      html.dark,
      html[data-theme-mode="dark"] {
        background-color: var(--zyta-boot-surface, hsl(222 28% 4%));
        color-scheme: dark;
      }
      html[data-theme-mode="light"] {
        background-color: var(--zyta-boot-surface, hsl(40 24% 94%));
        color-scheme: light;
      }
    </style>
    <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/x-icon" href="/favicon.ico" />
    <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: light)"
      content="hsl(40 24% 94%)"
    />
    <meta
      name="theme-color"
      media="(prefers-color-scheme: dark)"
      content="hsl(222 28% 4%)"
    />
    <link rel="manifest" href="/manifest.webmanifest" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, viewport-fit=cover, interactive-widget=resizes-content"
    />
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <meta
      name="apple-mobile-web-app-status-bar-style"
      content="black-translucent"
    />
    <meta name="apple-mobile-web-app-title" content="Zyta" />
    <meta name="mobile-web-app-capable" content="yes" />
    <meta name="format-detection" content="telephone=no" />
    <meta
      name="description"
      content="Zyta is a multi-tenant business platform for branded apps, storefronts, marketing sites, and operational workspaces."
    />
    <link rel="canonical" href="https://zyta.dev/" />
    <meta property="og:title" content="Zyta | Multi-Tenant Business Platform" />
    <meta
      property="og:description"
      content="A white-label platform for branded apps, storefronts, marketing sites, and operational workspaces."
    />
    <meta property="og:url" content="https://zyta.dev/" />
    <meta property="og:type" content="website" />

    <title>Zyta | Multi-Tenant Business Platform</title>
    <script src="/boot/theme.js"></script>
    <script src="/boot/recovery.js"></script>
    <script src="/boot/outage-shell.js"></script>
    <script type="module" crossorigin src="/assets/index-CijfBeWi.js"></script>
    <link rel="modulepreload" crossorigin href="/assets/rolldown-runtime-DAXXjFlN.js">
    <link rel="modulepreload" crossorigin href="/assets/v-react-CA00bjEo.js">
    <link rel="modulepreload" crossorigin href="/assets/v-buffer-DrXX2M7v.js">
    <link rel="modulepreload" crossorigin href="/assets/v-print-QUxerUJl.js">
    <link rel="modulepreload" crossorigin href="/assets/vendor-B7oawAhn.js">
    <link rel="modulepreload" crossorigin href="/assets/v-forms-BPXubvrL.js">
    <link rel="modulepreload" crossorigin href="/assets/v-validation-DJmvGTt9.js">
    <link rel="modulepreload" crossorigin href="/assets/config-sUDhlrmu.js">
    <link rel="modulepreload" crossorigin href="/assets/v-css-utils-BicNWLTg.js">
    <link rel="modulepreload" crossorigin href="/assets/v-date-DWqkWZIM.js">
    <link rel="modulepreload" crossorigin href="/assets/utils-Bk01Ud45.js">
    <link rel="modulepreload" crossorigin href="/assets/Button-CO-1UTzD.js">
    <link rel="modulepreload" crossorigin href="/assets/themeGovernancePolicy-kbdKkYhb.js">
    <link rel="modulepreload" crossorigin href="/assets/platformHostname-D6HRmhoy.js">
    <link rel="modulepreload" crossorigin href="/assets/v-security-CFEyPUs0.js">
    <link rel="modulepreload" crossorigin href="/assets/v-supabase-core-D5GjCvtg.js">
    <link rel="modulepreload" crossorigin href="/assets/v-icons-D3urnOTv.js">
    <link rel="modulepreload" crossorigin href="/assets/v-toast-CKg-QCAS.js">
    <link rel="modulepreload" crossorigin href="/assets/toneStyles-CVUdw8uQ.js">
    <link rel="modulepreload" crossorigin href="/assets/telemetry-D87QNNb9.js">
    <link rel="modulepreload" crossorigin href="/assets/supabase-DziYqqUx.js">
    <link rel="modulepreload" crossorigin href="/assets/assetUtils-CRsEp9_3.js">
    <link rel="modulepreload" crossorigin href="/assets/brandingInstallAssets-BkbQ0LyG.js">
    <link rel="modulepreload" crossorigin href="/assets/branding-ssEV1dLn.js">
    <link rel="modulepreload" crossorigin href="/assets/greenThumbData-BHHmoOWK.js">
    <link rel="modulepreload" crossorigin href="/assets/AppProvider-DnrO8CKJ.js">
    <link rel="modulepreload" crossorigin href="/assets/v-i18n-Dmdx5Kq5.js">
    <link rel="modulepreload" crossorigin href="/assets/v-query-BwfsxWzG.js">
    <link rel="modulepreload" crossorigin href="/assets/v-tanstack-B-ylxNgr.js">
    <link rel="modulepreload" crossorigin href="/assets/features-C6Zu6x_b.js">
    <link rel="modulepreload" crossorigin href="/assets/poweredByZytaPolicy-1E-Wi7r_.js">
    <link rel="modulepreload" crossorigin href="/assets/v-state-av8T5XPW.js">
    <link rel="modulepreload" crossorigin href="/assets/motion-WmZ9k6fz.js">
    <link rel="modulepreload" crossorigin href="/assets/v-motion-BzIVfzGT.js">
    <link rel="modulepreload" crossorigin href="/assets/v-iconify-Bo75pOt-.js">
    <link rel="modulepreload" crossorigin href="/assets/recoveryEscalation-cDk67reH.js">
    <link rel="modulepreload" crossorigin href="/assets/v-radix-BknjV8On.js">
    <link rel="modulepreload" crossorigin href="/assets/Card-BLzsETEF.js">
    <link rel="modulepreload" crossorigin href="/assets/OverlayErrorBoundary-CZS_-YqF.js">
    <link rel="modulepreload" crossorigin href="/assets/confirmDialog-CPwSyWw8.js">
    <link rel="modulepreload" crossorigin href="/assets/AuthProvider-DEhoCJz7.js">
    <link rel="modulepreload" crossorigin href="/assets/v-router-3jZq_SHs.js">
    <link rel="modulepreload" crossorigin href="/assets/ModuleErrorBoundary-CgHszmqx.js">
    <link rel="modulepreload" crossorigin href="/assets/Tooltip-Cp75Bf3m.js">
    <link rel="modulepreload" crossorigin href="/assets/usePrefersReducedMotion-hqRsHpMZ.js">
    <link rel="modulepreload" crossorigin href="/assets/routeTransitionState-DcMyfpZv.js">
    <link rel="modulepreload" crossorigin href="/assets/RouteIntentLink-6sa23yNw.js">
    <link rel="modulepreload" crossorigin href="/assets/SeoHead-JBpZhgV2.js">
    <link rel="modulepreload" crossorigin href="/assets/useSmoothNavigate-BGR3c_rR.js">
    <link rel="modulepreload" crossorigin href="/assets/opsHubShared-6AfWMSSF.js">
    <link rel="modulepreload" crossorigin href="/assets/customerReleaseNotes-CAwT08O7.js">
    <link rel="modulepreload" crossorigin href="/assets/Sheet-zgtXVTFU.js">
    <link rel="modulepreload" crossorigin href="/assets/useAppSearchParams-Cd7Lcf_z.js">
    <link rel="modulepreload" crossorigin href="/assets/Skeleton-D2Fr9M16.js">
    <link rel="modulepreload" crossorigin href="/assets/ColorModeSwitcher-BH0LOoYS.js">
    <link rel="modulepreload" crossorigin href="/assets/CategoryHub-CqkppjIK.js">
    <link rel="modulepreload" crossorigin href="/assets/controlStyles-BR9a-0Rz.js">
    <link rel="modulepreload" crossorigin href="/assets/Input-Br_g4zZK.js">
    <link rel="modulepreload" crossorigin href="/assets/AssetThumbnail-D--vuGQ5.js">
    <link rel="modulepreload" crossorigin href="/assets/Combobox-Cv9q0-XM.js">
    <link rel="modulepreload" crossorigin href="/assets/Modal-a_Crag3y.js">
    <link rel="modulepreload" crossorigin href="/assets/StarfieldBackground-CIpR-32n.js">
    <link rel="modulepreload" crossorigin href="/assets/RetroGridBackground-m1IlWufW.js">
    <link rel="modulepreload" crossorigin href="/assets/Textarea-DUFknYLZ.js">
    <link rel="modulepreload" crossorigin href="/assets/v-daypicker-s0F2eI5D.js">
    <link rel="modulepreload" crossorigin href="/assets/Badge-DeC2y1WF.js">
    <link rel="modulepreload" crossorigin href="/assets/WidgetErrorBoundary-Bmm8nxlu.js">
    <link rel="modulepreload" crossorigin href="/assets/renderEmail-BpnAXauG.js">
    <link rel="modulepreload" crossorigin href="/assets/AssetPreviewSurface-D1AI8HJq.js">
    <link rel="modulepreload" crossorigin href="/assets/MatrixRain-0V36B9nI.js">
    <link rel="modulepreload" crossorigin href="/assets/FluidGradientWaves-DdJApBUq.js">
    <link rel="modulepreload" crossorigin href="/assets/CyberpunkBackground-BglAFsoC.js">
    <link rel="modulepreload" crossorigin href="/assets/NeuralNetworkBackground-1PN4DWQh.js">
    <link rel="modulepreload" crossorigin href="/assets/AuroraBackground-BXDcNBIT.js">
    <link rel="modulepreload" crossorigin href="/assets/TrioSentimentIntake-C-2LQLeu.js">
    <link rel="modulepreload" crossorigin href="/assets/components-CGaGqe1S.js">
    <link rel="stylesheet" crossorigin href="/assets/vendor-BkKOjHwE.css">
    <link rel="stylesheet" crossorigin href="/assets/index-BuwBbGzj.css">
  <link rel="manifest" href="/manifest.webmanifest"></head>

  <body>
    <!--
      React mount target — keep empty. Pre-boot shell is a *sibling* overlay
      (W2) so createRoot().render() never hard-wipes the HTML loader.
    -->
    <div id="root"></div>

    <!--
      Pre-boot shell (matches post-boot BootstrapSpinner continuity):
      - neutral: plain ring + Loading… (no Z / zyta wordmark)
      - branded: 112px logo/initial + glow + Loading… (tenant seed only;
        never Zyta horizontal lockup geometry)
      Marketing first-visit globe is React MarketingPreloader, not this shell.
      Recovery CTAs only if outage-shell watchdog fires (~14s).
      Size token: --zyta-boot-logo-px must match BootstrapSpinner BOOT_LOGO_PX.
      Handoff: fixed overlay; main.tsx fades opacity 150ms then removes (W2).
    -->
    <style>
      #zyta-boot-fallback {
        --zyta-boot-logo-px: 112px;
        --zyta-boot-halo-inset: 12px;
        --zyta-boot-neutral-ring: 2.75rem;
        --zyta-boot-handoff-ms: 150ms;
        /* Dark defaults; light via prefers-color-scheme + data-theme-mode */
        --zyta-boot-surface: hsl(222 28% 4%);
        --zyta-boot-text: #f2f4f7;
        --zyta-boot-muted: #9aa3b2;
        --zyta-boot-ring-track: rgba(255, 255, 255, 0.14);
        --zyta-boot-ring-accent: rgba(232, 234, 237, 0.92);
        --zyta-boot-brand-glow: rgba(232, 234, 237, 0.12);
        /* Sibling overlay — sits above React until handoff fade (W2) */
        position: fixed;
        inset: 0;
        z-index: 10000;
        transition: opacity var(--zyta-boot-handoff-ms) ease-out;
      }
      #zyta-boot-fallback[data-zyta-handoff="out"] {
        opacity: 0;
        pointer-events: none;
      }
      /* Frame-0 light before theme.js: avoid dark flash for light users */
      @media (prefers-color-scheme: light) {
        #zyta-boot-fallback {
          --zyta-boot-surface: hsl(40 24% 94%);
          --zyta-boot-text: #1f2937;
          --zyta-boot-muted: #475569;
          --zyta-boot-ring-track: rgba(15, 23, 42, 0.12);
          --zyta-boot-ring-accent: rgba(15, 23, 42, 0.62);
          --zyta-boot-brand-glow: rgba(15, 23, 42, 0.06);
        }
      }
      html[data-theme-mode="light"] #zyta-boot-fallback {
        --zyta-boot-surface: hsl(40 24% 94%);
        --zyta-boot-text: #1f2937;
        --zyta-boot-muted: #475569;
        --zyta-boot-ring-track: rgba(15, 23, 42, 0.12);
        --zyta-boot-ring-accent: rgba(15, 23, 42, 0.62);
        --zyta-boot-brand-glow: rgba(15, 23, 42, 0.06);
      }
      html[data-theme-mode="dark"] #zyta-boot-fallback {
        --zyta-boot-surface: hsl(222 28% 4%);
        --zyta-boot-text: #f2f4f7;
        --zyta-boot-muted: #9aa3b2;
        --zyta-boot-ring-track: rgba(255, 255, 255, 0.14);
        --zyta-boot-ring-accent: rgba(232, 234, 237, 0.92);
        --zyta-boot-brand-glow: rgba(232, 234, 237, 0.12);
      }
      @keyframes zyta-boot-spin {
        to {
          transform: rotate(360deg);
        }
      }
      @keyframes zyta-boot-glow-pulse {
        0%,
        100% {
          opacity: 0.45;
          transform: scale(1);
        }
        50% {
          opacity: 0.7;
          transform: scale(1.02);
        }
      }
      #zyta-boot-fallback .zyta-boot-ring {
        box-sizing: border-box;
        animation: zyta-boot-spin 0.8s linear infinite;
      }
      /* Neutral: compact ring (marketing). Ops/auth use tenant scale below. */
      #zyta-boot-fallback[data-boot-mode="neutral"] .zyta-boot-ring {
        width: var(--zyta-boot-neutral-ring);
        height: var(--zyta-boot-neutral-ring);
        border-radius: 9999px;
        border: 2px solid var(--zyta-boot-ring-track);
        border-top-color: var(--zyta-boot-ring-accent);
      }
      #zyta-boot-fallback[data-boot-mode="neutral"] #zyta-boot-mark-wrap {
        width: var(--zyta-boot-neutral-ring);
        height: var(--zyta-boot-neutral-ring);
      }
      /*
       * Ops/auth handoff: same 112px footprint as BootstrapSpinner tenant mark
       * so refresh on /invoices is not small ring → big logo (double loader).
       */
      #zyta-boot-fallback[data-boot-mode="neutral"][data-boot-scale="tenant"]
        .zyta-boot-ring,
      #zyta-boot-fallback[data-boot-mode="neutral"][data-boot-scale="tenant"]
        #zyta-boot-mark-wrap {
        width: var(--zyta-boot-logo-px);
        height: var(--zyta-boot-logo-px);
      }
      #zyta-boot-fallback[data-boot-mode="neutral"][data-boot-scale="tenant"]
        .zyta-boot-ring {
        border-width: 2.5px;
      }
      /* Branded: same footprint as post-boot tenant (112px + glow), no wordmark row */
      #zyta-boot-fallback[data-boot-mode="branded"] .zyta-boot-ring {
        display: none;
      }
      #zyta-boot-fallback[data-boot-mode="branded"] #zyta-boot-mark-wrap {
        width: var(--zyta-boot-logo-px);
        height: var(--zyta-boot-logo-px);
      }
      #zyta-boot-fallback[data-boot-mode="branded"] .zyta-boot-halo {
        display: block;
        position: absolute;
        inset: calc(-1 * var(--zyta-boot-halo-inset));
        border-radius: 9999px;
        background: radial-gradient(
          circle,
          var(--zyta-boot-brand-glow, rgba(232, 234, 237, 0.12)) 0%,
          transparent 75%
        );
        animation: zyta-boot-glow-pulse 3.2s ease-in-out infinite;
        pointer-events: none;
      }
      #zyta-boot-fallback[data-boot-mode="branded"] #zyta-boot-mark {
        border-radius: 9999px;
        font-size: 2.25rem;
      }
      #zyta-boot-fallback .zyta-boot-halo {
        display: none;
      }
      @media (prefers-reduced-motion: reduce) {
        #zyta-boot-fallback {
          transition: none;
        }
        #zyta-boot-fallback .zyta-boot-ring {
          animation: none;
          border-color: var(--zyta-boot-ring-track);
        }
        #zyta-boot-fallback[data-boot-mode="branded"] .zyta-boot-halo {
          animation: none;
          opacity: 0.75;
        }
      }
    </style>
    <div
      id="zyta-boot-fallback"
      role="status"
      aria-live="polite"
      aria-busy="true"
      aria-label="Loading"
      data-boot-mode="neutral"
      style="
        min-height: 100dvh;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1.5rem;
        box-sizing: border-box;
        background: var(--zyta-boot-surface, hsl(222 28% 4%));
        color: var(--zyta-boot-text, #f2f4f7);
        font-family:
          system-ui,
          -apple-system,
          Segoe UI,
          sans-serif;
      "
    >
      <div
        id="zyta-boot-inner"
        style="
          display: inline-flex;
          flex-direction: column;
          align-items: center;
          gap: 0.75rem;
        "
      >
        <span
          id="zyta-boot-mark-wrap"
          style="
            position: relative;
            display: inline-flex;
            width: 2.75rem;
            height: 2.75rem;
            flex-shrink: 0;
            align-items: center;
            justify-content: center;
          "
          aria-hidden="true"
        >
          <span class="zyta-boot-halo"></span>
          <span class="zyta-boot-ring"></span>
          <span
            id="zyta-boot-mark"
            hidden
            style="
              position: relative;
              z-index: 1;
              display: none;
              width: 100%;
              height: 100%;
              border-radius: 9999px;
              background: #e8eaed;
              color: #0b0d10;
              align-items: center;
              justify-content: center;
              font-weight: 800;
              font-size: 1.05rem;
              overflow: hidden;
              box-sizing: border-box;
            "
          ></span>
        </span>
        <span
          id="zyta-boot-copy"
          style="
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 0.15rem;
            min-width: 0;
            text-align: center;
          "
        >
          <!-- Wordmark slot reserved; theme.js never shows tenant Zyta-row lockup -->
          <span
            id="zyta-boot-wordmark"
            hidden
            style="
              display: none;
              font-weight: 800;
              font-size: 1.35rem;
              letter-spacing: -0.03em;
              line-height: 1.1;
            "
          ></span>
          <span
            id="zyta-boot-caption"
            style="
              font-size: 0.85rem;
              font-weight: 500;
              color: var(--zyta-boot-muted, #9aa3b2);
              letter-spacing: -0.01em;
            "
            >Loading…</span
          >
        </span>
      </div>
    </div>
    <script src="/boot/splash.js"></script>
    <noscript>
      <!-- Theme-aware via boot CSS vars on #zyta-boot-fallback parent context -->
      <div
        style="
          font-family: system-ui, sans-serif;
          text-align: center;
          padding: 4rem 1rem;
          max-width: 28rem;
          margin: 0 auto;
          color: var(--zyta-boot-text, #1f2937);
        "
      >
        <h1 style="font-size: 1.5rem; font-weight: 800; margin: 0 0 0.75rem">
          JavaScript is required
        </h1>
        <p
          style="
            color: var(--zyta-boot-muted, #475569);
            line-height: 1.6;
            margin: 0 0 1.5rem;
          "
        >
          Zyta needs JavaScript to run. Enable it, then try again — or check
          system status if the platform is down.
        </p>
        <div
          style="
            display: flex;
            flex-wrap: wrap;
            gap: 0.5rem;
            justify-content: center;
          "
        >
          <a
            href="/"
            style="
              display: inline-block;
              padding: 0.75rem 1.25rem;
              background: #1f2937;
              color: #f8fafc;
              border-radius: 0.75rem;
              font-weight: 700;
              font-size: 0.875rem;
              text-decoration: none;
            "
            >Try again</a
          >
          <a
            href="https://status.zyta.dev/"
            style="
              display: inline-block;
              padding: 0.75rem 1.25rem;
              border: 1px solid rgba(15, 23, 42, 0.18);
              color: var(--zyta-boot-text, #1f2937);
              border-radius: 0.75rem;
              font-weight: 600;
              font-size: 0.875rem;
              text-decoration: none;
            "
            >System status</a
          >
        </div>
      </div>
    </noscript>
  </body>
</html>
