@affinda/wc 0.0.28 → 0.2.0

package/dist/types/components.d.ts

@@ -5,11 +5,15 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
+import { Gap, HeadingSize, Padding, Theme } from "./types";
+import { HeroTopPad, HeroVariant } from "./components/af-hero/af-hero";
 import { IconName } from "@affinda/icons";
 import { NumberBadgeNumber, NumberBadgeVariant } from "./components/af-number-badge/af-number-badge";
 import { TabShape } from "./components/af-tab/af-tab";
 import { TabBarBreakpoint, TabBarShape } from "./components/af-tab-bar/af-tab-bar";
 import { TagSize, TagVariant } from "./components/af-tag/af-tag";
+export { Gap, HeadingSize, Padding, Theme } from "./types";
+export { HeroTopPad, HeroVariant } from "./components/af-hero/af-hero";
 export { IconName } from "@affinda/icons";
 export { NumberBadgeNumber, NumberBadgeVariant } from "./components/af-number-badge/af-number-badge";
 export { TabShape } from "./components/af-tab/af-tab";
@@ -130,7 +134,7 @@ export namespace Components {
           * Theme - sets background color and provides theme context to children. Defaults to 'mist-green' if not specified.
           * @default 'mist-green'
          */
-        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "theme"?: Theme;
     }
     /**
      * Center layout component for quickly centering content.
@@ -182,22 +186,31 @@ export namespace Components {
         "value"?: string;
     }
     /**
-     * Infinite scrolling carousel for client logos.
+     * Full-width row of client logos, either infinite-scrolling (default)
+     * or a centred static row.
      * This is a section-level component that spans full width.
-     * Renders one or two scrolling rows; single row matches the Webflow
-     * reference, two rows (scrolling opposite directions) is the denser
-     * variant.
+     * Renders one or two rows; single row matches the Webflow reference,
+     * two rows is the denser variant. When `mode="scroll"` (default) rows
+     * animate in opposite directions; when `mode="static"` rows are centred
+     * and the animation is disabled.
      * For headlines, use a separate TypographyLockup or Heading component
      * above this carousel.
-     * **Seamless loop:** the CSS animation translates the track from 0% to
-     * -50% (or vice versa), which only looks continuous if the track holds
-     * two identical copies of the content end-to-end. Shadow DOM slots can
-     * only project content once, so we clone the slotted nodes in
-     * `componentDidLoad` and append the copies to the track.
+     * **Seamless loop (scroll mode only):** the CSS animation translates
+     * the track from 0% to -50% (or vice versa), which only looks continuous
+     * if the track holds two identical copies of the content end-to-end.
+     * Shadow DOM slots can only project content once, so we clone the
+     * slotted nodes in `componentDidLoad` and append the copies to the track.
+     * Static mode skips the clone — nothing is animating, so duplicating
+     * the logos would just render them twice.
      */
     interface AfClientCarousel {
         /**
-          * Number of scrolling rows. - `1` (default) — single row scrolling left, matches the Webflow reference. - `2` — two rows scrolling in opposite directions.  When `rows="2"`, slot `row-1` and `row-2` independently. When `rows="1"`, slot the default slot (unnamed) or `row-1`.
+          * Layout mode. - `scroll` (default) — infinite animated scroll; rows fill the full   width and are cloned for a seamless loop. - `static` — no animation, logos centred horizontally. Use when the   logo set is small enough to fit on screen without scrolling.
+          * @default 'scroll'
+         */
+        "mode": Mode;
+        /**
+          * Number of rows. - `1` (default) — single row, matches the Webflow reference. - `2` — two rows (scroll in opposite directions, or stacked when static).  When `rows="2"`, slot `row-1` and `row-2` independently. When `rows="1"`, slot the default slot (unnamed) or `row-1`.
           * @default 1
          */
         "rows": 1 | 2;
@@ -336,7 +349,7 @@ export namespace Components {
           * Theme variant - sets background color and provides theme context. Only applies to 'standard' layout mode. Defaults to 'mist-green'.
           * @default 'mist-green'
          */
-        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "theme"?: Theme;
     }
     /**
      * Feature Grid component - CSS Grid container for feature cards.
@@ -535,6 +548,87 @@ export namespace Components {
          */
         "level": 'xl' | '1' | '2' | '3' | '4' | '5';
     }
+    /**
+     * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations
+     * the Affinda marketing site (and sibling apps) currently ship. Covers five
+     * canonical patterns via the `variant` prop:
+     * - `inkwell-photo` — inkwell background, blob-masked photo on the right.
+     *   Use for: listing / archive pages (blog, case-studies, whitepapers,
+     *   value-creation, about-us) and industry landing pages that carry a
+     *   photograph instead of an illustration.
+     * - `inkwell-illustration` — inkwell background, illustration on the right.
+     *   Use for: industry landing pages, /industries, /integrations, /platform
+     *   with bespoke art.
+     * - `inkwell-centered` — inkwell background, centred typography lockup.
+     *   Slot `<af-paperclip-decoration />` into the `paperclip` slot for the
+     *   watermark treatment. Use for: `/`, `/au`, `/platform`.
+     * - `soft-clay-illustration` — soft-clay background, illustration on the
+     *   right. Use for: /news, /industries overview, /security, /compare.
+     * - `mist-green-illustration` — same layout as soft-clay-illustration but on
+     *   the mist-green theme. Reserved for future pages.
+     * ## Slots
+     * - default — heading content (use when richer markup than the `heading`
+     *   prop can express is needed; e.g. coloured spans or line breaks).
+     * - `description` — supporting copy under the heading.
+     * - `badge` — optional pre-heading label (pill, version tag).
+     * - `buttons` — hero CTAs (usually an `<af-button-group>`).
+     * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in
+     *   the blob mask automatically.
+     * - `illustration` — the illustration SVG for `-illustration` variants.
+     * - `paperclip` — watermark for `inkwell-centered`. Consumers typically
+     *   slot `<af-paperclip-decoration />` here.
+     * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).
+     *   Painted with the theme's background so it cleanly overlaps the image's
+     *   lower edge on the photo variant.
+     * ## Float-navbar handling
+     * When `floatNavbar` is true (the default for the inkwell variants) the
+     * component sets `data-af-hero-float-navbar="true"` on `<body>` via a
+     * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies
+     * the `body > header { position: absolute }` / `main { padding-top: 0 }`
+     * / navbar-spacer-transparent treatment. Consumers already import
+     * `@affinda/css` so no extra import is required. The rule deactivates
+     * when the hero is removed from the DOM.
+     * ## Image lift
+     * The `inkwell-photo` variant renders the photo column with
+     * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by
+     * setting `--af-hero-image-lift` on the `<af-hero>` element.
+     */
+    interface AfHero {
+        /**
+          * Description text (use the `description` slot for richer markup).
+          * @default ''
+         */
+        "description": string;
+        /**
+          * Float the site header over the hero and paint the navbar-spacer transparent so the hero background flows to the top of the viewport. Defaults to true for the three inkwell variants, false for the soft-clay / mist-green illustration variants (whose consumers don't always want a full-bleed crown).
+         */
+        "floatNavbar"?: boolean;
+        /**
+          * Heading text (use the default slot for richer markup).
+          * @default ''
+         */
+        "heading": string;
+        /**
+          * Whether to apply the blob mask to the slotted `image`. Defaults to `true` for `inkwell-photo`. Set `false` if you want to slot in a pre-masked raster or a custom wrapper.
+          * @default true
+         */
+        "maskImage": boolean;
+        /**
+          * Typography lockup max-width (px). Defaults to 620, matching the live site.
+          * @default 620
+         */
+        "maxWidth": number;
+        /**
+          * Top padding preset. `default` = 124px (matches IndustryHero / IllustrationHero). `loose` = 164px (matches ListingHero — gives the image a touch more breathing room above the lockup on archive pages).
+          * @default 'default'
+         */
+        "topPad": HeroTopPad;
+        /**
+          * Layout / theme preset. See variant docs in the component header.
+          * @default 'inkwell-photo'
+         */
+        "variant": HeroVariant;
+    }
     /**
      * Icon component that displays SVG icons from the Affinda icon library.
      * Icons inherit color from their parent via currentColor.
@@ -667,7 +761,7 @@ export namespace Components {
           * Theme variant - sets background color and provides theme context. Defaults to 'mist-green'.
           * @default 'mist-green'
          */
