@gemboss/website-ui 0.10.0 → 0.11.0

package/website.css

@@ -1,4 +1,4 @@
-/*! @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.11.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;
@@ -42,6 +42,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 +59,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;
@@ -81,6 +83,12 @@
   --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;
   /* accent primitives: the only colours a brand overrides (docs/theming.md) */
   --gw-accent-light: #5661f5;
   --gw-accent-strong-light: #3a44de;
@@ -117,6 +125,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 +139,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 +157,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 +174,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 +192,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 +226,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 +240,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 +254,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"],
@@ -328,7 +347,8 @@ 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); }
 
 .gw-skip {
@@ -782,9 +802,9 @@ h5, h6 { font-size: 16px; font-weight: 600; letter-spacing: 0; }
   .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). */
 .gw-announce {
   padding: 8px var(--gw-gutter);
   border-bottom: 1px solid var(--gw-line);
@@ -804,47 +824,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 +879,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 +1166,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 +1219,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 +1240,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 +1263,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 +1280,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 +1297,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 +1312,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 +1333,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 +1342,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 +1377,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 +1389,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 +1401,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 +1458,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; }
 }
 
@@ -2317,7 +2557,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. */