@tokenoftrust/storefront-runner 2.2.126 → 2.3.0

package/apps/storefront/src/pages/style-guide/[tenant]/[theme].astro

@@ -20,7 +20,8 @@ export const prerender = false;
 // utilities + reference theme-token fallbacks so the (token-styled) components
 // render here without the app Layout. The `.sg-commerce` wrapper pins the
 // reference palette so they look coherent regardless of the marketing theme CSS.
-import { loadStyleGuideChrome, loadStyleGuideThemes } from "@/lib/styleGuideThemes";
+import { loadStyleGuideThemes, styleGuideCompositionSheets } from "@/lib/styleGuideThemes";
+import { derivedTokenDeclarations } from "@/themes/derivedTokens";
 import "@/styles/global.css";
 import PriceDisplay from "@/components/commerce/PriceDisplay.astro";
 import RatingStars from "@/components/commerce/RatingStars.astro";
@@ -45,6 +46,7 @@ import NavDropdown from "@/components/chrome/NavDropdown.astro";
 import SiteFooter from "@/components/chrome/SiteFooter.astro";
 import { CHROME_PLACEMENT } from "@/lib/chrome/trackingPlacements";
 import NicotineWarning from "@/components/compliance/NicotineWarning.astro";
+import { NICOTINE_WARNING_PRESETS } from "../../../../../../packages/cli/src/declared-config.mjs";
 import PactActNotice from "@/components/compliance/PactActNotice.astro";
 import AdultSignatureNotice from "@/components/compliance/AdultSignatureNotice.astro";
 import Prop65Warning from "@/components/compliance/Prop65Warning.astro";
