@hraness/design-kit 0.40.3 → 0.41.1

package/dist/stylex.css

@@ -85,6 +85,10 @@
     padding: .5rem 1rem 4rem;
   }
 
+  .xrqs5gp {
+    padding: .5rem 1rem;
+  }
+
   .x1i4hug3 {
     padding: .65rem .8rem;
   }
@@ -101,10 +105,6 @@
     padding: .75rem .95rem;
   }
 
-  .x86o7ao {
-    padding: .8rem 1rem;
-  }
-
   .x1717udv {
     padding: 0;
   }
@@ -864,6 +864,10 @@
     padding-inline: var(--hraness-marketing-gutter);
   }
 
+  .x18wjirm {
+    padding-inline: var(--hraness-marketing-question-inline-inset, 1.25rem);
+  }
+
   .xfmotut {
     padding-inline: var(--layout-chrome-inset);
   }
@@ -2939,6 +2943,10 @@
     margin-block-start: 1rem;
   }
 
+  .x1n5yk0f {
+    margin-block-start: auto;
+  }
+
   .xvc5jky {
     margin-inline-start: auto;
   }
@@ -3386,6 +3394,10 @@
     text-align: center;
   }
 
+  .xp4054r {
+    text-align: end;
+  }
+
   .x1yc453h {
     text-align: start;
   }
@@ -3424,6 +3436,10 @@
     text-transform: uppercase;
   }
 
+  .x5hzr90 {
+    text-underline-offset: .18em;
+  }
+
   .xdsgf93 {
     text-underline-offset: .22em;
   }
@@ -3709,6 +3725,10 @@
     color: var(--hraness-appearance-accent-foreground, var(--hraness-material-ink, var(--ui-accent-foreground, ButtonText)));
   }
 
+  .x1eyr600:focus-visible {
+    color: var(--hraness-marketing-ink);
+  }
+
   .x89zja:is([data-hovered], :hover) {
     color: var(--secondary-foreground);
   }
@@ -4943,8 +4963,26 @@
     transform: translate3d(0, -4vh, 0);
   }
 
-  .x1bz48vb.x1bz48vb:where(.x1mw0dh9[open] *):after {
-    transform: rotate(45deg);
+  .x78hkw1:after {
+    transition-duration: .24s;
+  }
+
+  .xjocvvi:after {
+    transition-property: transform;
+  }
+
+  .x15fj410:after {
+    transition-timing-function: cubic-bezier(.16, 1, .3, 1);
+  }
+
+  .xba5a1s.xba5a1s:where(.x1mw0dh9[open] *):after {
+    transform: rotate(135deg);
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .x4oqjru.x4oqjru:after {
+      transition-duration: 0s;
+    }
   }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hraness/design-kit",
-  "version": "0.40.3",
+  "version": "0.41.1",
   "description": "React components and CSS for Hraness apps and product sites: application shells, marketing sections, charts, themes, effects, and syntax highlighting. Built on @hraness/ui.",
   "license": "MIT",
   "type": "module",
@@ -129,7 +129,8 @@
     },
     "./marketing-comparison.css": "./src/marketing-comparison.css",
     "./marketing-diagram.css": "./src/marketing-diagram.css",
-    "./marketing-marquee.css": "./src/marketing-marquee.css"
+    "./marketing-marquee.css": "./src/marketing-marquee.css",
+    "./product-landscape.css": "./src/product-landscape.css"
   },
   "main": "./dist/index.js",
   "types": "./src/index.ts",
@@ -314,7 +315,9 @@
     "src/marketing-diagram.css",
     "src/marketing-marquee.ts",
     "src/marketing-marquee.css",
