@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/dist/components/blocks/landing-hero/LandingHero.css

@@ -0,0 +1,85 @@
+/* GENERATED from landinghero.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-landinghero {
+  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-landinghero .dds-landinghero__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-landinghero .dds-landinghero__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-landinghero .dds-landinghero__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__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-landinghero .dds-landinghero__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-landinghero .dds-landinghero__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-landinghero .dds-landinghero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__media {
+  min-inline-size: 0;
+  position: relative;
+  aspect-ratio: var(--aspect-portrait);
+  border-radius: var(--radius-none);
+}
+

package/dist/components/blocks/landing-hero/LandingHero.d.ts

@@ -0,0 +1,41 @@
+import './LandingHero.css';
+import './landing-hero-impl.css';
+import '../block-reveal.css';
+import { type LandingHeroProps } from './LandingHero.types.js';
+export type { LandingHeroProps };
+/**
+ * The band that opens a marketing page.
+ *
+ * The landing tier's band, and one of three. Which band a page opens with follows from where the
+ * page sits rather than from a prop: a product page takes ProductHero and a legal page PageHeader.
+ * Separate components rather than one with a switch, so a page cannot be given a tier it is not.
+ *
+ * One column, read down: what the page is about, then what a reader can do about it. The eyebrow,
+ * the title and the description are strings the page passes; the calls to action and both visuals
+ * are nodes it composes. Nothing here writes copy or decides a destination — the same stance
+ * Footer takes at the other end of the page.
+ *
+ * `root` spans the full width and `inner` holds the measure, which is the arrangement Footer uses
+ * and for the same reason: a ground stopping at the measure would read as a wide card at the top of
+ * the page rather than as the page beginning. The ground is dark and the ink is set once on the
+ * root, inherited by the eyebrow, the title and the description alike — this package's rule about a
+ * section that paints a ground, and the reason none of the three names a colour of its own.
+ *
+ * The steps inside the text block are carried by each part's own `margin-block-end` rather than by
+ * a gap on the block. Eyebrow-to-title and title-to-description are two different roles that happen
+ * to agree at full width and part company on a phone — twelve against sixteen — so a single gap
+ * could only ever have been one of them. `text` binds `space.gap.none` to say the absence is
+ * deliberate rather than forgotten.
+ *
+ * `media` is a child of the band rather than of the column. The visual is
+ * placed against the band's own edge, which an element nested inside the measure could not reach.
+ * 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 hero 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. The id is
+ * `useId` rather than a prop, because a page should not have to invent one to get a landmark.
+ *
+ * Both visual slots are hidden from assistive technology. What the band says is the
+ * title and the description; a photograph that carried meaning they do not would be a hero that
+ * reads as empty to anyone who cannot see it, and the contract says so.
+ */
+export declare function LandingHero({ eyebrow, title, headingLevel, description, actions, media, backgroundImage, }: LandingHeroProps): import("react").JSX.Element;

package/dist/components/blocks/landing-hero/LandingHero.js

