@gemboss/website-ui 0.6.0 → 0.7.0

package/js/website.js

@@ -1,11 +1,11 @@
-/*! @gemboss/website-ui 0.6.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
+/*! @gemboss/website-ui 0.7.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
 (function () {
 'use strict';
 if (window.gwWebsite) return;
 
-var version = '0.6.0';
+var version = '0.7.0';
 var api = { version: version, init: init, destroy: destroy };
-var doc, root, mine, fine, sys, wide, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var doc, root, mine, fine, sys, wide, mid, live = [], megaOpen = null, megaTimer = 0, queued = false;
 var READY = 'data-gw-ready';
 
 function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
@@ -250,15 +250,32 @@ function tables(ctx) {
   });
 }
 
+function folds(ctx) {
+  each(ctx, '.gw-footer__fold', 'fold', function (d, on) {
+    var s = d.querySelector('summary'), own = d.open, tab = s && s.getAttribute('tabindex');
+    if (!s) return;
+    function tabs(v) { if (v === null) s.removeAttribute('tabindex'); else s.setAttribute('tabindex', v); }
+    var r = {
+      fit: function () { d.open = mid.matches || own; tabs(mid.matches ? '-1' : tab); },
+      stop: function () { d.open = own; tabs(tab); }
+    };
+    on(s, 'click', function (e) { if (mid.matches) e.preventDefault(); });
+    r.fit();
+    return r;
+  });
+}
+
 function install() {
   doc = document; root = doc.documentElement; mine = new WeakSet();
   fine = mq('(hover: hover) and (pointer: fine)'); sys = mq('(prefers-color-scheme: dark)');
   var stored = null;
   wide = mq('(min-width: 1080px)');
+  mid = mq('(min-width: 768px)');
   on(doc, 'click', function (e) { if (megaOpen && !inside(megaOpen, e.target)) hideMega(); });
   on(doc, 'keydown', function (e) { if (megaOpen && esc(e)) hideMega(inside(megaOpen, doc.activeElement) || megaOpen.mode === 'click'); });
   on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });
   watch(wide, function () { if (wide.matches) closeMenus(); records('toc', function (r) { r.fit(); }); });
+  watch(mid, function () { records('fold', function (r) { r.fit(); }); });
   on(window, 'pageshow', function (e) { if (e.persisted) closeMenus(); });
   try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
   if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
@@ -283,7 +300,7 @@ function init(ctx) {
   window.gwWebsite = api;
   if (!doc) run([install]);
   live.slice().forEach(function (r) { if (r.el.isConnected === false) drop(r); });
-  run([mega, mobile, theme, reveal, header, current, segmented, toc, tables], ctx && ctx.querySelectorAll ? ctx : doc);
+  run([mega, mobile, theme, reveal, header, current, segmented, toc, tables, folds], ctx && ctx.querySelectorAll ? ctx : doc);
 }
 
 /** Takes back what init() wired under root (default: the whole document): listeners and data-gw-ready marks. */

package/js/website.mjs

@@ -6,10 +6,10 @@
 // the export line and the // comments, plus auto-init): edit this file, then run the build. Keep comments on lines of
 // their own, so the build can leave them out.
 
-var version = '0.6.0';
+var version = '0.7.0';
 var api = { version: version, init: init, destroy: destroy };
 // Page state. Set up by the first init(), never at import: a server can import this file.
-var doc, root, mine, fine, sys, wide, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var doc, root, mine, fine, sys, wide, mid, live = [], megaOpen = null, megaTimer = 0, queued = false;
 var READY = 'data-gw-ready';
 
 function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
@@ -286,6 +286,27 @@ function tables(ctx) {
   });
 }
 
