@hubpav/hwio-ui 0.7.11 → 0.9.0

package/src/components/HWioMegaLinks.astro

@@ -0,0 +1,54 @@
+---
+/**
+ * A group of links for HWioHeader's `mega:<key>` panels (owner, 2026-10-30): an optional caps title
+ * with an "all" link on its line, then links with a one-line description. Labels never wrap; the
+ * descriptions are small (13 px), Regular, Gray and balanced, so siblings read as equals. `columns` is
+ * fixed: the panel shows only from the header's desktop breakpoint, and a column count that grows with
+ * the viewport (three at 2xl) squeezed descriptions into broken lines. Products may carry a thumbnail
+ * (a cut-out with the shared product shadow).
+ */
+import type { HWioLinkItem } from '../types';
+import HWioIcon from './HWioIcon.astro';
+interface Item extends HWioLinkItem {
+  description?: string;
+  /** A product thumbnail (cut-out on a transparent ground); decorative, the label names the product. */
+  image?: string;
+}
+interface Props {
+  title?: string;
+  all?: HWioLinkItem;
+  items: Item[];
+  columns?: 1 | 2 | 3;
+  /** data-track-location for the links (default "header-menu"). */
+  trackLocation?: string;
+  class?: string;
+}
+const { title, all, items, columns = 1, trackLocation = 'header-menu', class: className = '' } = Astro.props;
+const COLUMNS = { 1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3' } as const;
+const linkAttrs = (item: HWioLinkItem) => (item.external ? { target: '_blank', rel: 'noopener noreferrer' } : {});
+---
+<div class:list={['min-w-0', className]}>
+  {(title || all) && (
+    <div class="mb-4 flex items-baseline justify-between gap-6 px-3">
+      {title && <p class="hwio-mega-title">{title}</p>}
+      {all && <a href={all.href} {...linkAttrs(all)} class="hwio-link hwio-weight-label whitespace-nowrap text-sm" data-track={all.track?.id} data-track-location={all.track?.location ?? trackLocation}>{all.label}</a>}
+    </div>
+  )}
+  <ul class:list={['grid gap-x-6 gap-y-1', COLUMNS[columns]]}>
+    {items.map((item) => (
+      <li class="min-w-0">
+        <a href={item.href} {...linkAttrs(item)} class="flex items-start gap-4 rounded-xl px-3 py-2.5 transition-colors hover:bg-base-200" aria-current={item.current ? 'page' : undefined} data-track={item.track?.id} data-track-location={item.track?.location ?? trackLocation}>
+          {item.image && (
+            <span class="flex h-20 w-16 shrink-0 items-center justify-center">
+              <img src={item.image} alt="" loading="lazy" decoding="async" class="hwio-product-shadow max-h-full max-w-full object-contain" />
+            </span>
+          )}
+          <span class="min-w-0 flex-1">
+            <span class="hwio-mega-label">{item.label}{item.external && <HWioIcon name="arrow-up-right" size="sm" class="opacity-50" />}</span>
+            {item.description && <span class="hwio-menu-desc mt-0.5 block">{item.description}</span>}
+          </span>
+        </a>
+      </li>
+    ))}
+  </ul>
+</div>

package/src/components/HWioPhoto.astro

@@ -0,0 +1,36 @@
+---
+/**
+ * A photograph at a fixed aspect ratio, filling its frame (object-fit: cover; `focus` picks the
+ * part that stays in view). Photographs come from the artwork library, clearance public (Brand
+ * Guidelines chapter 08: photographs prove). For a product on a transparent ground use HWioCutout.
+ */
+import type { HWioAspect, HWioMedia } from '../types';
+interface Props {
+  image: HWioMedia;
+  aspect?: HWioAspect;
+  rounded?: 'none' | 'xl' | '2xl';
+  focus?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+  /** Above the fold: load at once with high priority. */
+  eager?: boolean;
+  class?: string;
+  imgClass?: string;
+}
+const { image, aspect = '4/3', rounded = '2xl', focus = 'center', eager = false, class: className = '', imgClass = '' } = Astro.props;
+const ASPECT = { '1/1': 'aspect-square', '4/3': 'aspect-[4/3]', '3/2': 'aspect-[3/2]', '16/9': 'aspect-video', '4/5': 'aspect-[4/5]', '3/4': 'aspect-[3/4]' } as const;
+const ROUNDED = { none: 'rounded-none', xl: 'rounded-xl', '2xl': 'rounded-2xl' } as const;
+const FOCUS = { center: 'object-center', top: 'object-top', bottom: 'object-bottom', left: 'object-left', right: 'object-right' } as const;
+---
+<div class:list={['relative overflow-hidden bg-base-200', ASPECT[aspect], ROUNDED[rounded], className]}>
+  <img
+    src={image.src}
+    srcset={image.srcset}
+    sizes={image.sizes}
+    alt={image.alt}
+    width={image.width}
+    height={image.height}
+    loading={eager ? 'eager' : 'lazy'}
+    decoding="async"
+    fetchpriority={eager ? 'high' : undefined}
+    class:list={['absolute inset-0 h-full w-full object-cover', FOCUS[focus], imgClass]}
+  />
+</div>

package/src/components/HWioPricingTiers.astro

@@ -26,7 +26,7 @@ const cols = (Math.min(Math.max(tiers.length, 1), 4) as 1 | 2 | 3 | 4);
         )}
         {tier.description && <p class="opacity-80">{tier.description}</p>}
         <ul class="my-4 space-y-2 text-sm">
