npm - @gemboss/website-ui - Versions diffs - 0.3.0 → 0.4.0 - Mend

@gemboss/website-ui 0.3.0 → 0.4.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (11) hide show

package/AGENTS.md CHANGED Viewed

@@ -10,7 +10,8 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 | file | what it is |
 |---|---|
 | `website.css` | the whole kit, one file (tokens, base, layout, components, sections) |
-| `js/website.js` | header, mega menu, mobile menu, theme toggle, scroll reveal, segmented control, busy buttons; no dependencies |
+| `js/website.js` | header, mega menu, mobile menu, theme toggle, scroll reveal, segmented control, busy buttons; no dependencies; `window.gwWebsite.init(root)` |
+| `js/website.mjs` | the same script as an ES module for apps: `import { init, destroy } from '@gemboss/website-ui/website.mjs'` |
 | `system.json` | every value of the system: colours, spacing, type, radii, shadows, widths |
 | `templates/page.html` | the page skeleton: start every new page from it |
 | `templates/sections/*.html` | ready sections: hero, features, split, showcase, logos, stats, steps, pricing, FAQ, CTA, prose… |
@@ -119,6 +120,9 @@ Files you will use, all inside `node_modules/@gemboss/website-ui/`:
 - Don't ship a page you have not seen at 320px.
 - Don't write CSS that overrides a `.gw-*` class to change how it looks. If the kit's version is wrong for you,
   that is a gap (section 9).
+- Don't wire kit components with your own JS (no click handler on a trigger, no class toggled by hand). After you
+  insert kit markup (a route change, a block rendered later), call `gwWebsite.init(root)` on it, or `init(root)` from
+  `website.mjs`.
 ## 5. Accessibility

package/CHANGELOG.md CHANGED Viewed

@@ -4,6 +4,37 @@ 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.4.0 (2026-10-25)
+The website script, standardised like the CSS: it now wires markup that arrives after the page loaded (a Next.js
+route change, a GemPages block rendered later, a CMS preview), and comes as an ES module too. A page that loads
+`js/website.js` with `defer` and changes nothing works exactly as in 0.3.0 (the demo is pixel-identical at 390 and
+1366px, light and dark).
+Closes #64
+- `gwWebsite.init(root = document)`: wires the kit's markup under `root`, `root` included. Idempotent: each element
+  is wired once (and marked `data-gw-ready`), so call it after every navigation or insert and only the new elements
+  are wired; on a fragment it wires that fragment only. The page's own listeners (Escape, the outside click, the
+  busy-button guard, the system theme, the scroll) are installed once. Each call lets go of elements removed from
+  the page meanwhile and moves the script's `aria-current` mark to the new path (a mark in the markup stays).
+- `gwWebsite.destroy(root = document)`: removes what `init` wired under `root`, its listeners and its marks, for
+  frameworks that unmount. An open mega or mobile menu closes first, so the page is never left locked.
+- ESM entry `@gemboss/website-ui/website.mjs` (`js/website.mjs`): `export { init, destroy, version }`, no side
+  effects on import (safe to import on a server), no auto-init. `js/website.js` keeps its path, its export
+  `./website.js` and its behaviour: it starts by itself on `DOMContentLoaded` and exposes `window.gwWebsite`.
+- One source: `scripts/build.mjs` writes `js/website.js` from `js/website.mjs` (the code in an IIFE, without the
+  comments), and `--check` fails when they differ or when the version is not `package.json`'s.
+- One copy per page: the first copy that runs owns `window.gwWebsite`; another one (the classic script next to a
+  bundle) hands its calls to it, so nothing is wired twice.
+- Events, all bubbling, listed in `docs/markup-contract.md`: `gw:mega` on the trigger (`{ id, open }`) and
+  `gw:theme` on `<html>` (`{ theme: 'light' | 'dark' }`), next to `gw:segmented`.
+- Budget: `js/website.js` is 11.3 KB unminified, 3.8 KB gzipped (0.3.0: 9.2 KB, 3.3 KB). The test now holds it under
+  12 KB unminified and 4.5 KB gzipped (was 10 KB unminified): the comments live in `website.mjs`, the classic file
+  carries none.
+- `AGENTS.md`, the skill and `docs/components.md`: never wire a kit part with your own JS; call `init(root)` after
+  inserting kit markup. README: the ESM import and the Next.js recipe (a client effect on each route change).
 ## 0.3.0 (2026-10-25)
 Brand profiles: three knobs so that another GemCommerce brand (GemPages first, Gemians later) can use the kit and

package/README.md CHANGED Viewed

@@ -13,7 +13,7 @@ it. Made so that a team working with Claude Code, even without a designer, ships
 | | |
 |---|---|
 | `website.css`, `website.min.css` | toàn bộ kit trong một tệp (khoảng 52 KB, 40 KB bản min): token sáng và tối, chữ, bố cục, nút (cả trạng thái nhấn và đang chờ), link, nhãn, chip, segmented control, badge, card, khung cửa sổ kèm chú thích "Illustrative data.", bảng, FAQ, chữ bài dài (`.gw-prose`), header + mega menu + menu điện thoại, footer, 12 section, 3 hồ sơ thương hiệu |
-| `js/website.js` | mega menu, menu điện thoại, đổi giao diện sáng/tối, hiện dần khi cuộn, đánh dấu trang hiện tại, segmented control, chặn bấm lần hai khi nút đang chờ; không phụ thuộc thư viện nào, khoảng 9 KB |
+| `js/website.js`, `js/website.mjs` | mega menu, menu điện thoại, đổi giao diện sáng/tối, hiện dần khi cuộn, đánh dấu trang hiện tại, segmented control, chặn bấm lần hai khi nút đang chờ; không phụ thuộc thư viện nào, khoảng 4 KB khi nén gzip. `website.js` là script thường (tự chạy khi trang tải xong), `website.mjs` là bản ES module cho app; cả hai có `init(root)` để gắn lại phần markup chèn sau (`docs/markup-contract.md`, mục "Script") |
 | `AGENTS.md` | luật mà Claude Code (và người) phải theo: 10 luật, cách dựng trang, điều cấm, chữ, khả năng truy cập, đổi thương hiệu, khi kit thiếu |
 | `templates/` | khung một trang và 12 section (hero, logos, stats, features, split, showcase, steps, quote, pricing, faq, cta, prose) |
 | `demo/` | mọi thành phần trên một trang; `theme-example.html` cho thấy một thương hiệu khác đổi màu nhấn; `brand-profiles.html` là một thương hiệu kiểu GemPages bật cả 3 hồ sơ |
@@ -40,33 +40,55 @@ 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.3.0/website.min.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.4.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.3.0/js/website.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@gemboss/website-ui@0.4.0/js/website.js" defer></script>
 ```
-**Next.js (App Router):** nạp CSS trong layout gốc, nạp script bằng `next/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
+sau đó. Đừng tự viết JS cho mega menu, nút đổi giao diện hay segmented control.
+**Next.js (App Router):** nạp CSS trong layout gốc; script là bản ES module, gọi `init()` trong một effect mỗi lần
+đổi trang (chuyển trang phía client không tải lại trang, nên phần markup mới phải được gắn lại).
+```js
+import { init, destroy } from "@gemboss/website-ui/website.mjs";
+```
+```js
+// app/kit-script.jsx
+"use client";
+import { useEffect } from "react";
+import { usePathname } from "next/navigation";
+import { init } from "@gemboss/website-ui/website.mjs";
+export default function KitScript() {
+  const pathname = usePathname();
+  useEffect(() => { init(); }, [pathname]);
+  return null;
+}
+```
 ```js
 // app/layout.js
 import "@gemboss/website-ui/website.css";
 import "./site.css";
-import Script from "next/script";
+import KitScript from "./kit-script";
 export default function RootLayout({ children }) {
   return (
     <html lang="vi">
       <body className="gw-page">
         {children}
-        <Script src="/kit/website.js" strategy="afterInteractive" />
+        <KitScript />
       </body>
     </html>
   );
 }
 ```
-Chép `node_modules/@gemboss/website-ui/js/website.js` vào `public/kit/` (hoặc phục vụ nó bằng một route). Font Inter
-nạp từ Google Fonts như trong `templates/page.html`.
+`init()` gọi lại bao nhiêu lần cũng được: phần đã gắn thì bỏ qua, chỉ gắn phần mới. Font Inter nạp từ Google Fonts
+như trong `templates/page.html`.
 **Bắt đầu một trang:** chép `templates/page.html`, điền header và footer một lần (chung cho mọi trang), ghép các
 section trong `templates/sections/` theo thứ tự trang cần, thay mọi chỗ `[trong ngoặc]`, xoá phần không dùng. Mở
@@ -117,7 +139,7 @@ gemboss-www; mọi thay đổi đi qua PR, giá trị của hệ thống chỉ s
 ```sh
 cd packages/website-ui
-node scripts/build.mjs        # sinh css/tokens.css từ system.json, ghép website.css và website.min.css
+node scripts/build.mjs        # sinh css/tokens.css từ system.json, ghép website.css và website.min.css, sinh js/website.js từ js/website.mjs
 node test/run.mjs             # tự kiểm CLI
 node scripts/gate-demo.mjs    # cổng thị giác và khoảng thở của gemboss.ai trên demo (cần .ci của repo)
 ```

package/docs/components.md CHANGED Viewed

