@tokenoftrust/storefront-runner 0.1.0

package/tenants/giantvapes/public/pages/page.css

@@ -0,0 +1,155 @@
+/* ============================================================================
+   Giant Vapes — shared marketing subpage styles (page.css)
+   Page hero + prose + contact cards. Used by pages-html/**. Depends on tokens
+   from themes/giant-navy.css and components from pages/mkt.css.
+   ========================================================================== */
+
+/* --- Page hero ------------------------------------------------------------ */
+.page-hero { background: linear-gradient(135deg, var(--navy), var(--navy-ink)); color: #fff; }
+.page-hero .container { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
+.page-hero .eyebrow { display: inline-block; font-family: var(--font-display); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: #afc2ff; margin-bottom: .7rem; }
+.page-hero h1 { color: #fff; max-width: 22ch; }
+.page-hero p { color: #dce5ff; font-size: 1.08rem; margin-top: .9rem; max-width: 60ch; }
+.crumbs { font-size: .82rem; color: #a9b8e6; margin-bottom: 1rem; }
+.crumbs a:hover { color: #fff; text-decoration: underline; }
+
+/* --- Prose ---------------------------------------------------------------- */
+.prose { max-width: 70ch; margin-inline: auto; }
+.prose h2 { margin-top: 2.2rem; margin-bottom: .6rem; }
+.prose h3 { margin-top: 1.6rem; margin-bottom: .4rem; }
+.prose p { margin-bottom: 1rem; color: var(--ink); }
+.prose p.lead { font-size: 1.15rem; color: var(--muted); }
+.prose ul.bullets { margin: 0 0 1rem; padding-left: 1.1rem; list-style: disc; }
+.prose ul.bullets li { margin-bottom: .4rem; color: var(--ink); }
+.prose a { color: var(--navy); font-weight: 600; }
+.prose a:hover { text-decoration: underline; }
+
+/* --- Value cards (about-page "what we're about" grid) --------------------- */
+.value-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); margin-top: 1.6rem; }
+.value-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; background: #fff; }
+.value-card h3 { color: var(--navy); font-size: 1.05rem; margin-bottom: .55rem; }
+.value-card p { color: var(--ink); font-size: .96rem; }
+@media (max-width: 860px) { .value-grid { grid-template-columns: 1fr; } }
+
+/* --- Contact cards -------------------------------------------------------- */
+.contact-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 22px); margin-top: 1.5rem; }
+.contact-card { border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 24px; background: #fff; }
+.contact-card h3 { color: var(--navy); font-size: 1.05rem; margin-bottom: .5rem; }
+.contact-card a { color: var(--ink); font-weight: 600; }
+.contact-card a:hover { color: var(--navy); }
+.contact-card p { font-size: .92rem; }
+
+/* --- Brand chips ---------------------------------------------------------- */
+.brand-chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 1rem 0 1.5rem; }
+.brand-chips a { border: 1px solid var(--border); border-radius: 999px; padding: 8px 16px; font-size: .88rem; font-weight: 600; color: var(--navy); background: var(--surface); }
+.brand-chips a:hover { background: var(--surface-2); }
+
+@media (max-width: 720px) {
+  .contact-grid { grid-template-columns: 1fr; }
+}
+
+/* ============================================================================
+   About page — hero overlay + alternating media/copy splits + pickers
+   (clones bigdvapor.com/pages/about-us section-for-section)
+   ========================================================================== */
+
+/* --- Full-bleed hero with image + left-aligned overlay copy --------------- */
+.hero-overlay { position: relative; overflow: hidden; background: var(--navy-ink); }
+.hero-overlay > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
+.hero-overlay::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0,10,40,.62) 0%, rgba(0,10,40,.34) 45%, rgba(0,10,40,.08) 100%); }
+.hero-overlay__inner { position: relative; z-index: 1; padding-block: clamp(3rem, 9vw, 7rem); }
+.hero-overlay .crumbs { color: #cdd8f5; }
+.hero-overlay .crumbs a { color: #eaf0ff; }
+.hero-overlay h1 { color: #fff; max-width: 16ch; text-shadow: 0 2px 18px rgba(0,10,40,.4); }
+.hero-overlay p { color: #eaf0ff; font-size: clamp(1rem, 1.6vw, 1.2rem); margin-top: 1rem; max-width: 46ch; }
+
+/* --- Media / copy split (Our Story, Our Mission, Service) ------------------ */
+.split .container { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.75rem, 5vw, 4.5rem); align-items: center; }
+.split--rev .container { direction: rtl; }
+.split--rev .split__copy, .split--rev .split__media { direction: ltr; }
+.split__copy h2 { margin-bottom: 1rem; }
+.split__copy p { color: var(--ink); margin-bottom: 1rem; max-width: 52ch; }
+.split__copy .btn { margin-top: .4rem; }
+.split__media img { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-md); object-fit: cover; }
+.split--center .split__copy { text-align: center; }
+.split--center .split__copy p { margin-inline: auto; }
+.split--center .split__copy .btn { display: inline-flex; }
+
+/* --- Trusted Brands band (centered) --------------------------------------- */
+.brands-band .brand-chips { justify-content: center; max-width: 780px; margin-inline: auto; }
+
+/* --- Centered CTA band (Service — decorative image absent from source) ----- */
+.cta-band { text-align: center; }
+.cta-band .container { max-width: 60ch; }
+.cta-band p { color: var(--ink); margin-top: 1rem; }
+.cta-band .btn { margin-top: 1.5rem; }
+
+/* --- Category picker (Find Your Fav) -------------------------------------- */
+.pick-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(12px, 1.6vw, 20px); }
+.pick-card {
+  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
+  min-height: 132px; padding: 22px 20px; background: #fff;
+  border: 1px solid var(--border); border-radius: var(--radius-lg);
+  transition: transform .14s, box-shadow .14s, border-color .14s;
+}
+.pick-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--surface-2); }
+.pick-card h3 { color: var(--navy); font-size: 1.15rem; }
+.pick-card span { font-family: var(--font-display); font-weight: 600; font-size: .9rem; color: var(--navy); }
+.pick-card span::after { content: " →"; }
+
+/* ============================================================================
+   Contact page — icon info band + form (clones /pages/contact-us)
+   ========================================================================== */
+.page-hero--center { text-align: center; background: none; color: inherit; }
+.page-hero--center h1 { color: var(--ink); max-width: none; margin-inline: auto; }
+.page-hero--center p { color: var(--muted); margin-inline: auto; }
+
+.contact-band { background: var(--navy); border-radius: var(--radius-lg); color: #fff; }
+.contact-band .contact-band__inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 3vw, 32px); padding: clamp(28px, 5vw, 48px); text-align: center; }
+.contact-band__item svg { width: 40px; height: 40px; margin: 0 auto 16px; stroke: #fff; fill: none; stroke-width: 1.6; }
+.contact-band__item a, .contact-band__item span { color: #fff; font-size: 1.02rem; font-weight: 500; }
+.contact-band__item a:hover { text-decoration: underline; }
+
+.contact-form { margin-top: clamp(1.75rem, 4vw, 2.75rem); display: grid; gap: 16px; }
+.contact-form .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
+.contact-form input, .contact-form textarea {
+  width: 100%; font: inherit; color: var(--ink); background: var(--surface);
+  border: 1px solid var(--border); border-radius: var(--radius); padding: 15px 18px;
+}
+.contact-form textarea { min-height: 180px; resize: vertical; }
+.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted); }
+.contact-form input:focus, .contact-form textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,48,160,.14); }
+.contact-form .btn-primary { width: 100%; padding-block: 1em; font-size: 1rem; }
+
+/* ============================================================================
+   Blog index — post-card grid (clones /blogs/news "Latest News")
+   ========================================================================== */
+.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2.4vw, 28px); }
+.blog-card {
+  display: flex; flex-direction: column; gap: 10px; padding: 24px;
+  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-lg);
+  transition: transform .14s, box-shadow .14s, border-color .14s;
+}
+.blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); border-color: var(--surface-2); }
+.blog-card__date { font-size: .8rem; color: var(--muted); font-weight: 600; letter-spacing: .02em; }
+.blog-card h2 { font-size: 1.18rem; line-height: 1.25; color: var(--ink); }
+.blog-card h2 a:hover { color: var(--navy); }
+.blog-card__more { margin-top: auto; font-family: var(--font-display); font-weight: 600; color: var(--navy); font-size: .9rem; }
+.blog-card__more:hover { text-decoration: underline; }
+.blog-card__more::after { content: " →"; }
+
+/* --- Responsive ----------------------------------------------------------- */
+@media (max-width: 900px) {
+  .pick-grid { grid-template-columns: repeat(2, 1fr); }
+  .blog-grid { grid-template-columns: repeat(2, 1fr); }
+}
+@media (max-width: 760px) {
+  .split .container, .split--rev .container { grid-template-columns: 1fr; direction: ltr; }
+  .split--rev .split__media { order: -1; }
+  .contact-band .contact-band__inner { grid-template-columns: 1fr; }
+  .contact-form .row2 { grid-template-columns: 1fr; }
+}
+@media (max-width: 560px) {
+  .pick-grid { grid-template-columns: 1fr 1fr; }
+  .blog-grid { grid-template-columns: 1fr; }
+}