+// Footer folds (0.7.0, gap #40): each <details class="gw-footer__fold"> (a column, a family row). Below 768px it keeps
+// the markup's own state (folded unless the markup says open) and the browser opens and closes it. From 768px it is a
+// plain column: the script sets `open`, takes the <summary> out of the Tab order (tabindex="-1") and ignores a click on
+// it, so the heading cannot fold the list away. Again on every change of width; destroy gives back the markup's state.
+// The CSS shows the list from 768px without the script too (::details-content), so this is for state and for browsers
+// without that.
+function folds(ctx) {
+  each(ctx, '.gw-footer__fold', 'fold', function (d, on) {
+    var s = d.querySelector('summary'), own = d.open, tab = s && s.getAttribute('tabindex');
+    if (!s) return;
+    function tabs(v) { if (v === null) s.removeAttribute('tabindex'); else s.setAttribute('tabindex', v); }
+    var r = {
+      fit: function () { d.open = mid.matches || own; tabs(mid.matches ? '-1' : tab); },
+      stop: function () { d.open = own; tabs(tab); }
+    };
+    on(s, 'click', function (e) { if (mid.matches) e.preventDefault(); });
+    r.fit();
+    return r;
+  });
+}
+
 // Once per page: what belongs to the document, the window or a media query rather than to one element.
 function install() {
   doc = document; root = doc.documentElement; mine = new WeakSet();
@@ -293,10 +314,13 @@ function install() {
   var stored = null;
   // 1080px, the kit's desktop width: the header shows its nav, the contents sit beside the article
   wide = mq('(min-width: 1080px)');
+  // 768px: the footer's columns stand open from here, and fold below it
+  mid = mq('(min-width: 768px)');
   on(doc, 'click', function (e) { if (megaOpen && !inside(megaOpen, e.target)) hideMega(); });
   on(doc, 'keydown', function (e) { if (megaOpen && esc(e)) hideMega(inside(megaOpen, doc.activeElement) || megaOpen.mode === 'click'); });
   on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });
   watch(wide, function () { if (wide.matches) closeMenus(); records('toc', function (r) { r.fit(); }); });
+  watch(mid, function () { records('fold', function (r) { r.fit(); }); });
   on(window, 'pageshow', function (e) { if (e.persisted) closeMenus(); });
   try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
   if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
@@ -327,7 +351,7 @@ function init(ctx) {
   if (!doc) run([install]);
   // an element removed from the page since the last init is let go
   live.slice().forEach(function (r) { if (r.el.isConnected === false) drop(r); });
-  run([mega, mobile, theme, reveal, header, current, segmented, toc, tables], ctx && ctx.querySelectorAll ? ctx : doc);
+  run([mega, mobile, theme, reveal, header, current, segmented, toc, tables, folds], ctx && ctx.querySelectorAll ? ctx : doc);
 }
 
 /** Takes back what init() wired under root (default: the whole document): listeners and data-gw-ready marks. */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "The GemBoss website kit: tokens, header, footer, sections and the rules (AGENTS.md) that GemCommerce public websites share, plus a CLI that checks a site, reports kit gaps and upgrades.",
   "license": "UNLICENSED",
   "type": "module",

package/skill/SKILL.md

@@ -25,6 +25,9 @@ the kit and its rules are how the page ends up looking designed. Compose from th
      words under it with `aria-invalid="true"`; the page decides when, the kit draws it.
    - Ratings and testimonials (`KIT/templates/sections/testimonials.html`): only real ones, each linked to the page it
      comes from, the reviewer's words exactly; stars carry their value in words (`aria-label="4.9 out of 5"`).
+   - The footer is `KIT/templates/footer.html` (the footer of gemboss.ai), filled once in the site's shared partial:
+     fill its rows (columns, family rows, words), delete the optional parts you do not use (Ask AI, newsletter, family
+     rows, theme toggle, wordmark), never invent a footer part. Columns fold on phones by themselves (`<details>`).
    - Changed page: keep its kit classes; change words, order and choice of sections.
    - Site CSS only for what the kit cannot know (an illustration, a product mock-up), with the kit's tokens and
      scales, classes in the site's own prefix. Never style a `.gw-*` class, never edit `node_modules`.

package/system.json

@@ -95,6 +95,8 @@
     "display": {
       "h1": "clamp(40px, 4.6vw, 68px)",
       "h2": "clamp(32px, 3.4vw, 52px)",
+      "wordmark": "clamp(40px, 9vw, 128px)",
+      "$comment": "wordmark (0.7.0): the footer's last line on gemboss.ai, the brand's name, faint, at the end of the page. Decoration only, never a heading.",
       "weight": 600,
       "tracking": "-0.03em"
     },

package/templates/footer.html

@@ -1,11 +1,18 @@
 <!--