@@ -0,0 +1,54 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './LandingHero.css';
+import './landing-hero-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { landingHeroDefaults, landingHeroParts, } from './LandingHero.types.js';
+/**
+ * The band that opens a marketing page.
+ *
+ * The landing tier's band, and one of three. Which band a page opens with follows from where the
+ * page sits rather than from a prop: a product page takes ProductHero and a legal page PageHeader.
+ * Separate components rather than one with a switch, so a page cannot be given a tier it is not.
+ *
+ * One column, read down: what the page is about, then what a reader can do about it. The eyebrow,
+ * the title and the description are strings the page passes; the calls to action and both visuals
+ * are nodes it composes. Nothing here writes copy or decides a destination — the same stance
+ * Footer takes at the other end of the page.
+ *
+ * `root` spans the full width and `inner` holds the measure, which is the arrangement Footer uses
+ * and for the same reason: a ground stopping at the measure would read as a wide card at the top of
+ * the page rather than as the page beginning. The ground is dark and the ink is set once on the
+ * root, inherited by the eyebrow, the title and the description alike — this package's rule about a
+ * section that paints a ground, and the reason none of the three names a colour of its own.
+ *
+ * The steps inside the text block are carried by each part's own `margin-block-end` rather than by
+ * a gap on the block. Eyebrow-to-title and title-to-description are two different roles that happen
+ * to agree at full width and part company on a phone — twelve against sixteen — so a single gap
+ * could only ever have been one of them. `text` binds `space.gap.none` to say the absence is
+ * deliberate rather than forgotten.
+ *
+ * `media` is a child of the band rather than of the column. The visual is
+ * placed against the band's own edge, which an element nested inside the measure could not reach.
+ * 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 hero 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. The id is
+ * `useId` rather than a prop, because a page should not have to invent one to get a landmark.
+ *
+ * Both visual slots are hidden from assistive technology. What the band says is the
+ * title and the description; a photograph that carried meaning they do not would be a hero that
+ * reads as empty to anyone who cannot see it, and the contract says so.
+ */
+export function LandingHero({ eyebrow, title, headingLevel = landingHeroDefaults.headingLevel, description, actions, media, backgroundImage, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const Title = headingLevel === 'h2' ? 'h2' : 'h1';
+    return (_jsxs("section", { className: landingHeroParts.root, "aria-labelledby": titleId, 
+        /* The one inline style here, and it is a value rather than a decision: which photograph,
+           supplied by the page. Everything about how it is drawn — the cover fit and the position — is in the stylesheet, where it can be reasoned about. A background shorthand
+           would have reset those four properties every time the page passed an image. */
+        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: [media ? (_jsx("div", { className: landingHeroParts.media, "aria-hidden": "true", children: media })) : null, _jsx("div", { className: landingHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: landingHeroParts.content, children: [_jsxs("div", { className: landingHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: landingHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: landingHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: landingHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: landingHeroParts.actions, ...arriving(3), children: actions })) : null] }) })] }));
+}

package/dist/components/blocks/landing-hero/LandingHero.types.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+export interface LandingHeroOwnProps {
+    /** 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;
+    /** The band's visual — the subject standing beside the claim, cropped by the band's own inline edge rather than floating clear of it */
+    media?: ReactNode;
+    /** A photograph filling the whole band. It is shown as it is — nothing is painted over it, so choose one already dark enough that the title reads on it */
+    backgroundImage?: string;
+}
+export type LandingHeroProps = LandingHeroOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const landingHeroParts: {
+    readonly root: "dds-landinghero";
+    readonly inner: "dds-landinghero__inner";
+    readonly content: "dds-landinghero__content";
+    readonly text: "dds-landinghero__text";
+    readonly eyebrow: "dds-landinghero__eyebrow";
+    readonly title: "dds-landinghero__title";
+    readonly description: "dds-landinghero__description";
+    readonly actions: "dds-landinghero__actions";
+    readonly media: "dds-landinghero__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const landingHeroDefaults: {
+    readonly headingLevel: "h1";
+};

package/dist/components/blocks/landing-hero/LandingHero.types.js

@@ -0,0 +1,15 @@
+// GENERATED from landing-hero.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const landingHeroParts = {
+    root: 'dds-landinghero',
+    inner: 'dds-landinghero__inner',
+    content: 'dds-landinghero__content',
+    text: 'dds-landinghero__text',
+    eyebrow: 'dds-landinghero__eyebrow',
+    title: 'dds-landinghero__title',
+    description: 'dds-landinghero__description',
+    actions: 'dds-landinghero__actions',
+    media: 'dds-landinghero__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const landingHeroDefaults = { headingLevel: 'h1' };

package/dist/components/blocks/landing-hero/landing-hero-impl.css

