@gemboss/website-ui 0.10.0 → 0.12.0

package/website.css

@@ -1,9 +1,10 @@
-/*! @gemboss/website-ui 0.10.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
+/*! @gemboss/website-ui 0.12.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;
   --gw-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
   --gw-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+  --gw-font-action: Inter;
   --gw-text-11: 11px;
   --gw-text-12: 12px;
   --gw-text-13: 13px;
@@ -19,6 +20,8 @@
   --gw-display-wordmark: clamp(40px, 9vw, 128px);
   --gw-display-weight: 600;
   --gw-display-tracking: -0.03em;
+  --gw-display-h1-leading: 1.1;
+  --gw-display-h2-leading: 1.06;
   --gw-heading-weight: 650;
   --gw-heading-tracking: -0.022em;
   --gw-heading-leading: 1.08;
@@ -42,6 +45,7 @@
   --gw-space-120: 120px;
   --gw-space-section: clamp(56px, 38px + 5vw, 110px);
   --gw-radius-0: 0;
+  --gw-radius-2: 2px;
   --gw-radius-4: 4px;
   --gw-radius-6: 6px;
   --gw-radius-8: 8px;
@@ -58,6 +62,7 @@
   --gw-shadow: 0 1px 2px rgba(31,30,29,.04), 0 2px 6px rgba(31,30,29,.06);
   --gw-shadow-sm: 0 1px 2px rgba(31,30,29,.04);
   --gw-shadow-raised: 0 4px 16px rgba(31,30,29,.10);
+  --gw-shadow-lift: 0 16px 32px -12px rgba(4,5,26,.72), 0 4px 8px -2px rgba(4,5,26,.36);
   --gw-wrap: 1120px;
   --gw-wrap-narrow: 780px;
   --gw-gutter: 22px;
@@ -69,6 +74,7 @@
   --gw-tap-min: 44px;
   --gw-ease: cubic-bezier(.22,1,.36,1);
   --gw-reveal-ms: 700ms;
+  --gw-reveal-distance: 20px;
   --gw-spin-ms: 700ms;
   --gw-spot-radius: 260px;
   --gw-spot-radius-action: 120px;
@@ -81,6 +87,19 @@
   --gw-wash-violet: #7c8af7;
   --gw-wash-sky: #43b0ff;
   --gw-wash-mint: #1fcf9f;
+  --gw-stage-glow: rgba(139, 147, 255, 0.5);
+  --gw-stage-glow-2: rgba(86, 97, 245, 0.34);
+  --gw-stage-top: #1d2058;
+  --gw-stage-bottom: #0d0f2e;
+  --gw-stage-dot: rgba(255, 255, 255, 0.1);
+  --gw-stage-ink: #ffffff;
+  --gw-announce-bg: #171a38;
+  --gw-announce-ink: #b9beda;
+  --gw-announce-line: rgba(255, 255, 255, 0.06);
+  --gw-announce-tag: rgba(122, 132, 255, 0.2);
+  --gw-announce-tag-ink: #a7aeff;
+  --gw-announce-link: #ffffff;
+  --gw-announce-link-line: rgba(255, 255, 255, 0.28);
   /* accent primitives: the only colours a brand overrides (docs/theming.md) */
   --gw-accent-light: #5661f5;
   --gw-accent-strong-light: #3a44de;
@@ -117,6 +136,7 @@
   --gw-night-2: #141722;
   --gw-on-night: #e3e4e8;
   --gw-on-night-muted: #9aa3ff;
+  --gw-scrim: rgba(12, 14, 18, 0.12);
 }
 @media (prefers-color-scheme: dark) {
   :root:not([data-theme="light"]) {
@@ -130,7 +150,7 @@
     --gw-line: #2a2b33;
     --gw-line-strong: #383944;
     --gw-line-control: #6a6d78;
-    --gw-action: #f2f3f5;
+    --gw-action: #e3e4e8;
     --gw-action-hover: #ffffff;
     --gw-on-action: #0d0d12;
     --gw-accent: var(--gw-accent-dark);
@@ -148,6 +168,10 @@
     --gw-night-2: #12141c;
     --gw-on-night: #e3e4e8;
     --gw-on-night-muted: #9aa3ff;
+    --gw-scrim: rgba(0, 0, 0, 0.35);
+    --gw-shadow: 0 1px 0 rgba(0,0,0,.3);
+    --gw-shadow-sm: 0 1px 0 rgba(0,0,0,.25);
+    --gw-shadow-raised: 0 4px 16px rgba(0,0,0,.5);
   }
 }
 :root[data-theme="dark"] {
@@ -161,7 +185,7 @@
   --gw-line: #2a2b33;
   --gw-line-strong: #383944;
   --gw-line-control: #6a6d78;
-  --gw-action: #f2f3f5;
+  --gw-action: #e3e4e8;
   --gw-action-hover: #ffffff;
   --gw-on-action: #0d0d12;
   --gw-accent: var(--gw-accent-dark);
@@ -179,6 +203,10 @@
   --gw-night-2: #12141c;
   --gw-on-night: #e3e4e8;
   --gw-on-night-muted: #9aa3ff;
+  --gw-scrim: rgba(0, 0, 0, 0.35);
+  --gw-shadow: 0 1px 0 rgba(0,0,0,.3);
+  --gw-shadow-sm: 0 1px 0 rgba(0,0,0,.25);
+  --gw-shadow-raised: 0 4px 16px rgba(0,0,0,.5);
 }
 :root[data-theme="light"] {
   color-scheme: light;
@@ -209,6 +237,7 @@
   --gw-night-2: #141722;
   --gw-on-night: #e3e4e8;
   --gw-on-night-muted: #9aa3ff;
+  --gw-scrim: rgba(12, 14, 18, 0.12);
 }
 /* night band: the dark palette inside, on the night ground, in both themes */
 .gw-band--night, .gw-showcase {
@@ -222,7 +251,7 @@
   --gw-line: #2a2b33;
   --gw-line-strong: #383944;
   --gw-line-control: #6a6d78;
-  --gw-action: #f2f3f5;
+  --gw-action: #e3e4e8;
   --gw-action-hover: #ffffff;
   --gw-on-action: #0d0d12;
   --gw-accent: var(--gw-accent-dark);
@@ -236,6 +265,7 @@
   --gw-danger: #ff6b5a;
   --gw-danger-soft: #2e1714;
   --gw-on-danger: #0d0d12;
+  --gw-scrim: rgba(0, 0, 0, 0.35);
 }
 /* action profile "accent": data-gw-action="accent" on <html>. In night bands too, where the dark palette applies. */
 :root[data-gw-action="accent"],
@@ -286,33 +316,34 @@ h1, h2, h3, h4, h5, h6, .gw-h1, .gw-h2, .gw-h3, .gw-h4 {
   text-wrap: balance;
 }
 h1, .gw-h1, h2, .gw-h2 { font-weight: var(--gw-display-weight); letter-spacing: var(--gw-display-tracking); }
