@deriv-com/dds-marketing 1.0.2 → 1.1.0

package/.llm/components/stats.md

@@ -0,0 +1,219 @@
+<!-- GENERATED from stats.contract.json. Do not edit. -->
+
+# Stats
+
+A trust and credibility section of key numbers: a heading, a line under it where the heading needs one, and the figures — each a number and the few words that say what it counts. From the fold they are a row read all at once; on a phone they turn one at a time in a wheel, the one in place large with its neighbours smaller above and below, a dot for each down the start edge — the reference site's mobile stats. The wheel holds while the reader hovers on it or focuses it, and stops for good once they press it; a reader who asked for less motion gets the figures two to a row instead. Each figure counts up from nought, once, as the section arrives on screen, and lands on the value exactly as the page wrote it — on a phone that is the figure in place when the section arrives; the ones that turn in later are already final.
+
+The reference design's StatsSimple. The figure is written in the page's first HTML and is what assistive technology reads, so the count is decoration over a fact that is already there: a reader with no script, a search engine and a reader who asked for less movement all get the final number and nothing else.
+
+## Use when
+
+- Three to five headline numbers that prove scale or credibility — traders, markets, years, the smallest deposit — where the set is the point — read along a row from the fold, turned through one at a time on a phone
+- A break between two heavier sections, when the numbers alone tell the story
+
+## Do not use
+
+- Each item needs a sentence of its own, or a picture → `FeatureCards`
+- The number is part of a claim the page is making in words → `FeatureSplit`
+- Numbers that change while the page is open — a price, a live count. The figures are written once and counted once. The phone's wheel turns between them, but no figure changes once written — a value that does is a ticker this does not draw
+- A number nobody can stand behind. The figures are claims in the company's name; keep each one in step with its source
+- More than six figures. Past two rows the set stops being taken in at a glance
+
+## Anatomy
+
+Stats renders 13 elements. A token binding names the part it applies to.
+
+- `root` — `<section>`, class `dds-stats`. The section. It paints the ground and the ink to go with it — see `ground` — and asks its own width, so the row folds on the section's measure rather than the window's. A region named by its heading.
+- `inner` — `<div>`, class `dds-stats__inner`. The measure and the gutter, the same column every band holds its content in, and the step from the heading to the figures: space.heading.content.
+- `header` — `<div>`, class `dds-stats__header`. The heading and the line under it, FeatureCards' header and its arrangement: ranged to the start on a phone and centred from the fold. It sets no gap: each part's own margin is the step, so a heading with no line under it closes up.
+- `title` — `<h2>`, class `dds-stats__title`. What the numbers prove. `h2` because a section sits under the page's own heading.
+- `description` — `<p>`, class `dds-stats__description`. The line under the heading, at the description measure. Rendered only when `description` is set.
+- `list` — `<ul>`, class `dds-stats__list`. The figures, as a list a screen reader counts. On a phone, a wheel: one figure in place, the one before it smaller above and the next smaller below, turning on to the next every motion.duration.hold and motion.duration.turn — the reference site's mobile stats. It turns only while on screen, for two figures or more, and never for a reader who asked for less motion, who gets the figures two to a row instead; every figure stays in the list wherever it stands. From the fold the whole set on one row when there are two or three, two rows of two for four until full width takes all four, and three to a row for five or six — read from the children, FeatureCards' way, so a set is never a row and an orphan. The space between figures, across and down, is the page grid's gutter, space.grid.gutter.
+- `dots` — `<span>`, class `dds-stats__dots`. The wheel's dots, a column on its start edge, one to a figure with the one in place drawn long — PaginationDots stood on end. In the markup always and shown only while the wheel turns, on a phone — the stylesheet's call, as the wheel's own layout is — and hidden from assistive technology: they show where the wheel has got to, and the list beside them is read in full whatever is in place.
+- `dot` — `<span>`, class `dds-stats__dot`. One figure's dot: size.dot.diameter round in the words' ink at opacity.dot-rest, and size.dot.diameter by size.dot.current at opacity.dot-current in the brand's coral, color.bg.brand, for the figure in place — the pagination dots' pair, so the wheel reads as every other rotating block does.
+- `item` — `<li>`, class `dds-stats__item`. One figure: the number over the words that say what it counts, held together at space.gap.sm. Ranged to the start on a phone and centred from the fold, under a centred heading. It is what arrives, a step behind the one before it, in reading order.
+- `value` — `<span>`, class `dds-stats__value`. The number, at font.figure: a heading's size and a lighter weight, so it reads as a fact rather than a claim. Its two layers share one cell — the figure as written and, while it counts, the running number laid over it — so the cell is always as wide as the final figure and nothing beside it moves as the digits change. Tabular numerals, so every digit takes the same width while it counts.
+- `amount` — `<span>`, class `dds-stats__amount`. The figure exactly as the page wrote it — in the first HTML, before any script, and what assistive technology reads at every moment. While the running number is drawn over it, it is transparent rather than gone: still read, still holding the cell's width.
+- `count` — `<span>`, class `dds-stats__count`. The running number while the figure counts up, with whatever is written either side of it kept as it is — '$' and 'M+' stay while the digits climb. Hidden from assistive technology, which hears the final figure once rather than every number on the way, and empty at rest.
+- `label` — `<span>`, class `dds-stats__label`. What the figure counts, at the body step in the band's quieter ink: color.fg.muted on the page and the grey band, color.fg.muted-inverse on the dark one.
+
+Apply these classes from the generated `statsParts` constant rather than writing the strings by hand.
+
+## Composition
+
+- Takes no children. Everything it renders comes from props
+- Never contains: `Stats`, `LandingHero`, `ProductHero`, `PageHeader`, `Footer`, `Navbar` — in children or in any prop that takes a node
+
+## Props
+
+### ground — `page` | `subtle` | `strong` (default `page`)
+
+- `page` — The default, and the page's own white. A row of figures between two sections that need nothing to separate them
+- `subtle` — The grey band, for a row of figures that should read as a section of its own without changing the page's voice. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section
+- `strong` — `color.bg.brand-strong`, the dark band, for a set of figures a reader should arrive at — a home page's "Trade with confidence". The heading and the figures turn white and the labels take color.fg.muted-inverse
+
+Use when: Which of the page's three grounds this section paints, FeatureCards' axis and its reason: a band that wants to be seen as a band takes one of the other two, and the page decides the rhythm. The ink follows the ground — the heading and the figures in the band's own ink, the labels in its quieter one.
+Never for: Marking importance. Every section on a page painted a ground is a page with no emphasis left. And never the brand's own coral, which is not offered: that ground belongs to the band that asks a reader to do something.
+
+### title — `string` **Required.**
+
+Use when: Always. What the numbers prove, in the fewest words — "Trade with confidence", "Deriv in numbers".
+Never for: A figure. The figures are the content; the heading says what they add up to.
+
+### description — `string`
+
+Use when: A line under the heading, when the heading alone does not say whose numbers these are or since when — "For over 25 years, a trusted partner of traders worldwide."
+Never for: A paragraph, or the figures again in words.
+
+### stats — `data` `StatsFigure[]` **Required.**
+
+Use when: Always. The figures, in the order they are read along the row — three to five, each a short `value` exactly as it is to be read and a `label` of a few words. A value holding one number counts up to it; '24/7', or a value with no number, simply shows. An empty list draws nothing.
+Never for: A long value. "2.5M+" holds a row; "over two and a half million" breaks it on a phone. And a label longer than one line on a phone: the wheel steps by one figure's height, measured with a one-line label, so a label that wraps runs into the figure beside it.
+
+## Accessibility
+
+Guaranteed by the component. Write none of it by hand: the ids these attributes point at are generated per instance, so an attribute set from outside either says the same thing twice or points at nothing.
+
+- Announced as: `region`
+- `Tab` — Moves past the section, from the fold. On a phone, while the wheel turns, Tab lands on the wheel — focus holds it still — and moves on from there; nothing in it is operable.
+- accessible name from title, so the section is a named region a reader can jump to and skip
+- Each figure is read as written, once — the final value is in the markup from the first render and the running number is hidden from assistive technology, so a screen reader never announces the numbers on the way.
+- A reader who asked for less movement sees the final figures from the start, with no count.
+- On a phone the wheel moves on its own, so it can be held and stopped (WCAG 2.2.2): it holds while a pointer rests on it or it has focus — it is a tab stop named by the heading while it turns — and stops for good once it is pressed. It turns only while on screen, and never for a reader who asked for less motion. Every figure stays in the list a screen reader counts, wherever it stands on the wheel; the dots are hidden from assistive technology.
+
+## Rules
+
+- **On a phone a section's actions stack and each fills the width, including when there is only one** — On a phone a page's actions stack, and each one fills the width. Not most of it, and not the width its label happens to need — the whole column.
+
+Two side by side is what this replaces. On the narrowest screen each gets half a column minus the gap, which is rarely enough for a real label: the words wrap inside the pills, the two buttons come out different heights, and the pair reads as a broken row rather than as a choice. Stacked, each has the whole width and neither has to shorten its words to fit.
+
+A single action fills too, and that is the part worth saying, because it is the one that looks unnecessary. A lone button has the room to sit at its natural width and still should not: a full-width control is the phone's convention for the thing the screen is asking you to do, and a pill hugging its label reads as one option among others that are not there. It also makes the target predictable — the whole width, wherever the thumb lands — which a centred pill does not.
+
+Filling is the row's job rather than the button's. A button has no width of its own and is not given one; the row it sits in becomes a column and stretches its children, so nothing about the control changes and the same button is full width here and its own size on a desktop.
+
+This is the phone's breakpoint, size.breakpoint.md, and not the wider one that decides whether a heading is centred. Those are different questions and they break at different widths: a heading stops being centred when the measure is the screen, while a button stops being full width much sooner than that — stretched across a tablet it is a long way from its own label, and a label centred in a metre of pill is harder to hit than one in a pill the size of the words.
+
+What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
+  Guidance only — cannot be checked automatically.
+- **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
+  Guidance only — cannot be checked automatically.
+- **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
+
+color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.
+
+color.bg.strong is not a section ground. It is the inverted fill for an action that has to outrank what surrounds it, and the components that paint it — Button and ButtonIcon in their inverse form — already set both halves in one rule, which is the pattern a hand-painted section has to copy.
+  Guidance only — cannot be checked automatically.
+- **Every gap inside a section names the relationship it expresses, and the same relationship keeps its measure when it turns on its side** — A section's spacing is named by the relationship it expresses, not chosen by size. Every gap in a section has a role token, and reaching for a step off the generic scale because it happens to be the right number is how two sections written by two people stop lining up: the numbers agree today and drift the first time one of them is tuned.
+
+The heading group is three steps, not one gap. An eyebrow sits nearer its title than the title sits to its description, and the actions sit further from the description than either — space.heading.eyebrow-title, space.heading.title-description, space.heading.description-actions, in that order. A single `gap` on the group cannot say this; it sets all three the same and the block reads as evenly spaced lines rather than as a mark, a name and a paragraph. The eyebrow has to identify itself for this to work, because a group that opens with a title must not give its description the eyebrow's tighter step.
+
+The step between a title and its description follows the size of the title, which is why there are two of it. What a reader sees is not the gap but the gap plus the leading above it, and leading scales with the type: under a display title the leading is most of the space, under a card's title it is half as deep. One value for both makes a card look loose at the size that made a section look right. So space.heading.title-description is the display step and space.heading.title-description-compact is the step at a card's size, and the choice is made by how big the title is rather than by what kind of block it sits in.
+
+Every one of those steps is smaller than the gap below the group, and that ordering is what holds the group together as one thing. space.heading.content is the step between a heading group and the content it introduces, and it is the widest measure inside a section: the one gap the eye reads as a change of subject rather than as a continuation.
+
+That step is the same whether the content is under the heading or beside it. A split is the same relationship turned on its side — a heading group and the content it introduces — so the space between the two halves is space.heading.content, not a gutter. When the split collapses to one column on a phone the gap becomes vertical again, which is where it started, and nothing has to change for that to be right.
+
+space.grid.gutter is between two things of the same kind. Two cards in a row are the same kind; the two halves of a split are not, which is why the gutter is the wrong measure there even when the number would have looked acceptable. The gutter runs on both axes, so a grid reads as an even field rather than as rows with a seam down them.
+
+space.inset.card is the card's, not the page's. A row of cards padded differently is a row of different cards, and the fill is the only edge they have. A page composing a row does not get to choose it.
+
+Column count is not a breakpoint decision. A row holds as many columns as fit before a column would be narrower than size.grid.column-min, and drops one when they would not. Written as a fixed count that collapses at a breakpoint, a four-up row keeps four columns at every width above the phone and sets its copy two or three words to a line through the whole of the tablet range — and on a narrow desktop, which no breakpoint sits on at all. The threshold is a property of the row rather than of a card: a card fills whatever cell it is given.
+
+What this does not cover is the space above and below a section, which is space.section.default and space.section.compact, and the page's own side margin, which is space.inset.page. Those are the section's outside; everything here is its inside.
+  Guidance only — cannot be checked automatically.
+- **A section's title is centred over stacked content, starts beside content in columns, and starts on a phone** — Two arrangements, and the title's alignment is decided by which one it is introducing rather than chosen per section.
+
+Content stacked under the title — a row of cards, an accordion, a set of steps — takes a centred title. The heading group and the block below it share one axis, so a centred title is symmetric with the thing it names, and the eye drops from the middle of the words to the middle of the set. A title starting at the left over a centred or full-width block reads as belonging to the first column rather than to all of them.
+
+Content beside the title — a split, a picture in the other half, anything laid out in columns — takes a title that starts where its content starts. The two share a left edge, and that edge is what says they are one thing read across rather than two stacked. Centring the title there breaks the only alignment the reader has to hold the halves together, and it drifts further from its content the wider the page gets.
+
+The heading group is what carries this, not the heading alone. An eyebrow, a title and a description are read as one block and align together; aligning the title without them leaves a centred heading over start-aligned copy, which reads as a mistake rather than as a choice.
+
+Centred means all of it, not just the words. A badge, a row of actions, a picture — these are flex children, and a flex child is placed by align-items rather than by text-align, so a block that only sets the text leaves everything that is not text at the start. A hero is the case that shows it: its title and copy centred while its badge and its buttons did not.
+
+A capped block centres itself as well as its words. A heading group takes size.heading-group.max, and a cap that is not centred leaves the measure at the start of the column with the words centred inside it — composed, and a long way left of the middle it appears to be in.
+
+Both arrangements go to the start on a phone. A centred block reverts below the breakpoint, and the reason is the measure: on a phone the measure is the screen, so a centred title wraps to three or four ragged lines and the eye loses the left edge it was tracking — the same symmetry that reads as composure on a desktop is what makes it hard to scan on a phone. Centring there has to be asked for twice, and a section title is not one of the things that asks: it is centred because there is room for it, and on a phone there is not. Going back to the start means all of it too, and a capped block is the one that hides a leftover: its words go to the start while its measure stays in the middle of the column, which reads as a title still centred over a badge and buttons that are not — the box in the middle and the line inside it at the edge.
+
+A hero is a section like any other: its badge, title, copy and actions are one stacked block, so it is centred on a desktop and starts on a phone with everything else.
+
+What this is not about is a page whose body is a form or a document. A title over a sign-up form or a guide is not introducing a set of content — it is the first line of the thing itself, and it keeps the alignment the body has, which for running text is the start. The distinction is whether the block below is content the title names or content the title is part of.
+  Guidance only — cannot be checked automatically.
+- **Anything a pointer has to hit is at least 24px in both directions** — A control sized by its contents is as big as its contents, and a glyph is chosen for how it reads rather than for how easily it is hit. An icon-only button with no padding is a 16px target — smaller than the pad of a finger, and smaller than the tremor of a hand using a mouse.
+
+WCAG 2.2 asks for 24 by 24 CSS pixels at AA. The exceptions are narrower than they look: inline targets inside a sentence are exempt, and so is a small target with 24px of clear space around it — but a clear button sits against the field it empties, and a field is itself a target, so the spacing exemption does not apply to the case that keeps arising.
+
+The target and the mark are separate decisions, and conflating them is what produces both faults. Growing the glyph to 24px makes it shout; leaving the button at 16px makes it hard to hit. So the glyph keeps the size that reads correctly beside its text, and the box around it declares a minimum of its own — which is what size.target.min is for.
+
+Declared rather than emergent. Padding plus contents does clear 24px in several components today, and it is the weaker statement: it is a size nobody wrote down, so it moves when the type scale or the glyph does, and nothing says it was meant to be a target at all.
+  Guidance only — cannot be checked automatically.
+- **A component is written along the reading axis, not along the page's left and right** — Every measure, inset and placement in this package names an axis rather than a side: inline-size and block-size, padding-inline and padding-block, inset-inline-start and inset-block-end, margin-inline: auto, text-align: start. Written that way a component follows whichever direction the page is read in, and a band whose claim ranges to the leading edge with its subject on the trailing one is the same composition in Arabic as in English, mirrored, with nothing restated. Written as left and right it is the same pixels in both, which is a layout nobody designed for the second language.
+
+The enum values follow the same rule and for the same reason. A prop that names where a picture sits takes start and end, never left and right — FeatureSplit, FeatureBullets and FeatureScroll all declare mediaPosition that way, and the flex directions they generate flip on their own because row already means the reading order. A value called left would have to be re-read as right by every author working in a mirrored page, which is a translation this system should be doing rather than asking for.
+
+The guidance a contract carries is part of the component, so it follows too. Describing a claim as ranging left is describing one of the two languages, and it was written that way here for a while: three of the opening bands said so in their own intent. A reader in a mirrored page meets that sentence and has to decide whether the component is wrong or the sentence is, and neither answer is one documentation should force.
+
+Two things genuinely have no logical form and are not covered by this. A CSS gradient takes a physical direction — there is no to inline-end — so a pattern that must mirror has to be stated twice under a direction query, and one that is periodic and centred, like PageHeader's rule grid, does not need to. A glyph that points the way onward is the other: an arrow is a picture of a direction, and mirroring it belongs to the icon set rather than to the component holding it.
+  Guidance only — cannot be checked automatically.
+
+## Anti-examples
+
+❌ Stats for: Each item needs a sentence of its own, or a picture
+   A figure is read at a glance; something that needs explaining is a card
+   → use `FeatureCards` instead.
+
+❌ Stats for: The number is part of a claim the page is making in words
+   A figure in a sentence is copy; this sets figures on their own, where the number is the whole of what is said
+   → use `FeatureSplit` instead.
+
+## Example
+
+```tsx
+import { Stats } from '@deriv-com/dds-marketing'
+
+<Stats title="Trade with confidence" description="For over 25 years, a trusted partner of traders worldwide." stats={[{"value":"3M+","label":"Traders worldwide"},{"value":"250+","label":"Markets to trade"},{"value":"24/7","label":"Support in your language"},{"value":"$5","label":"Minimum deposit"}]} />
+```
+
+## In use
+
+### Grounds
+
+The same figures on the page, the grey band and the dark band. The heading and the figures take the band's ink, the labels its quieter one.
+
+```tsx
+import { Stats } from '@deriv-com/dds-marketing'
+
+// On the page
+<Stats title="Deriv in numbers" stats={[{"value":"3M+","label":"Traders worldwide"},{"value":"250+","label":"Markets to trade"},{"value":"$5","label":"Minimum deposit"}]} />
+
+// On the grey band
+<Stats ground="subtle" title="Deriv in numbers" stats={[{"value":"3M+","label":"Traders worldwide"},{"value":"250+","label":"Markets to trade"},{"value":"$5","label":"Minimum deposit"}]} />
+
+// On the dark band
+<Stats ground="strong" title="Deriv in numbers" stats={[{"value":"3M+","label":"Traders worldwide"},{"value":"250+","label":"Markets to trade"},{"value":"$5","label":"Minimum deposit"}]} />
+```
+
+### How a set fills the row
+
+Four figures are one row at full width and two rows of two on a tablet; five are three and two. Narrow the window to see each set fold.
+
+```tsx
+import { Stats } from '@deriv-com/dds-marketing'
+
+// Four figures
+<Stats title="Trade with confidence" description="For over 25 years, a trusted partner of traders worldwide." stats={[{"value":"168M+","label":"Monthly deals"},{"value":"3M+","label":"Traders worldwide"},{"value":"$700B+","label":"Monthly trading volume"},{"value":"1999","label":"Established in"}]} />
+
+// Five figures
+<Stats title="Why traders choose Deriv" stats={[{"value":"3M+","label":"Traders worldwide"},{"value":"250+","label":"Markets to trade"},{"value":"24/7","label":"Support in your language"},{"value":"$5","label":"Minimum deposit"},{"value":"20+","label":"Offices worldwide"}]} />
+```
+
+### What counts
+
+A value with one number counts up to it, keeping what is either side. '24/7' and words show as written. Every figure is in the first HTML.
+
+```tsx
+import { Stats } from '@deriv-com/dds-marketing'
+
+// Prefixes, suffixes and decimals
+<Stats title="Deriv at a glance" stats={[{"value":"$1.2B","label":"Paid out to traders"},{"value":"99.9%","label":"Platform uptime"},{"value":"24/7","label":"Synthetic markets open"}]} />
+```

