@hraness/design-kit 0.33.0 → 0.35.0

package/src/react/marketing-account.tsx

@@ -0,0 +1,69 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+
+import { marketingAccountStyles as styles } from "./marketing-account.stylex.js";
+
+/** Optional account access near the end of a product's marketing page. */
+export function MarketingAccount({
+  children,
+  className,
+  heading = "Your account",
+  id = "account",
+  summary,
+}: Readonly<{
+  children: ReactNode;
+  className?: string;
+  heading?: string;
+  id?: string;
+  summary: ReactNode;
+}>) {
+  const presentation = stylex.props(styles.section);
+  return (
+    <section
+      {...presentation}
+      aria-labelledby={`${id}-heading`}
+      className={["hraness-marketing-account", presentation.className, className].filter(Boolean).join(" ")}
+      id={id}
+    >
+      <div {...stylex.props(styles.copy)}>
+        <h2 {...stylex.props(styles.heading)} id={`${id}-heading`}>{heading}</h2>
+        <div {...stylex.props(styles.summary)}>{summary}</div>
+      </div>
+      <div {...stylex.props(styles.content)}>{children}</div>
+    </section>
+  );
+}
+
+export interface MarketingAccountAction {
+  readonly href: string;
+  readonly analyticsEvent?: string;
+  readonly analyticsId?: string;
+}
+
+/** One prominent account action and an optional, equally tall sign-in link. */
+export function MarketingAccountActions({ primary, signIn }: Readonly<{
+  primary: MarketingAccountAction & Readonly<{ label: string }>;
+  signIn?: MarketingAccountAction;
+}>) {
+  return (
+    <div {...stylex.props(styles.actions)} className={`hraness-marketing-account__actions ${stylex.props(styles.actions).className}`}>
+      <a
+        {...stylex.props(styles.primary)}
+        className={`hraness-marketing-account__primary ${stylex.props(styles.primary).className}`}
+        data-analytics-event={primary.analyticsEvent}
+        data-analytics-id={primary.analyticsId}
+        data-emphasis="primary"
+        href={primary.href}
+      >{primary.label}</a>
+      {signIn === undefined ? null : (
+        <a
+          {...stylex.props(styles.signIn)}
+          className={`hraness-marketing-account__sign-in ${stylex.props(styles.signIn).className}`}
+          data-analytics-event={signIn.analyticsEvent}
+          data-analytics-id={signIn.analyticsId}
+          href={signIn.href}
+        >Sign in</a>
+      )}
+    </div>
+  );
+}

package/src/react/marketing-comparison.stylex.ts

@@ -0,0 +1,24 @@
+import * as stylex from "@stylexjs/stylex";
+
+export const comparisonStyles = stylex.create({
+  figure: { "margin": "0", "min-inline-size": "0", "color": "var(--hraness-marketing-ink, var(--foreground))", "font-family": "var(--font-text)" },
+  scroll: { "overflow-x": "auto", "max-inline-size": "100%", "outline": { "default": null, ":focus-visible": "2px solid var(--primary)" }, "outline-offset": { "default": null, ":focus-visible": "3px" } },
+  table: { "inline-size": "100%", "border-collapse": "collapse", "text-align": "start", "font-size": "0.9375rem", "line-height": "1.4" },
+  caption: { "padding-block-end": "1.25rem", "text-align": "start", "font-size": "1.125rem", "font-weight": "550", "color": "var(--foreground)" },
+  corner: { "min-inline-size": "9rem", "border-block-end": "1px solid var(--line)" },
+  option: { "padding": "1rem", "min-inline-size": "8.5rem", "border-block-end": "1px solid var(--line)", "vertical-align": "bottom", "font-weight": "600" },
+  optionLabel: { "display": "flex", "align-items": "center", "gap": "0.6rem" },
+  mark: { "object-fit": "contain", "flex-shrink": "0", "inline-size": "1.5rem", "block-size": "1.5rem" },
+  rowLabel: { "padding": "1rem 1rem 1rem 0", "min-inline-size": "9rem", "max-inline-size": "15rem", "border-block-end": "1px solid var(--line)", "vertical-align": "top", "font-weight": "500" },
+  cell: { "padding": "1rem", "border-block-end": "1px solid var(--line)", "vertical-align": "top" },
+  highlight: { "background-color": { "default": "color-mix(in srgb, var(--primary) 5%, transparent)", "@media (forced-colors: active)": "Canvas" }, "color": "var(--foreground)" },
+  value: { "display": "grid", "gap": "0.25rem" },
+  label: { "display": "flex", "align-items": "flex-start", "gap": "0.45rem" },
+  glyph: { "flex-shrink": "0", "margin-block-start": "0.1rem", "inline-size": "1.125rem", "block-size": "1.125rem" },
+  positive: { "color": { "default": "var(--hraness-studio-emerald)", "@media (forced-colors: active)": "CanvasText" } },
+  negative: { "color": { "default": "var(--muted)", "@media (forced-colors: active)": "CanvasText" } },
+  conditional: { "color": { "default": "var(--hraness-studio-amber)", "@media (forced-colors: active)": "CanvasText" } },
+  text: { "font-variant-numeric": "tabular-nums" },
+  detail: { "display": "block", "color": "var(--muted)", "font-size": "0.8125rem", "font-weight": "400", "line-height": "1.45", "margin-block-start": "0.2rem", "max-inline-size": "26ch" },
+  note: { "color": "var(--muted)", "font-size": "0.875rem", "line-height": "1.5", "margin-block-start": "1rem", "max-inline-size": "76ch" },
+});