-          {tier.features.map((f) => <li class="flex items-start gap-2"><HWioIcon name="check" size="sm" class="mt-0.5 shrink-0 text-accent" /><span>{f}</span></li>)}
+          {tier.features.map((f) => <li class="flex items-start gap-2"><HWioIcon name="check" size="sm" class="hwio-icon mt-0.5 shrink-0" /><span>{f}</span></li>)}
         </ul>
         {tier.cta && <div class="card-actions mt-auto"><HWioButton href={tier.cta.href} external={tier.cta.external} variant={tier.featured ? 'primary' : 'secondary'} class="w-full" track={tier.cta.track}>{tier.cta.label}</HWioButton></div>}
       </div>

package/src/components/HWioProcessSteps.astro

@@ -8,7 +8,7 @@ const LAYOUT = { horizontal: 'grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols
 <ol class:list={[LAYOUT[orientation], className]} data-hwio-steps>
   {items.map((step, i) => (
     <li class="flex gap-4">
-      <span class="badge badge-primary badge-lg shrink-0 font-semibold tabular-nums" aria-hidden="true">{step.number ?? i + 1}</span>
+      <span class="badge badge-primary badge-lg hwio-weight-label shrink-0 tabular-nums" aria-hidden="true">{step.number ?? i + 1}</span>
       <div>
         <h3 class="text-lg font-semibold"><span class="sr-only">{step.number ?? i + 1}. </span>{step.title}</h3>
         <p class="mt-1 opacity-80">{step.text}</p>

package/src/components/HWioReveal.astro

@@ -0,0 +1,15 @@
+---
+/**
+ * Starts the scroll reveal on the page (@hubpav/hwio-web-runtime/reveal). Render it once, in the layout
+ * of pages that mark content with `data-hwio-reveal` (HWioSection `reveal`, HWioApplicationTile
+ * `reveal`, a site's own markup). Renders nothing.
+ *
+ * Fail-safe: content waiting for its reveal hides only after this runtime has started; without it the
+ * content simply shows. Each element fades in and settles once, the first time it enters the viewport;
+ * `data-hwio-reveal-delay="<ms>"` staggers siblings. Under prefers-reduced-motion everything shows at once.
+ */
+---
+<script>
+  import { hwioRevealRuntime } from '@hubpav/hwio-web-runtime/reveal';
+  hwioRevealRuntime();
+</script>

package/src/components/HWioSection.astro

@@ -1,4 +1,5 @@
 ---
+/** Section with the system rhythm, tone and container. `reveal` fades it in once in view; the reveal runs only with HWioReveal on the page (fail-safe: without it the section simply shows). */
 import type { HWioTone } from '../types';
 interface Props { id?: string; tone?: HWioTone; spacing?: 'normal' | 'compact' | 'none'; container?: boolean; as?: 'section' | 'div' | 'article'; reveal?: boolean; class?: string; [key: string]: unknown }
 const TONE = { base: 'bg-base-100 text-base-content hwio-tone-base', alt: 'bg-base-200 text-base-content hwio-tone-alt', neutral: 'bg-neutral text-neutral-content hwio-tone-neutral' } as const;

package/src/components/HWioStatsBand.astro

@@ -11,10 +11,10 @@ const cols = COLS[(Math.min(Math.max(items.length, 2), 5) as 2 | 3 | 4 | 5)];
       const numeric = typeof s.value === 'number';
       return (
         <div class:list={['px-8 py-2', i > 0 ? 'sm:border-l sm:border-base-300' : '']}>
-          <div class="mb-2.5 text-[2.25rem] font-bold leading-none tracking-[-0.03em] lg:text-[2.5rem]">
+          <div class="hwio-figure mb-2.5">
             <span class="hwio-stat-value" data-hwio-counter={animate && numeric ? 'true' : undefined} data-target={numeric ? String(s.value) : undefined} data-suffix={s.suffix ?? ''}>{s.value}{s.suffix ?? ''}</span>
           </div>
-          <div class="text-[15px] font-semibold">{s.label}</div>
+          <div class="hwio-weight-label text-[15px]">{s.label}</div>
           {s.description && <div class="hwio-muted mt-0.5 text-sm">{s.description}</div>}
         </div>
       );

package/src/components/HWioStoryCard.astro

@@ -0,0 +1,38 @@
+---
+/**
+ * Customer-story card: a field photograph under the guidelines' scrim (chapter 08), the customer as a
+ * caps kicker and what they built as the title, White type over the dark, calm bottom of the frame;
+ * the whole card links to the case study (its title underlines on hover and focus, the arrow nudges).
+ * Pass the photograph as `image`, or your own picture in the `media` slot. Logos stay out: the card
+ * names the customer in text (the kicker) only when consent or a published case study allows it.
+ */
+import type { HWioAspect, HWioMedia, HWioTrack } from '../types';
+import HWioPhoto from './HWioPhoto.astro';
+interface Props {
+  href: string;
+  kicker: string;
+  title: string;
+  /** The link line under the title ("Read the story"). */
+  linkLabel: string;
+  image?: HWioMedia;
+  aspect?: HWioAspect;
+  focus?: 'center' | 'top' | 'bottom' | 'left' | 'right';
+  headingLevel?: 'h2' | 'h3' | 'h4';
+  track?: HWioTrack;
+  eager?: boolean;
+  class?: string;
+}
+const { href, kicker, title, linkLabel, image, aspect = '4/5', focus = 'center', headingLevel = 'h3', track, eager = false, class: className = '' } = Astro.props;
+const Heading = headingLevel;
+---
+<a href={href} class:list={['hwio-card-link group relative block overflow-hidden rounded-2xl text-white', className]} data-track={track?.id} data-track-location={track?.location}>
+  <slot name="media">
+    {image && <HWioPhoto image={image} aspect={aspect} focus={focus} rounded="2xl" eager={eager} imgClass="transition-transform duration-500 ease-out group-hover:scale-[1.02] motion-reduce:transition-none" />}
+  </slot>
+  <div class="hwio-scrim pointer-events-none absolute inset-0 rounded-2xl"></div>
+  <div class="absolute inset-x-0 bottom-0 p-6 lg:p-7">
+    <p class="hwio-kicker text-[var(--hwio-kicker-on-neutral,#d1d5db)]">{kicker}</p>
+    <Heading class="hwio-role-title hwio-card-title mt-2 text-white">{title}</Heading>
+    <p class="hwio-weight-label mt-3 text-[0.9375rem] text-white">{linkLabel}<span aria-hidden="true" class="hwio-arrow ml-1.5">→</span></p>
+  </div>
+</a>

package/src/styles/prose.css

@@ -9,8 +9,8 @@
   .hwio-prose ol { list-style: decimal; padding-left: calc(var(--spacing) * 6); margin-bottom: calc(var(--spacing) * 4); }
   .hwio-prose li { padding-left: calc(var(--spacing) * 1); margin-bottom: calc(var(--spacing) * 2); }
   .hwio-prose a { color: var(--hwio-link, var(--color-secondary)); text-decoration: underline; text-underline-offset: 0.2em; }
-  .hwio-prose a:hover { color: var(--color-primary); }
-  .hwio-prose strong { font-weight: 600; }
+  .hwio-prose a:hover { color: var(--hwio-link-hover, var(--color-primary)); }
+  .hwio-prose strong { font-weight: var(--hwio-weight-strong, 600); }
   .hwio-prose blockquote { border-left: 4px solid var(--color-secondary); padding-left: calc(var(--spacing) * 4); font-style: italic; margin-block: calc(var(--spacing) * 6); }
   .hwio-prose code { background: var(--color-base-200); padding: 0.125em 0.375em; border-radius: var(--radius-field); font-size: 0.9em; }
   .hwio-prose pre { background: var(--color-neutral); color: var(--color-neutral-content); padding: calc(var(--spacing) * 4); border-radius: var(--radius-box); overflow-x: auto; margin-block: calc(var(--spacing) * 6); }
@@ -18,7 +18,7 @@
   .hwio-prose hr { border-color: var(--color-base-300); margin-block: calc(var(--spacing) * 8); }
   .hwio-prose img { border-radius: var(--radius-box); margin-block: calc(var(--spacing) * 6); margin-inline: auto; max-width: 100%; }
   .hwio-prose table { width: 100%; border-collapse: collapse; margin-block: calc(var(--spacing) * 6); }
-  .hwio-prose th { background: var(--color-base-200); border: 1px solid var(--color-base-300); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); text-align: left; font-weight: 600; }
+  .hwio-prose th { background: var(--color-base-200); border: 1px solid var(--color-base-300); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); text-align: left; font-weight: var(--hwio-weight-label, 600); }
   .hwio-prose td { border: 1px solid var(--color-base-300); padding: calc(var(--spacing) * 2) calc(var(--spacing) * 4); }
   .hwio-prose-lg { font-size: var(--text-lg); }
 }

package/src/styles/styles.css

@@ -57,30 +57,25 @@
     overflow-x: hidden;
     background-color: var(--color-base-100);
     color: var(--color-base-content);
-    font-size: 1.0625rem; /* 17 px body (direction A) */
-    line-height: 1.6;
+    font-size: var(--hwio-type-body-size, 1.0625rem);
+    line-height: var(--hwio-type-body-leading, 1.6);
   }
   button:not(:disabled),
   [role='button']:not(:disabled) {
     cursor: pointer;
   }
