@deriv-com/dds-marketing 0.2.0 → 1.0.0

package/dist/components/blocks/product-hero/ProductHero.css

@@ -0,0 +1,86 @@
+/* GENERATED from producthero.contract.json. Do not edit. */
+
+:where([data-dds-context="marketing"]) .dds-producthero {
+  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-producthero .dds-producthero__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-producthero .dds-producthero__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-producthero .dds-producthero__text {
+  display: flex;
+  flex-direction: column;
+  min-inline-size: 0;
+  row-gap: var(--space-gap-none);
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__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-producthero .dds-producthero__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-producthero .dds-producthero__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-producthero .dds-producthero__actions {
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: var(--space-actions-gap);
+  row-gap: var(--space-actions-gap);
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media {
+  min-inline-size: 0;
+  overflow: hidden;
+  position: relative;
+  aspect-ratio: var(--aspect-square);
+  border-radius: var(--radius-none);
+}
+

package/dist/components/blocks/product-hero/ProductHero.d.ts

@@ -0,0 +1,35 @@
+import './ProductHero.css';
+import './product-hero-impl.css';
+import '../block-reveal.css';
+import { type ProductHeroProps } from './ProductHero.types.js';
+export type { ProductHeroProps };
+/**
+ * The band that opens a product or a market page.
+ *
+ * The product 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 landing page takes LandingHero 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, centred, read down: what the page is about, what a reader can do about it, and then
+ * the thing itself. That last part is the whole difference from the tier above. LandingHero ranges
+ * its claim to the start and places a subject against the band's own edge, cropped by it; here the claim
+ * goes over the middle and the product sits under it, in the column, whole and capped to the same
+ * measure as the text. A product page is about one thing, and nothing should cut into it.
+ *
+ * Which is why `media` is a child of `content` here and a child of the band there. The same slot, in two
+ * places, because the two tiers answer different questions about what a visual is for.
+ *
+ * `root` spans the full width and `inner` holds the measure — 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 everything inside it.
+ *
+ * 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 ProductHero({ eyebrow, title, headingLevel, description, actions, media, backgroundImage, }: ProductHeroProps): import("react").JSX.Element;

package/dist/components/blocks/product-hero/ProductHero.js

@@ -0,0 +1,48 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useId } from 'react';
+import './ProductHero.css';
+import './product-hero-impl.css';
+import '../block-reveal.css';
+import { arriving, useReveal } from '../use-reveal.js';
+import { given } from '../../given.js';
+import { productHeroDefaults, productHeroParts, } from './ProductHero.types.js';
+/**
+ * The band that opens a product or a market page.
+ *
+ * The product 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 landing page takes LandingHero 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, centred, read down: what the page is about, what a reader can do about it, and then
+ * the thing itself. That last part is the whole difference from the tier above. LandingHero ranges
+ * its claim to the start and places a subject against the band's own edge, cropped by it; here the claim
+ * goes over the middle and the product sits under it, in the column, whole and capped to the same
+ * measure as the text. A product page is about one thing, and nothing should cut into it.
+ *
+ * Which is why `media` is a child of `content` here and a child of the band there. The same slot, in two
+ * places, because the two tiers answer different questions about what a visual is for.
+ *
+ * `root` spans the full width and `inner` holds the measure — 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 everything inside it.
+ *
+ * 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 ProductHero({ eyebrow, title, headingLevel = productHeroDefaults.headingLevel, description, actions, media, backgroundImage, }) {
+    const titleId = useId();
+    const [band, revealed] = useReveal();
+    const Title = headingLevel === 'h2' ? 'h2' : 'h1';
+    return (_jsx("section", { className: productHeroParts.root, "aria-labelledby": titleId, 
+        /* The one inline style here, and it is a value rather than a decision: which photograph,
+           supplied by the page. How it is drawn — the cover fit and the position —
+           is in the stylesheet, where it can be reasoned about. */
+        style: given(backgroundImage) ? { backgroundImage: `url(${backgroundImage})` } : undefined, children: _jsx("div", { className: productHeroParts.inner, ref: band, "data-revealed": revealed, children: _jsxs("div", { className: productHeroParts.content, children: [_jsxs("div", { className: productHeroParts.text, children: [given(eyebrow) ? (_jsx("p", { className: productHeroParts.eyebrow, ...arriving(0), children: eyebrow })) : null, _jsx(Title, { className: productHeroParts.title, ...arriving(1), id: titleId, children: title }), given(description) ? (_jsx("p", { className: productHeroParts.description, ...arriving(2), children: description })) : null] }), actions ? (_jsx("div", { className: productHeroParts.actions, ...arriving(3), children: actions })) : null, media ? (_jsx("div", { className: productHeroParts.media, ...arriving(4), "aria-hidden": "true", children: media })) : null] }) }) }));
+}