package/tenants/giantvapes/public/themes/giant-navy.css

@@ -0,0 +1,76 @@
+/* ============================================================================
+   Giant Vapes — "giant-navy" theme (swappable token + base layer)
+   Brand: deep navy #1b3b64 on white, warm gold accent #e0a83a. Mirrors
+   giantvapes.com. This file is the reskinnable layer: design tokens, reset, and
+   base element styles. Shared components live in pages/mkt.css; home-only in
+   pages/home.css. Token values mirror tenants/giantvapes/theme.json.
+   ========================================================================== */
+
+/* --- Design tokens -------------------------------------------------------- */
+:root {
+  --navy: #1b3b64;
+  --navy-dark: #142d4d;
+  --navy-ink: #0f2138;
+  --ink: #16243d;
+  --muted: #5b6a82;
+  --bg: #ffffff;
+  --surface: #f5f7fa;
+  --surface-2: #eaeef4;
+  --border: #e3e8ef;
+  --gold: #e0a83a;
+  --gold-dark: #c8901f;
+  --sale: #8a5d10;
+  --ok: #2f8a5b;
+
+  --radius-sm: 6px;
+  --radius: 10px;
+  --radius-lg: 16px;
+  --shadow-sm: 0 1px 2px rgba(15, 33, 56, .06), 0 1px 3px rgba(15, 33, 56, .08);
+  --shadow-md: 0 6px 18px rgba(15, 33, 56, .10);
+  --shadow-lg: 0 18px 48px rgba(15, 33, 56, .16);
+
+  --container: 1240px;
+  --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  --font-display: "Montserrat", var(--font-body);
+}
+
+/* --- Reset ---------------------------------------------------------------- */
+*, *::before, *::after { box-sizing: border-box; }
+* { margin: 0; }
+html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
+body {
+  font-family: var(--font-body);
+  color: var(--ink);
+  background: var(--bg);
+  line-height: 1.55;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+}
+img, svg, video { display: block; max-width: 100%; height: auto; }
+a { color: inherit; text-decoration: none; }
+button { font: inherit; cursor: pointer; }
+ul { list-style: none; padding: 0; }
+
+/* --- Base typography ------------------------------------------------------ */
+h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; color: var(--ink); letter-spacing: -.01em; }
+h1 { font-size: clamp(2rem, 4.6vw, 3.15rem); }
+h2 { font-size: clamp(1.6rem, 3.2vw, 2.35rem); }
+h3 { font-size: 1.2rem; }
+p { color: var(--muted); }
+
+/* --- Accessibility -------------------------------------------------------- */
+:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; border-radius: 4px; }
+.skip-link {
+  position: absolute; left: 8px; top: -48px; z-index: 200;
+  background: var(--navy); color: #fff; padding: 10px 16px; border-radius: 0 0 8px 8px;
+  transition: top .15s ease;
+}
+.skip-link:focus { top: 0; }
+.sr-only {
+  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
+  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  html { scroll-behavior: auto; }
+  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
+}