-        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "theme"?: Theme;
     }
     /**
      * A styled image container with rounded corners and a subtle inset border.
@@ -760,7 +854,7 @@ export namespace Components {
           * Theme - sets the banner background color and typography colors
           * @default 'mist-green'
          */
-        "theme": BannerTheme;
+        "theme": Theme;
     }
     /**
      * Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.
@@ -1093,7 +1187,7 @@ export namespace Components {
         /**
           * Theme for the spacer background - should match the section below the navbar
          */
-        "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "theme"?: Theme;
     }
     /**
      * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
@@ -1120,6 +1214,96 @@ export namespace Components {
          */
         "variant": NumberBadgeVariant;
     }
+    /**
+     * Numbered stepper — filled soft-clay circle badges (1/2/3) paired with a
+     * heading + body description per step. Sibling to `af-stepper` (which uses
+     * outlined badges on a single spine connector); the numbered variant uses
+     * filled badges with per-step connector segments, matching the Webflow
+     * "How it works" marketing pattern.
+     * Renders children `af-numbered-stepper-item` elements horizontally on
+     * desktop (auto-stacks on mobile) or vertically when `orientation="vertical"`.
+     * The parent auto-assigns badge numbers based on DOM order, so consumers
+     * don't hand-number the steps.
+     * Headings use the shared `heading-size="card"` scale from
+     * `af-typography-lockup` (22/20px) — no bespoke font-size tokens.
+     * @example ```html
+     * <af-numbered-stepper>
+     *   <af-numbered-stepper-item>
+     *     <h3 slot="heading">Connect your ATS</h3>
+     *     <p slot="body">OAuth-based hook into the tools you already use.</p>
+     *   </af-numbered-stepper-item>
+     *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+     *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+     * </af-numbered-stepper>
+     * ```
+     */
+    interface AfNumberedStepper {
+        /**
+          * Layout orientation. Horizontal auto-stacks to vertical on mobile.
+          * @default 'horizontal'
+         */
+        "orientation": 'horizontal' | 'vertical';
+    }
+    /**
+     * A single step within an `af-numbered-stepper`. Renders a filled soft-clay
+     * circle badge (via `af-number-badge`) alongside a heading + body lockup.
+     * The parent `af-numbered-stepper` auto-assigns the `index` prop based on
+     * DOM order. Pass `index` explicitly to override.
+     * Heading scale is the shared `card` variant from `af-typography-lockup`
+     * (22/20px) — the same ladder step used by diff-card, related-card, and
+     * other card-title uses across the design system.
+     */
+    interface AfNumberedStepperItem {
+        /**
+          * Step number shown in the badge. Auto-assigned by the parent stepper if not explicitly set.
+          * @default 1
+         */
+        "index": number;
+    }
+    /**
+     * Decorative paperclip vector graphic. Renders the left-half paperclip
+     * silhouette (viewBox `0 0 655 754`) that the marketing site bleeds off
+     * the right edge of inkwell hero sections.
+     * Purely decorative — the inner `<svg>` is `aria-hidden="true"`. Size it
+     * via the `width` / `height` props (they accept any CSS length, e.g.
+     * `"655"`, `"100%"`, `"50vw"`) and position the host element in CSS.
+     * `fill` is white by default (intended for inkwell backgrounds); override
+     * for other themes, e.g. `fill="var(--colour-brand-inkwell)"` on a
+     * mist-green section. `opacity` defaults to `0.06` to match the
+     * watermark treatment used on `/`, `/au`, and `/platform`.
+     * @example ```html
+     * <af-section theme="inkwell" padding="loose" style="position:relative;overflow:hidden">
+     *   <af-paperclip-decoration
+     *     style="position:absolute;bottom:-80px;right:-80px"
+     *   ></af-paperclip-decoration>
+     *   <af-container style="position:relative;z-index:1">
+     *     <!-- hero content -->
+     *   </af-container>
+     * </af-section>
+     * ```
+     */
+    interface AfPaperclipDecoration {
+        /**
+          * Fill colour. Defaults to `white` (designed for inkwell backgrounds); override for other themes, e.g. `var(--colour-brand-inkwell)` on a mist-green section.
+          * @default 'white'
+         */
+        "fill": string;
+        /**
+          * SVG height — accepts any CSS length or unitless number (pixels). Defaults to the intrinsic viewBox height (`754`).
+          * @default '754'
+         */
+        "height": string;
+        /**
+          * Fill opacity of the paperclip shape. Defaults to `0.06` to match the marketing-site watermark treatment.
+          * @default 0.06
+         */
+        "opacity": number;
+        /**
+          * SVG width — accepts any CSS length or unitless number (pixels). Defaults to the intrinsic viewBox width (`655`).
+          * @default '655'
+         */
+        "width": string;
+    }
     /**
      * Progress Line atom component for displaying scroll or completion progress.
      * Shows a horizontal bar with a filled portion indicating progress.
@@ -1175,12 +1359,12 @@ export namespace Components {
           * Padding variant
           * @default 'default'
          */
-        "padding": 'none' | 'tight' | 'default' | 'loose';
+        "padding": Padding;
         /**
           * Theme - sets background color and provides theme context to children
           * @default 'white'
          */
-        "theme": 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+        "theme": Theme;
     }
     /**
      * Show component for responsive visibility control.
@@ -1263,7 +1447,7 @@ export namespace Components {
           * Padding variant
           * @default 'default'
          */
-        "padding": 'none' | 'tight' | 'default' | 'loose';
+        "padding": Padding;
         /**
           * Theme for the top half of the section
           * @default 'mist-green'
@@ -1301,6 +1485,35 @@ export namespace Components {
          */
         "wrap": boolean;
     }
+    /**
+     * Individual stat — a large value (e.g. "1B+") paired with a descriptive label.
+     * Intended as a slotted child of `af-stats-row`, but renders standalone too.
+     * Colour is inherited from the ancestor theme context (`af-section` /
+     * `af-card` / `af-theme-override`) via the `--af-typography-*` tokens that
+     * `af-heading` and `af-text` already consume — no theme prop needed here.
+     */
+    interface AfStat {
+        /**
+          * Description / caption rendered beneath the value.
+         */
+        "label": string;
+        /**
+          * The statistic headline value (e.g. "1B+", "95%", "10+").
+         */
+        "value": string;
+    }
+    /**
+     * Layout container for a horizontal row of `af-stat` children.
+     * Flex row that wraps to a grid on narrow viewports. Uses `scoped: true`
+     * so slotted `<af-stat>` children stay in the light DOM and inherit the
+     * ancestor theme (`af-section`) via the cascaded `.theme-*` class.
+     * Intentionally has **no `theme` prop** — a stats row is always flush
+     * against its section background, so a local theme would fight the
+     * ancestor. If you need a different background for the row, wrap it in
+     * its own `af-section` or `af-theme-override`.
+     */
+    interface AfStatsRow {
+    }
     /**
      * Stepper composite for "Sign up / Upload / See results"-style marketing
      * flows. Renders children `af-stepper-step` elements in a horizontal row
@@ -1670,13 +1883,13 @@ export namespace Components {
           * The theme to apply to child components. Overrides any inherited theme from parent containers.
           * @default 'white'
          */