package/dist/components/blocks/product-hero/ProductHero.types.d.ts

@@ -0,0 +1,37 @@
+import type { ReactNode } from 'react';
+export interface ProductHeroOwnProps {
+    /** 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 product itself, under the claim and the actions — in the column, capped to the measure, and whole */
+    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 ProductHeroProps = ProductHeroOwnProps;
+/** The class each part carries. Apply these — do not retype them. */
+export declare const productHeroParts: {
+    readonly root: "dds-producthero";
+    readonly inner: "dds-producthero__inner";
+    readonly content: "dds-producthero__content";
+    readonly text: "dds-producthero__text";
+    readonly eyebrow: "dds-producthero__eyebrow";
+    readonly title: "dds-producthero__title";
+    readonly description: "dds-producthero__description";
+    readonly actions: "dds-producthero__actions";
+    readonly media: "dds-producthero__media";
+};
+/** Generated so defaults cannot drift from the contract. */
+export declare const productHeroDefaults: {
+    readonly headingLevel: "h1";
+};

package/dist/components/blocks/product-hero/ProductHero.types.js

@@ -0,0 +1,15 @@
+// GENERATED from product-hero.contract.json. Do not edit.
+/** The class each part carries. Apply these — do not retype them. */
+export const productHeroParts = {
+    root: 'dds-producthero',
+    inner: 'dds-producthero__inner',
+    content: 'dds-producthero__content',
+    text: 'dds-producthero__text',
+    eyebrow: 'dds-producthero__eyebrow',
+    title: 'dds-producthero__title',
+    description: 'dds-producthero__description',
+    actions: 'dds-producthero__actions',
+    media: 'dds-producthero__media',
+};
+/** Generated so defaults cannot drift from the contract. */
+export const productHeroDefaults = { headingLevel: 'h1' };

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

@@ -0,0 +1,354 @@
+/*
+ * 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.
+ */
+
+/*
+ * 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. `cover` because a band of fixed
+ * height letterboxing a photograph would show the ground through it.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero {
+  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 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-producthero .dds-producthero__title:last-child {
+  margin-block-end: 0;
+}
+
+/*
+ * A screen tall, like the tier above it.
+ *
+ * `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. What the
+ * container unit adds is an answer for a frame standing in for a window, which is what the preview
+ * gives a band — see `spansThePage`.
+ *
+ * `min-block-size` rather than `block-size`, so a band whose copy runs long grows instead of
+ * clipping it.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero {
+  min-block-size: 100cqh;
+}
+
+/*
+ * Centred, and centred on the measure rather than on the band.
+ *
+ * `size.measure.hero-description` caps the line length; without `margin-inline: auto` the capped block
+ * sits at the column's leading edge while the text inside it is centred, which reads as a
+ * paragraph nudged toward the start of everything above it. The same correction the actions need, for the same
+ * reason: a wrapped row of buttons hugs its content and would otherwise sit at the start edge.
+ */
+/*
+ * 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, so "Try free demo" is an
+ * easier press than "Buy" for no reason a reader would agree with — and lets them hug once the
+ * band is wide enough to hold both on a line.
+ *
+ * Before the wide rules below, not after them: a container query adds no weight, so a phone rule
+ * written later at the same specificity wins at every width — which is how it stood once, with the
+ * actions stacked and stretched across a desktop band.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__actions {
+  align-items: stretch;
+  flex-direction: column;
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__actions > * {
+  inline-size: 100%;
+}
+
+/*
+ * Whatever the page put in a visual slot fills the slot's width.
+ *
+ * The slots take a node rather than a source, so what arrives is the page's element — an `<img>`,
+ * a `<picture>`, or a ratio box holding one — and this cannot know whether it carries dimensions.
+ * Width only: the height is the visual's own business here, unlike the landing tier where the slot
+ * is a sized box and the subject has to fill it.
+ *
+ * The `<img>` rule reaches a level deeper on purpose, for the case where the page wraps its
+ * picture in something: `object-fit` does nothing on a `<div>`, so a rule aimed at the slot's
+ * immediate child was silently a no-op whenever that child was a ratio box.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media > * {
+  inline-size: 100%;
+}
+
+/*
+ * Starts on a phone, centred once the band is wide enough to hold a line.
+ *
+ * The reference design does exactly this, and the reason is legibility rather than taste: 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. The claim is centred where it is short relative to
+ * the band and ranged where it is not.
+ */
+@container (min-width: 48rem) {
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__content {
+    align-items: center;
+    text-align: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__description {
+    margin-inline: auto;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__actions {
+    align-items: center;
+    flex-direction: row;
+    justify-content: center;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__actions > * {
+    inline-size: auto;
+  }
+}
+
+/*
+ * The product, under the claim and narrower than it.
+ *
+ * In flow here, where the landing tier places its subject against the band's edge — so the rules
+ * that tier needs are wrong for this one. `block-size: 100%` on the child was carried over from it
+ * and is the reason the visual sat where it did: the slot has no height of its own, so the
+ * percentage resolved to auto and whatever was inside sized itself.
+ *
+ * Capped at sixty per cent of the column rather than filling it. A screenshot run to the measure's
+ * full width is taller than the band that holds it, and the claim above it goes off the top. The
+ * same percentage reasoning as the landing tier's half-measure text column, and a share rather
+ * than a token for the same reason: it is this arrangement's proportion, not a value the system
+ * names.
+ */
+/*
+ * The column fills the band, said outright rather than inherited.
+ *
+ * Everything about where this band's contents sit depends on it: the product is stood on the foot
+ * by the room left above it, and room only exists if the column is taller than what is in it. It
+ * should stretch on its own — it is the only item of a flex row that sets no cross size — and it
+ * was not, which is what left the claim at the top, the picture under it, and the rest of the band
+ * empty beneath both. `align-self` asks for it directly, so nothing between here and the band has
+ * to agree for the arrangement to hold.
+ */
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__content {
+  align-self: stretch;
+}
+
+/*
+ * The product stands on the band's foot rather than floating above it, at every width.
+ *
+ * It is the last thing in the column, so what separates it from the band's edge is the section
+ * step `inner` carries. Dropped, the picture meets the foot and is cropped by it — which is what
+ * makes a product read as standing in the band rather than as a picture placed on it, and is the
+ * arrangement LandingHero's subject takes for the same reason.
+ *
+ * At every width, which is the correction. This sat inside the wide layout's query for a while and
+ * the phone kept its step: the picture was aligned to the foot of a column that stopped short of
+ * the band, so every arrangement above it was right and there was a hand's width of ground under
+ * it regardless. A band that clips its subject is not a decision about how wide the window is.
+ *
+ * Only where there is a product. `:has()` asks the band whether one was passed, because without it
+ * the claim and its actions would be the thing resting on the edge, and a band of words with no
+ * air under them is a band that looks cut off rather than composed.
+ *
+ * The step above is untouched: this is the distance from the picture down, not the rhythm of the
+ * column.
+ */
+:where([data-dds-context="marketing"])
+  .dds-producthero:has(.dds-producthero__media)
+  .dds-producthero__inner {
+  padding-block-end: 0;
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media {
+  inline-size: 100%;
+}
+
+/*
+ * Below the fold the whole column sits at the foot, rather than the picture alone.
+ *
+ * There is no bar to clear on a phone and nothing above the claim worth the space, so a band that
+ * put its words at the top and its picture at the bottom was a screen with a hole in the middle.
+ * Everything together at the base reads as one thing standing on the ground the page continues
+ * from.
+ *
+ * The auto margin has to go with it. Left on, it would take every pixel of the free space for
+ * itself and put the picture back at the foot on its own — which is the arrangement this rule
+ * exists to replace, not one to stack on top of.
+ */
+@container (max-width: 47.9375rem) {
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__content {
+    justify-content: flex-end;
+  }
+
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media {
+    margin-block-start: 0;
+  }
+}
+
+
+
+
+@container (min-width: 48rem) {
+  /*
+   * Capped on both axes, and sized by width rather than height.
+ *
+ * `max-block-size` is what stops the band outgrowing the screen it is supposed to be one of. A
+ * sixty-per-cent-wide widescreen picture is four hundred tall on a wide band, and with the claim
+ * and the section step above it the band came to a thousand — taller than a viewport, so its own
+ * rounded bottom corners scrolled past the fold and the exit animation looked like it was only
+ * scaling. It is a `max-`, so it caps without demanding, which is the difference from the
+ * `block-size` that pushed the picture over its own button.
+   *
+   * The reference design writes this as `height: 50vh; aspect-ratio: 1/1`, and reading it across
+   * literally was wrong here: a definite block-size on a flex item in a column asks for that height
+   * whatever is above it, so the product demanded half the band while the claim and the actions had
+   * already spent it. The column overran and the visual rode up over its own button.
+   *
+   * A width cap cannot do that. The visual takes the height its ratio gives it from the room that
+   * is actually left, which is the same picture at every size the band is ever shown at — and the
+   * reference's 50vh square lands within a few per cent of it at the widths that matter.
+   */
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media {
+    /*
+     * Pushed to the foot of the band by the room left over.
+     *
+     * `margin-block-start: auto` is what stands the product on the edge: the column fills the band,
+     * the claim sits at the top of it under the bar's clearance, and every pixel between them goes
+     * above the picture. Aligning the whole column to the end instead would have bunched the claim
+     * onto the product with a screen of nothing over it.
+     */
+    margin-block-start: auto;
+    /*
+     * One cap, on the axis the shape is measured from.
+     *
+     * Capping the height and the width separately is what flattened the portrait: the box took
+     * sixty per cent of the column, `aspect.portrait` asked for a height a quarter greater again,
+     * and `max-block-size` clamped that back — leaving the width where it was. A ratio clamped on
+     * one axis is not a ratio; it is a landscape box that used to be a portrait.
+     *
+     * So the height's limit is expressed as a width instead, which a square makes exact: the widest
+     * the picture may be is the tallest it may be, because `aspect.square` is one to one. A ratio
+     * that was not would have to restate itself here as a fraction, and that restatement is the one
+     * place the two could drift.
+     *
+     * Half the band, which is the reference design's own `height: 50vh` — reachable now that the
+     * slot is a square, where before it was two numbers that had to be reconciled. It was forty per
+     * cent while the picture could ride up over its own button; standing on the foot it cannot, and
+     * the band clips, so the ceiling can be what the design asked for.
+     *
+     * The width guard is the second half of the `min()`, for a window tall enough that half its
+     * height is wider than the measure — there the picture would outrun the claim above it.
+     */
+    max-inline-size: min(80%, 50cqh);
+  }
+
+  /*
+   * The claim starts below where a navigation bar would be.
+   *
+   * The band is the first thing on the page and a bar sits over it, so the section's own step is
+   * measured from under the bar rather than from the top of the window — `size.bar-height` is what
+   * a collapsed one takes, and the step is the band's usual one on top of it. Without this the
+   * eyebrow began at the section step and the bar ate it.
+   */
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__inner {
+    padding-block-start: calc(var(--size-bar-height) + var(--space-section-default));
+  }
+
+
+
+  /*
+   * The visual takes its height from that cap and its width from its own ratio, so a wide band
+   * does not make it taller. Without the second half of this the cap clipped the picture instead
+   * of resizing it.
+   */
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media > * {
+    block-size: 100%;
+    inline-size: auto;
+    margin-inline: auto;
+    max-inline-size: 100%;
+  }
+}
+
+:where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__media img {
+  block-size: 100%;
+  display: block;
+  inline-size: 100%;
+  object-fit: cover;
+}
+
+/*
+ * 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 — the role's own description names high-impact visual sections
+ * and banners. Only the two lower corners: the band starts at the top of the document with nothing
+ * above it to round away from.
+ */
+@keyframes dds-producthero-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-producthero {
+    animation: dds-producthero-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.
+ */
+@media (prefers-reduced-motion: reduce) {
+  :where([data-dds-context="marketing"]) .dds-producthero {
+    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.
+ */
+@container (max-height: 40rem) {
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__inner {
+    padding-block: var(--space-section-compact);
+  }
+}
+
+@media (max-height: 40rem) {
+  :where([data-dds-context="marketing"]) .dds-producthero .dds-producthero__inner {
+    padding-block: var(--space-section-compact);
+  }
+}