@gemboss/website-ui 0.10.0 → 0.12.0

package/CHANGELOG.md

@@ -4,6 +4,105 @@ Every release lists what changed for a site that uses the kit. A release that ad
 says so with `Closes gap #N` (the GitHub issue number), so `npx gemboss-website upgrade` can tell that site which
 stopgap (`kitgap-*`) it can now delete.
 
+## 0.12.0 (2026-10-26)
+
+The grammar of every page, 1:1 with gemboss.ai: the announcement bar, the skip link, the button, the type (headings,
+lead, label, the dim first sentence), a section, its head, the wrap, and the scroll reveal. After the footer (0.10.0)
+and the header (0.11.0), this is the first step of the pages' own bodies onto the kit (Chris, 26/10/2026: every value in
+the kit, so that GemPages, Gemians and GemX inherit them). gemboss.ai's 83 pages now draw these parts with the kit's
+classes, and were measured against the pages before, in Chromium: the computed style of every one of these parts (2,300
+of them) at 320, 390, 768, 1080, 1366 and 1920px, light and dark, and every page pixel by pixel at 390 and 1366px; the
+reveal's delays and counts, a hovered button, the focused skip link.
+
+A minor version: a site on 0.11.0 sees these values change (below), none of the markup.
+
+- The announcement bar (`.gw-announce`): gemboss.ai's, on its own ground in both themes, from the new tokens
+  `--gw-announce-*` (`system.json` `color.announce`: ground, words, hairline, the pill, the link and its underline). A
+  small pill may lead the sentence (`.gw-announce__tag`, new); the link's underline is a hairline that brightens on
+  hover. 12px words in a slimmer bar up to 520px.
+- The skip link (`.gw-skip`): an accent tab out of the top left corner (was an ink button 8px in).
+- The button (`.gw-btn`): on hover the filled one rises 1px onto the rest shadow (was a darker fill); a framed or
+  frameless one does not move. Its face is the new `--gw-font-action` (`type.button.family`, the brand face alone, as
+  gemboss.ai names it: a glyph Inter's web subset lacks, the arrow, is then the system's own, the width gemboss.ai's
+  buttons have). Its line height is its surroundings'. A label wider than needed stays at the start (centred only in
+  `--block`, a phone's row of actions in a hero or CTA, an inline form). An arrow after the label is
+  `.gw-btn__arrow` (new): 3px further on hover. Up to 768px every button is at least 44px tall, by the width only (it was
+  also by a coarse pointer); a label wraps only up to 480px and only in `<main>`, at 1.35 lines (was up to 768px,
+  balanced).
+- Type: h1 at line height 1.1 and h2 at 1.06 (new tokens `--gw-display-h1-leading`, `--gw-display-h2-leading`; at 1.02
+  the descenders of a first line touched the capitals of the second). h3 and `.gw-h3` 20px / 600, tracking −0.02em,
+  1.2 lines, as every h3 on gemboss.ai (was 24px / 650). The lead at most 58ch (was 60ch). The label's square is ink
+  with 2px corners (was the accent, square) and its line height its surroundings'; the input `--gw-label-mark` (new, on
+  the label or anything around it) paints the square another colour, a gradient too.
+- A section's head (`.gw-section__head`) up to 760px (was 660px). A lead under a heading 20px below it (in a head, a
+  split column, a CTA; 16px in the hero). What follows a head starts 40px below it, 48px from 768px, as a top margin
+  of the next thing at no specificity, so a block that brings its own keeps it (was the head's bottom margin).
+- The scroll reveal: 20px (new token `--gw-reveal-distance`, was 24px), once 12% of it is in view with the bottom 6% of
+  the view not counting (was 15%); each `.gw-reveal` after the first among its siblings waits 70ms more, at most 380ms;
+  a `[data-gw-count]` number inside counts up from 0 over 1.1s (new); the script's failsafe at 1.6s (was 2.5s). The
+  values are `system.json` `motion.reveal`.
+- `check`: `--gw-label-mark` is an input, like a mega panel's widths.
+- `website.js` is 10.4 KB gzipped (the budget is 10.5 KB, was 10 KB: the reveal's stagger and count-up).
+
+## 0.11.0 (2026-10-26)
+
+The header, 1:1 with gemboss.ai. Since the footer (0.10.0), the header was the last part of gemboss.ai not drawn by
+the kit, and the kit's header was a simpler one: a narrower panel with icons, a button for each section, no pictures,
+nothing behind. Chris asked for it identical, with nothing missed, and for every value to live in the kit so that
+GemPages, Gemians and GemX inherit it (26/10/2026). 0.11.0 takes every value and every motion from gemboss.ai's own
+header and was measured against it in Chromium, pixel by pixel: the bar at 320 to 1920px, every menu open at 1081,
+1366, 1440 and 1920px, rows hovered (their previews), the pill under a hovered name, the keyboard's focus, the phone
+menu's top level, each level and each level's end at 390, 768 and 1080px, light and dark, on pages in each section.
+All of it is identical but one thing, on purpose: on the phone, gemboss.ai's own menu gives "Start free" a light
+bottom hairline and takes "Book a demo"'s away (a rule meant for its menu's rows reaches them); the kit draws the two
+buttons whole.
+
+A minor version: a 0.10.0 header changes to these values, and its mega menu's markup changes (below).
+
+- The bar: the page's wrap + 12px (1132px on GemBoss), 24px inside (6px up to 640px), its own width whatever order the
+  stylesheets load in (`.gw-header > .gw-header__bar`; drop `.gw-wrap` from it). The logo 34px with 8px corners (was
+  26px), a 44px row up to 768px. The menu's words 0.005em tighter, 38px tall (8px x 12px, 1.6 lines); the current page
+  or section in the accent's strong ink, weight 600 (was ink with an underline; a section's name carries
+  `aria-current`). Actions 4px apart: Sign in from 1081px, a second text action `.gw-header__link` (Book a demo) from
+  1181px, the button from 561px, 8px further out. The menu button 42px (44px on touch) with one strong hairline on
+  the surface, the card radius, ink while open; its icons gemboss.ai's. The phone menu runs to 1080px, the desktop
+  starts at 1081px (was 1080px), in the CSS and in `website.js`.
+- The mega menu, gemboss.ai's own (its v5): a section's name is a link to its page (`a.gw-nav__trigger` with a 12px
+  `.gw-nav__chev`) that opens its panel after the pointer rests 200ms (90ms to switch, 350ms to close; the keyboard's
+  focus at once; ArrowDown steps into the first row). One surface morphs to the open panel's size and place, the
+  panels crossfade on it, a caret points at the name, a pill glides under the hovered name, a highlight under the
+  hovered row, the page behind dims and blurs (`.gw-scrim`, `--gw-scrim`). A panel: `.gw-mega__body` (columns of
+  rows, then `.gw-mega__aside`, the pictures) and an optional `.gw-mega__foot` strip; its widths and columns are its
+  markup's (`--gw-mega-w`, `--gw-mega-pv`, `--gw-mega-cols`). Pictures sit on the Stage (`.gw-mega__art`, new tokens
+  `--gw-stage-*`): the panel's own `.gw-mega__card`, and a row's preview, the `<template>` its `data-gw-preview` names
+  (`"feature"`: the panel's card). A card's pictures load the first time it shows (`data-gw-bg`,
+  `template[data-gw-hydrate]`, `.is-hydrated`). A picture straight on the Stage (an `<img>`) fills it.
+- Moving a 0.10.0 header: the panel's `.gw-wrap.gw-mega__grid` becomes `.gw-mega__body > .gw-mega__grid`, the
+  `.gw-mega__feature` card becomes a `.gw-mega__card` in a `.gw-mega__aside` (its words in `.gw-mega__card-text`, a
+  picture in `.gw-mega__art`), the rows' `.gw-mega__icon` is not drawn on desktop. A `<button>` name still works: a
+  click opens its panel and keeps it open, a second click closes it. `templates/header.html` has the new markup.
+- The script: the mega menu is wired per header (the `mega` mark is on the `.gw-header` now, not on each name);
+  `gw:mega` fires on the name. One panel open on the page, across headers. `destroy` takes the surface, caret, pill,
+  scrim and previews away and hides the panels again.
+- The phone menu (the drill-down): 24px in from the edges, its links set at 18px, weight 500, 0.005em tighter, its
+  heads and headings on 1.6 lines; a row under the pointer or the keyboard takes the soft ground, 2px to the right, its
+  icon tile in the accent; a row may carry a 48x32 picture; a level may end with its panel's card and "All of … →"
+  (the arrow after a space); the action bar's buttons 8px apart, 16px words; `.gw-mobile-menu__link--muted`, a
+  quieter link before Sign in (What's new). The current page is not marked on the phone.
+- Tokens, gemboss.ai's: the dark theme's shadows (`shadow.dark`: a 1px ledge, a deeper raised shadow; the kit kept
+  the light ones in dark before), `--gw-shadow-lift` (an object on the Stage), `--gw-stage-*` (glow, glow-2, top,
+  bottom, dot, ink), `--gw-scrim` light and dark, `--gw-radius-2` (the caret's corner), the dark theme's primary
+  button `#e3e4e8` (gemboss.ai's ink, was `#f2f3f5`). The focus ring 3px out with 4px corners (was 2px out).
+- `check`: a mega panel's `--gw-mega-w`, `--gw-mega-pv`, `--gw-mega-cols` are inputs set in the markup, not tokens;
+  every kit shadow (dark ones and the lift included) is a token shadow.
+- Budget: `js/website.js` is 34 KB, 9.9 KB gzipped (0.10.0: 23.1 KB, 7.1 KB); the test's budget is now 36 KB and
+  10 KB.
+- Tests: `test/run.mjs` holds the header's base rules byte for byte again from this version (their hash renewed once),
+  the mega menu in its fake DOM (the marks, the drawn parts, hover 200/90/350ms, touch, focus, ArrowDown, the pinned
+  button, one open across headers, destroy); `test/browser.mjs` drives the desktop mega menu at 1366px (its timing,
+  the surface and caret placement, a row's preview, ArrowDown, Escape, destroy). Demos and templates carry the new
+  markup.
+
 ## 0.10.0 (2026-10-26)
 
 The footer, 1:1 with gemboss.ai. 0.7.0 drew the footer "as gemboss.ai has it", but not to the pixel: when gemboss.ai

package/README.md

@@ -40,9 +40,9 @@ nó đọc `AGENTS.md` của kit trước, dựng từ mẫu, và chạy `check`
 **Site HTML tĩnh hoặc không có bước build:** dùng CDN của npm, ghim đúng phiên bản.
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.10.0/website.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.12.0/website.min.css">
 <link rel="stylesheet" href="/site.css">   <!-- CSS riêng của site, luôn SAU kit -->
-<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.10.0/js/website.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.12.0/js/website.js" defer></script>
 ```
 
 Chèn markup của kit sau khi trang đã tải (block của builder, bản xem trước CMS): gọi `gwWebsite.init(phầnMới)` ngay

package/bin/lib/check.mjs

@@ -335,7 +335,10 @@ export function subjectOf(sel) {
 const ATTR_THEME = String.raw`\[\s*data-theme(?:\s*[~|^$*]?=\s*(?:"[^"]*"|'[^']*'|[\w-]+))?\s*\]`;
 const ROOTISH = new RegExp(`^(?::root|html)?(?:${ATTR_THEME}|:not\\(\\s*${ATTR_THEME}\\s*\\))*$`, "i");
 const isRootish = (sel) => splitTop(sel).every((s) => s && ROOTISH.test(s));
-const INPUTS = new Set(["--gw-stars"]); // set on one element in the markup (style="--gw-stars: 4.9"), read by the kit's CSS
+// set on one element in the markup, read by the kit's CSS: the stars' value (style="--gw-stars: 4.9"); a mega panel's width,
+// its pictures' width and its columns (0.11.0: style="--gw-mega-w: 1120px; --gw-mega-pv: 380px; --gw-mega-cols: 2"); the colour of
+// a label's square (0.12.0: --gw-label-mark, on the label or around it)
+const INPUTS = new Set(["--gw-stars", "--gw-mega-w", "--gw-mega-pv", "--gw-mega-cols", "--gw-label-mark"]);
 const THEMABLE = /^--gw-(?:accent(?:-[\w-]+)?|on-accent(?:-(?:light|dark))?|wash(?:-[\w-]+)?)$/; // docs/theming.md: the eight accent variables (-light/-dark) + wash
 
 const COLOR_PROPS = /^(?:color|background(?:-color|-image)?|border(?:-(?:top|right|bottom|left|block|inline)(?:-(?:start|end))?)?(?:-color)?|outline(?:-color)?|fill|stroke|text-decoration(?:-color)?|caret-color|accent-color|column-rule(?:-color)?|text-emphasis(?:-color)?|-webkit-text-fill-color|-webkit-text-stroke(?:-color)?|scrollbar-color|stop-color|flood-color|lighting-color)$/;
@@ -361,7 +364,9 @@ const BUTTONISH = /btn|button/i;
 const pxNumbers = (v) => [...v.matchAll(/(-?\d*\.?\d+)(px|rem)\b/gi)].map((m) => ({ raw: m[0], px: Math.abs(parseFloat(m[1])) * (m[2].toLowerCase() === "rem" ? 16 : 1), unit: m[2].toLowerCase() }));
 const isFraction = (n) => Math.abs(n - Math.round(n)) > 1e-6;
 const normShadow = (s) => s.toLowerCase().replace(/\b0\./g, ".").replace(/\s*([,()])\s*/g, "$1").replace(/\s+/g, " ").trim();
-const TOKEN_SHADOWS = new Set(Object.entries(SYSTEM.shadow).filter(([k]) => !k.startsWith("$")).map(([, v]) => normShadow(v)));
+// every shadow the kit draws: rest, sm, raised, the Stage's lift and (0.11.0) the dark theme's own
+const TOKEN_SHADOWS = new Set(Object.entries(SYSTEM.shadow).filter(([k]) => !k.startsWith("$"))
+  .flatMap(([, v]) => (typeof v === "string" ? [v] : Object.values(v))).map(normShadow));
 
 function okShadowPart(p) {
   const v = p.trim();

package/css/base.css

@@ -32,33 +32,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 */
@@ -74,22 +75,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 {
@@ -103,10 +108,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;
 }

package/css/components.css

@@ -2,12 +2,12 @@
 
 /* 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);
@@ -16,26 +16,34 @@
   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 */
@@ -334,16 +342,21 @@
 .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; }
 }

package/css/effects.css

@@ -50,7 +50,7 @@
      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. */

package/css/forms.css

@@ -134,7 +134,7 @@
    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%; }
 }