-  /* Type ramp (direction A): 56 / 40 / 28 / 22 / 17 on large screens, tighter tracking as size grows. */
+  /* Type ramp from the theme's type preset (--hwio-type-<role>-*, generated from brand.json with
+     the responsive steps as media queries). HARDWARIO themes: the Brand Guidelines' web scale
+     (H1 60-72 px Bold, H2 40-48 px and H3 28-32 px Semibold, line heights 1.2 / 1.3 / 1.4 at
+     least). er3o keeps direction A. The fallbacks are direction A's phone values. */
   h1, h2, h3, h4, h5, h6 {
-    font-weight: 700;
+    font-weight: var(--hwio-type-title-weight, 700);
     text-wrap: balance;
   }
-  h1 { font-size: 2.5rem; line-height: 1.05; letter-spacing: -0.03em; }
-  h2 { font-size: 2rem; line-height: 1.1; letter-spacing: -0.025em; }
-  h3 { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.01em; }
-  h4 { font-size: 1.125rem; line-height: 1.3; letter-spacing: -0.005em; }
-  @media (width >= 48rem) {
-    h1 { font-size: 3rem; }
-    h2 { font-size: 2.5rem; }
-    h3 { font-size: 1.375rem; }
-  }
-  @media (width >= 64rem) {
-    h1 { font-size: 3.5rem; }
-  }
+  h1 { font-size: var(--hwio-type-display-size, 2.5rem); font-weight: var(--hwio-type-display-weight, 700); line-height: var(--hwio-type-display-leading, 1.05); letter-spacing: var(--hwio-type-display-tracking, -0.03em); }
+  h2 { font-size: var(--hwio-type-heading-size, 2rem); font-weight: var(--hwio-type-heading-weight, 700); line-height: var(--hwio-type-heading-leading, 1.1); letter-spacing: var(--hwio-type-heading-tracking, -0.025em); }
+  h3 { font-size: var(--hwio-type-subheading-size, 1.375rem); font-weight: var(--hwio-type-subheading-weight, 700); line-height: var(--hwio-type-subheading-leading, 1.2); letter-spacing: var(--hwio-type-subheading-tracking, -0.01em); }
+  h4 { font-size: var(--hwio-type-title-size, 1.125rem); line-height: var(--hwio-type-title-leading, 1.3); letter-spacing: var(--hwio-type-title-tracking, -0.005em); }
   /* Phones: a heading word wider than its column (a 40 px H1 gets 218-288 px) hyphenates instead
      of running past the screen, and a token longer than the line (a URL, an ID) breaks. */
   @media (width < 40rem) {
@@ -143,30 +138,89 @@
     background: var(--hwio-nav-active, var(--color-primary));
   }
 