@@ -32,6 +32,30 @@ Spacing between the children of text blocks is automatic: inside `.gw-section__h
 Don't remove the skip link, and don't leave out `id="main"`.
+## Script
+`js/website.js` (a `<script defer>`) or `js/website.mjs` (an `import`) wires every part that moves: the mega menu,
+the mobile menu, the theme toggle, reveal, the header's scroll state, the current page, the segmented control and
+the busy button. Markup that arrives after the page loaded (a client-side route change, a builder block, a CMS
+preview) is wired by calling `init` on it, as often as needed: an element is wired once.
+```js
+// a page with the classic script, after it inserted kit markup
+slot.innerHTML = html;
+gwWebsite.init(slot);
+```
+```js
+// an app: import the ESM entry, call init() in an effect after each route change
+import { init } from '@gemboss/website-ui/website.mjs';
+```
+`destroy(root)` takes it back when a framework unmounts. The Next.js recipe, the `data-gw-ready` mark and the
+events (`gw:mega`, `gw:theme`, `gw:segmented`) are in `docs/markup-contract.md`, "Script".
+Don't: wire a kit part with your own script (a click handler on a trigger, a class toggled by hand), or load two
+copies of the script and expect both to work (the first owns the page).
 ## Type and text
 | class | for |
@@ -403,6 +427,12 @@ them in order); a page without `.gw-prose` that styles its articles in site CSS
 Put it on a block (a grid, a list, a window), not on each card in a grid. Don't use it on the hero or anything in
 the first screen, and don't animate anything but `transform` and `opacity`.
+## Additions to the markup contract in 0.4.0
+The script: `init(root)` and `destroy(root)` (`window.gwWebsite`, or `js/website.mjs`), the `data-gw-ready` mark on
+what it wired, and the events `gw:mega` (`{ id, open }`) and `gw:theme` (`{ theme }`) next to `gw:segmented`. No
+markup or class of 0.3.0 changes.
 ## Additions to the markup contract in 0.3.0
 The brand profiles: `data-gw-action="ink|accent"` and `data-gw-radius="tight|soft"` on `<html>`, and

package/docs/markup-contract.md CHANGED Viewed

@@ -3,8 +3,8 @@
 The full class list, including the CSS-only helpers added while building 0.1.0 (`.gw-h1`–`.gw-h4`, `.gw-lead`,
 `.gw-note`, `.gw-actions`, `.gw-stats__source`, `.gw-plan__price`, the mobile menu parts…), is `docs/components.md`.
-The CSS (`css/*.css`), the script (`js/website.js`) and the templates (`templates/`) agree on exactly this. Change it
-here first, then in all three.
+The CSS (`css/*.css`), the script (`js/website.mjs`, and `js/website.js` built from it) and the templates
+(`templates/`) agree on exactly this. Change it here first, then in all three.
 Prefixes: kit classes `gw-`, kit CSS variables `--gw-`, state classes `is-` (set by the script), hooks `data-gw-*`.
 BEM-ish: `.gw-block`, `.gw-block__part`, `.gw-block--variant`.
@@ -21,7 +21,81 @@ BEM-ish: `.gw-block`, `.gw-block__part`, `.gw-block--variant`.
   <header class="gw-header" data-gw-header> … </header>
   <main id="main"> sections </main>
   <footer class="gw-footer"> … </footer>
-  <script src="…/website.js" defer></script>
+  <script src="…/website.js" defer></script>   <!-- or the ESM entry, see "Script" below -->
+```
+## Script (0.4.0)
+One script wires every part below: the mega menu, the mobile menu, the theme toggle, reveal, the header's scroll
+state, the current page, the segmented control and the busy button. It comes in two entries built from one source
+(`js/website.mjs`; `scripts/build.mjs` writes `js/website.js` from it and `--check` fails when they differ):
+| entry | file | how it starts |
+|---|---|---|
+| classic | `js/website.js` (`@gemboss/website-ui/website.js`) | `<script src="…/website.js" defer>`: wires the page on `DOMContentLoaded` by itself, then `window.gwWebsite` |
+| ESM | `js/website.mjs` (`@gemboss/website-ui/website.mjs`) | `import { init, destroy, version } from '@gemboss/website-ui/website.mjs'`: importing does nothing (safe on a server); the app calls `init()` |
+- **`init(root = document)`** wires the kit markup under `root`, `root` included. It is idempotent: an element is
+  wired once, so call it again after every client-side navigation or insert, and only the new elements are wired.
+  Called on a fragment, it wires that fragment and nothing else. It also lets go of elements removed from the page
+  since the last call, and moves the script's own `aria-current` mark to the new path. The listeners that belong
+  to the page (Escape, the outside click, the busy-button guard, the system theme, the scroll) are installed once.
+- **`destroy(root = document)`** takes back what `init` wired under `root`: its listeners and its marks. An open
+  mega menu or mobile menu is closed first, so an unmounted menu cannot leave the page locked.
+- **`version`**: `'0.4.0'`. The classic script exposes the three as `window.gwWebsite`.
+- **`data-gw-ready`**: on each wired element, the parts wired on it (`mega`, `menu`, `theme`, `reveal`, `header`,
+  `segmented`). It is a mark for people and tests, not a switch: markup copied from a live page, attribute and all,
+  is still wired.
+- **One copy per page.** The first copy that runs owns the page (`window.gwWebsite`); another one (the classic
+  script next to a bundle, two bundles) hands its calls to it, so nothing is wired twice.
+- Never wire a kit part with the site's own script (a click handler on `.gw-nav__trigger`, a class toggled by hand):
+  insert the kit's markup, then call `init` on it.
+### After inserting markup
+A Next.js app (App Router): one client component in the root layout, an effect on each route change. Effects run
+after hydration, so the server's markup is never changed before React reads it.
+```jsx
+// app/kit-script.jsx
+'use client';
+import { useEffect } from 'react';
+import { usePathname } from 'next/navigation';
+import { init } from '@gemboss/website-ui/website.mjs';
+export default function KitScript() {
+  const pathname = usePathname();
+  useEffect(() => { init(); }, [pathname]);
+  return null;
+}
+// app/layout.js: <body className="gw-page">{children}<KitScript /></body>
+```
+A component that mounts and unmounts kit markup on its own (a dialog, a part that streams in later):
+`useEffect(() => { const el = ref.current; init(el); return () => destroy(el); }, [])`, on a wrapper with
+`style={{ display: 'contents' }}` so it does not change the layout.
+A page that inserts HTML (a GemPages block rendered after load, a CMS preview), with the classic script:
+```js
+var slot = document.getElementById('pricing-slot');
+slot.innerHTML = html;           // kit markup: a header, a segmented control, sections
+window.gwWebsite.init(slot);     // wires what is new in it; the rest of the page is left alone
+```
+### Events
+The script tells the page's own code what changed. Every event is a `CustomEvent` that bubbles, so one listener on
+`document` hears them all; none is fired by `init`.
+| event | target | `detail` | fires when |
+|---|---|---|---|
+| `gw:mega` | the trigger (`[data-gw-mega]`) | `{ id, open }`: the panel's `id`, `true` when it opened | a panel opens or closes: click, hover, Escape, a click outside, focus leaving, a link inside, `destroy` of an open one. Moving to another menu fires a close, then an open |
+| `gw:theme` | `<html>` | `{ theme: 'light' \| 'dark' }`: the theme the page now shows | a press on a theme toggle; also a change of the system's scheme while the page follows it (no `data-theme`) |
+| `gw:segmented` | the group (`[data-gw-segmented]`) | `{ name, value }`: the group's name, the chosen option's `value` | the reader chooses an option (click, arrows, Home, End) |
+```js
+document.addEventListener('gw:theme', function (e) { chart.setTheme(e.detail.theme); });
 ```
 ## Header
@@ -61,24 +135,27 @@ BEM-ish: `.gw-block`, `.gw-block__part`, `.gw-block--variant`.
 Script behaviour:
 - **Mega menu**: click on a trigger toggles its panel (`hidden` removed, `aria-expanded="true"`, `.is-open` on the
   `.gw-nav__item`). Hover opens on fine pointers after 80ms and closes 160ms after leaving item and panel. Only one
-  open at a time. `Escape` closes and returns focus to the trigger. A click outside closes. Arrow keys are not required.
+  open at a time on the page, across every header `init` wired. `Escape` closes and returns focus to the trigger. A
+  click outside closes. Arrow keys are not required. Each change fires `gw:mega`.
 - **Mobile menu** (below 1080px the `.gw-nav` and sign-in hide, `.gw-menu-toggle` shows): the toggle flips `hidden`
-  on `#gw-mobile-menu`, `aria-expanded`, `.is-menu-open` on `<html>` (the CSS locks scroll), and its `aria-label`
-  (Open menu / Close menu). `Escape` closes. Resizing above 1080px closes it.
+  on the menu its `aria-controls` names (`#gw-mobile-menu`), `aria-expanded`, `.is-menu-open` on `<html>` (the CSS
+  locks scroll), and its `aria-label` (Open menu / Close menu). `Escape` closes. Resizing above 1080px closes it.
 - **Labels in other languages**: the script never writes English over a translated page. Give the toggles their
   words with `data-gw-label-open` / `data-gw-label-close` (menu toggle) and `data-gw-label-dark` /
   `data-gw-label-light` (theme toggle); without them it keeps the markup's own `aria-label`, then falls back to English.
 - **Theme toggle**: cycles light ↔ dark by setting `data-theme` on `<html>`, stores the choice in `localStorage`
-  (`gw-theme`, every access in try/catch), updates `aria-label`. On load, a stored choice is applied before paint by a
-  one-line inline script in `<head>` that the template carries (`templates/page.html`).
-- **Reveal**: elements with `.gw-reveal` get `.is-in` when 15% visible (IntersectionObserver, once). Failsafe: after
-  2.5s, or if IntersectionObserver is missing, all get `.is-in`. Under `prefers-reduced-motion` the CSS shows them
-  without motion.
+  (`gw-theme`, every access in try/catch), updates `aria-label` on every toggle, fires `gw:theme`. On load, a stored
+  choice is applied before paint by a one-line inline script in `<head>` that the template carries
+  (`templates/page.html`).
+- **Reveal**: elements with `.gw-reveal` get `.is-in` when 15% visible (IntersectionObserver, once). Failsafe: 2.5s
+  after the `init` that found them, or at once if IntersectionObserver is missing, they get `.is-in`. Under
+  `prefers-reduced-motion` the CSS shows them without motion.
 - **Header**: `.is-scrolled` on `[data-gw-header]` once the page scrolled more than 8px (the CSS may use it for the
   hairline only; the bar does not change height or colour). The floating header needs nothing more from the script:
   it is the same element with one more class.
-- **Current page**: the script marks `aria-current="page"` on `.gw-nav__link` / `.gw-mega__link` whose `href`
-  pathname equals `location.pathname` (when the markup did not already).
+- **Current page**: the script marks `aria-current="page"` on `.gw-nav__link` / `.gw-mega__link` and the mobile
+  menu's links whose `href` pathname equals `location.pathname` (when the markup did not already). Each `init` takes
+  its own marks back first, so after a client-side navigation they follow the new path; a mark in the markup stays.
 ## Brand profiles (0.3.0)

package/js/website.js CHANGED Viewed

@@ -1,186 +1,240 @@
-/*! @gemboss/website-ui website.js | spec: docs/markup-contract.md | load with defer */
+/*! @gemboss/website-ui 0.4.0 website.js | GENERATED by scripts/build.mjs from js/website.mjs (the source, with its comments): edit that file | spec: docs/markup-contract.md | load with defer */
 (function () {
-  'use strict';
-  if (window.gwWebsite) return;
-  window.gwWebsite = { version: '0.3.0' };
-  var doc = document, root = doc.documentElement;
-  function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
-  function watch(m, fn) { if (m.addEventListener) m.addEventListener('change', fn); }
-  function all(sel, ctx) { return [].slice.call((ctx || doc).querySelectorAll(sel)); }
-  function on(el, type, fn, opt) { el.addEventListener(type, fn, opt || false); }
-  function attr(el, name, dflt) { return el.getAttribute(name) || dflt; }
-  function esc(e) { return e.key === 'Escape'; }
-  function link(e) { return e.target.closest('a[href]'); }
+'use strict';
+if (window.gwWebsite) return;
-  // Mega menu. Opened by hover then clicked, a panel stays open: the click meant "open".
-  function mega() {
-    var fine = mq('(hover: hover) and (pointer: fine)'), open = null, timer = 0;
-    var menus = all('[data-gw-mega]').map(function (t) {
-      var p = doc.getElementById(attr(t, 'data-gw-mega', attr(t, 'aria-controls', '')));
-      return p && { t: t, p: p, item: t.closest('.gw-nav__item') || t.parentNode };
-    }).filter(Boolean);
-    if (!menus.length) return;
-    function set(m, show, mode) {
-      m.p.hidden = !show;
-      m.t.setAttribute('aria-expanded', String(show));
-      m.item.classList.toggle('is-open', show);
-      m.mode = mode;
-      open = show ? m : open === m ? null : open;
-    }
-    function show(m, mode) {
-      clearTimeout(timer);
-      if (open === m) { if (mode === 'click') m.mode = mode; return; }
-      if (open) set(open, false);
-      set(m, true, mode);
-    }
-    function hide(focus) {
-      var m = open;
-      clearTimeout(timer);
-      if (!m) return;
-      set(m, false);
-      if (focus === true) m.t.focus();
-    }
-    function inside(m, el) { return !!el && (m.item.contains(el) || m.p.contains(el)); }
-    menus.forEach(function (m) {
-      on(m.t, 'click', function () { if (open === m && m.mode !== 'hover') hide(); else show(m, 'click'); });
-      (m.item.contains(m.p) ? [m.item] : [m.item, m.p]).forEach(function (el) {
-        on(el, 'mouseenter', function () {
-          if (fine.matches) { clearTimeout(timer); if (open !== m) timer = setTimeout(function () { show(m, 'hover'); }, 80); }
-        });
-        on(el, 'mouseleave', function () {
-          if (fine.matches) { clearTimeout(timer); if (open === m && m.mode === 'hover') timer = setTimeout(hide, 160); }
-        });
+var version = '0.4.0';
+var api = { version: version, init: init, destroy: destroy };
+var doc, root, mine, fine, sys, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var READY = 'data-gw-ready';
+function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
+function watch(m, fn) { if (m.addEventListener) m.addEventListener('change', fn); }
+function all(sel, ctx) { return [].slice.call((ctx || doc).querySelectorAll(sel)); }
+function within(sel, ctx) { var l = all(sel, ctx); if (ctx.matches && ctx.matches(sel)) l.unshift(ctx); return l; }
+function on(el, type, fn, opt) { el.addEventListener(type, fn, opt || false); }
+function attr(el, name, dflt) { return el.getAttribute(name) || dflt; }
+function esc(e) { return e.key === 'Escape'; }
+function link(e) { return e.target.closest('a[href]'); }
+function emit(el, type, detail) { if (window.CustomEvent) el.dispatchEvent(new CustomEvent(type, { bubbles: true, detail: detail })); }
+function each(ctx, sel, kind, fn) {
+  within(sel, ctx).forEach(function (el) {
+    if (live.some(function (r) { return r.el === el && r.kind === kind; })) return;
+    var offs = [], r = fn(el, function (t, type, f, opt) {
+      on(t, type, f, opt);
+      offs.push(function () { t.removeEventListener(type, f, opt || false); });
+    });
+    if (!r) return offs.forEach(function (f) { f(); });
+    r.el = el; r.kind = kind; r.offs = offs;
+    mark(el, kind, true);
+    live.push(r);
+  });
+}
+function mark(el, kind, add) {
+  var l = attr(el, READY, '').split(' ').filter(function (k) { return k && k !== kind; });
+  if (add) l.push(kind);
+  if (l.length) el.setAttribute(READY, l.join(' ')); else el.removeAttribute(READY);
+}
+function drop(r) {
+  if (r.stop) r.stop();
+  r.offs.forEach(function (f) { f(); });
+  mark(r.el, r.kind);
+  live.splice(live.indexOf(r), 1);
+}
+function records(kind, fn) { live.slice().forEach(function (r) { if (r.kind === kind) fn(r); }); }
+function setMega(m, show, mode) {
+  m.p.hidden = !show;
+  m.t.setAttribute('aria-expanded', String(show));
+  m.item.classList.toggle('is-open', show);
+  m.mode = mode;
+  megaOpen = show ? m : megaOpen === m ? null : megaOpen;
+  emit(m.t, 'gw:mega', { id: m.p.id, open: show });
+}
+function showMega(m, mode) {
+  clearTimeout(megaTimer);
+  if (megaOpen === m) { if (mode === 'click') m.mode = mode; return; }
+  if (megaOpen) setMega(megaOpen, false);
+  setMega(m, true, mode);
+}
+function hideMega(focus) {
+  var m = megaOpen;
+  clearTimeout(megaTimer);
+  if (!m) return;
+  setMega(m, false);
+  if (focus === true) m.t.focus();
+}
+function inside(m, el) { return !!el && (m.item.contains(el) || m.p.contains(el)); }
+function mega(ctx) {
+  each(ctx, '[data-gw-mega]', 'mega', function (t, on) {
+    var p = doc.getElementById(attr(t, 'data-gw-mega', attr(t, 'aria-controls', '')));
+    if (!p) return;
+    var m = { t: t, p: p, item: t.closest('.gw-nav__item') || t.parentNode };
+    on(t, 'click', function () { if (megaOpen === m && m.mode !== 'hover') hideMega(); else showMega(m, 'click'); });
+    (m.item.contains(p) ? [m.item] : [m.item, p]).forEach(function (el) {
+      on(el, 'mouseenter', function () {
+        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen !== m) megaTimer = setTimeout(function () { showMega(m, 'hover'); }, 80); }
+      });
+      on(el, 'mouseleave', function () {
+        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen === m && m.mode === 'hover') megaTimer = setTimeout(hideMega, 160); }
       });
-      on(m.item, 'focusout', function (e) { if (open === m && e.relatedTarget && !inside(m, e.relatedTarget)) hide(); });
-      on(m.p, 'click', function (e) { if (link(e)) hide(); });
     });
-    on(doc, 'click', function (e) { if (open && !inside(open, e.target)) hide(); });
-    on(doc, 'keydown', function (e) { if (open && esc(e)) hide(inside(open, doc.activeElement) || open.mode === 'click'); });
-  }
+    on(m.item, 'focusout', function (e) { if (megaOpen === m && e.relatedTarget && !inside(m, e.relatedTarget)) hideMega(); });
+    on(p, 'click', function (e) { if (link(e)) hideMega(); });
+    m.stop = function () { if (megaOpen === m) hideMega(); };
+    return m;
+  });
+}
-  // Mobile menu. Labels: data-gw-label-open/-close, else the markup's aria-label, else English.
-  function mobile() {
-    var btn = doc.querySelector('[data-gw-menu-toggle]');
-    var menu = btn && doc.getElementById(attr(btn, 'aria-controls', 'gw-mobile-menu'));
+function mobile(ctx) {
+  each(ctx, '[data-gw-menu-toggle]', 'menu', function (btn, on) {
+    var menu = doc.getElementById(attr(btn, 'aria-controls', 'gw-mobile-menu'));
     if (!menu) return;
     var label = [attr(btn, 'data-gw-label-open', attr(btn, 'aria-label', 'Open menu')), attr(btn, 'data-gw-label-close', 'Close menu')];
-    var wide = mq('(min-width: 1080px)');
-    function isOpen() { return !menu.hidden; }
-    function set(o, focus) {
-      menu.hidden = !o;
-      btn.setAttribute('aria-expanded', String(o));
-      btn.setAttribute('aria-label', label[+o]);
-      root.classList.toggle('is-menu-open', o);
-      if (focus) btn.focus();
-    }
-    on(btn, 'click', function () { set(!isOpen()); });
-    on(doc, 'keydown', function (e) { if (esc(e) && isOpen()) set(false, true); });
-    on(menu, 'click', function (e) { if (link(e)) set(false); }); // same-page anchors do not reload
-    watch(wide, function () { if (wide.matches && isOpen()) set(false); });
-    on(window, 'pageshow', function (e) { if (e.persisted && isOpen()) set(false); });
-  }
+    var r = {
+      open: function () { return !menu.hidden; },
+      set: function (o, focus) {
+        menu.hidden = !o;
+        btn.setAttribute('aria-expanded', String(o));
+        btn.setAttribute('aria-label', label[+o]);
+        root.classList.toggle('is-menu-open', o);
+        if (focus) btn.focus();
+      },
+      stop: function () { if (r.open()) r.set(false); }
+    };
+    on(btn, 'click', function () { r.set(!r.open()); });
+    on(menu, 'click', function (e) { if (link(e)) r.set(false); });
+    return r;
+  });
+}
+function closeMenus(focus) { records('menu', function (r) { if (r.open()) r.set(false, focus); }); }
-  // Theme toggle. Labels: data-gw-label-dark/-light, else the markup's aria-label, else English.
-  function theme() {
-    var sys = mq('(prefers-color-scheme: dark)'), stored = null;
-    try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
-    if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
-    var btns = all('[data-gw-theme-toggle]'), labels = btns.map(function (b) {
-      return [attr(b, 'data-gw-label-dark', attr(b, 'aria-label', 'Switch to dark theme')), attr(b, 'data-gw-label-light', 'Switch to light theme')];
+function dark() { var t = root.getAttribute('data-theme'); return t ? t === 'dark' : sys.matches; }
+function relabel() { records('theme', function (r) { r.el.setAttribute('aria-label', r.labels[+dark()]); }); }
+function theme(ctx) {
+  each(ctx, '[data-gw-theme-toggle]', 'theme', function (b, on) {
+    var r = { labels: [attr(b, 'data-gw-label-dark', attr(b, 'aria-label', 'Switch to dark theme')), attr(b, 'data-gw-label-light', 'Switch to light theme')] };
+    on(b, 'click', function () {
+      var next = dark() ? 'light' : 'dark';
+      root.setAttribute('data-theme', next);
+      try { localStorage.setItem('gw-theme', next); } catch (e) { /* blocked */ }
+      relabel();
+      emit(root, 'gw:theme', { theme: next });
     });
-    function dark() { var t = root.getAttribute('data-theme'); return t ? t === 'dark' : sys.matches; }
-    function relabel() { btns.forEach(function (b, i) { b.setAttribute('aria-label', labels[i][+dark()]); }); }
-    btns.forEach(function (b) {
-      on(b, 'click', function () {
-        var next = dark() ? 'light' : 'dark';
-        root.setAttribute('data-theme', next);
-        try { localStorage.setItem('gw-theme', next); } catch (e) { /* blocked */ }
-        relabel();
-      });
-    });
-    watch(sys, relabel);
-    relabel();
-  }
+    r.stop = function () { b.setAttribute('aria-label', r.labels[0]); };
+    return r;
+  });
+  relabel();
+}
-  // Reveal at 15% visible, once. Failsafe: all shown after 2.5s, or at once without IntersectionObserver.
-  function reveal() {
-    var els = all('.gw-reveal'), io = null;
-    function showAll() { els.forEach(function (el) { el.classList.add('is-in'); }); if (io) io.disconnect(); }
-    if (!els.length) return;
-    if (!window.IntersectionObserver || mq('(prefers-reduced-motion: reduce)').matches) return showAll();
-    io = new IntersectionObserver(function (list) {
-      list.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); } });
-    }, { threshold: 0.15 });
-    els.forEach(function (el) { io.observe(el); });
-    setTimeout(showAll, 2500);
-  }
+function reveal(ctx) {
+  var els = [], io = null;
+  each(ctx, '.gw-reveal', 'reveal', function (el) { els.push(el); return { stop: function () { if (io) io.unobserve(el); } }; });
+  function showAll() { els.forEach(function (el) { el.classList.add('is-in'); }); if (io) io.disconnect(); }
+  if (!els.length) return;
+  if (!window.IntersectionObserver || mq('(prefers-reduced-motion: reduce)').matches) return showAll();
+  io = new IntersectionObserver(function (list) {
+    list.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); } });
+  }, { threshold: 0.15 });
+  els.forEach(function (el) { io.observe(el); });
+  setTimeout(showAll, 2500);
+}
-  // Header: .is-scrolled past 8px, read once per frame.
-  function header() {
-    var h = doc.querySelector('[data-gw-header]'), state = false, queued = false;
-    if (!h) return;
-    function update() {
-      var s = window.scrollY > 8;
-      queued = false;
-      if (s !== state) h.classList.toggle('is-scrolled', (state = s));
-    }
-    on(window, 'scroll', function () { if (!queued) { queued = true; requestAnimationFrame(update); } }, { passive: true });
-    update();
-  }
+function scrolled() {
+  var s = window.scrollY > 8;
+  queued = false;
+  records('header', function (r) { if (r.s !== s) r.el.classList.toggle('is-scrolled', (r.s = s)); });
+}
+function header(ctx) {
+  each(ctx, '[data-gw-header]', 'header', function (h) { return { s: false, stop: function () { h.classList.remove('is-scrolled'); } }; });
+  scrolled();
+}
-  // aria-current="page" on nav links to this path, unless the markup marked one.
-  function current() {
-    var menu = doc.getElementById('gw-mobile-menu');
-    var links = all('.gw-nav__link[href], .gw-mega__link[href]').concat(menu ? all('a[href]', menu) : []);
-    function norm(p) { return p.replace(/\/index\.html?$/, '/').replace(/\.html?$/, '').replace(/\/+$/, '') || '/'; }
-    if (links.some(function (a) { return a.hasAttribute('aria-current'); })) return;
-    links.forEach(function (a) {
-      if (a.classList.contains('gw-btn') || a.hash || a.host !== location.host) return;
-      if (norm(a.pathname) === norm(location.pathname)) a.setAttribute('aria-current', 'page');
-    });
-  }
+function current(ctx) {
+  var links = within('.gw-nav__link[href], .gw-mega__link[href]', ctx);
+  within('#gw-mobile-menu, .gw-mobile-menu', ctx).forEach(function (m) { links = links.concat(all('a[href]', m)); });
+  function norm(p) { return p.replace(/\/index\.html?$/, '/').replace(/\.html?$/, '').replace(/\/+$/, '') || '/'; }
+  links.forEach(function (a) { if (mine.has(a)) { mine.delete(a); a.removeAttribute('aria-current'); } });
+  if (links.some(function (a) { return a.hasAttribute('aria-current'); })) return;
+  links.forEach(function (a) {
+    if (a.classList.contains('gw-btn') || a.hash || a.host !== location.host) return;
+    if (norm(a.pathname) === norm(location.pathname)) { a.setAttribute('aria-current', 'page'); mine.add(a); }
+  });
+}
-  // Segmented control: a radio group, one Tab stop; arrows (Home, End) move and choose. What one option shows carries
-  // data-gw-show="group:value" and is hidden unless that option is chosen; without the script the markup's own choice shows.
-  function segmented() {
-    all('[data-gw-segmented]').forEach(function (g) {
-      var name = attr(g, 'data-gw-segmented', ''), opts = all('[role="radio"]', g);
-      if (!opts.length) return;
-      function pick(o, focus, said) {
-        var v = attr(o, 'value', '');
-        opts.forEach(function (x) { x.setAttribute('aria-checked', String(x === o)); x.setAttribute('tabindex', x === o ? '0' : '-1'); });
-        if (focus) o.focus();
-        all('[data-gw-show]').forEach(function (el) {
-          var mine = attr(el, 'data-gw-show', '').split(/\s+/).filter(function (t) { return t.split(':')[0] === name; });
-          if (mine.length) el.hidden = mine.indexOf(name + ':' + v) < 0;
-        });
-        if (said && window.CustomEvent) g.dispatchEvent(new CustomEvent('gw:segmented', { bubbles: true, detail: { name: name, value: v } }));
-      }
-      opts.forEach(function (o, i) {
-        on(o, 'click', function () { pick(o, false, true); });
-        on(o, 'keydown', function (e) {
-          var n = opts.length, k = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1 + n, ArrowUp: i - 1 + n, Home: 0, End: n - 1 }[e.key];
-          if (k === undefined || e.altKey || e.ctrlKey || e.metaKey) return;
-          e.preventDefault();
-          pick(opts[k % n], true, true);
-        });
+function segmented(ctx) {
+  each(ctx, '[data-gw-segmented]', 'segmented', function (g, on) {
+    var name = attr(g, 'data-gw-segmented', ''), opts = all('[role="radio"]', g);
+    if (!opts.length) return;
+    function pick(o, focus, said) {
+      var v = attr(o, 'value', '');
+      opts.forEach(function (x) { x.setAttribute('aria-checked', String(x === o)); x.setAttribute('tabindex', x === o ? '0' : '-1'); });
+      if (focus) o.focus();
+      all('[data-gw-show]').forEach(function (el) {
+        var own = attr(el, 'data-gw-show', '').split(/\s+/).filter(function (t) { return t.split(':')[0] === name; });
+        if (own.length) el.hidden = own.indexOf(name + ':' + v) < 0;
+      });
+      if (said) emit(g, 'gw:segmented', { name: name, value: v });
+    }
+    opts.forEach(function (o, i) {
+      on(o, 'click', function () { pick(o, false, true); });
+      on(o, 'keydown', function (e) {
+        var n = opts.length, k = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1 + n, ArrowUp: i - 1 + n, Home: 0, End: n - 1 }[e.key];
+        if (k === undefined || e.altKey || e.ctrlKey || e.metaKey) return;
+        e.preventDefault();
+        pick(opts[k % n], true, true);
       });
-      pick(opts.filter(function (o) { return attr(o, 'aria-checked', '') === 'true'; })[0] || opts[0]);
     });
-  }
+    pick(opts.filter(function (o) { return attr(o, 'aria-checked', '') === 'true'; })[0] || opts[0]);
+    return {};
+  });
+}
-  // A busy button (aria-busy="true") ignores presses, by mouse or keyboard: no double submit. It keeps its focus and name.
-  function busy() {
-    on(doc, 'click', function (e) {
-      var b = e.target.closest && e.target.closest('.gw-btn[aria-busy="true"]');
-      if (b) { e.preventDefault(); e.stopPropagation(); }
-    }, true);
-  }
+function install() {
+  doc = document; root = doc.documentElement; mine = new WeakSet();
+  fine = mq('(hover: hover) and (pointer: fine)'); sys = mq('(prefers-color-scheme: dark)');
+  var wide = mq('(min-width: 1080px)'), stored = null;
+  on(doc, 'click', function (e) { if (megaOpen && !inside(megaOpen, e.target)) hideMega(); });
+  on(doc, 'keydown', function (e) { if (megaOpen && esc(e)) hideMega(inside(megaOpen, doc.activeElement) || megaOpen.mode === 'click'); });
+  on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });
+  watch(wide, function () { if (wide.matches) closeMenus(); });
+  on(window, 'pageshow', function (e) { if (e.persisted) closeMenus(); });
+  try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
+  if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
+  watch(sys, function () { relabel(); if (!root.hasAttribute('data-theme')) emit(root, 'gw:theme', { theme: dark() ? 'dark' : 'light' }); });
+  on(window, 'scroll', function () { if (!queued) { queued = true; requestAnimationFrame(scrolled); } }, { passive: true });
+  on(doc, 'click', function (e) {
+    var b = e.target.closest && e.target.closest('.gw-btn[aria-busy="true"]');
+    if (b) { e.preventDefault(); e.stopPropagation(); }
+  }, true);
+}
-  function init() {
-    [mega, mobile, theme, reveal, header, current, segmented, busy].forEach(function (f) {
-      try { f(); } catch (e) { console.error('[gw-website]', e); }
-    });
-  }
-  if (doc.readyState === 'loading') on(doc, 'DOMContentLoaded', init); else init();
+function run(fns, ctx) {
+  fns.forEach(function (f) { try { f(ctx); } catch (e) { console.error('[gw-website]', e); } });
+}
+function other() { var g = typeof window != 'undefined' && window.gwWebsite; return g && g !== api && g; }
+/** Wires the kit's markup under root (default: the whole document). Safe to call again: wires only what is new. */
+function init(ctx) {
+  if (typeof document == 'undefined') return;
+  var g = other();
+  if (g) return g.init && g.init(ctx);
+  window.gwWebsite = api;
+  if (!doc) run([install]);
+  live.slice().forEach(function (r) { if (r.el.isConnected === false) drop(r); });
+  run([mega, mobile, theme, reveal, header, current, segmented], ctx && ctx.querySelectorAll ? ctx : doc);
+}
+/** Takes back what init() wired under root (default: the whole document): listeners and data-gw-ready marks. */
+function destroy(ctx) {
+  var g = other();
+  if (g) return g.destroy && g.destroy(ctx);
+  if (!doc) return;
+  ctx = ctx && ctx.querySelectorAll ? ctx : doc;
+  live.slice().forEach(function (r) { if (ctx === doc || ctx.contains(r.el)) drop(r); });
+}
+window.gwWebsite = api;
+if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', function () { init(); }); else init();
 })();