-    "src/react/marketing-marquee.tsx"
+    "src/react/marketing-marquee.tsx",
+    "src/product-landscape.css",
+    "LANDSCAPE.md"
   ],
   "scripts": {
     "build": "bun run ./scripts/build.ts",
@@ -328,7 +331,7 @@
     "browser:install": "bun ./node_modules/playwright-core/cli.js install chromium",
     "test:browser": "bun run test:browser:marketing && bun run test:browser:rest",
     "test:browser:marketing": "bun run ./scripts/product-marketing-browser.ts",
-    "test:browser:rest": "bun run ./scripts/marketing-header-browser.ts && bun run ./scripts/site-shell-browser.ts && bun run ./scripts/palette-browser.ts && bun run ./scripts/gallery-browser.ts && bun run ./scripts/global-error-browser.ts && bun run ./scripts/security-delivery-browser.ts && bun run ./scripts/paper-theme-browser.ts && bun run ./scripts/product-marketing-preset-browser.ts && bun run ./scripts/lantern-material-browser.ts && bun run ./scripts/foil-browser.ts && bun run ./scripts/hero-light-browser.ts && bun run ./scripts/status-page-browser.ts && bun run ./scripts/marketing-marquee-browser.ts && bun run ./scripts/platform-install-browser.ts && bun run ./scripts/mockups-browser.ts && bun run ./scripts/agent-setup-browser.ts",
+    "test:browser:rest": "bun run ./scripts/marketing-header-browser.ts && bun run ./scripts/site-shell-browser.ts && bun run ./scripts/palette-browser.ts && bun run ./scripts/gallery-browser.ts && bun run ./scripts/global-error-browser.ts && bun run ./scripts/security-delivery-browser.ts && bun run ./scripts/paper-theme-browser.ts && bun run ./scripts/product-marketing-preset-browser.ts && bun run ./scripts/lantern-material-browser.ts && bun run ./scripts/foil-browser.ts && bun run ./scripts/hero-light-browser.ts && bun run ./scripts/status-page-browser.ts && bun run ./scripts/marketing-marquee-browser.ts && bun run ./scripts/product-landscape-browser.ts && bun run ./scripts/platform-install-browser.ts && bun run ./scripts/mockups-browser.ts && bun run ./scripts/agent-setup-browser.ts",
     "test:package": "bun run ./scripts/package-smoke.ts && bun run ./scripts/mockups-import.ts",
     "kb:refresh": "bunx --bun --package https://github.com/hraness/wordcell/releases/download/v0.24.0/hraness-wordcell-0.24.0.tgz wordcell refresh --root kb",
     "kb:check:lane": "bunx --bun --package https://github.com/hraness/wordcell/releases/download/v0.24.0/hraness-wordcell-0.24.0.tgz wordcell check --root kb --no-catalog",

package/portfolio-inventory.json

@@ -6,7 +6,7 @@
       "name": "@hraness/design-kit",
       "path": ".",
       "visibility": "public",
-      "version": "0.40.3"
+      "version": "0.41.1"
     }
   ],
   "contract": "hraness.portfolio-inventory/v1",

package/src/compiler-foundation.css

@@ -15,6 +15,7 @@
 @import "./status-page.css";
 @import "./marketing-marquee.css";
 @import "./product-marketing-foundation.css";
+@import "./product-landscape.css";
 @import "./design-gallery.css";
 @import "./mockups.css";
 @import "./lantern-material.css";

package/src/design-gallery.css

@@ -347,6 +347,41 @@
   background: var(--background);
 }
 
+.design-gallery__landscape {
+  display: grid;
+  min-block-size: 22rem;
+  align-content: start;
+  gap: var(--space-4);
+  padding: var(--space-8);
+  overflow: clip;
+  border: 1px solid var(--line);
+  background: var(--background);
+}
+
+.design-gallery__landscape-copy {
+  display: grid;
+  max-inline-size: 38rem;
+  gap: var(--space-2);
+}
+
+.design-gallery__landscape-copy > :where(h3, p),
+.design-gallery__landscape-code {
+  margin: 0;
+}
+
+.design-gallery__landscape-code {
+  justify-self: start;
+  padding: var(--space-3) var(--space-4);
+  font-family: var(--font-mono, ui-monospace, monospace);
+}
+
+.design-gallery__landscape-note {
+  justify-self: start;
+  margin: 0;
+  padding: var(--space-3) var(--space-4);
+  border: 1px solid var(--line);
+}
+
 .design-gallery__foil-deck {
   display: grid;
   grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr));