-h1, .gw-h1 { font-size: var(--gw-display-h1); }
-h2, .gw-h2 { font-size: var(--gw-display-h2); }
-h3, .gw-h3 { font-size: 24px; }
+h1, .gw-h1 { font-size: var(--gw-display-h1); line-height: var(--gw-display-h1-leading); }
+h2, .gw-h2 { font-size: var(--gw-display-h2); line-height: var(--gw-display-h2-leading); }
+/* h3 (0.12.0): 20px/600, as every h3 on gemboss.ai */
+h3, .gw-h3 { font-size: 20px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; }
 h4, .gw-h4 { font-size: 20px; font-weight: 600; letter-spacing: -0.01em; }
 h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 
-.gw-lead { font-size: 18px; line-height: 1.55; color: var(--gw-muted); max-width: 60ch; }
+.gw-lead { font-size: 18px; line-height: 1.55; color: var(--gw-muted); max-width: 58ch; }
 .gw-note { font-size: 14px; color: var(--gw-muted); }
 .gw-dim { color: var(--gw-muted); }
 
-/* the label above a heading: sentence case, muted, led by the 8px accent square */
+/* the label above a heading: sentence case, muted, led by the 8px square, ink by default (0.12.0, as gemboss.ai). The
+   input --gw-label-mark paints the square another colour (a product's own, say): set it on the label or on anything
+   around it, e.g. style="--gw-label-mark: var(--gw-accent)". */
 .gw-label {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   font-size: 13px;
   font-weight: 500;
-  line-height: 1.4;
   color: var(--gw-muted);
 }
 .gw-label::before {
   content: "";
-  flex: none;
   width: 8px;
   height: 8px;
-  border-radius: var(--gw-radius-0);
-  background: var(--gw-accent);
+  border-radius: var(--gw-radius-2);
+  background: var(--gw-label-mark, var(--gw-ink));
 }
 
 /* links inside running text (and anywhere in .gw-prose) get a visible link style; everything else opts in with .gw-link */
@@ -328,22 +359,26 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 :where(p, dd, td, figcaption, .gw-list--check li, .gw-prose) a:not([class]):hover,
 .gw-link:hover { text-decoration-color: currentColor; }
 
-:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 2px; }
+/* the focus ring, as gemboss.ai draws it (0.11.0): 2px of accent, 3px out, 4px corners */
+:focus-visible { border-radius: var(--gw-radius-4); outline: 2px solid var(--gw-accent); outline-offset: 3px; }
 [id] { scroll-margin-top: calc(var(--gw-header-height) + 16px); }
 
+/* the skip link (0.12.0, gemboss.ai's): the accent tab in the top left corner, shown while it has the focus */
 .gw-skip {
   position: absolute;
   left: -9999px;
-  top: 8px;
-  z-index: 100;
-  padding: 12px 16px;
-  border-radius: var(--gw-radius-action);
-  background: var(--gw-action);
-  color: var(--gw-on-action);
+  top: 0;
+  z-index: 200;
+  padding: 12px 20px;
+  border-radius: 0 0 var(--gw-radius-card) 0;
+  background: var(--gw-accent);
+  color: var(--gw-on-accent);
+  box-shadow: var(--gw-shadow);
   font-size: 14px;
   font-weight: 600;
 }
-.gw-skip:focus { left: 16px; }
+/* its corner again with the focus: a page's own :focus-visible corners, loaded after the kit, must not round the tab */
+.gw-skip:focus { left: 0; border-radius: 0 0 var(--gw-radius-card) 0; }
 
 /* words for a screen reader only (0.7.0): " (opens in a new tab)" in a link with target="_blank" */
 .gw-visually-hidden {
@@ -357,10 +392,11 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   border: 0;
 }
 
-/* scroll reveal: the script adds .is-in; the animation is a failsafe that shows it anyway after 2.5s */
+/* scroll reveal: the script adds .is-in (system.json motion.reveal: when, the stagger, the failsafe); the animation is
+   a second failsafe, for a page whose script never ran, that shows it anyway after 2.5s */
 .gw-reveal {
   opacity: 0;
-  transform: translateY(24px);
+  transform: translateY(var(--gw-reveal-distance));
   transition: opacity var(--gw-reveal-ms) var(--gw-ease), transform var(--gw-reveal-ms) var(--gw-ease);
   animation: gw-reveal-failsafe 1ms linear 2.5s forwards;
 }
@@ -386,15 +422,19 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 @media (min-width: 768px) { .gw-section--tight { padding-block: 64px; } }
 
 /* label + h2 + one or two lines; the vertical flow of every text block in the kit */
-.gw-section__head { max-width: 660px; }
+.gw-section__head { max-width: 760px; }
 .gw-section__head--center { margin-inline: auto; text-align: center; }
 .gw-section__head--center .gw-lead { margin-inline: auto; }
-.gw-section__head:not(:last-child) { margin-bottom: 40px; }
-@media (min-width: 768px) { .gw-section__head:not(:last-child) { margin-bottom: 48px; } }
+/* what follows a head starts 40px under it, 48px from 768px (0.12.0): a top margin on the next thing, at no
+   specificity, so a block that brings its own (a FAQ's 40px, say) keeps it */
+:where(.gw-section__head) + * { margin-top: 40px; }
+@media (min-width: 768px) { :where(.gw-section__head) + * { margin-top: 48px; } }
 
 :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-feature, .gw-plan) > * + * { margin-top: 16px; }
 :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > :is(.gw-actions, .gw-segmented) { margin-top: 32px; }
 :where(.gw-section__head, .gw-hero > .gw-wrap, .gw-split > :not(.gw-window), .gw-cta, .gw-card, .gw-plan) > .gw-list--check { margin-top: 24px; }
+/* a lead under a heading: 20px (0.12.0, as gemboss.ai); in a hero it keeps the 16px of the flow */
+:where(.gw-section__head, .gw-split > :not(.gw-window), .gw-cta) > :where(* + .gw-lead) { margin-top: 20px; }
 
 /* a row of actions: one .gw-btn, then a secondary or a link */
 .gw-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
@@ -436,12 +476,12 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 
 /* actions are rectangles: 40px, the action radius of the site's profile (8, 12 in soft), 14px/600, sentence case.
    The fill is the action colour: ink, or the brand's accent under data-gw-action="accent" (tokens.css). Never a
-   gradient, a wash hue or a shadow. */
+   gradient or a wash hue. On hover (0.12.0, as gemboss.ai) the filled button rises 1px onto the rest shadow; the framed
+   and frameless ones only change their frame or tint. Phones: see "touch" below. */
 .gw-btn {
   position: relative;
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   gap: 8px;
   max-width: 100%;
   height: var(--gw-button-height);
@@ -450,26 +490,34 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   border-radius: var(--gw-radius-action);
   background: var(--gw-action);
   color: var(--gw-on-action);
+  font-family: var(--gw-font-action);
   font-size: 14px;
   font-weight: 600;
-  line-height: 1.4;
   letter-spacing: 0;
   text-align: center;
   white-space: nowrap;
   cursor: pointer;
+  transition: background 0.15s ease, border-color 0.15s ease;
 }