-        "theme": 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+        "theme": Theme;
     }
     /**
      * Marketing-style composition of heading + description + buttons with
      * consistent spacing and alignment driven by the `headingSize` prop.
      * **Semantic vs visual:** `headingSize` controls ONLY the visual scale
-     * (the lockup sets font-size via a `heading-{1..5}` class). The semantic
+     * (the lockup sets font-size via a `heading-{1..5|card}` class). The semantic
      * level (h1-h6) is whatever the consumer slots in as default content.
      * Keep them aligned by convention so assistive tech and search engines
      * see the right hierarchy:
@@ -1685,10 +1898,15 @@ export namespace Components {
      *   headingSize=3 ↔ <h3>
      *   headingSize=4 ↔ <h4>
      *   headingSize=5 ↔ <h5>
+     *   headingSize="card" ↔ <h3> (card-title scale: 22/20px)
      * When a design asks for a visually small H1 or a visually large H3,
      * pass the two independently — just do it deliberately, not by
      * accident. A console warning fires in dev mode if the slotted tag is
      * more than one level away from the prop.
+     * The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)
+     * and targets card titles in dense grids (diff-card h3, NumberedStepper
+     * title, expert-insights related-card h3 on the marketing site). It sits
+     * between `4` and `5` in the type ladder.
      */
     interface AfTypographyLockup {
         /**
@@ -1724,10 +1942,10 @@ export namespace Components {
          */
         "headingColor": 'primary' | 'secondary';
         /**
-          * The heading size (1-5, where 1 is largest). Controls visual scale only — pair with a matching <h1>-<h5> slotted element for correct document outline (see component docblock).
+          * The heading size (1-5, or "card"; 1 is largest). Controls visual scale only — pair with a matching <h1>-<h5> slotted element for correct document outline (see component docblock). The `card` variant sits between 4 and 5 at 22/20px and is meant for card titles.
           * @default 2
          */
-        "headingSize": 1 | 2 | 3 | 4 | 5;
+        "headingSize": HeadingSize;
         /**
           * Maximum width for the copy section (in pixels)
          */
@@ -1947,18 +2165,22 @@ declare global {
         new (): HTMLAfCheckboxElement;
     };
     /**
-     * Infinite scrolling carousel for client logos.
+     * Full-width row of client logos, either infinite-scrolling (default)
+     * or a centred static row.
      * This is a section-level component that spans full width.
-     * Renders one or two scrolling rows; single row matches the Webflow
-     * reference, two rows (scrolling opposite directions) is the denser
-     * variant.
+     * Renders one or two rows; single row matches the Webflow reference,
+     * two rows is the denser variant. When `mode="scroll"` (default) rows
+     * animate in opposite directions; when `mode="static"` rows are centred
+     * and the animation is disabled.
      * For headlines, use a separate TypographyLockup or Heading component
      * above this carousel.
-     * **Seamless loop:** the CSS animation translates the track from 0% to
-     * -50% (or vice versa), which only looks continuous if the track holds
-     * two identical copies of the content end-to-end. Shadow DOM slots can
-     * only project content once, so we clone the slotted nodes in
-     * `componentDidLoad` and append the copies to the track.
+     * **Seamless loop (scroll mode only):** the CSS animation translates
+     * the track from 0% to -50% (or vice versa), which only looks continuous
+     * if the track holds two identical copies of the content end-to-end.
+     * Shadow DOM slots can only project content once, so we clone the
+     * slotted nodes in `componentDidLoad` and append the copies to the track.
+     * Static mode skips the clone — nothing is animating, so duplicating
+     * the logos would just render them twice.
      */
     interface HTMLAfClientCarouselElement extends Components.AfClientCarousel, HTMLStencilElement {
     }
@@ -2138,6 +2360,57 @@ declare global {
         prototype: HTMLAfHeadingElement;
         new (): HTMLAfHeadingElement;
     };
+    /**
+     * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations
+     * the Affinda marketing site (and sibling apps) currently ship. Covers five
+     * canonical patterns via the `variant` prop:
+     * - `inkwell-photo` — inkwell background, blob-masked photo on the right.
+     *   Use for: listing / archive pages (blog, case-studies, whitepapers,
+     *   value-creation, about-us) and industry landing pages that carry a
+     *   photograph instead of an illustration.
+     * - `inkwell-illustration` — inkwell background, illustration on the right.
+     *   Use for: industry landing pages, /industries, /integrations, /platform
+     *   with bespoke art.
+     * - `inkwell-centered` — inkwell background, centred typography lockup.
+     *   Slot `<af-paperclip-decoration />` into the `paperclip` slot for the
+     *   watermark treatment. Use for: `/`, `/au`, `/platform`.
+     * - `soft-clay-illustration` — soft-clay background, illustration on the
+     *   right. Use for: /news, /industries overview, /security, /compare.
+     * - `mist-green-illustration` — same layout as soft-clay-illustration but on
+     *   the mist-green theme. Reserved for future pages.
+     * ## Slots
+     * - default — heading content (use when richer markup than the `heading`
+     *   prop can express is needed; e.g. coloured spans or line breaks).
+     * - `description` — supporting copy under the heading.
+     * - `badge` — optional pre-heading label (pill, version tag).
+     * - `buttons` — hero CTAs (usually an `<af-button-group>`).
+     * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in
+     *   the blob mask automatically.
+     * - `illustration` — the illustration SVG for `-illustration` variants.
+     * - `paperclip` — watermark for `inkwell-centered`. Consumers typically
+     *   slot `<af-paperclip-decoration />` here.
+     * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).
+     *   Painted with the theme's background so it cleanly overlaps the image's
+     *   lower edge on the photo variant.
+     * ## Float-navbar handling
+     * When `floatNavbar` is true (the default for the inkwell variants) the
+     * component sets `data-af-hero-float-navbar="true"` on `<body>` via a
+     * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies
+     * the `body > header { position: absolute }` / `main { padding-top: 0 }`
+     * / navbar-spacer-transparent treatment. Consumers already import
+     * `@affinda/css` so no extra import is required. The rule deactivates
+     * when the hero is removed from the DOM.
+     * ## Image lift
+     * The `inkwell-photo` variant renders the photo column with
+     * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by
+     * setting `--af-hero-image-lift` on the `<af-hero>` element.
+     */
+    interface HTMLAfHeroElement extends Components.AfHero, HTMLStencilElement {
+    }
+    var HTMLAfHeroElement: {
+        prototype: HTMLAfHeroElement;
+        new (): HTMLAfHeroElement;
+    };
     /**
      * Icon component that displays SVG icons from the Affinda icon library.
      * Icons inherit color from their parent via currentColor.
@@ -2447,6 +2720,78 @@ declare global {
         prototype: HTMLAfNumberBadgeElement;
         new (): HTMLAfNumberBadgeElement;
     };
+    /**
+     * Numbered stepper — filled soft-clay circle badges (1/2/3) paired with a
+     * heading + body description per step. Sibling to `af-stepper` (which uses
+     * outlined badges on a single spine connector); the numbered variant uses
+     * filled badges with per-step connector segments, matching the Webflow
+     * "How it works" marketing pattern.
+     * Renders children `af-numbered-stepper-item` elements horizontally on
+     * desktop (auto-stacks on mobile) or vertically when `orientation="vertical"`.
+     * The parent auto-assigns badge numbers based on DOM order, so consumers
+     * don't hand-number the steps.
+     * Headings use the shared `heading-size="card"` scale from
+     * `af-typography-lockup` (22/20px) — no bespoke font-size tokens.
+     * @example ```html
+     * <af-numbered-stepper>
+     *   <af-numbered-stepper-item>
+     *     <h3 slot="heading">Connect your ATS</h3>
+     *     <p slot="body">OAuth-based hook into the tools you already use.</p>
+     *   </af-numbered-stepper-item>
+     *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+     *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+     * </af-numbered-stepper>
+     * ```
+     */
+    interface HTMLAfNumberedStepperElement extends Components.AfNumberedStepper, HTMLStencilElement {
+    }
+    var HTMLAfNumberedStepperElement: {
+        prototype: HTMLAfNumberedStepperElement;
+        new (): HTMLAfNumberedStepperElement;
+    };
+    /**
+     * A single step within an `af-numbered-stepper`. Renders a filled soft-clay
+     * circle badge (via `af-number-badge`) alongside a heading + body lockup.
+     * The parent `af-numbered-stepper` auto-assigns the `index` prop based on
+     * DOM order. Pass `index` explicitly to override.
+     * Heading scale is the shared `card` variant from `af-typography-lockup`
+     * (22/20px) — the same ladder step used by diff-card, related-card, and
+     * other card-title uses across the design system.
+     */
+    interface HTMLAfNumberedStepperItemElement extends Components.AfNumberedStepperItem, HTMLStencilElement {
+    }
+    var HTMLAfNumberedStepperItemElement: {
+        prototype: HTMLAfNumberedStepperItemElement;
+        new (): HTMLAfNumberedStepperItemElement;
+    };
+    /**
+     * Decorative paperclip vector graphic. Renders the left-half paperclip
+     * silhouette (viewBox `0 0 655 754`) that the marketing site bleeds off
+     * the right edge of inkwell hero sections.
+     * Purely decorative — the inner `<svg>` is `aria-hidden="true"`. Size it
+     * via the `width` / `height` props (they accept any CSS length, e.g.
+     * `"655"`, `"100%"`, `"50vw"`) and position the host element in CSS.
+     * `fill` is white by default (intended for inkwell backgrounds); override
+     * for other themes, e.g. `fill="var(--colour-brand-inkwell)"` on a
+     * mist-green section. `opacity` defaults to `0.06` to match the
+     * watermark treatment used on `/`, `/au`, and `/platform`.
+     * @example ```html
+     * <af-section theme="inkwell" padding="loose" style="position:relative;overflow:hidden">
+     *   <af-paperclip-decoration
+     *     style="position:absolute;bottom:-80px;right:-80px"
+     *   ></af-paperclip-decoration>
+     *   <af-container style="position:relative;z-index:1">
+     *     <!-- hero content -->
+     *   </af-container>
+     * </af-section>
+     * ```
+     */
+    interface HTMLAfPaperclipDecorationElement extends Components.AfPaperclipDecoration, HTMLStencilElement {
+    }
+    var HTMLAfPaperclipDecorationElement: {
+        prototype: HTMLAfPaperclipDecorationElement;
+        new (): HTMLAfPaperclipDecorationElement;
+    };
     /**
      * Progress Line atom component for displaying scroll or completion progress.
      * Shows a horizontal bar with a filled portion indicating progress.
@@ -2546,6 +2891,35 @@ declare global {
         prototype: HTMLAfStackElement;
         new (): HTMLAfStackElement;
     };
+    /**
+     * Individual stat — a large value (e.g. "1B+") paired with a descriptive label.
+     * Intended as a slotted child of `af-stats-row`, but renders standalone too.
+     * Colour is inherited from the ancestor theme context (`af-section` /
+     * `af-card` / `af-theme-override`) via the `--af-typography-*` tokens that
+     * `af-heading` and `af-text` already consume — no theme prop needed here.
+     */
+    interface HTMLAfStatElement extends Components.AfStat, HTMLStencilElement {
+    }
+    var HTMLAfStatElement: {
+        prototype: HTMLAfStatElement;
+        new (): HTMLAfStatElement;
+    };
+    /**
+     * Layout container for a horizontal row of `af-stat` children.
+     * Flex row that wraps to a grid on narrow viewports. Uses `scoped: true`
+     * so slotted `<af-stat>` children stay in the light DOM and inherit the
+     * ancestor theme (`af-section`) via the cascaded `.theme-*` class.
+     * Intentionally has **no `theme` prop** — a stats row is always flush
+     * against its section background, so a local theme would fight the
+     * ancestor. If you need a different background for the row, wrap it in
+     * its own `af-section` or `af-theme-override`.
+     */
+    interface HTMLAfStatsRowElement extends Components.AfStatsRow, HTMLStencilElement {
+    }
+    var HTMLAfStatsRowElement: {
+        prototype: HTMLAfStatsRowElement;
+        new (): HTMLAfStatsRowElement;
+    };
     /**
      * Stepper composite for "Sign up / Upload / See results"-style marketing
      * flows. Renders children `af-stepper-step` elements in a horizontal row
@@ -2780,7 +3154,7 @@ declare global {
      * Marketing-style composition of heading + description + buttons with
      * consistent spacing and alignment driven by the `headingSize` prop.
      * **Semantic vs visual:** `headingSize` controls ONLY the visual scale
-     * (the lockup sets font-size via a `heading-{1..5}` class). The semantic
+     * (the lockup sets font-size via a `heading-{1..5|card}` class). The semantic
      * level (h1-h6) is whatever the consumer slots in as default content.
      * Keep them aligned by convention so assistive tech and search engines
      * see the right hierarchy:
@@ -2789,10 +3163,15 @@ declare global {
      *   headingSize=3 ↔ <h3>
      *   headingSize=4 ↔ <h4>
      *   headingSize=5 ↔ <h5>
+     *   headingSize="card" ↔ <h3> (card-title scale: 22/20px)
      * When a design asks for a visually small H1 or a visually large H3,
      * pass the two independently — just do it deliberately, not by
      * accident. A console warning fires in dev mode if the slotted tag is
      * more than one level away from the prop.
+     * The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)
+     * and targets card titles in dense grids (diff-card h3, NumberedStepper
+     * title, expert-insights related-card h3 on the marketing site). It sits
+     * between `4` and `5` in the type ladder.
      */
     interface HTMLAfTypographyLockupElement extends Components.AfTypographyLockup, HTMLStencilElement {
     }
@@ -2869,6 +3248,7 @@ declare global {
         "af-grid": HTMLAfGridElement;
         "af-grid-callout": HTMLAfGridCalloutElement;
         "af-heading": HTMLAfHeadingElement;
+        "af-hero": HTMLAfHeroElement;
         "af-icon": HTMLAfIconElement;
         "af-icon-box": HTMLAfIconBoxElement;
         "af-icon-button": HTMLAfIconButtonElement;
@@ -2888,6 +3268,9 @@ declare global {
         "af-nav-menu-nest": HTMLAfNavMenuNestElement;
         "af-navbar": HTMLAfNavbarElement;
         "af-number-badge": HTMLAfNumberBadgeElement;
+        "af-numbered-stepper": HTMLAfNumberedStepperElement;
+        "af-numbered-stepper-item": HTMLAfNumberedStepperItemElement;
+        "af-paperclip-decoration": HTMLAfPaperclipDecorationElement;
         "af-progress-line": HTMLAfProgressLineElement;
         "af-radio": HTMLAfRadioElement;
         "af-section": HTMLAfSectionElement;
@@ -2896,6 +3279,8 @@ declare global {
         "af-spacer": HTMLAfSpacerElement;
         "af-split-section": HTMLAfSplitSectionElement;
         "af-stack": HTMLAfStackElement;
+        "af-stat": HTMLAfStatElement;
+        "af-stats-row": HTMLAfStatsRowElement;
         "af-stepper": HTMLAfStepperElement;
         "af-stepper-step": HTMLAfStepperStepElement;
         "af-switch": HTMLAfSwitchElement;
@@ -3034,7 +3419,7 @@ declare namespace LocalJSX {
           * Theme - sets background color and provides theme context to children. Defaults to 'mist-green' if not specified.
           * @default 'mist-green'
          */
-        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "theme"?: Theme;
     }
     /**
      * Center layout component for quickly centering content.
@@ -3090,22 +3475,31 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     /**
-     * Infinite scrolling carousel for client logos.
+     * Full-width row of client logos, either infinite-scrolling (default)
+     * or a centred static row.
      * This is a section-level component that spans full width.
-     * Renders one or two scrolling rows; single row matches the Webflow
-     * reference, two rows (scrolling opposite directions) is the denser
-     * variant.
+     * Renders one or two rows; single row matches the Webflow reference,
+     * two rows is the denser variant. When `mode="scroll"` (default) rows
+     * animate in opposite directions; when `mode="static"` rows are centred
+     * and the animation is disabled.
      * For headlines, use a separate TypographyLockup or Heading component
      * above this carousel.
-     * **Seamless loop:** the CSS animation translates the track from 0% to
-     * -50% (or vice versa), which only looks continuous if the track holds
-     * two identical copies of the content end-to-end. Shadow DOM slots can
-     * only project content once, so we clone the slotted nodes in
-     * `componentDidLoad` and append the copies to the track.
+     * **Seamless loop (scroll mode only):** the CSS animation translates
+     * the track from 0% to -50% (or vice versa), which only looks continuous
+     * if the track holds two identical copies of the content end-to-end.
+     * Shadow DOM slots can only project content once, so we clone the
+     * slotted nodes in `componentDidLoad` and append the copies to the track.
+     * Static mode skips the clone — nothing is animating, so duplicating
+     * the logos would just render them twice.
      */
     interface AfClientCarousel {
         /**
-          * Number of scrolling rows. - `1` (default) — single row scrolling left, matches the Webflow reference. - `2` — two rows scrolling in opposite directions.  When `rows="2"`, slot `row-1` and `row-2` independently. When `rows="1"`, slot the default slot (unnamed) or `row-1`.
+          * Layout mode. - `scroll` (default) — infinite animated scroll; rows fill the full   width and are cloned for a seamless loop. - `static` — no animation, logos centred horizontally. Use when the   logo set is small enough to fit on screen without scrolling.
+          * @default 'scroll'
+         */
+        "mode"?: Mode;
+        /**
+          * Number of rows. - `1` (default) — single row, matches the Webflow reference. - `2` — two rows (scroll in opposite directions, or stacked when static).  When `rows="2"`, slot `row-1` and `row-2` independently. When `rows="1"`, slot the default slot (unnamed) or `row-1`.
           * @default 1
          */
         "rows"?: 1 | 2;
@@ -3244,7 +3638,7 @@ declare namespace LocalJSX {
           * Theme variant - sets background color and provides theme context. Only applies to 'standard' layout mode. Defaults to 'mist-green'.
           * @default 'mist-green'
          */
-        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "theme"?: Theme;
     }
     /**
      * Feature Grid component - CSS Grid container for feature cards.
@@ -3443,6 +3837,87 @@ declare namespace LocalJSX {
          */
         "level"?: 'xl' | '1' | '2' | '3' | '4' | '5';
     }
+    /**
+     * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations
+     * the Affinda marketing site (and sibling apps) currently ship. Covers five
+     * canonical patterns via the `variant` prop:
+     * - `inkwell-photo` — inkwell background, blob-masked photo on the right.
+     *   Use for: listing / archive pages (blog, case-studies, whitepapers,
+     *   value-creation, about-us) and industry landing pages that carry a
+     *   photograph instead of an illustration.
+     * - `inkwell-illustration` — inkwell background, illustration on the right.
+     *   Use for: industry landing pages, /industries, /integrations, /platform
+     *   with bespoke art.
+     * - `inkwell-centered` — inkwell background, centred typography lockup.
+     *   Slot `<af-paperclip-decoration />` into the `paperclip` slot for the
+     *   watermark treatment. Use for: `/`, `/au`, `/platform`.
+     * - `soft-clay-illustration` — soft-clay background, illustration on the
+     *   right. Use for: /news, /industries overview, /security, /compare.
+     * - `mist-green-illustration` — same layout as soft-clay-illustration but on
+     *   the mist-green theme. Reserved for future pages.
+     * ## Slots
+     * - default — heading content (use when richer markup than the `heading`
+     *   prop can express is needed; e.g. coloured spans or line breaks).
+     * - `description` — supporting copy under the heading.
+     * - `badge` — optional pre-heading label (pill, version tag).
+     * - `buttons` — hero CTAs (usually an `<af-button-group>`).
+     * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in
+     *   the blob mask automatically.
+     * - `illustration` — the illustration SVG for `-illustration` variants.
+     * - `paperclip` — watermark for `inkwell-centered`. Consumers typically
+     *   slot `<af-paperclip-decoration />` here.
+     * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).
+     *   Painted with the theme's background so it cleanly overlaps the image's
+     *   lower edge on the photo variant.
+     * ## Float-navbar handling
+     * When `floatNavbar` is true (the default for the inkwell variants) the
+     * component sets `data-af-hero-float-navbar="true"` on `<body>` via a
+     * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies
+     * the `body > header { position: absolute }` / `main { padding-top: 0 }`
+     * / navbar-spacer-transparent treatment. Consumers already import
+     * `@affinda/css` so no extra import is required. The rule deactivates
+     * when the hero is removed from the DOM.
+     * ## Image lift
+     * The `inkwell-photo` variant renders the photo column with
+     * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by
+     * setting `--af-hero-image-lift` on the `<af-hero>` element.
+     */
+    interface AfHero {
+        /**
+          * Description text (use the `description` slot for richer markup).
+          * @default ''
+         */
+        "description"?: string;
+        /**
+          * Float the site header over the hero and paint the navbar-spacer transparent so the hero background flows to the top of the viewport. Defaults to true for the three inkwell variants, false for the soft-clay / mist-green illustration variants (whose consumers don't always want a full-bleed crown).
+         */
+        "floatNavbar"?: boolean;
+        /**
+          * Heading text (use the default slot for richer markup).
+          * @default ''
+         */
+        "heading"?: string;
+        /**
+          * Whether to apply the blob mask to the slotted `image`. Defaults to `true` for `inkwell-photo`. Set `false` if you want to slot in a pre-masked raster or a custom wrapper.
+          * @default true
+         */
+        "maskImage"?: boolean;
+        /**
+          * Typography lockup max-width (px). Defaults to 620, matching the live site.
+          * @default 620
+         */
+        "maxWidth"?: number;
+        /**
+          * Top padding preset. `default` = 124px (matches IndustryHero / IllustrationHero). `loose` = 164px (matches ListingHero — gives the image a touch more breathing room above the lockup on archive pages).
+          * @default 'default'
+         */
+        "topPad"?: HeroTopPad;
+        /**
+          * Layout / theme preset. See variant docs in the component header.
+          * @default 'inkwell-photo'
+         */
+        "variant"?: HeroVariant;
+    }
     /**
      * Icon component that displays SVG icons from the Affinda icon library.
      * Icons inherit color from their parent via currentColor.
@@ -3575,7 +4050,7 @@ declare namespace LocalJSX {
           * Theme variant - sets background color and provides theme context. Defaults to 'mist-green'.
           * @default 'mist-green'
          */
-        "theme"?: 'white' | 'white-ivory' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "theme"?: Theme;
     }
     /**
      * A styled image container with rounded corners and a subtle inset border.
@@ -3668,7 +4143,7 @@ declare namespace LocalJSX {
           * Theme - sets the banner background color and typography colors
           * @default 'mist-green'
          */
-        "theme"?: BannerTheme;
+        "theme"?: Theme;
     }
     /**
      * Inline layout component for horizontal inline-flex layouts with gap and optional wrapping.
@@ -4025,7 +4500,7 @@ declare namespace LocalJSX {
         /**
           * Theme for the spacer background - should match the section below the navbar
          */
-        "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay';
+        "theme"?: Theme;
     }
     /**
      * NumberBadge displays numbers 1-10 in either a filled circle or text-only style.
@@ -4052,6 +4527,96 @@ declare namespace LocalJSX {
          */
         "variant"?: NumberBadgeVariant;
     }