@@ -0,0 +1,355 @@
+/*
+ * 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. Rules that have to win are
+ * written a class deeper than they look, which is what footer-impl.css does and for the same
+ * reason: weight rather than which sheet the bundler happened to write last.
+ */
+
+/*
+ * The photograph, drawn the one way a band wants it.
+ *
+ * The page passes which image; how it is fitted is this component's decision and belongs here
+ * rather than in the inline style, where a page could not see it and a reader of the markup would
+ * think the four properties were the page's choice. `cover` because a hero is a band of fixed
+ * height and a photograph that letterboxed would show the ground through it.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero {
+  background-position: center;
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+
+/*
+ * 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 of that arrangement is a trailing margin: with `description` absent the title is
+ * the last child and its step is measured against nothing, which adds sixteen pixels to the step
+ * `content` already sets between the text and the actions.
+ *
+ * `:last-child` is the condition itself rather than a prop standing in for it — the description is
+ * one of two parts that can follow the title, and asking the DOM which is last is the question with
+ * one answer.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * The band is at least a screen tall.
+ *
+ * `100cqh` rather than `100svh`, and the two are the same number on a real page: with no ancestor
+ * declaring size containment, a container query length falls back to the small viewport, which is
+ * the unit this wants and the reason it is not `vh` — on a phone the large viewport is measured
+ * with the browser chrome retracted, so a hero sized to it puts its own actions under the address
+ * bar until the reader scrolls, which is the one thing the band exists to prevent.
+ *
+ * What the container unit adds is an answer for a frame standing in for a window. The preview
+ * shows a band inside a panel a fraction of the screen's height; sized against the viewport it
+ * escaped that panel and covered the controls under it. A frame that declares `container-type:
+ * size` is now what this measures against, which is the same arrangement the preview already uses
+ * for a component pinned to the window — the component is right about what it wants, and the frame
+ * is what has to behave like a window.
+ *
+ * `min-block-size` rather than `block-size`, so a band whose copy runs long grows instead of
+ * clipping it. A fixed height was the source design's and it loses the description at a large text
+ * size.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero {
+  /*
+   * Where the content sits is `inner`'s to say, not this element's.
+   *
+   * The band declares `container-type`, and a container query cannot reach the element that
+   * declares it — a rule on the band inside one is measured against the band's own ancestor, which
+   * on a page is nothing at all. Written here, the phone's arrangement held at every width and the
+   * claim ran off the foot of a desktop band. `inner` is a descendant, so a query reaches it, and
+   * the band simply lets it fill the height.
+   *
+   * On a phone the claim sits at the foot of the band, not in the middle of it.
+   *
+   * There the subject fills the band behind the words, and text centred against it reads as
+   * floating in front of a picture. At the base the words read as standing on the same ground —
+   * subject above, claim at the foot, where a reader's eye finishes and the scroll carries on.
+   *
+   * At full width the arrangement is the other one and the wide rule says so: the subject is
+   * beside the claim rather than behind it, so there is nothing to stand on and centring is what
+   * pairs the two columns.
+   *
+   * The step below the words is the band's own `padding-block`, which holds here, where the
+   * content rests on the band's foot. The wide rule zeroes it, because centred content needs no
+   * step, and content resting on an edge is the one case that does.
+   */
+  min-block-size: 100cqh;
+}
+
+/*
+ * The subject is placed against the band at every width, never laid out beside the text.
+ *
+ * Absolute is the base rule rather than the wide one, which is the correction: `media` is a child
+ * of the band and the band is a flex row, so without this it became a second column at anything
+ * under the fold width — a picture beside the claim, each squeezing the other, with the title run
+ * off the inline edge. The source design has it absolute at every width for exactly this reason
+ * and moves it at the breakpoint rather than placing it there.
+ *
+ * Centred and filling the band by default, which is what a narrow screen wants: the subject behind
+ * the claim rather than next to it. `inner` is painted over it by DOM order — it comes last in the
+ * markup and both are positioned — so no stacking order has to be named.
+ *
+ * `pointer-events: none` because it is decoration and the contract says so. Without it a subject
+ * covering the band would swallow a press meant for the button underneath.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__media {
+  /*
+   * Stood on the band's foot rather than floated in it.
+   *
+   * A cutout of a person hanging with air under it reads as a sticker; cropped by the edge it is
+   * standing in the band. It is also what puts the subject above the claim now that the claim is
+   * at the base — the two share the foot of the band rather than overlapping in the middle of it.
+   *
+   * One inset and a size, never both insets: naming a start, an end and a height over-constrains
+   * the box, and CSS resolves that by dropping the end — which is how the wide rule came to hug
+   * the top while saying bottom.
+   */
+  align-items: flex-end;
+  display: flex;
+  inset-block-end: 0;
+  inset-block-start: auto;
+  inset-inline: 0;
+  block-size: 80%;
+  justify-content: center;
+  pointer-events: none;
+  position: absolute;
+}
+
+/*
+ * And the words are read off a scrim rather than off the subject.
+ *
+ * At a phone's width the claim sits over the picture, and a photograph is not a ground anybody
+ * chose — whatever is behind a given line is whatever the art happened to put there. The scrim
+ * darkens the foot of the band and fades out above it, so the words have a ground that is the
+ * band's own and the subject is still visible through it.
+ *
+ * `color.bg.overlay` rather than `overlay-subtle`, and the difference is what the scrim is for. A
+ * light scrim is enough to settle a picture that is already dark; this one has to hold white type
+ * over art nobody has seen. A page passing a bright photograph is the case that decides the value,
+ * and at a quarter of black white text on it is unreadable — which is a legibility failure a
+ * component cannot leave to whoever picks the art.
+ *
+ * It costs nothing where it is not needed: the band's own ground is near-black, so over that the
+ * scrim is invisible, and it only does work once something light is behind it.
+ *
+ * It is a black alpha, so fading it to `transparent` fades within one hue: a scrim of any other
+ * colour would pass through grey on its way out and leave a band across the picture.
+ *
+ * On `inner` rather than on the band, because the band paints before the subject and the scrim has
+ * to come after it. `inner` is the last thing in the markup and is positioned, so it paints over
+ * the picture without a stacking order being named — the same arrangement the subject itself
+ * relies on. At this width `inner` is the full width of the phone, so the scrim runs edge to edge
+ * and only its contents are held off by the gutter.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__inner {
+  /* At the foot on a phone, and filling the band so the scrim has somewhere to sit. */
+  align-items: flex-end;
+  background-image: linear-gradient(to top, var(--color-bg-overlay), transparent);
+  /* Anchored to the foot and given a height of its own, so the scrim is a band under the words
+     rather than a wash over the whole picture. This box is the height of the viewport; the paint
+     is three fifths of it, which covers the claim and its actions and leaves the subject above
+     them untouched. */
+  background-position: bottom;
+  background-repeat: no-repeat;
+  background-size: 100% 60%;
+}
+
+/*
+ * Text against the measure's leading edge, visual against the band's own.
+ *
+ * The column takes half the measure and no more. A claim set at eighty pixels across the full
+ * twelve hundred is two words a line with a ragged edge, and the visual it is supposed to sit
+ * beside has nowhere to be.
+ *
+ * `@container` rather than `@media`, asking the band's own width: the root declares
+ * `container-type`, so a hero placed in a narrow region of a wide page folds on its own measure.
+ * `48rem` longhand because `var()` is not permitted in a container query condition — the same
+ * constraint footer-impl.css works under, and the same width, so the two bands fold together.
+ */
+@container (min-width: 48rem) {
+  /*
+   * Half the measure, which is the reference design's 600 against its 1280 to within a few pixels
+   * — and holds at any width, where a number would only be right at one.
+   */
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__content {
+    max-inline-size: 50%;
+  }
+
+  /*
+   * No step above or below the words at this width.
+   *
+   * The band is already a screen tall and the content is centred in it, so the section step has
+   * nothing to do: centring sets where the words sit, and a step on either side would only move
+   * them off the middle. The step the contract binds is for the narrower arrangement, where the
+   * words rest on the band's foot and need the distance from it.
+   */
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__inner {
+    /* Centred, because the two columns are a pair rather than a thing standing on a ground. */
+    align-items: center;
+    /* No scrim: the subject is beside the claim here, not behind it, so there is nothing for the
+       words to be read off and a gradient would be a shadow under a column of text. */
+    background-image: none;
+    padding-block: 0;
+  }
+
+  /*
+   * The visual is placed against the band's inline end, not the column.
+   *
+   * Absolute against the root — which is why `media` is the band's child and not the content's.
+   * Off the band's block end but held off its inline one, so a cutout of a person is cropped at the
+   * waist by the band's own foot while still standing inside the page's gutter. The source design
+   * bleeds it off the side as well; run to the edge it read as a panel butted against the window
+   * rather than as a subject in the band, and the two edges are not the same decision — the foot
+   * is a crop and the side is a margin.
+   *
+   * `space.inset.page` is that margin, which is the role that holds a page's content off the edge
+   * of the window. The subject lands on the same line the content does, so the band has one gutter
+   * rather than a gutter and a picture that ignores it.
+   *
+   * The two `auto`s are what make that true, and their absence is why it was not. The base rule
+   * above sets `inset: 0` — all four sides — because at narrow widths the visual fills the band.
+   * Naming only the end insets here left both sides set on each axis with a size as well, which is
+   * over-constrained: CSS resolves that by ignoring the end value, so the visual hugged the start
+   * and the top while the rule said end and bottom. Releasing the start insets is what lets the
+   * ones named below take effect.
+   */
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__media {
+    block-size: 100%;
+    /*
+     * Wide enough for the shape rather than for a share of the band.
+     *
+     * The height is the band's and `aspect.portrait` is bound on the part, so the width follows
+     * from the two — about half the band at a laptop's proportions, which is what the fixed half
+     * was approximating. Stated as a share it was right at one window shape and wrong at every
+     * other: a tall window gave a portrait subject a landscape box and cropped the figure's head.
+     */
+    inline-size: auto;
+    inset-block-end: -14%;
+    inset-block-start: auto;
+    inset-inline-end: var(--space-inset-page);
+    inset-inline-start: auto;
+    position: absolute;
+  }
+
+}
+
+/*
+ * Whatever the page put in a visual slot fills the slot.
+ *
+ * The slots take a node rather than a source, so what arrives is the page's element and this
+ * cannot know whether it carries dimensions. Left alone an `<img>` renders at its intrinsic size,
+ * which for a product screenshot is wider than the band. `max-inline-size` rather than
+ * `inline-size` so a mark narrower than the slot is not stretched to fill it.
+ */
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__media > * {
+  block-size: 100%;
+  max-inline-size: 100%;
+  object-fit: contain;
+}
+
+/*
+ * The band rounds off as it leaves.
+ *
+ * Scroll-driven rather than timed: `view()` measures the band against the viewport, so the corner
+ * arrives as the reader scrolls and reverses when they scroll back. There is no element entering
+ * and no transition to hang it on, which is what puts a keyframed animation in this file rather
+ * than in a binding.
+ *
+ * `radius.expressive` is the corner, and it is the role's own description — the most rounding
+ * before full, for high-impact visual sections and banners. The source design carries fifty-six
+ * pixels here, which is not a step on this ramp; forty-eight is, and the difference is invisible
+ * against a band the width of the page.
+ *
+ * Only the two lower corners. The band starts at the top of the document with nothing above it to
+ * round away from, and a hero that curved at the top would read as a card the page had been
+ * dropped into.
+ */
+@keyframes dds-landinghero-exit {
+  to {
+    border-end-end-radius: var(--radius-expressive);
+    border-end-start-radius: var(--radius-expressive);
+    scale: var(--motion-scale-band-exit);
+  }
+}
+
+@supports (animation-timeline: view()) {
+  :where([data-dds-context="marketing"]) .dds-landinghero {
+    animation: dds-landinghero-exit linear both;
+    animation-range: exit 0% exit 40%;
+    animation-timeline: view();
+  }
+}
+
+/*
+ * A reader who asked for less movement gets none of it.
+ *
+ * The generated sheet writes a reduced-motion block from its bindings, and this animation is not
+ * one of them — it is written here, so its own exception has to be too. The band simply keeps its
+ * square corner, which is what it has at rest anyway.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-landinghero {
+    animation: none;
+  }
+}
+
+/*
+ * A band in a short container compacts, rather than clipping what it holds.
+ *
+ * `space.section.default` is 112 top and bottom — 224 of the band before a word is set, which is
+ * right at a screen's height and is most of an overview row. The band is as tall as the screen, so
+ * it is the screen's height that is asked: a `@media` query, on a real page. The band's own
+ * `container-type` is `inline-size`, which cannot answer a height, so a container query alone
+ * matched only inside a frame that measures its height — the preview's — and never in production.
+ * Both are written: the media query for a page, the container query for a frame. The role already
+ * exists for a band that has to be shorter; nothing new is named here.
+ *
+ * `40rem` longhand because `var()` is not permitted in a container query condition.
+ */
+@container (max-height: 40rem) {
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__inner {
+    padding-block: var(--space-section-compact);
+  }
+}
+
+@media (max-height: 40rem) {
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__inner {
+    padding-block: var(--space-section-compact);
+  }
+}
+
+/*
+ * 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-landinghero .dds-landinghero__actions {
+  align-items: stretch;
+  flex-direction: column;
+}
+
+:where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__actions > * {
+  inline-size: 100%;
+}
+
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__actions {
+    align-items: center;
+    flex-direction: row;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-landinghero .dds-landinghero__actions > * {
+    inline-size: auto;
+  }
+}