Add recovery toolkit, Pro features, and blog to website

- Surface the recovery toolkit and Patterns Pro tools: new homepage
  RecoveryToolkit section and a full /toolkit page (free vs Pro, how to
  use the app), with toolkit copy mirrored from the app.
- Add a blog (/blog + posts) written first-person from the maintainer's
  POV as someone with OCD; article Open Graph tags via the Seo component.
- Wire Toolkit and Blog into the navbar and footer; add both plus posts
  to the sitemap; bump site appVersion to 1.5.0 and update JSON-LD
  featureList/offers to include the toolkit and Pro.
- Performance/SEO: load fonts off the critical path and drop unused
  italic/weight files; defer analytics to idle; shrink brand logo.
- Use the spiral brand mark everywhere (favicon, apple-touch, PWA icons,
  navbar/footer brand) to match the app.

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>

Author: maskedsyntax

website/src/app.html

@@ -5,21 +5,52 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link rel="preconnect" href="https://fonts.googleapis.com" />
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <!-- Fonts loaded off the critical path: preload the stylesheet, then flip it
+         from media="print" to "all" once it arrives so it never blocks first paint.
+         Only the weights/styles actually used are requested (no unused italics). -->
+    <link
+      rel="preload"
+      as="style"
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap"
+    />
     <link
-      href="https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap"
       rel="stylesheet"
+      href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap"
+      media="print"
+      onload="this.media='all'"
     />
-    <link rel="icon" type="image/png" href="%sveltekit.assets%/favicon.png" />
+    <noscript>
+      <link
+        rel="stylesheet"
+        href="https://fonts.googleapis.com/css2?family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Lora:ital,wght@0,400;0,500;0,600;1,400&display=swap"
+      />
+    </noscript>
+    <link rel="icon" type="image/png" sizes="64x64" href="%sveltekit.assets%/favicon.png" />
+    <link rel="apple-touch-icon" href="%sveltekit.assets%/apple-touch-icon.png" />
     <link rel="manifest" href="%sveltekit.assets%/manifest.json" />
     <meta name="apple-itunes-app" content="app-id=6762611172, app-argument=https://patterns.maskedsyntax.com/" />
-    <script async src="https://www.googletagmanager.com/gtag/js?id=G-CGS962TNLY"></script>
+    <!-- Analytics deferred to the browser idle callback so it never competes with
+         content for the main thread during initial load. -->
     <script>
       window.dataLayer = window.dataLayer || [];
       function gtag() {
         dataLayer.push(arguments);
       }
-      gtag('js', new Date());
-      gtag('config', 'G-CGS962TNLY');
+      (function () {
+        var loadAnalytics = function () {
+          var s = document.createElement('script');
+          s.async = true;
+          s.src = 'https://www.googletagmanager.com/gtag/js?id=G-CGS962TNLY';
+          document.head.appendChild(s);
+          gtag('js', new Date());
+          gtag('config', 'G-CGS962TNLY');
+        };
+        if ('requestIdleCallback' in window) {
+          requestIdleCallback(loadAnalytics, { timeout: 4000 });
+        } else {
+          window.addEventListener('load', loadAnalytics);
+        }
+      })();
     </script>
     %sveltekit.head%
   </head>

website/src/lib/components/Navbar.svelte

@@ -21,6 +21,7 @@
   const learnLinks = [
     { label: 'Understanding OCD', href: '/ocd' },
     { label: 'ERP & how it helps', href: '/erp' },
+    { label: 'Recovery toolkit', href: '/toolkit' },
     { label: 'FAQ', href: '/faq' }
   ];
 
@@ -110,6 +111,7 @@
             {/each}
           </div>
         </div>
+        <a href="/blog" class="nav-link">Blog</a>
         <button type="button" onclick={goPrivacy}>Privacy</button>
         <button
           type="button"
@@ -184,6 +186,7 @@
         </div>
 
         <div class="mobile-nav-section">
+          <a href="/blog" onclick={closeMobile}>Blog</a>
           <button type="button" onclick={goPrivacy}>Privacy</button>
         </div>
       </nav>
@@ -250,14 +253,16 @@
     gap: 32px;
   }
 
-  .desktop-links button {
+  .desktop-links button,
+  .desktop-links .nav-link {
     font-size: 14px;
     font-weight: 500;
     color: color-mix(in srgb, var(--text) 65%, transparent);
     transition: color 0.2s;
   }
 
-  .desktop-links button:hover {
+  .desktop-links button:hover,
+  .desktop-links .nav-link:hover {
     color: var(--text);
   }
 

website/src/lib/components/Seo.svelte

@@ -12,7 +12,8 @@
     ogType = 'website',
     twitterCard = 'summary_large_image',
     keywords,
-    jsonLd = []
+    jsonLd = [],
+    article
   }: {
     title: string;
     description: string;
@@ -23,6 +24,8 @@
     twitterCard?: string;
     keywords?: string;
     jsonLd?: Record<string, unknown>[];
+    /** Extra Open Graph metadata for article pages (blog posts). */
+    article?: { publishedTime?: string; modifiedTime?: string; author?: string };
   } = $props();
 
   const url = $derived(`${links.site}${path}`);
@@ -45,6 +48,18 @@
   <meta property="og:image:height" content={String(site.ogImageHeight)} />
   <meta property="og:image:alt" content={imageAlt} />
 
+  {#if article}
+    {#if article.publishedTime}
+      <meta property="article:published_time" content={article.publishedTime} />
+    {/if}
+    {#if article.modifiedTime}
+      <meta property="article:modified_time" content={article.modifiedTime} />
+    {/if}
+    {#if article.author}
+      <meta property="article:author" content={article.author} />
+    {/if}
+  {/if}
+
   <meta name="twitter:card" content={twitterCard} />
   <meta name="twitter:title" content={title} />
   <meta name="twitter:description" content={description} />