+  /* Kicker: Red caps over a title on the HARDWARIO themes (Brand Guidelines chapter 04 and 05);
+     sentence case on er3o. On Ink (neutral panels, and the dark theme's surfaces) it takes the
+     light gray, as the guidelines' dark-mode example sets the caps label on an Ink card. */
   .hwio-kicker,
   .hwio-eyebrow {
     color: var(--color-accent);
-    font-size: 0.875rem;
-    font-weight: 600;
-    line-height: 1.4;
+    font-size: var(--hwio-type-kicker-size, 0.875rem);
+    font-weight: var(--hwio-type-kicker-weight, 600);
+    line-height: var(--hwio-type-kicker-leading, 1.4);
+    letter-spacing: var(--hwio-type-kicker-tracking, 0);
+    text-transform: var(--hwio-type-kicker-case, none);
+  }
+  .hwio-tone-alt .hwio-kicker,
+  .hwio-tone-alt .hwio-eyebrow {
+    color: var(--hwio-kicker-on-alt, var(--color-accent));
   }
   .hwio-tone-neutral .hwio-kicker,
   .hwio-tone-neutral .hwio-eyebrow {
     color: var(--hwio-kicker-on-neutral, var(--color-accent));
   }
+  /* Secondary text: Gray on light grounds, the light gray on dark ones (chapter 03, D35). */
   .hwio-muted {
-    color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
+    color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 72%, transparent));
   }
   .hwio-tone-neutral .hwio-muted {
-    color: color-mix(in oklab, var(--color-neutral-content) 75%, transparent);
+    color: var(--hwio-text-secondary-on-neutral, color-mix(in oklab, var(--color-neutral-content) 75%, transparent));
   }
   .hwio-lead {
-    font-size: 1.1875rem;
-    line-height: 1.55;
-    color: color-mix(in oklab, var(--color-base-content) 72%, transparent);
+    font-size: var(--hwio-type-lead-size, 1.1875rem);
+    line-height: var(--hwio-type-lead-leading, 1.55);
+    color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 72%, transparent));
   }
   .hwio-tone-neutral .hwio-lead {
-    color: color-mix(in oklab, var(--color-neutral-content) 75%, transparent);
+    color: var(--hwio-text-secondary-on-neutral, color-mix(in oklab, var(--color-neutral-content) 75%, transparent));
+  }
+  /* Caption: 12-14 px Regular in Gray (chapter 04). */
+  .hwio-caption {
+    font-size: var(--hwio-type-caption-size, 0.875rem);
+    line-height: var(--hwio-type-caption-leading, 1.4);
+    color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 72%, transparent));
+  }
+  .hwio-tone-neutral .hwio-caption {
+    color: var(--hwio-text-secondary-on-neutral, color-mix(in oklab, var(--color-neutral-content) 75%, transparent));
+  }
+  /* Figures (stats): display type, so 1.2 line height at least on the HARDWARIO themes. */
+  .hwio-figure {
+    font-size: var(--hwio-type-figure-size, 2.25rem);
+    font-weight: var(--hwio-type-figure-weight, 700);
+    line-height: var(--hwio-type-figure-leading, 1);
+    letter-spacing: var(--hwio-type-figure-tracking, -0.03em);
+  }
+  /* The choice-card title: the H3 role on the HARDWARIO themes, direction A's 28 px on er3o. */
+  .hwio-choice-title {
+    font-size: var(--hwio-choice-title-size, 1.75rem);
+    line-height: var(--hwio-choice-title-leading, 1.15);
+    letter-spacing: var(--hwio-choice-title-tracking, -0.02em);
+  }
+  /* Icons: one colour, Navy (White on dark grounds) on the HARDWARIO themes (chapter 05). */
+  .hwio-icon {
+    color: var(--hwio-icon, var(--color-accent));
+  }
+  .hwio-icon-tile {
+    background-color: var(--hwio-icon-bg, color-mix(in oklab, var(--color-accent) 8%, transparent));
+    color: var(--hwio-icon, var(--color-accent));
+  }
+  /* Weights the guidelines allow: Regular, Semibold (web H2 and H3) and Bold, no Medium (D22). */
+  .hwio-weight-nav { font-weight: var(--hwio-weight-nav, 500); }
+  .hwio-weight-label { font-weight: var(--hwio-weight-label, 600); }
+  .hwio-weight-footer-title { font-weight: var(--hwio-weight-footer-title, 500); }
+  /* Secondary notes (consent texts): Gray at full opacity on the HARDWARIO themes, so a link inside
+     keeps its contrast; er3o keeps the text colour at 80 % opacity. */
+  .hwio-note {
+    color: var(--hwio-text-secondary, currentColor);
+    opacity: var(--hwio-note-opacity, 0.8);
+  }
+  /* An inline text link outside prose: Blue on the HARDWARIO themes (chapter 03 reserves Blue for links). */
+  .hwio-link {
+    color: var(--hwio-link, var(--color-accent));
+  }
+  @media (hover: hover) {
+    .hwio-link:hover {
+      color: var(--hwio-link-hover, color-mix(in oklab, var(--hwio-link, var(--color-accent)) 80%, #000));
+    }
   }
   .hwio-hairline { border-color: var(--color-base-300); }
   /* Inverse button for ink/neutral panels (navy on ink has no contrast). */
@@ -186,8 +240,10 @@
     padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
     border-radius: 9999px;
     background: color-mix(in oklab, var(--color-base-content) 6%, transparent);
-    font-size: var(--text-sm);
-    font-weight: 500;
+    font-size: var(--hwio-type-chip-size, var(--text-sm));
+    font-weight: var(--hwio-type-chip-weight, 500);
+    letter-spacing: var(--hwio-type-chip-tracking, 0);
+    text-transform: var(--hwio-type-chip-case, none);
   }
   /* Honeypot: off-screen, never display:none (bots check that), no inline style attribute. */
   .hwio-hp {
@@ -206,17 +262,49 @@
   [data-hs-status].hs-status-success { color: var(--color-success); }
   [data-hs-status].hs-status-error { color: var(--color-error); }
 
-  /* Scroll reveal: visible at rest for no-JS, animates in once the runtime marks it. */
-  .js [data-hwio-reveal]:not([data-hwio-revealed]) {
+  /* Scroll reveal, fail-safe (owner, 2026-10-30): content waiting for its reveal hides only once the
+     reveal runtime has started (html.hwio-reveal-on, set by @hubpav/hwio-web-runtime/reveal). Without
+     JavaScript, before the runtime runs, or if it never loads, everything shows. Hiding is instant;
+     revealing fades in and settles once (web layer: ease-out, 400 ms at most, 24 px travel). A page
+     can calm it with --hwio-reveal-duration and --hwio-reveal-travel. Stagger siblings with
+     data-hwio-reveal-delay="<ms>" (the runtime applies it). */
+  html.hwio-reveal-on [data-hwio-reveal]:not([data-hwio-revealed]) {
     opacity: 0;
-    transform: translateY(24px);
-  }
-  [data-hwio-reveal] {
-    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
+    transform: translateY(var(--hwio-reveal-travel, 24px));
   }
   [data-hwio-reveal][data-hwio-revealed] {
     opacity: 1;
     transform: none;
+    transition:
+      opacity var(--hwio-reveal-duration, var(--hwio-motion-reveal, 0.6s)) var(--hwio-motion-easing, ease-out),
+      transform var(--hwio-reveal-duration, var(--hwio-motion-reveal, 0.6s)) var(--hwio-motion-easing, ease-out);
+  }
+
+  /* Entrance of a hero once the font gate has shown the page: the children of .hwio-enter fade in and
+     settle 12 px, 60 ms apart; .hwio-enter-media follows. Pure CSS that always ends visible, and it
+     runs only after the gate has set .fonts-ready (no gate, no animation). */
+  @keyframes hwio-enter {
+    from { opacity: 0; transform: translateY(12px); }
+    to { opacity: 1; transform: none; }
+  }
+  .fonts-ready .hwio-enter > * {
+    animation: hwio-enter var(--hwio-motion-base, 300ms) var(--hwio-motion-easing, ease-out) both;
+  }
+  .fonts-ready .hwio-enter > :nth-child(2) { animation-delay: 60ms; }
+  .fonts-ready .hwio-enter > :nth-child(3) { animation-delay: 120ms; }
+  .fonts-ready .hwio-enter > :nth-child(n + 4) { animation-delay: 180ms; }
+  .fonts-ready .hwio-enter-media {
+    animation: hwio-enter var(--hwio-motion-base, 300ms) var(--hwio-motion-easing, ease-out) 120ms both;
+  }
+
+  /* The arrow of a call to action moves 3 px on hover and keyboard focus (HWioButton's arrow carries
+     it; a site marks its own arrow glyph with .hwio-arrow). */
+  .hwio-arrow {
+    display: inline-block;
+    transition: transform var(--hwio-motion-fast, 200ms) var(--hwio-motion-easing, ease-out);
+  }
+  :is(a, button):is(:hover, :focus-visible) .hwio-arrow {
+    transform: translateX(3px);
   }
 
   /* Count-up: reserve the width of the final value so the layout never jumps. */
@@ -255,19 +343,171 @@
     transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
   }
 
+  /* Type roles for elements whose tag is not the role's tag (a card title in an <h3>, a <p> set as H2). */
+  .hwio-role-heading {
+    font-size: var(--hwio-type-heading-size, 2rem);
+    font-weight: var(--hwio-type-heading-weight, 700);
+    line-height: var(--hwio-type-heading-leading, 1.1);
+    letter-spacing: var(--hwio-type-heading-tracking, -0.025em);
+  }
+  .hwio-role-subheading {
+    font-size: var(--hwio-type-subheading-size, 1.375rem);
+    font-weight: var(--hwio-type-subheading-weight, 700);
+    line-height: var(--hwio-type-subheading-leading, 1.2);
+    letter-spacing: var(--hwio-type-subheading-tracking, -0.01em);
+  }
+  .hwio-role-title {
+    font-size: var(--hwio-type-title-size, 1.125rem);
+    font-weight: var(--hwio-type-title-weight, 700);
+    line-height: var(--hwio-type-title-leading, 1.3);
+    letter-spacing: var(--hwio-type-title-tracking, -0.005em);
+  }
+
+  /* A long H1 (more than about eight words, an opening statement) at 36 / 44 / 48 / 52 px instead of
+     the web scale's 40 / 48 / 60 / 72 px, so it reads in three calm lines beside the hero media.
+     CHANGE REQUEST CR-7 (owner, 2026-10-30), pending the Brand Guidelines: "a long H1 may go down
+     to 48 to 56 px". Opt-in per heading; HWioHeroSplit sets it with titleSize="long". */
+  .hwio-h1-long {
+    font-size: 2.25rem;
+    line-height: var(--hwio-type-display-leading, 1.2);
+    letter-spacing: -0.02em;
+  }
+  @media (width >= 48rem) {
+    .hwio-h1-long { font-size: 2.75rem; }
+  }
+  @media (width >= 64rem) {
+    .hwio-h1-long { font-size: 3rem; }
+  }
+  @media (width >= 80rem) {
+    .hwio-h1-long { font-size: 3.25rem; }
+  }
+
+  /* The page's one gradient moment (Brand Guidelines chapter 03; D23, D33, D44): the figure gradient
+     fills the type of the key figure (.hwio-key-figure, 40 px and up) or, instead of a key figure,
+     of up to two key words of a hero H1 (.hwio-grad). The theme variable is the gradient's left three
+     quarters on white (4.5:1) and light red to Sky on the dark ground. Each word carries its own
+     gradient. .hwio-grad is CHANGE REQUEST CR-8 (owner, 2026-10-30), pending the guidelines. Themes
+     without the gradient (er3o) show plain text: the fill, not `color`, turns transparent, so the
+     fallback's currentColor is still the text colour. */
+  .hwio-key-figure,
+  .hwio-grad {
+    background-image: var(--hwio-gradient-figure, linear-gradient(currentColor, currentColor));
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+    -webkit-box-decoration-break: clone;
+    box-decoration-break: clone;
+  }
+  @media (forced-colors: active) {
+    .hwio-key-figure,
+    .hwio-grad {
+      background-image: none;
+      -webkit-text-fill-color: CanvasText;
+    }
+  }
+
+  /* Linked cards (web layer, States): the title underlines on hover and keyboard focus; no shadow. */
+  .hwio-card-link:is(:hover, :focus-visible) .hwio-card-title {
+    text-decoration: underline;
+    text-underline-offset: 0.18em;
+    text-decoration-thickness: 1px;
+  }
+
+  /* White type over a photograph only on the guidelines' scrim (chapter 08): clear over the top
+     third, 45 % black at 60 %, 92 % at the bottom. */
+  .hwio-scrim {
+    background-image: linear-gradient(180deg, rgb(0 0 0 / 0) 33%, rgb(0 0 0 / 0.45) 60%, rgb(0 0 0 / 0.92) 100%);
+  }
+
+  /* Product cut-outs (owner, 2026-10-30; Brand Guidelines chapter 08): one shadow recipe for every
+     product, so a row reads as one family: a tight contact shadow plus a soft ambient one; lighter on
+     the dark ground. On a common baseline (HWioCutout baseline) a blurred floor ellipse. A cut-out
+     sits whole on the Panel ground (.hwio-cutout-ground) or on the page. */
+  .hwio-product-shadow {
+    filter: drop-shadow(0 2px 2px rgb(37 37 50 / 0.16)) drop-shadow(0 12px 16px rgb(37 37 50 / 0.12));
+  }
+  [data-theme$='-dark'] .hwio-product-shadow {
+    filter: drop-shadow(0 6px 12px rgb(0 0 0 / 0.35));
+  }
+  .hwio-product-floor {
+    position: absolute;
+    left: 20%;
+    right: 20%;
+    height: 7%;
+    border-radius: 50%;
+    background: radial-gradient(closest-side, rgb(37 37 50 / 0.18), rgb(37 37 50 / 0));
+    pointer-events: none;
+  }
+  [data-theme$='-dark'] .hwio-product-floor {
+    display: none;
+  }
+  .hwio-cutout-ground {
+    background-color: var(--color-base-200);
+  }
+  /* A drawn isometric room behind a cut-out (HWioCutout backdrop): it fills the frame (the kit's SVG
+     carries a 1 pt margin, hidden by the slight scale); the dark-theme drawing on the dark ground. */
+  .hwio-backdrop {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    transform: scale(1.012);
+    pointer-events: none;
+  }
+  .hwio-backdrop-dark { display: none; }
+  [data-theme$='-dark'] .hwio-backdrop-light { display: none; }
+  [data-theme$='-dark'] .hwio-backdrop-dark { display: block; }
+
+  /* Menu panels (HWioMegaLinks) and the drawer's second lines (owner, 2026-10-30): a caps group title
+     in Gray, link labels that never wrap, descriptions small (13 px), Regular, Gray and balanced. */
+  .hwio-mega-title {
+    color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 72%, transparent));
+    font-size: var(--hwio-type-kicker-size, 0.875rem);
+    font-weight: var(--hwio-type-kicker-weight, 600);
+    line-height: var(--hwio-type-kicker-leading, 1.4);
+    letter-spacing: var(--hwio-type-kicker-tracking, 0);
+    text-transform: var(--hwio-type-kicker-case, none);
+  }
+  .hwio-mega-label {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    white-space: nowrap;
+    color: var(--color-base-content);
+    font-size: 0.9375rem;
+    font-weight: var(--hwio-weight-label, 600);
+    line-height: 1.35;
+    transition: color var(--hwio-motion-fast, 200ms) var(--hwio-motion-easing, ease-out);
+  }
+  a:is(:hover, :focus-visible) .hwio-mega-label {
+    color: var(--hwio-nav-hover, var(--color-primary));
+  }
+  .hwio-menu-desc {
+    color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 72%, transparent));
+    font-size: 0.8125rem;
+    font-weight: 400;
+    line-height: 1.45;
+    text-wrap: balance;
+  }
+
   @media (prefers-reduced-motion: reduce) {
     [data-hwio-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
     .hwio-marquee-track { animation: none; transform: none; will-change: auto; }
     .hwio-marquee-track > [aria-hidden='true'] { display: none; }
+    .fonts-ready .hwio-enter > *,
+    .fonts-ready .hwio-enter-media { animation: none; }
+    .hwio-arrow,
+    :is(a, button):is(:hover, :focus-visible) .hwio-arrow { transition: none; transform: none; }
   }
 }
 
 /* Brand overrides of DaisyUI defaults. Unlayered on purpose: DaisyUI lives in the utilities layer
-   and would otherwise win. Direction A: 15 px/600 sentence-case buttons, 48 px tall, 8 px radius,
-   28 px padding on large buttons at the same height; card padding 32 px. */
+   and would otherwise win. 15 px sentence-case buttons (Bold on the HARDWARIO themes, 600 on er3o),
+   48 px tall, 8 px radius, 28 px padding on large buttons at the same height; card padding 32 px. */
 .btn {
-  --fontsize: 0.9375rem;
-  font-weight: 600;
+  --fontsize: var(--hwio-type-button-size, 0.9375rem);
+  font-weight: var(--hwio-type-button-weight, 600);
   padding-inline: 1.5rem;
 }
 .btn-sm { --fontsize: 0.875rem; padding-inline: 1rem; }