-.gw-btn:hover { background: var(--gw-action-hover); }
+.gw-btn:hover { transform: translateY(-1px); box-shadow: var(--gw-shadow); }
 .gw-btn svg { flex: none; width: 16px; height: 16px; }
 .gw-btn--secondary { background: transparent; border-color: var(--gw-line-strong); color: var(--gw-ink); }
 .gw-btn--secondary:hover { background: transparent; border-color: var(--gw-ink); }
 .gw-btn--ghost { background: transparent; color: var(--gw-ink); }
 .gw-btn--ghost:hover { background: var(--gw-bg-soft); }
+.gw-btn:is(.gw-btn--secondary, .gw-btn--ghost):hover { transform: none; box-shadow: none; }
+/* an arrow after the label (→), nudged 3px on hover */
+.gw-btn__arrow { letter-spacing: 0; transition: transform 0.18s ease; }
+.gw-btn:hover .gw-btn__arrow { transform: translateX(3px); }
+
 .gw-btn--on-night { background: var(--gw-on-night); color: var(--gw-night); }
 .gw-btn--on-night:hover { background: var(--gw-on-night); opacity: 0.88; }
 .gw-btn--sm { height: 36px; padding: 0 16px; }
 .gw-btn--sm::after { content: ""; position: absolute; top: -6px; right: 0; bottom: -6px; left: 0; }
 .gw-btn--lg { height: 48px; padding: 0 24px; font-size: 16px; }
-.gw-btn--block { display: flex; width: 100%; }
+/* a button wider than its label keeps the label at its start (as gemboss.ai), unless it is made wide on purpose: full
+   width (--block), a phone's row of actions, an inline form */
+.gw-btn--block { display: flex; width: 100%; justify-content: center; }
 .gw-btn:disabled, .gw-btn[aria-disabled="true"] { opacity: 0.48; cursor: not-allowed; pointer-events: none; }
 /* pressed: the ink one step darker (the hover ink, as the dashboard's primary), nothing moves; the frameless variants
    take one more step of tint */
@@ -768,33 +816,72 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
 .gw-faq__item[open] > summary::after { transform: rotate(45deg); }
 .gw-faq__item > :not(summary) { margin: 0 0 20px; max-width: 68ch; color: var(--gw-muted); font-size: 16px; }
 
