@gemboss/website-ui 0.8.0 → 0.10.0

package/website.css

@@ -1,4 +1,4 @@
-/*! @gemboss/website-ui 0.8.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
+/*! @gemboss/website-ui 0.10.0 | generated by scripts/build.mjs from the files in css/. Edit those and not this file */
 /* @gemboss/website-ui tokens. GENERATED from system.json by scripts/build.mjs: do not edit by hand. */
 :root {
   color-scheme: light;
@@ -70,6 +70,13 @@
   --gw-ease: cubic-bezier(.22,1,.36,1);
   --gw-reveal-ms: 700ms;
   --gw-spin-ms: 700ms;
+  --gw-spot-radius: 260px;
+  --gw-spot-radius-action: 120px;
+  --gw-spot-strength: 22%;
+  --gw-spot-strength-action: 38%;
+  --gw-spot-strength-stage: 40%;
+  --gw-spot-ms: 550ms;
+  --gw-spot-ease: cubic-bezier(.16,1,.3,1);
   --gw-wash-pink: #ff6f5e;
   --gw-wash-violet: #7c8af7;
   --gw-wash-sky: #43b0ff;
@@ -88,7 +95,7 @@
   --gw-surface: #ffffff;
   --gw-ink: #1b1c1e;
   --gw-ink-2: #3b3d42;
-  --gw-muted: #686b71;
+  --gw-muted: #6a6d73;
   --gw-line: #e5e7ea;
   --gw-line-strong: #d5d8dd;
   --gw-line-control: #85888e;
@@ -180,7 +187,7 @@
   --gw-surface: #ffffff;
   --gw-ink: #1b1c1e;
   --gw-ink-2: #3b3d42;
-  --gw-muted: #686b71;
+  --gw-muted: #6a6d73;
   --gw-line: #e5e7ea;
   --gw-line-strong: #d5d8dd;
   --gw-line-control: #85888e;
@@ -1215,22 +1222,38 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   .gw-header__actions > .gw-lang { display: block; }
 }
 
+/* ---- 0.10.0: the theme toggle's two icons ---------------------------------------------------------------------------
+   A toggle may hold two icons: .gw-theme-toggle__moon, shown in light, and .gw-theme-toggle__sun, shown in dark, as
+   gemboss.ai draws them. The theme in force picks one: data-theme on <html>, else the system's. A toggle with one plain
+   <svg> stays as it is. */
+.gw-theme-toggle__sun { display: none; }
+:root[data-theme="dark"] .gw-theme-toggle__sun { display: block; }
+:root[data-theme="dark"] .gw-theme-toggle__moon { display: none; }
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme="light"]) .gw-theme-toggle__sun { display: block; }
+  :root:not([data-theme="light"]) .gw-theme-toggle__moon { display: none; }
+}
+
 /* footer: brand block, link columns, bottom row. One hairline on top, white like the page. */
 .gw-footer {
-  padding-block: 64px 40px;
+  padding-block: 64px 32px;
   border-top: 1px solid var(--gw-line);
-  background: var(--gw-bg);
+  background: transparent;
   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; }
+  gap: 32px;
+}
+.gw-footer__brand p { max-width: 30ch; margin-top: 16px; color: var(--gw-muted); line-height: 22px; }
+.gw-footer__brand .gw-brand { display: flex; min-height: 34px; font-family: var(--gw-font); line-height: 1.6; }
+.gw-footer__brand .gw-brand__mark { width: 34px; height: 34px; border-radius: var(--gw-radius-8); }
+/* the brand's name, the column headings and the wordmark are set in the kit's face (--gw-font), whatever the page
+   does to its body or its h2 (a page in Chinese puts PingFang first; gemboss.ai keeps Inter for these three); a
+   heading is balanced, like gemboss.ai's main pages */
+.gw-footer__heading { margin: 0 0 12px; color: var(--gw-ink); font-family: var(--gw-font); font-size: 13px; font-weight: 600; letter-spacing: 0; line-height: 1.6; text-wrap: balance; }
 /* an optional newsletter form in the brand block (0.6.0): label, the inline row (field and button), a note on what the
    reader agrees to; only when the form is wired to a list that keeps the address */
 .gw-footer__newsletter { margin-top: 24px; }