@@ -277,6 +517,12 @@
 /* DaisyUI sets .label to 60 % of the text colour, which fails AA at 14 px (4.1:1 on white). R5:
    darken muted text only. 78 % keeps the label visibly secondary and clears 4.5:1 on every theme. */
 .label { color: color-mix(in oklab, currentColor 78%, transparent); }
+/* Table heads: DaisyUI sets 60 % of the text colour (4.1:1 on white at 14 px) in Semibold; on the
+   HARDWARIO themes secondary text (Gray, 5.3:1) in Bold (D22), unchanged on er3o. */
+.table :where(thead, tfoot) {
+  color: var(--hwio-text-secondary, color-mix(in oklab, var(--color-base-content) 60%, transparent));
+  font-weight: var(--hwio-weight-label, 600);
+}
 /* Same for inactive tabs (DaisyUI: 50 %, 3.1:1 on white at 14 px). */
 .tab:not(.tab-active, :hover, :focus-visible) { color: color-mix(in oklab, currentColor 78%, transparent); }
 /* Text links: themes whose primary is too light for text on the page ground (er3o teal) set
@@ -309,6 +555,35 @@
   .hwio-nav-tight > .hwio-nav-current::after {
     inset-inline: 0.5rem;
   }
+  header:has(.hwio-nav-tight) .hwio-utility > summary.btn {
+    --fontsize: 14px;
+    font-size: 14px;
+  }
+}
+/* Header utilities (owner, 2026-10-30): HWioHeader's theme toggle and language dropdown read as quiet
+   utilities beside the nav, not as buttons: the nav's weight (Regular on the HARDWARIO themes), size
+   and 80 % ink, the nav's hover colour, the toggle's icon at 18 px (HWioIcon's 1.5 stroke), the
+   chevron as faint as the nav chevrons. Unlayered, because DaisyUI's .btn sits in the utilities layer. */
+.hwio-utility.btn,
+.hwio-utility > summary.btn {
+  --fontsize: 0.9375rem;
+  font-size: 0.9375rem;
+  font-weight: var(--hwio-weight-nav, 500);
+  letter-spacing: 0;
+  color: color-mix(in oklab, var(--color-base-content) 80%, transparent);
+  border-color: transparent;
+  box-shadow: none;
+}
+.hwio-utility.btn:hover,
+.hwio-utility > summary.btn:hover {
+  color: var(--hwio-nav-hover, var(--color-accent));
+}
+.hwio-utility.btn > svg {
+  width: 1.125rem;
+  height: 1.125rem;
+}
+.hwio-utility > summary.btn > svg:last-child {
+  opacity: 0.5;
 }
 /* DaisyUI 5.7.30+ also gives pressed buttons (aria-pressed / aria-checked) a filled ground. A ghost
    toggle shows its state in its own content (HWioThemeToggle swaps moon and sun and sets
@@ -318,3 +593,16 @@
   --btn-bg: #0000;
   --btn-border: #0000;
 }
+/* Forms on the brand type scale (owner, 2026-11-01; website-admin DESIGN-SYSTEM.md, web layer type table: "Form
+   label 15 Bold", "Form field text 16 Regular"). DaisyUI's 12 px Semibold field labels and 14 px fields sat below
+   the body text, and iPhones zoom into a focused field whose text is under 16 px. Unlayered, so it wins over
+   DaisyUI's component layer. */
+.fieldset-legend {
+  font-size: 0.9375rem;
+  font-weight: var(--hwio-weight-label, 700);
+}
+.input,
+.select,
+.textarea {
+  font-size: 1rem;
+}