+    /**
+     * Numbered stepper — filled soft-clay circle badges (1/2/3) paired with a
+     * heading + body description per step. Sibling to `af-stepper` (which uses
+     * outlined badges on a single spine connector); the numbered variant uses
+     * filled badges with per-step connector segments, matching the Webflow
+     * "How it works" marketing pattern.
+     * Renders children `af-numbered-stepper-item` elements horizontally on
+     * desktop (auto-stacks on mobile) or vertically when `orientation="vertical"`.
+     * The parent auto-assigns badge numbers based on DOM order, so consumers
+     * don't hand-number the steps.
+     * Headings use the shared `heading-size="card"` scale from
+     * `af-typography-lockup` (22/20px) — no bespoke font-size tokens.
+     * @example ```html
+     * <af-numbered-stepper>
+     *   <af-numbered-stepper-item>
+     *     <h3 slot="heading">Connect your ATS</h3>
+     *     <p slot="body">OAuth-based hook into the tools you already use.</p>
+     *   </af-numbered-stepper-item>
+     *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+     *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+     * </af-numbered-stepper>
+     * ```
+     */
+    interface AfNumberedStepper {
+        /**
+          * Layout orientation. Horizontal auto-stacks to vertical on mobile.
+          * @default 'horizontal'
+         */
+        "orientation"?: 'horizontal' | 'vertical';
+    }
+    /**
+     * A single step within an `af-numbered-stepper`. Renders a filled soft-clay
+     * circle badge (via `af-number-badge`) alongside a heading + body lockup.
+     * The parent `af-numbered-stepper` auto-assigns the `index` prop based on
+     * DOM order. Pass `index` explicitly to override.
+     * Heading scale is the shared `card` variant from `af-typography-lockup`
+     * (22/20px) — the same ladder step used by diff-card, related-card, and
+     * other card-title uses across the design system.
+     */
+    interface AfNumberedStepperItem {
+        /**
+          * Step number shown in the badge. Auto-assigned by the parent stepper if not explicitly set.
+          * @default 1
+         */
+        "index"?: number;
+    }
+    /**
+     * Decorative paperclip vector graphic. Renders the left-half paperclip
+     * silhouette (viewBox `0 0 655 754`) that the marketing site bleeds off
+     * the right edge of inkwell hero sections.
+     * Purely decorative — the inner `<svg>` is `aria-hidden="true"`. Size it
+     * via the `width` / `height` props (they accept any CSS length, e.g.
+     * `"655"`, `"100%"`, `"50vw"`) and position the host element in CSS.
+     * `fill` is white by default (intended for inkwell backgrounds); override
+     * for other themes, e.g. `fill="var(--colour-brand-inkwell)"` on a
+     * mist-green section. `opacity` defaults to `0.06` to match the
+     * watermark treatment used on `/`, `/au`, and `/platform`.
+     * @example ```html
+     * <af-section theme="inkwell" padding="loose" style="position:relative;overflow:hidden">
+     *   <af-paperclip-decoration
+     *     style="position:absolute;bottom:-80px;right:-80px"
+     *   ></af-paperclip-decoration>
+     *   <af-container style="position:relative;z-index:1">
+     *     <!-- hero content -->
+     *   </af-container>
+     * </af-section>
+     * ```
+     */
+    interface AfPaperclipDecoration {
+        /**
+          * Fill colour. Defaults to `white` (designed for inkwell backgrounds); override for other themes, e.g. `var(--colour-brand-inkwell)` on a mist-green section.
+          * @default 'white'
+         */
+        "fill"?: string;
+        /**
+          * SVG height — accepts any CSS length or unitless number (pixels). Defaults to the intrinsic viewBox height (`754`).
+          * @default '754'
+         */
+        "height"?: string;
+        /**
+          * Fill opacity of the paperclip shape. Defaults to `0.06` to match the marketing-site watermark treatment.
+          * @default 0.06
+         */
+        "opacity"?: number;
+        /**
+          * SVG width — accepts any CSS length or unitless number (pixels). Defaults to the intrinsic viewBox width (`655`).
+          * @default '655'
+         */
+        "width"?: string;
+    }
     /**
      * Progress Line atom component for displaying scroll or completion progress.
      * Shows a horizontal bar with a filled portion indicating progress.
@@ -4111,12 +4676,12 @@ declare namespace LocalJSX {
           * Padding variant
           * @default 'default'
          */