package/src/product-landscape.css

@@ -0,0 +1,202 @@
+/* Product landscape: one product-owned illustration drawn behind marketing,
+ * documentation, and blog pages. See LANDSCAPE.md.
+ *
+ * The product supplies a grayscale luminance mask (light drawing on black) and
+ * the kit tints it with the page's own text mixed into its background, so the
+ * drawing follows every palette and appearance without an accent colour. The
+ * mask tiles down the page, so long pages never run out of scenery.
+ *
+ * Hosts:
+ * - `data-hraness-landscape="page"` on <body> or on any element inside it paints
+ *   the layer behind the whole document. `data-hraness-landscape="off"` anywhere
+ *   on the page turns it off, for application routes under a shared layout.
+ * - `data-hraness-landscape="contained"` paints the layer behind one element.
+ *
+ * Products set `--hraness-landscape-image` (and optionally the narrow image,
+ * opacity, and strength) on :root with root-relative or absolute URLs. Without
+ * an image the mask is fully transparent, so an unconfigured host paints
+ * nothing. Forced colours and print never draw the layer. */
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) {
+  --_hraness-landscape-ink: var(
+    --hraness-landscape-ink,
+    color-mix(
+      in oklch,
+      var(--foreground, var(--plain-foreground, CanvasText)) var(--hraness-landscape-strength, 30%),
+      var(--background, var(--plain-background, Canvas))
+    )
+  );
+  position: relative;
+  isolation: isolate;
+}
+
+@supports (mask-mode: luminance) or (-webkit-mask-source-type: luminance) {
+  :is(
+    body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+    [data-hraness-landscape="contained"]
+  )::before {
+    position: absolute;
+    inset: 0;
+    z-index: -1;
+    background: var(--_hraness-landscape-ink);
+    content: "";
+    opacity: var(--hraness-landscape-opacity, 0.5);
+    pointer-events: none;
+    -webkit-mask-image: var(--hraness-landscape-image, linear-gradient(transparent, transparent));
+    mask-image: var(--hraness-landscape-image, linear-gradient(transparent, transparent));
+    -webkit-mask-source-type: luminance;
+    mask-mode: luminance;
+    -webkit-mask-position: top center;
+    mask-position: top center;
+    -webkit-mask-repeat: repeat-y;
+    mask-repeat: repeat-y;
+    -webkit-mask-size: 100% auto;
+    mask-size: 100% auto;
+  }
+
+  @media (max-width: 48rem) {
+    :is(
+      body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+      [data-hraness-landscape="contained"]
+    )::before {
+      opacity: var(--hraness-landscape-opacity-narrow, 0.36);
+      -webkit-mask-image: var(--hraness-landscape-image-narrow, var(--hraness-landscape-image, linear-gradient(transparent, transparent)));
+      mask-image: var(--hraness-landscape-image-narrow, var(--hraness-landscape-image, linear-gradient(transparent, transparent)));
+    }
+  }
+}
+
+@media (forced-colors: active), print {
+  :is(
+    body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+    [data-hraness-landscape="contained"]
+  )::before {
+    display: none;
+  }
+}
+
+/* Page wrappers that repaint the page colour would hide the drawing behind a
+ * hard-edged slab. Over a landscape they let the identical body colour show. */
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) :is(.hraness-marketing-page, .plain-site:not(body), .plain-footer, [data-hraness-landscape-surface="clear"]) {
+  background: transparent;
+}
+
+/* Reading surfaces stay opaque and gain rounded edges: code, tables, and any
+ * product element marked `data-hraness-landscape-surface="solid"`. */
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) :is(.plain-publication__article-body pre, .plain-publication__table-scroll, [data-hraness-landscape-surface="solid"]) {
+  border-radius: var(--hraness-landscape-radius, 0.75rem);
+  background: var(--hraness-landscape-solid, var(--plain-surface, var(--hraness-marketing-surface, var(--background, Canvas))));
+}
+
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) .plain-publication__article-body pre {
+  padding: 0.9rem 1.1rem;
+}
+
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) .plain-publication__table-scroll {
+  border: 1px solid var(--plain-line, color-mix(in srgb, currentColor 14%, transparent));
+}
+
+/* Small cards and callouts become frosted panels over the drawing, using the
+ * sticky header's material. Without backdrop support, under reduced
+ * transparency, and in forced colours they keep their opaque surface. Keep the
+ * browser aliases in separate feature queries: CSS optimizers can collapse
+ * adjacent aliases to the prefixed property and lose Chromium blur. */
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) :is(
+  .hraness-marketing-card,
+  .hraness-marketing-quote,
+  .hraness-marketing-plan,
+  .hraness-marketing-trust-item,
+  .hraness-marketing-interface,
+  .hraness-marketing-primitive,
+  .plain-publication__callout,
+  .plain-publication__social-kit-item,
+  [data-hraness-landscape-surface="glass"]
+) {
+  --_hraness-landscape-glass-base: var(--hraness-landscape-glass, var(--hraness-marketing-surface, var(--plain-surface, var(--background, Canvas))));
+  background: var(--_hraness-landscape-glass-base);
+}
+
+:is(
+  body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+  [data-hraness-landscape="contained"]
+) [data-hraness-landscape-surface="glass"] {
+  border-radius: var(--hraness-landscape-radius, 0.75rem);
+}
+
+@supports (-webkit-backdrop-filter: blur(1px)) {
+  :is(
+    body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+    [data-hraness-landscape="contained"]
+  ) :is(
+    .hraness-marketing-card,
+    .hraness-marketing-quote,
+    .hraness-marketing-plan,
+    .hraness-marketing-trust-item,
+    .hraness-marketing-interface,
+    .hraness-marketing-primitive,
+    .plain-publication__callout,
+    .plain-publication__social-kit-item,
+    [data-hraness-landscape-surface="glass"]
+  ) {
+    background: color-mix(in srgb, var(--_hraness-landscape-glass-base) 82%, transparent);
+    -webkit-backdrop-filter: blur(14px) saturate(1.4);
+  }
+}
+
+@supports (backdrop-filter: blur(1px)) {
+  :is(
+    body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+    [data-hraness-landscape="contained"]
+  ) :is(
+    .hraness-marketing-card,
+    .hraness-marketing-quote,
+    .hraness-marketing-plan,
+    .hraness-marketing-trust-item,
+    .hraness-marketing-interface,
+    .hraness-marketing-primitive,
+    .plain-publication__callout,
+    .plain-publication__social-kit-item,
+    [data-hraness-landscape-surface="glass"]
+  ) {
+    background: color-mix(in srgb, var(--_hraness-landscape-glass-base) 82%, transparent);
+    backdrop-filter: blur(14px) saturate(1.4);
+  }
+}
+
+@media (prefers-reduced-transparency: reduce), (forced-colors: active) {
+  :is(
+    body:is([data-hraness-landscape="page"], :has([data-hraness-landscape="page"])):not(:has([data-hraness-landscape="off"])),
+    [data-hraness-landscape="contained"]
+  ) :is(
+    .hraness-marketing-card,
+    .hraness-marketing-quote,
+    .hraness-marketing-plan,
+    .hraness-marketing-trust-item,
+    .hraness-marketing-interface,
+    .hraness-marketing-primitive,
+    .plain-publication__callout,
+    .plain-publication__social-kit-item,
+    [data-hraness-landscape-surface="glass"]
+  ) {
+    background: var(--_hraness-landscape-glass-base);
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+  }
+}