package/src/react/marketing-comparison.tsx

@@ -0,0 +1,73 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+import { ComparisonGlyph } from "./article.js";
+import { comparisonStyles as styles } from "./marketing-comparison.stylex.js";
+
+export type MarketingComparisonStatus = "yes" | "no" | "partial" | "optional" | "depends";
+export type MarketingComparisonValue = boolean | "partial" | string | Readonly<{
+  status: MarketingComparisonStatus;
+  label?: string;
+  detail?: string;
+}>;
+export interface MarketingComparisonOption { readonly name: string; readonly mark?: string }
+export interface MarketingComparisonRow {
+  readonly label: string;
+  readonly values: readonly MarketingComparisonValue[];
+  readonly note?: string;
+}
+const labels = { yes: "Yes", no: "No", partial: "Partly", optional: "Optional", depends: "Depends" } as const;
+
+function presentation(slot: string, props: ReturnType<typeof stylex.props>) {
+  const hook = slot.replace(/[A-Z]/gu, (letter) => `-${letter.toLowerCase()}`);
+  return { ...props, className: `hraness-marketing-comparison__${hook} ${props.className}` };
+}
+
+function Value({ value }: Readonly<{ value: MarketingComparisonValue }>) {
+  if (typeof value === "string" && value !== "partial") return <span {...presentation("text", stylex.props(styles.text))}>{value}</span>;
+  const status = typeof value === "object" ? value.status : value === true ? "yes" : value === false ? "no" : "partial";
+  const label = typeof value === "object" ? value.label ?? labels[status] : labels[status];
+  const detail = typeof value === "object" ? value.detail : undefined;
+  return <div {...presentation("value", stylex.props(styles.value))} data-comparison-status={status}>
+    <span {...presentation("label", stylex.props(styles.label))}>
+      <ComparisonGlyph className={`hraness-marketing-comparison__glyph ${stylex.props(styles.glyph, status === "yes" ? styles.positive : status === "no" ? styles.negative : styles.conditional).className}`}
+        kind={status === "yes" || status === "no" ? status : "partial"} />
+      <span>{label}</span>
+    </span>
+    {detail === undefined ? null : <small {...presentation("detail", stylex.props(styles.detail))}>{detail}</small>}
+  </div>;
+}
+
+/** Concise product comparisons with visible words for every icon and conditional claim. */
+export function MarketingComparison({ caption, className, highlight, id, note, options, rows }: Readonly<{
+  caption: string;
+  className?: string;
+  highlight?: number;
+  id?: string;
+  note?: ReactNode;
+  options: readonly MarketingComparisonOption[];
+  rows: readonly MarketingComparisonRow[];
+}>) {
+  if (caption.trim() === "") throw new RangeError("Marketing comparison needs a caption.");
+  if (options.length === 0) throw new RangeError("Marketing comparison needs at least one option.");
+  if (highlight !== undefined && (!Number.isInteger(highlight) || highlight < 0 || highlight >= options.length)) throw new RangeError("Marketing comparison highlight must be an option index.");
+  for (const row of rows) if (row.values.length !== options.length) throw new RangeError(`Marketing comparison row ${JSON.stringify(row.label)} must have one value per option.`);
+  return <figure {...presentation("figure", stylex.props(styles.figure))} className={["hraness-marketing-comparison", stylex.props(styles.figure).className, className].filter(Boolean).join(" ")} id={id}>
+    <div {...presentation("scroll", stylex.props(styles.scroll))} aria-label={caption} role="region" tabIndex={0}>
+      <table {...presentation("table", stylex.props(styles.table))}>
+        <caption {...presentation("caption", stylex.props(styles.caption))}>{caption}</caption>
+        <thead><tr><td {...presentation("corner", stylex.props(styles.corner))} />{options.map((option, index) =>
+          <th {...presentation("option", stylex.props(styles.option, index === highlight && styles.highlight))} data-highlight={index === highlight ? "" : undefined} key={option.name} scope="col">
+            <span {...presentation("optionLabel", stylex.props(styles.optionLabel))}>
+              {option.mark === undefined ? null : <img alt="" {...presentation("mark", stylex.props(styles.mark))} height={24} src={option.mark} width={24} />}
+              <span>{option.name}</span>
+            </span>
+          </th>)}</tr></thead>
+        <tbody>{rows.map((row) => <tr key={row.label}>
+          <th {...presentation("rowLabel", stylex.props(styles.rowLabel))} scope="row">{row.label}{row.note === undefined ? null : <small {...presentation("detail", stylex.props(styles.detail))}>{row.note}</small>}</th>
+          {row.values.map((value, index) => <td {...presentation("cell", stylex.props(styles.cell, index === highlight && styles.highlight))} data-highlight={index === highlight ? "" : undefined} key={index}><Value value={value} /></td>)}
+        </tr>)}</tbody>
+      </table>
+    </div>
+    {note === undefined || note === null ? null : <figcaption {...presentation("note", stylex.props(styles.note))}>{note}</figcaption>}
+  </figure>;
+}

