<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width,initial-scale=1" />

  <!-- Primary SEO -->
  <title>GraceWorks — Learn it. Remember it.</title>
  <meta name="description" content="Guided studies with lessons, knowledge checks and spaced-repetition flashcards — a simple place to learn and remember what matters most." />
  <meta name="keywords" content="bible study, discipleship, christian learning, scripture, flashcards, lessons" />
  <meta name="author" content="GraceWorks" />
  <meta name="robots" content="index, follow, max-image-preview:large, max-snippet:-1" />
  <link rel="canonical" href="https://learn.twgraceworks.com/" />
  <meta name="theme-color" content="#1a2b4a" />

  <!-- Open Graph -->
  <meta property="og:type" content="website" />
  <meta property="og:site_name" content="GraceWorks" />
  <meta property="og:title" content="GraceWorks — Learn it. Remember it." />
  <meta property="og:description" content="Guided studies with lessons, knowledge checks and spaced-repetition flashcards." />
  <meta property="og:url" content="https://learn.twgraceworks.com/" />
  <meta property="og:image" content="https://learn.twgraceworks.com/og.png" />
  <meta property="og:image:width" content="1200" />
  <meta property="og:image:height" content="630" />
  <meta property="og:locale" content="en_US" />

  <!-- Twitter card -->
  <meta name="twitter:card" content="summary_large_image" />
  <meta name="twitter:title" content="GraceWorks — Learn it. Remember it." />
  <meta name="twitter:description" content="Guided studies with lessons, knowledge checks and spaced-repetition flashcards." />
  <meta name="twitter:image" content="https://learn.twgraceworks.com/og.png" />

  <!-- Icons / manifest -->
  <link rel="icon" href="/logo.svg" type="image/svg+xml" />
  <link rel="apple-touch-icon" href="/logo.svg" />
  <link rel="manifest" href="/manifest.webmanifest" />

  <!-- Structured data -->
  <script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Organization",
    "name": "GraceWorks",
    "url": "https://learn.twgraceworks.com/",
    "logo": "https://learn.twgraceworks.com/logo.svg",
    "description": "A learning platform offering guided studies, quizzes and spaced-repetition flashcards.",
    "sameAs": []
  }
  </script>

  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@400;500;600;700;800&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
  <script src="https://cdn.tailwindcss.com"></script>
  <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script>
  <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script>
  <script src="https://unpkg.com/htm@3.1.1/dist/htm.umd.js"></script>
  <script>
    // GraceWorks brand palette: navy + gold. Overridden at runtime once
    // /api/branding loads the org/brand colors from D1.
    tailwind.config = { theme: { extend: {
      colors: {
        // Primary navy family
        brand: {
          50:  '#eef2f8',
          100: '#d6dfec',
          200: '#adbfd8',
          400: '#5c74a0',
          500: '#33507a',
          600: '#1a2b4a',
          700: '#14223b',
          900: '#101840',
        },
        // Secondary gold family
        accent: {
          50:  '#faf6ec',
          400: '#d9be8a',
          500: '#c9a96e',
          600: '#b6934f',
          700: '#94763b',
        },
        ink: { DEFAULT: '#101840', deep: '#000000' },
      },
      backgroundImage: {
        'brand-gradient': 'linear-gradient(135deg, #1a2b4a 0%, #101840 60%, #33507a 100%)',
      },
      fontFamily: { sans: ['Inter','system-ui','sans-serif'], serif: ['"Roboto Slab"','Georgia','serif'] }
    }}}
  </script>
  <style>
    html, body, #root { height: 100%; }
    body { font-family: Inter, system-ui, sans-serif; }
    h1, h2, h3, .font-serif { font-family: "Roboto Slab", Georgia, serif; }
    .prose-sm p { margin: 0.5rem 0; }
    .prose-sm h2 { font-size: 1.1rem; font-weight: 600; margin: 0.75rem 0 0.25rem; }
    .prose-sm h3 { font-size: 1rem; font-weight: 600; margin: 0.5rem 0 0.25rem; }
    .prose-sm ul, .prose-sm ol { padding-left: 1.25rem; margin: 0.5rem 0; }
    .prose-sm li { margin: 0.15rem 0; }
    .prose-sm code { background: #f1f5f9; padding: 1px 4px; border-radius: 3px; font-size: 0.9em; }

    /* Brand wordmark — navy→gold gradient text, used on the auth screen. */
    .twa-wordmark {
      background: linear-gradient(90deg, #1a2b4a 0%, #33507a 45%, #c9a96e 100%);
      -webkit-background-clip: text;
              background-clip: text;
      color: transparent;
      font-family: "Roboto Slab", Georgia, serif;
      font-weight: 800;
      letter-spacing: -0.01em;
    }
    .twa-tagline {
      color: #94a3b8;
      letter-spacing: 0.18em;
      font-size: 0.7rem;
      text-transform: uppercase;
      font-weight: 600;
    }
  </style>
</head>
<body class="bg-slate-50 text-ink">
  <div id="root">
    <div class="min-h-screen grid place-items-center text-slate-400 text-sm">Loading…</div>
  </div>

  <noscript>
    <main style="max-width:760px;margin:0 auto;padding:32px 20px;font-family:Georgia,serif;color:#101840">
      <h1 style="font-size:1.75rem;margin:0 0 .5rem">GraceWorks — Learn it. Remember it.</h1>
      <p style="color:#475569;margin:0 0 1rem">
        Guided studies with lessons, knowledge checks and spaced-repetition
        flashcards — a simple place to learn and remember what matters most.
      </p>
      <p style="margin:1.25rem 0 0">
        <strong>JavaScript is required to use the learning portal.</strong>
        Please enable JavaScript or visit
        <a href="https://learn.twgraceworks.com/" style="color:#1a2b4a">learn.twgraceworks.com</a>
        in a modern browser.
      </p>
    </main>
  </noscript>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qrcode-generator/1.4.4/qrcode.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dompurify/3.1.6/purify.min.js"></script>
  <script src="/app.js?v=20260718gw1"></script>
</body>
</html>