package/tenants/giantvapes/theme.json

@@ -0,0 +1,39 @@
+{
+  "_vendor": "Giant Vapes",
+  "_note": "Per-vendor theme override (DeepPartial<ThemeTokens>). Matched from giantvapes.com; the brand adopter can regenerate this file. Keyed by tenant_id (giantvapes). Recovered from the old 'pilot' fixture (git 4ed56c3^) when giantvapes was reconstituted as its own colocated tenant.",
+  "color": {
+    "bg": "#ffffff",
+    "surface": "#f5f7fa",
+    "text": "#16243d",
+    "muted": "#5b6a82",
+    "primary": "#1b3b64",
+    "primary-contrast": "#ffffff",
+    "accent": "#e0a83a",
+    "border": "#e3e8ef",
+    "success": "#2f8a5b",
+    "sale": "#8a5d10"
+  },
+  "type": {
+    "display": {
+      "family": "Montserrat",
+      "weights": [
+        600,
+        700,
+        800
+      ]
+    },
+    "body": {
+      "family": "Inter",
+      "weights": [
+        400,
+        500,
+        600
+      ]
+    }
+  },
+  "brand": {
+    "logoLight": "https://giantvapes.com/cdn/shop/files/GiantLogo_white_200x.png?v=1738709402",
+    "ogImage": "https://giantvapes.com/cdn/shop/files/Giant_Logo_Black-01_56304d21-10fc-4a79-822e-dce1097f5c70.png?v=1738699970",
+    "headerVariant": "dark"
+  }
+}

