@hraness/design-kit 0.31.1

package/src/portfolio.ts

@@ -0,0 +1,226 @@
+/**
+ * Public Hraness portfolio facts: product names, one-liners, canonical URLs,
+ * status, and the registered relations between products.
+ *
+ * The data is a versioned snapshot generated by `scripts/sync-portfolio-facts.ts`
+ * from one exact commit of the Hraness portfolio registry, recorded in
+ * `portfolioProvenance`. This
+ * module holds data and pure helpers only. It renders nothing and imports no
+ * other part of the package.
+ */
+import { portfolioSnapshot } from "./portfolio.generated.js";
+
+export const portfolioRelationKinds = ["runtime", "development", "contract", "delivery"] as const;
+export type PortfolioRelationKind = (typeof portfolioRelationKinds)[number];
+
+/** `forward` reads source to target; `shared` is a symmetric contract both sides implement. */
+export const portfolioRelationDirections = ["forward", "shared"] as const;
+export type PortfolioRelationDirection = (typeof portfolioRelationDirections)[number];
+
+/** Every product in the public portfolio contract is an active product. */
+export const portfolioProductStatuses = ["active"] as const;
+export type PortfolioProductStatus = (typeof portfolioProductStatuses)[number];
+
+/** Whether the registry's structured marketing copy is reviewed (`authored`) or a draft (`proposed`). */
+export const portfolioCopyStatuses = ["authored", "proposed"] as const;
+export type PortfolioCopyStatus = (typeof portfolioCopyStatuses)[number];
+
+export type PortfolioProductId = keyof typeof portfolioSnapshot.products;
+
+/** The canonical messaging record for one product, verbatim from the public portfolio contract. */
+export type PortfolioMessaging = Readonly<{
+  formatVersion: 1;
+  /** The canonical product slug, which can differ from the registry id. */
+  product: string;
+  names: Readonly<{
+    /** The prose name, used inside sentences. */
+    name: string;
+    /** The all-caps catalog name hraness.com cards display. */
+    catalog?: string;
+    command?: string;
+    /** Retired names that still route to the product. */
+    formerly?: readonly string[];
+  }>;
+  /** The product class, at most four words. */
+  category: string;
+  tagline: string;
+  /** The card line; sentence case without the product name or a final period. */
+  short: string;
+  /** The 110-to-160-character description for meta tags, GitHub About, and listings. */
+  meta: string;
+  /** Two-sentence copy that opens with the product name. */
+  medium: string;
+  long?: string;
+  headlines?: readonly string[];
+  hero?: Readonly<{
+    heading?: string;
+    summary?: string;
+    primaryAction?: string;
+    secondaryAction?: string;
+  }>;
+  channels?: Readonly<Record<string, unknown>>;
+  /** Per-tier authorship; tiers not listed take `default`. */
+  status: Readonly<{ default: PortfolioCopyStatus } & Partial<Record<string, PortfolioCopyStatus>>>;
+  reviewedOn?: string;
+}>;
+
+export type PortfolioProduct = Readonly<{
+  id: PortfolioProductId;
+  /** The name in its canonical casing, taken from the product's brand entry when it owns its host. */
+  name: string;
+  /** The product's `short` line in canonical casing. */
+  oneLiner: string;
+  /** The brand catalog's description, or null when it has none. It can differ from `oneLiner`. */
+  brandDescription: string | null;
+  canonicalUrl: string;
+  status: PortfolioProductStatus;
+  /** Whether the registry's default copy tier is reviewed (`authored`) or a draft (`proposed`). */
+  copyStatus: PortfolioCopyStatus;
+  /** Other names the registry uses for the product, such as an expanded, display, or retired name. */
+  aliases: readonly string[];
+  /** The product's portfolio mark as an inert `data:image/svg+xml` URL, the artwork hraness.com project cards show. */
+  mark: string;
+  /** The canonical tiered copy record: names, category, tagline, short, meta, medium, long, hero, and channels. */
+  messaging: PortfolioMessaging;
+}>;
+
+export type PortfolioRelation = Readonly<{
+  id: string;
+  source: PortfolioProductId;
+  target: PortfolioProductId;
+  kind: PortfolioRelationKind;
+  direction: PortfolioRelationDirection;
+  /** A short registry label such as "compacts sessions for". It is not reader-facing copy. */
+  label: string;
+  /** One reviewed sentence describing the integration, or null when none is registered. */
+  detail: string | null;
+}>;
+
+export type PortfolioProvenance = Readonly<{
+  /** The public home of the upstream facts, https://hraness.com/portfolio.json. */
+  registry: string;
+  /** The full 40-character registry commit the snapshot was generated from. */
+  commit: string;
+  /** The commit's date, YYYY-MM-DD. */
+  committedOn: string;
+  upstreamContract: string;
+  upstreamDigest: string;
+  files: readonly Readonly<{ path: string; sha256: string }>[];
+}>;
+
+export type PortfolioSnapshot = Readonly<{
+  contract: "hraness.design-kit-portfolio/v1";
+  formatVersion: 1;
+  provenance: PortfolioProvenance;
+  products: Readonly<Record<PortfolioProductId, PortfolioProduct>>;
+  relations: readonly PortfolioRelation[];
+  /** SHA-256 of the snapshot's compact JSON without this key. Pin it in a consumer test. */
+  digest: string;
+}>;
+
+/** A related-product card, shaped for `MarketingRelated` and `ArticleRelatedProducts` items. */
+export type PortfolioRelatedItem = Readonly<{
+  href: string;
+  name: string;
+  /** The related product's one-liner, the line the card shows. */
+  role: string;
+  /** The related product's portfolio mark, a `data:image/svg+xml` URL. */
+  mark: string;
+  /** The relation's reviewed detail sentence. Cards no longer show it; articles can quote it. */
+  relationship: string;
+  productId: PortfolioProductId;
+  relationId: string;
+}>;
+
+/** A product pair joined by a relation with a reviewed detail, for "How X uses Y" posts. */
+export type PortfolioUsesPair = Readonly<{
+  relation: PortfolioRelation & Readonly<{ detail: string }>;
+  source: PortfolioProduct;
+  target: PortfolioProduct;
+}>;
+
+export class PortfolioFactsError extends Error {
+  override readonly name = "PortfolioFactsError";
+}
+
+function deepFreeze<T>(value: T): T {
+  if (typeof value === "object" && value !== null && !Object.isFrozen(value)) {
+    for (const child of Object.values(value)) deepFreeze(child);
+    Object.freeze(value);
+  }
+  return value;
+}
+
+/** The whole snapshot, frozen so one consumer cannot change another's facts at runtime. */
+export const portfolioFacts: PortfolioSnapshot = deepFreeze(portfolioSnapshot);
+export const portfolioProducts: PortfolioSnapshot["products"] = portfolioFacts.products;
+export const portfolioRelations: PortfolioSnapshot["relations"] = portfolioFacts.relations;
+export const portfolioProvenance: PortfolioProvenance = portfolioFacts.provenance;
+export const portfolioDigest: string = portfolioFacts.digest;
+
+/** Product ids in registry order. */
+export const portfolioProductIds: readonly PortfolioProductId[] = Object.freeze(
+  Object.keys(portfolioProducts) as PortfolioProductId[],
+);
+
+export function isPortfolioProductId(value: unknown): value is PortfolioProductId {
+  return typeof value === "string" && Object.hasOwn(portfolioProducts, value);
+}
+
+/** Returns one product, or throws `PortfolioFactsError` for an id that is not in the snapshot. */
+export function product(id: PortfolioProductId): PortfolioProduct {
+  if (!isPortfolioProductId(id)) {
+    throw new PortfolioFactsError(`Unknown portfolio product: ${String(id)}.`);
+  }
+  return portfolioProducts[id];
+}
+
+function hasDetail(relation: PortfolioRelation): relation is PortfolioRelation & Readonly<{ detail: string }> {
+  return relation.detail !== null;
+}
+
+/**
+ * Products related to `id`, one card per related product, in relation order.
+ * Only relations with a reviewed detail sentence qualify, because the card
+ * shows that sentence. Pass `kinds` to narrow the relation kinds.
+ */
+export function relatedFor(
+  id: PortfolioProductId,
+  options: Readonly<{ kinds?: readonly PortfolioRelationKind[] }> = {},
+): readonly PortfolioRelatedItem[] {
+  product(id);
+  const kinds = options.kinds ?? portfolioRelationKinds;
+  const seen = new Set<PortfolioProductId>();
+  const items: PortfolioRelatedItem[] = [];
+  for (const relation of portfolioRelations) {
+    if (!hasDetail(relation) || !kinds.includes(relation.kind)) continue;
+    const otherId = relation.source === id ? relation.target : relation.target === id ? relation.source : null;
+    if (otherId === null || otherId === id || seen.has(otherId)) continue;
+    seen.add(otherId);
+    const other = product(otherId);
+    items.push({
+      href: other.canonicalUrl,
+      name: other.name,
+      role: other.oneLiner,
+      mark: other.mark,
+      relationship: relation.detail,
+      productId: other.id,
+      relationId: relation.id,
+    });
+  }
+  return items;
+}
+
+/**
+ * Integration pairs with a reviewed detail sentence: the candidates for
+ * "How X uses Y" posts and provider hub pages. Delivery relations (one product
+ * served under another's route) are excluded. The relation does not say which
+ * side is the consumer; read `detail`.
+ */
+export function usesPairs(): readonly PortfolioUsesPair[] {
+  return portfolioRelations.filter(hasDetail).filter((relation) => relation.kind !== "delivery").map((relation) => ({
+    relation,
+    source: product(relation.source),
+    target: product(relation.target),
+  }));
+}