-        "padding"?: 'none' | 'tight' | 'default' | 'loose';
+        "padding"?: Padding;
         /**
           * Theme - sets background color and provides theme context to children
           * @default 'white'
          */
-        "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+        "theme"?: Theme;
     }
     /**
      * Show component for responsive visibility control.
@@ -4199,7 +4764,7 @@ declare namespace LocalJSX {
           * Padding variant
           * @default 'default'
          */
-        "padding"?: 'none' | 'tight' | 'default' | 'loose';
+        "padding"?: Padding;
         /**
           * Theme for the top half of the section
           * @default 'mist-green'
@@ -4237,6 +4802,35 @@ declare namespace LocalJSX {
          */
         "wrap"?: boolean;
     }
+    /**
+     * Individual stat — a large value (e.g. "1B+") paired with a descriptive label.
+     * Intended as a slotted child of `af-stats-row`, but renders standalone too.
+     * Colour is inherited from the ancestor theme context (`af-section` /
+     * `af-card` / `af-theme-override`) via the `--af-typography-*` tokens that
+     * `af-heading` and `af-text` already consume — no theme prop needed here.
+     */
+    interface AfStat {
+        /**
+          * Description / caption rendered beneath the value.
+         */
+        "label": string;
+        /**
+          * The statistic headline value (e.g. "1B+", "95%", "10+").
+         */
+        "value": string;
+    }
+    /**
+     * Layout container for a horizontal row of `af-stat` children.
+     * Flex row that wraps to a grid on narrow viewports. Uses `scoped: true`
+     * so slotted `<af-stat>` children stay in the light DOM and inherit the
+     * ancestor theme (`af-section`) via the cascaded `.theme-*` class.
+     * Intentionally has **no `theme` prop** — a stats row is always flush
+     * against its section background, so a local theme would fight the
+     * ancestor. If you need a different background for the row, wrap it in
+     * its own `af-section` or `af-theme-override`.
+     */
+    interface AfStatsRow {
+    }
     /**
      * Stepper composite for "Sign up / Upload / See results"-style marketing
      * flows. Renders children `af-stepper-step` elements in a horizontal row
@@ -4638,13 +5232,13 @@ declare namespace LocalJSX {
           * The theme to apply to child components. Overrides any inherited theme from parent containers.
           * @default 'white'
          */