package/js/website.mjs ADDED Viewed

@@ -0,0 +1,269 @@
+/*! @gemboss/website-ui website.mjs | spec: docs/markup-contract.md */
+// The ESM entry: import { init, destroy, version } from '@gemboss/website-ui/website.mjs'. Importing it does nothing;
+// call init() once the markup is in the page, and again after every route change or insert. No dependencies.
+//
+// js/website.js, the classic script, is GENERATED from this file by scripts/build.mjs (this code in an IIFE, without
+// the export line and the // comments, plus auto-init): edit this file, then run the build. Keep comments on lines of
+// their own, so the build can leave them out.
+var version = '0.4.0';
+var api = { version: version, init: init, destroy: destroy };
+// Page state. Set up by the first init(), never at import: a server can import this file.
+var doc, root, mine, fine, sys, live = [], megaOpen = null, megaTimer = 0, queued = false;
+var READY = 'data-gw-ready';
+function mq(q) { return window.matchMedia ? matchMedia(q) : { matches: false }; }
+function watch(m, fn) { if (m.addEventListener) m.addEventListener('change', fn); }
+function all(sel, ctx) { return [].slice.call((ctx || doc).querySelectorAll(sel)); }
+// Like all(), and ctx itself when it matches: init(header) wires the header it is given.
+function within(sel, ctx) { var l = all(sel, ctx); if (ctx.matches && ctx.matches(sel)) l.unshift(ctx); return l; }
+function on(el, type, fn, opt) { el.addEventListener(type, fn, opt || false); }
+function attr(el, name, dflt) { return el.getAttribute(name) || dflt; }
+function esc(e) { return e.key === 'Escape'; }
+function link(e) { return e.target.closest('a[href]'); }
+function emit(el, type, detail) { if (window.CustomEvent) el.dispatchEvent(new CustomEvent(type, { bubbles: true, detail: detail })); }
+// Wiring. Each element under ctx that matches sel is wired once as `kind`: fn(el, on) adds the element's listeners
+// with the `on` it is given (so destroy can remove them) and returns a record, or nothing when the element cannot be
+// wired yet (the next init tries again). Records live in `live`. data-gw-ready lists the kinds wired on an element;
+// the record, not the attribute, decides, so markup copied from a live page, attribute and all, is still wired.
+function each(ctx, sel, kind, fn) {
+  within(sel, ctx).forEach(function (el) {
+    if (live.some(function (r) { return r.el === el && r.kind === kind; })) return;
+    var offs = [], r = fn(el, function (t, type, f, opt) {
+      on(t, type, f, opt);
+      offs.push(function () { t.removeEventListener(type, f, opt || false); });
+    });
+    if (!r) return offs.forEach(function (f) { f(); });
+    r.el = el; r.kind = kind; r.offs = offs;
+    mark(el, kind, true);
+    live.push(r);
+  });
+}
+function mark(el, kind, add) {
+  var l = attr(el, READY, '').split(' ').filter(function (k) { return k && k !== kind; });
+  if (add) l.push(kind);
+  if (l.length) el.setAttribute(READY, l.join(' ')); else el.removeAttribute(READY);
+}
+function drop(r) {
+  if (r.stop) r.stop();
+  r.offs.forEach(function (f) { f(); });
+  mark(r.el, r.kind);
+  live.splice(live.indexOf(r), 1);
+}
+function records(kind, fn) { live.slice().forEach(function (r) { if (r.kind === kind) fn(r); }); }
+// Mega menu. Opened by hover then clicked, a panel stays open: the click meant "open". One open on the page, across
+// every header init() wired. Each change fires gw:mega on the trigger.
+function setMega(m, show, mode) {
+  m.p.hidden = !show;
+  m.t.setAttribute('aria-expanded', String(show));
+  m.item.classList.toggle('is-open', show);
+  m.mode = mode;
+  megaOpen = show ? m : megaOpen === m ? null : megaOpen;
+  emit(m.t, 'gw:mega', { id: m.p.id, open: show });
+}
+function showMega(m, mode) {
+  clearTimeout(megaTimer);
+  if (megaOpen === m) { if (mode === 'click') m.mode = mode; return; }
+  if (megaOpen) setMega(megaOpen, false);
+  setMega(m, true, mode);
+}
+function hideMega(focus) {
+  var m = megaOpen;
+  clearTimeout(megaTimer);
+  if (!m) return;
+  setMega(m, false);
+  if (focus === true) m.t.focus();
+}
+function inside(m, el) { return !!el && (m.item.contains(el) || m.p.contains(el)); }
+function mega(ctx) {
+  each(ctx, '[data-gw-mega]', 'mega', function (t, on) {
+    var p = doc.getElementById(attr(t, 'data-gw-mega', attr(t, 'aria-controls', '')));
+    if (!p) return;
+    var m = { t: t, p: p, item: t.closest('.gw-nav__item') || t.parentNode };
+    on(t, 'click', function () { if (megaOpen === m && m.mode !== 'hover') hideMega(); else showMega(m, 'click'); });
+    (m.item.contains(p) ? [m.item] : [m.item, p]).forEach(function (el) {
+      on(el, 'mouseenter', function () {
+        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen !== m) megaTimer = setTimeout(function () { showMega(m, 'hover'); }, 80); }
+      });
+      on(el, 'mouseleave', function () {
+        if (fine.matches) { clearTimeout(megaTimer); if (megaOpen === m && m.mode === 'hover') megaTimer = setTimeout(hideMega, 160); }
+      });
+    });
+    on(m.item, 'focusout', function (e) { if (megaOpen === m && e.relatedTarget && !inside(m, e.relatedTarget)) hideMega(); });
+    on(p, 'click', function (e) { if (link(e)) hideMega(); });
+    m.stop = function () { if (megaOpen === m) hideMega(); };
+    return m;
+  });
+}
+// Mobile menu. Labels: data-gw-label-open/-close, else the markup's aria-label, else English. A link inside closes it
+// (same-page anchors do not reload). Taken back while open, it closes first: it must not keep the page locked.
+function mobile(ctx) {
+  each(ctx, '[data-gw-menu-toggle]', 'menu', function (btn, on) {
+    var menu = doc.getElementById(attr(btn, 'aria-controls', 'gw-mobile-menu'));
+    if (!menu) return;
+    var label = [attr(btn, 'data-gw-label-open', attr(btn, 'aria-label', 'Open menu')), attr(btn, 'data-gw-label-close', 'Close menu')];
+    var r = {
+      open: function () { return !menu.hidden; },
+      set: function (o, focus) {
+        menu.hidden = !o;
+        btn.setAttribute('aria-expanded', String(o));
+        btn.setAttribute('aria-label', label[+o]);
+        root.classList.toggle('is-menu-open', o);
+        if (focus) btn.focus();
+      },
+      stop: function () { if (r.open()) r.set(false); }
+    };
+    on(btn, 'click', function () { r.set(!r.open()); });
+    on(menu, 'click', function (e) { if (link(e)) r.set(false); });
+    return r;
+  });
+}
+function closeMenus(focus) { records('menu', function (r) { if (r.open()) r.set(false, focus); }); }
+// Theme toggle. Labels: data-gw-label-dark/-light, else the markup's aria-label, else English. A press fires gw:theme
+// on <html>; so does a change of the system's scheme while the page follows it.
+function dark() { var t = root.getAttribute('data-theme'); return t ? t === 'dark' : sys.matches; }
+function relabel() { records('theme', function (r) { r.el.setAttribute('aria-label', r.labels[+dark()]); }); }
+function theme(ctx) {
+  each(ctx, '[data-gw-theme-toggle]', 'theme', function (b, on) {
+    var r = { labels: [attr(b, 'data-gw-label-dark', attr(b, 'aria-label', 'Switch to dark theme')), attr(b, 'data-gw-label-light', 'Switch to light theme')] };
+    on(b, 'click', function () {
+      var next = dark() ? 'light' : 'dark';
+      root.setAttribute('data-theme', next);
+      try { localStorage.setItem('gw-theme', next); } catch (e) { /* blocked */ }
+      relabel();
+      emit(root, 'gw:theme', { theme: next });
+    });
+    // taken back: the markup's own label again, so a later init reads the same words
+    r.stop = function () { b.setAttribute('aria-label', r.labels[0]); };
+    return r;
+  });
+  relabel();
+}
+// Reveal at 15% visible, once. Failsafe: shown 2.5s after the init that found them, or at once without
+// IntersectionObserver or under reduced motion.
+function reveal(ctx) {
+  var els = [], io = null;
+  each(ctx, '.gw-reveal', 'reveal', function (el) { els.push(el); return { stop: function () { if (io) io.unobserve(el); } }; });
+  function showAll() { els.forEach(function (el) { el.classList.add('is-in'); }); if (io) io.disconnect(); }
+  if (!els.length) return;
+  if (!window.IntersectionObserver || mq('(prefers-reduced-motion: reduce)').matches) return showAll();
+  io = new IntersectionObserver(function (list) {
+    list.forEach(function (en) { if (en.isIntersecting) { en.target.classList.add('is-in'); io.unobserve(en.target); } });
+  }, { threshold: 0.15 });
+  els.forEach(function (el) { io.observe(el); });
+  setTimeout(showAll, 2500);
+}
+// Header: .is-scrolled past 8px, read once per frame (one scroll listener for every header).
+function scrolled() {
+  var s = window.scrollY > 8;
+  queued = false;
+  records('header', function (r) { if (r.s !== s) r.el.classList.toggle('is-scrolled', (r.s = s)); });
+}
+function header(ctx) {
+  each(ctx, '[data-gw-header]', 'header', function (h) { return { s: false, stop: function () { h.classList.remove('is-scrolled'); } }; });
+  scrolled();
+}
+// aria-current="page" on nav links to this path, unless the markup marked one. The script's own marks are taken
+// back first, so an init() after a client-side navigation moves them.
+function current(ctx) {
+  var links = within('.gw-nav__link[href], .gw-mega__link[href]', ctx);
+  within('#gw-mobile-menu, .gw-mobile-menu', ctx).forEach(function (m) { links = links.concat(all('a[href]', m)); });
+  function norm(p) { return p.replace(/\/index\.html?$/, '/').replace(/\.html?$/, '').replace(/\/+$/, '') || '/'; }
+  links.forEach(function (a) { if (mine.has(a)) { mine.delete(a); a.removeAttribute('aria-current'); } });
+  if (links.some(function (a) { return a.hasAttribute('aria-current'); })) return;
+  links.forEach(function (a) {
+    if (a.classList.contains('gw-btn') || a.hash || a.host !== location.host) return;
+    if (norm(a.pathname) === norm(location.pathname)) { a.setAttribute('aria-current', 'page'); mine.add(a); }
+  });
+}
+// Segmented control: a radio group, one Tab stop; arrows (Home, End) move and choose. What one option shows carries
+// data-gw-show="group:value" and is hidden unless that option is chosen; without the script the markup's own choice
+// shows. A choice made by the reader fires gw:segmented on the group; wiring it does not.
+function segmented(ctx) {
+  each(ctx, '[data-gw-segmented]', 'segmented', function (g, on) {
+    var name = attr(g, 'data-gw-segmented', ''), opts = all('[role="radio"]', g);
+    if (!opts.length) return;
+    function pick(o, focus, said) {
+      var v = attr(o, 'value', '');
+      opts.forEach(function (x) { x.setAttribute('aria-checked', String(x === o)); x.setAttribute('tabindex', x === o ? '0' : '-1'); });
+      if (focus) o.focus();
+      all('[data-gw-show]').forEach(function (el) {
+        var own = attr(el, 'data-gw-show', '').split(/\s+/).filter(function (t) { return t.split(':')[0] === name; });
+        if (own.length) el.hidden = own.indexOf(name + ':' + v) < 0;
+      });
+      if (said) emit(g, 'gw:segmented', { name: name, value: v });
+    }
+    opts.forEach(function (o, i) {
+      on(o, 'click', function () { pick(o, false, true); });
+      on(o, 'keydown', function (e) {
+        var n = opts.length, k = { ArrowRight: i + 1, ArrowDown: i + 1, ArrowLeft: i - 1 + n, ArrowUp: i - 1 + n, Home: 0, End: n - 1 }[e.key];
+        if (k === undefined || e.altKey || e.ctrlKey || e.metaKey) return;
+        e.preventDefault();
+        pick(opts[k % n], true, true);
+      });
+    });
+    pick(opts.filter(function (o) { return attr(o, 'aria-checked', '') === 'true'; })[0] || opts[0]);
+    return {};
+  });
+}
+// Once per page: what belongs to the document, the window or a media query rather than to one element.
+function install() {
+  doc = document; root = doc.documentElement; mine = new WeakSet();
+  fine = mq('(hover: hover) and (pointer: fine)'); sys = mq('(prefers-color-scheme: dark)');
+  var wide = mq('(min-width: 1080px)'), stored = null;
+  on(doc, 'click', function (e) { if (megaOpen && !inside(megaOpen, e.target)) hideMega(); });
+  on(doc, 'keydown', function (e) { if (megaOpen && esc(e)) hideMega(inside(megaOpen, doc.activeElement) || megaOpen.mode === 'click'); });
+  on(doc, 'keydown', function (e) { if (esc(e)) closeMenus(true); });
+  watch(wide, function () { if (wide.matches) closeMenus(); });
+  on(window, 'pageshow', function (e) { if (e.persisted) closeMenus(); });
+  try { stored = localStorage.getItem('gw-theme'); } catch (e) { /* blocked */ }
+  if (!root.hasAttribute('data-theme') && /^(light|dark)$/.test(stored)) root.setAttribute('data-theme', stored);
+  watch(sys, function () { relabel(); if (!root.hasAttribute('data-theme')) emit(root, 'gw:theme', { theme: dark() ? 'dark' : 'light' }); });
+  on(window, 'scroll', function () { if (!queued) { queued = true; requestAnimationFrame(scrolled); } }, { passive: true });
+  // A busy button (aria-busy="true") ignores presses, by mouse or keyboard: no double submit. It keeps its focus and
+  // name. One listener on the document, in the capture phase, so it covers buttons inserted later too.
+  on(doc, 'click', function (e) {
+    var b = e.target.closest && e.target.closest('.gw-btn[aria-busy="true"]');
+    if (b) { e.preventDefault(); e.stopPropagation(); }
+  }, true);
+}
+function run(fns, ctx) {
+  fns.forEach(function (f) { try { f(ctx); } catch (e) { console.error('[gw-website]', e); } });
+}
+// One copy of the kit owns a page (window.gwWebsite). When another one got there first (the classic script, a second
+// bundle), it does the work, so nothing is wired twice.
+function other() { var g = typeof window != 'undefined' && window.gwWebsite; return g && g !== api && g; }
+/** Wires the kit's markup under root (default: the whole document). Safe to call again: wires only what is new. */
+function init(ctx) {
+  // server rendering: nothing to wire
+  if (typeof document == 'undefined') return;
+  var g = other();
+  if (g) return g.init && g.init(ctx);
+  window.gwWebsite = api;
+  if (!doc) run([install]);
+  // an element removed from the page since the last init is let go
+  live.slice().forEach(function (r) { if (r.el.isConnected === false) drop(r); });
+  run([mega, mobile, theme, reveal, header, current, segmented], ctx && ctx.querySelectorAll ? ctx : doc);
+}
+/** Takes back what init() wired under root (default: the whole document): listeners and data-gw-ready marks. */
+function destroy(ctx) {
+  var g = other();
+  if (g) return g.destroy && g.destroy(ctx);
+  if (!doc) return;
+  ctx = ctx && ctx.querySelectorAll ? ctx : doc;
+  live.slice().forEach(function (r) { if (ctx === doc || ctx.contains(r.el)) drop(r); });
+}
+export { version, init, destroy };

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@gemboss/website-ui",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "The GemBoss website kit: tokens, header, footer, sections and the rules (AGENTS.md) that GemCommerce public websites share, plus a CLI that checks a site, reports kit gaps and upgrades.",
   "license": "UNLICENSED",
   "type": "module",