@@ -477,19 +479,12 @@ const t = (await loadStyleGuideThemes(
 
 if (!t) return new Response(null, { status: 404 });
 
-// Has this tenant adopted the canonical shared chrome? If so it no
-// longer ships its own mkt.css (retired at integration) — link the
-// platform /shared/commerce-chrome.css instead so the marketing-component
-// samples below still render in-brand.
-const chromeConfig = await loadStyleGuideChrome(
-  tenant ?? "",
-  Astro.locals.tenant,
-  Astro.locals.content,
-);
-// Adoption is now "does chrome.json carry the consolidated header/footer
-// shape" (lib/chrome/model.ts ChromeConfig) — the old `sharedChrome: true`
-// opt-in flag is retired; a successfully-shaped config IS the adopted signal.
-const usesSharedChrome = !!chromeConfig?.header && !!chromeConfig?.footer;
+// The platform composition sheet always exists, so the guide always links it.
+// A tenant's own composition layer (e.g. a ported marketing site's mkt.css) is
+// linked only when the theme descriptor declares it in `preview.stylesheets` —
+// never guessed from a path, which 404s for every tenant that has none. Only
+// root-relative paths under this tenant's own /tenants/<tenant>/ tree are taken.
+const compositionSheets = styleGuideCompositionSheets(t, tenant ?? "");
 
 const tk = t.tokens ?? {};
 const storyboard = t.storyboard ?? null;
@@ -506,10 +501,7 @@ const REFERENCE_COMPONENT_VARS: Record<string, string> = {
   // values so the text/icon-token samples render concretely and re-skin when a
   // descriptor overrides them via preview.componentVars.
   "--color-warning": "#8a5717", "--color-error": "#a22014", "--color-info": "#2c5b73",
-  "--color-accent-ink": "#8a481f",
-  "--color-focus-ring": "#b5612f", "--color-disabled": "#e4dfd4",
-  "--color-disabled-contrast": "#8b938f", "--color-field-border": "#8f887a",
-  "--color-star": "#b5612f", "--tap-target": "44px",
+  "--tap-target": "44px",
   "--radius-sm": "3px", "--radius-md": "6px", "--radius-lg": "12px", "--radius-full": "999px",
   "--shadow-sm": "0 1px 2px rgba(28,38,36,.06)", "--shadow-md": "0 6px 24px -8px rgba(28,38,36,.14)",
   "--shadow-lg": "0 24px 60px -20px rgba(28,38,36,.22)", "--container-max": "1240px",
@@ -523,9 +515,13 @@ const componentVars: Record<string, string> = {
   ...REFERENCE_COMPONENT_VARS,
   ...((t.preview?.componentVars ?? {}) as Record<string, string>),
 };
-const componentVarsInline = Object.entries(componentVars)
-  .map(([k, v]) => `${k}:${v}`)
-  .join(";");
+// Derived tokens (accent-ink, accent-contrast, hovers, focus ring, …) are
+// re-declared on the same element, so they derive from THIS theme's palette
+// rather than inheriting values derived from the page root's.
+const componentVarsInline = [
+  ...Object.entries(componentVars).map(([k, v]) => `${k}:${v}`),
+  ...derivedTokenDeclarations(componentVars),
+].join(";");
 ---
 
 <!doctype html>
@@ -537,16 +533,12 @@ const componentVarsInline = Object.entries(componentVars)
     <link rel="icon" href={favicon} />
     <meta name="description" content={`${t.name} preview style guide and component contract.`} />
     <title>{t.name} — style guide (preview)</title>
-    {/* The tenant's OWN CSS (external, CSP-clean 'self'): the theme token/base
-        layer under review PLUS the shared marketing composition layer (mkt.css).
-        Linked for every tenant so the tenant's component classes render in-brand
-        and the preview visibly re-skins with the theme. */}
+    {/* External, CSP-clean 'self' sheets: the theme token/base layer under
+        review, the platform composition sheet, and any composition layer the
+        descriptor declares. */}
     <link rel="stylesheet" href={t.stylesheet} />
-    {usesSharedChrome ? (
-      <link rel="stylesheet" href="/shared/commerce-chrome.css" />
-    ) : (
-      <link rel="stylesheet" href={`/tenants/${tenant}/pages/mkt.css`} />
-    )}
+    <link rel="stylesheet" href="/shared/commerce-chrome.css" />
+    {compositionSheets.map((href) => <link rel="stylesheet" href={href} />)}
     {/* Guide-only chrome; distinct .sg-* names so it never collides with the theme. */}
     <style nonce={cspNonce}>
       .sg-bar { position: sticky; top: 0; z-index: 200; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; background: #0f1729; color: #e6edf6; padding: 12px 20px; font: 600 .95rem -apple-system, sans-serif; }
@@ -578,33 +570,36 @@ const componentVarsInline = Object.entries(componentVars)
          when the descriptor carries t.storyboard. */
       .sg-story { background: #101b30; color: #e6edf6; padding: 24px 20px 28px; }
       .sg-story .inner { max-width: 1080px; margin: 0 auto; }
-      .sg-story h2 { font: 800 .78rem/1.2 -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7fe3d4; margin: 0 0 8px; }
+      .sg-story h2 { font: 800 max(.875rem, 14px)/1.2 -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; color: #7fe3d4; margin: 0 0 8px; }
       .sg-story p.summary { margin: 0 0 18px; max-width: 76ch; color: #c6d2e4; font-size: .96rem; }
       .sg-story .insp { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
       .sg-story .insp .card { background: #16223c; border: 1px solid #26365a; border-radius: 12px; padding: 14px 16px; }
-      .sg-story .insp .role { display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: #0a1a12; background: #7fe3d4; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; }
-      .sg-story .insp .slug { font-family: ui-monospace, Menlo, monospace; font-size: .82rem; color: #9fb0c8; margin-bottom: 8px; }
+      .sg-story .insp .role { display: inline-block; font-size: max(.875rem, 14px); letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: #0a1a12; background: #7fe3d4; padding: 3px 8px; border-radius: 999px; margin-bottom: 8px; }
+      .sg-story .insp .slug { font-family: ui-monospace, Menlo, monospace; font-size: max(.875rem, 14px); color: #9fb0c8; margin-bottom: 8px; }
       .sg-story .insp ul { margin: 0; padding-left: 16px; }
-      .sg-story .insp li { font-size: .84rem; color: #c6d2e4; margin-bottom: 3px; }
+      .sg-story .insp li { font-size: max(.875rem, 14px); color: #c6d2e4; margin-bottom: 3px; }
 
       /* Page-section samples — a representative slice of the storefront rethemed:
          hero, promo-card row, category tiles. Token-styled (no per-tenant CSS) so
          they re-skin from the emitted component vars. */
       .sg-hero { display: grid; gap: 24px; grid-template-columns: 1.15fr .85fr; align-items: stretch; }
       .sg-hero .copy { background: var(--color-primary); color: var(--color-primary-contrast); border-radius: var(--radius-lg); padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; justify-content: center; }
-      .sg-hero .copy .kick { font: 800 .72rem/1 -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; opacity: .82; }
+      .sg-hero .copy .kick { font: 800 max(.875rem, 14px)/1 -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
+      .sg-hero .promo .kick { color: var(--color-accent-ink); font: 800 max(.875rem, 14px)/1 -apple-system, sans-serif; letter-spacing: .14em; text-transform: uppercase; }
+      .sg-hero .promo h4 { font-family: var(--font-display); font-size: 1.25rem; margin: 8px 0 4px; }
+      .sg-hero .promo p { margin: 0; color: var(--color-muted); font-size: max(.875rem, 14px); }
       .sg-hero .copy h3 { font-family: var(--font-display); font-size: clamp(1.6rem, 3.4vw, 2.6rem); line-height: 1.08; margin: 12px 0 10px; color: inherit; }
       .sg-hero .copy p { color: inherit; opacity: .9; margin: 0 0 20px; max-width: 40ch; }
       .sg-hero .promo { border-radius: var(--radius-lg); overflow: hidden; background: var(--color-surface); border: 1px solid var(--color-border); display: flex; align-items: flex-end; min-height: 220px; padding: 22px; color: var(--color-text); box-shadow: var(--shadow-md); }
-      .sg-btn { display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; min-height: 44px; padding: .7em 1.5em; border-radius: var(--radius-full); font-weight: 700; background: var(--color-accent); color: #fff; border: 2px solid transparent; }
+      .sg-btn { display: inline-flex; align-items: center; gap: .5em; align-self: flex-start; min-height: 44px; padding: .7em 1.5em; border-radius: var(--radius-full); font-weight: 700; background: var(--color-accent); color: var(--color-accent-contrast); border: 2px solid transparent; }
       .sg-btn.ghost { background: transparent; color: inherit; border-color: currentColor; }
       .sg-promos { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
       .sg-promo { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-sm); }
-      .sg-promo .tag { display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: #fff; background: var(--color-sale); padding: 3px 8px; border-radius: 999px; margin-bottom: 10px; }
+      .sg-promo .tag { display: inline-block; font-size: max(.75rem, 12px); letter-spacing: .08em; text-transform: uppercase; font-weight: 800; color: var(--color-primary-contrast); background: var(--color-sale); padding: 3px 8px; border-radius: 999px; margin-bottom: 10px; }
       .sg-promo h4 { font-family: var(--font-display); font-size: 1.1rem; margin: 0 0 6px; color: var(--color-text); }
-      .sg-promo p { margin: 0; color: var(--color-muted); font-size: .9rem; }
+      .sg-promo p { margin: 0; color: var(--color-muted); font-size: max(.875rem, 14px); }
       .sg-tiles { display: grid; gap: 14px; grid-template-columns: repeat(4, 1fr); }
-      .sg-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 132px; text-align: center; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(135deg, var(--color-primary), var(--color-primary) 60%, color-mix(in srgb, var(--color-primary) 70%, #000)); padding: 18px; }
+      .sg-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 132px; text-align: center; border-radius: var(--radius-lg); color: var(--color-primary-contrast); background: linear-gradient(135deg, var(--color-primary), var(--color-primary) 60%, color-mix(in srgb, var(--color-primary) 70%, #000)); padding: 18px; }
       .sg-tile .ico { width: 40px; height: 40px; border-radius: 999px; background: rgba(255,255,255,.16); display: grid; place-items: center; font-size: 1.1rem; }
       .sg-tile span { font-family: var(--font-display); font-weight: 700; font-size: .95rem; }
       @media (max-width: 900px) { .sg-hero { grid-template-columns: 1fr; } .sg-promos { grid-template-columns: 1fr; } .sg-tiles { grid-template-columns: 1fr 1fr; } }
@@ -626,7 +621,7 @@ const componentVarsInline = Object.entries(componentVars)
          from tokens alone — never a hard-coded color. */
       .sg-tok-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
       .sg-tok { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 12px 14px; background: var(--color-surface); }
-      .sg-tok .lab { display: block; font-size: .7rem; letter-spacing: .04em; color: var(--color-muted); font-family: var(--font-mono, ui-monospace, Menlo, monospace); margin-top: 6px; }
+      .sg-tok .lab { display: block; font-size: max(.75rem, 12px); letter-spacing: .04em; color: var(--color-muted); font-family: var(--font-mono, ui-monospace, Menlo, monospace); margin-top: 6px; }
       .sg-tok .txt { font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1.2; display: inline-flex; align-items: center; gap: .5em; }
       .sg-tok .ico { width: 1.15em; height: 1.15em; flex: none; }
       .sg-tok-state { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
@@ -645,6 +640,11 @@ const componentVarsInline = Object.entries(componentVars)
       /* Tap-target demo: an icon button sized to the WCAG minimum. */
       .sg-tap { display: inline-flex; align-items: center; justify-content: center; min-width: var(--tap-target); min-height: var(--tap-target); border-radius: var(--radius-full); border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-primary); cursor: pointer; }
       .sg-tap svg { width: 20px; height: 20px; }
+      /* Guide-owned captions: the guide meets the bar it enforces (≥14px text). */
+      .sg-cap { font: 500 max(.875rem, 14px)/1.45 -apple-system, sans-serif; color: var(--color-muted, #5c6663); margin: 0 0 8px; }
+      .sg-tok .txt .ico { color: var(--sg-ico); }
+      .sg-foot { padding: 28px 20px; background: #0f1729; color: #cdd8e8; text-align: center; }
+      .sg-foot p { margin: 0; font: 500 max(.875rem, 14px)/1.4 -apple-system, sans-serif; }
     </style>
   </head>
   <body>
@@ -658,6 +658,7 @@ const componentVarsInline = Object.entries(componentVars)
       <a href={`/_style-guide/${tenant}/`}>← all guides</a>
     </header>
 
+    <main>
     {storyboard && (
       <section class="sg-story">
         <div class="inner">
@@ -680,7 +681,6 @@ const componentVarsInline = Object.entries(componentVars)
       </section>
     )}
 
-    <main>
     <div class="container">
       <section class="sg-block">
         <p class="sg-h">Color tokens</p>
@@ -745,7 +745,7 @@ const componentVarsInline = Object.entries(componentVars)
           <button class="btn btn-primary is-loading" type="button" aria-busy="true">Loading</button>
           <button class="btn btn-primary" type="button" disabled>Disabled</button>
         </div>
-        <p class="form-help" style="margin-top:12px">All targets ≥44px. Tab to any control to see the <code>:focus-visible</code> ring.</p>
+        <p class="sg-cap" style="margin-top:12px">All targets ≥44px. Tab to any control to see the <code>:focus-visible</code> ring.</p>
       </section>
 
       <section class="sg-block">
@@ -780,7 +780,7 @@ const componentVarsInline = Object.entries(componentVars)
           <blockquote class="quote">“Testimonial / customer quote placeholder — do not ship until sourced.”</blockquote>
           <p class="cite">— Role, Company · <b class="opt">needs-review</b></p>
         </div>
-        <p class="form-help" style="margin-bottom:8px">Logo strip — "as seen in" / customer &amp; partner logos (placeholder):</p>
+        <p class="sg-cap" style="margin-bottom:8px">Logo strip — "as seen in" / customer &amp; partner logos (placeholder):</p>
         <div class="logo-strip">
           <span class="logo">LOGO</span><span class="logo">LOGO</span><span class="logo">LOGO</span><span class="logo">LOGO</span>
         </div>
@@ -835,12 +835,14 @@ const componentVarsInline = Object.entries(componentVars)
         </div>
       </section>
 
-      {/* ── Marketing page components (mkt.css) ──────────────────────────
-          The shared composition palette every ported marketing page draws
-          from. Keep this in sync with mkt.css: when a port harvests a new
-          reusable pattern into mkt.css, add a sample here (see
-          playbook/site-migration/style-concept.md §Harvesting components). */}
-      {theme === "tot-navy" && (
+      {/* ── Marketing page components (a declared composition layer) ──────
+          The ported-site composition palette (mkt.css-style classes) that a
+          tenant's own pages draw from. Rendered when the descriptor declares
+          that layer in preview.stylesheets; the token-styled platform marketing
+          blocks further down render for every theme. When a port harvests a
+          new reusable pattern into the layer, add a sample here (see
+          agency-kit/playbooks/style-concept.md §Harvesting components). */}
+      {compositionSheets.length > 0 && (
         <>
           <section class="sg-block">
             <p class="sg-h">Marketing components — <code>mkt.css</code></p>
@@ -923,6 +925,17 @@ const componentVarsInline = Object.entries(componentVars)
             </div>
           </section>
 
+          <section class="sg-block">
+            <p class="sg-h">Footer — <code>footer.site</code> / <code>.foot-grid</code></p>
+            <footer class="site" aria-label="Footer sample">
+              <div class="foot-grid">
+                <div><b>{t.name}</b><p class="copyright">Footer composition sample.</p></div>
+                <div><h3>Shop</h3><ul><li><a href="#">New arrivals</a></li><li><a href="#">Best sellers</a></li></ul></div>
+                <div><h3>Help</h3><ul><li><a href="#">Shipping</a></li><li><a href="#">Contact</a></li></ul></div>
+              </div>
+            </footer>
+          </section>
+
           <section class="sg-block">
             <p class="sg-h">CTA band — <code>.cta-band</code></p>
             <div class="cta-band">
@@ -942,7 +955,7 @@ const componentVarsInline = Object.entries(componentVars)
         products so this works with no live catalog. These are STANDARD components:
         fidelity comes from theme tokens + variant props, never a per-tenant fork.
         See playbook/site-migration/shared-chrome.md. */}
-    <div class="sg-commerce" style={componentVarsInline}>
+    <div class="sg-commerce" data-tot-platform-sample style={componentVarsInline}>
       <section class="sg-block">
         <p class="sg-h">Page sections — the site rethemed</p>
         <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Representative storefront sections rendered from theme tokens only. Swap the theme and this whole slice re-skins — hero, promos, category tiles, carousels, and chrome — with no per-tenant component fork.</p>
@@ -955,9 +968,9 @@ const componentVarsInline = Object.entries(componentVars)
           </div>
           <div class="promo">
             <div>
-              <span class="kick" style="color:var(--color-accent);font:800 .72rem/1 -apple-system,sans-serif;letter-spacing:.14em;text-transform:uppercase">Featured</span>
-              <h4 style="font-family:var(--font-display);font-size:1.25rem;margin:8px 0 4px">Right-rail promo tile</h4>
-              <p style="margin:0;color:var(--color-muted);font-size:.9rem">Two-up hero: banner + promo.</p>
+              <span class="kick">Featured</span>
+              <h4>Right-rail promo tile</h4>
+              <p>Two-up hero: banner + promo.</p>
             </div>
           </div>
         </div>
@@ -973,39 +986,39 @@ const componentVarsInline = Object.entries(componentVars)
         <p class="sg-h">Semantic text &amp; icon tokens (v1.1)</p>
         <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Each swatch reads one contract token. A theme passes the quality bar by supplying these — or inheriting the platform default — so every text and icon role resolves and re-skins from tokens alone.</p>
 
-        <p class="form-help" style="margin:18px 0 8px">Text roles</p>
+        <p class="sg-cap" style="margin:18px 0 8px">Text roles</p>
         <div class="sg-tok-grid">
-          <div class="sg-tok"><span class="txt" style="color:var(--color-text)">Primary body text</span><span class="lab">--color-text</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-muted)">Secondary / caption</span><span class="lab">--color-muted</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-primary)">Brand / link anchor</span><span class="lab">--color-primary</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-accent-ink)">Accent text (AA)</span><span class="lab">--color-accent-ink</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-success)">In stock · savings</span><span class="lab">--color-success</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-sale)">Sale price</span><span class="lab">--color-sale</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-warning)">Low stock</span><span class="lab">--color-warning</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-error)">Error · out of stock</span><span class="lab">--color-error</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-info)">Informational</span><span class="lab">--color-info</span></div>
+          <div class="sg-tok" data-token-sample="--color-text"><span class="txt" style="color:var(--color-text)">Primary body text</span><span class="lab">--color-text</span></div>
+          <div class="sg-tok" data-token-sample="--color-muted"><span class="txt" style="color:var(--color-muted)">Secondary / caption</span><span class="lab">--color-muted</span></div>
+          <div class="sg-tok" data-token-sample="--color-primary"><span class="txt" style="color:var(--color-primary)">Brand / link anchor</span><span class="lab">--color-primary</span></div>
+          <div class="sg-tok" data-token-sample="--color-accent-ink"><span class="txt" style="color:var(--color-accent-ink)">Accent text (AA)</span><span class="lab">--color-accent-ink</span></div>
+          <div class="sg-tok" data-token-sample="--color-success"><span class="txt" style="color:var(--color-success)">In stock · savings</span><span class="lab">--color-success</span></div>
+          <div class="sg-tok" data-token-sample="--color-sale"><span class="txt" style="color:var(--color-sale)">Sale price</span><span class="lab">--color-sale</span></div>
+          <div class="sg-tok" data-token-sample="--color-warning"><span class="txt" style="color:var(--color-warning)">Low stock</span><span class="lab">--color-warning</span></div>
+          <div class="sg-tok" data-token-sample="--color-error"><span class="txt" style="color:var(--color-error)">Error · out of stock</span><span class="lab">--color-error</span></div>
+          <div class="sg-tok" data-token-sample="--color-info"><span class="txt" style="color:var(--color-info)">Informational</span><span class="lab">--color-info</span></div>
         </div>
 
-        <p class="form-help" style="margin:22px 0 8px">Icon roles (<code>currentColor</code> tinted by token)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">Icon roles (<code>currentColor</code> tinted by token)</p>
         <div class="sg-tok-grid">
-          <div class="sg-tok"><span class="txt" style="color:var(--color-star)">
+          <div class="sg-tok" data-token-sample="--color-star"><span class="txt" style="--sg-ico:var(--color-star)">
             <svg class="ico" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true"><path d="M10 1.5l2.6 5.3 5.9.9-4.3 4.1 1 5.8L10 15l-5.2 2.6 1-5.8L1.5 7.7l5.9-.9L10 1.5z"/></svg>
             Rating star</span><span class="lab">--color-star</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-success)">
+          <div class="sg-tok" data-token-sample="--color-success"><span class="txt" style="--sg-ico:var(--color-success)">
             <svg class="ico" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M4 10.5l4 4 8-9"/></svg>
             Success check</span><span class="lab">--color-success</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-warning)">
+          <div class="sg-tok" data-token-sample="--color-warning"><span class="txt" style="--sg-ico:var(--color-warning)">
             <svg class="ico" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 2.5L18.5 17H1.5L10 2.5z"/><path d="M10 8v3.5"/><path d="M10 14.4v.1"/></svg>
             Warning</span><span class="lab">--color-warning</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-error)">
+          <div class="sg-tok" data-token-sample="--color-error"><span class="txt" style="--sg-ico:var(--color-error)">
             <svg class="ico" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" aria-hidden="true"><path d="M5 5l10 10M15 5L5 15"/></svg>
             Error</span><span class="lab">--color-error</span></div>
-          <div class="sg-tok"><span class="txt" style="color:var(--color-info)">
+          <div class="sg-tok" data-token-sample="--color-info"><span class="txt" style="--sg-ico:var(--color-info)">
             <svg class="ico" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="10" cy="10" r="8"/><path d="M10 9v5"/><path d="M10 6v.1"/></svg>
             Info</span><span class="lab">--color-info</span></div>
         </div>
 
-        <p class="form-help" style="margin:22px 0 8px">Interaction states — CTA hover, disabled, loading, focus ring, tap-target</p>
+        <p class="sg-cap" style="margin:22px 0 8px">Interaction states — CTA hover, disabled, loading, focus ring, tap-target</p>
         <div class="sg-tok-state">
           <button class="sg-tok-btn" type="button">Primary CTA</button>
           <button class="sg-tok-btn" type="button" style="background:var(--color-primary-hover)">Hover</button>
@@ -1016,7 +1029,7 @@ const componentVarsInline = Object.entries(componentVars)
             <svg viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 3h2l1.6 9.2a1 1 0 001 .8h7.6a1 1 0 001-.8L18 6H5"/><circle cx="8" cy="17" r="1"/><circle cx="15" cy="17" r="1"/></svg>
           </button>
         </div>
-        <p class="form-help" style="margin-top:10px;color:var(--color-muted)">Fill/hover read <code>--color-primary</code>/<code>--color-primary-hover</code>; disabled reads <code>--color-disabled</code> + <code>--color-disabled-contrast</code>; the field outline reads <code>--color-field-border</code>; Tab shows the <code>--color-focus-ring</code> ring; the icon button is sized to <code>--tap-target</code> (≥44px).</p>
+        <p class="sg-cap" style="margin-top:10px;color:var(--color-muted)">Fill/hover read <code>--color-primary</code>/<code>--color-primary-hover</code>; disabled reads <code>--color-disabled</code> + <code>--color-disabled-contrast</code>; the field outline reads <code>--color-field-border</code>; Tab shows the <code>--color-focus-ring</code> ring; the icon button is sized to <code>--tap-target</code> (≥44px).</p>
       </section>
 
       <section class="sg-block">
@@ -1128,7 +1141,7 @@ const componentVarsInline = Object.entries(componentVars)
           allHref="#"
           allActive={false}
         />
-        <p class="form-help" style="margin-top:8px;color:var(--color-muted)">Active chip is filled + <code>aria-current</code>; each chip is a plain link so filtering works server-side.</p>
+        <p class="sg-cap" style="margin-top:8px;color:var(--color-muted)">Active chip is filled + <code>aria-current</code>; each chip is a plain link so filtering works server-side.</p>
       </section>
 
       <section class="sg-block">
@@ -1172,9 +1185,9 @@ const componentVarsInline = Object.entries(componentVars)
       <section class="sg-block">
         <p class="sg-h">Chrome — MegaMenu / NavDropdown (multi-column + caret + NEW badge)</p>
         <div style="background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:8px 16px">
-          <MegaMenu items={sampleNav} class="!block" />
+          <MegaMenu items={sampleNav} ariaLabel="Primary (MegaMenu sample)" class="!block" />
         </div>
-        <p class="form-help" style="margin-top:8px;color:var(--color-muted)">Hover/focus a caret item to reveal its dropdown (CSS-only).</p>
+        <p class="sg-cap" style="margin-top:8px;color:var(--color-muted)">Hover/focus a caret item to reveal its dropdown (CSS-only).</p>
       </section>
 
       <section class="sg-block">
@@ -1192,7 +1205,7 @@ const componentVarsInline = Object.entries(componentVars)
             ))}
           </ul>
         </div>
-        <p class="form-help" style="margin-top:8px;color:var(--color-muted)">Same nav items in the mobile menu: mega columns become inline <code>&lt;details&gt;</code> accordions (keyboard + touch operable). Toggle a caret item to expand.</p>
+        <p class="sg-cap" style="margin-top:8px;color:var(--color-muted)">Same nav items in the mobile menu: mega columns become inline <code>&lt;details&gt;</code> accordions (keyboard + touch operable). Toggle a caret item to expand.</p>
       </section>
 
       <section class="sg-block">
@@ -1219,20 +1232,25 @@ const componentVarsInline = Object.entries(componentVars)
         <p class="sg-h">Compliance notices — <code>components/compliance/</code></p>
         <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Data-driven regulated-commerce notices with fixed/mandated legal wording. Rendered here from sample config; each is invisible when its tenant.compliance field is absent.</p>
 
-        <p class="form-help" style="margin:18px 0 8px">NicotineWarning — <code>data-compliance="nicotine-warning"</code> (FDA 21 CFR 1143.3, fixed)</p>
-        <NicotineWarning variant="bar" />
-        <div class="mt-3"><NicotineWarning variant="block" /></div>
+        <p class="sg-cap" style="margin:18px 0 8px">NicotineWarning — <code>data-compliance="nicotine-warning"</code> (FDA 21 CFR 1143.3, fixed wording; one row per validated <code>compliance.nicotineWarning.preset</code>)</p>
+        {Object.keys(NICOTINE_WARNING_PRESETS).map((preset) => (
+          <div class="mt-3">
+            <p class="sg-cap" style="margin:0 0 4px"><code>"preset": "{preset}"</code></p>
+            <NicotineWarning variant="bar" declaration={{ preset }} />
+            <div class="mt-3"><NicotineWarning variant="block" declaration={{ preset }} /></div>
+          </div>
+        ))}
 
-        <p class="form-help" style="margin:22px 0 8px">PactActNotice — <code>data-compliance="pact-act"</code> (bar / block / footer)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">PactActNotice — <code>data-compliance="pact-act"</code> (bar / block / footer)</p>
         <PactActNotice enabled minAge={21} variant="bar" />
         <div class="mt-3"><PactActNotice enabled minAge={21} variant="block" /></div>
         <div class="mt-3"><PactActNotice enabled minAge={21} variant="footer" /></div>
 
-        <p class="form-help" style="margin:22px 0 8px">AdultSignatureNotice — <code>data-compliance="adult-signature"</code> (inline / block)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">AdultSignatureNotice — <code>data-compliance="adult-signature"</code> (inline / block)</p>
         <AdultSignatureNotice enabled minAge={21} variant="inline" />
         <div class="mt-3"><AdultSignatureNotice enabled minAge={21} variant="block" /></div>
 
-        <p class="form-help" style="margin:22px 0 8px">Prop65Warning — <code>data-compliance="prop65"</code> (short + long form, mandated skeleton)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">Prop65Warning — <code>data-compliance="prop65"</code> (short + long form, mandated skeleton)</p>
         <Prop65Warning config={true} variant="block" />
         <div class="mt-3">
           <Prop65Warning
@@ -1242,7 +1260,7 @@ const componentVarsInline = Object.entries(componentVars)
         </div>
         <div class="mt-3"><Prop65Warning config={true} variant="bar" /></div>
 
-        <p class="form-help" style="margin:22px 0 8px">PurchaseLimitNotice — <code>data-compliance="purchase-limit"</code> (display only; enforcement is product-owned)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">PurchaseLimitNotice — <code>data-compliance="purchase-limit"</code> (display only; enforcement is product-owned)</p>
         <PurchaseLimitNotice
           config={{ text: "2 units per order", reason: "per state law" }}
           variant="inline"
@@ -1254,7 +1272,7 @@ const componentVarsInline = Object.entries(componentVars)
           />
         </div>
 
-        <p class="form-help" style="margin:22px 0 8px">StateEligibilityNotice — <code>data-compliance="state-eligibility"</code> (display only; the eligibility decision is product-owned)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">StateEligibilityNotice — <code>data-compliance="state-eligibility"</code> (display only; the eligibility decision is product-owned)</p>
         <StateEligibilityNotice
           config={{ restrictedStates: ["UT", "AR", "VT"] }}
           variant="block"
@@ -1266,7 +1284,7 @@ const componentVarsInline = Object.entries(componentVars)
           />
         </div>
 
-        <p class="form-help" style="margin:22px 0 8px">ShippingRestrictionNotice — <code>data-compliance="shipping-restriction"</code> (the platform footer band; display only)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">ShippingRestrictionNotice — <code>data-compliance="shipping-restriction"</code> (the platform footer band; display only)</p>
         <ShippingRestrictionNotice
           text="Adult signature (21+) required on delivery. Not shipped via USPS."
           variant="footer"
@@ -1278,7 +1296,7 @@ const componentVarsInline = Object.entries(componentVars)
           />
         </div>
 
-        <p class="form-help" style="margin:22px 0 8px">ExciseTaxNotice — <code>data-compliance="excise-tax"</code> (display cue only; the tax calculation is product-owned)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">ExciseTaxNotice — <code>data-compliance="excise-tax"</code> (display cue only; the tax calculation is product-owned)</p>
         <ExciseTaxNotice
           config={{ note: "Applicable state vapor excise taxes are calculated at checkout." }}
           variant="inline"
@@ -1309,7 +1327,7 @@ const componentVarsInline = Object.entries(componentVars)
         <p class="sg-h">Membership tiers — <code>components/membership/</code></p>
         <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Education-only tier comparison with a first-class illustrative-figures affordance. Guest shows a real $0; Member/Autopilot figures are illustrative examples, so the guide exercises both the affordance and the opt-out.</p>
 
-        <p class="form-help" style="margin:18px 0 8px">TierCards — <code>data-widget="tier-cards"</code> (illustrative badge + "e.g." + footnote; featured ribbon)</p>
+        <p class="sg-cap" style="margin:18px 0 8px">TierCards — <code>data-widget="tier-cards"</code> (illustrative badge + "e.g." + footnote; featured ribbon)</p>
         <TierCards
           eyebrow="Membership"
           heading="Choose how you shop"
@@ -1317,7 +1335,7 @@ const componentVarsInline = Object.entries(componentVars)
           tiers={sampleTiers}
         />
 
-        <p class="form-help" style="margin:28px 0 8px">TierComparisonTable — <code>data-widget="tier-comparison-table"</code> (feature matrix; check/dash/text/em-dash cells)</p>
+        <p class="sg-cap" style="margin:28px 0 8px">TierComparisonTable — <code>data-widget="tier-comparison-table"</code> (feature matrix; check/dash/text/em-dash cells)</p>
         <TierComparisonTable
           eyebrow="Compare"
           heading="What each tier includes"
@@ -1337,19 +1355,19 @@ const componentVarsInline = Object.entries(componentVars)
         <p class="sg-h">Structured content — <code>components/content/</code></p>
         <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Data-driven framework widgets (F4): a policy page rendered from structured <code>sections</code> with no HTML/CSS to copy. Accessibility lives in the components; tenant content is pure data.</p>
 
-        <p class="form-help" style="margin:18px 0 8px">TrustStrip — <code>data-widget="trust-strip"</code> (f09 real-or-absent: 2 claims + 1 real rating shown; a "Based on 369 reviews" claim + a half-populated rating are dropped, never fabricated)</p>
+        <p class="sg-cap" style="margin:18px 0 8px">TrustStrip — <code>data-widget="trust-strip"</code> (f09 real-or-absent: 2 claims + 1 real rating shown; a "Based on 369 reviews" claim + a half-populated rating are dropped, never fabricated)</p>
         <TrustStrip items={sampleTrustStrip} />
 
-        <p class="form-help" style="margin:28px 0 8px">Callout — <code>data-widget="callout"</code> (tones: info / warning / legal / success; role="note", token-tinted, mirrors f05 .disclaimer/.warn-band)</p>
+        <p class="sg-cap" style="margin:28px 0 8px">Callout — <code>data-widget="callout"</code> (tones: info / warning / legal / success; role="note", token-tinted, mirrors f05 .disclaimer/.warn-band)</p>
         <Callout callout={{ tone: "info", title: "Heads up", body: "An informational aside rendered from data." }} />
         <Callout callout={{ tone: "warning", body: "A caution — check this before you rely on it." }} />
         <Callout callout={{ tone: "legal", body: "Restricted to adults 21+ where lawful. Void where prohibited." }} />
         <Callout callout={{ tone: "success", body: "Your terminal is verified and signed in." }} />
 
-        <p class="form-help" style="margin:28px 0 8px">NeedsReviewCallout — <code>data-widget="needs-review"</code> (reviewer-only; a placeholder pending human sign-off before go-live — never shown to shoppers)</p>
+        <p class="sg-cap" style="margin:28px 0 8px">NeedsReviewCallout — <code>data-widget="needs-review"</code> (reviewer-only; a placeholder pending human sign-off before go-live — never shown to shoppers)</p>
         <NeedsReviewCallout flag={{ reason: "Refund window (14 vs 30 days) not confirmed with merchant.", severity: "blocker", owner: "ops", href: "#" }} />
 
-        <p class="form-help" style="margin:28px 0 8px">ProseToc — <code>data-widget="prose-toc"</code> + ProseSections — <code>data-widget="prose-sections"</code> (a full structured policy body: headings, rich-text links, list, glossary &lt;dl&gt;, callouts, &lt;address&gt; contact; needs-review shown here because the guide is preview)</p>
+        <p class="sg-cap" style="margin:28px 0 8px">ProseToc — <code>data-widget="prose-toc"</code> + ProseSections — <code>data-widget="prose-sections"</code> (a full structured policy body: headings, rich-text links, list, glossary &lt;dl&gt;, callouts, &lt;address&gt; contact; needs-review shown here because the guide is preview)</p>
         <ProseToc sections={sampleProseSections} min={2} />
         <ProseSections sections={sampleProseSections} includeNeedsReview={true} />
       </section>
@@ -1365,7 +1383,7 @@ const componentVarsInline = Object.entries(componentVars)
         <p class="sg-h">Subscription/Autopilot education — <code>components/subscription/</code></p>
         <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Education-only widgets that explain recurring/Autopilot ordering and hand off to the tenant's own manage-subscription flow. No subscription, billing, or scheduling mechanics of their own.</p>
 
-        <p class="form-help" style="margin:18px 0 8px">HowItWorksSteps — <code>data-widget="subscription-how-it-works"</code></p>
+        <p class="sg-cap" style="margin:18px 0 8px">HowItWorksSteps — <code>data-widget="subscription-how-it-works"</code></p>
         <HowItWorksSteps
           eyebrow="Autopilot"
           heading="How Autopilot works"
@@ -1373,7 +1391,7 @@ const componentVarsInline = Object.entries(componentVars)
           steps={sampleSubscriptionSteps}
         />
 
-        <p class="form-help" style="margin:28px 0 8px">SavingsExplainer — <code>data-widget="subscription-savings-explainer"</code> (illustrative badge + "e.g." + footnote)</p>
+        <p class="sg-cap" style="margin:28px 0 8px">SavingsExplainer — <code>data-widget="subscription-savings-explainer"</code> (illustrative badge + "e.g." + footnote)</p>
         <SavingsExplainer
           eyebrow="Autopilot savings"
           heading="Save on every order"
@@ -1382,7 +1400,7 @@ const componentVarsInline = Object.entries(componentVars)
           cta={{ label: "How Autopilot works", href: "#" }}
         />
 
-        <p class="form-help" style="margin:28px 0 8px">ManageSubscriptionEntry — <code>data-widget="subscription-manage-entry"</code></p>
+        <p class="sg-cap" style="margin:28px 0 8px">ManageSubscriptionEntry — <code>data-widget="subscription-manage-entry"</code></p>
         <ManageSubscriptionEntry
           eyebrow="Manage"
           heading="Manage your Autopilot"
@@ -1398,10 +1416,10 @@ const componentVarsInline = Object.entries(componentVars)
         <p class="sg-h">Islands — <code>components/islands/</code></p>
         <p class="lede" style="font-size:.95rem;color:var(--color-muted)">Client-hydrated Preact islands exercised with fixture data — no live catalog, cart, or ToT calls.</p>
 
-        <p class="form-help" style="margin:18px 0 8px">AgeGate — full-viewport 21+ affirmation (real overlay; dismiss it once to keep browsing the guide, same as a real visitor)</p>
+        <p class="sg-cap" style="margin:18px 0 8px">AgeGate — full-viewport 21+ affirmation (real overlay; dismiss it once to keep browsing the guide, same as a real visitor)</p>
         <AgeGate client:load minAge={21} brand={t.name} tenantId={tenant ?? "style-guide"} />
 
-        <p class="form-help" style="margin:22px 0 8px">VariantSelector — PDP option picker (radiogroup + live price/SKU/stock region)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">VariantSelector — PDP option picker (radiogroup + live price/SKU/stock region)</p>
         <VariantSelector
           client:load
           variants={sampleFromProduct.variants}
@@ -1410,24 +1428,24 @@ const componentVarsInline = Object.entries(componentVars)
           locale="en-US"
         />
 
-        <p class="form-help" style="margin:22px 0 8px">QuickView — global peek dialog (opens from any <code>[data-quickview]</code> button, e.g. a ProductCard above)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">QuickView — global peek dialog (opens from any <code>[data-quickview]</code> button, e.g. a ProductCard above)</p>
         <QuickView client:idle locale="en-US" />
 
-        <p class="form-help" style="margin:22px 0 8px">SearchTypeahead — header search combobox (debounced, ARIA listbox)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">SearchTypeahead — header search combobox (debounced, ARIA listbox)</p>
         <div style="max-width:22rem">
-          <SearchTypeahead client:idle />
+          <SearchTypeahead client:idle label="Search (typeahead sample)" />
         </div>
 
-        <p class="form-help" style="margin:22px 0 8px">MobileNav — hamburger + slide-in drawer (mobile-only chrome, hidden ≥768px by design; resize below 768px or use responsive dev tools to preview the drawer)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">MobileNav — hamburger + slide-in drawer (mobile-only chrome, hidden ≥768px by design; resize below 768px or use responsive dev tools to preview the drawer)</p>
         <div style="max-width:20rem">
           <MobileNav client:idle nav={sampleMobileNav} announcement="Free US shipping on orders over $100" />
         </div>
 
-        <p class="form-help" style="margin:22px 0 8px">RecentlyViewed — localStorage discovery rail, seeded here for preview (renders empty on a real first visit until a product is viewed)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">RecentlyViewed — localStorage discovery rail, seeded here for preview (renders empty on a real first visit until a product is viewed)</p>
         <script is:inline nonce={cspNonce} set:html={`localStorage.setItem("tot:recently-viewed", ${JSON.stringify(JSON.stringify(sampleRecentlyViewed))}); localStorage.setItem("tot:wishlist", ${JSON.stringify(JSON.stringify(sampleRecentlyViewed.slice(0, 2)))});`} />
         <RecentlyViewed client:idle locale="en-US" />
 
-        <p class="form-help" style="margin:22px 0 8px">SavedList — the <code>/saved</code> wishlist, seeded here for preview (empty state shown until an item is saved)</p>
+        <p class="sg-cap" style="margin:22px 0 8px">SavedList — the <code>/saved</code> wishlist, seeded here for preview (empty state shown until an item is saved)</p>
         <SavedList client:only="preact" locale="en-US" />
       </section>
 
@@ -1442,12 +1460,12 @@ const componentVarsInline = Object.entries(componentVars)
           <FacetSidebar facets={sampleFacets} query={samplePlpQuery} basePath="#" />
           <div>
             <div class="sg-row" style="justify-content:space-between;margin-bottom:14px">
-              <p class="form-help" style="margin:0">SortSelect</p>
+              <p class="sg-cap" style="margin:0">SortSelect</p>
               <SortSelect query={samplePlpQuery} basePath="#" />
             </div>
-            <p class="form-help" style="margin:0 0 8px">ActiveFilters</p>
+            <p class="sg-cap" style="margin:0 0 8px">ActiveFilters</p>
             <ActiveFilters query={samplePlpQuery} basePath="#" />
-            <p class="form-help" style="margin:22px 0 8px">Pagination</p>
+            <p class="sg-cap" style="margin:22px 0 8px">Pagination</p>
             <Pagination query={samplePlpQuery} basePath="#" page={2} pageSize={12} total={58} />
           </div>
         </div>
@@ -1461,13 +1479,13 @@ const componentVarsInline = Object.entries(componentVars)
         <p class="sg-h">Home hero — <code>components/home/Hero.astro</code></p>
         <p class="lede" style="font-size:.95rem;color:var(--color-muted)">The homepage "thesis" moment. Bold is the default; light matches merchants whose own site favors a light page with brand-color accents.</p>
 
-        <p class="form-help" style="margin:18px 0 8px">Bold (default)</p>
+        <p class="sg-cap" style="margin:18px 0 8px">Bold (default)</p>
         {setHeroVariant("bold")}
-        <Hero block={sampleHeroBlock} featureProduct={sampleHeroFeatureProduct} />
+        <Hero block={sampleHeroBlock} featureProduct={sampleHeroFeatureProduct} headingLevel={2} />
 
-        <p class="form-help" style="margin:22px 0 8px">Light</p>
+        <p class="sg-cap" style="margin:22px 0 8px">Light</p>
         {setHeroVariant("light")}
-        <Hero block={sampleHeroBlock} featureProduct={sampleHeroFeatureProduct} />
+        <Hero block={sampleHeroBlock} featureProduct={sampleHeroFeatureProduct} headingLevel={2} />
       </section>
 
       {/* ── Marketing blocks (components/marketing/) ────────────────────────
@@ -1483,15 +1501,8 @@ const componentVarsInline = Object.entries(componentVars)
     </div>
     </main>
 
-    <footer class="site">
-      <div class="container">
-        <div class="foot-grid">
-          <div><b>{t.name}</b><p class="copyright">Footer chrome sample · theme preview only.</p></div>
-          <div><h3>Platform</h3><ul><li><a href="#">Identity Verification</a></li><li><a href="#">Age Assurance</a></li></ul></div>
-          <div><h3>Industries</h3><ul><li><a href="#">Alcohol &amp; Tobacco</a></li><li><a href="#">Marketplaces</a></li></ul></div>
-          <div><h3>Company</h3><ul><li><a href="#">Pricing</a></li><li><a href="#">Contact Sales</a></li></ul></div>
-        </div>
-      </div>
+    <footer class="sg-foot">
+      <p>{t.name} · theme preview only · noindex</p>
     </footer>
   </body>
 </html>