package/tenants/home/content/chrome.json

@@ -0,0 +1,11 @@
+{
+  "nav": [
+    { "label": "Shop", "href": "/collections" }
+  ],
+  "footer": {
+    "columns": [
+      { "title": "Shop", "links": [{ "label": "All products", "href": "/collections" }] }
+    ],
+    "social": []
+  }
+}

package/tenants/home/content/home.html

@@ -0,0 +1,304 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>Regulated Storefront by Token of Trust© — commerce that can’t be shut off</title>
+<meta name="description" content="The commerce platform built for what you sell — so you’re never one policy decision away from being shut down. Designed so no one can deplatform you.">
+<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=Plus+Jakarta+Sans:wght@500;600;700;800&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
+<link rel="stylesheet" href="/tenants/home/pages/storefront.css">
+</head>
+<body>
+<header>
+  <div class="wrap nav">
+    <div class="lockup">
+      <img src="/tenants/home/logo-wordmark.png" alt="Token of Trust">
+      <span class="div"></span>
+      <span class="prod grad">Regulated Storefront</span>
+    </div>
+    <nav class="nav-links">
+      <a href="#cant-shut-off" data-ev="nav_why">Why it can’t be shut off</a>
+      <a href="#compare" data-ev="nav_compare">Compare</a>
+      <a href="#who" data-ev="nav_who">Who it’s for</a>
+    </nav>
+    <div class="nav-right">
+      <a class="login" href="/auth/login?next=%2Fdashboard" data-ev="login">Log in</a>
+      <a class="btn btn-grad" href="#request" data-ev="request_access_header">Request early access <svg class="arrow" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+    </div>
+  </div>
+</header>
+
+<section class="hero" data-section="hero">
+  <span class="blob b1"></span><span class="blob b2"></span>
+  <div class="wrap hero-grid">
+    <div>
+      <span class="eyebrow"><span class="dot"></span> Early access · by invitation</span>
+      <h1>Built for what you sell — so no one can <span class="grad">shut you off.</span></h1>
+      <p class="lede">The commerce platform for regulated brands: vape, nicotine, hemp, alcohol. Compliance is native and <b>can’t be turned off</b>, so you’re never one policy decision away from a shutdown like Shopify or BigCommerce. <b>Sleep at night.</b></p>
+      <div class="hero-ctas">
+        <a class="btn btn-grad" href="#request" data-ev="request_access_hero">Request early access <svg class="arrow" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+        <a class="btn btn-line" href="#cant-shut-off" data-ev="why_cant_shut_off">Why it can’t be shut off</a>
+      </div>
+      <div class="cues">
+        <span><span class="tk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg></span> No surprise suspensions for what you legally sell</span>
+        <span><span class="tk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg></span> Payments that don’t freeze mid-season</span>
+        <span><span class="tk"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg></span> Own Your Exit — your store, code, and SEO come with you</span>
+      </div>
+    </div>
+    <div class="stage">
+      <div class="console">
+        <div class="c-head"><span class="url">🔒 highproofspirits.com</span><span class="c-live"><i></i> Live</span></div>
+        <div class="c-body">
+          <div class="crow"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg></span><span class="lab">Storefront</span><span class="val"><b>Live</b> · 99.99% uptime</span></div>
+          <div class="crow"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg></span><span class="lab">Payments</span><span class="val"><b>Clearing</b> · $48,210 today</span></div>
+          <div class="crow"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg></span><span class="lab">Age &amp; ID checks</span><span class="val"><b>Passing</b> · can’t be turned off</span></div>
+          <div class="crow"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg></span><span class="lab">Compliance</span><span class="val"><b>Filed</b> · PACT + excise</span></div>
+          <div class="crow"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg></span><span class="lab">SEO</span><span class="val"><b>12,480</b> pages · yours to keep</span></div>
+          <div class="crow killed"><span class="ic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg></span><span class="lab">Shopify · account under review — restricted goods</span><span class="val">left behind</span></div>
+        </div>
+        <div class="c-foot"><b>One platform</b> — store, payments, verification &amp; compliance<span class="migbadge">migrated in 6 days</span></div>
+      </div>
+    </div>
+  </div>
+</section>
+
+<section class="fear" data-section="fear">
+  <div class="wrap">
+    <div class="big"><span class="u">$0</span></div>
+    <div>
+      <span class="kicker" style="color:#7fe3d6">The risk is real</span>
+      <h2>What’s left of your revenue the day the platform decides your category is a liability.</h2>
+      <p>Regulated merchants run their whole business on someone else’s platform. One policy change, one flagged category, and the store is shut off — no appeal, no warning. In June 2026, a wave of mass deplatforming hit the vape &amp; nicotine category on a major cart platform.</p>
+      <p class="src">source: TOT Ecommerce direction — “a platform nobody can kick you off of”</p>
+    </div>
+  </div>
+</section>
+
+<section class="blk" id="cant-shut-off" data-section="cant-shut-off">
+  <div class="wrap">
+    <div class="center">
+      <span class="kicker">Why it can’t be shut off</span>
+      <h2 class="big2">Three reasons no one can pull the plug on your store</h2>
+      <p class="section-lede center">Not a promise in a terms-of-service page — it’s how the platform is built.</p>
+    </div>
+    <div class="pillars">
+      <article class="pillar">
+        <span class="pic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3v11m0-11L8 7m4-4l4 4"/><path d="M5 14v4a2 2 0 002 2h10a2 2 0 002-2v-4"/></svg></span>
+        <h3>One vendor, and Own Your Exit</h3>
+        <p>The thing you actually worry about when you pick a platform: getting stuck, or getting cut off. So one platform, one relationship — not five services that can each drop you — and we <b>back it with a guarantee</b>: we deliver the experience we promised, or we help you <b>eject your storefront</b> — a clean, runnable copy of everything (code, brand, content, catalog) — to take anywhere you want. <b>Shopify will never do that. We will.</b> <span style="display:block;margin-top:8px;font-size:.78rem;color:var(--muted)">Some terms &amp; conditions apply.</span></p>
+        <span class="tag">guaranteed — or you take it and go</span>
+      </article>
+      <article class="pillar">
+        <span class="pic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/><path d="M9 12l2.2 2.2L15.5 9.5"/></svg></span>
+        <h3>Built for what you sell</h3>
+        <p>Regulated categories aren’t a liability we tolerate until a policy update — they’re the whole reason we exist. Our line is the law, not taste: <b>if it’s legal, you’re welcome.</b> Age, ID, excise and state rules are native, so we handle the compliance instead of policing your catalog.</p>
+        <span class="tag">as long as it’s legal</span>
+      </article>
+      <article class="pillar">
+        <span class="pic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 10V8a6 6 0 1112 0v2M5 10h14v10H5z"/></svg></span>
+        <h3>Compliance you can’t turn off</h3>
+        <p>The age gate and legal warnings live where no edit — yours or an AI’s — can reach them, and a store that hides them simply won’t publish. In a world where you’re moving fast and AI can hallucinate, that hard floor is the assurance that lets you ship quickly without ever shipping a violation.</p>
+        <span class="tag">won’t ship if the gate is missing</span>
+      </article>
+    </div>
+  </div>
+</section>
+
+<section class="cmp-wrap blk" id="compare" data-section="compare">
+  <div class="wrap">
+    <div class="center">
+      <span class="kicker">Coming from somewhere else?</span>
+      <h2 class="big2">Better than the platform you’re on now</h2>
+      <p class="section-lede center">Honest, code-backed head-to-heads. Click any platform to see where it gets regulated merchants — and how we’re different.</p>
+    </div>
+    <div class="cmp-cards">
+
+      <div class="cmp" data-cmp="shopify">
+        <button class="top" aria-expanded="false" data-ev="compare_shopify">
+          <span class="logo" style="background:#95bf47">S</span>
+          <span class="tt"><span class="nm">Shopify</span><span class="sub">The deplatformer</span></span>
+          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+        </button>
+        <div class="panel">
+          <div class="row2 them"><div class="h"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M12 8v5M12 16.5v.5"/><circle cx="12" cy="12" r="9"/></svg> Where it gets you</div>
+            <p>Regulated categories are a policy liability. Shopify can flag your category and <b>shut you off with no appeal</b> — the June 2026 vape/nicotine deplatforming wave hit stores that did nothing wrong. And you can’t take your store with you.</p></div>
+          <div class="row2 us"><div class="h"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg> How we’re different</div>
+            <p>Built for regulated goods on purpose. <b>Own Your Exit</b>: ask once, get a clean runnable copy of everything — code, brand, content, catalog. The relationship outlives the hosting.</p></div>
+        </div>
+      </div>
+
+      <div class="cmp" data-cmp="bigcommerce">
+        <button class="top" aria-expanded="false" data-ev="compare_bigcommerce">
+          <span class="logo" style="background:#121118">B</span>
+          <span class="tt"><span class="nm">BigCommerce</span><span class="sub">Tolerant, not compliant</span></span>
+          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+        </button>
+        <div class="panel">
+          <div class="row2 them"><div class="h"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M12 8v5M12 16.5v.5"/><circle cx="12" cy="12" r="9"/></svg> Where it gets you</div>
+            <p>Credit where due: real commerce maturity, headless, a deep ecosystem. But <b>open isn’t governed, and tolerant isn’t compliant</b> — tolerance can change with a policy update, and there’s no native age/ID, excise, or compliance-gated publish. That’s the 2026 “tolerance tax.”</p></div>
+          <div class="row2 us"><div class="h"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg> How we’re different</div>
+            <p>Native compliance that can’t be turned off, an <b>agent-governed ship</b> (green evidence or it doesn’t publish), multi-tenant delegation for agencies, and Own Your Exit.</p></div>
+        </div>
+      </div>
+
+      <div class="cmp" data-cmp="woocommerce">
+        <button class="top" aria-expanded="false" data-ev="compare_woocommerce">
+          <span class="logo" style="background:#7f54b3">W</span>
+          <span class="tt"><span class="nm">WooCommerce</span><span class="sub">Sovereignty + the whole burden</span></span>
+          <svg class="chev" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 9l6 6 6-6"/></svg>
+        </button>
+        <div class="panel">
+          <div class="row2 them"><div class="h"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4"><path d="M12 8v5M12 16.5v.5"/><circle cx="12" cy="12" r="9"/></svg> Where it gets you</div>
+            <p>Total sovereignty — and the <b>entire burden</b>. You own the payment-underwriting fight, a 4-vendor compliance stack, the plugin patch treadmill (<b>96% of WordPress vulnerabilities</b> come from plugins), ~40–50% Core Web Vitals, and no governed agent. Honest credit: Woo wins on ecosystem, cost, maturity, and portability.</p></div>
+          <div class="row2 us"><div class="h"><svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg> How we’re different</div>
+            <p>Sovereignty <b>without</b> the burden: managed edge (~100 Lighthouse), built-in age/ID + excise + compliance-gated ship, an agent-native MCP build loop, and Own Your Exit.</p></div>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</section>
+
+<section class="persona-wrap blk" id="who" data-section="who">
+  <div class="wrap center">
+    <span class="kicker">Why you should care</span>
+    <h2 class="big2">Pick your seat</h2>
+    <p class="section-lede center">The same platform answers a different concern depending on who you are. Choose one — then read the full story.</p>
+    <div class="seg" role="tablist">
+      <button role="tab" aria-selected="true" data-persona="owner" data-ev="persona_owner">Merchant owner</button>
+      <button role="tab" aria-selected="false" data-persona="developer" data-ev="persona_developer">Developer</button>
+      <button role="tab" aria-selected="false" data-persona="agency" data-ev="persona_agency">Agency</button>
+    </div>
+  </div>
+  <div class="wrap">
+
+    <div class="ppanel on" data-panel="owner">
+      <div class="lft">
+        <span class="who">Merchant owner</span>
+        <h3>Your store. Your rules. Nobody’s to shut down.</h3>
+        <p>For vape, nicotine, hemp, and alcohol brands who are done living one policy change away from losing everything.</p>
+        <a class="deck" href="https://mcp.tokenoftrust.com/decks/mcp-storefront/view" target="_blank" rel="noopener" data-ev="deck_owner">See the full owner story <svg class="arrow" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+      </div>
+      <div class="rgt">
+        <div class="ben"><span class="bic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/></svg></span><div><div class="bt">Never deplatformed overnight</div><div class="bd">The store is yours to keep — outgrow us and walk away with the whole thing.</div></div></div>
+        <div class="ben"><span class="bic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 12h8M8 8h8M8 16h5"/></svg></span><div><div class="bt">Build it in a conversation</div><div class="bd">Describe changes in plain language to a copilot that speaks Token of Trust. Live in a day, not a quarter.</div></div></div>
+        <div class="ben"><span class="bic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg></span><div><div class="bt">Compliance you can’t turn off</div><div class="bd">Age gate and warnings live where no edit reaches. A store that breaks the rules won’t publish — not even for you.</div></div></div>
+        <div class="ben"><span class="bic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></span><div><div class="bt">You hold the go-live gate</div><div class="bd">Every change previews first, ships on one informed click, and rolls back in one step.</div></div></div>
+      </div>
+    </div>
+
+    <div class="ppanel" data-panel="developer">
+      <div class="lft">
+        <span class="who">Developer</span>
+        <h3>Develop fast. Publish live. Never ship a violation.</h3>
+        <p>Point your AI agent at Token of Trust and build against your real, running store — fast and safe to develop, and easy to publish and go live. The running site is the screen.</p>
+        <a class="deck" href="https://mcp.tokenoftrust.com/decks/mcp-developer/view" target="_blank" rel="noopener" data-ev="deck_developer">See the full developer story <svg class="arrow" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+      </div>
+      <div class="rgt">
+        <div class="ben"><span class="bic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M8 3H5a2 2 0 00-2 2v3M16 3h3a2 2 0 012 2v3M8 21H5a2 2 0 01-2-2v-3M16 21h3a2 2 0 002-2v-3"/></svg></span><div><div class="bt">Live recipes &amp; specs</div><div class="bd">Pulled from the real endpoint at request time — never a stale PDF. Your agent turns them into working code.</div></div></div>
+        <div class="ben"><span class="bic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/></svg></span><div><div class="bt">Easy to develop, easy to publish</div><div class="bd">Build against your real running store, preview every change safely, then publish live in one step. The running site is the screen — no staging guesswork.</div></div></div>
+        <div class="ben"><span class="bic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg></span><div><div class="bt">Green means ship</div><div class="bd">A compliance coach rides beside your agent and names the one thing to fix — it never invents legal copy.</div></div></div>
+      </div>
+    </div>
+
+    <div class="ppanel" data-panel="agency">
+      <div class="lft">
+        <span class="who">Agency</span>
+        <h3>One login. Every client store.</h3>
+        <p>Ship approved changes to your clients’ live stores — without ever holding their keys.</p>
+        <a class="deck" href="https://mcp.tokenoftrust.com/decks/mcp-agency/view" target="_blank" rel="noopener" data-ev="deck_agency">See the full agency story <svg class="arrow" viewBox="0 0 24 24" width="15" height="15" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+      </div>
+      <div class="rgt">
+        <div class="ben"><span class="bic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M15 12H3M11 8l4 4-4 4M21 4v16"/></svg></span><div><div class="bt">Ship without holding keys</div><div class="bd">Roll a green, approved change to a client’s live store on the authority they grant — not a shared admin login.</div></div></div>
+        <div class="ben"><span class="bic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l8 3v6c0 5-3.5 8-8 9-4.5-1-8-4-8-9V6z"/></svg></span><div><div class="bt">Granted, scoped, revocable</div><div class="bd">The owner authorizes you from their dashboard and can pull it back in one click. Each client walled off from every other.</div></div></div>
+        <div class="ben"><span class="bic"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M9 11l3 3L22 4M21 12v7a2 2 0 01-2 2H5a2 2 0 01-2-2V5a2 2 0 012-2h11"/></svg></span><div><div class="bt">A receipt for every ship</div><div class="bd">Every grant, ship, and rollback is logged with who and what — tiered from preview-only to ship-approved.</div></div></div>
+      </div>
+    </div>
+
+  </div>
+</section>
+
+<section class="final" id="request" data-section="request">
+  <div class="wrap">
+    <div class="cta-band">
+      <span class="cb cb1"></span><span class="cb cb2"></span>
+      <span class="kicker">Get early access</span>
+      <h2>A store nobody can take from you.</h2>
+      <p>We’re in early access, onboarding regulated brands by invitation. Tell us what you sell and we’ll get you a store you can sleep behind.</p>
+      <div class="hero-ctas">
+        <a class="btn btn-white" href="#request" data-ev="request_access_footer">Request early access <svg class="arrow" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></a>
+        <a class="btn btn-line" href="/auth/login?next=%2Fdashboard" data-ev="login_footer" style="background:transparent;color:#fff;border-color:rgba(255,255,255,.3)">Log in</a>
+      </div>
+    </div>
+  </div>
+</section>
+
+<div class="strip">
+  <div class="wrap">
+    <div class="built">
+      <span class="k">Built for</span>
+      <span class="tag">Alcohol</span><span class="sep">·</span><span class="tag">Vape &amp; tobacco</span><span class="sep">·</span>
+      <span class="tag">Nicotine</span><span class="sep">·</span><span class="tag">Hemp &amp; CBD</span><span class="sep">·</span>
+      <span class="tag">Firearms</span><span class="sep">·</span><span class="tag">High-risk DTC</span>
+    </div>
+    <div class="repl">Replaces <b>Shopify</b> · <b>BigCommerce</b> · <b>WooCommerce</b> + your host</div>
+  </div>
+</div>
+
+<footer class="foot">
+  <div class="wrap">© 2026 Token of Trust®. Regulated Storefront is in early access. Own Your Look · Own Your Exit · We will never sell your data.</div>
+</footer>
+
+<!-- Request early access — modal opened by any [href="#request"] CTA (see storefront.js) -->
+<div class="modal" id="ra-modal" role="dialog" aria-modal="true" aria-labelledby="ra-title">
+  <div class="ov" data-close></div>
+  <div class="dlg">
+    <div class="dlg-head">
+      <div>
+        <h3 id="ra-title">Request early access</h3>
+        <p>Tell us what you sell and we’ll be in touch about a store you can sleep behind.</p>
+      </div>
+      <button class="x" type="button" data-close aria-label="Close">
+        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"/></svg>
+      </button>
+    </div>
+    <form class="ra" novalidate>
+      <div class="fld">
+        <label for="ra-email">Work email</label>
+        <input id="ra-email" name="email" type="email" required autocomplete="email" placeholder="you@yourbrand.com">
+      </div>
+      <div class="row">
+        <div class="fld">
+          <label for="ra-first">First name</label>
+          <input id="ra-first" name="firstName" type="text" required autocomplete="given-name">
+        </div>
+        <div class="fld">
+          <label for="ra-last">Last name</label>
+          <input id="ra-last" name="lastName" type="text" required autocomplete="family-name">
+        </div>
+      </div>
+      <div class="fld">
+        <label for="ra-phone">Phone <span class="opt">(optional)</span></label>
+        <input id="ra-phone" name="phone" type="tel" autocomplete="tel">
+      </div>
+      <div class="fld">
+        <label for="ra-details">What do you sell? <span class="opt">(optional)</span></label>
+        <textarea id="ra-details" name="details" placeholder="Category, current platform, monthly volume — whatever helps us help you."></textarea>
+      </div>
+      <div class="err" role="alert"></div>
+      <button class="btn btn-grad" type="submit">Request early access <svg class="arrow" viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14M13 6l6 6-6 6"/></svg></button>
+    </form>
+    <div class="ra-done">
+      <span class="tick"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M4 12.5l5 5L20 7"/></svg></span>
+      <h3>Thanks — we’ll be in touch.</h3>
+      <p>We review every request personally and onboard regulated brands by invitation. Watch your inbox.</p>
+      <button class="btn btn-line" type="button" data-close>Close</button>
+    </div>
+  </div>
+</div>
+
+<script src="/tenants/home/js/storefront.js" defer></script>
+</body>
+</html>

package/tenants/home/content/home.json

@@ -0,0 +1,13 @@
+{
+  "seoTitle": "Home",
+  "seoDescription": "Storefront home — coming soon.",
+  "blocks": [
+    {
+      "component": "hero",
+      "headline": "Storefront",
+      "subhead": "This is the default home. A real homepage is coming soon.",
+      "ctaLabel": "Browse the catalog",
+      "ctaHref": "/collections"
+    }
+  ]
+}