-/* touch: every control is at least 44px tall, labels may wrap */
-@media (max-width: 768px), (pointer: coarse) {
+/* touch: every control is at least 44px tall. A button up to 768px (0.12.0, as gemboss.ai: by the width, not the
+   pointer), its label wrapping (and tighter) from 480px down in the page's <main>, so a long one never pushes the page
+   sideways (a header or an overlay outside <main> keeps its one line) */
+@media (max-width: 768px) {
   .gw-btn, .gw-btn--sm, .gw-btn--lg {
     height: auto;
     min-height: var(--gw-tap-min);
     padding-block: 8px;
-    white-space: normal;
-    text-wrap: balance;
   }
   .gw-btn--lg { min-height: 48px; }
+}
+@media (max-width: 480px) {
+  :where(main) .gw-btn { white-space: normal; line-height: 1.35; }
+}
+@media (max-width: 768px), (pointer: coarse) {
   :is(a, button, label).gw-chip { min-height: var(--gw-tap-min); }
   .gw-segmented > button { height: auto; min-height: var(--gw-tap-min); padding-block: 8px; white-space: normal; text-wrap: balance; }
 }
 
-/* header: announcement, a flat 64px bar with one hairline, mega menu, mobile menu below 1080px.
+/* header: announcement, a flat 64px bar with one hairline, mega menu, mobile menu up to 1080px.
    Not a floating pill: no radius, no blur, no shadow on the bar. Nothing tucks under it. A brand may choose the one
-   other shape, .gw-header--float (an inset card from 1080px, at the end of this file). */
+   other shape, .gw-header--float (an inset card from 1081px, at the end of this file). */
+/* the announcement bar (0.12.0, gemboss.ai's): one sentence on its own ground over the header, the same in both themes
+   (system.json color.announce). A small pill may lead it (.gw-announce__tag); its link is light, underlined by a hairline
+   that brightens on hover. From 520px down, 12px words and a slimmer bar. */
 .gw-announce {
-  padding: 8px var(--gw-gutter);
-  border-bottom: 1px solid var(--gw-line);
-  background: var(--gw-bg-soft);
-  color: var(--gw-ink-2);
+  position: relative;
+  z-index: 60;
+  padding: 12px 16px;
+  border-bottom: 1px solid var(--gw-announce-line);
+  background: var(--gw-announce-bg);
+  color: var(--gw-announce-ink);
   font-size: 13px;
+  font-weight: 500;
   line-height: 1.5;
+  letter-spacing: 0.005em;
   text-align: center;
 }
-.gw-announce a { color: var(--gw-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 4px; }
+/* 2.5px above and below, as gemboss.ai draws the pill (21.5px tall): the one half pixel in the kit */
+.gw-announce__tag {
+  display: inline-block;
+  margin-right: 12px;
+  padding: 2.5px 8px;
+  border-radius: var(--gw-radius-chip);
+  background: var(--gw-announce-tag);
+  color: var(--gw-announce-tag-ink);
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.09em;
+  vertical-align: 1px;
+}
+.gw-announce a {
+  margin-left: 8px;
+  padding-bottom: 2px;
+  border-bottom: 1px solid var(--gw-announce-link-line);
+  color: var(--gw-announce-link);
+  font-weight: 600;
+  text-decoration: none;
+  white-space: nowrap;
+  transition: border-color 0.18s;
+}
+.gw-announce a:hover { border-bottom-color: var(--gw-announce-link); }
+@media (max-width: 520px) {
+  .gw-announce { padding: 8px 12px; font-size: 12px; }
+  .gw-announce__tag { margin-right: 6px; }
+}
 
 .gw-header {
   position: sticky;
@@ -804,47 +891,54 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   background: var(--gw-surface);
 }
 .gw-header.is-scrolled { border-bottom-color: var(--gw-line-strong); }
-.gw-header__bar { display: flex; align-items: center; gap: 16px; height: var(--gw-header-height); }
+/* the bar is 12px wider than the page's wrap with 24px inside, as gemboss.ai draws it (1132px; its content starts
+   18px in from the page's), 6px inside up to 640px. Its own width, whatever order the stylesheets load in: a bar that
+   also carries .gw-wrap (0.10.0 markup) still takes this one. */
+.gw-header__bar { display: flex; align-items: center; gap: 32px; height: var(--gw-header-height); }
+.gw-header > .gw-header__bar { width: min(100% - 32px, var(--gw-wrap) + 12px); margin-inline: auto; padding-inline: 24px; }
+@media (max-width: 640px) { .gw-header > .gw-header__bar { padding-inline: 6px; } }
 
 .gw-brand {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   flex: none;
-  min-height: 44px;
   color: var(--gw-ink);
   font-size: 18px;
   font-weight: 700;
   letter-spacing: -0.01em;
+  line-height: 1.6;
   white-space: nowrap;
 }
-.gw-brand__mark { flex: none; width: 26px; height: 26px; }
-.gw-brand__name { line-height: 1.2; }
+/* the mark: 34px, its corners clipped at 8px, as gemboss.ai (0.11.0; was 26px); a 44px row up to 768px */
+.gw-brand__mark { flex: none; width: 34px; height: 34px; border-radius: var(--gw-radius-8); }
+@media (max-width: 768px) { .gw-brand { min-height: 44px; } }
+.gw-brand__name { line-height: inherit; }
 
 /* desktop nav */
-.gw-nav { display: none; }
+.gw-nav { display: none; margin-left: 6px; }
 .gw-nav__list { display: flex; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
 .gw-nav__trigger,
 .gw-nav__link {
   display: inline-flex;
   align-items: center;
   gap: 6px;
-  height: 40px;
-  padding: 0 12px;
+  padding: 8px 12px;
   border: 0;
   border-radius: var(--gw-radius-action);
   background: transparent;
   color: var(--gw-ink-2);
   font-size: 14px;
   font-weight: 500;
-  line-height: 1.4;
+  line-height: 1.6;
   white-space: nowrap;
   cursor: pointer;
 }
 .gw-nav__trigger:hover,
 .gw-nav__link:hover,
 .gw-nav__item.is-open > .gw-nav__trigger { background: var(--gw-bg-soft); color: var(--gw-ink); }
-/* the chevron: the site's own 24px path, drawn as a mask so it takes currentColor */
+/* the chevron: gemboss.ai's own 24px path (2.6 stroke, square ends) at 12px and 55%, drawn as a mask so it takes
+   currentColor */
 .gw-nav__trigger::after,
 .gw-mobile-menu__group > summary::after {
   content: "";
@@ -852,97 +946,281 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   width: 12px;
   height: 12px;
   background: currentColor;
-  opacity: 0.6;
-  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' 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 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
+  opacity: 0.55;
+  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6'/%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 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%23000' stroke-width='2.6'/%3E%3C/svg%3E") center / 12px no-repeat;
   transition: transform 0.18s var(--gw-ease);
 }
 .gw-nav__trigger[aria-expanded="true"]::after,
 .gw-mobile-menu__group[open] > summary::after { transform: rotate(180deg); }
-.gw-nav__link[aria-current="page"] {
-  color: var(--gw-ink);
-  font-weight: 600;
-  text-decoration: underline;
-  text-decoration-color: var(--gw-accent);
-  text-decoration-thickness: 2px;
-  text-underline-offset: 8px;
+/* the menu's own words are drawn 0.005em tighter (a text action in the bar keeps its tracking); the page you are on,
+   or the section it belongs to (aria-current on the section's name), is named in the accent's strong ink, weight 600,
+   as gemboss.ai (0.11.0; was ink with an underline) */
+.gw-nav .gw-nav__trigger,
+.gw-nav .gw-nav__link { letter-spacing: -0.005em; }
+.gw-nav__link[aria-current="page"],
+.gw-nav__trigger[aria-current] { color: var(--gw-accent-strong); font-weight: 600; }
+
+/* mega menu (0.11.0): gemboss.ai's own, 1:1 (Chris 26/10/2026). A section's name is a link to its page that opens its
+   panel: after the pointer rests 200ms, at once from the keyboard, ArrowDown steps into the first row. From 1081px the
+   script draws ONE surface (.gw-mega-surface) that morphs to the open panel's size and place, the panels crossfade on
+   it, clipped to its outline while it moves, a caret points at the open name, a pill glides under the hovered name and
+   a highlight under the hovered row, and the preview pane follows the row. The page behind dims and blurs (.gw-scrim).
+   A panel: .gw-mega__body (columns of rows, then an aside of pictures) and an optional .gw-mega__foot strip. Its width
+   and its aside's width are the markup's (--gw-mega-w, --gw-mega-pv; 1000 and 320 when it says nothing), its columns
+   too (--gw-mega-cols, 3). Without the script the panels stay hidden and every name is still its page's link. */
+.gw-header { --gw-mega-ease: cubic-bezier(0.25, 1, 0.5, 1); --gw-mega-t: 0.36s; --gw-mega-glide: 0.26s; }
+.gw-nav__item { display: flex; }
+/* gemboss.ai's chevron is an inline 12px SVG after the name (.gw-nav__chev); a name without one keeps the drawn mask */
+.gw-nav__chev { flex: none; opacity: 0.55; transition: transform 0.18s; }
+.gw-nav__trigger:has(> .gw-nav__chev)::after { content: none; }
+.gw-nav__trigger[aria-expanded="true"] > .gw-nav__chev { transform: rotate(180deg); }
+.gw-mega-surface,
+.gw-mega-caret,
+.gw-nav__pill,
+.gw-mega__hl { display: none; }
+.gw-scrim {
+  position: fixed;
+  inset: 0;
+  z-index: 40;
+  pointer-events: none;
+  opacity: 0;
+  background: var(--gw-scrim);
+  -webkit-backdrop-filter: blur(4px);
+  backdrop-filter: blur(4px);
+  transition: opacity 0.24s;
+}
+.gw-scrim.is-on { opacity: 1; }
+/* a link in a panel sets its words at 16px, weight 500, 0.005em tighter, as gemboss.ai; its parts size themselves and
+   inherit the rest (a row's line is weight 500, its tracking the 16px one) */
+.gw-mega a { font-size: 16px; font-weight: 500; letter-spacing: -0.005em; }
+.gw-mega__link b { display: block; }
+.gw-mega__link i { display: block; font-style: normal; }
+@media (min-width: 1081px) {
+  .gw-header.has-mega .gw-nav__trigger,
+  .gw-header.has-mega .gw-nav__link { position: relative; z-index: 1; background: none; }
+  .gw-header.has-mega .gw-nav__trigger:hover,
+  .gw-header.has-mega .gw-nav__link:hover,
+  .gw-header.has-mega .gw-nav__item:hover > .gw-nav__trigger,
+  .gw-header.has-mega .gw-nav__item:focus-within > .gw-nav__trigger { background: none; color: var(--gw-ink); }
+  .gw-header.has-mega .gw-nav__chev { transform: none; transition: transform 0.2s var(--gw-mega-ease); }
+  .gw-header.has-mega .gw-nav__trigger[aria-expanded="true"] > .gw-nav__chev { transform: rotate(180deg); }
+  .gw-nav__pill {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    width: 0;
+    height: 0;
+    border-radius: var(--gw-radius-action);
+    pointer-events: none;
+    opacity: 0;
+    background: color-mix(in srgb, var(--gw-ink) 6%, transparent);
+    transition: translate var(--gw-mega-glide) var(--gw-mega-ease), width var(--gw-mega-glide) var(--gw-mega-ease), opacity 0.2s ease;
+  }
+  .gw-nav__pill.is-on { opacity: 1; }
+  .gw-mega-surface {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: var(--gw-mega-top, 73px);
+    z-index: 88;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    border: 1px solid var(--gw-line);
+    border-radius: var(--gw-radius-popover);
+    background: var(--gw-surface);
+    box-shadow: var(--gw-shadow-raised);
+    opacity: 0;
+    translate: 0 -6px;
+    transition: opacity 0.22s ease, translate var(--gw-mega-t) var(--gw-mega-ease), left var(--gw-mega-t) var(--gw-mega-ease), width var(--gw-mega-t) var(--gw-mega-ease), height var(--gw-mega-t) var(--gw-mega-ease);
+  }
+  .gw-mega-caret {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: calc(var(--gw-mega-top, 73px) - 5px);
+    z-index: 89;
+    width: 12px;
+    height: 12px;
+    pointer-events: none;
+    border-top: 1px solid var(--gw-line);
+    border-left: 1px solid var(--gw-line);
+    border-radius: var(--gw-radius-2) 0 0 0;
+    background: var(--gw-surface);
+    rotate: 45deg;
+    opacity: 0;
+    transition: opacity 0.22s ease, translate var(--gw-mega-t) var(--gw-mega-ease);
+  }
+  .gw-header.is-mega-open .gw-mega-surface,
+  .gw-header.is-mega-open .gw-mega-caret { opacity: 1; }
+  .gw-header.has-mega .gw-mega {
+    position: absolute;
+    top: var(--gw-mega-top, 73px);
+    left: 0;
+    z-index: 90;
+    width: var(--gw-mega-w, 1000px);
+    max-width: calc(100vw - 48px);
+    border-radius: var(--gw-radius-popover);
+    opacity: 0;
+    visibility: hidden;
+    pointer-events: none;
+    translate: 0 -6px;
+    transition: opacity 0.14s ease, translate var(--gw-mega-t) var(--gw-mega-ease), clip-path var(--gw-mega-t) var(--gw-mega-ease), visibility 0s linear var(--gw-mega-t);
+  }
+  .gw-header.has-mega.is-mega-open .gw-mega { translate: 0 0; }
+  .gw-header.has-mega.is-mega-open .gw-nav__item.is-open > .gw-mega {
+    opacity: 1;
+    visibility: visible;
+    pointer-events: auto;
+    transition: opacity 0.24s var(--gw-mega-ease) 0.05s, translate var(--gw-mega-t) var(--gw-mega-ease), clip-path var(--gw-mega-t) var(--gw-mega-ease), visibility 0s;
+  }
+  .gw-mega__body,
+  .gw-mega__foot { translate: var(--gw-mega-dx, 0px) 0; transition: translate var(--gw-mega-t) var(--gw-mega-ease); }
+  .gw-mega__body { display: grid; grid-template-columns: minmax(0, 1fr) var(--gw-mega-pv, 320px); gap: 16px; padding: 12px; }
+  .gw-mega__body:not(:has(> .gw-mega__aside)) { grid-template-columns: minmax(0, 1fr); }
+  .gw-mega__grid { position: relative; display: grid; grid-template-columns: repeat(var(--gw-mega-cols, 3), minmax(0, 1fr)); gap: 0 12px; padding: 12px 0 0; align-content: start; }
+  .gw-mega__col { display: flex; flex-direction: column; gap: 2px; }
+  .gw-mega__heading { position: relative; z-index: 1; margin: 0; padding: 0 12px 8px; color: var(--gw-muted); font-size: 12px; font-weight: 500; line-height: 16px; }
+  .gw-mega__link { position: relative; z-index: 1; display: block; padding: 12px; border-radius: var(--gw-radius-action); color: var(--gw-ink); }
+  .gw-mega__link:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: -2px; }
+  .gw-mega__link b { color: var(--gw-ink); font-size: 14px; font-weight: 500; letter-spacing: 0; line-height: 20px; }
+  .gw-mega__link i { margin-top: 2px; color: var(--gw-muted); font-size: 13px; line-height: 18px; }
+  .gw-mega__link > .gw-mega__icon,
+  .gw-mega__link > img { display: none; }
+  .gw-mega__hl {
+    display: block;
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 0;
+    width: 0;
+    height: 0;
+    border-radius: var(--gw-radius-action);
+    pointer-events: none;
+    opacity: 0;
+    background: color-mix(in srgb, var(--gw-ink) 5%, transparent);
+    transition: translate var(--gw-mega-glide) var(--gw-mega-ease), width var(--gw-mega-glide) var(--gw-mega-ease), height var(--gw-mega-glide) var(--gw-mega-ease), opacity 0.2s ease;
+  }
+  .gw-mega__hl.is-on { opacity: 1; }
+  /* the aside: one card shows at a time, the panel's own (in the markup) or a row's preview (from its <template>) */
+  .gw-mega__aside { position: relative; display: block; min-height: 296px; border-radius: var(--gw-radius-card); overflow: hidden; }
+  .gw-mega__card {
+    position: absolute;
+    inset: 0;
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    padding: 0 0 4px;
+    color: var(--gw-ink);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 0.24s ease;
+  }
+  .gw-mega__card[aria-hidden="true"] { visibility: hidden; transition: opacity 0.24s ease, visibility 0s linear 0.24s; }
+  .gw-mega__card.is-on { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity 0.28s ease, visibility 0s; }
+  .gw-mega__card:focus-visible { border-radius: var(--gw-radius-card); outline: 2px solid var(--gw-accent); outline-offset: -2px; }
+  .gw-mega__foot {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 16px;
+    padding: 16px 24px;
+    border-top: 1px solid var(--gw-line);
+    font-size: 13px;
+  }
+  .gw-mega__foot-start,
+  .gw-mega__foot-end { display: flex; align-items: center; gap: 24px; }
+  .gw-mega__foot a { color: var(--gw-muted); font-size: 13px; font-weight: 500; transition: color 0.15s; }
+  .gw-mega__foot a:hover { color: var(--gw-ink); }
+  .gw-mega__foot a.gw-mega__cta { color: var(--gw-ink); font-weight: 600; }
+}
+/* the Stage under a card's picture: a deep iris ground lit from two corners, in the desktop pane a faint dot grid
+   fading out to the lower left. What sits on it (a page, a screen, a photo, a drawing) is the site's: it lifts objects with --gw-shadow-lift. */
+.gw-mega__art {
+  --gw-lift: var(--gw-shadow-lift);
+  position: relative;
+  display: block;
+  overflow: hidden;
+  border-radius: var(--gw-radius-card);
+  background:
+    radial-gradient(130% 90% at 100% 0%, var(--gw-stage-glow), transparent 55%),
+    radial-gradient(90% 80% at 0% 100%, var(--gw-stage-glow-2), transparent 60%),
+    linear-gradient(160deg, var(--gw-stage-top), var(--gw-stage-bottom));
+  color: var(--gw-stage-ink);
 }
-
-/* mega menu: a floating card centred under the bar, as on gemboss.ai (Chris 24/10/2026): one hairline, the popover
-   radius of the site's profile (20, 24 in soft), the raised shadow (it is a popover), 32px inside. The bridge
-   (::before) keeps the pointer inside while it crosses the 8px gap from the trigger. */
-.gw-mega {
+/* the dots: in the desktop pane only (a phone level's card has none, as gemboss.ai) */
+.gw-mega__aside .gw-mega__art::before {
+  content: "";
   position: absolute;
-  top: calc(100% + 8px);
-  left: 50%;
-  width: min(960px, calc(100vw - 40px));
-  max-height: calc(100vh - var(--gw-header-height) - 24px);
-  overflow-y: auto;
-  transform: translateX(-50%);
-  border: 1px solid var(--gw-line);
-  border-radius: var(--gw-radius-popover);
-  background: var(--gw-surface);
-  box-shadow: var(--gw-shadow-raised);
-}
-.gw-mega::before { content: ""; position: absolute; top: -12px; left: 0; right: 0; height: 12px; }
-.gw-mega:not([hidden]) { animation: gw-mega-in 0.16s var(--gw-ease); }
-@keyframes gw-mega-in { from { opacity: 0; transform: translateX(-50%) translateY(8px); } }
-@media (prefers-reduced-motion: reduce) { .gw-mega:not([hidden]) { animation: none; } }
-.gw-mega > .gw-wrap { width: auto; margin: 0; }
-.gw-mega__grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 32px; padding: 32px; }
-.gw-mega__col { display: flex; flex-direction: column; gap: 2px; }
-.gw-mega__heading { padding: 0 8px 8px; color: var(--gw-muted); font-size: 12px; font-weight: 500; }
-.gw-mega__link {
-  display: grid;
-  grid-template-columns: 32px minmax(0, 1fr);
-  align-items: start;
-  gap: 12px;
-  padding: 8px;
-  border-radius: var(--gw-radius-action);
-  color: var(--gw-ink);
-}
-.gw-mega__link:hover { background: var(--gw-bg-soft); }
-.gw-mega__link b { display: block; font-size: 14px; font-weight: 500; line-height: 20px; }
-.gw-mega__link i { display: block; margin-top: 2px; color: var(--gw-muted); font-size: 13px; font-style: normal; line-height: 18px; }
-.gw-mega__link[aria-current="page"] b { color: var(--gw-accent-strong); font-weight: 600; }
-.gw-mega__icon {
-  display: grid;
-  place-items: center;
-  width: 32px;
-  height: 32px;
-  border: 1px solid var(--gw-line);
-  border-radius: var(--gw-radius-action);
-  background: var(--gw-surface);
-  color: var(--gw-muted);
+  inset: 0;
+  pointer-events: none;
+  background-image: radial-gradient(var(--gw-stage-dot) 1px, transparent 1.5px);
+  background-size: 16px 16px;
+  -webkit-mask-image: linear-gradient(170deg, #000, transparent 70%);
+  mask-image: linear-gradient(170deg, #000, transparent 70%);
+}
+/* what sits on the Stage stacks above its dots; a site's own position for it wins (no specificity here) */
+:where(.gw-mega__art > *) { position: relative; }
+/* a picture straight on the Stage (an <img> child) fills it, like a photo (gemboss.ai draws its team and its lounge so) */
+:where(.gw-mega__art) > img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
+/* in the desktop pane the picture fills what the words leave (its parts size to it: a size container) */
+.gw-mega__aside .gw-mega__art { flex: 1 1 auto; min-height: 0; container-type: size; }
+.gw-mega__card-text { display: block; padding: 0 4px; }
+.gw-mega__card-text b { display: flex; align-items: center; gap: 8px; color: var(--gw-ink); font-size: 14px; font-weight: 600; line-height: 20px; }
+.gw-mega__card-text i { display: block; margin-top: 2px; color: var(--gw-muted); font-size: 13px; font-style: normal; line-height: 18px; }
+/* a level of the phone menu ends with its panel's own card, as gemboss.ai: 24px above, the picture on the Stage as
+   tall as what it holds, 16px inside; the words under it */
+.gw-mobile-menu .gw-mega__card { display: flex; flex-direction: column; gap: 12px; margin: 24px 0 8px; color: var(--gw-ink); }
+.gw-mobile-menu .gw-mega__art { display: flex; padding: 16px; }
+.gw-mobile-menu .gw-mega__card-text b { display: block; line-height: 1.6; }
+.gw-mobile-menu .gw-mega__card-text i { margin-top: 4px; }
+/* a row's picture instead of an icon (gemboss.ai's Solutions): 48 by 32, one hairline, 6px corners */
+.gw-mobile-menu__link > img { display: block; flex: none; width: 48px; height: 32px; border: 1px solid var(--gw-line); border-radius: var(--gw-radius-6); object-fit: cover; }
+.gw-mega__go { color: var(--gw-accent-strong); font-weight: 500; }
+.gw-mega__card-text > .gw-mega__go { display: block; margin-top: 8px; font-size: 13px; }
+.gw-mega__card-text b > .gw-mega__go { margin-left: auto; transition: translate 0.2s var(--gw-mega-ease); }
+.gw-mega__card:hover b > .gw-mega__go { translate: 4px 0; }
+.gw-mega__new {
+  display: inline-flex;
+  align-items: center;
+  height: 20px;
+  margin-right: 6px;
+  padding: 0 6px;
+  border-radius: var(--gw-radius-6);
+  background: var(--gw-accent-soft);
+  color: var(--gw-accent-strong);
+  font-size: 11px;
+  font-weight: 600;
 }
-.gw-mega__icon svg { width: 16px; height: 16px; }
-.gw-mega__link:hover .gw-mega__icon { border-color: var(--gw-accent-soft); background: var(--gw-accent-soft); color: var(--gw-accent-strong); }
-/* the feature card is the Stage (the house illustration recipe, Chris 22/10/2026): a night ground lit with the accent
-   from two corners, white words. An illustration may light itself, so its glows are gradients, not chrome shadows. */
-.gw-mega__feature {
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-end;
-  gap: 4px;
-  min-height: 216px;
-  padding: 24px;
-  border-radius: var(--gw-radius-panel);
-  background:
-    radial-gradient(360px 260px at 12% 112%, color-mix(in srgb, var(--gw-accent) 78%, transparent), transparent 62%),
-    radial-gradient(300px 220px at 92% -14%, color-mix(in srgb, var(--gw-wash-violet) 44%, transparent), transparent 70%),
-    var(--gw-night);
-  color: var(--gw-on-night);
+@media (prefers-reduced-motion: reduce) {
+  .gw-scrim,
+  .gw-nav__pill,
+  .gw-mega-surface,
+  .gw-mega-caret,
+  .gw-mega__hl,
+  .gw-mega__go,
+  .gw-header.has-mega .gw-mega,
+  .gw-header.has-mega.is-mega-open .gw-nav__item.is-open > .gw-mega,
+  .gw-mega__body,
+  .gw-mega__foot,
+  .gw-mega__card,
+  .gw-mega__card.is-on { transition: none; }
+  .gw-mega-surface,
+  .gw-header.has-mega .gw-mega { translate: 0 0; }
 }
-.gw-mega__feature b { font-size: 18px; font-weight: 650; line-height: 1.25; }
-.gw-mega__feature i { color: var(--gw-on-night); font-size: 13px; font-style: normal; line-height: 1.5; opacity: 0.9; }
-.gw-mega__feature .gw-link--arrow { margin-top: 16px; color: var(--gw-on-night); font-size: 13px; font-weight: 600; }
 
 /* actions on the right */
-.gw-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
-.gw-header__signin { display: none; }
-.gw-header__actions > .gw-btn { display: none; }
-.gw-theme-toggle,
-.gw-menu-toggle {
+/* Sign in and a second text action (.gw-header__link, Book a demo on gemboss.ai) read like the menu's words; the
+   primary button sits 8px further out. Sign in shows from 1081px, the second action from 1181px (the first thing to
+   go when the bar gets tight), the button from 561px. */
+.gw-header__actions { display: flex; align-items: center; gap: 4px; margin-left: auto; }
+.gw-header__signin,
+.gw-header__link { display: none; }
+.gw-header__actions > .gw-btn { display: none; margin-left: 8px; line-height: 1.6; }
+.gw-theme-toggle {
   display: inline-flex;
   align-items: center;
   justify-content: center;
@@ -955,10 +1233,25 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   background: transparent;
   color: var(--gw-ink);
 }
-.gw-theme-toggle:hover,
-.gw-menu-toggle:hover { background: var(--gw-bg-soft); }
+.gw-theme-toggle:hover { background: var(--gw-bg-soft); }
 .gw-theme-toggle svg,
 .gw-menu-toggle svg { width: 20px; height: 20px; }
+/* the menu button: a 42px square with one strong hairline on the surface, the card radius of the site's profile (12,
+   20 in soft), its hairline ink while the menu is open, as gemboss.ai (0.11.0) */
+.gw-menu-toggle {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: none;
+  width: 42px;
+  height: 42px;
+  padding: 0;
+  border: 1px solid var(--gw-line-strong);
+  border-radius: var(--gw-radius-card);
+  background: var(--gw-surface);
+  color: var(--gw-ink);
+}
+.gw-menu-toggle[aria-expanded="true"] { border-color: var(--gw-ink); }
 .gw-menu-toggle[aria-expanded="true"] .gw-menu-toggle__open,
 .gw-menu-toggle:not([aria-expanded="true"]) .gw-menu-toggle__close { display: none; }
 
@@ -993,18 +1286,16 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
 .gw-mobile-menu__group > summary::-webkit-details-marker { display: none; }
 .gw-mobile-menu__list { margin: 0; padding: 8px 0 16px; list-style: none; }
 .gw-mobile-menu__link { display: flex; align-items: center; min-height: 44px; color: var(--gw-ink-2); font-size: 16px; }
-.gw-mobile-menu__link[aria-current="page"],
-.gw-mobile-menu__top[aria-current="page"] { color: var(--gw-accent-strong); font-weight: 600; }
 .gw-mobile-menu__actions { display: grid; gap: 8px; margin-top: 24px; }
 
-@media (min-width: 480px) {
+@media (min-width: 561px) {
   .gw-header__actions > .gw-btn:not(.gw-btn--secondary) { display: inline-flex; }
 }
-@media (min-width: 768px) {
+@media (min-width: 1181px) {
+  .gw-header__link,
   .gw-header__actions > .gw-btn--secondary { display: inline-flex; }
 }
-@media (min-width: 1080px) {
-  .gw-header__bar { gap: 32px; }
+@media (min-width: 1081px) {
   .gw-nav { display: block; }
   .gw-header__signin { display: inline-flex; }
   .gw-menu-toggle, .gw-mobile-menu { display: none !important; }
@@ -1016,12 +1307,12 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
 }
 
 /* floating header (0.3.0), a brand's header profile: <header class="gw-header gw-header--float">. The same bar, mega
-   menu and script, drawn from 1080px as an inset card: the panel radius of the site's profile (16, 24 in soft), the
+   menu and script, drawn from 1081px as an inset card: the panel radius of the site's profile (16, 24 in soft), the
    surface at 85% over a 10px blur, one hairline, the raised shadow, a 16px gap above it and when it sticks. It is
    wrap + 2 x 24px + its border wide, so the bar's content lines up with the page's from 1170px. Below 1080px it is
    the flat bar, so the phone menu is unchanged. Solid for a visitor who asks for less transparency, and where the
    browser cannot blur. No other floating or blurred header: it is a profile, not a style to copy. */
-@media (min-width: 1080px) {
+@media (min-width: 1081px) {
   .gw-header--float {
     top: var(--gw-header-gap);
     width: min(100% - 32px, var(--gw-wrap) + 50px);
@@ -1039,7 +1330,7 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
   /* an anchor lands below the card, not under it */
   :root:has(.gw-header--float) [id] { scroll-margin-top: calc(var(--gw-header-height) + var(--gw-header-gap) + 18px); }
 }
-@media (min-width: 1080px) and (prefers-reduced-transparency: reduce) {
+@media (min-width: 1081px) and (prefers-reduced-transparency: reduce) {
   .gw-header--float { background: var(--gw-surface); -webkit-backdrop-filter: none; backdrop-filter: none; }
 }
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
@@ -1056,8 +1347,11 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
    stays at the bottom of the sheet while the list scrolls (the sheet has no bottom padding, so nothing peeks out under
    the bar; nor sideways while a level slides in). Without the script the groups are the 0.7.0 <details> that open in
    place, their chevron pointing down. */
-.gw-mobile-menu[data-gw-menu="drill"] { display: flex; flex-direction: column; overflow-x: hidden; padding-bottom: 0; }
-.gw-mobile-menu[data-gw-menu="drill"] > nav { display: flex; flex: 1 0 auto; flex-direction: column; }
+.gw-mobile-menu[data-gw-menu="drill"] { display: flex; flex-direction: column; overflow-x: hidden; padding-bottom: 0; line-height: 1.6; }
+/* gemboss.ai's sheet (0.11.0, 1:1): 24px in from both edges, whatever the page's wrap; every link in it set at 18px,
+   weight 500, 0.005em tighter, its parts sizing themselves (a row's line keeps the 18px tracking) */
+.gw-mobile-menu[data-gw-menu="drill"] > nav { display: flex; flex: 1 0 auto; flex-direction: column; width: auto; margin-inline: 0; padding-inline: 24px; }
+.gw-mobile-menu[data-gw-menu="drill"] a { font-size: 18px; font-weight: 500; letter-spacing: -0.005em; }
 .gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__group > summary,
 .gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__top { min-height: 64px; font-size: 24px; letter-spacing: -0.01em; }
 .gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__group > summary::after { width: 20px; height: 20px; -webkit-mask-size: 20px; mask-size: 20px; }
@@ -1070,10 +1364,10 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
   color: var(--gw-ink);
   font-weight: 500;
 }
-.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__link b { display: block; font-size: 16px; font-weight: 500; line-height: 20px; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__link b { display: block; font-size: 16px; font-weight: 500; letter-spacing: -0.005em; line-height: 20px; }
 .gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__link i { display: block; margin-top: 2px; color: var(--gw-muted); font-size: 13px; font-style: normal; line-height: 18px; }
 /* a level's optional parts: a muted heading over a run of links, a 32px icon tile before a link's words */
-.gw-mobile-menu__heading { padding: 16px 0 8px; color: var(--gw-muted); font-size: 12px; font-weight: 500; line-height: 1.5; }
+.gw-mobile-menu__heading { padding: 16px 0 8px; color: var(--gw-muted); font-size: 12px; font-weight: 500; line-height: 1.6; }
 .gw-mobile-menu__icon {
   display: grid;
   place-items: center;
@@ -1085,9 +1379,19 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
   color: var(--gw-muted);
 }
 .gw-mobile-menu__icon svg { width: 16px; height: 16px; }
+/* a row under the pointer or the keyboard (gemboss.ai's, 0.11.0): the soft ground in 8px corners, 2px to the right,
+   its icon tile in the accent and 1px up; only the colours ease (0.15s) */
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__list .gw-mobile-menu__link { border-radius: var(--gw-radius-action); transition: background 0.15s; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__list .gw-mobile-menu__link:hover { background: var(--gw-bg-soft); transform: translateX(2px); }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__list .gw-mobile-menu__link:focus-visible { background: var(--gw-bg-soft); }
+.gw-mobile-menu__icon { background: var(--gw-surface); transition: color 0.15s, border-color 0.15s, background 0.15s, transform 0.15s; }
+.gw-mobile-menu__link:is(:hover, :focus-visible) .gw-mobile-menu__icon { border-color: color-mix(in srgb, var(--gw-accent) 32%, var(--gw-line)); background: var(--gw-accent-soft); color: var(--gw-accent-strong); }
+.gw-mobile-menu__link:hover .gw-mobile-menu__icon { transform: translateY(-1px); }
 /* a level's last link, to the section's own page: its row opens the level instead of going there */
-.gw-mobile-menu__all { display: flex; align-items: center; gap: 6px; min-height: 56px; color: var(--gw-accent-strong); font-size: 16px; font-weight: 500; }
-.gw-mobile-menu__all::after { content: "\2192"; }
+.gw-mobile-menu__all { display: flex; align-items: center; min-height: 56px; color: var(--gw-accent-strong); font-size: 16px; font-weight: 500; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__all { font-size: 16px; }
+/* the arrow follows the words after a space, as gemboss.ai writes "All of Product →" (0.11.0) */
+.gw-mobile-menu__all::after { content: "\00a0\2192"; }
 /* the action bar: what is not a button (Sign in, the language) on the first line, the last one on the right; the
    buttons side by side under it (gw-btn--lg: 48px, as gemboss.ai) */
 .gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions {
@@ -1096,7 +1400,7 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
   z-index: 1;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
   align-items: center;
-  gap: 8px 16px;
+  gap: 8px;
   margin-top: auto;
   padding-block: 12px calc(12px + env(safe-area-inset-bottom));
   border-top: 1px solid var(--gw-line);
@@ -1105,7 +1409,10 @@ html.is-menu-open .gw-header { position: fixed; top: 0; left: 0; right: 0; }
 .gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-btn { grid-row: 2; }
 .gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > :not(.gw-btn) { grid-row: 1; }
 .gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > :not(.gw-btn):last-child { grid-column: 2; justify-self: end; }
-.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-mobile-menu__link { color: var(--gw-ink); font-weight: 500; }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-mobile-menu__link { color: var(--gw-ink); font-size: 16px; font-weight: 500; }
+/* a quieter link in the bar, before Sign in (gemboss.ai: What's new on the changelog) */
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-mobile-menu__link--muted { color: var(--gw-muted); }
+.gw-mobile-menu[data-gw-menu="drill"] .gw-mobile-menu__actions > .gw-btn { padding: 0 16px; font-size: 16px; line-height: 1.6; }
 
 /* Wired (.is-drill, set by website.js): a group's row points right and opens its level, which shows alone
    (.is-drilled) under its head: Back on the left, the level's title in the middle. The sheet starts where the header
@@ -1137,7 +1444,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   background: transparent;
   color: var(--gw-muted);
   font-size: 16px;
-  line-height: 1.5;
+  line-height: 1.6;
 }
 .gw-mobile-menu__back:hover { color: var(--gw-ink); }
 .gw-mobile-menu__back::before {
@@ -1149,7 +1456,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' 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 24 24'%3E%3Cpath d='M15 18l-6-6 6-6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
 }
-.gw-mobile-menu__title { color: var(--gw-ink); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.5; text-align: center; }
+.gw-mobile-menu__title { color: var(--gw-ink); font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.6; text-align: center; }
 /* a level slides in from the right, the top level back in from the left; under reduced motion they just switch */
 @media (prefers-reduced-motion: no-preference) {
   .gw-mobile-menu.is-drilled .gw-mobile-menu__group[open] { animation: gw-drill-in 0.24s var(--gw-ease); }
@@ -1161,7 +1468,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 /* The language switcher: <div class="gw-lang" data-gw-lang hidden>, a ghost button with the globe and the current
    language's short code, and its list of the other languages, a small popover card (the card radius of the site's
    profile, one hairline, the raised shadow). website.js fills the list from the page's <link rel="alternate" hreflang>
-   and takes `hidden` away when there is another language. In the header's actions it shows from 1080px, where the nav
+   and takes `hidden` away when there is another language. In the header's actions it shows from 1081px, where the nav
    is; below that a second one sits in the mobile menu's action bar, and its list opens upward. */
 .gw-lang { position: relative; flex: none; }
 .gw-header__actions > .gw-lang { display: none; }
@@ -1218,7 +1525,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 @media (max-width: 768px), (pointer: coarse) {
   .gw-lang__btn, .gw-lang__link { min-height: var(--gw-tap-min); }
 }
-@media (min-width: 1080px) {
+@media (min-width: 1081px) {
   .gw-header__actions > .gw-lang { display: block; }
 }
 
@@ -1513,7 +1820,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   .gw-hero > .gw-wrap > .gw-window { margin-top: 64px; }
 }
 @media (max-width: 479px) {
-  :is(.gw-hero, .gw-cta) .gw-actions > .gw-btn { flex: 1 1 100%; }
+  :is(.gw-hero, .gw-cta) .gw-actions > .gw-btn { flex: 1 1 100%; justify-content: center; }
 }
 
 /* logos: a proof strip of real logos or wordmarks */
@@ -2167,7 +2474,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
    room; below 480px, and in a box too narrow for both, the field and the button each take a full line. */
 .gw-form-inline { display: flex; flex-wrap: wrap; gap: 8px; }
 .gw-form-inline > :not(.gw-btn) { flex: 999 1 160px; min-width: 0; }
-.gw-form-inline > .gw-btn { flex: 1 0 auto; }
+.gw-form-inline > .gw-btn { flex: 1 0 auto; justify-content: center; }
 @media (max-width: 479px) {
   .gw-form-inline > :not(.gw-btn) { flex-basis: 100%; }
 }
@@ -2317,7 +2624,7 @@ a.gw-rating-badge:hover { border-color: var(--gw-line-strong); }
      the build checks the words on. */
   .gw-btn.gw-spot:not([aria-busy="true"])::before { --gw-spot-mix: var(--gw-spot-strength-action); }
   /* the mega menu's feature card is the Stage, a night ground: a stronger light, or it would not show */
-  .gw-mega__feature.gw-spot:not([aria-busy="true"])::before { --gw-spot-mix: var(--gw-spot-strength-stage); }
+  .gw-mega__art.gw-spot:not([aria-busy="true"])::before { --gw-spot-mix: var(--gw-spot-strength-stage); }
 
   /* words under the light: lit, muted words are ink-2 at once (rules above); back to muted only once the light has gone
      out (a colour that waits the light's time, no movement). :where(), so a part's own transition wins. */