package/src/react/marketing-diagram.stylex.ts

@@ -0,0 +1,8 @@
+import * as stylex from "@stylexjs/stylex";
+
+export const diagramStyles = stylex.create({
+  figure: { "margin": "0", "min-inline-size": "0", "color": "var(--foreground)", "font-family": "var(--font-text)" },
+  scroll: { "overflow-x": "auto", "max-inline-size": "100%", "outline": { "default": null, ":focus-visible": "2px solid var(--primary)" }, "outline-offset": { "default": null, ":focus-visible": "3px" } },
+  canvas: { "display": "block", "inline-size": "100%", "min-inline-size": "40rem", "block-size": "auto", "font-family": "var(--font-text)", "font-size": "20px", "color": "var(--primary)" },
+  caption: { "margin-block-start": "1rem", "max-inline-size": "76ch", "color": "var(--muted)", "font-size": "0.875rem", "line-height": "1.5" },
+});

package/src/react/marketing-diagram.tsx

@@ -0,0 +1,33 @@
+import * as stylex from "@stylexjs/stylex";
+import type { ReactNode } from "react";
+import { diagramMetrics } from "../diagrams.js";
+import { diagramStyles as styles } from "./marketing-diagram.stylex.js";
+
+/** A bounded arrowhead whose paint follows its connector's stroke. IDs are caller-owned. */
+export function DiagramArrowhead({ id }: Readonly<{ id: string }>) {
+  if (id.trim() === "" || /\s/u.test(id)) throw new RangeError("Diagram arrowhead needs one nonempty SVG ID.");
+  return <marker id={id} markerHeight={diagramMetrics.arrowheadSize} markerUnits="userSpaceOnUse" markerWidth={diagramMetrics.arrowheadSize} orient="auto-start-reverse" refX="5.5" refY="3" viewBox="0 0 6 6">
+    <path d="M0 0 L6 3 L0 6 Z" fill="context-stroke" />
+  </marker>;
+}
+
+/** An accessible SVG frame. Layout and facts stay with the consuming product. */
+export function MarketingDiagram({ caption, children, className, height, label, width }: Readonly<{
+  caption?: ReactNode;
+  children: ReactNode;
+  className?: string;
+  height: number;
+  label: string;
+  width: number;
+}>) {
+  if (!Number.isFinite(width) || !Number.isFinite(height) || width <= 0 || height <= 0) throw new RangeError("Marketing diagram dimensions must be positive.");
+  if (label.trim() === "") throw new RangeError("Marketing diagram needs a useful accessible label.");
+  return <figure className={["hraness-diagram", stylex.props(styles.figure).className, className].filter(Boolean).join(" ")}>
+    <div {...stylex.props(styles.scroll)} className={`hraness-diagram__scroll ${stylex.props(styles.scroll).className}`} aria-label={label} role="region" tabIndex={0}>
+      <svg {...stylex.props(styles.canvas)} className={`hraness-diagram__canvas ${stylex.props(styles.canvas).className}`} aria-label={label} height={height} role="img" viewBox={`0 0 ${width} ${height}`} width={width}>
+        {children}
+      </svg>
+    </div>
+    {caption === undefined || caption === null ? null : <figcaption {...stylex.props(styles.caption)}>{caption}</figcaption>}
+  </figure>;
+}