-  Footer: one per site, the same on every page. A brand block, three to five link columns, a bottom row.
-  Limits: column headings are one or two words in sentence case; four to seven links per column; the bottom row
-  holds the copyright, the legal links and the social links, nothing else. Replace every [bracketed] placeholder.
-  The newsletter form in the brand block is optional (0.6.0): keep it only when it is wired to a list that keeps the
-  address and sends what the note promises; otherwise delete the <form>. The note says how often and how to stop, and
-  links to the privacy policy. No box ticked for the reader, no "No thanks, I hate saving money". On send: the page
-  sets aria-invalid="true" and the error's words, or aria-busy on the button and then a role="status" line.
+  Footer: one per site, the same on every page, built from this template (AGENTS.md: brands fill its rows, they never
+  invent a footer part). It is the footer of gemboss.ai (0.7.0). In order:
+    1. the brand block: logo, one sentence; OPTIONAL the Ask AI row; OPTIONAL the newsletter form (0.6.0)
+    2. three to six link columns, each a <details class="gw-footer__fold">: folded rows on phones (below 768px), open
+       columns from 768px. Headings one or two words in sentence case, four to seven links each.
+    3. OPTIONAL product-family rows: a label and two to eight products, name and one line each; repeat the <nav> for a
+       second family
+    4. the bottom row: copyright, legal links, OPTIONAL theme toggle, social links. Nothing else.
+    5. OPTIONAL the wordmark: the brand's mark and name, large and faint, decoration only
+  Replace every [bracketed] placeholder and delete the optional parts you do not use. website.js wires the folds and
+  the toggle; without it the footer still works (the browser folds the <details> by itself).
+
+  Links that leave the site carry <span class="gw-footer__ext" aria-hidden="true"></span> (a drawn ↗). A link with
+  target="_blank" also carries <span class="gw-visually-hidden"> (opens in a new tab)</span>; a link without it does not.
 -->
 <footer class="gw-footer">
   <div class="gw-wrap">
@@ -13,6 +20,22 @@
       <div class="gw-footer__brand">
         <a class="gw-brand" href="/"><img class="gw-brand__mark" src="[/logo.svg]" alt="" width="26" height="26"><span class="gw-brand__name">[Brand]</span></a>
         <p>[One sentence on what the brand does for the reader.]</p>
+        <!-- OPTIONAL Ask AI: each link opens an assistant with the same neutral question already typed, URL-encoded after
+             ?q= (spaces as %20). Ask what the brand is and what it does for the reader, never a leading question. Words,
+             not the assistants' logos. -->
+        <div class="gw-footer__ask">
+          <p class="gw-footer__ask-label" id="footer-ask">Ask AI about [Brand]</p>
+          <ul aria-labelledby="footer-ask">
+            <li><a href="https://chatgpt.com/?q=[URL-encoded question]" target="_blank" rel="noopener">ChatGPT<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+            <li><a href="https://claude.ai/new?q=[URL-encoded question]" target="_blank" rel="noopener">Claude<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+            <li><a href="https://www.perplexity.ai/search/new?q=[URL-encoded question]" target="_blank" rel="noopener">Perplexity<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+            <li><a href="https://www.google.com/search?udm=50&amp;q=[URL-encoded question]" target="_blank" rel="noopener">Google AI Mode<span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+          </ul>
+        </div>
+        <!-- OPTIONAL newsletter (0.6.0): keep it only when it is wired to a list that keeps the address and sends what the
+             note promises. The note says how often and how to stop, and links to the privacy policy. No box ticked for
+             the reader, no "No thanks, I hate saving money". On send: the page sets aria-invalid="true" and the error's
+             words, or aria-busy on the button and then a role="status" line. -->
         <form class="gw-footer__newsletter" action="[/newsletter endpoint]" method="post" novalidate>
           <div class="gw-field">
             <label class="gw-field__label" for="footer-email">[Product news by email]</label>
@@ -25,31 +48,96 @@
           </div>
         </form>
       </div>
-      <nav class="gw-footer__col" aria-label="[Column heading]">
-        <h2 class="gw-footer__heading">[Column heading]</h2>
-        <ul>
-          <li><a href="[/page]">[Page title]</a></li>
-          <li><a href="[/page]">[Page title]</a></li>
-          <li><a href="[/page]">[Page title]</a></li>
-        </ul>
+      <!-- the columns: three to six. Each is a <nav> named like its heading, and the heading sits inside the <summary>. -->
+      <nav class="gw-footer__col" aria-label="[Product]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Product]</h2></summary>
+          <ul>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/pricing]">[Pricing]</a></li>
+          </ul>
+        </details>
       </nav>