-        "theme"?: 'white' | 'inkwell' | 'mist-green' | 'soft-clay' | 'white-ivory';
+        "theme"?: Theme;
     }
     /**
      * Marketing-style composition of heading + description + buttons with
      * consistent spacing and alignment driven by the `headingSize` prop.
      * **Semantic vs visual:** `headingSize` controls ONLY the visual scale
-     * (the lockup sets font-size via a `heading-{1..5}` class). The semantic
+     * (the lockup sets font-size via a `heading-{1..5|card}` class). The semantic
      * level (h1-h6) is whatever the consumer slots in as default content.
      * Keep them aligned by convention so assistive tech and search engines
      * see the right hierarchy:
@@ -4653,10 +5247,15 @@ declare namespace LocalJSX {
      *   headingSize=3 ↔ <h3>
      *   headingSize=4 ↔ <h4>
      *   headingSize=5 ↔ <h5>
+     *   headingSize="card" ↔ <h3> (card-title scale: 22/20px)
      * When a design asks for a visually small H1 or a visually large H3,
      * pass the two independently — just do it deliberately, not by
      * accident. A console warning fires in dev mode if the slotted tag is
      * more than one level away from the prop.
+     * The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)
+     * and targets card titles in dense grids (diff-card h3, NumberedStepper
+     * title, expert-insights related-card h3 on the marketing site). It sits
+     * between `4` and `5` in the type ladder.
      */
     interface AfTypographyLockup {
         /**
@@ -4692,10 +5291,10 @@ declare namespace LocalJSX {
          */
         "headingColor"?: 'primary' | 'secondary';
         /**
-          * The heading size (1-5, where 1 is largest). Controls visual scale only — pair with a matching <h1>-<h5> slotted element for correct document outline (see component docblock).
+          * The heading size (1-5, or "card"; 1 is largest). Controls visual scale only — pair with a matching <h1>-<h5> slotted element for correct document outline (see component docblock). The `card` variant sits between 4 and 5 at 22/20px and is meant for card titles.
           * @default 2
          */
-        "headingSize"?: 1 | 2 | 3 | 4 | 5;
+        "headingSize"?: HeadingSize;
         /**
           * Maximum width for the copy section (in pixels)
          */
@@ -4780,6 +5379,7 @@ declare namespace LocalJSX {
         "af-grid": AfGrid;
         "af-grid-callout": AfGridCallout;
         "af-heading": AfHeading;
+        "af-hero": AfHero;
         "af-icon": AfIcon;
         "af-icon-box": AfIconBox;
         "af-icon-button": AfIconButton;
@@ -4799,6 +5399,9 @@ declare namespace LocalJSX {
         "af-nav-menu-nest": AfNavMenuNest;
         "af-navbar": AfNavbar;
         "af-number-badge": AfNumberBadge;
+        "af-numbered-stepper": AfNumberedStepper;
+        "af-numbered-stepper-item": AfNumberedStepperItem;
+        "af-paperclip-decoration": AfPaperclipDecoration;
         "af-progress-line": AfProgressLine;
         "af-radio": AfRadio;
         "af-section": AfSection;
@@ -4807,6 +5410,8 @@ declare namespace LocalJSX {
         "af-spacer": AfSpacer;
         "af-split-section": AfSplitSection;
         "af-stack": AfStack;
+        "af-stat": AfStat;
+        "af-stats-row": AfStatsRow;
         "af-stepper": AfStepper;
         "af-stepper-step": AfStepperStep;
         "af-switch": AfSwitch;
@@ -4870,18 +5475,22 @@ declare module "@stencil/core" {
              */
             "af-checkbox": LocalJSX.AfCheckbox & JSXBase.HTMLAttributes<HTMLAfCheckboxElement>;
             /**
-             * Infinite scrolling carousel for client logos.
+             * Full-width row of client logos, either infinite-scrolling (default)
+             * or a centred static row.
              * This is a section-level component that spans full width.
-             * Renders one or two scrolling rows; single row matches the Webflow
-             * reference, two rows (scrolling opposite directions) is the denser
-             * variant.
+             * Renders one or two rows; single row matches the Webflow reference,
+             * two rows is the denser variant. When `mode="scroll"` (default) rows
+             * animate in opposite directions; when `mode="static"` rows are centred
+             * and the animation is disabled.
              * For headlines, use a separate TypographyLockup or Heading component
              * above this carousel.
-             * **Seamless loop:** the CSS animation translates the track from 0% to
-             * -50% (or vice versa), which only looks continuous if the track holds
-             * two identical copies of the content end-to-end. Shadow DOM slots can
-             * only project content once, so we clone the slotted nodes in
-             * `componentDidLoad` and append the copies to the track.
+             * **Seamless loop (scroll mode only):** the CSS animation translates
+             * the track from 0% to -50% (or vice versa), which only looks continuous
+             * if the track holds two identical copies of the content end-to-end.
+             * Shadow DOM slots can only project content once, so we clone the
+             * slotted nodes in `componentDidLoad` and append the copies to the track.
+             * Static mode skips the clone — nothing is animating, so duplicating
+             * the logos would just render them twice.
              */
             "af-client-carousel": LocalJSX.AfClientCarousel & JSXBase.HTMLAttributes<HTMLAfClientCarouselElement>;
             "af-color-swatch": LocalJSX.AfColorSwatch & JSXBase.HTMLAttributes<HTMLAfColorSwatchElement>;
@@ -4986,6 +5595,52 @@ declare module "@stencil/core" {
              * via CSS custom properties.
              */
             "af-heading": LocalJSX.AfHeading & JSXBase.HTMLAttributes<HTMLAfHeadingElement>;
+            /**
+             * Unified top-of-page hero — replaces the 7+ hand-rolled hero implementations
+             * the Affinda marketing site (and sibling apps) currently ship. Covers five
+             * canonical patterns via the `variant` prop:
+             * - `inkwell-photo` — inkwell background, blob-masked photo on the right.
+             *   Use for: listing / archive pages (blog, case-studies, whitepapers,
+             *   value-creation, about-us) and industry landing pages that carry a
+             *   photograph instead of an illustration.
+             * - `inkwell-illustration` — inkwell background, illustration on the right.
+             *   Use for: industry landing pages, /industries, /integrations, /platform
+             *   with bespoke art.
+             * - `inkwell-centered` — inkwell background, centred typography lockup.
+             *   Slot `<af-paperclip-decoration />` into the `paperclip` slot for the
+             *   watermark treatment. Use for: `/`, `/au`, `/platform`.
+             * - `soft-clay-illustration` — soft-clay background, illustration on the
+             *   right. Use for: /news, /industries overview, /security, /compare.
+             * - `mist-green-illustration` — same layout as soft-clay-illustration but on
+             *   the mist-green theme. Reserved for future pages.
+             * ## Slots
+             * - default — heading content (use when richer markup than the `heading`
+             *   prop can express is needed; e.g. coloured spans or line breaks).
+             * - `description` — supporting copy under the heading.
+             * - `badge` — optional pre-heading label (pill, version tag).
+             * - `buttons` — hero CTAs (usually an `<af-button-group>`).
+             * - `image` — the photograph for the `inkwell-photo` variant. Wrapped in
+             *   the blob mask automatically.
+             * - `illustration` — the illustration SVG for `-illustration` variants.
+             * - `paperclip` — watermark for `inkwell-centered`. Consumers typically
+             *   slot `<af-paperclip-decoration />` here.
+             * - `logos-below` — overlap row at the bottom gutter (logo carousel etc.).
+             *   Painted with the theme's background so it cleanly overlaps the image's
+             *   lower edge on the photo variant.
+             * ## Float-navbar handling
+             * When `floatNavbar` is true (the default for the inkwell variants) the
+             * component sets `data-af-hero-float-navbar="true"` on `<body>` via a
+             * lifecycle hook, and a companion rule in `@affinda/css/base.css` applies
+             * the `body > header { position: absolute }` / `main { padding-top: 0 }`
+             * / navbar-spacer-transparent treatment. Consumers already import
+             * `@affinda/css` so no extra import is required. The rule deactivates
+             * when the hero is removed from the DOM.
+             * ## Image lift
+             * The `inkwell-photo` variant renders the photo column with
+             * `margin-top: var(--af-hero-image-lift, -260px)`. Override per-page by
+             * setting `--af-hero-image-lift` on the `<af-hero>` element.
+             */
+            "af-hero": LocalJSX.AfHero & JSXBase.HTMLAttributes<HTMLAfHeroElement>;
             /**
              * Icon component that displays SVG icons from the Affinda icon library.
              * Icons inherit color from their parent via currentColor.
@@ -5163,6 +5818,63 @@ declare module "@stencil/core" {
              * ```
              */
             "af-number-badge": LocalJSX.AfNumberBadge & JSXBase.HTMLAttributes<HTMLAfNumberBadgeElement>;
+            /**
+             * Numbered stepper — filled soft-clay circle badges (1/2/3) paired with a
+             * heading + body description per step. Sibling to `af-stepper` (which uses
+             * outlined badges on a single spine connector); the numbered variant uses
+             * filled badges with per-step connector segments, matching the Webflow
+             * "How it works" marketing pattern.
+             * Renders children `af-numbered-stepper-item` elements horizontally on
+             * desktop (auto-stacks on mobile) or vertically when `orientation="vertical"`.
+             * The parent auto-assigns badge numbers based on DOM order, so consumers
+             * don't hand-number the steps.
+             * Headings use the shared `heading-size="card"` scale from
+             * `af-typography-lockup` (22/20px) — no bespoke font-size tokens.
+             * @example ```html
+             * <af-numbered-stepper>
+             *   <af-numbered-stepper-item>
+             *     <h3 slot="heading">Connect your ATS</h3>
+             *     <p slot="body">OAuth-based hook into the tools you already use.</p>
+             *   </af-numbered-stepper-item>
+             *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+             *   <af-numbered-stepper-item>...</af-numbered-stepper-item>
+             * </af-numbered-stepper>
+             * ```
+             */
+            "af-numbered-stepper": LocalJSX.AfNumberedStepper & JSXBase.HTMLAttributes<HTMLAfNumberedStepperElement>;
+            /**
+             * A single step within an `af-numbered-stepper`. Renders a filled soft-clay
+             * circle badge (via `af-number-badge`) alongside a heading + body lockup.
+             * The parent `af-numbered-stepper` auto-assigns the `index` prop based on
+             * DOM order. Pass `index` explicitly to override.
+             * Heading scale is the shared `card` variant from `af-typography-lockup`
+             * (22/20px) — the same ladder step used by diff-card, related-card, and
+             * other card-title uses across the design system.
+             */
+            "af-numbered-stepper-item": LocalJSX.AfNumberedStepperItem & JSXBase.HTMLAttributes<HTMLAfNumberedStepperItemElement>;
+            /**
+             * Decorative paperclip vector graphic. Renders the left-half paperclip
+             * silhouette (viewBox `0 0 655 754`) that the marketing site bleeds off
+             * the right edge of inkwell hero sections.
+             * Purely decorative — the inner `<svg>` is `aria-hidden="true"`. Size it
+             * via the `width` / `height` props (they accept any CSS length, e.g.
+             * `"655"`, `"100%"`, `"50vw"`) and position the host element in CSS.
+             * `fill` is white by default (intended for inkwell backgrounds); override
+             * for other themes, e.g. `fill="var(--colour-brand-inkwell)"` on a
+             * mist-green section. `opacity` defaults to `0.06` to match the
+             * watermark treatment used on `/`, `/au`, and `/platform`.
+             * @example ```html
+             * <af-section theme="inkwell" padding="loose" style="position:relative;overflow:hidden">
+             *   <af-paperclip-decoration
+             *     style="position:absolute;bottom:-80px;right:-80px"
+             *   ></af-paperclip-decoration>
+             *   <af-container style="position:relative;z-index:1">
+             *     <!-- hero content -->
+             *   </af-container>
+             * </af-section>
+             * ```
+             */
+            "af-paperclip-decoration": LocalJSX.AfPaperclipDecoration & JSXBase.HTMLAttributes<HTMLAfPaperclipDecorationElement>;
             /**
              * Progress Line atom component for displaying scroll or completion progress.
              * Shows a horizontal bar with a filled portion indicating progress.
@@ -5211,6 +5923,25 @@ declare module "@stencil/core" {
              * Uses design tokens for gap values.
              */
             "af-stack": LocalJSX.AfStack & JSXBase.HTMLAttributes<HTMLAfStackElement>;
+            /**
+             * Individual stat — a large value (e.g. "1B+") paired with a descriptive label.
+             * Intended as a slotted child of `af-stats-row`, but renders standalone too.
+             * Colour is inherited from the ancestor theme context (`af-section` /
+             * `af-card` / `af-theme-override`) via the `--af-typography-*` tokens that
+             * `af-heading` and `af-text` already consume — no theme prop needed here.
+             */
+            "af-stat": LocalJSX.AfStat & JSXBase.HTMLAttributes<HTMLAfStatElement>;
+            /**
+             * Layout container for a horizontal row of `af-stat` children.
+             * Flex row that wraps to a grid on narrow viewports. Uses `scoped: true`
+             * so slotted `<af-stat>` children stay in the light DOM and inherit the
+             * ancestor theme (`af-section`) via the cascaded `.theme-*` class.
+             * Intentionally has **no `theme` prop** — a stats row is always flush
+             * against its section background, so a local theme would fight the
+             * ancestor. If you need a different background for the row, wrap it in
+             * its own `af-section` or `af-theme-override`.
+             */
+            "af-stats-row": LocalJSX.AfStatsRow & JSXBase.HTMLAttributes<HTMLAfStatsRowElement>;
             /**
              * Stepper composite for "Sign up / Upload / See results"-style marketing
              * flows. Renders children `af-stepper-step` elements in a horizontal row
@@ -5327,7 +6058,7 @@ declare module "@stencil/core" {
              * Marketing-style composition of heading + description + buttons with
              * consistent spacing and alignment driven by the `headingSize` prop.
              * **Semantic vs visual:** `headingSize` controls ONLY the visual scale
-             * (the lockup sets font-size via a `heading-{1..5}` class). The semantic
+             * (the lockup sets font-size via a `heading-{1..5|card}` class). The semantic
              * level (h1-h6) is whatever the consumer slots in as default content.
              * Keep them aligned by convention so assistive tech and search engines
              * see the right hierarchy:
@@ -5336,10 +6067,15 @@ declare module "@stencil/core" {
              *   headingSize=3 ↔ <h3>
              *   headingSize=4 ↔ <h4>
              *   headingSize=5 ↔ <h5>
+             *   headingSize="card" ↔ <h3> (card-title scale: 22/20px)
              * When a design asks for a visually small H1 or a visually large H3,
              * pass the two independently — just do it deliberately, not by
              * accident. A console warning fires in dev mode if the slotted tag is
              * more than one level away from the prop.
+             * The `card` variant renders slightly larger than `5` (22/20px vs 20/18px)
+             * and targets card titles in dense grids (diff-card h3, NumberedStepper
+             * title, expert-insights related-card h3 on the marketing site). It sits
+             * between `4` and `5` in the type ladder.
              */
             "af-typography-lockup": LocalJSX.AfTypographyLockup & JSXBase.HTMLAttributes<HTMLAfTypographyLockupElement>;
             /**