package/src/product-marketing-foundation.css

@@ -0,0 +1,433 @@
+@import "./site-shell.css";
+
+/* Compiler-adopter marketing foundation: public token bindings, arbitrary
+   consumer-content grammar, header capability/media tokens and direct-child layout relationships.
+   Owned React slots are compiled from product-marketing.stylex.ts.
+   The standalone product-marketing.css remains the raw HTML compatibility API. */
+@layer components.hraness-design-kit.legacy {
+.hraness-marketing-install {
+  --hraness-marketing-install-inline-size: initial;
+}
+
+:where( .hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-footer, .hraness-marketing-hero, .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section, .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-related, .hraness-marketing-cta, .hraness-marketing-proof-frame ) {
+  --hraness-marketing-ink: var(--foreground, CanvasText);
+  --hraness-marketing-muted: var(--muted, GrayText);
+  --hraness-marketing-background: var(--background, Canvas);
+  --hraness-marketing-surface: var(--surface, Canvas);
+  --hraness-marketing-line: color-mix(in srgb, var(--hraness-marketing-ink) 10%, transparent);
+  --hraness-marketing-line-strong: color-mix(in srgb, var(--hraness-marketing-ink) 22%, transparent);
+  --hraness-marketing-inverse: var(--inverse, CanvasText);
+  --hraness-marketing-inverse-ink: var(--inverse-foreground, Canvas);
+  --hraness-marketing-accent: var(--hraness-site-accent, var(--primary, oklch(0.55 0.21 262)));
+  --hraness-marketing-accent-ink: var(--hraness-site-accent-ink, var(--primary-foreground, white));
+  --hraness-marketing-accent-soft: color-mix(in srgb, var(--hraness-marketing-accent) 10%, transparent);
+  --hraness-marketing-text-font: var(--font-text, ui-sans-serif, system-ui, sans-serif);
+  --hraness-marketing-heading-font: var(--font-heading, var(--hraness-marketing-text-font));
+  --hraness-marketing-mono-font: var(--font-mono, ui-monospace, monospace);
+  --hraness-marketing-measure: 72rem;
+  --hraness-marketing-copy-measure: 54ch;
+  --hraness-marketing-prose-measure: 62ch;
+  --hraness-marketing-gutter: clamp(1.25rem, 4vw, 3rem);
+  --hraness-marketing-radius: 0.75rem;
+  --hraness-marketing-frame-radius: 1.125rem;
+  --hraness-marketing-rule: 1px solid var(--hraness-marketing-line);
+  --hraness-marketing-surface-rule: 1px solid transparent;
+  --hraness-marketing-chrome-rule: 1px solid var(--hraness-marketing-line);
+  --hraness-marketing-surface-shadow: 0 0 0 1px var(--hraness-marketing-line);
+  --hraness-marketing-chrome-shadow: none;
+  --hraness-marketing-shadow: 0 0 0 1px var(--hraness-marketing-line);
+  --hraness-marketing-section-space: clamp(4rem, 9vw, 7.5rem);
+  --hraness-marketing-heading-weight: 550;
+  --hraness-marketing-heading-tracking: -0.03em;
+  --hraness-marketing-action-height: 2.75rem;
+  --hraness-foil-1: light-dark(oklch(0.89 0.065 337), oklch(0.56 0.16 340));
+  --hraness-foil-2: light-dark(oklch(0.875 0.05 277), oklch(0.52 0.15 285));
+  --hraness-foil-3: light-dark(oklch(0.92 0.05 170), oklch(0.66 0.14 175));
+  --hraness-foil-4: light-dark(oklch(0.95 0.045 96), oklch(0.72 0.13 100));
+  --hraness-foil-5: light-dark(oklch(0.9 0.05 55), oklch(0.55 0.15 45));
+  --hraness-foil-6: light-dark(oklch(0.875 0.06 305), oklch(0.62 0.16 305));
+  --hraness-foil-edge: light-dark(black, white);
+}
+
+/* The shared foil spectrum reads the deeper palette under explicit or
+ * media-resolved dark roots; the standalone stylesheet documents the contract. */
+:where([data-theme="dark"], .dark):where(
+  .hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero,
+  .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section,
+  .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces,
+  .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing,
+  .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-related,
+  .hraness-marketing-cta,
+  .hraness-marketing-proof-frame
+),
+:where([data-theme="dark"], .dark) :where(
+  .hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero,
+  .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section,
+  .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces,
+  .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing,
+  .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-related,
+  .hraness-marketing-cta,
+  .hraness-marketing-proof-frame
+) {
+  --hraness-foil-1: oklch(0.56 0.16 340);
+  --hraness-foil-2: oklch(0.52 0.15 285);
+  --hraness-foil-3: oklch(0.66 0.14 175);
+  --hraness-foil-4: oklch(0.72 0.13 100);
+  --hraness-foil-5: oklch(0.55 0.15 45);
+  --hraness-foil-6: oklch(0.62 0.16 305);
+  --hraness-foil-edge: white;
+}
+
+@media (prefers-color-scheme: dark) {
+  :where(:root:not([data-theme="light"]):not(.light)) :where(
+    .hraness-marketing-page, .hraness-marketing-header, .hraness-marketing-hero,
+    .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section,
+    .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces,
+    .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing,
+    .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-related,
+    .hraness-marketing-cta,
+    .hraness-marketing-proof-frame
+  ) {
+    --hraness-foil-1: oklch(0.56 0.16 340);
+    --hraness-foil-2: oklch(0.52 0.15 285);
+    --hraness-foil-3: oklch(0.66 0.14 175);
+    --hraness-foil-4: oklch(0.72 0.13 100);
+    --hraness-foil-5: oklch(0.55 0.15 45);
+    --hraness-foil-6: oklch(0.62 0.16 305);
+    --hraness-foil-edge: white;
+    }
+}
+
+.hraness-marketing-page :where(p, li, dd) {
+  text-wrap: pretty;
+}
+
+.hraness-marketing-page :where(a) {
+  color: inherit;
+  text-decoration-thickness: 1px;
+  text-underline-offset: 0.16em;
+}
+
+.hraness-marketing-page :where(code, kbd, pre) {
+  font-family: var(--hraness-marketing-mono-font);
+}
+
+.hraness-marketing-page :where(pre) {
+  max-inline-size: 100%;
+  margin-block: 0;
+  padding: 1rem 1.15rem;
+  overflow: auto;
+  border-radius: var(--hraness-marketing-radius);
+  background: var(--hraness-marketing-surface);
+  color: var(--hraness-marketing-ink);
+  font-size: 0.85rem;
+  line-height: 1.6;
+  tab-size: 2;
+  white-space: pre;
+  overflow-wrap: normal;
+  word-break: normal;
+}
+
+.hraness-marketing-page :where(:not(pre) > code) {
+  padding: 0.08em 0.38em;
+  border-radius: 0.3em;
+  background: color-mix(in srgb, var(--hraness-marketing-ink) 7%, transparent);
+  font-size: 0.9em;
+}
+
+.hraness-marketing-page > :where( .hraness-marketing-hero, .hraness-marketing-pillars, .hraness-marketing-install, .hraness-marketing-section, .hraness-marketing-primitives, .hraness-marketing-stats, .hraness-marketing-interfaces, .hraness-marketing-trust, .hraness-marketing-quotes, .hraness-marketing-pricing, .hraness-marketing-questions, .hraness-marketing-maker, .hraness-marketing-related, .hraness-marketing-cta, .hraness-marketing-data-table ) {
+  padding-inline: var(--hraness-marketing-gutter);
+}
+
+/* Direct children outside the grammar still honor the measure, gutter, and
+   block rhythm: a product-owned block cannot escape the column or touch the
+   viewport edge. */
+.hraness-marketing-page > :where( :not([data-hraness-marketing], script, style, link, meta, template) ) {
+  inline-size: min(100%, var(--hraness-marketing-measure));
+  min-inline-size: 0;
+  margin-block: clamp(2rem, 5vw, 3.5rem);
+  margin-inline: auto;
+  padding-inline: var(--hraness-marketing-gutter);
+}
+
+/* Evidence-table cells align like prose by default; the numeric and tone
+   consumer hooks adjust presentation without inventing new classes. */
+.hraness-marketing-data-table__table :where( th, td ) {
+  text-align: start;
+}
+
+.hraness-marketing-data-table__table :where( [data-numeric] ) {
+  text-align: end;
+  white-space: nowrap;
+}
+
+.hraness-marketing-data-table__table :where( td[data-tone="positive"] ) {
+  color: var(--success, var(--hraness-marketing-accent));
+}
+
+.hraness-marketing-data-table__table :where( td[data-tone="negative"] ) {
+  color: var(--danger, var(--hraness-marketing-muted));
+}
+
+@media (forced-colors: active) {
+  .hraness-marketing-data-table__scroll,
+  .hraness-marketing-data-table__table tbody :where( th, td ) {
+    border-color: CanvasText;
+  }
+  .hraness-marketing-data-table__table thead :where( th ),
+  .hraness-marketing-data-table__table :where( [data-tone] ),
+  .hraness-marketing-data-table__meta,
+  .hraness-marketing-data-table__note {
+    color: CanvasText;
+  }
+}
+
+/* Section separators are a sibling relationship, not an owned atom: a ruled
+   section draws one boundary above itself, except directly after a framed
+   component whose own border already closes the block. */
+.hraness-marketing-section,
+.hraness-marketing-primitives,
+.hraness-marketing-interfaces,
+.hraness-marketing-trust,
+.hraness-marketing-quotes,
+.hraness-marketing-pricing,
+.hraness-marketing-questions,
+.hraness-marketing-maker,
+.hraness-marketing-related,
+.hraness-marketing-cta {
+  border-block-start: var(--hraness-marketing-rule);
+}
+
+:is(
+  .hraness-marketing-install,
+  .hraness-marketing-proof,
+  .hraness-marketing-proof-frame
+) + :is(
+  .hraness-marketing-section,
+  .hraness-marketing-primitives,
+  .hraness-marketing-interfaces,
+  .hraness-marketing-trust,
+  .hraness-marketing-quotes,
+  .hraness-marketing-pricing,
+  .hraness-marketing-questions,
+  .hraness-marketing-maker,
+  .hraness-marketing-related,
+  .hraness-marketing-cta
+) {
+  border-block-start: 0;
+}
+
+.hraness-marketing-header__brand :where(img, svg) {
+  block-size: 1.25rem;
+  inline-size: auto;
+}
+
+.hraness-marketing-footer__brand :where(img, svg) {
+  block-size: 1.25rem;
+  inline-size: auto;
+}
+
+.hraness-marketing-footer__inner > :where(p) {
+  margin: 0;
+  max-inline-size: 48ch;
+}
+
+.hraness-marketing-hero[data-tone="accent"] {
+  --hraness-marketing-ink: var(--hraness-marketing-accent-ink);
+  --hraness-marketing-muted: color-mix(in srgb, var(--hraness-marketing-accent-ink) 78%, transparent);
+  --hraness-marketing-line: color-mix(in srgb, var(--hraness-marketing-accent-ink) 22%, transparent);
+  --hraness-marketing-line-strong: color-mix(in srgb, var(--hraness-marketing-accent-ink) 40%, transparent);
+  --hraness-marketing-surface: color-mix(in srgb, var(--hraness-marketing-accent-ink) 12%, transparent);
+}
+
+.hraness-marketing-proof-frame__content > :where(img, video) {
+  display: block;
+  inline-size: 100%;
+  block-size: auto;
+}
+
+.hraness-marketing-proof-frame__content > :where(pre) {
+  border-radius: 0;
+}
+
+.hraness-marketing-page > .hraness-marketing-install {
+  --hraness-marketing-install-inline-size: min(100% - 2 * var(--hraness-marketing-gutter), var(--hraness-marketing-measure));
+  padding-inline: clamp(1.5rem, 4vw, 2.5rem);
+}
+
+.hraness-marketing-section__body > :where(p) {
+  max-inline-size: var(--hraness-marketing-prose-measure);
+  margin: 0;
+}
+
+.hraness-marketing-section__body > :first-child {
+  margin-block-start: 0;
+}
+
+.hraness-marketing-section__body > :last-child {
+  margin-block-end: 0;
+}
+
+.hraness-marketing-primitive p:not(:where(.hraness-marketing-primitive__summary)) {
+  margin: 0;
+  color: var(--hraness-marketing-muted);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.hraness-marketing-primitive > :where(pre, figure) {
+  margin-block-start: 0.5rem;
+}
+
+.hraness-marketing-interface p:not(:where(.hraness-marketing-interface__summary)) {
+  margin: 0;
+}
+
+.hraness-marketing-interface p:not(:where(.hraness-marketing-interface__summary)) {
+  color: var(--hraness-marketing-muted);
+  font-size: 0.95rem;
+  line-height: 1.5;
+}
+
+.hraness-marketing-interface pre {
+  margin-block-start: 0.5rem;
+}
+
+.hraness-marketing-question__answer > :first-child {
+  margin-block-start: 0;
+}
+
+.hraness-marketing-question__answer > :last-child {
+  margin-block-end: 0;
+}
+
+.hraness-marketing-maker__portrait :where(img, svg) {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+.hraness-marketing-maker__body > p {
+  max-inline-size: var(--hraness-marketing-prose-measure);
+  margin: 0;
+  color: var(--hraness-marketing-muted);
+  font-size: 1.05rem;
+  line-height: 1.55;
+}
+
+.hraness-marketing-cta[data-tone="accent"] {
+  --hraness-marketing-ink: var(--hraness-marketing-accent-ink);
+  --hraness-marketing-muted: color-mix(in srgb, var(--hraness-marketing-accent-ink) 78%, transparent);
+  --hraness-marketing-line-strong: color-mix(in srgb, var(--hraness-marketing-accent-ink) 40%, transparent);
+  --hraness-marketing-surface: transparent;
+}
+
+.hraness-marketing-stats__source :where(strong, span) {
+  display: block;
+}
+.hraness-marketing-stats__source strong {
+  font-family: var(--hraness-marketing-heading-font);
+  font-size: clamp(1.75rem, 3vw, 2.25rem);
+  font-weight: 500;
+  letter-spacing: -0.02em;
+  line-height: 1.1;
+  font-variant-numeric: tabular-nums;
+}
+.hraness-marketing-stats__source span {
+  margin-block-start: 0.3rem;
+  color: var(--hraness-marketing-muted);
+  font-size: 0.85rem;
+  line-height: 1.45;
+}
+
+/* Shared header capability/media tokens; paint stays in the owned atoms. */
+/* Keep the browser aliases in separate feature queries: CSS optimizers can
+ * collapse adjacent aliases to the prefixed property and lose Chromium blur. */
+.hraness-marketing-header {
+  --hraness-marketing-header-background: var(--hraness-marketing-background);
+  --hraness-marketing-header-backdrop: none;
+}
+
+@supports (-webkit-backdrop-filter: blur(1px)) {
+  .hraness-marketing-header {
+    --hraness-marketing-header-background: color-mix(in srgb, var(--hraness-marketing-background) 82%, transparent);
+    --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
+  }
+}
+
+@supports (backdrop-filter: blur(1px)) {
+  .hraness-marketing-header {
+    --hraness-marketing-header-background: color-mix(in srgb, var(--hraness-marketing-background) 82%, transparent);
+    --hraness-marketing-header-backdrop: blur(14px) saturate(1.4);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+  .hraness-marketing-header {
+    --hraness-marketing-header-background: var(--hraness-marketing-background);
+    --hraness-marketing-header-backdrop: none;
+  }
+}
+
+.hraness-marketing-header:not([data-position="static"]) {
+  --hraness-sticky-offset: calc(var(--hraness-marketing-header-height, 2.75rem) + 1px);
+}
+
+html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([data-position="static"])),
+.hraness-marketing-page:has(> :is(.hraness-marketing-header, .hraness-marketing-header-surface):not([data-position="static"])) {
+  --hraness-sticky-offset: calc(var(--hraness-marketing-header-height, 2.75rem) + 1px);
+}
+
+html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([data-position="static"])) {
+  scroll-padding-block-start: var(--hraness-sticky-offset);
+}
+
+.hraness-marketing-main,
+.hraness-marketing-header + :is(main, .hraness-marketing-main) {
+  scroll-margin-block-start: var(--hraness-sticky-offset);
+}
+
+.hraness-marketing-main[data-hraness-clearance="pad"],
+.hraness-marketing-header[data-position="fixed"] + :is(main, .hraness-marketing-main) {
+  padding-block-start: var(--hraness-sticky-offset);
+}
+
+.hraness-sticky-below-chrome,
+[data-hraness-sticky] {
+  position: sticky;
+  inset-block-start: var(--hraness-sticky-offset);
+  z-index: 30;
+}
+
+.hraness-marketing-card-row,
+.hraness-marketing-interface-grid,
+.hraness-marketing-trust-grid,
+.hraness-marketing-quote-grid,
+.hraness-marketing-plan-grid,
+.hraness-marketing-primitives__list {
+  align-items: stretch;
+}
+
+.hraness-marketing-card-row > *,
+.hraness-marketing-interface-grid > *,
+.hraness-marketing-trust-grid > *,
+.hraness-marketing-quote-grid > *,
+.hraness-marketing-plan-grid > *,
+.hraness-marketing-primitives__list > * {
+  min-block-size: 100%;
+  align-self: stretch;
+}
+/* Hero backdrops are retired. Hand-authored markup that still ships the old
+ * backdrop hooks paints nothing and takes no space. */
+.hraness-marketing-hero-backdrop {
+  display: none;
+}
+
+/* Keep all meaningful hero content above the inert decorative backdrop. */
+.hraness-marketing-hero > :where(.hraness-marketing-hero__copy, .hraness-marketing-hero__frame, .hraness-marketing-proof, .hraness-marketing-facts) {
+  position: relative;
+  z-index: 1;
+}
+
+}