-      <nav class="gw-footer__col" aria-label="[Column heading]">
-        <h2 class="gw-footer__heading">[Column heading]</h2>
-        <ul>
-          <li><a href="[/page]">[Page title]</a></li>
-          <li><a href="[/page]">[Page title]</a></li>
-        </ul>
+      <nav class="gw-footer__col" aria-label="[Use cases]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Use cases]</h2></summary>
+          <ul>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+          </ul>
+        </details>
+      </nav>
+      <nav class="gw-footer__col" aria-label="[Solutions]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Solutions]</h2></summary>
+          <ul>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+          </ul>
+        </details>
+      </nav>
+      <nav class="gw-footer__col" aria-label="[Resources]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Resources]</h2></summary>
+          <ul>
+            <li><a href="[/blog]">[Blog]</a></li>
+            <li><a href="[/docs]">[Docs]</a></li>
+            <li><a href="[/page]">[Page title]</a></li>
+            <li><a href="[https://another site of the brand]" rel="noopener">[Changelog]<span class="gw-footer__ext" aria-hidden="true"></span></a></li>
+          </ul>
+        </details>
+      </nav>
+      <nav class="gw-footer__col" aria-label="[Company]">
+        <details class="gw-footer__fold">
+          <summary><h2 class="gw-footer__heading">[Company]</h2></summary>
+          <ul>
+            <li><a href="[/about]">[About]</a></li>
+            <li><a href="[/careers]">[Careers]</a></li>
+            <li><a href="[/partners]">[Partners]</a></li>
+            <li><a href="[/contact]">[Contact]</a></li>
+          </ul>
+        </details>
       </nav>
     </div>
+    <!-- OPTIONAL product family: one <nav> per row, named like its label. Each item is the product's name (<b>) and one
+         line (<i>), a space between them. Another GemCommerce brand lists its siblings here (a GemPages site: GemBoss,
+         GemX, GemUpsells). -->
+    <nav class="gw-footer__family" aria-label="[More from Brand]">
+      <details class="gw-footer__fold">
+        <summary><h2 class="gw-footer__heading">[More from Brand]</h2></summary>
+        <ul>
+          <li><a href="[/product]"><b>[Product]</b> <i>[One line on what it is]</i></a></li>
+          <li><a href="[/product]"><b>[Product]</b> <i>[One line on what it is]</i></a></li>
+          <li><a href="[https://another site of the brand]" rel="noopener"><b>[Product]<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>[One line on what it is]</i></a></li>
+          <li><a href="[https://a sibling brand's site]" target="_blank" rel="noopener"><b>[Product]<span class="gw-footer__ext" aria-hidden="true"></span></b> <i>[One line on what it is]</i><span class="gw-visually-hidden"> (opens in a new tab)</span></a></li>
+        </ul>
+      </details>
+    </nav>
     <div class="gw-footer__bottom">
       <span>© [Year] [Company]. All rights reserved.</span>
       <ul aria-label="Legal">
         <li><a href="[/privacy]">Privacy</a></li>
         <li><a href="[/terms]">Terms</a></li>
       </ul>
+      <!-- OPTIONAL theme toggle: the header's toggle, here instead of (or as well as) in the header -->
+      <button class="gw-theme-toggle gw-footer__toggle" type="button" data-gw-theme-toggle aria-label="Switch to dark theme"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><circle cx="12" cy="12" r="8"/><path d="M12 4a8 8 0 0 1 0 16z" fill="currentColor"/></svg></button>
       <ul aria-label="Social">
         <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
+        <li><a href="[https://social profile]" rel="noopener">[Network]</a></li>
       </ul>
     </div>