@@ -1243,33 +1266,35 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 8px 24px;
-  margin-top: 48px;
+  gap: 12px 24px;
+  margin-top: 32px;
   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 ul { display: flex; flex-wrap: wrap; gap: 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 (max-width: 620px) {
+  .gw-footer__grid { gap: 24px 20px; }
+  .gw-footer__brand { grid-column: 1 / -1; }
 }
-@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 (min-width: 1081px) {
+  .gw-footer__grid { grid-auto-flow: column; grid-template-columns: minmax(0, 1.6fr); grid-auto-columns: minmax(0, 1fr); gap: 32px 24px; }
 }
 @media (max-width: 768px), (pointer: coarse) {
+  .gw-footer__brand .gw-brand { min-height: var(--gw-tap-min); }
+  .gw-footer__col a { display: flex; align-items: center; min-height: var(--gw-tap-min); padding-block: 0; }
   .gw-footer__bottom a { min-height: var(--gw-tap-min); }
+  .gw-footer__bottom ul:last-child a { min-width: var(--gw-tap-min); }
+  .gw-footer__bottom ul:not(:last-child) { gap: 8px 16px; }
 }
 
 /* ---- 0.7.0: the footer as gemboss.ai has it (issue #71) ---------------------------------------------------------------
@@ -1283,16 +1308,14 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
    touch. */
 .gw-footer__ask { margin-top: 24px; }
 /* the row may run wider than the brand's sentence (four names on one line at 390px) */
-.gw-footer__brand:has(> .gw-footer__ask) { max-width: none; }
-.gw-footer__brand:has(> .gw-footer__ask) > :not(.gw-footer__ask) { max-width: 320px; }
-.gw-footer__ask > .gw-footer__ask-label { margin: 0; color: var(--gw-muted); font-size: 13px; }
+.gw-footer__ask > .gw-footer__ask-label { margin: 0; color: var(--gw-muted); font-size: 13px; line-height: 22px; }
 .gw-footer__ask > ul { display: flex; flex-wrap: wrap; gap: 0 16px; margin: 4px 0 0; padding: 0; list-style: none; }
 .gw-footer__ask a { display: block; padding-block: 4px; color: var(--gw-ink); line-height: 20px; }
-.gw-footer__ask a:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
+.gw-footer__ask a:hover { text-decoration: underline; }
 
 /* the mark after a link that leaves the site (↗, drawn), aria-hidden; the words "(opens in a new tab)" are a separate
    .gw-visually-hidden span, only when the link has target="_blank" */
-.gw-footer__ext {
+.gw-footer__ext:empty {
   display: inline-block;
   width: 12px;
   height: 12px;
@@ -1302,6 +1325,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
   -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
   mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5l5-5M4.5 3.5h4v4' fill='none' stroke='%23000' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat;
 }
+.gw-footer__ext:not(:empty) { color: var(--gw-muted); font-weight: 400; }
 
 /* Folds: <details class="gw-footer__fold"> inside a .gw-footer__col (or a .gw-footer__family), its <summary> holding the
    .gw-footer__heading, then the <ul>. Below 768px each is a 52px row with a chevron, folded unless the markup says
@@ -1310,48 +1334,52 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
    (::details-content; website.js also sets `open` there, for browsers without it). */
 .gw-footer__fold > summary { list-style: none; }
 .gw-footer__fold > summary::-webkit-details-marker { display: none; }
-.gw-footer__fold .gw-footer__heading { margin: 0; line-height: 20px; }
+.gw-footer__fold .gw-footer__heading { margin: 0; }
 .gw-footer__fold > ul { margin: 0; padding: 0; list-style: none; }
 .gw-footer__col > .gw-footer__fold a { line-height: 20px; }
-@media (min-width: 768px) {
+@media (min-width: 621px) {
   .gw-footer__fold > summary { display: contents; }
   .gw-footer__col > .gw-footer__fold .gw-footer__heading { margin-bottom: 12px; }
 }
-@media (min-width: 768px) {
+@media (min-width: 621px) {
   .gw-footer__fold::details-content { content-visibility: visible; }
 }
-@media (max-width: 767px) {
+@media (max-width: 620px) {
   .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) { grid-template-columns: minmax(0, 1fr); row-gap: 0; }
   .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) > .gw-footer__brand { padding-bottom: 24px; }
-  .gw-footer__col:has(> .gw-footer__fold),
+  /* a column's hairline on top, the last column's below too, a family row's below (gemboss.ai's order: a focused
+     row's ring passes under the next row's line) */
+  .gw-footer__col:has(> .gw-footer__fold) { border-top: 1px solid var(--gw-line); }
+  .gw-footer__col:has(> .gw-footer__fold):last-child,
   .gw-footer__family { border-bottom: 1px solid var(--gw-line); }
-  .gw-footer__brand + .gw-footer__col:has(> .gw-footer__fold) { border-top: 1px solid var(--gw-line); }
   .gw-footer__fold > summary {
     display: flex;
     align-items: center;
     justify-content: space-between;
     gap: 16px;
-    min-height: var(--gw-tap-min);
-    padding-block: 16px;
+    min-height: 52px;
+    padding: 0;
     cursor: pointer;
   }
   .gw-footer__fold > summary::after {
     content: "";
     flex: none;
-    width: 16px;
-    height: 16px;
-    background: var(--gw-muted);
-    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 5.5L8 11l5.5-5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
-    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M2.5 5.5L8 11l5.5-5.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
-    transition: transform 0.18s var(--gw-ease);
+    width: 8px;
+    height: 8px;
+    margin-right: 4px;
+    border-right: 2px solid var(--gw-muted);
+    border-bottom: 2px solid var(--gw-muted);
+    rotate: 45deg;
+    translate: 0 -2px;
   }
-  .gw-footer__fold[open] > summary::after { transform: rotate(180deg); }
+  .gw-footer__fold[open] > summary::after { rotate: 225deg; translate: 0 2px; }
+  .gw-footer__fold > summary:focus-visible { outline: 2px solid var(--gw-accent); outline-offset: 2px; border-radius: var(--gw-radius-6); }
   .gw-footer__fold > ul { padding-bottom: 12px; }
   .gw-footer__col > .gw-footer__fold a { display: flex; align-items: center; min-height: var(--gw-tap-min); }
 }
 /* desktop: the brand's track is as wide as gemboss.ai draws it beside five columns (1.2 parts of 6.2, after five 24px
    gaps), whatever the number of columns, so a family row can line up with it; the columns share the rest */
-@media (min-width: 1080px) {
+@media (min-width: 1081px) {
   .gw-footer__grid:has(> .gw-footer__col > .gw-footer__fold) { grid-template-columns: minmax(0, calc((100% - 120px) * 6 / 31)); }
 }
 
@@ -1361,6 +1389,8 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
    the items start where the first column starts. */
 .gw-footer__family .gw-footer__heading { color: var(--gw-muted); font-weight: 500; }
 .gw-footer__family .gw-footer__fold > ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
+.gw-footer__family .gw-footer__fold > ul > li { display: flex; }
+.gw-footer__family .gw-footer__fold > ul > li > a { flex: 1 1 auto; }
 .gw-footer__family a {
   display: flex;
   flex-direction: column;
@@ -1374,14 +1404,18 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 .gw-footer__family a:hover { background: var(--gw-bg-soft); }
 .gw-footer__family b { font-size: 14px; font-weight: 600; line-height: 20px; }
 .gw-footer__family i { color: var(--gw-muted); font-size: 13px; font-style: normal; line-height: 18px; }
-@media (min-width: 768px) {
+@media (min-width: 621px) {
   .gw-footer__family { margin-top: 48px; padding-top: 32px; border-top: 1px solid var(--gw-line); }
   .gw-footer__family .gw-footer__heading { margin-bottom: 12px; }
-  .gw-footer__family .gw-footer__fold > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; margin-left: -12px; }
+  .gw-footer__family .gw-footer__fold > ul { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px 16px; }
   .gw-footer__family a { min-height: 0; padding: 8px 12px; }
   .gw-footer__family + .gw-footer__bottom { margin-top: 32px; }
 }
-@media (min-width: 1080px) {
+@media (min-width: 621px) and (max-width: 768px) {
+  .gw-footer__family a { min-height: var(--gw-tap-min); }
+}
+@media (min-width: 1081px) {
+  .gw-footer__family .gw-footer__fold > ul { margin-left: -12px; }
   .gw-footer__family { display: flow-root; }
   .gw-footer__family .gw-footer__heading { float: left; width: calc((100% - 120px) * 6 / 31); margin: 8px 0 0; }
   .gw-footer__family .gw-footer__fold > ul { margin-left: calc((100% - 120px) * 6 / 31 + 12px); }
@@ -1389,7 +1423,7 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 
 /* The theme toggle in the bottom row (.gw-theme-toggle with data-gw-theme-toggle, wired like the header's): a 32px
    square with one hairline, its hit area 40px, 44px on touch. It pushes itself and the social links to the right.
-   Below 768px the copyright and the toggle share the first line, legal and social links the second. */
+   Up to 620px the copyright and the toggle share the first line, legal and social links the second. */
 .gw-footer__toggle {
   position: relative;
   width: 32px;
@@ -1400,12 +1434,15 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 }
 .gw-footer__toggle::after { content: ""; position: absolute; inset: -5px; }
 .gw-footer__toggle svg { width: 18px; height: 18px; }
+/* on hover the hairline turns ink and the icon the accent, the ground stays (gemboss.ai's); colour only, 0.15s */
+.gw-footer__toggle { transition: border-color 0.15s, color 0.15s; }
+.gw-footer__toggle:hover { border-color: var(--gw-ink); background: var(--gw-surface); color: var(--gw-accent); }
 @media (max-width: 768px), (pointer: coarse) {
   .gw-footer__toggle { width: var(--gw-tap-min); height: var(--gw-tap-min); }
 }
-@media (max-width: 767px) {
-  .gw-footer__bottom:has(> .gw-footer__toggle) { column-gap: 16px; }
-  .gw-footer__bottom:has(> .gw-footer__toggle) > :first-child { flex: 1 1 calc(100% - var(--gw-tap-min) - 16px); }
+@media (max-width: 620px) {
+  .gw-footer__bottom:has(> .gw-footer__toggle) { gap: 8px 16px; }
+  .gw-footer__bottom:has(> .gw-footer__toggle) > :first-child { flex: 1 1 calc(100% - 64px); }
   .gw-footer__bottom > .gw-footer__toggle { order: 1; margin: 0; }
   .gw-footer__bottom:has(> .gw-footer__toggle) > ul { order: 2; }
   .gw-footer__family + .gw-footer__bottom,
@@ -1415,39 +1452,37 @@ html.is-menu-open .gw-header:has(> .gw-mobile-menu.is-drill) { position: sticky;
 /* The wordmark: the brand's mark and name, large and faint, the footer's last line. Decoration (aria-hidden="true"):
    the name is already in the brand block. Its size follows the viewport (--gw-display-wordmark) and it never makes the
    page scroll sideways: a name too long for the line is cut. The mark is drawn in currentColor (an inline SVG); an
-   <img> mark keeps its own colours, so leave it out and keep the name. Not on phones, as on gemboss.ai. 24px more room
-   under it than gemboss.ai gives: the kit's footer is a painted band (white like the page), and the breathing gate
-   wants half the letters' size between them and its edge (67px under 123px letters at 1366px). */
+   <img> mark keeps its own colours, so leave it out and keep the name. Values are gemboss.ai's, 1:1 (Chris 26/10/2026):
+   weight 800, 48px above, nothing below but the footer's own 32px, the mark 7vw wide (40–96px), hidden up to 620px.
+   The footer is not painted (transparent on the page), so the breathing gate reads it as part of the page. */
 .gw-footer__wordmark {
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 24px;
-  padding-block: 48px 24px;
+  padding-block: 48px 0;
   color: color-mix(in srgb, var(--gw-ink) 10%, transparent);
+  font-family: var(--gw-font);
   font-size: var(--gw-display-wordmark);
-  font-weight: 700;
+  font-weight: 800;
   letter-spacing: var(--gw-display-tracking);
   line-height: 1;
   white-space: nowrap;
   user-select: none;
 }
 .gw-footer__wordmark > svg,
-.gw-footer__wordmark > img { flex: none; width: auto; height: 0.9em; }
+.gw-footer__wordmark > img { flex: none; width: clamp(40px, 7vw, 96px); height: auto; }
 .gw-footer__wordmark > span { min-width: 0; overflow-x: clip; }
-@media (max-width: 767px) { .gw-footer__wordmark { gap: 16px; } }
-@media (max-width: 479px) { .gw-footer__wordmark { display: none; } }
+@media (max-width: 640px) { .gw-footer__wordmark { gap: 16px; } }
+@media (max-width: 620px) { .gw-footer__wordmark { display: none; } }
 
 @media (max-width: 768px), (pointer: coarse) {
   .gw-footer__ask a { display: flex; align-items: center; min-height: var(--gw-tap-min); padding-block: 0; }
 }
-@media (prefers-reduced-motion: reduce) {
-  .gw-footer__fold > summary::after { transition: none; }
-}
 /* a forced-colours screen drops backgrounds: draw the chevron and the ↗ in its text colour */
 @media (forced-colors: active) {
-  .gw-footer__ext,
-  .gw-footer__fold > summary::after { forced-color-adjust: none; background: CanvasText; }
+  .gw-footer__ext:empty { forced-color-adjust: none; background: CanvasText; }
+  .gw-footer__fold > summary::after { border-color: CanvasText; }
 }
 
 /* sections: hero, logos, stats, features, split, showcase, steps, quote, pricing, CTA. */
@@ -2229,3 +2264,75 @@ a.gw-rating-badge:hover { border-color: var(--gw-line-strong); }
 .gw-rating-badge__body { display: grid; gap: 2px; min-width: 0; }
 .gw-rating-badge__score { display: flex; align-items: center; gap: 8px; color: var(--gw-ink); font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
 .gw-rating-badge__count { color: var(--gw-muted); }
+
+/* effects: the spotlight (0.9.0, Chris 25/10/2026, issue #74), a named hover effect for the things you click.
+   data-gw-spot on an <a href>, a <button>, or a card that holds exactly one of them (a plan card, the mega menu's
+   feature card, the primary button of a night band, a .gw-card--link): a soft light in the brand's accent follows the
+   pointer over it. Opt-in per element: a page without the attribute does not change.
+   website.js wires the host (data-gw-ready="spot") and puts .gw-spot on the element that carries the light: the host,
+   or the one its data-gw-spot="<selector>" names inside it. It writes the pointer's place there (--gw-spot-x,
+   --gw-spot-y, trailing it a little every frame); this file draws the light on its ::before, under its words, in its
+   own corners (border-radius: inherit, so the radius profile holds), and grows the light's radius on hover.
+   - Pointer devices only: nothing here applies without (hover: hover) and (pointer: fine).
+   - Keyboard focus (on the host, or on the one action of a card) shows the same light, centred.
+   - Reduced motion: the light stands still, centred, and appears without a transition.
+   - Words under the light: while a thing is lit, its muted words read --gw-ink-2 (the token, set as --gw-muted on the
+     host), so they keep 4.5:1 at the light's middle; they turn back once the light has gone. A colour, no movement.
+   - Without @property or color-mix(), website.js puts .gw-spot nowhere: no light at all, nothing half drawn.
+   - One colour, the accent family, as the page has it (the -dark family in dark mode and in night bands). Never on a
+     heading or running text: a heading stays ink, with no gradient and no accent words (check: spot-target).
+   The radius is the one animated property that is neither transform nor opacity: it repaints one layer of one
+   element. Registered, so it can transition; inherited, so the ::before (and an inner element) reads the host's. */
+@property --gw-spot-r {
+  syntax: "<length>";
+  inherits: true;
+  initial-value: 0px;
+}
+
+@media (hover: hover) and (pointer: fine) {
+  /* the host: no light at rest (a lit card does not light a lit button inside it), the light's size on hover and focus */
+  [data-gw-ready~="spot"] { --gw-spot-r: 0px; }
+  [data-gw-ready~="spot"]:is(:hover, :focus-visible) { --gw-spot-r: var(--gw-spot-radius); --gw-muted: var(--gw-ink-2); }
+  /* a card whose one action has the keyboard focus; a rule of its own, so a browser without :has() drops only it */
+  [data-gw-ready~="spot"]:has(:focus-visible) { --gw-spot-r: var(--gw-spot-radius); --gw-muted: var(--gw-ink-2); }
+  .gw-btn[data-gw-ready~="spot"]:is(:hover, :focus-visible) { --gw-spot-r: var(--gw-spot-radius-action); }
+
+  /* the element that carries the light: positioned for its layer, isolated so the layer sits under its words.
+     :where(), so a site's own position for an inner element wins. */
+  :where(.gw-spot) { position: relative; isolation: isolate; }
+  /* the light. Not on a busy button: its ::before is the ring. */
+  .gw-spot:not([aria-busy="true"])::before {
+    --gw-spot-mix: var(--gw-spot-strength);
+    content: "";
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    border-radius: inherit;
+    background: radial-gradient(circle var(--gw-spot-r) at var(--gw-spot-x, 50%) var(--gw-spot-y, 50%), color-mix(in srgb, var(--gw-accent) var(--gw-spot-mix), transparent), transparent 70%);
+    pointer-events: none;
+    transition: --gw-spot-r var(--gw-spot-ms) var(--gw-spot-ease);
+  }
+  /* a button is small and filled: a stronger light. Its words keep their contrast: the light is the accent over the
+     button's fill, so under the accent action profile it lies between the accent and the accent-strong, the two fills
+     the build checks the words on. */
+  .gw-btn.gw-spot:not([aria-busy="true"])::before { --gw-spot-mix: var(--gw-spot-strength-action); }
+  /* the mega menu's feature card is the Stage, a night ground: a stronger light, or it would not show */
+  .gw-mega__feature.gw-spot:not([aria-busy="true"])::before { --gw-spot-mix: var(--gw-spot-strength-stage); }
+
+  /* words under the light: lit, muted words are ink-2 at once (rules above); back to muted only once the light has gone
+     out (a colour that waits the light's time, no movement). :where(), so a part's own transition wins. */
+  :where([data-gw-ready~="spot"] *) { transition: color 0s linear var(--gw-spot-ms); }
+  :where([data-gw-ready~="spot"]:is(:hover, :focus-visible) *) { transition-delay: 0s; }
+  :where([data-gw-ready~="spot"]:has(:focus-visible) *) { transition-delay: 0s; }
+
+  /* keyboard focus: the light in the middle, so focus is never weaker than hover */
+  :is([data-gw-ready~="spot"]:focus-visible, [data-gw-ready~="spot"]:focus-visible *).gw-spot::before { --gw-spot-x: 50%; --gw-spot-y: 50%; }
+  :is([data-gw-ready~="spot"]:has(:focus-visible), [data-gw-ready~="spot"]:has(:focus-visible) *).gw-spot::before { --gw-spot-x: 50%; --gw-spot-y: 50%; }
+}
+
+/* reduced motion: a still light in the middle, there at once and gone at once, the words with it (website.js follows
+   no pointer then) */
+@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: reduce) {
+  .gw-spot:not([aria-busy="true"])::before { --gw-spot-x: 50%; --gw-spot-y: 50%; transition: none; }
+  :where([data-gw-ready~="spot"] *) { transition: none; }
+}