@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/dist/components/blocks/logo-rows/LogoRows.types.d.ts

@@ -0,0 +1,36 @@
+import type { ReactNode } from 'react';
+import type { LogoTile } from '../../logo-data.js';
+export interface LogoRowsOwnProps {
+    /**
+     * `page` — The page's own white, with tiles at the recessed gray. For full-colour logos drawn for a light ground
+     * `subtle` — The grey band, with white tiles on it. For full-colour logos, where the section needs setting apart from the ones around it. Painted as the band's tint over the page's own ground, so it is the same grey whatever is behind the section
+     * `strong` — The default. `color.bg.brand-strong`, the dark band, with white words and tiles at color.bg.surface-card-strong — gray.900 in both themes, so the row is a set of tiles a step lighter than the band. The ground white wordmarks are drawn for
+     */
+    ground?: 'page' | 'subtle' | 'strong';
+    /** Always. The one claim the logos back, in the fewest words that say it — "Trusted by leading platforms worldwide". */
+    title: string;
+    /** The line under the heading: what the logos mean for the reader — which payment methods they can use, which platforms they can trade on. */
+    description?: string;
+    /** The way onward — a standalone Link, "View all partners", usually. Under the line, never on the row: the tiles move. */
+    link?: ReactNode;
+    /** Always. The logos, in the order the section deals them into its two rows — the first to the first row, the second to the second, and so on. Eight or more, so each row runs on past both edges of the band. Each name is what a screen reader hears for its logo. */
+    logos: LogoTile[];
+}
+export type LogoRowsProps = LogoRowsOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const logoRowsParts: {
+    readonly root: "dds-logorows";
+    readonly inner: "dds-logorows__inner";
+    readonly header: "dds-logorows__header";
+    readonly title: "dds-logorows__title";
+    readonly description: "dds-logorows__description";
+    readonly link: "dds-logorows__link";
+    readonly rail: "dds-logorows__rail";
+    readonly track: "dds-logorows__track";
+    readonly logo: "dds-logorows__logo";
+    readonly 'logo-image': "dds-logorows__logo-image";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const logoRowsDefaults: {
+    readonly ground: "strong";
+};

package/dist/components/blocks/logo-rows/LogoRows.types.js

@@ -0,0 +1,16 @@
+// GENERATED from logo-rows.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const logoRowsParts = {
+    root: 'dds-logorows',
+    inner: 'dds-logorows__inner',
+    header: 'dds-logorows__header',
+    title: 'dds-logorows__title',
+    description: 'dds-logorows__description',
+    link: 'dds-logorows__link',
+    rail: 'dds-logorows__rail',
+    track: 'dds-logorows__track',
+    logo: 'dds-logorows__logo',
+    'logo-image': 'dds-logorows__logo-image',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const logoRowsDefaults = { ground: 'strong' };

package/dist/components/blocks/logo-rows/logo-rows-impl.css

@@ -0,0 +1,179 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ */
+
+/*
+ * The header starts on a phone and is centred from the fold — FeatureCards' arrangement and its
+ * reason: centred text starts every line at a different edge, which costs little across a wide
+ * measure and a great deal across a narrow one.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__header {
+    align-items: center;
+    margin-inline: auto;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__link {
+    justify-content: center;
+  }
+}
+
+/*
+ * The rail runs out to the band's edges.
+ *
+ * `cqi` is the band's width — the root declares `container-type` — and the bleed is how far the
+ * column stands in from the band's edge: half of whatever the band has beyond the content measure,
+ * plus the gutter. A negative margin of that measure takes the rail out to both edges, so the row
+ * fades out at the band's edge rather than at the column's — TestimonialRow's breakout.
+ */
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__rail {
+  --dds-logorows-bleed: calc((100cqi - min(100cqi, var(--size-content-max))) / 2 + var(--space-inset-page));
+  margin-inline: calc(-1 * var(--dds-logorows-bleed));
+}
+
+/*
+ * Both ends fade out rather than cut — LogoColumns' mask, turned on its side.
+ *
+ * A mask rather than a painted gradient, so it reads on any ground with no colour to keep in step,
+ * and eased: the opacity follows a smoothstep curve across the fade, sampled at its stops, because
+ * a straight fade has its sharpest change at both ends. Half a tile at each end. `to right` is
+ * physical, and the only gradient direction CSS has — harmless here, the fade being the same at
+ * both ends whichever way the page reads.
+ */
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__rail {
+  --dds-logorows-fade: calc(var(--size-logo-rows-tile) * 0.5);
+  mask-image: linear-gradient(
+    to right,
+    transparent calc(var(--dds-logorows-fade) * 0),
+    color-mix(in srgb, black 6.1%, transparent) calc(var(--dds-logorows-fade) * 0.15),
+    color-mix(in srgb, black 21.6%, transparent) calc(var(--dds-logorows-fade) * 0.3),
+    color-mix(in srgb, black 42.5%, transparent) calc(var(--dds-logorows-fade) * 0.45),
+    color-mix(in srgb, black 64.8%, transparent) calc(var(--dds-logorows-fade) * 0.6),
+    color-mix(in srgb, black 84.4%, transparent) calc(var(--dds-logorows-fade) * 0.75),
+    color-mix(in srgb, black 97.2%, transparent) calc(var(--dds-logorows-fade) * 0.9),
+    black calc(var(--dds-logorows-fade) * 1),
+    black calc(100% - var(--dds-logorows-fade) * 1),
+    color-mix(in srgb, black 97.2%, transparent) calc(100% - var(--dds-logorows-fade) * 0.9),
+    color-mix(in srgb, black 84.4%, transparent) calc(100% - var(--dds-logorows-fade) * 0.75),
+    color-mix(in srgb, black 64.8%, transparent) calc(100% - var(--dds-logorows-fade) * 0.6),
+    color-mix(in srgb, black 42.5%, transparent) calc(100% - var(--dds-logorows-fade) * 0.45),
+    color-mix(in srgb, black 21.6%, transparent) calc(100% - var(--dds-logorows-fade) * 0.3),
+    color-mix(in srgb, black 6.1%, transparent) calc(100% - var(--dds-logorows-fade) * 0.15),
+    transparent calc(100% - var(--dds-logorows-fade) * 0)
+  );
+}
+
+/* A tile three quarters as wide on a phone, so a row still shows two and the start of a third. */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__logo {
+    inline-size: calc(var(--size-logo-rows-tile) * 0.75);
+  }
+}
+
+/*
+ * Tiles keep their width: a flex item shrinks to fit before it overflows, and a row of squeezed
+ * tiles is the one thing this is not.
+ */
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__logo {
+  flex: none;
+}
+
+/*
+ * Each row is as wide as its tiles, not as the rail. The rail is a column, and a column stretches
+ * its items across itself, which held every row to the band's width: its movement — a share of its
+ * own width — was then a share of the band rather than one set of logos, and changed with the
+ * screen instead of with what the row holds.
+ */
+:where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track {
+  align-self: flex-start;
+}
+
+/*
+ * The rows run with the scroll, in opposite directions: the first toward the start, the second
+ * toward the end.
+ *
+ * A view timeline on the rail measures its pass through the viewport, and each row travels one set
+ * across that pass, so the end of the movement shows exactly what the start did and nothing jumps
+ * at either end. One set is a quarter of the row, the row being four sets, with the gap after the
+ * last tile counted in — four sets of tiles have one gap fewer than four sets of tile-and-gap.
+ * Four rather than three so that a row of eight logos still reaches past a wide screen's far edge
+ * at the end of its travel. The second row runs the same
+ * distance the other way by starting where the first ends. In a right-to-left page a row is laid
+ * from the other edge and runs on past the left one, so both directions turn round.
+ *
+ * The timeline measures against the nearest scroll container, which is why the section and the
+ * rail clip with `overflow: clip` rather than `hidden`: `hidden` makes a box a scroll container even
+ * when it never scrolls, and the rows would sit still however far the page moved. A browser with no
+ * scroll timeline draws the rows still, which is the whole of the fallback.
+ */
+@keyframes dds-logorows-to-start {
+  from {
+    translate: none;
+  }
+  to {
+    translate: calc(-1 * (100% + var(--space-grid-gutter)) / 4) 0;
+  }
+}
+
+@keyframes dds-logorows-to-end {
+  from {
+    translate: calc(-1 * (100% + var(--space-grid-gutter)) / 4) 0;
+  }
+  to {
+    translate: none;
+  }
+}
+
+@keyframes dds-logorows-to-start-rtl {
+  from {
+    translate: none;
+  }
+  to {
+    translate: calc((100% + var(--space-grid-gutter)) / 4) 0;
+  }
+}
+
+@keyframes dds-logorows-to-end-rtl {
+  from {
+    translate: calc((100% + var(--space-grid-gutter)) / 4) 0;
+  }
+  to {
+    translate: none;
+  }
+}
+
+@supports (animation-timeline: view()) {
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__rail {
+    view-timeline: --dds-logorows-rail block;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track {
+    animation: dds-logorows-to-start linear both;
+    animation-range: cover;
+    animation-timeline: --dds-logorows-rail;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track[data-row='trailing'] {
+    animation-name: dds-logorows-to-end;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track:dir(rtl) {
+    animation-name: dds-logorows-to-start-rtl;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track[data-row='trailing']:dir(rtl) {
+    animation-name: dds-logorows-to-end-rtl;
+  }
+}
+
+/* A reader who asked for less movement gets none of it: the rows stand still. */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-logorows .dds-logorows__track {
+    animation: none;
+  }
+}

package/dist/components/blocks/page-header/PageHeader.css

@@ -0,0 +1,79 @@
+/* GENERATED from pageheader.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-pageheader {
+  box-sizing: border-box;
+  container-type: inline-size;
+  display: flex;
+  inline-size: 100%;
+  justify-content: center;
+  overflow: hidden;
+  position: relative;
+  background-color: var(--color-bg-brand-strong);
+  color: var(--color-fg-on-brand-strong);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__inner {
+  box-sizing: border-box;
+  display: flex;
+  inline-size: 100%;
+  min-inline-size: 0;
+  position: relative;
+  max-inline-size: var(--size-content-max);
+  padding-block: var(--space-section-default);
+  padding-inline: var(--space-inset-page);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__content {
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  min-inline-size: 0;
+  row-gap: var(--space-heading-description-actions);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  max-inline-size: var(--size-measure-hero-heading);
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__eyebrow {
+  margin-block: 0;
+  font-family: var(--font-eyebrow-lg-family);
+  font-size: var(--font-eyebrow-lg-size);
+  font-weight: var(--font-eyebrow-lg-weight);
+  letter-spacing: var(--font-eyebrow-lg-letter-spacing);
+  line-height: var(--font-eyebrow-lg-line-height);
+  margin-block-end: var(--space-heading-eyebrow-title);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__title {
+  margin-block: 0;
+  text-wrap: balance;
+  font-family: var(--font-h1-family);
+  font-size: var(--font-h1-size);
+  font-weight: var(--font-h1-weight);
+  letter-spacing: var(--font-h1-letter-spacing);
+  line-height: var(--font-h1-line-height);
+  margin-block-end: var(--space-heading-title-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__description {
+  margin-block: 0;
+  font-family: var(--font-body-md-family);
+  font-size: var(--font-body-md-size);
+  font-weight: var(--font-body-md-weight);
+  letter-spacing: var(--font-body-md-letter-spacing);
+  line-height: var(--font-body-md-line-height);
+  max-inline-size: var(--size-measure-hero-description);
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+

package/dist/components/blocks/page-header/PageHeader.d.ts

@@ -0,0 +1,34 @@
+import './PageHeader.css';
+import './page-header-impl.css';
+import '../block-reveal.css';
+import { type PageHeaderProps } from './PageHeader.types.js';
+export type { PageHeaderProps };
+/**
+ * The band that opens a company or a legal page.
+ *
+ * The third of three opening bands, and the only one that is not a hero. Which band a page opens
+ * with follows from where the page sits rather than from a prop: a landing page takes LandingHero
+ * and a product page ProductHero. Separate components rather than one with a switch, so a page
+ * cannot be given a tier it is not.
+ *
+ * Capped rather than a screen tall, which is the whole difference. A reader arrives at Contact or
+ * Terms for the content, so the band names the page and gets out of the way — `size.band.compact`
+ * is the floor it takes, and the page begins immediately under it.
+ *
+ * No photograph and no visual slot, which is a decision rather than an omission: there is nothing
+ * to show on a page of terms, and a slot for one is a slot somebody eventually fills. What the band
+ * paints instead is a faint rule grid over its own ground, drawn in the stylesheet out of a border
+ * role — enough to say the band is deliberate rather than a gap.
+ *
+ * Which also means it has no scrim and needs none. The other two darken a photograph so a title
+ * reads over it; here the ground is the component's own and its contrast is already known.
+ *
+ * The steps inside the text block are carried by each part's own `margin-block-end` rather than by
+ * a gap on the block, because eyebrow-to-title and title-to-description are two different roles
+ * that agree at full width and part company on a phone.
+ *
+ * The title carries the band's accessible name through `aria-labelledby`. A `<section>` is only a
+ * region landmark once it has a name, and a band that announced itself as an unnamed section is one
+ * more thing a screen reader user walks through rather than a place they can skip to.
+ */
+export declare function PageHeader({ eyebrow, title, headingLevel, description, actions, }: PageHeaderProps): import("react").JSX.Element;

package/dist/components/blocks/page-header/PageHeader.js

@@ -0,0 +1,43 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './PageHeader.css';
+import './page-header-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { pageHeaderDefaults, pageHeaderParts } from './PageHeader.types.js';
+/**
+ * The band that opens a company or a legal page.
+ *
+ * The third of three opening bands, and the only one that is not a hero. Which band a page opens
+ * with follows from where the page sits rather than from a prop: a landing page takes LandingHero
+ * and a product page ProductHero. Separate components rather than one with a switch, so a page
+ * cannot be given a tier it is not.
+ *
+ * Capped rather than a screen tall, which is the whole difference. A reader arrives at Contact or
+ * Terms for the content, so the band names the page and gets out of the way — `size.band.compact`
+ * is the floor it takes, and the page begins immediately under it.
+ *
+ * No photograph and no visual slot, which is a decision rather than an omission: there is nothing
+ * to show on a page of terms, and a slot for one is a slot somebody eventually fills. What the band
+ * paints instead is a faint rule grid over its own ground, drawn in the stylesheet out of a border
+ * role — enough to say the band is deliberate rather than a gap.
+ *
+ * Which also means it has no scrim and needs none. The other two darken a photograph so a title
+ * reads over it; here the ground is the component's own and its contrast is already known.
+ *
+ * The steps inside the text block are carried by each part's own `margin-block-end` rather than by
+ * a gap on the block, because eyebrow-to-title and title-to-description are two different roles
+ * that agree at full width and part company on a phone.
+ *
+ * The title carries the band's accessible name through `aria-labelledby`. A `<section>` is only a
+ * region landmark once it has a name, and a band that announced itself as an unnamed section is one
+ * more thing a screen reader user walks through rather than a place they can skip to.
+ */
+export function PageHeader({ eyebrow, title, headingLevel = pageHeaderDefaults.headingLevel, description, actions, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const Title = headingLevel === 'h2' ? 'h2' : 'h1';
+    return (_jsx("section", { className: pageHeaderParts.root, "aria-labelledby": titleId, children: _jsx("div", { className: pageHeaderParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: pageHeaderParts.content, children: [_jsxs("div", { className: pageHeaderParts.text, children: [given(eyebrow) ? (_jsx("p", { className: pageHeaderParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: pageHeaderParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: pageHeaderParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: pageHeaderParts.actions, ...arriving(3), children: actions })) : null] }) }) }));
+}

package/dist/components/blocks/page-header/PageHeader.types.d.ts

@@ -0,0 +1,32 @@
+import type { ReactNode } from 'react';
+export interface PageHeaderOwnProps {
+    /** A word or two placing the page before its title names it — a product family, a market, a campaign */
+    eyebrow?: string;
+    /** Always. The one thing the page is about, in the fewest words that still say it. It is the page's leading heading and the band's accessible name */
+    title: string;
+    /**
+     * `h1` — The default, and correct whenever the hero opens the page — which is what a hero is for
+     * `h2` — The rare page that already carries its `h1` elsewhere, and would otherwise have two
+     */
+    headingLevel?: 'h1' | 'h2';
+    /** The sentence under the title that says what the claim above it means, for the reader who is not yet convinced by the claim alone */
+    description?: string;
+    /** The one or two things the page wants a reader to do. Composed by the page rather than described to this component, so a call to action is the same Button here as anywhere else on the site */
+    actions?: ReactNode;
+}
+export type PageHeaderProps = PageHeaderOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const pageHeaderParts: {
+    readonly root: "dds-pageheader";
+    readonly inner: "dds-pageheader__inner";
+    readonly content: "dds-pageheader__content";
+    readonly text: "dds-pageheader__text";
+    readonly eyebrow: "dds-pageheader__eyebrow";
+    readonly title: "dds-pageheader__title";
+    readonly description: "dds-pageheader__description";
+    readonly actions: "dds-pageheader__actions";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const pageHeaderDefaults: {
+    readonly headingLevel: "h1";
+};

package/dist/components/blocks/page-header/PageHeader.types.js

@@ -0,0 +1,14 @@
+// GENERATED from page-header.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const pageHeaderParts = {
+    root: 'dds-pageheader',
+    inner: 'dds-pageheader__inner',
+    content: 'dds-pageheader__content',
+    text: 'dds-pageheader__text',
+    eyebrow: 'dds-pageheader__eyebrow',
+    title: 'dds-pageheader__title',
+    description: 'dds-pageheader__description',
+    actions: 'dds-pageheader__actions',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const pageHeaderDefaults = { headingLevel: 'h1' };

package/dist/components/blocks/page-header/page-header-impl.css

@@ -0,0 +1,176 @@
+/*
+ * Scoped to this package, like the generated sheet beside it.
+ *
+ * `:where([data-dds-context="marketing"])` confines these rules without contributing specificity,
+ * so each is decided against the generated rule on its own terms.
+ */
+
+/*
+ * Capped, not a screen.
+ *
+ * `size.band.compact` is the floor, and it is the one thing that separates this tier from the two
+ * above it — both take `100cqh`. A page opened for its content wants its name and then the
+ * content, so the band is held to size.band.compact rather than a screen and the first sentence
+ * is on screen with it.
+ *
+ * `min-block-size` rather than `block-size`, so a long title or a third line of description grows
+ * the band instead of being clipped by it.
+ */
+:where([data-dds-context="marketing"]) .dds-pageheader {
+  align-items: center;
+  min-block-size: var(--size-band-compact);
+}
+
+/*
+ * The rule grid, drawn rather than fetched.
+ *
+ * The reference design paints this with an inline SVG carrying its own brand hex — a 3KB data URI
+ * with `#FF7E88` written into it, which is a colour decision hidden where no token can reach and
+ * no check can read. Two repeating gradients say the same thing out of `color.border.subtle-inverse`,
+ * the role this package already has for a hairline on a dark ground.
+ *
+ * `background-image` rather than a part of its own: it is a texture on the band's ground, not an
+ * element, and a part that rendered an empty div to carry a pattern would be markup standing in
+ * for a paint.
+ *
+ * The line is `border.width.hairline` and the step is `size.rule-grid.pitch`, a role added with this
+ * band. A pitch is not a gap — it is how far apart a decorative line recurs, not the space between
+ * two things a reader is comparing — so it earns a name of its own rather than borrowing one.
+ */
+:where([data-dds-context="marketing"]) .dds-pageheader {
+  background-image:
+    /*
+     * The fade, painted over the grid rather than into it.
+     *
+     * A background layer list paints first-listed on top, so this sits above both sets of rules
+     * and below everything the band holds — the heading is a child element and children paint
+     * above every background their box carries, so the fade reaches the grid and nothing else.
+     *
+     * It fades *from* the band's own ground, which is how a paint covers something without a mask:
+     * opaque at the top, where the rules are covered, and transparent at the foot, where they come
+     * through. `color.bg.brand-strong` is the same role the band paints beneath, so the fade and
+     * the ground are one colour and the grid is the only thing that changes.
+     *
+     * That way round because the band opens under a navigation bar and closes against the page:
+     * the rules gather towards the edge the content carries on over, so the grid reads as the
+     * ground the page is built on rather than as a lid over the heading.
+     *
+     * Masking the element instead would have faded the title with it — the grid is a background
+     * and the words are not, and a mask cannot tell them apart.
+     */
+    linear-gradient(to bottom, var(--color-bg-brand-strong), transparent),
+    /*
+     * `to right` is physical, and it is the one place in these blocks that is.
+     *
+     * A CSS gradient has no logical direction — there is no `to inline-end` — so a pattern that
+     * must mirror has to be written twice under a direction query. This one does not: the rules
+     * repeat on a fixed pitch and the whole field is centred, so the same pixels land in the same
+     * places whichever way the page is read. A grid of evenly spaced lines has no leading edge to
+     * get wrong.
+     *
+     * Said out loud because the next pattern here may not be periodic, and a reader who copies
+     * this line into one that is would mirror nothing. See the `written-along-the-reading-axis`
+     * rule.
+     */
+    repeating-linear-gradient(
+      to right,
+      var(--color-border-subtle-inverse) 0 var(--border-width-hairline),
+      transparent var(--border-width-hairline) var(--size-rule-grid-pitch)
+    ),
+    /*
+     * The horizontal rules run up from the foot, not down from the top.
+     *
+     * Drawn `to bottom` and centred, the last rule landed wherever the band's height left it — a
+     * line short of the edge on one page, a line past it on the next. `to top` starts the pattern at
+     * the bottom edge, so the first rule is the band's own lower edge and every other one is a
+     * whole pitch above it, whatever the title and description make the height. The fade covers
+     * the top, which is the only end that can now fall between two rules.
+     */
+    repeating-linear-gradient(
+      to top,
+      var(--color-border-subtle-inverse) 0 var(--border-width-hairline),
+      transparent var(--border-width-hairline) var(--size-rule-grid-pitch)
+    );
+  background-position: center;
+}
+
+/*
+ * A title with nothing under it carries no step under it.
+ *
+ * The steps inside the text block sit on each part's own `margin-block-end`, because eyebrow-to-
+ * title and title-to-description are two roles that agree at full width and part company on a
+ * phone. The cost is a trailing margin: with `description` absent the title is the last child and
+ * its step is measured against nothing.
+ */
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * Starts on a phone, centred once the band is wide enough to hold a line.
+ *
+ * The same rule the product tier follows, and the reference design applies it to both: centred
+ * text is read from a different starting edge on every line, which costs little across a wide
+ * measure and a great deal across a narrow one.
+ *
+ * `size.measure.hero-heading` caps the block at either width; `margin-inline: auto` is what centres
+ * that capped block rather than leaving it at the column's leading edge with its text centred
+ * inside it.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__content {
+    align-items: center;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__text {
+    margin-inline: auto;
+  }
+
+  /*
+   * And the line under the title, which is held to a narrower measure than the block it sits in.
+   *
+   * `text` runs to a heading's measure and the description to a reading one, so the description's
+   * box is the narrower of the two and was sitting against the start edge of a centred block. Its
+   * words were centred within it, so what a reader saw was a centred title over a paragraph that
+   * had slipped left — the kind of misalignment that looks like a mistake in the copy rather than
+   * in a box nobody can see.
+   *
+   * Only where the block is centred. Below the fold everything ranges to the start and an auto margin
+   * would centre the one part that should not be.
+   */
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions {
+    justify-content: center;
+  }
+}
+
+/*
+ * Two calls to action stack on a phone and stand side by side once there is room.
+ *
+ * The reference design makes each one full width at the narrow end — a button that hugs its label
+ * on a phone is a tap target sized by how long the word happens to be — and lets them hug once the
+ * band is wide enough to hold both on a line.
+ */
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions {
+  align-items: stretch;
+  flex-direction: column;
+}
+
+:where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions > * {
+  inline-size: 100%;
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-pageheader .dds-pageheader__actions > * {
+    inline-size: auto;
+  }
+}