package/src/react/platform-install.stylex.ts

@@ -156,11 +156,12 @@ export const platformInstallStyles = stylex.create({
   },
   command: {
     backgroundColor: { default: surface, [forced]: "Canvas" },
-    borderColor: { default: line, [forced]: "CanvasText" },
+    borderColor: { default: `color-mix(in srgb, ${focusRing} 34%, ${line})`, [forced]: "CanvasText" },
     borderRadius: "0.75rem",
     borderStyle: "solid",
     borderWidth: "1px",
     boxSizing: "border-box",
+    boxShadow: { default: `0 3px 16px color-mix(in srgb, ${focusRing} 7%, transparent)`, [forced]: "none" },
     display: "grid",
     minInlineSize: 0,
     overflow: "hidden",

package/src/react/platform-install.tsx

@@ -11,6 +11,7 @@ import {
   platformMark,
   type PlatformId,
 } from "../platforms.js";
+import { SyntaxCode } from "./syntax-code.js";
 import { platformInstallClassName as cx } from "./platform-install.stylex.js";
 
 /** Another way to install on the same platform, such as npm or Homebrew. */
@@ -211,7 +212,7 @@ function CommandBlock({
       </div>
       {/* Focusable so keyboard users can scroll a long command sideways. */}
       <pre aria-label={subject} className={cx(["pre"])} ref={preRef} tabIndex={0}>
-        <code className={cx(["code"])}>{command}</code>
+        <SyntaxCode className={cx(["code"])} code={command} language="shell" styles="classes" />
       </pre>
     </div>
   );

package/src/react/product-marketing.stylex.ts

@@ -713,6 +713,7 @@ export const marketingStyles = stylex.create({
     "line-height": "var(--hraness-marketing-summary-leading, 1.6)",
     "max-inline-size": "var(--hraness-marketing-copy-measure)"
   },
+  "hero__install": { "inline-size": "min(100%, 44rem)", "min-inline-size": "0", "margin-block-start": "0.75rem", "text-align": "start" },
   "hero__example": {
     "margin": "0",
     "color": "var(--hraness-marketing-ink)",
@@ -1063,6 +1064,9 @@ export const marketingStyles = stylex.create({
       "@media (max-width: 48rem)": "minmax(0, 1fr)"
     }
   },
+  "pillarsBenefits": { "border-block": "0", "gap": "2.75rem 3rem" },
+  "pillars__benefit": { "display": "grid", "min-inline-size": "0", "align-content": "start", "gap": "0.75rem", "padding": "0", "border-block": "0", "border-inline": "0" },
+  "pillars__icon": { "display": "block", "inline-size": "1.5rem", "block-size": "1.5rem", "margin-block-end": "1.1rem", "color": "var(--primary)" },
   "pillars__item": {
     "display": "grid",
     "min-inline-size": "0",
@@ -1694,10 +1698,22 @@ export const marketingStyles = stylex.create({
     "font-size": "1.125rem",
     "line-height": "1.5"
   },
+  "related__groups": {
+    "display": "grid",
+    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, 24rem), 1fr))",
+    "gap": "2.5rem 3.5rem",
+    "align-items": "start"
+  },
   "related__group": {
+    "--hraness-marketing-related-tone": {
+      "default": "var(--hraness-marketing-ink)",
+      "@media (forced-colors: active)": "CanvasText"
+    },
     "display": "grid",
-    "gap": "1.5rem",
-    "min-inline-size": "0"
+    "gap": "1rem",
+    "min-inline-size": "0",
+    "border-block-start": "2px solid var(--hraness-marketing-related-tone)",
+    "padding-block-start": "1rem"
   },
   "related__group_header": {
     "display": "grid",
@@ -1707,146 +1723,146 @@ export const marketingStyles = stylex.create({
   "related__group_heading": {
     "margin": "0",
     "color": "var(--hraness-marketing-ink)",
-    "font-family": "var(--hraness-marketing-heading-font)",
-    "font-weight": "var(--hraness-marketing-heading-weight)",
-    "letter-spacing": "var(--hraness-marketing-h2-tracking, -0.012em)",
-    "line-height": "var(--hraness-marketing-h3-leading, 1.15)",
+    "font-family": "var(--hraness-marketing-text-font)",
+    "font-weight": "600",
+    "letter-spacing": "-0.01em",
+    "line-height": "1.35",
     "text-wrap": "balance",
-    "font-size": "var(--hraness-marketing-h3-size, clamp(1.75rem, 1.35rem + 1.6vw, 2.5rem))"
+    "font-size": "1.125rem"
   },
   "related__group_summary": {
     "margin": "0",
     "color": "var(--hraness-marketing-muted)",
     "font-family": "var(--hraness-marketing-text-font)",
-    "font-size": "1.125rem",
+    "font-size": "1rem",
     "line-height": "1.5"
   },
+  "related__list": {
+    "--hraness-marketing-grid-columns": "initial",
+    "--_hraness-marketing-grid-track": "max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 0.5rem) / var(--hraness-marketing-grid-columns)))",
+    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 100%)), 1fr))",
+    "display": "grid",
+    "gap": "0.5rem",
+    "list-style": "none",
+    "margin": "0",
+    "padding": "0",
+    "min-inline-size": "0"
+  },
+  "related__item": {
+    "margin": "0",
+    "min-inline-size": "0"
+  },
   "related__card": {
     "display": "flex",
     "flex-direction": "row",
-    "align-items": "center",
+    "align-items": "flex-start",
     "position": "relative",
-    "isolation": "isolate",
     "min-inline-size": "0",
-    "min-block-size": "100%",
-    "align-self": "stretch",
-    "gap": "1rem",
-    "padding": "clamp(1rem, 2vw, 1.25rem) clamp(1.125rem, 2.5vw, 1.5rem)",
-    "border-top": {
-      "default": "var(--hraness-marketing-surface-rule)",
-      "@media (forced-colors: active)": "1px solid CanvasText"
-    },
-    "border-right": {
-      "default": "var(--hraness-marketing-surface-rule)",
-      "@media (forced-colors: active)": "1px solid CanvasText"
-    },
-    "border-bottom": {
-      "default": "var(--hraness-marketing-surface-rule)",
-      "@media (forced-colors: active)": "1px solid CanvasText"
-    },
-    "border-left": {
-      "default": "var(--hraness-marketing-surface-rule)",
-      "@media (forced-colors: active)": "1px solid CanvasText"
-    },
-    "border-image-source": {
-      "default": "none",
-      "@media (forced-colors: active)": "none"
-    },
-    "border-image-slice": {
-      "default": "100%",
-      "@media (forced-colors: active)": "100%"
-    },
-    "border-image-width": {
-      "default": "1",
-      "@media (forced-colors: active)": "1"
-    },
-    "border-image-outset": {
-      "default": "0",
-      "@media (forced-colors: active)": "0"
-    },
-    "border-image-repeat": {
-      "default": "stretch",
-      "@media (forced-colors: active)": "stretch"
-    },
-    "border-radius": "var(--hraness-marketing-frame-radius)",
+    "min-block-size": "2.75rem",
+    "gap": "0.85rem",
+    "padding": "0.55rem 0.5rem",
+    "margin-inline": "0",
+    "border-top": "0",
+    "border-right": "0",
+    "border-bottom": "0",
+    "border-left": "0",
+    "border-radius": "0.375rem",
     "background-color": {
-      "default": "var(--hraness-marketing-surface)",
-      "@media (forced-colors: active)": "Canvas"
-    },
-    "background-image": {
-      "default": "none",
-      "@media (forced-colors: active)": "none"
-    },
-    "background-position": {
-      "default": "0% 0%",
-      "@media (forced-colors: active)": "0% 0%"
-    },
-    "background-size": {
-      "default": "auto auto",
-      "@media (forced-colors: active)": "auto auto"
-    },
-    "background-repeat": {
-      "default": "repeat",
-      "@media (forced-colors: active)": "repeat"
-    },
-    "background-origin": {
-      "default": "padding-box",
-      "@media (forced-colors: active)": "padding-box"
-    },
-    "background-clip": {
-      "default": "border-box",
-      "@media (forced-colors: active)": "border-box"
-    },
-    "background-attachment": {
-      "default": "scroll",
-      "@media (forced-colors: active)": "scroll"
-    },
-    "box-shadow": {
-      "default": "var(--hraness-marketing-surface-shadow)",
-      ":hover": "0 0 0 1px var(--hraness-marketing-line-strong)",
-      "@media (forced-colors: active)": "none"
-    },
-    "color": {
-      "default": "inherit",
-      "@media (forced-colors: active)": "CanvasText"
+      "default": "transparent",
+      ":hover": "color-mix(in srgb, var(--hraness-marketing-related-tone, var(--hraness-marketing-ink)) 6%, transparent)"
     },
+    "color": "var(--hraness-marketing-ink)",
     "text-decoration": "none",
-    outline: { default: null, ":focus-visible": "2px solid var(--hraness-marketing-accent)" },
-    "outline-offset": { default: null, ":focus-visible": "2px" }
+    "box-shadow": "none",
+    "outline": {
+      "default": null,
+      ":focus-visible": "2px solid var(--hraness-marketing-ink)"
+    },
+    "outline-offset": {
+      "default": null,
+      ":focus-visible": "-2px"
+    }
   },
   "related__card_mark": {
+    "--hraness-foil-text-base": "var(--hraness-marketing-related-tone, var(--hraness-marketing-ink))",
+    "color": "var(--hraness-marketing-related-tone, var(--hraness-marketing-ink))",
     "flex-grow": "0",
     "flex-shrink": "0",
     "flex-basis": "auto",
     "display": "inline-flex",
     "align-items": "center",
     "justify-content": "center",
-    "inline-size": "2.75rem",
-    "block-size": "2.75rem"
+    "inline-size": "1.75rem",
+    "block-size": "1.75rem",
+    "margin-block-start": "0.1rem"
   },
   "related__card_text": {
     "display": "grid",
-    "gap": "0.25rem",
+    "gap": "0.05rem",
     "min-inline-size": "0"
   },
+  "related__card_heading": {
+    "display": "flex",
+    "flex-wrap": "wrap",
+    "align-items": "baseline",
+    "column-gap": "0.6rem"
+  },
   "related__card_name": {
     "margin": "0",
     "color": "var(--hraness-marketing-ink)",
     "font-family": "var(--hraness-marketing-text-font)",
-    "font-size": "1.25rem",
-    "font-weight": "700",
+    "font-size": "1.0625rem",
+    "font-weight": "600",
     "letter-spacing": "-0.01em",
-    "line-height": "1.25",
+    "line-height": "1.35",
+    "overflow-wrap": "anywhere",
+    "text-decoration-line": "underline",
+    "text-decoration-style": "dotted",
+    "text-decoration-color": "color-mix(in srgb, currentColor 40%, transparent)",
+    "text-decoration-thickness": "1px",
+    "text-underline-offset": "0.2em"
+  },
+  "related__card_domain": {
+    "color": "var(--hraness-marketing-muted)",
+    "font-family": "var(--hraness-marketing-text-font)",
+    "font-size": "0.8125rem",
+    "font-weight": "400",
+    "line-height": "1.5",
     "overflow-wrap": "anywhere"
   },
   "related__card_role": {
     "margin": "0",
-    "color": "var(--hraness-marketing-ink)",
+    "color": "var(--hraness-marketing-muted)",
     "font-family": "var(--hraness-marketing-text-font)",
-    "font-size": "1.0625rem",
+    "font-size": "0.9375rem",
     "line-height": "1.45",
+    "overflow-wrap": "anywhere",
     "text-wrap": "pretty"
   },
+  "relatedToneRose": {
+    "--hraness-marketing-related-tone": {
+      "default": "var(--hraness-studio-rose)",
+      "@media (forced-colors: active)": "CanvasText"
+    }
+  },
+  "relatedToneIndigo": {
+    "--hraness-marketing-related-tone": {
+      "default": "var(--hraness-studio-indigo)",
+      "@media (forced-colors: active)": "CanvasText"
+    }
+  },
+  "relatedToneAmber": {
+    "--hraness-marketing-related-tone": {
+      "default": "var(--hraness-studio-amber)",
+      "@media (forced-colors: active)": "CanvasText"
+    }
+  },
+  "relatedToneEmerald": {
+    "--hraness-marketing-related-tone": {
+      "default": "var(--hraness-studio-emerald)",
+      "@media (forced-colors: active)": "CanvasText"
+    }
+  },
   "trust": {
     "color": "var(--hraness-marketing-ink)",
     "font-family": "var(--hraness-marketing-text-font)",
@@ -2174,18 +2190,22 @@ export const marketingStyles = stylex.create({
     "line-height": "1.5"
   },
   "interface_grid": {
+    "--hraness-marketing-grid-columns": "initial",
+    "--_hraness-marketing-grid-track": "max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)))",
     "display": "grid",
     "align-items": "stretch",
     "margin": "0",
     "gap": "1rem",
-    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, 16rem), 1fr))"
+    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 16rem)), 1fr))"
   },
   "trust_grid": {
+    "--hraness-marketing-grid-columns": "initial",
+    "--_hraness-marketing-grid-track": "max(16rem, calc((100% - (var(--hraness-marketing-grid-columns) - 1) * 1rem) / var(--hraness-marketing-grid-columns)))",
     "display": "grid",
     "align-items": "stretch",
     "margin": "0",
     "gap": "1rem",
-    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, 16rem), 1fr))"
+    "grid-template-columns": "repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 16rem)), 1fr))"
   },
   "interface": {
     "display": "grid",
@@ -2685,10 +2705,15 @@ export const marketingStyles = stylex.create({
   },
   "quote__link": {
     "color": "inherit",
-    "text-decoration": {
-      "default": "none",
-      ":hover": "underline"
-    }
+    "text-decoration-line": "underline",
+    "text-decoration-style": "dotted",
+    "text-decoration-color": {
+      "default": "color-mix(in srgb, currentColor 40%, transparent)",
+      ":hover": "currentColor",
+      ":focus-visible": "currentColor"
+    },
+    "text-decoration-thickness": "1px",
+    "text-underline-offset": "0.2em"
   },
   "plan_grid": {
     "display": "grid",
@@ -4272,6 +4297,7 @@ const recipes = {
   "hraness-marketing-hero__name": { "default": marketingStyles.hero__name },
   "hraness-marketing-hero__heading": { "default": marketingStyles.hero__heading },
   "hraness-marketing-hero__summary": { "default": marketingStyles.hero__summary },
+  "hraness-marketing-hero__install": { "default": marketingStyles.hero__install },
   "hraness-marketing-hero__example": { "default": marketingStyles.hero__example },
   "hraness-marketing-hero__actions": { "default": marketingStyles.hero__actions, "start": marketingStyles.hero__actionsStart },
   "hraness-marketing-hero__boundary": { "default": marketingStyles.hero__boundary },
@@ -4298,7 +4324,8 @@ const recipes = {
   "hraness-marketing-stats__source": { "default": marketingStyles.stats__source },
   "hraness-marketing-stats__value": { "default": marketingStyles.stats__value },
   "hraness-marketing-pillars": { "default": marketingStyles.pillars },
-  "hraness-marketing-pillars__item": { "default": marketingStyles.pillars__item, "later": marketingStyles.pillars__itemLater },
+  "hraness-marketing-pillars__item": { "default": marketingStyles.pillars__item, "later": marketingStyles.pillars__itemLater, "benefit": marketingStyles.pillars__benefit },
+  "hraness-marketing-pillars__icon": { "default": marketingStyles.pillars__icon },
   "hraness-marketing-pillars__label": { "default": marketingStyles.pillars__label },
   "hraness-marketing-pillars__summary": { "default": marketingStyles.pillars__summary },
   "hraness-marketing-proof-frame": { "default": marketingStyles.proof_frame },
@@ -4348,7 +4375,12 @@ const recipes = {
   "hraness-marketing-related__label": { "default": marketingStyles.related__label },
   "hraness-marketing-related__heading": { "default": marketingStyles.related__heading },
   "hraness-marketing-related__summary": { "default": marketingStyles.related__summary },
-  "hraness-marketing-related__group": { "default": marketingStyles.related__group },
+  "hraness-marketing-related__groups": { "default": marketingStyles.related__groups },
+  "hraness-marketing-related__list": { "default": marketingStyles.related__list },
+  "hraness-marketing-related__item": { "default": marketingStyles.related__item },
+  "hraness-marketing-related__card-heading": { "default": marketingStyles.related__card_heading },
+  "hraness-marketing-related__card-domain": { "default": marketingStyles.related__card_domain },
+  "hraness-marketing-related__group": { "default": marketingStyles.related__group, "neutral": marketingStyles.related__group, "rose": [marketingStyles.related__group, marketingStyles.relatedToneRose], "indigo": [marketingStyles.related__group, marketingStyles.relatedToneIndigo], "amber": [marketingStyles.related__group, marketingStyles.relatedToneAmber], "emerald": [marketingStyles.related__group, marketingStyles.relatedToneEmerald] },
   "hraness-marketing-related__group-header": { "default": marketingStyles.related__group_header },
   "hraness-marketing-related__group-heading": { "default": marketingStyles.related__group_heading },
   "hraness-marketing-related__group-summary": { "default": marketingStyles.related__group_summary },
@@ -4458,18 +4490,19 @@ const gridColumns = {
 
 /** Explicit finite columns compose static atoms, including the existing media rules. */
 export function marketingColumnClassName(
-  hook: "hraness-marketing-facts" | "hraness-marketing-pillars" | "hraness-marketing-stats__list" | "hraness-marketing-card-row" | "hraness-marketing-primitives__list",
+  hook: "hraness-marketing-facts" | "hraness-marketing-pillars" | "hraness-marketing-stats__list" | "hraness-marketing-card-row" | "hraness-marketing-primitives__list" | "hraness-marketing-interface-grid" | "hraness-marketing-trust-grid" | "hraness-marketing-related__list",
   caller: string | undefined,
   columns: MarketingColumnCount | undefined,
+  presentation: "default" | "benefits" = "default",
 ): string {
   if (columns !== undefined && columns !== 1 && columns !== 2 && columns !== 3 && columns !== 4) {
     throw new RangeError("Marketing columns must be 1, 2, 3, or 4 when specified.");
   }
   const columnRecipe = columns === undefined ? undefined
     : (hook === "hraness-marketing-pillars" ? pillarColumns
-      : hook === "hraness-marketing-card-row" || hook === "hraness-marketing-primitives__list" ? gridColumns
+      : hook === "hraness-marketing-card-row" || hook === "hraness-marketing-primitives__list" || hook === "hraness-marketing-interface-grid" || hook === "hraness-marketing-trust-grid" || hook === "hraness-marketing-related__list" ? gridColumns
         : factColumns)[columns];
-  return [hook, stylex.props(recipes[hook].default, columnRecipe).className, caller]
+  return [hook, stylex.props(recipes[hook].default, columnRecipe, hook === "hraness-marketing-pillars" && presentation === "benefits" && marketingStyles.pillarsBenefits).className, caller]
     .filter((value) => value !== undefined && value.length > 0).join(" ");
 }