package/src/product-marketing-foundation.css

@@ -304,10 +304,14 @@
   line-height: 1.5;
 }
 
-.hraness-marketing-interface pre {
+.hraness-marketing-interface > :where(pre) {
   margin-block-start: 0.5rem;
 }
 
+.hraness-marketing-interface :where(pre) {
+  font-size: 0.78rem;
+}
+
 .hraness-marketing-question__answer > :first-child {
   margin-block-start: 0;
 }

package/src/product-marketing.css

@@ -1081,7 +1081,7 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  padding: 0.8rem 1rem;
+  padding: 0.5rem 1rem;
   background-image: var(--hraness-marketing-frame-chrome, none);
   box-shadow: var(--hraness-marketing-chrome-shadow);
   border-block-end: var(--hraness-marketing-chrome-rule);
@@ -1641,10 +1641,8 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 
 .hraness-marketing-interface,
 .hraness-marketing-trust-item {
-  display: grid;
   min-inline-size: 0;
   min-block-size: 100%;
-  align-content: start;
   gap: 0.5rem;
   padding: clamp(1.25rem, 2.5vw, 1.75rem);
   border: var(--hraness-marketing-surface-rule);
@@ -1653,6 +1651,17 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   box-shadow: var(--hraness-marketing-surface-shadow);
 }
 
+/* A vertical column lets the optional action pin to the foot of the card. */
+.hraness-marketing-interface {
+  display: flex;
+  flex-direction: column;
+}
+
+.hraness-marketing-trust-item {
+  display: grid;
+  align-content: start;
+}
+
 .hraness-marketing-interface :where(.hraness-marketing-interface__heading, p),
 .hraness-marketing-trust-item :where(dt, dd) {
   margin: 0;
@@ -1672,10 +1681,42 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   line-height: 1.5;
 }
 
-.hraness-marketing-interface pre {
+/* The card's reference link sits at the foot, quiet and end-aligned. */
+.hraness-marketing-interface .hraness-marketing-interface__action {
+  margin-block-start: auto;
+  font-size: 0.85rem;
+  text-align: end;
+}
+
+.hraness-marketing-interface__link {
+  color: var(--hraness-marketing-muted);
+  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.18em;
+}
+
+.hraness-marketing-interface__link:hover,
+.hraness-marketing-interface__link:focus-visible {
+  color: var(--hraness-marketing-ink);
+  text-decoration-color: currentColor;
+}
+
+@media (forced-colors: active) {
+  .hraness-marketing-interface__link {
+    color: LinkText;
+  }
+}
+
+.hraness-marketing-interface > :where(pre) {
   margin-block-start: 0.5rem;
 }
 
+.hraness-marketing-interface :where(pre) {
+  font-size: 0.78rem;
+}
+
 /* Equal-height product card rows. Direct children stretch to the tallest
  * item. Meta occupies a reserved two-line block so one long blurb does not
  * stagger the row. Titles wrap without clamping. Each card is a containing
@@ -2009,6 +2050,7 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   justify-content: space-between;
   gap: 1rem;
   padding-block: 1rem;
+  padding-inline: var(--hraness-marketing-question-inline-inset, 1.25rem);
   color: var(--hraness-marketing-ink);
   cursor: pointer;
   font-size: 1.05rem;
@@ -2027,10 +2069,11 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   font-size: 1.25rem;
   font-weight: 400;
   line-height: 1;
+  transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
 }
 
 .hraness-marketing-question[open] summary::after {
-  transform: rotate(45deg);
+  transform: rotate(135deg);
 }
 
 .hraness-marketing-question summary:focus-visible {
@@ -2042,6 +2085,7 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
 .hraness-marketing-question__answer {
   max-inline-size: var(--hraness-marketing-prose-measure);
   padding-block: 0 1.5rem;
+  padding-inline: var(--hraness-marketing-question-inline-inset, 1.25rem);
   color: var(--hraness-marketing-muted);
   line-height: 1.6;
 }
@@ -2259,6 +2303,12 @@ html:has(:is(.hraness-marketing-header, .hraness-marketing-header-surface):not([
   }
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .hraness-marketing-question summary::after {
+    transition: none;
+  }
+}
+
 @media (forced-colors: active) {
   .hraness-marketing-plan[data-emphasis="primary"] {
     border-color: CanvasText;

package/src/react/design-gallery.tsx

@@ -21,7 +21,7 @@ import {
   WrappingRow,
 } from "@hraness/ui";
 import { Chart01Icon, CodeIcon, DashboardSquare01Icon } from "@hugeicons/core-free-icons";
-import { useState } from "react";
+import { type CSSProperties, useState } from "react";
 
 import { BrowserFrame, SampleText } from "../mockups/index.js";
 import { StepThrough } from "../mockups/client.js";
@@ -512,8 +512,8 @@ export function DesignSystemGallery({
             <p>Consumer-owned content can include <a href="#gallery-install">links</a> and <code>inline code</code>.</p>
           </MarketingSection>
           <MarketingInterfaceGrid columns={2} heading="Choose your interface." headingId="gallery-marketing-interfaces" headingLevel={3} label="Interfaces" interfaces={[
-            { label: "CLI", summary: "Run a named job.", example: <MarketingCodeBlock code="relay run job-01" /> },
-            { label: "SDK", summary: "Use typed application code." },
+            { label: "CLI", summary: "Run a named job.", example: <MarketingCodeBlock code="relay run job-01" />, link: { href: "#gallery-install", label: "Read the CLI guide" } },
+            { label: "SDK", summary: "Use typed application code.", link: { href: "#gallery-install", label: "Read the SDK guide" } },
           ]} />
           <MarketingCardRow ariaLabel="Release radar" columns={2} cards={[
             { art: <svg aria-hidden="true" viewBox="0 0 24 24" width="24" height="24"><circle cx="12" cy="12" r="8" /></svg>, href: "#marketing", title: "Grok 4.7", meta: "First observed 21 September 2026." },
@@ -1062,6 +1062,21 @@ export function DesignSystemGallery({
             <p>Decorative paint is pointer-transparent and removable in forced colors. Marketing actions use system button colors so their labels stay readable.</p>
           </div>
         </div>
+        <div
+          className="design-gallery__landscape"
+          data-hraness-landscape="contained"
+          style={{
+            "--hraness-landscape-image":
+              "url(\"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 300'%3E%3Crect width='400' height='300'/%3E%3Cg fill='none' stroke='white' stroke-width='1.5'%3E%3Cpath d='M0 240 L40 190 L70 215 L110 150 L150 205 L170 185'/%3E%3Cpath d='M230 185 L260 150 L300 200 L340 140 L370 180 L400 160'/%3E%3Cpath d='M20 270 C60 250 100 262 150 250'/%3E%3Cpath d='M250 252 C300 262 340 248 390 262'/%3E%3Ccircle cx='340' cy='60' r='16'/%3E%3C/g%3E%3C/svg%3E\")",
+          } as CSSProperties}
+        >
+          <div className="design-gallery__landscape-copy">
+            <h3>Product landscape</h3>
+            <p>One product drawing, tinted from the palette and tiled down the page. Code and tables stay solid with rounded edges; small cards and callouts frost over it.</p>
+          </div>
+          <pre className="design-gallery__landscape-code" data-hraness-landscape-surface="solid"><code>relay run job-01</code></pre>
+          <p className="design-gallery__landscape-note" data-hraness-landscape-surface="glass">The log is written next to the job.</p>
+        </div>
       </section>
 
       <section className="design-gallery__section" id="syntax">

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

@@ -1195,7 +1195,7 @@ export const marketingStyles = stylex.create({
     "display": "flex",
     "align-items": "center",
     "gap": "0.75rem",
-    "padding": "0.8rem 1rem",
+    "padding": "0.5rem 1rem",
     "background-image": { default: "var(--hraness-marketing-frame-chrome, none)", "@media (forced-colors: active)": "none" },
     "box-shadow": { default: "var(--hraness-marketing-chrome-shadow)", "@media (forced-colors: active)": "none" },
     "border-block-end": { "default": "var(--hraness-marketing-chrome-rule)", "@media (forced-colors: active)": "1px solid CanvasText" },
@@ -2216,10 +2216,10 @@ export const marketingStyles = stylex.create({
     "grid-template-columns": "repeat(auto-fit, minmax(min(100%, var(--_hraness-marketing-grid-track, 16rem)), 1fr))"
   },
   "interface": {
-    "display": "grid",
+    "display": "flex",
+    "flex-direction": "column",
     "min-inline-size": "0",
     "min-block-size": "100%",
-    "align-content": "start",
     "gap": "0.5rem",
     "padding": "clamp(1.25rem, 2.5vw, 1.75rem)",
     "border-top": {
@@ -2395,6 +2395,28 @@ export const marketingStyles = stylex.create({
     "font-size": "0.95rem",
     "line-height": "1.5"
   },
+  "interface__action": {
+    "margin-block-start": "auto",
+    "font-size": "0.85rem",
+    "text-align": "end"
+  },
+  "interface__link": {
+    "color": {
+      "default": "var(--hraness-marketing-muted)",
+      ":hover": "var(--hraness-marketing-ink)",
+      ":focus-visible": "var(--hraness-marketing-ink)",
+      "@media (forced-colors: active)": "LinkText"
+    },
+    "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.18em"
+  },
   "trust_item__label": {
     "margin": "0",
     "font-size": "1.05rem",
@@ -3026,6 +3048,7 @@ export const marketingStyles = stylex.create({
     "justify-content": "space-between",
     "gap": "1rem",
     "padding-block": "1rem",
+    "padding-inline": "var(--hraness-marketing-question-inline-inset, 1.25rem)",
     "color": "var(--hraness-marketing-ink)",
     "cursor": "pointer",
     "font-size": "1.05rem",
@@ -3041,15 +3064,22 @@ export const marketingStyles = stylex.create({
       "font-size": "1.25rem",
       "font-weight": "400",
       "line-height": "1",
+      "transition-duration": {
+        "default": "240ms",
+        "@media (prefers-reduced-motion: reduce)": "0ms"
+      },
+      "transition-property": "transform",
+      "transition-timing-function": "cubic-bezier(0.16, 1, 0.3, 1)",
       "transform": {
         "default": null,
-        [stylex.when.ancestor("[open]", questionMarker)]: "rotate(45deg)"
+        [stylex.when.ancestor("[open]", questionMarker)]: "rotate(135deg)"
       }
     }
   },
   "question__answer": {
     "max-inline-size": "var(--hraness-marketing-prose-measure)",
     "padding-block": "0 1.5rem",
+    "padding-inline": "var(--hraness-marketing-question-inline-inset, 1.25rem)",
     "color": "var(--hraness-marketing-muted)",
     "line-height": "1.6"
   },
@@ -4475,6 +4505,8 @@ const recipes = {
   "hraness-marketing-trust-item": { "default": marketingStyles.trust_item },
   "hraness-marketing-interface__heading": { "default": marketingStyles.interface__heading },
   "hraness-marketing-interface__summary": { "default": marketingStyles.interface__summary },
+  "hraness-marketing-interface__action": { "default": marketingStyles.interface__action },
+  "hraness-marketing-interface__link": { "default": marketingStyles.interface__link },
   "hraness-marketing-trust-item__label": { "default": marketingStyles.trust_item__label },
   "hraness-marketing-trust-item__detail": { "default": marketingStyles.trust_item__detail },
   "hraness-marketing-card-row": { "default": marketingStyles.card_row },