package/.llm/components/steps.md

@@ -0,0 +1,286 @@
+<!-- GENERATED from steps.contract.json. Do not edit. -->
+
+# Steps
+
+A two-column how-it-works section pairing a supporting picture with a numbered, ordered list of steps, each a title and a line describing it.
+
+It walks a reader through a sequence they are about to follow — opening an account, funding it, placing a first trade — and the numbers are the argument: they say the order matters and how far there is to go. The list is a real ordered list, so the count and the order reach a screen reader too, and the numbers drawn beside each step are the section's own rather than the page's.
+
+It sits on the page's own ground by default; `ground` paints the grey or the dark band where the section needs setting apart from the ones around it.
+
+## Use when
+
+- A page explains a get-started or onboarding flow — opening an account, funding it, starting to trade
+- A process has three to six steps that a reader follows in one order, each a short imperative and a sentence
+- A setup or a how-to page — a platform's install, a deposit or a withdrawal — needs its sequence shown beside one picture
+- The same how-it-works list, walked through on its own: with `autoplay` each step takes its turn, its rule filling as it holds, and the picture changes to that step's — a sequence shown in sequence rather than all at once
+
+## Do not use
+
+- The items have no order a reader follows — they are things a product includes → `FeatureBullets`
+- Three or four things side by side, each with its own picture → `FeatureCards`
+- Each stage needs a screen and a picture of its own → `FeatureScroll`
+- A list without an order. Numbers against items that could be read in any sequence claim a sequence the page does not have, and a reader follows them anyway
+- A sequence longer than six steps. Past that the list runs well past the picture beside it, and a process that long wants a page of its own rather than a section
+- An article or a guide's body. This is a section in the middle of a marketing page, and carries no navigation of its own
+
+## Anatomy
+
+Steps renders 15 elements. A token binding names the part it applies to.
+
+- `root` — `<section>`, class `dds-steps`. The section. It paints the ground that separates it from the page above and below, and asks its own width so the split folds on the section's measure rather than the window's.
+  
+  It paints one of the page's three grounds and the ink that goes with it, in one decision — see `ground`. The ink is set here and inherited by everything inside.
+- `inner` — `<div>`, class `dds-steps__inner`. The measure and the gutter, holding the section's content in the same column as every other section on the page.
+- `split` — `<div>`, class `dds-steps__split`. The two halves. A row at full width with the picture on whichever side `mediaPosition` names, and one column below the fold with the picture first — the order the reference design takes and the one a sequence reads in.
+- `media` — `<div>`, class `dds-steps__media`. The picture, and one of the section's two halves rather than an addition to it. Held to a square and cropped to fill it, so the section is the same shape whatever the page passes. With pictures on the steps it holds all of them in one cell, and the current step's is the one shown: the first while the list is still, each in turn under `autoplay`, crossing over in motion.duration.shift.
+- `image` — `<img>`, class `dds-steps__image`. One step's picture, from its `image`, stacked in the media cell with the others and shown while its step is current. Decoration, as the media cell is: what the step says is its title and its line.
+- `content` — `<div>`, class `dds-steps__content`. The title and the steps under it.
+  
+  It sets no gap of its own. The step from the title to the list is the title's own `margin-block-end`, which is how FeatureSplit and FeatureBullets carry theirs.
+- `title` — `<h2>`, class `dds-steps__title`. Where the steps lead. `h2` because a section in the middle of a page sits under the page's own heading.
+- `list` — `<ol>`, class `dds-steps__list`. The steps, as an ordered list — a screen reader announces how many there are and where each sits, which is the sequence the section exists to say. The browser's own numbers are switched off because the section draws its own, larger, beside each step.
+  
+  Nothing separates the rows: each carries its own rule on its start edge and its own padding inside it. `space.gap.none` is that said rather than left out.
+- `step` — `<li>`, class `dds-steps__step`. One step: its number, then its title and line. Ruled above rather than below, as FeatureBullets' rows are, so the lines fall between the steps and none is left under the last.
+  
+  The number is centred on the title's first line. It is set larger than the title, so a shared baseline left it standing a third taller above the title's capitals and a shared top left it hanging below; given a line exactly as tall as the title's, its figure sits centred on the line it numbers, reaching as far above the title's capitals as below its baseline.
+  
+  The steps arrive one after another as the section comes up, in the order they are taken, so a sequence appears in sequence.
+- `number` — `<span>`, class `dds-steps__number`. The step's place in the sequence, drawn large in the brand's colour. Decoration, and hidden from assistive technology: the ordered list already says where each step sits, and announcing the number as well says it twice.
+  
+  Tabular figures, so a 1 is as wide as a 4 and every title starts on the same line down the list. The reference design reserved a fixed column for the same reason; at six steps at most there is only ever one digit, and figures of one width are the column.
+  
+  Its colour follows the ground, as FeatureBullets' mark does: `color.fg.brand-accent` only on the bare page, `color.fg.brand` on the grey band, and the band's own ink on the dark one.
+- `body` — `<div>`, class `dds-steps__body`. The step's title and the line under it, held together at a card's title-to-description step.
+- `step-title` — `<h3>`, class `dds-steps__step-title`. What the reader does at this step. `h3` under the section's `h2`, so a reader moving by heading walks the steps one at a time.
+- `trigger` — `<button>`, class `dds-steps__trigger`. Under `autoplay`, the step's title as a button: pressing it makes the step current and stops the turn for good. Inside the heading, so a reader moving by heading still walks the steps; `aria-current="step"` on the current one says which step is shown. Rendered only when `autoplay` is set.
+- `step-description` — `<p>`, class `dds-steps__step-description`. What the step involves, in a sentence.
+- `progress` — `<span>`, class `dds-steps__progress`. Under `autoplay`, the current step's rule filling from the start edge over motion.duration.dwell — how long until the next step — in the brand's coral. Held where the turn holds, full and still once it stops or for a reader who asked for less motion. Hidden from assistive technology: the current step is said by `aria-current`.
+
+Apply these classes from the generated `stepsParts` constant rather than writing the strings by hand.
+
+## Composition
+
+- Takes no children. Everything it renders comes from props
+- Never contains: `Steps`, `FeatureSplit`, `FeatureBullets`, `LandingHero`, `ProductHero`, `PageHeader`, `Footer`, `Navbar`, `Table`, `Accordion` — in children or in any prop that takes a node
+
+## Props
+
+### ground — `page` | `subtle` | `strong` (default `page`)
+
+- `page` — The default, and the page's own white. A section that has nothing to separate itself from what is above it — most of them
+- `subtle` — A quiet step off the page, for a band that wants to read as its own section without changing the page's voice. The reference design paints this section grey, and a page following it closely takes this. Painted as the band's tint laid over the page's own ground, so it is the same grey whatever is behind the section.
+- `strong` — `color.bg.brand-strong`, the dark band. It stops the page rather than dividing it, so it is for a section a reader should arrive at — and one per page is usually one more than enough
+
+Use when: Which of the page's three grounds this section paints. A marketing page is white, and a band that wants to be seen as a band takes one of the other two — so this is how a page builds its rhythm: white, white, grey, white, dark. The section above knows nothing about the one below it, so the page is the only thing that can decide.
+
+The ink follows the ground and is not a second decision: a dark band carries white type because this sets both halves in one value, and the numbers change with it.
+Never for: Marking importance. Every section on a page painted dark is a page with no emphasis left. And never the brand's own coral, `color.bg.brand`, which is not offered here: that ground belongs to the band that asks a reader to do something, and a how-it-works section wearing it is a page with two calls to action, one of which does nothing.
+
+### mediaPosition — `start` | `end` (default `start`)
+
+- `start` — The default, and the reference design's: the picture first, then the steps it introduces
+- `end` — The steps first, for a section sitting under a split whose picture is already at the start
+
+Use when: Which side the picture takes at full width. Alternating it against the split sections around it is what stops two in a row reading as one long column, and it is the page's decision rather than this section's.
+
+Below the fold there is one column and the picture leads it, whichever side it takes on a desktop — the reference design's order, and the right one for a sequence: the picture sets the scene the steps then walk through, and one left under the last step is a picture nobody scrolls back up to connect.
+Never for: Moving the picture on a phone. There is one column there and the picture leads it
+
+### autoplay — `boolean` (default `false`)
+
+Use when: Whether the steps take their turn on their own: one step is current, its rule fills over motion.duration.dwell, then the next takes over, and back to the first after the last. The current step's number is drawn at full strength and the rest recede; with an `image` on each step the picture changes to the current one's. Each step's title becomes a button that makes it current. Off by default, so a list nobody configured stays still. On, it holds while the pointer is over the section or focus is inside it, waits until the section is on screen, never moves for a reader who asked for less motion, and stops for good once the reader presses a step — the WAI carousel rule CtaBannerSlider follows: a reader who has chosen a step is reading it. That gives a reader a way to stop it, which WCAG 2.2.2 asks for, but not a visible one, so a page that needs 2.2.2 met plainly should leave it off.
+Never for: Steps whose descriptions take longer to read than motion.duration.dwell — leave it off rather than cut the copy to the timer. And a list with no picture per step, where the only thing that moves is a rule: the turn is worth it when the picture changes with it.
+
+### title — `string` **Required.**
+
+Use when: Always. What the steps get a reader to, in the fewest words that say it — 'Get started in 3 steps'
+Never for: A sentence. The steps underneath are the argument; this only has to name where they lead
+
+### steps — `data` `StepsItem[]` **Required.**
+
+Use when: Always. The steps, in the order a reader takes them — three or four is right, six the most. Each is a short imperative and a sentence under about two hundred characters. The number in front of each is drawn from its place in the list, so reordering the list renumbers it. Give each step an `image` — a screenshot of that step — and the picture beside the list is the current step's: the first while the list is still, and each in turn under `autoplay`.
+Never for: Items that could be taken in any order, or a step that is two steps. Each number is a claim that this comes after the one above it and is one thing to do
+
+### media — `node`
+
+Accepts: *
+Use when: The one picture beside the steps, where they have no pictures of their own — a screenshot, a photograph. The section is a split and the picture is one half of it: give this or an `image` on each step, because without either the list runs to a measure it was never sized for. Steps that carry their own pictures win over this.
+Never for: Anything a reader has to read or press. It is held to a square and cropped to fill it, so words in it are cropped too
+
+## Accessibility
+
+Guaranteed by the component. Write none of it by hand: the ids these attributes point at are generated per instance, so an attribute set from outside either says the same thing twice or points at nothing.
+
+- Announced as: `region`
+- `Tab` — Moves past the section when it is still: nothing in it is operable then. Under `autoplay` it moves through the steps' titles, each a button, in order.
+- `Enter` — Under `autoplay`, on a step's title: makes that step current and stops the turn for good.
+- `Space` — The same as Enter.
+- accessible name from title, so the section is a named region a screen reader can jump to and skip rather than an unlabelled section a reader has to walk
+- The steps are an ordered list, so a screen reader announces how many there are and each one's place in the sequence. A stack of divs with numbers drawn in them reads as prose and loses the order, which is what the section is for
+- The number drawn beside each step is decoration and is hidden from assistive technology. The ordered list already announces each step's place, and reading the drawn number as well says it twice
+- Each step's title is a heading one level under the section's, so a reader moving by heading walks the steps one at a time
+- The picture is decoration and is hidden from assistive technology — the one picture and every step's alike. What the section says is the title and the steps; a picture carrying something they do not is a section that reads as half empty to anyone who cannot see it
+- Under autoplay, a hold while the pointer is over the section or focus is inside it, no turn until the section is on screen, no movement for a reader who asked for less motion, and a stop for good once a step is pressed — the way to stop a list that would otherwise turn for as long as it is shown, which WCAG 2.2.2 asks for. The current step's title carries aria-current="step", so the step a reader is shown is the step a screen reader names
+
+## Rules
+
+- **On a phone a section's actions stack and each fills the width, including when there is only one** — On a phone a page's actions stack, and each one fills the width. Not most of it, and not the width its label happens to need — the whole column.
+
+Two side by side is what this replaces. On the narrowest screen each gets half a column minus the gap, which is rarely enough for a real label: the words wrap inside the pills, the two buttons come out different heights, and the pair reads as a broken row rather than as a choice. Stacked, each has the whole width and neither has to shorten its words to fit.
+
+A single action fills too, and that is the part worth saying, because it is the one that looks unnecessary. A lone button has the room to sit at its natural width and still should not: a full-width control is the phone's convention for the thing the screen is asking you to do, and a pill hugging its label reads as one option among others that are not there. It also makes the target predictable — the whole width, wherever the thumb lands — which a centred pill does not.
+
+Filling is the row's job rather than the button's. A button has no width of its own and is not given one; the row it sits in becomes a column and stretches its children, so nothing about the control changes and the same button is full width here and its own size on a desktop.
+
+This is the phone's breakpoint, size.breakpoint.md, and not the wider one that decides whether a heading is centred. Those are different questions and they break at different widths: a heading stops being centred when the measure is the screen, while a button stops being full width much sooner than that — stretched across a tablet it is a long way from its own label, and a label centred in a metre of pill is harder to hit than one in a pill the size of the words.
+
+What this is not about is every row of controls. A set of filter chips, a pagination strip, a toolbar, a link sitting after a sentence — none of these is the page asking for something, and stacking them to full width would turn a strip the eye skims into a list it has to read. The test is whether the row is the call to action the section was written for.
+  Guidance only — cannot be checked automatically.
+- **Never nest one interactive element inside another** — Nested interactive elements produce ambiguous hit targets and an unreachable inner control for keyboard and screen-reader users. This is why the rule cannot live on any single component — it constrains Button, Link, CardButton and TextInput simultaneously.
+  Guidance only — cannot be checked automatically.
+- **A section that paints a ground sets the ink to go with it** — A page sits on color.bg.page, and a section that separates itself from it takes one of three grounds. color.bg.subtle is the light one and needs nothing further — the page's own ink still reads on it. The other two are dark and do not: color.bg.brand-strong takes color.fg.on-brand-strong, and color.bg.brand takes color.fg.on-solid. Both are white, and both are written as the role rather than the white they resolve to. Set one of those backgrounds without its ink and the text inherits whatever the page was already using, which is near-black on a dark band — legible to nobody, and invisible to every check here, because each pair passes contrast on its own and nothing can tell whether a section used both.
+
+color.bg.brand carries a second limit that is not about forgetting. Its ink measures 3.39:1, which clears the 3:1 a heading needs and misses the 4.5:1 running copy needs. A coral band may carry a headline and a call to action; a paragraph on one is text the reader has to work through at a ratio the waiver on that role does not cover — the waiver says so itself. A section with copy in it takes color.bg.brand-strong, which is near-black and carries white at full contrast.
+
+color.bg.strong is not a section ground. It is the inverted fill for an action that has to outrank what surrounds it, and the components that paint it — Button and ButtonIcon in their inverse form — already set both halves in one rule, which is the pattern a hand-painted section has to copy.
+  Guidance only — cannot be checked automatically.
+- **Every gap inside a section names the relationship it expresses, and the same relationship keeps its measure when it turns on its side** — A section's spacing is named by the relationship it expresses, not chosen by size. Every gap in a section has a role token, and reaching for a step off the generic scale because it happens to be the right number is how two sections written by two people stop lining up: the numbers agree today and drift the first time one of them is tuned.
+
+The heading group is three steps, not one gap. An eyebrow sits nearer its title than the title sits to its description, and the actions sit further from the description than either — space.heading.eyebrow-title, space.heading.title-description, space.heading.description-actions, in that order. A single `gap` on the group cannot say this; it sets all three the same and the block reads as evenly spaced lines rather than as a mark, a name and a paragraph. The eyebrow has to identify itself for this to work, because a group that opens with a title must not give its description the eyebrow's tighter step.
+
+The step between a title and its description follows the size of the title, which is why there are two of it. What a reader sees is not the gap but the gap plus the leading above it, and leading scales with the type: under a display title the leading is most of the space, under a card's title it is half as deep. One value for both makes a card look loose at the size that made a section look right. So space.heading.title-description is the display step and space.heading.title-description-compact is the step at a card's size, and the choice is made by how big the title is rather than by what kind of block it sits in.
+
+Every one of those steps is smaller than the gap below the group, and that ordering is what holds the group together as one thing. space.heading.content is the step between a heading group and the content it introduces, and it is the widest measure inside a section: the one gap the eye reads as a change of subject rather than as a continuation.
+
+That step is the same whether the content is under the heading or beside it. A split is the same relationship turned on its side — a heading group and the content it introduces — so the space between the two halves is space.heading.content, not a gutter. When the split collapses to one column on a phone the gap becomes vertical again, which is where it started, and nothing has to change for that to be right.
+
+space.grid.gutter is between two things of the same kind. Two cards in a row are the same kind; the two halves of a split are not, which is why the gutter is the wrong measure there even when the number would have looked acceptable. The gutter runs on both axes, so a grid reads as an even field rather than as rows with a seam down them.
+
+space.inset.card is the card's, not the page's. A row of cards padded differently is a row of different cards, and the fill is the only edge they have. A page composing a row does not get to choose it.
+
+Column count is not a breakpoint decision. A row holds as many columns as fit before a column would be narrower than size.grid.column-min, and drops one when they would not. Written as a fixed count that collapses at a breakpoint, a four-up row keeps four columns at every width above the phone and sets its copy two or three words to a line through the whole of the tablet range — and on a narrow desktop, which no breakpoint sits on at all. The threshold is a property of the row rather than of a card: a card fills whatever cell it is given.
+
+What this does not cover is the space above and below a section, which is space.section.default and space.section.compact, and the page's own side margin, which is space.inset.page. Those are the section's outside; everything here is its inside.
+  Guidance only — cannot be checked automatically.
+- **A section's title is centred over stacked content, starts beside content in columns, and starts on a phone** — Two arrangements, and the title's alignment is decided by which one it is introducing rather than chosen per section.
+
+Content stacked under the title — a row of cards, an accordion, a set of steps — takes a centred title. The heading group and the block below it share one axis, so a centred title is symmetric with the thing it names, and the eye drops from the middle of the words to the middle of the set. A title starting at the left over a centred or full-width block reads as belonging to the first column rather than to all of them.
+
+Content beside the title — a split, a picture in the other half, anything laid out in columns — takes a title that starts where its content starts. The two share a left edge, and that edge is what says they are one thing read across rather than two stacked. Centring the title there breaks the only alignment the reader has to hold the halves together, and it drifts further from its content the wider the page gets.
+
+The heading group is what carries this, not the heading alone. An eyebrow, a title and a description are read as one block and align together; aligning the title without them leaves a centred heading over start-aligned copy, which reads as a mistake rather than as a choice.
+
+Centred means all of it, not just the words. A badge, a row of actions, a picture — these are flex children, and a flex child is placed by align-items rather than by text-align, so a block that only sets the text leaves everything that is not text at the start. A hero is the case that shows it: its title and copy centred while its badge and its buttons did not.
+
+A capped block centres itself as well as its words. A heading group takes size.heading-group.max, and a cap that is not centred leaves the measure at the start of the column with the words centred inside it — composed, and a long way left of the middle it appears to be in.
+
+Both arrangements go to the start on a phone. A centred block reverts below the breakpoint, and the reason is the measure: on a phone the measure is the screen, so a centred title wraps to three or four ragged lines and the eye loses the left edge it was tracking — the same symmetry that reads as composure on a desktop is what makes it hard to scan on a phone. Centring there has to be asked for twice, and a section title is not one of the things that asks: it is centred because there is room for it, and on a phone there is not. Going back to the start means all of it too, and a capped block is the one that hides a leftover: its words go to the start while its measure stays in the middle of the column, which reads as a title still centred over a badge and buttons that are not — the box in the middle and the line inside it at the edge.
+
+A hero is a section like any other: its badge, title, copy and actions are one stacked block, so it is centred on a desktop and starts on a phone with everything else.
+
+What this is not about is a page whose body is a form or a document. A title over a sign-up form or a guide is not introducing a set of content — it is the first line of the thing itself, and it keeps the alignment the body has, which for running text is the start. The distinction is whether the block below is content the title names or content the title is part of.
+  Guidance only — cannot be checked automatically.
+- **Anything a pointer has to hit is at least 24px in both directions** — A control sized by its contents is as big as its contents, and a glyph is chosen for how it reads rather than for how easily it is hit. An icon-only button with no padding is a 16px target — smaller than the pad of a finger, and smaller than the tremor of a hand using a mouse.
+
+WCAG 2.2 asks for 24 by 24 CSS pixels at AA. The exceptions are narrower than they look: inline targets inside a sentence are exempt, and so is a small target with 24px of clear space around it — but a clear button sits against the field it empties, and a field is itself a target, so the spacing exemption does not apply to the case that keeps arising.
+
+The target and the mark are separate decisions, and conflating them is what produces both faults. Growing the glyph to 24px makes it shout; leaving the button at 16px makes it hard to hit. So the glyph keeps the size that reads correctly beside its text, and the box around it declares a minimum of its own — which is what size.target.min is for.
+
+Declared rather than emergent. Padding plus contents does clear 24px in several components today, and it is the weaker statement: it is a size nobody wrote down, so it moves when the type scale or the glyph does, and nothing says it was meant to be a target at all.
+  Guidance only — cannot be checked automatically.
+- **A component is written along the reading axis, not along the page's left and right** — Every measure, inset and placement in this package names an axis rather than a side: inline-size and block-size, padding-inline and padding-block, inset-inline-start and inset-block-end, margin-inline: auto, text-align: start. Written that way a component follows whichever direction the page is read in, and a band whose claim ranges to the leading edge with its subject on the trailing one is the same composition in Arabic as in English, mirrored, with nothing restated. Written as left and right it is the same pixels in both, which is a layout nobody designed for the second language.
+
+The enum values follow the same rule and for the same reason. A prop that names where a picture sits takes start and end, never left and right — FeatureSplit, FeatureBullets and FeatureScroll all declare mediaPosition that way, and the flex directions they generate flip on their own because row already means the reading order. A value called left would have to be re-read as right by every author working in a mirrored page, which is a translation this system should be doing rather than asking for.
+
+The guidance a contract carries is part of the component, so it follows too. Describing a claim as ranging left is describing one of the two languages, and it was written that way here for a while: three of the opening bands said so in their own intent. A reader in a mirrored page meets that sentence and has to decide whether the component is wrong or the sentence is, and neither answer is one documentation should force.
+
+Two things genuinely have no logical form and are not covered by this. A CSS gradient takes a physical direction — there is no to inline-end — so a pattern that must mirror has to be stated twice under a direction query, and one that is periodic and centred, like PageHeader's rule grid, does not need to. A glyph that points the way onward is the other: an arrow is a picture of a direction, and mirroring it belongs to the icon set rather than to the component holding it.
+  Guidance only — cannot be checked automatically.
+
+## Anti-examples
+
+❌ Steps for: The items have no order a reader follows — they are things a product includes
+   The same split with a checked list, which says every line is included rather than that one comes before the next
+   → use `FeatureBullets` instead.
+
+❌ Steps for: Three or four things side by side, each with its own picture
+   A grid of cards is compared across; a numbered list is followed down, and one picture is all this section has
+   → use `FeatureCards` instead.
+
+❌ Steps for: Each stage needs a screen and a picture of its own
+   A pinned picture per stop, for a set where each stage is worth showing rather than naming
+   → use `FeatureScroll` instead.
+
+## Example
+
+```tsx
+import { Steps, AspectRatio } from '@deriv-com/dds-marketing'
+
+<Steps title="Get started in 3 steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details. No deposit needed to look around."},{"title":"Fund it","description":"Deposit with the local payment method you already use, from cards and e-wallets to bank transfer."},{"title":"Start trading","description":"Pick a market, set your stake and place your first trade on Deriv MT5, web or mobile."}]} media={<AspectRatio ratio="square" />} />
+```
+
+## In use
+
+### The ground it sits on
+
+The three grounds a page can put a section on. A band painting one of the other two says it is its own section, and the ink and the numbers follow the ground.
+
+```tsx
+import { AspectRatio, Steps } from '@deriv-com/dds-marketing'
+
+// On the page itself
+<Steps title="Get started in 3 steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details. No deposit needed to look around."},{"title":"Fund it","description":"Deposit with the local payment method you already use, from cards and e-wallets to bank transfer."},{"title":"Start trading","description":"Pick a market, set your stake and place your first trade on Deriv MT5, web or mobile."}]} media={<AspectRatio ratio="square" />} ground="page" />
+
+// On the quiet ground
+<Steps title="Get started in 3 steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details. No deposit needed to look around."},{"title":"Fund it","description":"Deposit with the local payment method you already use, from cards and e-wallets to bank transfer."},{"title":"Start trading","description":"Pick a market, set your stake and place your first trade on Deriv MT5, web or mobile."}]} media={<AspectRatio ratio="square" />} ground="subtle" />
+
+// On the dark band
+<Steps title="Get started in 3 steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details. No deposit needed to look around."},{"title":"Fund it","description":"Deposit with the local payment method you already use, from cards and e-wallets to bank transfer."},{"title":"Start trading","description":"Pick a market, set your stake and place your first trade on Deriv MT5, web or mobile."}]} media={<AspectRatio ratio="square" />} ground="strong" />
+```
+
+### Which side the picture takes
+
+Alternate it against the splits around it so two in a row do not read as one column. Below the fold there is one column and the picture leads it either way.
+
+```tsx
+import { AspectRatio, Steps } from '@deriv-com/dds-marketing'
+
+// Picture first — the default
+<Steps title="Get started in 3 steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details. No deposit needed to look around."},{"title":"Fund it","description":"Deposit with the local payment method you already use, from cards and e-wallets to bank transfer."},{"title":"Start trading","description":"Pick a market, set your stake and place your first trade on Deriv MT5, web or mobile."}]} media={<AspectRatio ratio="square" />} mediaPosition="start" />
+
+// Steps first — under a split with its picture first
+<Steps title="Get started in 3 steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details. No deposit needed to look around."},{"title":"Fund it","description":"Deposit with the local payment method you already use, from cards and e-wallets to bank transfer."},{"title":"Start trading","description":"Pick a market, set your stake and place your first trade on Deriv MT5, web or mobile."}]} media={<AspectRatio ratio="square" />} mediaPosition="end" />
+```
+
+### How long the sequence runs
+
+Three or four steps is right and six the most. The numbers come from each step's place, so adding one renumbers the rest.
+
+```tsx
+import { AspectRatio, Steps } from '@deriv-com/dds-marketing'
+
+// Three steps
+<Steps title="Get started in 3 steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details. No deposit needed to look around."},{"title":"Fund it","description":"Deposit with the local payment method you already use, from cards and e-wallets to bank transfer."},{"title":"Start trading","description":"Pick a market, set your stake and place your first trade on Deriv MT5, web or mobile."}]} media={<AspectRatio ratio="square" />} />
+
+// Four steps
+<Steps title="Get started in 4 steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details. No deposit needed to look around."},{"title":"Fund it","description":"Deposit with the local payment method you already use, from cards and e-wallets to bank transfer."},{"title":"Practise on demo","description":"Try your strategy with virtual funds first, on the same platform and the same markets."},{"title":"Start trading","description":"Pick a market, set your stake and place your first trade on Deriv MT5, web or mobile."}]} media={<AspectRatio ratio="square" />} />
+```
+
+### Taking turns
+
+With `autoplay` each step takes its turn: its rule fills, its picture shows, then the next. Hover or focus holds it; pressing a step chooses it and stops the turn.
+
+```tsx
+import { Steps } from '@deriv-com/dds-marketing'
+
+// autoplay, a picture on each step
+<Steps title="Get started in three steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details.","image":{"src":"/sample-stop-brand.svg","alt":"","width":800,"height":600}},{"title":"Fund it","description":"Deposit with the local payment method you already use.","image":{"src":"/sample-stop-teal.svg","alt":"","width":800,"height":600}},{"title":"Start trading","description":"Pick a market and place your first trade.","image":{"src":"/sample-stop-amber.svg","alt":"","width":800,"height":600}}]} autoplay />
+
+// autoplay on the dark band
+<Steps title="Get started in three steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details.","image":{"src":"/sample-stop-brand.svg","alt":"","width":800,"height":600}},{"title":"Fund it","description":"Deposit with the local payment method you already use.","image":{"src":"/sample-stop-teal.svg","alt":"","width":800,"height":600}},{"title":"Start trading","description":"Pick a market and place your first trade.","image":{"src":"/sample-stop-amber.svg","alt":"","width":800,"height":600}}]} autoplay ground="strong" mediaPosition="end" />
+
+// still, a picture on each step — the first is shown
+<Steps title="Get started in three steps" steps={[{"title":"Open an account","description":"Sign up in minutes with your email and a few details.","image":{"src":"/sample-stop-brand.svg","alt":"","width":800,"height":600}},{"title":"Fund it","description":"Deposit with the local payment method you already use.","image":{"src":"/sample-stop-teal.svg","alt":"","width":800,"height":600}},{"title":"Start trading","description":"Pick a market and place your first trade.","image":{"src":"/sample-stop-amber.svg","alt":"","width":800,"height":600}}]} />
+```