@@ -23,6 +23,7 @@
     "./website.css": "./website.css",
     "./website.min.css": "./website.min.css",
     "./website.js": "./js/website.js",
+    "./website.mjs": "./js/website.mjs",
     "./system.json": "./system.json",
     "./css/*": "./css/*",
     "./package.json": "./package.json"

package/skill/SKILL.md CHANGED Viewed

@@ -20,6 +20,8 @@ the kit and its rules are how the page ends up looking designed. Compose from th
    - Changed page: keep its kit classes; change words, order and choice of sections.
    - Site CSS only for what the kit cannot know (an illustration, a product mock-up), with the kit's tokens and
      scales, classes in the site's own prefix. Never style a `.gw-*` class, never edit `node_modules`.
+   - No JS of your own for kit parts: markup inserted after load (a route change, a block) gets
+     `gwWebsite.init(root)`, or `init(root)` from `website.mjs` (`KIT/docs/markup-contract.md`, "Script").
    - Another brand: choose only the accent family, wash hues, logo and favicon, and the three named profiles
      (`data-gw-action` and `data-gw-radius` on `<html>`, `.gw-header--float`), never free values
      (`KIT/docs/theming.md`).

package/website.css CHANGED Viewed

@@ -1,4 +1,4 @@
-/*! @gemboss/website-ui 0.3.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
+/*! @gemboss/website-ui 0.4.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;

package/website.min.css CHANGED Viewed

	@@ -1 +1 @@
1	- /! @gemboss/website-ui 0.3.0 \| generated by scripts/build.mjs from the files in css/. Edit those and not this file / :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-text-11: 11px;--gw-text-12: 12px;--gw-text-13: 13px;--gw-text-14: 14px;--gw-text-16: 16px;--gw-text-18: 18px;--gw-text-20: 20px;--gw-text-22: 22px;--gw-text-24: 24px;--gw-text-30: 30px;--gw-display-h1: clamp(40px,4.6vw,68px);--gw-display-h2: clamp(32px,3.4vw,52px);--gw-display-weight: 600;--gw-display-tracking: -0.03em;--gw-heading-weight: 650;--gw-heading-tracking: -0.022em;--gw-heading-leading: 1.08;--gw-body-size: 18px;--gw-body-leading: 1.6;--gw-space-0: 0;--gw-space-2: 2px;--gw-space-4: 4px;--gw-space-6: 6px;--gw-space-8: 8px;--gw-space-12: 12px;--gw-space-16: 16px;--gw-space-20: 20px;--gw-space-24: 24px;--gw-space-32: 32px;--gw-space-40: 40px;--gw-space-48: 48px;--gw-space-64: 64px;--gw-space-80: 80px;--gw-space-96: 96px;--gw-space-120: 120px;--gw-space-section: clamp(56px,38px + 5vw,110px);--gw-radius-0: 0;--gw-radius-4: 4px;--gw-radius-6: 6px;--gw-radius-8: 8px;--gw-radius-12: 12px;--gw-radius-16: 16px;--gw-radius-20: 20px;--gw-radius-24: 24px;--gw-radius-999: 999px;--gw-radius-action: 8px;--gw-radius-chip: 999px;--gw-radius-card: 12px;--gw-radius-panel: 16px;--gw-radius-popover: 20px;--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-wrap: 1120px;--gw-wrap-narrow: 780px;--gw-gutter: 22px;--gw-header-height: 64px;--gw-header-gap: 16px;--gw-header-surface: 85%;--gw-header-blur: 10px;--gw-button-height: 40px;--gw-tap-min: 44px;--gw-ease: cubic-bezier(.22,1,.36,1);--gw-reveal-ms: 700ms;--gw-spin-ms: 700ms;--gw-wash-pink: #ff6f5e;--gw-wash-violet: #7c8af7;--gw-wash-sky: #43b0ff;--gw-wash-mint: #1fcf9f;--gw-accent-light: #5661f5;--gw-accent-strong-light: #3a44de;--gw-accent-soft-light: #eef0fe;--gw-on-accent-light: #ffffff;--gw-accent-dark: #7c84ff;--gw-accent-strong-dark: #a3a9ff;--gw-accent-soft-dark: #1f2140;--gw-on-accent-dark: #0d0d12;--gw-bg: #ffffff;--gw-bg-soft: #f2f3f5;--gw-surface: #ffffff;--gw-ink: #1b1c1e;--gw-ink-2: #3b3d42;--gw-muted: #686b71;--gw-line: #e5e7ea;--gw-line-strong: #d5d8dd;--gw-action: #1b1c1e;--gw-action-hover: #000000;--gw-on-action: #ffffff;--gw-accent: var(--gw-accent-light);--gw-accent-strong: var(--gw-accent-strong-light);--gw-accent-soft: var(--gw-accent-soft-light);--gw-on-accent: var(--gw-on-accent-light);--gw-success: #007f5f;--gw-success-soft: #e3f1df;--gw-warning: #9a6700;--gw-night: #0c0e14;--gw-night-2: #141722;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme: dark;--gw-bg: #0d0d12;--gw-bg-soft: #121318;--gw-surface: #16171d;--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341;--gw-night: #0a0b10;--gw-night-2: #12141c;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}}:root[data-theme="dark"]{color-scheme: dark;--gw-bg: #0d0d12;--gw-bg-soft: #121318;--gw-surface: #16171d;--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341;--gw-night: #0a0b10;--gw-night-2: #12141c;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}:root[data-theme="light"]{color-scheme: light;--gw-bg: #ffffff;--gw-bg-soft: #f2f3f5;--gw-surface: #ffffff;--gw-ink: #1b1c1e;--gw-ink-2: #3b3d42;--gw-muted: #686b71;--gw-line: #e5e7ea;--gw-line-strong: #d5d8dd;--gw-action: #1b1c1e;--gw-action-hover: #000000;--gw-on-action: #ffffff;--gw-accent: var(--gw-accent-light);--gw-accent-strong: var(--gw-accent-strong-light);--gw-accent-soft: var(--gw-accent-soft-light);--gw-on-accent: var(--gw-on-accent-light);--gw-success: #007f5f;--gw-success-soft: #e3f1df;--gw-warning: #9a6700;--gw-night: #0c0e14;--gw-night-2: #141722;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}.gw-band--night,.gw-showcase{color-scheme: dark;--gw-bg: var(--gw-night);--gw-bg-soft: var(--gw-night-2);--gw-surface: var(--gw-night-2);--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341}:root[data-gw-action="accent"],:root[data-gw-action="accent"] :is(.gw-band--night,.gw-showcase){--gw-action: var(--gw-accent);--gw-action-hover: var(--gw-accent-strong);--gw-on-action: var(--gw-on-accent)}:root[data-gw-radius="soft"]{--gw-radius-action: 12px;--gw-radius-card: 20px;--gw-radius-panel: 24px;--gw-radius-popover: 24px},::before,::after{box-sizing: border-box}[hidden]{display: none !important}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%}body{margin: 0;background: var(--gw-bg);color: var(--gw-ink);font-family: var(--gw-font);font-size: var(--gw-body-size);line-height: var(--gw-body-leading);-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility}:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote){margin: 0}img,svg,video{display: block;max-width: 100%}img,video{height: auto}button,input,select,textarea{font: inherit;color: inherit}button{cursor: pointer}a{color: inherit;text-decoration: none}b,strong{font-weight: 600}.gw-page{display: flex;flex-direction: column;min-height: 100vh;min-height: 100dvh}.gw-page > main{flex: 1 0 auto}h1,h2,h3,h4,h5,h6,.gw-h1,.gw-h2,.gw-h3,.gw-h4{font-weight: var(--gw-heading-weight);letter-spacing: var(--gw-heading-tracking);line-height: var(--gw-heading-leading);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}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-note{font-size: 14px;color: var(--gw-muted)}.gw-dim{color: var(--gw-muted)}.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)}:where(p,dd,td,figcaption,.gw-list--check li,.gw-prose) a:not([class]),.gw-link{color: var(--gw-accent-strong);font-weight: 500;text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 4px;text-decoration-color: color-mix(in srgb,currentColor 40%,transparent)}: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}[id]{scroll-margin-top: calc(var(--gw-header-height) + 16px)}.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);font-size: 14px;font-weight: 600}.gw-skip:focus{left: 16px}.gw-reveal{opacity: 0;transform: translateY(24px);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}.gw-reveal.is-in{opacity: 1;transform: none}@keyframes gw-reveal-failsafe{to{opacity: 1;transform: none}}@media (prefers-reduced-motion: reduce){,::before,::after{scroll-behavior: auto !important}.gw-reveal{opacity: 1;transform: none;transition: none;animation: none}}.gw-wrap,.gw-wrap--narrow{width: min(100% - 2 * var(--gw-gutter),var(--gw-wrap));margin-inline: auto}.gw-wrap--narrow{max-width: var(--gw-wrap-narrow)}.gw-section{padding-block: var(--gw-space-section)}.gw-section--soft{background: var(--gw-bg-soft)}.gw-section--tight{padding-block: 40px}@media (min-width: 768px){.gw-section--tight{padding-block: 64px}}.gw-section__head{max-width: 660px}.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}}: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}.gw-actions{display: flex;flex-wrap: wrap;align-items: center;gap: 12px}.gw-grid,.gw-grid--2,.gw-grid--3,.gw-grid--4{display: grid;grid-template-columns: minmax(0,1fr);gap: 16px}@media (min-width: 480px){.gw-grid--4{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 768px){.gw-grid,.gw-grid--2,.gw-grid--3,.gw-grid--4{gap: 24px}.gw-grid--2{grid-template-columns: repeat(2,minmax(0,1fr))}.gw-grid--3{grid-template-columns: repeat(3,minmax(0,1fr))}}@media (min-width: 1080px){.gw-grid--4{grid-template-columns: repeat(4,minmax(0,1fr))}}.gw-band--night,.gw-showcase{position: relative;isolation: isolate;color: var(--gw-ink);background: radial-gradient(800px 360px at 50% 0%,color-mix(in srgb,var(--gw-accent) 22%,transparent),transparent 72%),var(--gw-night)}.gw-btn{position: relative;display: inline-flex;align-items: center;justify-content: center;gap: 8px;max-width: 100%;height: var(--gw-button-height);padding: 0 20px;border: 1px solid transparent;border-radius: var(--gw-radius-action);background: var(--gw-action);color: var(--gw-on-action);font-size: 14px;font-weight: 600;line-height: 1.4;letter-spacing: 0;text-align: center;white-space: nowrap;cursor: pointer}.gw-btn:hover{background: var(--gw-action-hover)}.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--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%}.gw-btn:disabled,.gw-btn[aria-disabled="true"]{opacity: 0.48;cursor: not-allowed;pointer-events: none}.gw-btn:active{background: var(--gw-action-hover)}.gw-btn--secondary:active{background: var(--gw-bg-soft);border-color: var(--gw-ink)}.gw-btn--ghost:active{background: var(--gw-line)}.gw-btn--on-night:active{background: var(--gw-on-night);opacity: 0.76}.gw-btn[aria-busy="true"]{cursor: progress;-webkit-text-fill-color: transparent}.gw-btn[aria-busy="true"] svg{opacity: 0}.gw-btn[aria-busy="true"]::before{content: "";position: absolute;top: 50%;left: 50%;width: 16px;height: 16px;margin: -8px 0 0 -8px;border: 2px solid color-mix(in srgb,currentColor 18%,transparent);border-top-color: currentColor;border-radius: var(--gw-radius-chip);animation: gw-spin var(--gw-spin-ms) linear infinite}@keyframes gw-spin{to{transform: rotate(360deg)}}@media (prefers-reduced-motion: reduce){.gw-btn[aria-busy="true"]::before{border: 0;border-radius: var(--gw-radius-0);background: radial-gradient(circle at 3px 50%,currentColor 1.5px,transparent 2px),radial-gradient(circle at 8px 50%,currentColor 1.5px,transparent 2px),radial-gradient(circle at 13px 50%,currentColor 1.5px,transparent 2px);animation: none}}.gw-link--arrow{display: inline-flex;align-items: center;gap: 6px;min-height: 24px;font-weight: 600;text-decoration: none}.gw-link--arrow::after{content: "\2192";transition: transform 0.18s var(--gw-ease)}.gw-link--arrow:hover::after{transform: translateX(2px)}.gw-chip{display: inline-flex;align-items: center;gap: 6px;min-height: 32px;padding: 4px 12px;border: 1px solid var(--gw-line-strong);border-radius: var(--gw-radius-chip);background: var(--gw-surface);color: var(--gw-ink-2);font-size: 13px;font-weight: 500;line-height: 1.4;white-space: nowrap}:is(a,button,label).gw-chip{cursor: pointer}:is(a,button,label).gw-chip:hover{border-color: var(--gw-ink);color: var(--gw-ink)}.gw-chip.is-active,.gw-chip[aria-pressed="true"],.gw-chip[aria-selected="true"]{border-color: var(--gw-accent);background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-segmented{display: inline-flex;max-width: 100%;border: 1px solid var(--gw-line-strong);border-radius: var(--gw-radius-action);background: var(--gw-surface);overflow: hidden;overflow: clip;vertical-align: middle}.gw-segmented--block{display: flex;width: 100%}.gw-segmented > button{display: inline-flex;flex: 0 1 auto;align-items: center;justify-content: center;min-width: 0;height: calc(var(--gw-button-height) - 2px);padding: 0 16px;border: 0;background: transparent;color: var(--gw-muted);font-size: 14px;font-weight: 500;line-height: 1.4;white-space: nowrap;cursor: pointer}.gw-segmented--block > button{flex: 1 1 0}.gw-segmented > button + button{border-left: 1px solid var(--gw-line-strong)}.gw-segmented > button:hover{background: var(--gw-bg-soft);color: var(--gw-ink)}.gw-segmented > button:active{background: var(--gw-line)}.gw-segmented > button:focus-visible{outline-offset: -2px}.gw-segmented > button[aria-checked="true"]{background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-badge{display: inline-flex;align-items: center;gap: 6px;min-height: 24px;padding: 2px 8px;border-radius: var(--gw-radius-chip);background: color-mix(in srgb,var(--gw-ink) 8%,transparent);color: var(--gw-ink-2);font-size: 12px;font-weight: 500;line-height: 1.4;white-space: nowrap;vertical-align: middle}.gw-badge--accent{background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-badge--success{background: var(--gw-success-soft);color: var(--gw-ink)}.gw-badge--success::before,.gw-badge--warning::before{content: "";flex: none;width: 6px;height: 6px;border-radius: var(--gw-radius-chip);background: var(--gw-success)}.gw-badge--warning::before{background: var(--gw-warning)}.gw-card{padding: 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);box-shadow: var(--gw-shadow)}@media (min-width: 768px){.gw-card{padding: 32px}}.gw-card--soft{background: var(--gw-bg-soft);box-shadow: none}.gw-card--link{display: block;color: inherit}.gw-card--link:hover{border-color: var(--gw-line-strong)}:where(.gw-card,.gw-feature,.gw-plan) > :is(h3,h4) + p{margin-top: 8px}:where(.gw-card,.gw-feature) h3{font-size: 20px}:where(.gw-card,.gw-feature) p{font-size: 16px;color: var(--gw-muted)}.gw-window{overflow: hidden;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);color: var(--gw-ink);box-shadow: var(--gw-shadow);font-size: 13px;line-height: 1.5}.gw-window__bar{display: flex;align-items: center;gap: 12px;min-height: 40px;padding: 8px 16px;border-bottom: 1px solid var(--gw-line);color: var(--gw-muted);font-size: 12px}.gw-window__bar::before{content: "";flex: none;width: 36px;height: 8px;background: radial-gradient(circle at 4px 4px,var(--gw-line-strong) 4px,transparent 4px),radial-gradient(circle at 18px 4px,var(--gw-line-strong) 4px,transparent 4px),radial-gradient(circle at 32px 4px,var(--gw-line-strong) 4px,transparent 4px)}.gw-window__body{padding: 16px}.gw-window__body:has(> img:only-child){padding: 0}.gw-window__body > img{width: 100%}.gw-window__caption{margin: 0;padding: 0 16px 12px;color: var(--gw-muted);font-size: 12px;line-height: 1.5;text-align: end}.gw-window__body:has(> img:only-child) + .gw-window__caption{padding-top: 12px}.gw-icon{display: inline-flex;align-items: center;justify-content: center;flex: none;width: 20px;height: 20px}.gw-icon svg{width: 20px;height: 20px}.gw-list--check{display: grid;gap: 12px;padding: 0;list-style: none}.gw-list--check > li{position: relative;padding-left: 24px}.gw-list--check > li::before{content: "";position: absolute;left: 0;top: 6px;top: calc((1lh - 16px) / 2);width: 16px;height: 16px;background: var(--gw-accent);-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat}.gw-table{overflow-x: auto;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);-webkit-overflow-scrolling: touch}.gw-table table{width: 100%;border-collapse: collapse;font-size: 14px;line-height: 1.5}.gw-table caption{padding: 16px;text-align: left;font-size: 13px;color: var(--gw-muted)}.gw-table th,.gw-table td{padding: 12px 16px;border-bottom: 1px solid var(--gw-line);text-align: left;vertical-align: top}.gw-table thead th{background: var(--gw-bg-soft);color: var(--gw-ink);font-size: 13px;font-weight: 600;white-space: nowrap}.gw-table tbody th{font-weight: 500}.gw-table tbody tr:last-child > {border-bottom: 0}.gw-table td{color: var(--gw-ink-2);font-variant-numeric: tabular-nums}.gw-table--compare table{min-width: 640px}.gw-table--compare td{text-align: center}.gw-table--compare thead th:not(:first-child){text-align: center}.gw-table--compare tbody th{position: sticky;left: 0;z-index: 1;background: var(--gw-surface);min-width: 160px}.gw-faq{display: grid;gap: 12px}.gw-faq__item{padding: 0 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface)}.gw-faq__item[open]{border-color: var(--gw-line-strong)}.gw-faq__item > summary{display: flex;align-items: center;justify-content: space-between;gap: 16px;min-height: 44px;padding: 20px 0;font-size: 18px;font-weight: 600;line-height: 1.4;list-style: none;cursor: pointer}.gw-faq__item > summary::-webkit-details-marker{display: none}.gw-faq__item > summary::after{content: "";flex: none;width: 16px;height: 16px;background: linear-gradient(var(--gw-accent),var(--gw-accent)) center / 16px 2px no-repeat,linear-gradient(var(--gw-accent),var(--gw-accent)) center / 2px 16px no-repeat;transition: transform 0.2s var(--gw-ease)}.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}@media (max-width: 768px),(pointer: coarse){.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}: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}}.gw-announce{padding: 8px var(--gw-gutter);border-bottom: 1px solid var(--gw-line);background: var(--gw-bg-soft);color: var(--gw-ink-2);font-size: 13px;line-height: 1.5;text-align: center}.gw-announce a{color: var(--gw-ink);font-weight: 600;text-decoration: underline;text-underline-offset: 4px}.gw-header{position: sticky;top: 0;z-index: 50;border-bottom: 1px solid var(--gw-line);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)}.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;white-space: nowrap}.gw-brand__mark{flex: none;width: 26px;height: 26px}.gw-brand__name{line-height: 1.2}.gw-nav{display: none}.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;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;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)}.gw-nav__trigger::after,.gw-mobile-menu__group > summary::after{content: "";flex: none;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;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}.gw-mega{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)}.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)}.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)}.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}.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{display: inline-flex;align-items: center;justify-content: center;flex: none;width: 40px;height: 40px;padding: 0;border: 0;border-radius: var(--gw-radius-action);background: transparent;color: var(--gw-ink)}.gw-theme-toggle:hover,.gw-menu-toggle:hover{background: var(--gw-bg-soft)}.gw-theme-toggle svg,.gw-menu-toggle svg{width: 20px;height: 20px}.gw-menu-toggle[aria-expanded="true"] .gw-menu-toggle__open,.gw-menu-toggle:not([aria-expanded="true"]) .gw-menu-toggle__close{display: none}.gw-mobile-menu{position: fixed;top: calc(var(--gw-header-height) + 1px);left: 0;right: 0;bottom: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: 8px 32px;background: var(--gw-bg)}html.is-menu-open{overflow: hidden}html.is-menu-open .gw-header{position: fixed;top: 0;left: 0;right: 0}.gw-mobile-menu__group > summary,.gw-mobile-menu__top{display: flex;align-items: center;justify-content: space-between;min-height: 48px;padding-block: 8px;border-bottom: 1px solid var(--gw-line);color: var(--gw-ink);font-size: 18px;font-weight: 500;list-style: none;cursor: pointer}.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){.gw-header__actions > .gw-btn:not(.gw-btn--secondary){display: inline-flex}}@media (min-width: 768px){.gw-header__actions > .gw-btn--secondary{display: inline-flex}}@media (min-width: 1080px){.gw-header__bar{gap: 32px}.gw-nav{display: block}.gw-header__signin{display: inline-flex}.gw-menu-toggle,.gw-mobile-menu{display: none !important}html.is-menu-open{overflow: visible}html.is-menu-open .gw-header{position: sticky}}@media (max-width: 768px),(pointer: coarse){.gw-theme-toggle,.gw-menu-toggle{width: var(--gw-tap-min);height: var(--gw-tap-min)}}@media (min-width: 1080px){.gw-header--float{top: var(--gw-header-gap);width: min(100% - 32px,var(--gw-wrap) + 50px);margin: var(--gw-header-gap) auto 0;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-panel);background: color-mix(in srgb,var(--gw-surface) var(--gw-header-surface),transparent);-webkit-backdrop-filter: blur(var(--gw-header-blur));backdrop-filter: blur(var(--gw-header-blur));box-shadow: var(--gw-shadow-raised)}.gw-header--float.is-scrolled{border-color: var(--gw-line-strong)}.gw-header--float > .gw-header__bar{width: auto;padding-inline: 24px}.gw-header--float .gw-mega{max-height: calc(100vh - var(--gw-header-height) - var(--gw-header-gap) - 24px)}: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){.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))){.gw-header--float{background: var(--gw-surface)}}.gw-footer{padding-block: 64px 40px;border-top: 1px solid var(--gw-line);background: var(--gw-bg);color: var(--gw-ink);font-size: 14px}.gw-footer__grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 32px 24px}.gw-footer__brand{grid-column: 1 / -1;max-width: 320px}.gw-footer__brand p{margin-top: 16px;color: var(--gw-muted)}.gw-footer__heading{margin: 0 0 8px;color: var(--gw-ink);font-size: 13px;font-weight: 600;letter-spacing: 0}.gw-footer__col ul{margin: 0;padding: 0;list-style: none}.gw-footer__col a{display: block;padding-block: 6px;color: var(--gw-muted)}.gw-footer__col a:hover{color: var(--gw-ink)}.gw-footer__col a[aria-current="page"]{color: var(--gw-accent-strong)}.gw-footer__bottom{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 8px 24px;margin-top: 48px;padding-top: 24px;border-top: 1px solid var(--gw-line);color: var(--gw-muted);font-size: 13px}.gw-footer__bottom:first-child{margin-top: 0;padding-top: 0;border-top: 0}.gw-footer__bottom ul{display: flex;flex-wrap: wrap;gap: 0 16px;margin: 0;padding: 0;list-style: none}.gw-footer__bottom a{display: inline-flex;align-items: center;justify-content: center;min-width: 24px;min-height: 24px;color: var(--gw-muted)}.gw-footer__bottom a:hover{color: var(--gw-ink)}@media (min-width: 768px){.gw-footer__grid{grid-template-columns: repeat(3,minmax(0,1fr))}}@media (min-width: 1080px){.gw-footer__grid{grid-auto-flow: column;grid-template-columns: minmax(0,1.6fr);grid-auto-columns: minmax(0,1fr)}.gw-footer__brand{grid-column: auto}}@media (max-width: 768px),(pointer: coarse){.gw-footer__bottom a{min-height: var(--gw-tap-min)}}.gw-hero{position: relative;isolation: isolate;padding-block: 48px 64px}.gw-hero__wash{position: absolute;inset: 0;z-index: -1;pointer-events: none;background: radial-gradient(640px 460px at 88% -10%,color-mix(in srgb,var(--gw-accent) 16%,transparent),transparent 62%),radial-gradient(560px 480px at 6% 108%,color-mix(in srgb,var(--gw-wash-violet) 12%,transparent),transparent 62%),radial-gradient(420px 320px at 52% 118%,color-mix(in srgb,var(--gw-wash-mint) 10%,transparent),transparent 62%)}.gw-hero h1 .gw-dim{display: block}.gw-hero > .gw-wrap > .gw-window{margin-top: 48px}.gw-hero--center{text-align: center}.gw-hero--center > .gw-wrap > {margin-inline: auto}.gw-hero--center .gw-actions{justify-content: center}.gw-hero--compact{padding-block: 40px 48px}.gw-hero--compact h1{font-size: var(--gw-display-h2)}@media (min-width: 768px){.gw-hero{padding-block: 80px 96px}.gw-hero--compact{padding-block: 64px}.gw-hero .gw-lead{font-size: 20px}.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%}}.gw-logos{padding-block: 40px;border-block: 1px solid var(--gw-line)}.gw-logos p{color: var(--gw-muted);font-size: 13px;text-align: center}.gw-logos ul{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 16px 40px;margin-top: 20px;padding: 0;list-style: none}.gw-logos li{color: var(--gw-muted);font-size: 22px;font-weight: 600;letter-spacing: -0.02em;line-height: 1.2}.gw-logos img{width: auto;height: 28px}.gw-stats{display: grid;grid-template-columns: minmax(0,1fr);gap: 24px;margin: 0;padding: 0;list-style: none}.gw-stats__value{font-size: var(--gw-display-h2);font-weight: 600;letter-spacing: -0.03em;line-height: 1.1;font-variant-numeric: tabular-nums}.gw-stats__label{margin-top: 8px;max-width: 28ch;color: var(--gw-muted);font-size: 14px}.gw-stats__source{margin-top: 8px;color: var(--gw-muted);font-size: 12px}@media (min-width: 480px){.gw-stats{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 1080px){.gw-stats{grid-template-columns: none;grid-auto-flow: column;grid-auto-columns: minmax(0,1fr);gap: 0}.gw-stats__item{padding: 4px 24px;border-left: 1px solid var(--gw-line)}.gw-stats__item:first-child{padding-left: 0;border-left: 0}}.gw-features{row-gap: 40px}.gw-feature .gw-icon{width: 40px;height: 40px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-action);background: var(--gw-surface);color: var(--gw-accent)}.gw-split{display: grid;grid-template-columns: minmax(0,1fr);align-items: center;gap: 40px}@media (min-width: 768px){.gw-split{grid-template-columns: repeat(2,minmax(0,1fr))}.gw-split--reverse > :first-child{order: 2}}.gw-split h2{font-size: 30px}@media (min-width: 1080px){.gw-split{gap: 64px}}.gw-showcase .gw-window{max-width: 960px;margin-inline: auto}.gw-showcase .gw-window + {margin-top: 48px}.gw-steps{display: grid;grid-template-columns: minmax(0,1fr);gap: 32px 24px;margin: 0;padding: 0;list-style: none;counter-reset: gw-step}.gw-steps > li{counter-increment: gw-step}.gw-steps > li::before{content: counter(gw-step,decimal-leading-zero);display: block;margin-bottom: 16px;padding-bottom: 12px;border-bottom: 1px solid var(--gw-line);color: var(--gw-accent-strong);font-size: 13px;font-weight: 600;font-variant-numeric: tabular-nums}.gw-steps h3{font-size: 20px}.gw-steps p{margin-top: 8px;color: var(--gw-muted);font-size: 16px}@media (min-width: 768px){.gw-steps{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 1080px){.gw-steps{grid-template-columns: none;grid-auto-flow: column;grid-auto-columns: minmax(0,1fr)}}.gw-quote{max-width: 880px;margin-inline: auto;padding: 40px 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-panel);background: var(--gw-surface);text-align: center}.gw-quote::before{content: "";display: block;width: 32px;height: 24px;margin: 0 auto 24px;background: var(--gw-accent);-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V14C0 6 4 1 12 0l1 4c-4 1-6 4-6 8h5v12zm19 0V14c0-8 4-13 12-14l1 4c-4 1-6 4-6 8h5v12z'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V14C0 6 4 1 12 0l1 4c-4 1-6 4-6 8h5v12zm19 0V14c0-8 4-13 12-14l1 4c-4 1-6 4-6 8h5v12z'/%3E%3C/svg%3E") center / contain no-repeat}.gw-quote blockquote{font-size: 24px;font-weight: 500;line-height: 1.4;letter-spacing: -0.01em;text-wrap: balance}.gw-quote figcaption{margin-top: 24px;color: var(--gw-muted);font-size: 14px}.gw-quote figcaption b{color: var(--gw-ink)}.gw-quote figcaption img{width: 40px;height: 40px;margin: 0 auto 12px;border-radius: var(--gw-radius-chip)}@media (min-width: 768px){.gw-quote{padding: 64px}.gw-quote blockquote{font-size: 30px}}.gw-pricing{display: grid;grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));align-items: start;gap: 16px}.gw-plan{display: flex;flex-direction: column;padding: 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-panel);background: var(--gw-surface);box-shadow: var(--gw-shadow)}.gw-plan--featured{border-color: var(--gw-accent)}.gw-plan{position: relative}.gw-plan > .gw-badge{align-self: flex-start}.gw-plan > .gw-badge:first-child{position: absolute;top: -12px;left: 24px}.gw-plan > .gw-badge:first-child + {margin-top: 0}.gw-plan h3{font-size: 20px}:where(.gw-plan) p{color: var(--gw-muted);font-size: 14px}.gw-plan__price{display: flex;flex-wrap: wrap;align-items: baseline;gap: 6px;color: var(--gw-ink);font-size: var(--gw-display-h2);font-weight: 600;letter-spacing: -0.03em;line-height: 1.1;font-variant-numeric: tabular-nums}.gw-plan__price small{color: var(--gw-muted);font-size: 14px;font-weight: 500;letter-spacing: 0}.gw-plan .gw-list--check{font-size: 14px}@media (min-width: 768px){.gw-plan{padding: 32px}.gw-plan > .gw-badge:first-child{left: 32px}}.gw-cta{max-width: 780px;margin-inline: auto;text-align: center}.gw-cta .gw-lead{margin-inline: auto}.gw-cta .gw-actions{justify-content: center}.gw-prose{max-width: 68ch;min-width: 0;color: var(--gw-ink);font-size: var(--gw-body-size);line-height: var(--gw-body-leading);overflow-wrap: break-word}.gw-prose--sm{font-size: 16px}:where(.gw-prose) > + {margin-top: 20px}:where(.gw-prose--sm) > + {margin-top: 16px}:where(.gw-prose) > + :where(figure,img,video,pre,table,hr,.gw-table,.gw-window),:where(.gw-prose) > :where(figure,img,video,pre,table,hr,.gw-table,.gw-window) + {margin-top: 32px}:where(.gw-prose) > + h2{margin-top: 48px}:where(.gw-prose) > * + h3{margin-top: 40px}:where(.gw-prose) > * + h4{margin-top: 32px}:where(.gw-prose--sm) > * + h2{margin-top: 40px}:where(.gw-prose--sm) > * + h3{margin-top: 32px}:where(.gw-prose--sm) > * + h4{margin-top: 24px}:where(.gw-prose) > h1 + {margin-top: 24px}:where(.gw-prose) > :is(h2,h3,h4) + {margin-top: 12px}:where(.gw-prose) > :is(h1,h2,h3,h4){color: var(--gw-ink);font-weight: var(--gw-heading-weight);letter-spacing: var(--gw-heading-tracking);line-height: 1.25}:where(.gw-prose) > h1{font-size: var(--gw-display-h2);font-weight: var(--gw-display-weight);letter-spacing: var(--gw-display-tracking);line-height: var(--gw-heading-leading)}:where(.gw-prose) > h2{font-size: 30px;line-height: 1.2}:where(.gw-prose) > h3{font-size: 24px}:where(.gw-prose) > h4{font-size: 20px}:where(.gw-prose--sm) > h2{font-size: 24px}:where(.gw-prose--sm) > h3{font-size: 20px}:where(.gw-prose--sm) > h4{font-size: 18px}:where(.gw-prose :is(ul,ol):not([class])){padding-left: 24px}:where(.gw-prose ul:not([class])){list-style: disc}:where(.gw-prose ol:not([class])){list-style: decimal}:where(.gw-prose :is(ul,ol):not([class]) > li + li),:where(.gw-prose :is(ul,ol):not([class]) > li > * + ),:where(.gw-prose :is(ul,ol):not([class]) > li > :is(ul,ol)){margin-top: 8px}:where(.gw-prose :is(ul,ol):not([class]) > li)::marker{color: var(--gw-muted);font-variant-numeric: tabular-nums}:where(.gw-prose) > blockquote{padding-left: 20px;border-left: 3px solid var(--gw-line-strong);color: var(--gw-muted)}:where(.gw-prose) > blockquote > + {margin-top: 12px}:where(.gw-prose) > hr{height: 0;border: 0;border-top: 1px solid var(--gw-line)}:where(.gw-prose) :is(sup,sub){line-height: 0}:where(.gw-prose) :is(pre,code,kbd,samp){font-family: var(--gw-font-mono)}:where(.gw-prose) code{padding: 2px 6px;border-radius: var(--gw-radius-6);background: color-mix(in srgb,var(--gw-ink) 8%,transparent);color: var(--gw-ink);font-size: 16px;overflow-wrap: anywhere;-webkit-box-decoration-break: clone;box-decoration-break: clone}:where(.gw-prose--sm) code{font-size: 14px}:where(.gw-prose) :is(h1,h2,h3,h4) code{font-size: inherit}:where(.gw-prose) figcaption code{font-size: 13px}:where(.gw-prose) :is(th,td) code{font-size: 13px;overflow-wrap: normal;white-space: nowrap}:where(.gw-prose) pre{overflow-x: auto;padding: 16px 20px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-bg-soft);color: var(--gw-ink);font-size: 14px;line-height: 1.6;tab-size: 2}:where(.gw-prose) pre code{padding: 0;border-radius: var(--gw-radius-0);background: none;font-size: inherit;overflow-wrap: normal}:where(.gw-prose) > :is(img,video),:where(.gw-prose) > :is(p,figure) > :is(img,video){border-radius: var(--gw-radius-card)}:where(.gw-prose) figcaption{margin-top: 12px;color: var(--gw-muted);font-size: 14px;line-height: 1.5}:where(.gw-prose) > table{display: block;width: max-content;max-width: 100%;overflow-x: auto;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);border-collapse: collapse;font-size: 14px;line-height: 1.5;-webkit-overflow-scrolling: touch}:where(.gw-prose) > table :is(th,td){padding: 12px 16px;border-bottom: 1px solid var(--gw-line);text-align: left;vertical-align: top}:where(.gw-prose) > table thead th{background: var(--gw-bg-soft);color: var(--gw-ink);font-size: 13px;font-weight: 600;white-space: nowrap}:where(.gw-prose) > table tbody th{font-weight: 500}:where(.gw-prose) > table td{color: var(--gw-ink-2);font-variant-numeric: tabular-nums}:where(.gw-prose) > table tbody tr:last-child > {border-bottom: 0}:where(.gw-prose) > table caption{padding: 12px 16px;color: var(--gw-muted);font-size: 13px;text-align: left}@media (max-width: 767px){:where(.gw-prose) > table td{min-width: 160px}}
1	+ /! @gemboss/website-ui 0.4.0 \| generated by scripts/build.mjs from the files in css/. Edit those and not this file / :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-text-11: 11px;--gw-text-12: 12px;--gw-text-13: 13px;--gw-text-14: 14px;--gw-text-16: 16px;--gw-text-18: 18px;--gw-text-20: 20px;--gw-text-22: 22px;--gw-text-24: 24px;--gw-text-30: 30px;--gw-display-h1: clamp(40px,4.6vw,68px);--gw-display-h2: clamp(32px,3.4vw,52px);--gw-display-weight: 600;--gw-display-tracking: -0.03em;--gw-heading-weight: 650;--gw-heading-tracking: -0.022em;--gw-heading-leading: 1.08;--gw-body-size: 18px;--gw-body-leading: 1.6;--gw-space-0: 0;--gw-space-2: 2px;--gw-space-4: 4px;--gw-space-6: 6px;--gw-space-8: 8px;--gw-space-12: 12px;--gw-space-16: 16px;--gw-space-20: 20px;--gw-space-24: 24px;--gw-space-32: 32px;--gw-space-40: 40px;--gw-space-48: 48px;--gw-space-64: 64px;--gw-space-80: 80px;--gw-space-96: 96px;--gw-space-120: 120px;--gw-space-section: clamp(56px,38px + 5vw,110px);--gw-radius-0: 0;--gw-radius-4: 4px;--gw-radius-6: 6px;--gw-radius-8: 8px;--gw-radius-12: 12px;--gw-radius-16: 16px;--gw-radius-20: 20px;--gw-radius-24: 24px;--gw-radius-999: 999px;--gw-radius-action: 8px;--gw-radius-chip: 999px;--gw-radius-card: 12px;--gw-radius-panel: 16px;--gw-radius-popover: 20px;--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-wrap: 1120px;--gw-wrap-narrow: 780px;--gw-gutter: 22px;--gw-header-height: 64px;--gw-header-gap: 16px;--gw-header-surface: 85%;--gw-header-blur: 10px;--gw-button-height: 40px;--gw-tap-min: 44px;--gw-ease: cubic-bezier(.22,1,.36,1);--gw-reveal-ms: 700ms;--gw-spin-ms: 700ms;--gw-wash-pink: #ff6f5e;--gw-wash-violet: #7c8af7;--gw-wash-sky: #43b0ff;--gw-wash-mint: #1fcf9f;--gw-accent-light: #5661f5;--gw-accent-strong-light: #3a44de;--gw-accent-soft-light: #eef0fe;--gw-on-accent-light: #ffffff;--gw-accent-dark: #7c84ff;--gw-accent-strong-dark: #a3a9ff;--gw-accent-soft-dark: #1f2140;--gw-on-accent-dark: #0d0d12;--gw-bg: #ffffff;--gw-bg-soft: #f2f3f5;--gw-surface: #ffffff;--gw-ink: #1b1c1e;--gw-ink-2: #3b3d42;--gw-muted: #686b71;--gw-line: #e5e7ea;--gw-line-strong: #d5d8dd;--gw-action: #1b1c1e;--gw-action-hover: #000000;--gw-on-action: #ffffff;--gw-accent: var(--gw-accent-light);--gw-accent-strong: var(--gw-accent-strong-light);--gw-accent-soft: var(--gw-accent-soft-light);--gw-on-accent: var(--gw-on-accent-light);--gw-success: #007f5f;--gw-success-soft: #e3f1df;--gw-warning: #9a6700;--gw-night: #0c0e14;--gw-night-2: #141722;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){color-scheme: dark;--gw-bg: #0d0d12;--gw-bg-soft: #121318;--gw-surface: #16171d;--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341;--gw-night: #0a0b10;--gw-night-2: #12141c;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}}:root[data-theme="dark"]{color-scheme: dark;--gw-bg: #0d0d12;--gw-bg-soft: #121318;--gw-surface: #16171d;--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341;--gw-night: #0a0b10;--gw-night-2: #12141c;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}:root[data-theme="light"]{color-scheme: light;--gw-bg: #ffffff;--gw-bg-soft: #f2f3f5;--gw-surface: #ffffff;--gw-ink: #1b1c1e;--gw-ink-2: #3b3d42;--gw-muted: #686b71;--gw-line: #e5e7ea;--gw-line-strong: #d5d8dd;--gw-action: #1b1c1e;--gw-action-hover: #000000;--gw-on-action: #ffffff;--gw-accent: var(--gw-accent-light);--gw-accent-strong: var(--gw-accent-strong-light);--gw-accent-soft: var(--gw-accent-soft-light);--gw-on-accent: var(--gw-on-accent-light);--gw-success: #007f5f;--gw-success-soft: #e3f1df;--gw-warning: #9a6700;--gw-night: #0c0e14;--gw-night-2: #141722;--gw-on-night: #e3e4e8;--gw-on-night-muted: #9aa3ff}.gw-band--night,.gw-showcase{color-scheme: dark;--gw-bg: var(--gw-night);--gw-bg-soft: var(--gw-night-2);--gw-surface: var(--gw-night-2);--gw-ink: #e3e4e8;--gw-ink-2: #c4c6cc;--gw-muted: #9a9ca6;--gw-line: #2a2b33;--gw-line-strong: #383944;--gw-action: #f2f3f5;--gw-action-hover: #ffffff;--gw-on-action: #0d0d12;--gw-accent: var(--gw-accent-dark);--gw-accent-strong: var(--gw-accent-strong-dark);--gw-accent-soft: var(--gw-accent-soft-dark);--gw-on-accent: var(--gw-on-accent-dark);--gw-success: #34c38f;--gw-success-soft: #132a22;--gw-warning: #e0b341}:root[data-gw-action="accent"],:root[data-gw-action="accent"] :is(.gw-band--night,.gw-showcase){--gw-action: var(--gw-accent);--gw-action-hover: var(--gw-accent-strong);--gw-on-action: var(--gw-on-accent)}:root[data-gw-radius="soft"]{--gw-radius-action: 12px;--gw-radius-card: 20px;--gw-radius-panel: 24px;--gw-radius-popover: 24px},::before,::after{box-sizing: border-box}[hidden]{display: none !important}html{-webkit-text-size-adjust: 100%;text-size-adjust: 100%}body{margin: 0;background: var(--gw-bg);color: var(--gw-ink);font-family: var(--gw-font);font-size: var(--gw-body-size);line-height: var(--gw-body-leading);-webkit-font-smoothing: antialiased;text-rendering: optimizeLegibility}:where(h1,h2,h3,h4,h5,h6,p,ul,ol,dl,dd,figure,blockquote){margin: 0}img,svg,video{display: block;max-width: 100%}img,video{height: auto}button,input,select,textarea{font: inherit;color: inherit}button{cursor: pointer}a{color: inherit;text-decoration: none}b,strong{font-weight: 600}.gw-page{display: flex;flex-direction: column;min-height: 100vh;min-height: 100dvh}.gw-page > main{flex: 1 0 auto}h1,h2,h3,h4,h5,h6,.gw-h1,.gw-h2,.gw-h3,.gw-h4{font-weight: var(--gw-heading-weight);letter-spacing: var(--gw-heading-tracking);line-height: var(--gw-heading-leading);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}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-note{font-size: 14px;color: var(--gw-muted)}.gw-dim{color: var(--gw-muted)}.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)}:where(p,dd,td,figcaption,.gw-list--check li,.gw-prose) a:not([class]),.gw-link{color: var(--gw-accent-strong);font-weight: 500;text-decoration: underline;text-decoration-thickness: 1px;text-underline-offset: 4px;text-decoration-color: color-mix(in srgb,currentColor 40%,transparent)}: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}[id]{scroll-margin-top: calc(var(--gw-header-height) + 16px)}.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);font-size: 14px;font-weight: 600}.gw-skip:focus{left: 16px}.gw-reveal{opacity: 0;transform: translateY(24px);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}.gw-reveal.is-in{opacity: 1;transform: none}@keyframes gw-reveal-failsafe{to{opacity: 1;transform: none}}@media (prefers-reduced-motion: reduce){,::before,::after{scroll-behavior: auto !important}.gw-reveal{opacity: 1;transform: none;transition: none;animation: none}}.gw-wrap,.gw-wrap--narrow{width: min(100% - 2 * var(--gw-gutter),var(--gw-wrap));margin-inline: auto}.gw-wrap--narrow{max-width: var(--gw-wrap-narrow)}.gw-section{padding-block: var(--gw-space-section)}.gw-section--soft{background: var(--gw-bg-soft)}.gw-section--tight{padding-block: 40px}@media (min-width: 768px){.gw-section--tight{padding-block: 64px}}.gw-section__head{max-width: 660px}.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}}: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}.gw-actions{display: flex;flex-wrap: wrap;align-items: center;gap: 12px}.gw-grid,.gw-grid--2,.gw-grid--3,.gw-grid--4{display: grid;grid-template-columns: minmax(0,1fr);gap: 16px}@media (min-width: 480px){.gw-grid--4{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 768px){.gw-grid,.gw-grid--2,.gw-grid--3,.gw-grid--4{gap: 24px}.gw-grid--2{grid-template-columns: repeat(2,minmax(0,1fr))}.gw-grid--3{grid-template-columns: repeat(3,minmax(0,1fr))}}@media (min-width: 1080px){.gw-grid--4{grid-template-columns: repeat(4,minmax(0,1fr))}}.gw-band--night,.gw-showcase{position: relative;isolation: isolate;color: var(--gw-ink);background: radial-gradient(800px 360px at 50% 0%,color-mix(in srgb,var(--gw-accent) 22%,transparent),transparent 72%),var(--gw-night)}.gw-btn{position: relative;display: inline-flex;align-items: center;justify-content: center;gap: 8px;max-width: 100%;height: var(--gw-button-height);padding: 0 20px;border: 1px solid transparent;border-radius: var(--gw-radius-action);background: var(--gw-action);color: var(--gw-on-action);font-size: 14px;font-weight: 600;line-height: 1.4;letter-spacing: 0;text-align: center;white-space: nowrap;cursor: pointer}.gw-btn:hover{background: var(--gw-action-hover)}.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--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%}.gw-btn:disabled,.gw-btn[aria-disabled="true"]{opacity: 0.48;cursor: not-allowed;pointer-events: none}.gw-btn:active{background: var(--gw-action-hover)}.gw-btn--secondary:active{background: var(--gw-bg-soft);border-color: var(--gw-ink)}.gw-btn--ghost:active{background: var(--gw-line)}.gw-btn--on-night:active{background: var(--gw-on-night);opacity: 0.76}.gw-btn[aria-busy="true"]{cursor: progress;-webkit-text-fill-color: transparent}.gw-btn[aria-busy="true"] svg{opacity: 0}.gw-btn[aria-busy="true"]::before{content: "";position: absolute;top: 50%;left: 50%;width: 16px;height: 16px;margin: -8px 0 0 -8px;border: 2px solid color-mix(in srgb,currentColor 18%,transparent);border-top-color: currentColor;border-radius: var(--gw-radius-chip);animation: gw-spin var(--gw-spin-ms) linear infinite}@keyframes gw-spin{to{transform: rotate(360deg)}}@media (prefers-reduced-motion: reduce){.gw-btn[aria-busy="true"]::before{border: 0;border-radius: var(--gw-radius-0);background: radial-gradient(circle at 3px 50%,currentColor 1.5px,transparent 2px),radial-gradient(circle at 8px 50%,currentColor 1.5px,transparent 2px),radial-gradient(circle at 13px 50%,currentColor 1.5px,transparent 2px);animation: none}}.gw-link--arrow{display: inline-flex;align-items: center;gap: 6px;min-height: 24px;font-weight: 600;text-decoration: none}.gw-link--arrow::after{content: "\2192";transition: transform 0.18s var(--gw-ease)}.gw-link--arrow:hover::after{transform: translateX(2px)}.gw-chip{display: inline-flex;align-items: center;gap: 6px;min-height: 32px;padding: 4px 12px;border: 1px solid var(--gw-line-strong);border-radius: var(--gw-radius-chip);background: var(--gw-surface);color: var(--gw-ink-2);font-size: 13px;font-weight: 500;line-height: 1.4;white-space: nowrap}:is(a,button,label).gw-chip{cursor: pointer}:is(a,button,label).gw-chip:hover{border-color: var(--gw-ink);color: var(--gw-ink)}.gw-chip.is-active,.gw-chip[aria-pressed="true"],.gw-chip[aria-selected="true"]{border-color: var(--gw-accent);background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-segmented{display: inline-flex;max-width: 100%;border: 1px solid var(--gw-line-strong);border-radius: var(--gw-radius-action);background: var(--gw-surface);overflow: hidden;overflow: clip;vertical-align: middle}.gw-segmented--block{display: flex;width: 100%}.gw-segmented > button{display: inline-flex;flex: 0 1 auto;align-items: center;justify-content: center;min-width: 0;height: calc(var(--gw-button-height) - 2px);padding: 0 16px;border: 0;background: transparent;color: var(--gw-muted);font-size: 14px;font-weight: 500;line-height: 1.4;white-space: nowrap;cursor: pointer}.gw-segmented--block > button{flex: 1 1 0}.gw-segmented > button + button{border-left: 1px solid var(--gw-line-strong)}.gw-segmented > button:hover{background: var(--gw-bg-soft);color: var(--gw-ink)}.gw-segmented > button:active{background: var(--gw-line)}.gw-segmented > button:focus-visible{outline-offset: -2px}.gw-segmented > button[aria-checked="true"]{background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-badge{display: inline-flex;align-items: center;gap: 6px;min-height: 24px;padding: 2px 8px;border-radius: var(--gw-radius-chip);background: color-mix(in srgb,var(--gw-ink) 8%,transparent);color: var(--gw-ink-2);font-size: 12px;font-weight: 500;line-height: 1.4;white-space: nowrap;vertical-align: middle}.gw-badge--accent{background: var(--gw-accent-soft);color: var(--gw-accent-strong)}.gw-badge--success{background: var(--gw-success-soft);color: var(--gw-ink)}.gw-badge--success::before,.gw-badge--warning::before{content: "";flex: none;width: 6px;height: 6px;border-radius: var(--gw-radius-chip);background: var(--gw-success)}.gw-badge--warning::before{background: var(--gw-warning)}.gw-card{padding: 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);box-shadow: var(--gw-shadow)}@media (min-width: 768px){.gw-card{padding: 32px}}.gw-card--soft{background: var(--gw-bg-soft);box-shadow: none}.gw-card--link{display: block;color: inherit}.gw-card--link:hover{border-color: var(--gw-line-strong)}:where(.gw-card,.gw-feature,.gw-plan) > :is(h3,h4) + p{margin-top: 8px}:where(.gw-card,.gw-feature) h3{font-size: 20px}:where(.gw-card,.gw-feature) p{font-size: 16px;color: var(--gw-muted)}.gw-window{overflow: hidden;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);color: var(--gw-ink);box-shadow: var(--gw-shadow);font-size: 13px;line-height: 1.5}.gw-window__bar{display: flex;align-items: center;gap: 12px;min-height: 40px;padding: 8px 16px;border-bottom: 1px solid var(--gw-line);color: var(--gw-muted);font-size: 12px}.gw-window__bar::before{content: "";flex: none;width: 36px;height: 8px;background: radial-gradient(circle at 4px 4px,var(--gw-line-strong) 4px,transparent 4px),radial-gradient(circle at 18px 4px,var(--gw-line-strong) 4px,transparent 4px),radial-gradient(circle at 32px 4px,var(--gw-line-strong) 4px,transparent 4px)}.gw-window__body{padding: 16px}.gw-window__body:has(> img:only-child){padding: 0}.gw-window__body > img{width: 100%}.gw-window__caption{margin: 0;padding: 0 16px 12px;color: var(--gw-muted);font-size: 12px;line-height: 1.5;text-align: end}.gw-window__body:has(> img:only-child) + .gw-window__caption{padding-top: 12px}.gw-icon{display: inline-flex;align-items: center;justify-content: center;flex: none;width: 20px;height: 20px}.gw-icon svg{width: 20px;height: 20px}.gw-list--check{display: grid;gap: 12px;padding: 0;list-style: none}.gw-list--check > li{position: relative;padding-left: 24px}.gw-list--check > li::before{content: "";position: absolute;left: 0;top: 6px;top: calc((1lh - 16px) / 2);width: 16px;height: 16px;background: var(--gw-accent);-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.4l2.9 2.8L12.5 5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat}.gw-table{overflow-x: auto;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);-webkit-overflow-scrolling: touch}.gw-table table{width: 100%;border-collapse: collapse;font-size: 14px;line-height: 1.5}.gw-table caption{padding: 16px;text-align: left;font-size: 13px;color: var(--gw-muted)}.gw-table th,.gw-table td{padding: 12px 16px;border-bottom: 1px solid var(--gw-line);text-align: left;vertical-align: top}.gw-table thead th{background: var(--gw-bg-soft);color: var(--gw-ink);font-size: 13px;font-weight: 600;white-space: nowrap}.gw-table tbody th{font-weight: 500}.gw-table tbody tr:last-child > {border-bottom: 0}.gw-table td{color: var(--gw-ink-2);font-variant-numeric: tabular-nums}.gw-table--compare table{min-width: 640px}.gw-table--compare td{text-align: center}.gw-table--compare thead th:not(:first-child){text-align: center}.gw-table--compare tbody th{position: sticky;left: 0;z-index: 1;background: var(--gw-surface);min-width: 160px}.gw-faq{display: grid;gap: 12px}.gw-faq__item{padding: 0 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface)}.gw-faq__item[open]{border-color: var(--gw-line-strong)}.gw-faq__item > summary{display: flex;align-items: center;justify-content: space-between;gap: 16px;min-height: 44px;padding: 20px 0;font-size: 18px;font-weight: 600;line-height: 1.4;list-style: none;cursor: pointer}.gw-faq__item > summary::-webkit-details-marker{display: none}.gw-faq__item > summary::after{content: "";flex: none;width: 16px;height: 16px;background: linear-gradient(var(--gw-accent),var(--gw-accent)) center / 16px 2px no-repeat,linear-gradient(var(--gw-accent),var(--gw-accent)) center / 2px 16px no-repeat;transition: transform 0.2s var(--gw-ease)}.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}@media (max-width: 768px),(pointer: coarse){.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}: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}}.gw-announce{padding: 8px var(--gw-gutter);border-bottom: 1px solid var(--gw-line);background: var(--gw-bg-soft);color: var(--gw-ink-2);font-size: 13px;line-height: 1.5;text-align: center}.gw-announce a{color: var(--gw-ink);font-weight: 600;text-decoration: underline;text-underline-offset: 4px}.gw-header{position: sticky;top: 0;z-index: 50;border-bottom: 1px solid var(--gw-line);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)}.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;white-space: nowrap}.gw-brand__mark{flex: none;width: 26px;height: 26px}.gw-brand__name{line-height: 1.2}.gw-nav{display: none}.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;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;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)}.gw-nav__trigger::after,.gw-mobile-menu__group > summary::after{content: "";flex: none;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;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}.gw-mega{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)}.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)}.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)}.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}.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{display: inline-flex;align-items: center;justify-content: center;flex: none;width: 40px;height: 40px;padding: 0;border: 0;border-radius: var(--gw-radius-action);background: transparent;color: var(--gw-ink)}.gw-theme-toggle:hover,.gw-menu-toggle:hover{background: var(--gw-bg-soft)}.gw-theme-toggle svg,.gw-menu-toggle svg{width: 20px;height: 20px}.gw-menu-toggle[aria-expanded="true"] .gw-menu-toggle__open,.gw-menu-toggle:not([aria-expanded="true"]) .gw-menu-toggle__close{display: none}.gw-mobile-menu{position: fixed;top: calc(var(--gw-header-height) + 1px);left: 0;right: 0;bottom: 0;overflow-y: auto;overscroll-behavior: contain;padding-block: 8px 32px;background: var(--gw-bg)}html.is-menu-open{overflow: hidden}html.is-menu-open .gw-header{position: fixed;top: 0;left: 0;right: 0}.gw-mobile-menu__group > summary,.gw-mobile-menu__top{display: flex;align-items: center;justify-content: space-between;min-height: 48px;padding-block: 8px;border-bottom: 1px solid var(--gw-line);color: var(--gw-ink);font-size: 18px;font-weight: 500;list-style: none;cursor: pointer}.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){.gw-header__actions > .gw-btn:not(.gw-btn--secondary){display: inline-flex}}@media (min-width: 768px){.gw-header__actions > .gw-btn--secondary{display: inline-flex}}@media (min-width: 1080px){.gw-header__bar{gap: 32px}.gw-nav{display: block}.gw-header__signin{display: inline-flex}.gw-menu-toggle,.gw-mobile-menu{display: none !important}html.is-menu-open{overflow: visible}html.is-menu-open .gw-header{position: sticky}}@media (max-width: 768px),(pointer: coarse){.gw-theme-toggle,.gw-menu-toggle{width: var(--gw-tap-min);height: var(--gw-tap-min)}}@media (min-width: 1080px){.gw-header--float{top: var(--gw-header-gap);width: min(100% - 32px,var(--gw-wrap) + 50px);margin: var(--gw-header-gap) auto 0;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-panel);background: color-mix(in srgb,var(--gw-surface) var(--gw-header-surface),transparent);-webkit-backdrop-filter: blur(var(--gw-header-blur));backdrop-filter: blur(var(--gw-header-blur));box-shadow: var(--gw-shadow-raised)}.gw-header--float.is-scrolled{border-color: var(--gw-line-strong)}.gw-header--float > .gw-header__bar{width: auto;padding-inline: 24px}.gw-header--float .gw-mega{max-height: calc(100vh - var(--gw-header-height) - var(--gw-header-gap) - 24px)}: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){.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))){.gw-header--float{background: var(--gw-surface)}}.gw-footer{padding-block: 64px 40px;border-top: 1px solid var(--gw-line);background: var(--gw-bg);color: var(--gw-ink);font-size: 14px}.gw-footer__grid{display: grid;grid-template-columns: repeat(2,minmax(0,1fr));gap: 32px 24px}.gw-footer__brand{grid-column: 1 / -1;max-width: 320px}.gw-footer__brand p{margin-top: 16px;color: var(--gw-muted)}.gw-footer__heading{margin: 0 0 8px;color: var(--gw-ink);font-size: 13px;font-weight: 600;letter-spacing: 0}.gw-footer__col ul{margin: 0;padding: 0;list-style: none}.gw-footer__col a{display: block;padding-block: 6px;color: var(--gw-muted)}.gw-footer__col a:hover{color: var(--gw-ink)}.gw-footer__col a[aria-current="page"]{color: var(--gw-accent-strong)}.gw-footer__bottom{display: flex;flex-wrap: wrap;align-items: center;justify-content: space-between;gap: 8px 24px;margin-top: 48px;padding-top: 24px;border-top: 1px solid var(--gw-line);color: var(--gw-muted);font-size: 13px}.gw-footer__bottom:first-child{margin-top: 0;padding-top: 0;border-top: 0}.gw-footer__bottom ul{display: flex;flex-wrap: wrap;gap: 0 16px;margin: 0;padding: 0;list-style: none}.gw-footer__bottom a{display: inline-flex;align-items: center;justify-content: center;min-width: 24px;min-height: 24px;color: var(--gw-muted)}.gw-footer__bottom a:hover{color: var(--gw-ink)}@media (min-width: 768px){.gw-footer__grid{grid-template-columns: repeat(3,minmax(0,1fr))}}@media (min-width: 1080px){.gw-footer__grid{grid-auto-flow: column;grid-template-columns: minmax(0,1.6fr);grid-auto-columns: minmax(0,1fr)}.gw-footer__brand{grid-column: auto}}@media (max-width: 768px),(pointer: coarse){.gw-footer__bottom a{min-height: var(--gw-tap-min)}}.gw-hero{position: relative;isolation: isolate;padding-block: 48px 64px}.gw-hero__wash{position: absolute;inset: 0;z-index: -1;pointer-events: none;background: radial-gradient(640px 460px at 88% -10%,color-mix(in srgb,var(--gw-accent) 16%,transparent),transparent 62%),radial-gradient(560px 480px at 6% 108%,color-mix(in srgb,var(--gw-wash-violet) 12%,transparent),transparent 62%),radial-gradient(420px 320px at 52% 118%,color-mix(in srgb,var(--gw-wash-mint) 10%,transparent),transparent 62%)}.gw-hero h1 .gw-dim{display: block}.gw-hero > .gw-wrap > .gw-window{margin-top: 48px}.gw-hero--center{text-align: center}.gw-hero--center > .gw-wrap > {margin-inline: auto}.gw-hero--center .gw-actions{justify-content: center}.gw-hero--compact{padding-block: 40px 48px}.gw-hero--compact h1{font-size: var(--gw-display-h2)}@media (min-width: 768px){.gw-hero{padding-block: 80px 96px}.gw-hero--compact{padding-block: 64px}.gw-hero .gw-lead{font-size: 20px}.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%}}.gw-logos{padding-block: 40px;border-block: 1px solid var(--gw-line)}.gw-logos p{color: var(--gw-muted);font-size: 13px;text-align: center}.gw-logos ul{display: flex;flex-wrap: wrap;align-items: center;justify-content: center;gap: 16px 40px;margin-top: 20px;padding: 0;list-style: none}.gw-logos li{color: var(--gw-muted);font-size: 22px;font-weight: 600;letter-spacing: -0.02em;line-height: 1.2}.gw-logos img{width: auto;height: 28px}.gw-stats{display: grid;grid-template-columns: minmax(0,1fr);gap: 24px;margin: 0;padding: 0;list-style: none}.gw-stats__value{font-size: var(--gw-display-h2);font-weight: 600;letter-spacing: -0.03em;line-height: 1.1;font-variant-numeric: tabular-nums}.gw-stats__label{margin-top: 8px;max-width: 28ch;color: var(--gw-muted);font-size: 14px}.gw-stats__source{margin-top: 8px;color: var(--gw-muted);font-size: 12px}@media (min-width: 480px){.gw-stats{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 1080px){.gw-stats{grid-template-columns: none;grid-auto-flow: column;grid-auto-columns: minmax(0,1fr);gap: 0}.gw-stats__item{padding: 4px 24px;border-left: 1px solid var(--gw-line)}.gw-stats__item:first-child{padding-left: 0;border-left: 0}}.gw-features{row-gap: 40px}.gw-feature .gw-icon{width: 40px;height: 40px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-action);background: var(--gw-surface);color: var(--gw-accent)}.gw-split{display: grid;grid-template-columns: minmax(0,1fr);align-items: center;gap: 40px}@media (min-width: 768px){.gw-split{grid-template-columns: repeat(2,minmax(0,1fr))}.gw-split--reverse > :first-child{order: 2}}.gw-split h2{font-size: 30px}@media (min-width: 1080px){.gw-split{gap: 64px}}.gw-showcase .gw-window{max-width: 960px;margin-inline: auto}.gw-showcase .gw-window + {margin-top: 48px}.gw-steps{display: grid;grid-template-columns: minmax(0,1fr);gap: 32px 24px;margin: 0;padding: 0;list-style: none;counter-reset: gw-step}.gw-steps > li{counter-increment: gw-step}.gw-steps > li::before{content: counter(gw-step,decimal-leading-zero);display: block;margin-bottom: 16px;padding-bottom: 12px;border-bottom: 1px solid var(--gw-line);color: var(--gw-accent-strong);font-size: 13px;font-weight: 600;font-variant-numeric: tabular-nums}.gw-steps h3{font-size: 20px}.gw-steps p{margin-top: 8px;color: var(--gw-muted);font-size: 16px}@media (min-width: 768px){.gw-steps{grid-template-columns: repeat(2,minmax(0,1fr))}}@media (min-width: 1080px){.gw-steps{grid-template-columns: none;grid-auto-flow: column;grid-auto-columns: minmax(0,1fr)}}.gw-quote{max-width: 880px;margin-inline: auto;padding: 40px 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-panel);background: var(--gw-surface);text-align: center}.gw-quote::before{content: "";display: block;width: 32px;height: 24px;margin: 0 auto 24px;background: var(--gw-accent);-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V14C0 6 4 1 12 0l1 4c-4 1-6 4-6 8h5v12zm19 0V14c0-8 4-13 12-14l1 4c-4 1-6 4-6 8h5v12z'/%3E%3C/svg%3E") center / contain no-repeat;mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 24'%3E%3Cpath d='M0 24V14C0 6 4 1 12 0l1 4c-4 1-6 4-6 8h5v12zm19 0V14c0-8 4-13 12-14l1 4c-4 1-6 4-6 8h5v12z'/%3E%3C/svg%3E") center / contain no-repeat}.gw-quote blockquote{font-size: 24px;font-weight: 500;line-height: 1.4;letter-spacing: -0.01em;text-wrap: balance}.gw-quote figcaption{margin-top: 24px;color: var(--gw-muted);font-size: 14px}.gw-quote figcaption b{color: var(--gw-ink)}.gw-quote figcaption img{width: 40px;height: 40px;margin: 0 auto 12px;border-radius: var(--gw-radius-chip)}@media (min-width: 768px){.gw-quote{padding: 64px}.gw-quote blockquote{font-size: 30px}}.gw-pricing{display: grid;grid-template-columns: repeat(auto-fit,minmax(min(100%,260px),1fr));align-items: start;gap: 16px}.gw-plan{display: flex;flex-direction: column;padding: 24px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-panel);background: var(--gw-surface);box-shadow: var(--gw-shadow)}.gw-plan--featured{border-color: var(--gw-accent)}.gw-plan{position: relative}.gw-plan > .gw-badge{align-self: flex-start}.gw-plan > .gw-badge:first-child{position: absolute;top: -12px;left: 24px}.gw-plan > .gw-badge:first-child + {margin-top: 0}.gw-plan h3{font-size: 20px}:where(.gw-plan) p{color: var(--gw-muted);font-size: 14px}.gw-plan__price{display: flex;flex-wrap: wrap;align-items: baseline;gap: 6px;color: var(--gw-ink);font-size: var(--gw-display-h2);font-weight: 600;letter-spacing: -0.03em;line-height: 1.1;font-variant-numeric: tabular-nums}.gw-plan__price small{color: var(--gw-muted);font-size: 14px;font-weight: 500;letter-spacing: 0}.gw-plan .gw-list--check{font-size: 14px}@media (min-width: 768px){.gw-plan{padding: 32px}.gw-plan > .gw-badge:first-child{left: 32px}}.gw-cta{max-width: 780px;margin-inline: auto;text-align: center}.gw-cta .gw-lead{margin-inline: auto}.gw-cta .gw-actions{justify-content: center}.gw-prose{max-width: 68ch;min-width: 0;color: var(--gw-ink);font-size: var(--gw-body-size);line-height: var(--gw-body-leading);overflow-wrap: break-word}.gw-prose--sm{font-size: 16px}:where(.gw-prose) > + {margin-top: 20px}:where(.gw-prose--sm) > + {margin-top: 16px}:where(.gw-prose) > + :where(figure,img,video,pre,table,hr,.gw-table,.gw-window),:where(.gw-prose) > :where(figure,img,video,pre,table,hr,.gw-table,.gw-window) + {margin-top: 32px}:where(.gw-prose) > + h2{margin-top: 48px}:where(.gw-prose) > * + h3{margin-top: 40px}:where(.gw-prose) > * + h4{margin-top: 32px}:where(.gw-prose--sm) > * + h2{margin-top: 40px}:where(.gw-prose--sm) > * + h3{margin-top: 32px}:where(.gw-prose--sm) > * + h4{margin-top: 24px}:where(.gw-prose) > h1 + {margin-top: 24px}:where(.gw-prose) > :is(h2,h3,h4) + {margin-top: 12px}:where(.gw-prose) > :is(h1,h2,h3,h4){color: var(--gw-ink);font-weight: var(--gw-heading-weight);letter-spacing: var(--gw-heading-tracking);line-height: 1.25}:where(.gw-prose) > h1{font-size: var(--gw-display-h2);font-weight: var(--gw-display-weight);letter-spacing: var(--gw-display-tracking);line-height: var(--gw-heading-leading)}:where(.gw-prose) > h2{font-size: 30px;line-height: 1.2}:where(.gw-prose) > h3{font-size: 24px}:where(.gw-prose) > h4{font-size: 20px}:where(.gw-prose--sm) > h2{font-size: 24px}:where(.gw-prose--sm) > h3{font-size: 20px}:where(.gw-prose--sm) > h4{font-size: 18px}:where(.gw-prose :is(ul,ol):not([class])){padding-left: 24px}:where(.gw-prose ul:not([class])){list-style: disc}:where(.gw-prose ol:not([class])){list-style: decimal}:where(.gw-prose :is(ul,ol):not([class]) > li + li),:where(.gw-prose :is(ul,ol):not([class]) > li > * + ),:where(.gw-prose :is(ul,ol):not([class]) > li > :is(ul,ol)){margin-top: 8px}:where(.gw-prose :is(ul,ol):not([class]) > li)::marker{color: var(--gw-muted);font-variant-numeric: tabular-nums}:where(.gw-prose) > blockquote{padding-left: 20px;border-left: 3px solid var(--gw-line-strong);color: var(--gw-muted)}:where(.gw-prose) > blockquote > + {margin-top: 12px}:where(.gw-prose) > hr{height: 0;border: 0;border-top: 1px solid var(--gw-line)}:where(.gw-prose) :is(sup,sub){line-height: 0}:where(.gw-prose) :is(pre,code,kbd,samp){font-family: var(--gw-font-mono)}:where(.gw-prose) code{padding: 2px 6px;border-radius: var(--gw-radius-6);background: color-mix(in srgb,var(--gw-ink) 8%,transparent);color: var(--gw-ink);font-size: 16px;overflow-wrap: anywhere;-webkit-box-decoration-break: clone;box-decoration-break: clone}:where(.gw-prose--sm) code{font-size: 14px}:where(.gw-prose) :is(h1,h2,h3,h4) code{font-size: inherit}:where(.gw-prose) figcaption code{font-size: 13px}:where(.gw-prose) :is(th,td) code{font-size: 13px;overflow-wrap: normal;white-space: nowrap}:where(.gw-prose) pre{overflow-x: auto;padding: 16px 20px;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-bg-soft);color: var(--gw-ink);font-size: 14px;line-height: 1.6;tab-size: 2}:where(.gw-prose) pre code{padding: 0;border-radius: var(--gw-radius-0);background: none;font-size: inherit;overflow-wrap: normal}:where(.gw-prose) > :is(img,video),:where(.gw-prose) > :is(p,figure) > :is(img,video){border-radius: var(--gw-radius-card)}:where(.gw-prose) figcaption{margin-top: 12px;color: var(--gw-muted);font-size: 14px;line-height: 1.5}:where(.gw-prose) > table{display: block;width: max-content;max-width: 100%;overflow-x: auto;border: 1px solid var(--gw-line);border-radius: var(--gw-radius-card);background: var(--gw-surface);border-collapse: collapse;font-size: 14px;line-height: 1.5;-webkit-overflow-scrolling: touch}:where(.gw-prose) > table :is(th,td){padding: 12px 16px;border-bottom: 1px solid var(--gw-line);text-align: left;vertical-align: top}:where(.gw-prose) > table thead th{background: var(--gw-bg-soft);color: var(--gw-ink);font-size: 13px;font-weight: 600;white-space: nowrap}:where(.gw-prose) > table tbody th{font-weight: 500}:where(.gw-prose) > table td{color: var(--gw-ink-2);font-variant-numeric: tabular-nums}:where(.gw-prose) > table tbody tr:last-child > {border-bottom: 0}:where(.gw-prose) > table caption{padding: 12px 16px;color: var(--gw-muted);font-size: 13px;text-align: left}@media (max-width: 767px){:where(.gw-prose) > table td{min-width: 160px}}