+    <!-- OPTIONAL wordmark: decoration (aria-hidden="true", the name is already in the brand block). The mark is an
+         inline SVG drawn in currentColor, so it takes the faint colour; an <img> cannot, so leave the mark out and keep
+         the name. Not shown on phones. -->
+    <div class="gw-footer__wordmark" aria-hidden="true">
+      <svg viewBox="[0 0 width height]">[the brand's mark, every fill and stroke "currentColor"]</svg>
+      <span>[Brand]</span>
+    </div>
   </div>
 </footer>

package/templates/page.html

@@ -95,6 +95,7 @@
     </section>
   </main>
 
+  <!-- the short footer; the full one (Ask AI, family rows, theme toggle, wordmark) is templates/footer.html -->
   <footer class="gw-footer">
     <div class="gw-wrap">
       <div class="gw-footer__grid">
@@ -103,19 +104,23 @@
           <p>[One sentence on what the brand does for the reader.]</p>
         </div>
         <nav class="gw-footer__col" aria-label="[Column heading]">
-          <h2 class="gw-footer__heading">[Column heading]</h2>
-          <ul>
-            <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[/page]">[Page title]</a></li>
-          </ul>
+          <details class="gw-footer__fold">
+            <summary><h2 class="gw-footer__heading">[Column heading]</h2></summary>
+            <ul>
+              <li><a href="[/page]">[Page title]</a></li>
+              <li><a href="[/page]">[Page title]</a></li>
+              <li><a href="[/page]">[Page title]</a></li>
+            </ul>
+          </details>
         </nav>
         <nav class="gw-footer__col" aria-label="[Column heading]">
-          <h2 class="gw-footer__heading">[Column heading]</h2>
-          <ul>
-            <li><a href="[/page]">[Page title]</a></li>
-            <li><a href="[/page]">[Page title]</a></li>
-          </ul>
+          <details class="gw-footer__fold">
+            <summary><h2 class="gw-footer__heading">[Column heading]</h2></summary>
+            <ul>
+              <li><a href="[/page]">[Page title]</a></li>
+              <li><a href="[/page]">[Page title]</a></li>
+            </ul>
+          </details>
         </nav>
       </div>
       <div class="gw-footer__bottom">

package/website.css

@@ -1,4 +1,4 @@
-/*! @gemboss/website-ui 0.6.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
+/*! @gemboss/website-ui 0.7.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
 /* @gemboss/website-ui tokens. GENERATED from system.json by scripts/build.mjs: do not edit by hand. */
 :root {
   color-scheme: light;
@@ -16,6 +16,7 @@
   --gw-text-30: 30px;
   --gw-display-h1: clamp(40px, 4.6vw, 68px);
   --gw-display-h2: clamp(32px, 3.4vw, 52px);
+  --gw-display-wordmark: clamp(40px, 9vw, 128px);
   --gw-display-weight: 600;
   --gw-display-tracking: -0.03em;
   --gw-heading-weight: 650;
@@ -337,6 +338,18 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 }
 .gw-skip:focus { left: 16px; }
 
+/* words for a screen reader only (0.7.0): " (opens in a new tab)" in a link with target="_blank" */
+.gw-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
 /* scroll reveal: the script adds .is-in; the animation is a failsafe that shows it anyway after 2.5s */
 .gw-reveal {
   opacity: 0;
@@ -1083,6 +1096,184 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
   .gw-footer__bottom a { min-height: var(--gw-tap-min); }
 }
 
+/* ---- 0.7.0: the footer as gemboss.ai has it (issue #71) ---------------------------------------------------------------
+   Every part below is optional, per site, and styles only its own markup: a 0.6.0 footer looks exactly as before.
+   In page order: the Ask AI row in the brand block, columns that fold on phones (gap #40), product-family rows, the
+   theme toggle in the bottom row, and the wordmark at the very end. Values measured on gemboss.ai on 25/10/2026 and
+   put on the kit's scales; the full markup is templates/footer.html. */
+
+/* Ask AI: a label and links that open an assistant with one neutral question already typed (a URL-encoded ?q=), so
+   the answer comes from what the web says, not from a claim the brand wrote. Words, not logos. 28px rows, 44px on
+   touch. */
+.gw-footer__ask { margin-top: 24px; }
+/* the row may run wider than the brand's sentence (four names on one line at 390px) */
+.gw-footer__brand:has(> .gw-footer__ask) { max-width: none; }
+.gw-footer__brand:has(> .gw-footer__ask) > :not(.gw-footer__ask) { max-width: 320px; }
+.gw-footer__ask > .gw-footer__ask-label { margin: 0; color: var(--gw-muted); font-size: 13px; }
+.gw-footer__ask > ul { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 4px 0 0; padding: 0; list-style: none; }
+.gw-footer__ask a { display: block; padding-block: 4px; color: var(--gw-ink); line-height: 20px; }
+.gw-footer__ask a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
+
+/* the mark after a link that leaves the site (↗, drawn), aria-hidden; the words "(opens in a new tab)" are a separate
+   .gw-visually-hidden span, only when the link has target="_blank" */
+.gw-footer__ext {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  margin-left: 4px;
+  vertical-align: -1px;
+  background: var(--gw-muted);
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
+}
+
+/* Folds: <details class="gw-footer__fold"> inside a .gw-footer__col (or a .gw-footer__family), its <summary> holding the
+   .gw-footer__heading, then the <ul>. Below 768px each is a 52px row with a chevron, folded unless the markup says
+   `open`; the browser opens and closes it, no script needed. From 768px it is the column as before: the summary is
+   only the heading (display: contents: no box, no Tab stop), and the list shows even while the <details> is closed
+   (::details-content; website.js also sets `open` there, for browsers without it). */
+.gw-footer__fold > summary { list-style: none; }
+.gw-footer__fold > summary::-webkit-details-marker { display: none; }
+.gw-footer__fold .gw-footer__heading { margin: 0; line-height: 20px; }
+.gw-footer__fold > ul { margin: 0; padding: 0; list-style: none; }
+.gw-footer__col > .gw-footer__fold a { line-height: 20px; }
+@media (min-width: 768px) {
+  .gw-footer__fold > summary { display: contents; }
+  .gw-footer__col > .gw-footer__fold .gw-footer__heading { margin-bottom: 12px; }
+}
+@media (min-width: 768px) {
+  .gw-footer__fold::details-content { content-visibility: visible; }
+}
+@media (max-width: 767px) {
+  .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
+  .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) > .gw-footer__brand { padding-bottom: 24px; }
+  .gw-footer__col:has(> .gw-footer__fold),
+  .gw-footer__family { border-bottom: 1px solid var(--gw-line); }
+  .gw-footer__brand + .gw-footer__col:has(> .gw-footer__fold) { border-top: 1px solid var(--gw-line); }
+  .gw-footer__fold > summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    min-height: var(--gw-tap-min);
+    padding-block: 16px;
+    cursor: pointer;
+  }
+  .gw-footer__fold > summary::after {
+    content: "";
+    flex: none;
+    width: 16px;
+    height: 16px;
+    background: var(--gw-muted);
+    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 5.5L8 11l5.5-5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
+    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 5.5L8 11l5.5-5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
+    transition: transform 0.18s var(--gw-ease);
+  }
+  .gw-footer__fold[open] > summary::after { transform: rotate(180deg); }
+  .gw-footer__fold > ul { padding-bottom: 12px; }
+  .gw-footer__col > .gw-footer__fold a { display: flex; align-items: center; min-height: var(--gw-tap-min); }
+}
+/* desktop: the brand's track is as wide as gemboss.ai draws it beside five columns (1.2 parts of 6.2, after five 24px
+   gaps), whatever the number of columns, so a family row can line up with it; the columns share the rest */
+@media (min-width: 1080px) {
+  .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) { grid-template-columns: minmax(0, calc((100% - 120px) * 6 / 31)); }
+}
+
+/* Product family: a labelled row of products, name and one line each (<b> and <i>), as many rows as the brand needs
+   ("More from GemBoss", "From the same team, on the Shopify App Store"). A <nav aria-label> holding a fold whose
+   heading is the label. Two items a row on phones, four from 768px; from 1080px the label sits in the brand's track and
+   the items start where the first column starts. */
+.gw-footer__family .gw-footer__heading { color: var(--gw-muted); font-weight: 500; }
+.gw-footer__family .gw-footer__fold > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.gw-footer__family a {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2px;
+  min-height: var(--gw-tap-min);
+  padding: 8px 12px 8px 0;
+  border-radius: var(--gw-radius-action);
+  color: var(--gw-ink);
+}
+.gw-footer__family a:hover { background: var(--gw-bg-soft); }
+.gw-footer__family b { font-size: 14px; font-weight: 600; line-height: 20px; }
+.gw-footer__family i { color: var(--gw-muted); font-size: 13px; font-style: normal; line-height: 18px; }
+@media (min-width: 768px) {
+  .gw-footer__family { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gw-line); }
+  .gw-footer__family .gw-footer__heading { margin-bottom: 12px; }
+  .gw-footer__family .gw-footer__fold > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; margin-left: -12px; }
+  .gw-footer__family a { min-height: 0; padding: 8px 12px; }
+  .gw-footer__family + .gw-footer__bottom { margin-top: 32px; }
+}
+@media (min-width: 1080px) {
+  .gw-footer__family { display: flow-root; }
+  .gw-footer__family .gw-footer__heading { float: left; width: calc((100% - 120px) * 6 / 31); margin: 8px 0 0; }
+  .gw-footer__family .gw-footer__fold > ul { margin-left: calc((100% - 120px) * 6 / 31 + 12px); }
+}
+
+/* The theme toggle in the bottom row (.gw-theme-toggle with data-gw-theme-toggle, wired like the header's): a 32px
+   square with one hairline, its hit area 40px, 44px on touch. It pushes itself and the social links to the right.
+   Below 768px the copyright and the toggle share the first line, legal and social links the second. */
+.gw-footer__toggle {
+  position: relative;
+  width: 32px;
+  height: 32px;
+  margin-inline: auto 16px;
+  border: 1px solid var(--gw-line-strong);
+  background: var(--gw-surface);
+}
+.gw-footer__toggle::after { content: ""; position: absolute; inset: -5px; }
+.gw-footer__toggle svg { width: 18px; height: 18px; }
+@media (max-width: 768px), (pointer: coarse) {
+  .gw-footer__toggle { width: var(--gw-tap-min); height: var(--gw-tap-min); }
+}
+@media (max-width: 767px) {
+  .gw-footer__bottom:has(> .gw-footer__toggle) { column-gap: 16px; }
+  .gw-footer__bottom:has(> .gw-footer__toggle) > :first-child { flex: 1 1 calc(100% - var(--gw-tap-min) - 16px); }
+  .gw-footer__bottom > .gw-footer__toggle { order: 1; margin: 0; }
+  .gw-footer__bottom:has(> .gw-footer__toggle) > ul { order: 2; }
+  .gw-footer__family + .gw-footer__bottom,
+  .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) + .gw-footer__bottom { margin-top: 24px; }
+}
+
+/* The wordmark: the brand's mark and name, large and faint, the footer's last line. Decoration (aria-hidden="true"):
+   the name is already in the brand block. Its size follows the viewport (--gw-display-wordmark) and it never makes the
+   page scroll sideways: a name too long for the line is cut. The mark is drawn in currentColor (an inline SVG); an
+   <img> mark keeps its own colours, so leave it out and keep the name. Not on phones, as on gemboss.ai. 24px more room
+   under it than gemboss.ai gives: the kit's footer is a painted band (white like the page), and the breathing gate
+   wants half the letters' size between them and its edge (67px under 123px letters at 1366px). */
+.gw-footer__wordmark {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 24px;
+  padding-block: 48px 24px;
+  color: color-mix(in srgb, var(--gw-ink) 10%, transparent);
+  font-size: var(--gw-display-wordmark);
+  font-weight: 700;
+  letter-spacing: var(--gw-display-tracking);
+  line-height: 1;
+  white-space: nowrap;
+  user-select: none;
+}
+.gw-footer__wordmark > svg,
+.gw-footer__wordmark > img { flex: none; width: auto; height: 0.9em; }
+.gw-footer__wordmark > span { min-width: 0; overflow-x: clip; }
+@media (max-width: 767px) { .gw-footer__wordmark { gap: 16px; } }
+@media (max-width: 479px) { .gw-footer__wordmark { display: none; } }
+
+@media (max-width: 768px), (pointer: coarse) {
+  .gw-footer__ask a { display: flex; align-items: center; min-height: var(--gw-tap-min); padding-block: 0; }
+}
+@media (prefers-reduced-motion: reduce) {
+  .gw-footer__fold > summary::after { transition: none; }
+}
+/* a forced-colours screen drops backgrounds: draw the chevron and the ↗ in its text colour */
+@media (forced-colors: active) {
+  .gw-footer__ext,
+  .gw-footer__fold > summary::after { forced-color-adjust: none; background: CanvasText; }
+}
+
 /* sections: hero, logos, stats, features, split, showcase, steps, quote, pricing, CTA. */
 
 /* hero: the first screen. __wash is the one place the wash hues may appear. */