{
  "id": "v1-mp-4335-dc",
  "long_id": "v1.modern-product.landing.s04.p03.t03.u05.dc",
  "name": "Modern payments product page",
  "era": {
    "slug": "modern-product",
    "code": "mp",
    "name": "Modern product",
    "years": [
      2020,
      2026
    ],
    "description": "The big-brand product page of 2020 to 2026: very large tight headlines, full-bleed sections that alternate black, white and one saturated colour, generous rounded cards and pill buttons, product shown huge and centred, and motion on scroll: sections that fade and slide in, sticky stories, numbers that reveal."
  },
  "archetype": "landing",
  "mode": "mix",
  "viewport": {
    "width": 1440,
    "fluid": true,
    "responsive": true
  },
  "density": "compact",
  "summary": "This is the product page of a payments or business software company between 2020 and 2026: a split hero on a deep page colour, here navy, with a large, tight headline in a soft geometric sans at the left and the product itself, a checkout window and a card reader drawn in CSS, on a rounded stage of the one warm accent at the right. Under it run a row of customer names set as text, tiles for the trades the product serves, a story of three steps beside a product window that stays in place, large figures and a full-bleed closing band. It was the common look of payment, banking and business tool sites in the first half of the 2020s.",
  "url": "https://chrono.skin/s/v1-mp-4335-dc",
  "preview_url": "https://chrono.skin/s/v1-mp-4335-dc/specimen.html",
  "files": {
    "STYLE.md": "# Modern payments product page\n\n## Summary\n\nThis is the product page of a payments or business software company between 2020 and 2026: a split hero on a deep page colour, here navy, with a large, tight headline in a soft geometric sans at the left and the product itself, a checkout window and a card reader drawn in CSS, on a rounded stage of the one warm accent at the right. Under it run a row of customer names set as text, tiles for the trades the product serves, a story of three steps beside a product window that stays in place, large figures and a full-bleed closing band. It was the common look of payment, banking and business tool sites in the first half of the 2020s.\n\n## Layout\n\n- The page is fluid and designed at 1440px. Content sits in `.ds-wrap`, centred, at most `--size-page` (1180px) wide with `--space-5` side padding; sections are full bleed and pad themselves with `--space-9` (112px), `--tight` with `--space-8`.\n- Navigation is `.ds-nav`, a full-width bar `--size-nav` (64px) tall that is `position: sticky` at the top of the window, translucent, with a hairline under it: the brand and next to it four links at the left, a sign-in link and one small primary button at the right. The current link carries a `--border-width-strong` line at the lower edge of the bar.\n- The home view stacks: `.ds-hero`, on the page, two equal columns (copy; `.ds-hero__art`, the accent stage with a `.ds-mock` checkout and a tilted `.ds-terminal` overlapping its lower left corner); the `.ds-marquee` of customer names; a section with `.ds-grid`, six industry tiles three to a row; a full-bleed inverse section with `.ds-steps` (the stage stays in place at the left, three numbered steps scroll at the right); a section of `.ds-stat` figures parted by hairlines; and a full-bleed accent band with `.ds-cta`.\n- Inner pages have no hero. Inside `.ds-wrap` they open with `.ds-page-header` (breadcrumb, a large title, one line of text, at most one button at the right) on the page colour; then the working components. Tabs are a pill switch at the left of `.ds-tabsrow`, with one link at its right. Content is `.ds-rates` (two price cards and the calculator), `.ds-cols` (7 to 5), or `.ds-cols--side` with the `.ds-sidebar` at the left.\n- Views. The specimen is the site of a payments company. `home` is the product page. `pricing` has the switch between ways to sell, two rate cards beside the `.ds-calc` calculator, the table of fees with its notice and badge key, and questions as a list. `guides` has the guide topics at the left with an empty test-keys box, one guide as running text with its pagination and a row of links. `contact` is the contact-sales form with its notices and buttons, the steps that follow, the open clear-the-form dialog and one customer's sentence.\n- Below 900px the hero, the steps and the rates stack and the tiles go two to a row; below 640px the links of the bar fold into a sheet across the window that lists every view, opened by a three-line button beside the call to action (`.ds-nav__fold`, a `details` holding `.ds-nav__toggle` with `.ds-nav__bars` and `.ds-nav__sheet`; the open view is the filled row, and the sign-in link, hidden in the bar as `.ds-nav__signin`, is the `.ds-menu__link--aside` row), the reader moves under the checkout, tiles and figures stack and a wide table scrolls inside `.ds-table__wrap`. Below 640px a `.ds-tooltip__tip` takes the width of its paragraph, so it never leaves the window. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (hairline gaps, chip padding), `--space-2` 8px (icon to text, the range track), `--space-3` 12px (between buttons, rows of a mock), `--space-4` 16px (form rows, list rows, tile gap), `--space-5` 24px (panel and tile padding, page gutter), `--space-6` 32px (hero actions, stage padding), `--space-7` 48px (section head to content, hero column gap, a step's padding, rise of the scroll animation), `--space-8` 72px (tight sections, top of the hero, gap of the steps), `--space-9` 112px (sections).\n- Other sizes: `--size-mark` 28px, `--size-icon` 44px, `--size-control` 40px, `--size-art` 500px (least height of a stage), `--size-mock` 340px, `--size-terminal` 190px, `--size-tile` 230px, `--size-dialog` 460px.\n- Motion, in CSS only. (1) Scroll: an element with `.ds-reveal` fades in and rises by `--space-7` as it enters the window (`@keyframes ds-rise`, `animation-timeline: view()`, `animation-range: entry 0% entry 80%`); `.ds-reveal--2` and `.ds-reveal--3` start later, for the second and third item of a row; `.ds-reveal--zoom` also grows from 94%. Put it on section heads, tiles, cards, figures and feature columns, never on the navigation, the hero copy, a whole full-bleed section or the footer. (2) Hover and press: buttons rise by 2px and shrink to 97% when pressed; tiles rise by 4 to 8px; all through `--transition`. (3) Ambient: one `.ds-glow` drifting behind the checkout on the hero's stage (16s, alternating), and the `.ds-marquee` row of names sliding left (40s, linear). The reader straightens when hovered. Every animation is declared inside `@media (prefers-reduced-motion: no-preference)`, the scroll ones also inside `@supports (animation-timeline: view())`. The keyframes state only the start (`from`), so the resting state of every rule is the finished, visible page: without support, or with reduced motion, nothing is hidden. Lengths in keyframes are `--space-*` tokens.\n\n## Typography and colour roles\n\nThis style combines the parts of different styles of one era. Where a note below names a value that differs from `tokens.css`, the tokens are right.\n\nThese are the conventions of the era; every layout and every token set keeps them.\n\n- A block stands on one of four grounds, and each ground has its own text token. The page (`--fill-page`), panels (`--fill-panel`), `--color-surface-alt`, `--color-surface-strong` and the four fills carry `--color-text`, `--color-text-muted`, `--color-heading` and `--color-link`. An inverse block (`--fill-inverse`, class `.ds-tone--inverse`) carries only `--color-inverse-text`. An accent block (`--fill-accent`, class `.ds-tone--accent`) carries only `--color-accent-text`. The navigation (`--fill-bar`) carries `--color-bar-text`; the footer (`--fill-bar-alt`) carries `--color-bar-alt-text`.\n- A palette may be light or dark. Nothing assumes that the page is light: the inverse block is black on a white palette and off-white on a black one, and full-bleed sections alternate page, inverse, accent and `--color-surface-alt`.\n- `--color-fill-1` to `--color-fill-4` are tile grounds that carry running text in `--color-text` and `--color-heading`: tints on a light palette, deep tones on a dark one. They never carry `--color-inverse-text`.\n- Buttons by ground. On the page, panels and fills: `.ds-button` (`--fill-button`, `--color-button-text`) and `.ds-button--secondary` (`--fill-button-secondary`, text and outline in `--color-button-secondary-text`). On an inverse block only `.ds-button--inverse` (fill `--color-inverse-text`, text `--color-inverse`) and `.ds-button--ghost`. On an accent block only `.ds-button--onaccent` (fill `--color-accent-text`, text `--color-accent`) and `.ds-button--ghost`. The ghost button takes outline and text from the block it stands on.\n- `--color-inverse` is also the body of a drawn device and `--color-accent` the face of a drawn payment card, so a device is drawn on the page, a fill or the accent, never on an inverse block.\n- `--fill-bar` is translucent (the bar colour mixed with `transparent` in the surface part) and the navigation blurs what scrolls under it by `--backdrop-blur`.\n- `--color-heading-alt` is the kicker above a title, the sidebar title and h3 in prose. On inverse and accent blocks the kicker inherits the block's text colour.\n- `--fill-accent` with `--color-accent-text` is the default badge. `.ds-badge--alt` and the status badges are tints: the colour mixed at 16 to 24% into `--color-surface`, the text mixed from the colour and `--color-heading`, so they hold on light and dark palettes.\n- `--color-notice` with `--color-notice-text` is the information notice; the error notice is `--color-danger` on `--color-danger-surface`. The destructive button is `--color-danger` with `--color-button-text`.\n- Borders are hairlines: `--border-width` in `--color-border-muted` around panels and between rows, `--color-border` under a table head, `--color-input-border` around fields. `--border-width-strong` in `--color-border` frames the empty state.\n- Radii: `--radius-control` for buttons, fields, tabs and the current row of a sidebar; `--radius-panel` for panels, the dialog and the empty state (half of it for notices and the textarea); `--radius-page` for the largest blocks (hero, tiles, stages); `--radius-pill` for badges and meters.\n- Shadows: `--shadow-panel` on panels, `--shadow-control` on buttons and the current tab, `--shadow-control-hover` on a hovered button or tile, `--shadow-dialog` on the dialog and on drawn products.\n- One-off values made with `calc()` and `color-mix()` because the vocabulary has no token: washes of `currentColor` or a text token at 7 to 22% for hover grounds, hairlines and stages on coloured blocks; tinted badges; the error notice's edge (`--color-danger` at 35%); the footer rule (`--color-bar-alt-text` at 25%). Opacity 0.6 to 0.8 dims secondary text on inverse and accent blocks.\n- Here: `--color-page` soft off-white `#f4f1ea`, `--color-surface` white, `--color-inverse` deep aubergine `#260a2f` (also `--color-heading` and the footer), `--color-accent` and `--color-button` violet `#5b3df5`. The fills are four pastels: lilac, peach, mint and straw.\n- One rounded family for everything (`--font-body`: Nunito, Varela Round, the system rounded face; the references used custom rounded and geometric faces), `--font-mono` for code and the card number. `--text-base` 18px at `--line-body` 1.6; `--text-ui` 16px (buttons, navigation, tile names); `--text-small` 14px (meta, badges, labels); `--text-large` 22px (leads); `--text-display` 84px (the balance, scaled down with `clamp()` and `vw` to `--text-h1`); `--text-h1` 54px (page titles and tile figures); `--text-h2` 34px (block titles, pot sums); `--text-h3` 21px (panel titles).\n- Weights are friendly, not heavy: `--weight-display` 700, `--weight-heading` 600, `--weight-ui` and `--weight-bold` 700. Nothing is uppercase and links are never underlined.\n- Surface: controls are rounded rectangles (`--radius-control` 16px), panels 28px, the largest blocks 36px, badges pills. `--shadow-panel` is a soft two-layer shadow tinted with the brand colour; buttons have a faint shadow that grows on hover and turns inward when pressed. `--fill-inverse` is a radial light from the top left corner; `--fill-button` a shallow vertical gradient. `--border-width-strong` is 3px. `--transition` is 0.25s; `--backdrop-blur` 28px.\n\nSpacing is compact: every `--space-*` token of the layout was multiplied by 0.8. Where the Layout section names a spacing in pixels, the tokens are right.\n\n## Components\n\n- `.ds-page`: on `<body>`. Sets font, text colour and `--fill-page`.\n- `.ds-tone--inverse`, `.ds-tone--accent`, `.ds-tone--alt`: put a block on the inverse fill, the accent fill or `--color-surface-alt` and set its text colour; titles, kickers, leads and figures inside inherit it.\n- `.ds-brand`: the site's mark and name, first in the navigation and again in the footer. `.ds-brand__mark` is a small tile dressed like the primary button (`--fill-button`, `--color-button-text`, `--radius-control`, `--shadow-control`) holding the mark as inline SVG; `.ds-brand__name` is the name. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-section`: a full-width block; `--tight` with less padding, `--flush` without top padding. `.ds-section__head` centres a `.ds-section__kicker`, a `.ds-section__title` and a `.ds-section__lead`; `--left` aligns it left.\n- `.ds-reveal`: the scroll animation described under Layout; `--2`, `--3`, `--zoom`.\n- `.ds-glow`: one soft round light in `currentColor` behind a product, drifting slowly; give its parent `position: relative` and `overflow: hidden`.\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: `.ds-page-header__main` holds the breadcrumb, the `.ds-page-header__title` and one line of `.ds-page-header__text`; `.ds-page-header__actions` sits at the right, on the baseline of the text.\n- `.ds-cols`: main and side column, 7 to 5; `--side` 1 to 3 for a sidebar; `--even` two equal columns. `.ds-stack` stacks blocks one `--space-5` apart.\n- `.ds-prose`: running text: h1, h2, h3, p, lists, `code`, `strong`. `.ds-prose__lead` for the first paragraph.\n- `.ds-link`: text link. States `is-visited`, `is-hover`, `is-active`, `is-focus`. `--quiet` for meta; `--more` appends a small arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: the button, in `--font-ui`. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse` (inverse blocks), `--onaccent` (accent blocks), `--ghost` (both), `--small`, `--wide`. States `is-hover`, `is-active`, `is-focus`, `is-disabled`. `.ds-buttonrow` spaces buttons.\n- `.ds-form`: vertical form with labels above the fields. `.ds-form__row` puts two fields side by side; `.ds-form__field` wraps `.ds-form__label` and one of `.ds-form__input`, `.ds-form__select`, `.ds-form__textarea`. Error: `is-error` on the input plus `.ds-form__error`. `.ds-form__hint`, `.ds-form__check` with `.ds-form__checkbox`, `.ds-form__actions`.\n- `.ds-table`: data table without fills: a small quiet head, hairlines between rows, no vertical lines; `is-hover` tints a row. `.ds-table__num` right-aligns numbers; `.ds-table__title` is a row's link. Wrap it in `.ds-table__wrap` so that it scrolls sideways on a phone; `.ds-table__foot` is a last strip for a count and the pagination.\n- `.ds-list`: rows parted by hairlines. `.ds-list__item` holds a `.ds-list__title` (alone or in a `.ds-list__head` with a badge or figure at the right), an optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: the large rounded card. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge or link; `.ds-panel__body` is padded; `.ds-panel__text` is a paragraph.\n- `.ds-tabs`: a pill switch: `.ds-tabs__tab` on a capsule of `--color-surface-strong`, the current one (`is-current`) raised on `--fill-panel`. `.ds-tabsrow` places it above what it changes.\n- `.ds-badge`: small label on `--fill-accent`. `--alt` tinted, `--quiet` grey. Status variants: `--success`, `--warning`, `--danger`. `.ds-badgerow` for several.\n- `.ds-sidebar`: a block of links: `.ds-sidebar__title` and a `.ds-sidebar__list` of `.ds-sidebar__item` with an optional `.ds-sidebar__count`; the current row (`is-current`) is filled with `--color-surface-strong`.\n- `.ds-notice`: tinted rounded message; `--error` in the danger colours. `.ds-notice__title` for the bold lead-in. `.ds-noticerow` stacks notices.\n- `.ds-pagination`: `.ds-pagination__link` pills; `is-current` is filled with `--fill-button`, `is-disabled` is grey.\n- `.ds-breadcrumb`: a small trail of `.ds-breadcrumb__item` parted by small arrows; the last is `.ds-breadcrumb__current`. It sits above the page title.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`, a panel in `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, a round `.ds-dialog__close`), `.ds-dialog__body` and `.ds-dialog__actions` with the main action first.\n- `.ds-empty`: a centred message in a frame of `--border-width-strong`: `.ds-empty__icon` (a circle of `--color-fill-1`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-wrap`: the centred content column.\n- `.ds-nav`: the full-width bar. `.ds-nav__inner` lays out the brand, `.ds-nav__links` of `.ds-nav__link` (the current one underlined at the bar's edge, `is-current`) and `.ds-nav__actions` with `.ds-nav__signin` and one `.ds-button--small`. In the specimen the showing view marks its link with one `:has()` rule per view; a project sets `is-current` itself.\n- `.ds-nav__fold`: below 640px the bar's links; a `<details>` whose `.ds-nav__toggle` (a pill with `.ds-nav__bars`) opens `.ds-nav__sheet`, a panel under the bar of `.ds-menu__link` rows, one per view, the open one filled. While the sheet is open the three lines of the toggle become a cross. Hidden above 640px, where `.ds-nav__links` carries the views.\n- `.ds-hero`: the split introduction of the home view, on the page: `.ds-hero__inner` holds `.ds-hero__copy` (`.ds-hero__kicker`, a pill with a badge; `.ds-hero__title`; `.ds-hero__lead`; `.ds-hero__actions` with a primary and a secondary button; `.ds-hero__note`) and `.ds-hero__art`, the stage on `--fill-accent` with a `.ds-glow`, a `.ds-mock` and a `.ds-terminal`. One per site.\n- `.ds-mock`: a window of the product drawn as a panel in `--shadow-dialog`: `.ds-mock__head` (two small labels), `.ds-mock__figure` (the sum), `.ds-mock__row` lines of label and value, `.ds-mock__field` boxes (two side by side in `.ds-mock__pair`) and `.ds-mock__pay`, a bar dressed like the primary button (`--quiet` grey). It may stand on any ground.\n- `.ds-terminal`: a card reader: a body in `--color-inverse` with `.ds-terminal__screen` (a line and `.ds-terminal__sum`) and `.ds-terminal__keys` of `.ds-terminal__key` (`--go` in the button colour); tilted by 6 degrees and straightened on hover. Draw it on the page, a fill or the accent, never on an inverse block.\n- `.ds-marquee`: customer names set as text in a `.ds-marquee__track` of `.ds-marquee__name`, written twice so that the row can slide by half its width without a seam.\n- `.ds-grid`: six industry tiles, three to a row, on the four fills in turn. Each `.ds-grid__cell` is a link with a `.ds-grid__icon` (a rounded square of the page colour) at the top and `.ds-grid__title`, `.ds-grid__text` and `.ds-grid__more` at the bottom; it rises on hover.\n- `.ds-steps`: a story in three steps: `.ds-steps__art`, a stage washed with 9% of the text colour that is `position: sticky` under the navigation and holds a `.ds-mock`, and `.ds-steps__list` of `.ds-steps__item` with a ringed `.ds-steps__num`, `.ds-steps__title` and `.ds-steps__text`. Used on an inverse block; it inherits the block's text colour.\n- `.ds-stat`: the row of three figures; each `.ds-stat__item` is a `.ds-stat__figure` in display size over a `.ds-stat__label`, with a hairline at its left.\n- `.ds-cta`: the closing band inside a `.ds-tone--accent` section: a section title at the left, a button row at the right.\n- `.ds-rates`: two `.ds-panel.ds-rate` cards and the calculator in one row. A rate card holds `.ds-rate__figure` with `.ds-rate__per`, `.ds-rate__text`, a `.ds-points` list of ticked `.ds-points__item` and a `--wide` button.\n- `.ds-calc`: the calculator, a tile of `--color-surface-strong` with static controls: `.ds-calc__label` (name and value), `.ds-range` with a `.ds-range__fill` (`--low`, `--high`) that ends in a round thumb, `.ds-chips` of `.ds-chip` (`is-current` filled like the primary button), and `.ds-calc__out` with `.ds-calc__note` lines around the `.ds-calc__sum`.\n- `.ds-tabsrow`: the tab switch at the left and one link at the right, above what they change.\n- `.ds-quote`: one customer's sentence in heading type, with `.ds-quote__by` under it.\n- `.ds-list--steps`: numbers the items of a list in small rounded squares of `--color-fill-1`.\n- `.ds-footer`: the closing band on `--fill-bar-alt`: `.ds-footer__cols` with the brand and a `.ds-footer__about` line, then four columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal` under a rule.\n- `.ds-menu`: a navigation item with a drop-down. `.ds-menu__toggle` is the item, with a small caret; `.ds-menu__panel` is the panel under it, shown on hover, on focus or with `is-open`, with a `.ds-menu__title` and a `.ds-menu__list` of `.ds-menu__link` per column. Below 1000px the panel is not shown and the item is a plain link.\n- `.ds-accordion`: questions that open and close. Each `.ds-accordion__item` is a `<details>` with a `.ds-accordion__head` summary and a `.ds-accordion__body`. Use it for the questions under a price or a product, never for navigation.\n- `.ds-tooltip`: a dotted-underlined term holding a `.ds-tooltip__tip`, a small inverse box above it that shows on hover, on focus or with `is-open`. Use it for one term that needs a sentence.\n- `.ds-carousel`: `.ds-carousel__track` scrolls sideways with scroll snapping and holds `.ds-carousel__slide` items on the fills; `.ds-carousel__bar` has `.ds-carousel__dots` (`.ds-carousel__dot`, `is-current`) and `.ds-carousel__hint`, a small line that says to swipe. `.ds-carousel--peek` shows two slides and the edge of a third; `.ds-voice` with `.ds-voice__text` is a slide that quotes a customer above a `.ds-person`.\n- `.ds-switch`: an on and off control drawn over `<input type=\"checkbox\">`. `.ds-toggle` is the label that holds it with its words, beside the tabs of a price or filter row.\n- `.ds-progress`: a thin bar; `.ds-progress__bar` with `--20`, `--40`, `--60`, `--70`, `--80`, `--100` sets how far; `.ds-progress__label` above it has a bold name and a quiet remark. Use it for a step of a flow or a share used.\n- `.ds-avatar`: initials in a circle on a fill (`--2`, `--3`, `--large`). `.ds-person` puts it beside a `.ds-person__name` and `.ds-person__meta`.\n\n## Never\n\n- `font-weight <= 700`: type is bold at most, never black.\n- `font-size >= 14px`: meta, badges and labels are the smallest text.\n- `font-size <= 84px`: the balance is the largest text.\n- `font-families <= 2`: one rounded sans-serif family, plus monospace for code and card numbers.\n- `line-height <= 1.6`: body text is set at 1.6.\n- `uppercase-text <= 0%`: navigation, buttons and labels are in sentence case.\n- `underlined-links <= 0%`: links are told apart by colour and weight.\n- `text-shadow = none`: text is flat on every ground.\n- `border-width <= 1px`: every border is a hairline.\n- `border-radius <= 30px`: controls are 10px, panels 18px, tiles 24px and a drawn watch a little more; only pills and circles are rounder.\n- `box-shadow-blur <= 48px`: panels rest on a 12px shadow; devices, the price bar and the dialog on one of 48px.\n- `gradient-fills <= 5%`: fills are flat; only drawn screens and the drifting light are gradients.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. First decide which ground it stands on (page, panel or fill; inverse; accent) and take the text token and the buttons of that ground; do not put a primary button on an inverse or accent block, or `--color-inverse-text` on a fill. A new block of the product page is a `.ds-section`, with a tone class when it is not on the page colour, and a `.ds-section__head--left`; a new trade is another `.ds-grid__cell`; a new chapter is a `.ds-steps` with another `.ds-mock` on its stage; anything that holds data is a `.ds-panel`. Draw new product windows as a `.ds-mock` from rows, fields and one pay bar, not as a picture. Give new tiles and cards `.ds-reveal`, staggered with `--2` and `--3` along a row, and a hover state through `--transition`; add no animation that leaves an element hidden when it does not run. Keep corners, shadows and borders on their tokens, spacing on the `--space-*` scale, type sizes on the `--text-*` tokens (large titles through `clamp()` between two of them), and note any one-off `color-mix()` shade next to its rule.\n",
    "components.css": ":root {\n  --size-page: 1180px;\n  --size-nav: 64px;\n  --size-mark: 28px;\n  --size-icon: 44px;\n  --size-control: 40px;\n  --size-dialog: 460px;\n  --size-menu: 660px;\n  --size-avatar: 40px;\n  --size-tip: 240px;\n  --size-art: 500px;\n  --size-mock: 340px;\n  --size-terminal: 190px;\n  --size-tile: 230px;\n  --space-1: 3px;\n  --space-2: 6px;\n  --space-3: 10px;\n  --space-4: 13px;\n  --space-5: 19px;\n  --space-6: 26px;\n  --space-7: 38px;\n  --space-8: 58px;\n  --space-9: 90px;\n}\n\n/* views: one screen of the example site shows at a time */\n.ds-view { display: none; }\n.ds-view:target, .ds-page:not(:has(.ds-view:target)) .ds-view--home { display: block; }\n.ds-view:target { scroll-margin-top: 100vh; }\n\n.ds-page {\n  margin: 0;\n  padding: 0;\n  min-height: 100vh;\n  background: var(--fill-page);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-body);\n  overflow-x: clip;\n}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n  box-sizing: border-box;\n}\n.ds-wrap {\n  width: 100%;\n  max-width: var(--size-page);\n  margin: 0 auto;\n  padding: 0 var(--space-5);\n}\n\n/* tones: the three grounds a block can stand on besides the page.\n   Each sets its own text colour; headings inside inherit it. */\n.ds-tone--inverse {\n  background: var(--fill-inverse);\n  color: var(--color-inverse-text);\n}\n.ds-tone--accent {\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n}\n.ds-tone--alt {\n  background: var(--color-surface-alt);\n  color: var(--color-text);\n}\n.ds-tone--inverse .ds-section__title,\n.ds-tone--accent .ds-section__title,\n.ds-tone--inverse .ds-section__kicker,\n.ds-tone--accent .ds-section__kicker,\n.ds-tone--inverse .ds-section__lead,\n.ds-tone--accent .ds-section__lead,\n.ds-tone--inverse .ds-feature__title,\n.ds-tone--accent .ds-feature__title,\n.ds-tone--inverse .ds-feature__text,\n.ds-tone--accent .ds-feature__text,\n.ds-tone--inverse .ds-stat__figure,\n.ds-tone--accent .ds-stat__figure,\n.ds-tone--inverse .ds-stat__label,\n.ds-tone--accent .ds-stat__label {\n  color: inherit;\n}\n\n/* motion. The resting state of every rule is the finished page; the\n   animations below only run where scroll-driven timelines exist and\n   the visitor has not asked for less motion. */\n@keyframes ds-rise {\n  from {\n    opacity: 0;\n    transform: translateY(var(--space-7));\n  }\n}\n@keyframes ds-zoom {\n  from {\n    opacity: 0;\n    transform: translateY(var(--space-6)) scale(0.94);\n  }\n}\n@keyframes ds-drift {\n  from {\n    transform: translate(calc(var(--space-8) * -1), 0) scale(1);\n  }\n  to {\n    transform: translate(var(--space-8), var(--space-6)) scale(1.15);\n  }\n}\n@keyframes ds-marquee {\n  to {\n    transform: translateX(-50%);\n  }\n}\n@media (prefers-reduced-motion: no-preference) {\n  @supports (animation-timeline: view()) {\n    .ds-reveal {\n      animation: ds-rise linear both;\n      animation-timeline: view();\n      animation-range: entry 0% entry 80%;\n    }\n    .ds-reveal--2 {\n      animation-range: entry 15% entry 95%;\n    }\n    .ds-reveal--3 {\n      animation-range: entry 30% entry 110%;\n    }\n    .ds-reveal--zoom {\n      animation-name: ds-zoom;\n    }\n  }\n  .ds-glow {\n    animation: ds-drift 16s ease-in-out infinite alternate;\n  }\n  .ds-marquee__track {\n    animation: ds-marquee 40s linear infinite;\n  }\n}\n\n/* brand: the mark on a tile dressed like the primary button */\n.ds-brand {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: inherit;\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n  letter-spacing: var(--heading-tracking);\n  text-decoration: none;\n  white-space: nowrap;\n}\n.ds-brand__mark {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-mark);\n  height: var(--size-mark);\n  padding: var(--space-1);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  box-shadow: var(--shadow-control);\n}\n.ds-brand__mark svg {\n  display: block;\n  width: 100%;\n  height: 100%;\n}\n.ds-brand__name {\n  display: inline-block;\n}\n\n/* typography */\n.ds-prose {\n  max-width: 68ch;\n  color: var(--color-text);\n}\n.ds-prose h1,\n.ds-prose h2,\n.ds-prose h3 {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-prose h1 {\n  font-size: var(--text-h2);\n}\n.ds-prose h2 {\n  margin-top: var(--space-6);\n  font-size: var(--text-h3);\n}\n.ds-prose h3 {\n  margin-top: var(--space-5);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  letter-spacing: 0;\n  text-transform: var(--ui-transform);\n}\n.ds-prose p {\n  margin: var(--space-3) 0 0;\n}\n.ds-prose ul,\n.ds-prose ol {\n  margin: var(--space-3) 0 0;\n  padding-left: var(--space-5);\n}\n.ds-prose li {\n  margin-top: var(--space-1);\n}\n.ds-prose strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-prose code {\n  padding: 0 var(--space-1);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-family: var(--font-mono);\n  font-size: var(--text-small);\n}\n.ds-prose a {\n  color: var(--color-link);\n  text-decoration: var(--link-decoration);\n}\n.ds-prose__lead {\n  color: var(--color-heading);\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n}\n\n/* links */\n.ds-link {\n  color: var(--color-link);\n  font-weight: var(--weight-ui);\n  text-decoration: var(--link-decoration);\n  transition: var(--transition);\n}\n.ds-link:visited,\n.ds-link.is-visited {\n  color: var(--color-link-visited);\n}\n.ds-link:hover,\n.ds-link.is-hover {\n  color: var(--color-link-hover);\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-link:active,\n.ds-link.is-active {\n  color: var(--color-link-active);\n}\n.ds-link:focus-visible,\n.ds-link.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-link--more::after {\n  content: \" \\203A\";\n}\n.ds-linkrow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2) var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-size: var(--text-ui);\n}\n\n/* buttons: pills whose shadow grows on hover and that shrink a little when pressed */\n.ds-button {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--space-2);\n  margin: 0;\n  padding: var(--space-3) var(--space-5);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  line-height: var(--line-heading);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  text-shadow: var(--shadow-text);\n  white-space: nowrap;\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n  cursor: pointer;\n}\n.ds-button:hover,\n.ds-button.is-hover {\n  background: var(--fill-button-hover);\n  color: var(--color-button-hover-text);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-button:active,\n.ds-button.is-active {\n  box-shadow: var(--shadow-control-pressed);\n  transform: scale(0.97);\n}\n.ds-button:focus-visible,\n.ds-button.is-focus {\n  outline: var(--focus-ring);\n  outline-offset: calc(var(--space-1) / 2);\n}\n.ds-button--secondary,\n.ds-button--secondary:hover,\n.ds-button--secondary.is-hover {\n  border-color: var(--color-button-secondary-text);\n  background: var(--fill-button-secondary);\n  color: var(--color-button-secondary-text);\n}\n.ds-button--danger,\n.ds-button--danger:hover,\n.ds-button--danger.is-hover {\n  background: var(--color-danger);\n  color: var(--color-button-text);\n}\n.ds-button--inverse,\n.ds-button--inverse:hover,\n.ds-button--inverse.is-hover {\n  background: var(--color-inverse-text);\n  color: var(--color-inverse);\n}\n.ds-button--onaccent,\n.ds-button--onaccent:hover,\n.ds-button--onaccent.is-hover {\n  background: var(--color-accent-text);\n  color: var(--color-accent);\n}\n.ds-button--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n  border-color: currentColor;\n  background: transparent;\n  color: inherit;\n  box-shadow: none;\n}\n.ds-button--small {\n  padding: var(--space-2) var(--space-4);\n  font-size: var(--text-small);\n}\n.ds-button--wide {\n  width: 100%;\n}\n.ds-button:disabled,\n.ds-button.is-disabled,\n.ds-button.is-disabled:hover {\n  border-color: transparent;\n  background: var(--color-disabled);\n  color: var(--color-disabled-text);\n  box-shadow: none;\n  text-shadow: none;\n  transform: none;\n  cursor: default;\n}\n.ds-buttonrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n}\n\n/* form */\n.ds-form {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n}\n.ds-form__row {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n.ds-form__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  min-width: 0;\n}\n.ds-form__label {\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-form__input,\n.ds-form__select,\n.ds-form__textarea {\n  width: 100%;\n  margin: 0;\n  padding: var(--space-3) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  box-shadow: var(--shadow-control);\n  transition: var(--transition);\n}\n.ds-form__textarea {\n  min-height: var(--space-9);\n  border-radius: calc(var(--radius-panel) / 2);\n  line-height: var(--line-body);\n  resize: vertical;\n}\n.ds-form__input:focus,\n.ds-form__select:focus,\n.ds-form__textarea:focus,\n.ds-form__input.is-focus {\n  border-color: var(--color-focus);\n  outline: var(--focus-ring);\n}\n.ds-form__input.is-error {\n  border-color: var(--color-danger);\n}\n.ds-form__error {\n  color: var(--color-danger);\n  font-size: var(--text-small);\n  font-weight: var(--weight-bold);\n}\n.ds-form__hint {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-form__check {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--color-text);\n  font-size: var(--text-base);\n}\n.ds-form__checkbox {\n  flex: none;\n  width: var(--space-4);\n  height: var(--space-4);\n  margin: 0;\n  accent-color: var(--color-button);\n}\n.ds-form__actions {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3);\n  margin-top: var(--space-2);\n}\n\n/* table: no fills, hairlines between rows, a small quiet head */\n.ds-table__wrap {\n  max-width: 100%;\n  overflow-x: auto;\n}\n.ds-table {\n  width: 100%;\n  border-collapse: collapse;\n  font-size: var(--text-base);\n}\n.ds-table th {\n  padding: var(--space-3) var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-align: left;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n}\n.ds-table td {\n  padding: var(--space-4);\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-text);\n  vertical-align: middle;\n}\n.ds-table tr:last-child td {\n  border-bottom: 0;\n}\n.ds-table tbody tr:hover td,\n.ds-table tr.is-hover td {\n  background: var(--color-surface-alt);\n}\n.ds-table th.ds-table__num,\n.ds-table td.ds-table__num {\n  text-align: right;\n  font-variant-numeric: tabular-nums;\n}\n.ds-table__title {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-table__foot {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-4) var(--space-5);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* list */\n.ds-list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-list__item {\n  padding: var(--space-4) 0;\n  border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-list__item:first-child {\n  padding-top: 0;\n}\n.ds-list__item:last-child {\n  padding-bottom: 0;\n  border-bottom: 0;\n}\n.ds-list__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n.ds-list__title {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-list__text {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text);\n}\n.ds-list__meta {\n  margin: var(--space-1) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* panel: the large rounded card */\n.ds-panel {\n  min-width: 0;\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding: var(--space-5) var(--space-5) 0;\n}\n.ds-panel__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-panel__body {\n  padding: var(--space-5);\n}\n.ds-panel__text {\n  margin: 0 0 var(--space-4);\n}\n\n/* badge */\n.ds-badge {\n  display: inline-block;\n  padding: 0 var(--space-3);\n  border-radius: var(--radius-pill);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1.8;\n  text-transform: var(--ui-transform);\n  white-space: nowrap;\n  vertical-align: middle;\n}\n.ds-badge--alt {\n  background: color-mix(in srgb, var(--color-accent-alt) 24%, var(--color-surface));\n  color: color-mix(in srgb, var(--color-accent-alt) 40%, var(--color-heading));\n}\n.ds-badge--quiet {\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n}\n.ds-badge--success {\n  background: color-mix(in srgb, var(--color-success) 18%, var(--color-surface));\n  color: color-mix(in srgb, var(--color-success) 60%, var(--color-heading));\n}\n.ds-badge--warning {\n  background: color-mix(in srgb, var(--color-warning) 22%, var(--color-surface));\n  color: color-mix(in srgb, var(--color-warning) 50%, var(--color-heading));\n}\n.ds-badge--danger {\n  background: color-mix(in srgb, var(--color-danger) 16%, var(--color-surface));\n  color: color-mix(in srgb, var(--color-danger) 70%, var(--color-heading));\n}\n.ds-badgerow {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n}\n\n/* sidebar block */\n.ds-sidebar {\n  min-width: 0;\n}\n.ds-sidebar__title {\n  margin: 0 0 var(--space-3);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-sidebar__list {\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-sidebar__item {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-2);\n  padding: var(--space-2) var(--space-4);\n  border-radius: var(--radius-control);\n  color: var(--color-link-quiet);\n  font-size: var(--text-base);\n  text-decoration: var(--link-decoration-quiet);\n  transition: var(--transition);\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover {\n  background: var(--color-surface-alt);\n  color: var(--color-link-hover);\n}\n.ds-sidebar__item.is-current {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-sidebar__count {\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n\n/* notice */\n.ds-notice {\n  margin: 0;\n  padding: var(--space-4) var(--space-5);\n  border: var(--border-width) var(--border-style) transparent;\n  border-radius: calc(var(--radius-panel) / 2);\n  background: var(--color-notice);\n  color: var(--color-notice-text);\n}\n.ds-notice--error {\n  border-color: color-mix(in srgb, var(--color-danger) 35%, transparent);\n  background: var(--color-danger-surface);\n  color: var(--color-danger);\n}\n.ds-notice__title {\n  font-weight: var(--weight-bold);\n}\n.ds-noticerow {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n}\n\n/* pagination */\n.ds-pagination {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-pagination__link {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--size-control);\n  height: var(--size-control);\n  padding: 0 var(--space-3);\n  border-radius: var(--radius-control);\n  color: var(--color-link-quiet);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-pagination__link:hover,\n.ds-pagination__link.is-hover {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n.ds-pagination__link.is-current {\n  background: var(--fill-button);\n  color: var(--color-button-text);\n}\n.ds-pagination__link.is-disabled {\n  background: transparent;\n  color: var(--color-disabled-text);\n}\n\n/* breadcrumb */\n.ds-breadcrumb {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  text-transform: var(--ui-transform);\n}\n.ds-breadcrumb__item {\n  color: var(--color-text-muted);\n  text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__item::after {\n  content: \"\\203A\";\n  margin-left: var(--space-2);\n}\n.ds-breadcrumb__current {\n  color: var(--color-heading);\n  font-weight: var(--weight-ui);\n}\n\n/* page header: the head of an inner page */\n.ds-page-header {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: flex-end;\n  justify-content: space-between;\n  gap: var(--space-5);\n  padding: var(--space-7) 0 var(--space-6);\n}\n.ds-page-header__main {\n  min-width: 0;\n}\n.ds-page-header__title {\n  margin: var(--space-3) 0 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: clamp(var(--text-h2), 6vw, var(--text-h1));\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-page-header__text {\n  max-width: 56ch;\n  margin: var(--space-3) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n}\n.ds-page-header__actions {\n  display: flex;\n  flex: none;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n\n/* dialog: shown open in the page flow on its dimmed backdrop */\n.ds-dialog {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-7) var(--space-4);\n  border-radius: var(--radius-panel);\n  background: var(--color-overlay);\n}\n.ds-dialog__box {\n  width: 100%;\n  max-width: var(--size-dialog);\n  padding: var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: var(--space-3);\n}\n.ds-dialog__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-dialog__close {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-6);\n  height: var(--space-6);\n  border-radius: 50%;\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n  font-size: var(--text-large);\n  line-height: 1;\n  text-decoration: none;\n}\n.ds-dialog__body {\n  padding: var(--space-3) 0 var(--space-5);\n}\n.ds-dialog__body p {\n  margin: 0;\n}\n.ds-dialog__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n}\n\n/* empty state */\n.ds-empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--space-2);\n  padding: var(--space-7) var(--space-5);\n  border: var(--border-width-strong) var(--border-style) var(--color-border);\n  border-radius: var(--radius-panel);\n  text-align: center;\n}\n.ds-empty__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  border-radius: 50%;\n  background: var(--color-fill-1);\n  color: var(--color-heading);\n}\n.ds-empty__icon svg {\n  width: 50%;\n  height: 50%;\n}\n.ds-empty__title {\n  margin: var(--space-2) 0 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-empty__text {\n  max-width: 44ch;\n  margin: 0 0 var(--space-3);\n  color: var(--color-text-muted);\n}\n\n/* tabs: a pill switch */\n.ds-tabs {\n  display: inline-flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  max-width: 100%;\n  margin: 0;\n  padding: var(--space-1);\n  border-radius: var(--radius-control);\n  background: var(--color-surface-strong);\n  list-style: none;\n}\n.ds-tabs__tab {\n  display: block;\n  padding: var(--space-2) var(--space-5);\n  border-radius: var(--radius-control);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  transition: var(--transition);\n}\n.ds-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n  color: var(--color-heading);\n}\n.ds-tabs__tab.is-current {\n  background: var(--fill-panel);\n  color: var(--color-heading);\n  box-shadow: var(--shadow-control);\n}\n\n/* sections and their heads */\n.ds-section {\n  padding: var(--space-9) 0;\n}\n.ds-section--tight {\n  padding: var(--space-8) 0;\n}\n.ds-section__head {\n  max-width: 90ch;\n  margin: 0 auto var(--space-7);\n  text-align: center;\n}\n.ds-section__head--left {\n  margin-left: 0;\n  text-align: left;\n}\n.ds-section__kicker {\n  margin: 0 0 var(--space-3);\n  color: var(--color-heading-alt);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-section__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: clamp(var(--text-h2), 6vw, var(--text-h1));\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n  text-wrap: balance;\n}\n.ds-section__lead {\n  margin: var(--space-4) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n  text-wrap: balance;\n}\n.ds-stack {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-5);\n  min-width: 0;\n}\n.ds-cols {\n  display: grid;\n  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);\n  align-items: start;\n  gap: var(--space-5);\n}\n.ds-cols--side {\n  grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n  gap: var(--space-7);\n}\n\n/* stats: big numbers. .ds-stat is the row, .ds-stat__item one figure */\n.ds-stat {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-6);\n}\n.ds-stat__item {\n  min-width: 0;\n}\n.ds-stat__figure {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: clamp(var(--text-h1), 7vw, var(--text-display));\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-stat__label {\n  max-width: 24ch;\n  margin: var(--space-3) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n}\n\n/* glow: one soft light behind a product, drifting slowly */\n.ds-glow {\n  position: absolute;\n  top: 20%;\n  left: 20%;\n  width: 60%;\n  aspect-ratio: 1;\n  border-radius: 50%;\n  background: radial-gradient(closest-side, currentColor, transparent);\n  opacity: 0.28;\n  pointer-events: none;\n}\n\n/* marquee: a row of names set as text, sliding slowly */\n.ds-marquee {\n  overflow-x: auto;\n  scrollbar-width: none;\n}\n.ds-marquee__track {\n  display: flex;\n  gap: var(--space-8);\n  width: max-content;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-marquee__name {\n  color: var(--color-text-muted);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  letter-spacing: var(--heading-tracking);\n  white-space: nowrap;\n}\n\n/* footer: small grey link columns */\n.ds-footer {\n  padding: var(--space-8) 0 var(--space-6);\n  background: var(--fill-bar-alt);\n  color: var(--color-bar-alt-text);\n  font-size: var(--text-small);\n}\n.ds-footer__cols {\n  display: grid;\n  grid-template-columns: minmax(0, 2fr) repeat(4, minmax(0, 1fr));\n  gap: var(--space-6);\n}\n.ds-footer__about {\n  max-width: 30ch;\n  margin: var(--space-4) 0 0;\n}\n.ds-footer__title {\n  margin: 0 0 var(--space-3);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-footer__list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-footer__link {\n  color: inherit;\n  text-decoration: var(--link-decoration-quiet);\n  opacity: 0.8;\n  transition: var(--transition);\n}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n  opacity: 1;\n  text-decoration: var(--link-decoration-hover);\n}\n.ds-footer__legal {\n  display: flex;\n  flex-wrap: wrap;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: var(--space-7) 0 0;\n  padding-top: var(--space-4);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-alt-text) 25%, transparent);\n  opacity: 0.8;\n}\n\n@media (max-width: 900px) {\n  .ds-cols,\n  .ds-cols--side,\n  .ds-cols--even {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-5);\n  }\n  .ds-footer__cols {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-section {\n    padding: var(--space-8) 0;\n  }\n}\n@media (max-width: 640px) {\n  .ds-wrap {\n    padding: 0 var(--space-4);\n  }\n  .ds-section,\n  .ds-section--tight {\n    padding: var(--space-7) 0;\n  }\n  .ds-section__head {\n    margin-bottom: var(--space-6);\n  }\n  .ds-stat {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-form__row {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-table th,\n  .ds-table td {\n    padding: var(--space-3) var(--space-2);\n  }\n  .ds-table {\n    font-size: var(--text-small);\n  }\n  .ds-tabs__tab {\n    padding: var(--space-2) var(--space-3);\n  }\n  .ds-dialog {\n    padding: var(--space-5) var(--space-3);\n  }\n  .ds-page-header {\n    padding: var(--space-6) 0 var(--space-5);\n  }\n  .ds-marquee__track {\n    gap: var(--space-6);\n  }\n}\n.ds-view > .ds-wrap:last-child {\n  padding-bottom: var(--space-8);\n}\n\n/* ---- components of the period beyond the checklist ---- */\n\n/* menu: a wide drop-down under a navigation item, shown on hover or focus */\n.ds-menu {\n  position: relative;\n}\n.ds-menu__toggle::after {\n  content: \"\";\n  display: inline-block;\n  width: var(--space-2);\n  height: var(--space-2);\n  margin-left: var(--space-2);\n  border-right: var(--border-width-strong) var(--border-style) currentColor;\n  border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n  transform: translateY(-35%) rotate(45deg);\n  opacity: 0.6;\n}\n.ds-menu__panel {\n  position: absolute;\n  top: 100%;\n  left: 0;\n  z-index: 20;\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-5);\n  width: var(--size-menu);\n  max-width: 92vw;\n  padding: var(--space-5);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-ui);\n  text-transform: none;\n  box-shadow: var(--shadow-dialog);\n  opacity: 0;\n  visibility: hidden;\n  transform: translateY(calc(var(--space-2) * -1));\n  transition: var(--transition);\n}\n.ds-menu--end .ds-menu__panel {\n  right: 0;\n  left: auto;\n}\n.ds-menu:hover .ds-menu__panel,\n.ds-menu:focus-within .ds-menu__panel,\n.ds-menu.is-open .ds-menu__panel {\n  opacity: 1;\n  visibility: visible;\n  transform: none;\n}\n.ds-menu__title {\n  margin: 0 0 var(--space-2);\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-menu__list {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-menu__link {\n  display: block;\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n  text-decoration: none;\n  white-space: normal;\n  transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-menu__link small {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n}\n\n/* accordion: questions that open and close, built on details */\n.ds-accordion {\n  min-width: 0;\n  border-top: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__item {\n  border-bottom: var(--border-width) var(--border-style) var(--color-border);\n}\n.ds-accordion__head {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  padding: var(--space-4) 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  list-style: none;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-accordion__head::-webkit-details-marker {\n  display: none;\n}\n.ds-accordion__head::after {\n  content: \"\";\n  display: block;\n  flex: none;\n  width: var(--space-6);\n  height: var(--space-6);\n  border-radius: 50%;\n  background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n    linear-gradient(currentColor, currentColor) center / calc(var(--space-1) / 2) round(var(--space-6) * 0.4, var(--space-1)) no-repeat,\n    var(--color-surface-strong);\n  color: var(--color-heading);\n  font-size: var(--text-large);\n}\n.ds-accordion__item[open] .ds-accordion__head::after,\n.ds-accordion__item.is-open .ds-accordion__head::after {\n  background: linear-gradient(currentColor, currentColor) center / round(var(--space-6) * 0.4, var(--space-1)) calc(var(--space-1) / 2) no-repeat,\n    var(--fill-button);\n  color: var(--color-button-text);\n}\n.ds-accordion__head:hover,\n.ds-accordion__head.is-hover {\n  color: var(--color-link-hover);\n}\n.ds-accordion__head:focus-visible,\n.ds-accordion__head.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-accordion__body {\n  max-width: 62ch;\n  padding: 0 0 var(--space-5);\n  color: var(--color-text);\n}\n.ds-accordion__body p {\n  margin: 0;\n}\n\n/* tooltip: a hint over its trigger, shown on hover or focus */\n.ds-tooltip {\n  position: relative;\n  display: inline-block;\n  color: inherit;\n  text-decoration: underline dotted;\n  cursor: help;\n}\n.ds-tooltip__tip {\n  position: absolute;\n  bottom: 100%;\n  left: 50%;\n  z-index: 15;\n  width: max-content;\n  max-width: var(--size-tip);\n  margin-bottom: var(--space-2);\n  padding: var(--space-2) var(--space-3);\n  border-radius: calc(var(--radius-panel) / 2.5);\n  background: var(--color-inverse);\n  color: var(--color-inverse-text);\n  font-family: var(--font-body);\n  font-size: var(--text-small);\n  font-weight: var(--weight-body);\n  line-height: var(--line-heading);\n  letter-spacing: 0;\n  text-align: left;\n  text-transform: none;\n  white-space: normal;\n  opacity: 0;\n  visibility: hidden;\n  transform: translate(-50%, var(--space-1));\n  transition: var(--transition);\n  pointer-events: none;\n}\n.ds-tooltip:hover .ds-tooltip__tip,\n.ds-tooltip:focus .ds-tooltip__tip,\n.ds-tooltip:focus-within .ds-tooltip__tip,\n.ds-tooltip.is-open .ds-tooltip__tip {\n  opacity: 1;\n  visibility: visible;\n  transform: translate(-50%, 0);\n}\n\n/* carousel: a row of slides, one showing, moved by scroll snapping */\n.ds-carousel {\n  min-width: 0;\n}\n.ds-carousel__track {\n  display: flex;\n  gap: var(--space-4);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n  border-radius: var(--radius-page);\n  overflow-x: auto;\n  scroll-snap-type: x mandatory;\n  scrollbar-width: none;\n}\n.ds-carousel__slide {\n  flex: none;\n  width: 100%;\n  min-width: 0;\n  border-radius: var(--radius-page);\n  background: var(--color-fill-1);\n  color: var(--color-text);\n  scroll-snap-align: start;\n}\n.ds-carousel__slide:nth-child(3n + 2) { background: var(--color-fill-3); }\n.ds-carousel__slide:nth-child(3n + 3) { background: var(--color-fill-2); }\n.ds-carousel__bar {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-4);\n  margin-top: var(--space-4);\n}\n.ds-carousel__dots {\n  display: flex;\n  align-items: center;\n  gap: var(--space-2);\n  color: var(--color-heading);\n}\n.ds-carousel__dot {\n  width: var(--space-2);\n  height: var(--space-2);\n  border-radius: var(--radius-pill);\n  background: currentColor;\n  opacity: 0.25;\n  transition: var(--transition);\n}\n.ds-carousel__dot.is-current {\n  width: var(--space-5);\n  opacity: 1;\n}\n.ds-carousel__hint {\n  margin: 0;\n  color: var(--color-text-muted);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n\n/* switch: an on and off control drawn over a checkbox */\n.ds-switch {\n  position: relative;\n  flex: none;\n  width: var(--space-7);\n  height: calc(var(--space-5) + var(--space-1));\n  margin: 0;\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n  -webkit-appearance: none;\n  appearance: none;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-switch::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  left: var(--space-1);\n  width: calc(var(--space-5) - var(--space-2));\n  height: calc(var(--space-5) - var(--space-2));\n  border-radius: 50%;\n  background: var(--color-heading);\n  transform: translateY(-50%);\n  transition: var(--transition);\n}\n.ds-switch:checked,\n.ds-switch.is-on {\n  border-color: transparent;\n  background: var(--fill-button);\n}\n.ds-switch:checked::after,\n.ds-switch.is-on::after {\n  left: calc(100% - var(--space-5));\n  background: var(--color-button-text);\n}\n.ds-switch:focus-visible,\n.ds-switch.is-focus {\n  outline: var(--focus-ring);\n}\n.ds-switch:disabled,\n.ds-switch.is-disabled {\n  background: var(--color-disabled);\n  cursor: default;\n}\n\n/* progress: a bar that shows how far something is */\n.ds-progress {\n  display: block;\n  height: var(--space-2);\n  border-radius: var(--radius-pill);\n  background: var(--color-surface-strong);\n  overflow: hidden;\n}\n.ds-progress__bar {\n  display: block;\n  width: 50%;\n  height: 100%;\n  border-radius: var(--radius-pill);\n  background: var(--fill-button);\n}\n.ds-progress__bar--20 { width: 20%; }\n.ds-progress__label {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0 0 var(--space-2);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-progress__label strong {\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n\n/* avatar: a person drawn as initials in a circle, alone or beside a name */\n.ds-avatar {\n  display: inline-flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-avatar);\n  height: var(--size-avatar);\n  border-radius: 50%;\n  background: var(--color-fill-3);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  line-height: 1;\n  letter-spacing: 0;\n  text-decoration: none;\n}\n.ds-avatar--2 { background: var(--color-fill-1); }\n.ds-avatar--3 { background: var(--color-fill-4); }\n.ds-person {\n  display: flex;\n  align-items: center;\n  gap: var(--space-3);\n  min-width: 0;\n}\n.ds-person__name {\n  display: block;\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n  line-height: var(--line-heading);\n}\n.ds-person__meta {\n  display: block;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n\n/* voice: what a customer says, the slide of a carousel that shows two and a bit */\n.ds-carousel--peek {\n  margin-top: var(--space-7);\n}\n.ds-carousel--peek .ds-carousel__slide {\n  width: 46%;\n}\n.ds-voice {\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n  gap: var(--space-5);\n  height: 100%;\n  margin: 0;\n  padding: var(--space-6);\n}\n.ds-voice__text {\n  margin: 0;\n  color: inherit;\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-voice .ds-person__name,\n.ds-voice .ds-person__meta {\n  color: inherit;\n}\n.ds-voice .ds-avatar {\n  background: var(--color-surface);\n  color: var(--color-heading);\n}\n/* toggle: a switch with its label, beside the tabs of a pricing or filter row */\n.ds-toggle {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-3);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  cursor: pointer;\n}\n.ds-tabsrow:has(.ds-toggle) {\n  flex-wrap: wrap;\n  align-items: center;\n  gap: var(--space-3) var(--space-5);\n}\n.ds-progress--gap {\n  margin: var(--space-3) 0 var(--space-5);\n}\n@media (max-width: 1000px) {\n  .ds-menu__panel {\n    display: none;\n  }\n  .ds-menu__toggle::after {\n    display: none;\n  }\n}\n@media (max-width: 640px) {\n  .ds-carousel--peek .ds-carousel__slide {\n    width: 88%;\n  }\n  .ds-voice {\n    padding: var(--space-5);\n  }\n}\n\n/* ---- layout: product page of a payments business ---- */\n\n/* nav: a full-width translucent bar at the top of the window; the links\n   stand next to the brand, the actions at the right */\n.ds-nav {\n  position: sticky;\n  top: 0;\n  z-index: 10;\n  border-bottom: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-bar-text) 12%, transparent);\n  background: var(--fill-bar);\n  color: var(--color-bar-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  -webkit-backdrop-filter: blur(var(--backdrop-blur)) saturate(1.5);\n  backdrop-filter: blur(var(--backdrop-blur)) saturate(1.5);\n}\n.ds-nav__inner {\n  display: flex;\n  align-items: stretch;\n  gap: var(--space-7);\n  max-width: var(--size-page);\n  min-height: var(--size-nav);\n  margin: 0 auto;\n  padding: 0 var(--space-5);\n}\n.ds-nav__inner .ds-brand {\n  align-self: center;\n}\n.ds-nav__links {\n  display: flex;\n  flex: 1;\n  gap: var(--space-5);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-nav__links li {\n  display: flex;\n}\n.ds-nav__link {\n  display: flex;\n  align-items: center;\n  border-top: var(--border-width-strong) var(--border-style) transparent;\n  border-bottom: var(--border-width-strong) var(--border-style) transparent;\n  color: inherit;\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  white-space: nowrap;\n  opacity: 0.72;\n  transition: var(--transition);\n}\n.ds-nav__link:hover,\n.ds-nav__link.is-hover {\n  opacity: 1;\n}\n.ds-nav__link.is-current,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__links .ds-nav__link[href=\"#home\"],\n.ds-page:has(#pricing:target) .ds-nav__links .ds-nav__link[href=\"#pricing\"],\n.ds-page:has(#guides:target) .ds-nav__links .ds-nav__link[href=\"#guides\"],\n.ds-page:has(#contact:target) .ds-nav__links .ds-nav__link[href=\"#contact\"] {\n  border-bottom-color: currentColor;\n  opacity: 1;\n}\n.ds-nav__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--space-4);\n}\n\n/* hero: copy at the left, the product on a stage of the accent colour at\n   the right, both on the page */\n.ds-hero {\n  padding: var(--space-8) 0 var(--space-9);\n}\n.ds-hero__inner {\n  display: grid;\n  grid-template-columns: minmax(0, 6fr) minmax(0, 6fr);\n  align-items: center;\n  gap: var(--space-7);\n}\n.ds-hero__copy,\n.ds-steps__list {\n  min-width: 0;\n}\n.ds-hero__kicker {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-5);\n  padding: var(--space-1) var(--space-4) var(--space-1) var(--space-1);\n  border: var(--border-width) var(--border-style) var(--color-border);\n  border-radius: var(--radius-pill);\n  color: var(--color-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n}\n.ds-hero__title {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: clamp(var(--text-h2), 6.4vw, var(--text-display));\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--display-tracking);\n  text-transform: var(--heading-transform);\n  text-wrap: balance;\n}\n.ds-hero__lead {\n  max-width: 40ch;\n  margin: var(--space-5) 0 0;\n  color: var(--color-text);\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n}\n.ds-hero__actions {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  margin-top: var(--space-6);\n}\n.ds-hero__note {\n  margin: var(--space-5) 0 0;\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n}\n.ds-hero__art {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  min-height: var(--size-art);\n  padding: var(--space-7) var(--space-6) var(--space-7) var(--space-8);\n  border-radius: var(--radius-page);\n  background: var(--fill-accent);\n  color: var(--color-accent-text);\n  overflow: hidden;\n}\n.ds-hero__art .ds-terminal {\n  position: absolute;\n  bottom: var(--space-6);\n  left: var(--space-6);\n}\n\n/* mock: a small window of the product, drawn as a panel: a checkout, a\n   payout list. Rows of label and value, fields and one pay bar */\n.ds-mock {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-3);\n  width: var(--size-mock);\n  max-width: 100%;\n  padding: var(--space-5);\n  border-radius: var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  font-size: var(--text-small);\n  text-align: left;\n  box-shadow: var(--shadow-dialog);\n}\n.ds-mock__head {\n  display: flex;\n  align-items: baseline;\n  justify-content: space-between;\n  gap: var(--space-3);\n  color: var(--color-text-muted);\n}\n.ds-mock__figure {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-mock__row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  padding-top: var(--space-3);\n  border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n  color: var(--color-heading);\n  font-weight: var(--weight-bold);\n}\n.ds-mock__row span:first-child {\n  color: var(--color-text);\n  font-weight: var(--weight-body);\n}\n.ds-mock__field {\n  padding: var(--space-2) var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-input-border);\n  border-radius: var(--radius-control);\n  background: var(--fill-input);\n  color: var(--color-input-text);\n  font-family: var(--font-mono);\n}\n.ds-mock__pair {\n  display: grid;\n  grid-template-columns: repeat(2, minmax(0, 1fr));\n  gap: var(--space-2);\n}\n.ds-mock__pay {\n  padding: var(--space-3);\n  border-radius: var(--radius-control);\n  background: var(--fill-button);\n  color: var(--color-button-text);\n  font-family: var(--font-ui);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n  text-align: center;\n  text-transform: var(--ui-transform);\n}\n.ds-mock__pay--quiet {\n  background: var(--color-surface-strong);\n  color: var(--color-heading);\n}\n\n/* terminal: a card reader. The body is the inverse colour, the screen a\n   surface, the keys dots */\n.ds-terminal {\n  display: flex;\n  flex: none;\n  flex-direction: column;\n  gap: var(--space-3);\n  width: var(--size-terminal);\n  padding: var(--space-3);\n  border-radius: var(--radius-panel);\n  background: var(--color-inverse);\n  box-shadow: var(--shadow-dialog);\n  transform: rotate(-6deg);\n  transition: var(--transition);\n}\n.ds-terminal:hover,\n.ds-terminal.is-hover {\n  transform: rotate(0);\n}\n.ds-terminal__screen {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  padding: var(--space-4) var(--space-3);\n  border-radius: calc(var(--radius-panel) / 2);\n  background: var(--color-surface);\n  color: var(--color-text-muted);\n  font-size: var(--text-small);\n  text-align: center;\n}\n.ds-terminal__sum {\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-display);\n  line-height: var(--line-heading);\n}\n.ds-terminal__keys {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-2);\n  padding: var(--space-1) var(--space-3) var(--space-2);\n}\n.ds-terminal__key {\n  height: var(--space-4);\n  border-radius: var(--radius-pill);\n  background: color-mix(in srgb, var(--color-inverse-text) 22%, transparent);\n}\n.ds-terminal__key--go {\n  background: var(--fill-button);\n}\n\n/* steps: the product stays in place at the left while three steps scroll\n   past it at the right */\n.ds-steps {\n  display: grid;\n  grid-template-columns: minmax(0, 6fr) minmax(0, 5fr);\n  align-items: start;\n  gap: var(--space-8);\n}\n.ds-steps__art {\n  position: sticky;\n  top: calc(var(--size-nav) + var(--space-6));\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-height: var(--size-art);\n  padding: var(--space-6);\n  border-radius: var(--radius-page);\n  background: color-mix(in srgb, currentColor 9%, transparent);\n  overflow: hidden;\n}\n.ds-steps__item {\n  padding: var(--space-7) 0;\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, currentColor 20%, transparent);\n}\n.ds-steps__item:first-child {\n  padding-top: 0;\n  border-top: 0;\n}\n.ds-steps__num {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  margin: 0 0 var(--space-4);\n  border: var(--border-width) var(--border-style) currentColor;\n  border-radius: 50%;\n  font-family: var(--font-heading);\n  font-size: var(--text-large);\n  font-weight: var(--weight-heading);\n  line-height: 1;\n}\n.ds-steps__title {\n  margin: 0;\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-steps__text {\n  max-width: 42ch;\n  margin: var(--space-3) 0 0;\n  font-size: var(--text-large);\n  line-height: var(--line-heading);\n  opacity: 0.75;\n}\n\n/* grid: industry tiles, three to a row, on the four fills */\n.ds-grid {\n  display: grid;\n  grid-template-columns: repeat(3, minmax(0, 1fr));\n  gap: var(--space-4);\n}\n.ds-grid__cell {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  min-height: var(--size-tile);\n  padding: var(--space-5);\n  border-radius: var(--radius-panel);\n  background: var(--color-fill-1);\n  color: var(--color-text);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-grid__cell:nth-child(4n + 2) { background: var(--color-fill-2); }\n.ds-grid__cell:nth-child(4n + 3) { background: var(--color-fill-3); }\n.ds-grid__cell:nth-child(4n + 4) { background: var(--color-fill-4); }\n.ds-grid__cell:hover,\n.ds-grid__cell.is-hover {\n  transform: scale(1.015);\n  box-shadow: var(--shadow-control-hover);\n}\n.ds-grid__icon {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-icon);\n  height: var(--size-icon);\n  border-radius: var(--radius-control);\n  background: var(--color-page);\n  color: var(--color-heading);\n}\n.ds-grid__icon svg {\n  width: 50%;\n  height: 50%;\n}\n.ds-grid__title {\n  margin: auto 0 0;\n  padding-top: var(--space-6);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h3);\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-transform: var(--heading-transform);\n}\n.ds-grid__text {\n  margin: var(--space-2) 0 0;\n  font-size: var(--text-ui);\n}\n.ds-grid__more {\n  margin-top: var(--space-3);\n  color: var(--color-link);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-ui);\n}\n.ds-grid__more::after {\n  content: \" \\2192\";\n}\n\n/* stats: the figures parted by hairlines */\n.ds-stat__item {\n  padding-left: var(--space-5);\n  border-left: var(--border-width) var(--border-style) color-mix(in srgb, currentColor 22%, transparent);\n}\n.ds-tone--inverse .ds-stat__label,\n.ds-tone--accent .ds-stat__label {\n  opacity: 0.75;\n}\n\n/* quote: one customer's sentence, large */\n.ds-quote {\n  max-width: 28ch;\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: clamp(var(--text-h3), 3.4vw, var(--text-h2));\n  font-weight: var(--weight-heading);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  text-wrap: balance;\n}\n.ds-quote__by {\n  display: block;\n  margin-top: var(--space-4);\n  color: var(--color-text-muted);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  letter-spacing: 0;\n}\n\n/* call to action: a full-bleed band, the title at the left and the\n   buttons at the right */\n.ds-cta {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-6);\n}\n.ds-cta .ds-section__title {\n  max-width: 16ch;\n}\n\n/* rates: the price cards beside the calculator */\n.ds-rates {\n  display: grid;\n  grid-template-columns: minmax(0, 4fr) minmax(0, 4fr) minmax(0, 5fr);\n  align-items: stretch;\n  gap: var(--space-4);\n}\n.ds-rate {\n  display: flex;\n  flex-direction: column;\n}\n.ds-rate .ds-panel__body {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  align-items: flex-start;\n}\n.ds-rate__figure {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h1);\n  font-weight: var(--weight-display);\n  line-height: var(--line-display);\n  letter-spacing: var(--heading-tracking);\n}\n.ds-rate__per {\n  color: var(--color-text-muted);\n  font-family: var(--font-body);\n  font-size: var(--text-base);\n  font-weight: var(--weight-body);\n  letter-spacing: 0;\n}\n.ds-rate__text {\n  margin: var(--space-3) 0 var(--space-4);\n}\n.ds-rate .ds-points {\n  flex: 1;\n}\n.ds-points {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-2);\n  margin: 0 0 var(--space-5);\n  padding: 0;\n  list-style: none;\n}\n.ds-points__item {\n  display: flex;\n  align-items: baseline;\n  gap: var(--space-2);\n}\n.ds-points__item::before {\n  content: \"\\2713\";\n  color: var(--color-success);\n  font-weight: var(--weight-bold);\n}\n\n/* calculator: static controls on a tile of the strongest surface */\n.ds-calc {\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-4);\n  padding: var(--space-5);\n  border-radius: var(--radius-panel);\n  background: var(--color-surface-strong);\n  color: var(--color-text);\n}\n.ds-calc__label {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n}\n.ds-range {\n  position: relative;\n  height: var(--space-2);\n  border-radius: var(--radius-pill);\n  background: color-mix(in srgb, var(--color-heading) 16%, transparent);\n}\n.ds-range__fill {\n  position: relative;\n  display: block;\n  width: 62%;\n  height: 100%;\n  border-radius: var(--radius-pill);\n  background: var(--fill-button);\n}\n.ds-range__fill::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  right: 0;\n  width: var(--space-5);\n  height: var(--space-5);\n  border: var(--border-width-strong) var(--border-style) var(--color-button);\n  border-radius: 50%;\n  background: var(--color-surface);\n  transform: translate(50%, -50%);\n}\n.ds-range__fill--low { width: 28%; }\n.ds-chips {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-2);\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n.ds-chip {\n  display: inline-block;\n  padding: var(--space-1) var(--space-4);\n  border: var(--border-width) var(--border-style) var(--color-border-strong);\n  border-radius: var(--radius-pill);\n  color: var(--color-heading);\n  font-family: var(--font-ui);\n  font-size: var(--text-small);\n  font-weight: var(--weight-ui);\n  text-transform: var(--ui-transform);\n  text-decoration: none;\n  transition: var(--transition);\n}\n.ds-chip:hover,\n.ds-chip.is-hover {\n  border-color: var(--color-heading);\n}\n.ds-chip.is-current {\n  border-color: transparent;\n  background: var(--fill-button);\n  color: var(--color-button-text);\n}\n.ds-calc__out {\n  margin-top: auto;\n  padding-top: var(--space-4);\n  border-top: var(--border-width) var(--border-style) color-mix(in srgb, var(--color-heading) 18%, transparent);\n}\n.ds-calc__sum {\n  margin: 0;\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-h2);\n  font-weight: var(--weight-display);\n  line-height: var(--line-heading);\n  letter-spacing: var(--heading-tracking);\n  font-variant-numeric: tabular-nums;\n}\n.ds-calc__note {\n  margin: 0;\n  font-size: var(--text-small);\n}\n.ds-tabsrow {\n  display: flex;\n  flex-wrap: wrap;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--space-3);\n  margin-bottom: var(--space-5);\n}\n\n/* steps as a list: numbered rows */\n.ds-list--steps {\n  counter-reset: ds-step;\n}\n.ds-list--steps .ds-list__item {\n  position: relative;\n  padding-left: var(--space-7);\n  counter-increment: ds-step;\n}\n.ds-list--steps .ds-list__item::before {\n  content: counter(ds-step);\n  position: absolute;\n  left: 0;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--space-6);\n  height: var(--space-6);\n  border-radius: var(--radius-control);\n  background: var(--color-fill-1);\n  color: var(--color-heading);\n  font-family: var(--font-heading);\n  font-size: var(--text-ui);\n  font-weight: var(--weight-heading);\n}\n\n@media (max-width: 900px) {\n  .ds-nav__inner {\n    gap: var(--space-5);\n  }\n  .ds-nav__links {\n    gap: var(--space-4);\n    overflow-x: auto;\n  }\n  .ds-hero {\n    padding: var(--space-7) 0 var(--space-8);\n  }\n  .ds-hero__inner,\n  .ds-steps {\n    grid-template-columns: minmax(0, 1fr);\n    gap: var(--space-6);\n  }\n  .ds-steps__art {\n    position: static;\n    min-height: 0;\n  }\n  .ds-grid {\n    grid-template-columns: repeat(2, minmax(0, 1fr));\n  }\n  .ds-rates {\n    grid-template-columns: minmax(0, 1fr);\n  }\n}\n@media (max-width: 640px) {\n  .ds-nav__inner {\n    flex-wrap: wrap;\n    justify-content: space-between;\n    gap: 0 var(--space-3);\n    padding: var(--space-2) var(--space-4) 0;\n  }\n  .ds-nav__links {\n    order: 3;\n    flex: none;\n    width: 100%;\n    min-height: var(--size-control);\n  }\n  .ds-nav__signin {\n    display: none;\n  }\n  .ds-hero__art {\n    flex-direction: column;\n    align-items: center;\n    gap: var(--space-4);\n    min-height: 0;\n    padding: var(--space-5) var(--space-4);\n  }\n  .ds-hero__art .ds-terminal {\n    position: static;\n    order: 2;\n  }\n  .ds-hero__title,\n  .ds-stat__figure {\n    letter-spacing: var(--heading-tracking);\n  }\n  .ds-grid {\n    grid-template-columns: minmax(0, 1fr);\n  }\n  .ds-grid__cell {\n    min-height: 0;\n  }\n  .ds-grid__title {\n    padding-top: var(--space-4);\n  }\n  .ds-steps__art {\n    padding: var(--space-4);\n  }\n  .ds-steps__item {\n    padding: var(--space-5) 0;\n  }\n  .ds-stat__item {\n    padding: var(--space-4) 0 0;\n    border-top: var(--border-width) var(--border-style) color-mix(in srgb, currentColor 22%, transparent);\n    border-left: 0;\n  }\n}\n\n/* phone: a tooltip takes the width of its paragraph, so it never leaves the window */\n@media (max-width: 640px) {\n  .ds-page :has(> .ds-tooltip) {\n    position: relative;\n  }\n  .ds-tooltip {\n    position: static;\n  }\n  .ds-tooltip__tip {\n    right: 0;\n    left: 0;\n    width: auto;\n    max-width: none;\n    transform: translateY(var(--space-1));\n  }\n  .ds-tooltip:hover .ds-tooltip__tip,\n  .ds-tooltip:focus .ds-tooltip__tip,\n  .ds-tooltip:focus-within .ds-tooltip__tip,\n  .ds-tooltip.is-open .ds-tooltip__tip {\n    transform: none;\n  }\n}\n\n/* phone navigation: the brand, the call to action and a three-line button in\n   the bar; the button opens a sheet across the window that lists every view */\n.ds-nav__fold {\n  position: static;\n  display: none;\n}\n.ds-nav__toggle::-webkit-details-marker {\n  display: none;\n}\n.ds-nav__toggle:focus-visible {\n  outline: var(--focus-ring);\n}\n.ds-nav__sheet {\n  position: absolute;\n  top: 100%;\n  right: 0;\n  left: 0;\n  z-index: 20;\n  display: flex;\n  flex-direction: column;\n  gap: var(--space-1);\n  margin: 0;\n  padding: var(--space-3);\n  border: var(--border-width) var(--border-style) var(--color-border-muted);\n  border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n  background: var(--fill-panel);\n  color: var(--color-text);\n  font-family: var(--font-body);\n  font-size: var(--text-ui);\n  list-style: none;\n  box-shadow: var(--shadow-dialog);\n}\n.ds-nav__sheet .ds-menu__link {\n  padding: var(--space-3) var(--space-4);\n  border-radius: calc(var(--radius-panel) / 2.5);\n}\n.ds-nav__sheet .ds-menu__link:hover,\n.ds-page:not(:has(.ds-view:target)) .ds-nav__sheet .ds-menu__link:not(.ds-menu__link--aside)[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__sheet .ds-menu__link:not(.ds-menu__link--aside)[href=\"#home\"],\n.ds-page:has(#pricing:target) .ds-nav__sheet .ds-menu__link:not(.ds-menu__link--aside)[href=\"#pricing\"],\n.ds-page:has(#guides:target) .ds-nav__sheet .ds-menu__link:not(.ds-menu__link--aside)[href=\"#guides\"],\n.ds-page:has(#contact:target) .ds-nav__sheet .ds-menu__link:not(.ds-menu__link--aside)[href=\"#contact\"] {\n  background: var(--color-surface-alt);\n  color: var(--color-heading);\n}\n.ds-nav__sheet .ds-menu__link--aside {\n  color: var(--color-text-muted);\n  font-weight: var(--weight-body);\n}\n.ds-nav__toggle {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--size-control);\n  height: var(--size-control);\n  border-radius: var(--radius-control);\n  color: inherit;\n  list-style: none;\n  cursor: pointer;\n  transition: var(--transition);\n}\n.ds-nav__toggle:hover,\n.ds-nav__fold[open] .ds-nav__toggle {\n  background: color-mix(in srgb, var(--color-bar-text) 12%, transparent);\n}\n.ds-nav__bars {\n  display: block;\n  width: var(--space-5);\n  height: var(--space-4);\n  border-top: var(--border-width-strong) var(--border-style) currentColor;\n  border-bottom: var(--border-width-strong) var(--border-style) currentColor;\n}\n.ds-nav__bars::before {\n  content: \"\";\n  display: block;\n  margin-top: calc((var(--space-4) - 3 * var(--border-width-strong)) / 2);\n  border-top: var(--border-width-strong) var(--border-style) currentColor;\n}\n@media (max-width: 640px) {\n  .ds-nav__inner {\n    padding-bottom: var(--space-2);\n  }\n  .ds-nav__links {\n    display: none;\n  }\n  .ds-nav__fold {\n    display: block;\n  }\n}\n\n/* the open sheet is closed from the same button: its three lines become a cross */\n.ds-nav__fold[open] .ds-nav__bars {\n  position: relative;\n  border-color: transparent;\n}\n.ds-nav__fold[open] .ds-nav__bars::before {\n  transform: rotate(45deg);\n}\n.ds-nav__fold[open] .ds-nav__bars::after {\n  content: \"\";\n  position: absolute;\n  top: 50%;\n  right: 0;\n  left: 0;\n  margin-top: calc(var(--border-width-strong) / -2);\n  border-top: var(--border-width-strong) var(--border-style) currentColor;\n  transform: rotate(-45deg);\n}\n",
    "specimen.html": "<!doctype html>\n<html lang=\"en\">\n<head>\n<meta charset=\"utf-8\">\n<meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n<title>chronoskin: modern payments product page specimen</title>\n<link rel=\"stylesheet\" href=\"tokens.css\">\n<link rel=\"stylesheet\" href=\"components.css\">\n</head>\n<body class=\"ds-page\" data-component=\"shell\">\n\n<header class=\"ds-nav\" data-component=\"nav\">\n  <div class=\"ds-nav__inner\">\n    <a class=\"ds-brand\" data-component=\"brand\" href=\"#home\">\n      <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 0 1 9-9h9v9a9 9 0 0 1-18 0z\"/></svg></span>\n      <span class=\"ds-brand__name\">chronoskin</span>\n    </a>\n    <ul class=\"ds-nav__links\">\n      <li class=\"ds-menu\" data-component=\"menu\">\n        <a class=\"ds-nav__link ds-menu__toggle\" href=\"#home\">Payments</a>\n        <div class=\"ds-menu__panel\">\n          <div>\n            <p class=\"ds-menu__title\">Products</p>\n            <ul class=\"ds-menu__list\">\n              <li><a class=\"ds-menu__link\" href=\"#guides\">Checkout<small>A page we host</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#pricing\">Readers<small>For the counter</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#guides\">Invoices<small>Sent and chased</small></a></li>\n            </ul>\n          </div>\n          <div>\n            <p class=\"ds-menu__title\">Made for</p>\n            <ul class=\"ds-menu__list\">\n              <li><a class=\"ds-menu__link\" href=\"#home\">Retail<small>Tills and web shop</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#home\">Subscriptions<small>Monthly and yearly</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#home\">Marketplaces<small>Split and pay out</small></a></li>\n            </ul>\n          </div>\n          <div>\n            <p class=\"ds-menu__title\">Build</p>\n            <ul class=\"ds-menu__list\">\n              <li><a class=\"ds-menu__link\" href=\"#guides\">Guides<small>First payment in ten minutes</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#guides\">Test cards<small>Try without money</small></a></li>\n              <li><a class=\"ds-menu__link\" href=\"#pricing\">Pricing<small>One rate per payment</small></a></li>\n            </ul>\n          </div>\n        </div>\n      </li>\n      <li><a class=\"ds-nav__link\" href=\"#pricing\">Pricing</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#guides\">Guides</a></li>\n      <li><a class=\"ds-nav__link\" href=\"#contact\">Contact sales</a></li>\n    </ul>\n    <div class=\"ds-nav__actions\">\n      <a class=\"ds-nav__link ds-nav__signin\" href=\"#guides\">Sign in</a>\n      <a class=\"ds-button ds-button--small\" href=\"#contact\">Start now</a>\n      <details class=\"ds-menu ds-menu--end ds-nav__fold\">\n        <summary class=\"ds-nav__toggle\" aria-label=\"Menu\"><span class=\"ds-nav__bars\"></span></summary>\n        <ul class=\"ds-nav__sheet\">\n          <li><a class=\"ds-menu__link\" href=\"#home\">Payments</a></li>\n          <li><a class=\"ds-menu__link\" href=\"#pricing\">Pricing</a></li>\n          <li><a class=\"ds-menu__link\" href=\"#guides\">Guides</a></li>\n          <li><a class=\"ds-menu__link\" href=\"#contact\">Contact sales</a></li>\n          <li><a class=\"ds-menu__link ds-menu__link--aside\" href=\"#guides\">Sign in</a></li>\n        </ul>\n      </details>\n    </div>\n  </div>\n</header>\n\n<section class=\"ds-view ds-view--home\" id=\"home\">\n  <div class=\"ds-hero\" data-component=\"hero\">\n    <div class=\"ds-wrap ds-hero__inner\">\n      <div class=\"ds-hero__copy\">\n        <a class=\"ds-hero__kicker\" href=\"#pricing\"><span class=\"ds-badge\">New</span> Payouts in one working day</a>\n        <h1 class=\"ds-hero__title\">Get paid, wherever you sell.</h1>\n        <p class=\"ds-hero__lead\">One account for the checkout on your site, the reader on your counter and the invoice in between.</p>\n        <div class=\"ds-hero__actions\">\n          <a class=\"ds-button\" href=\"#contact\">Start now</a>\n          <a class=\"ds-button ds-button--secondary\" href=\"#pricing\">See pricing</a>\n        </div>\n        <p class=\"ds-hero__note\">No set-up fee. No monthly fee on the standard plan.</p>\n      </div>\n      <div class=\"ds-hero__art\" aria-hidden=\"true\">\n        <span class=\"ds-glow\"></span>\n        <div class=\"ds-mock\">\n          <div class=\"ds-mock__head\"><span>Pay Harbour Coffee</span><span>Order 1042</span></div>\n          <p class=\"ds-mock__figure\">48.00</p>\n          <div class=\"ds-mock__field\">mara@okafor.example</div>\n          <div class=\"ds-mock__field\">4242 4242 4242 4242</div>\n          <div class=\"ds-mock__pair\"><div class=\"ds-mock__field\">09 / 28</div><div class=\"ds-mock__field\">&bull;&bull;&bull;</div></div>\n          <div class=\"ds-mock__pay\">Pay 48.00</div>\n          <div class=\"ds-mock__pair\"><div class=\"ds-mock__pay ds-mock__pay--quiet\">Wallet</div><div class=\"ds-mock__pay ds-mock__pay--quiet\">Bank</div></div>\n        </div>\n        <div class=\"ds-terminal\">\n          <div class=\"ds-terminal__screen\"><span>Tap, insert or swipe</span><span class=\"ds-terminal__sum\">12.40</span></div>\n          <div class=\"ds-terminal__keys\"><span class=\"ds-terminal__key\"></span><span class=\"ds-terminal__key\"></span><span class=\"ds-terminal__key\"></span><span class=\"ds-terminal__key\"></span><span class=\"ds-terminal__key\"></span><span class=\"ds-terminal__key\"></span><span class=\"ds-terminal__key\"></span><span class=\"ds-terminal__key\"></span><span class=\"ds-terminal__key ds-terminal__key--go\"></span></div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-marquee\" aria-label=\"Businesses that take payments with chronoskin\">\n    <ul class=\"ds-marquee__track\">\n      <li class=\"ds-marquee__name\">Harbour Coffee</li><li class=\"ds-marquee__name\">Tern Cycles</li><li class=\"ds-marquee__name\">Northline Rail</li><li class=\"ds-marquee__name\">Fieldnote Books</li><li class=\"ds-marquee__name\">Marrow Market</li><li class=\"ds-marquee__name\">Lindqvist Studio</li><li class=\"ds-marquee__name\">Orchard Pharmacy</li><li class=\"ds-marquee__name\" aria-hidden=\"true\">Harbour Coffee</li><li class=\"ds-marquee__name\" aria-hidden=\"true\">Tern Cycles</li><li class=\"ds-marquee__name\" aria-hidden=\"true\">Northline Rail</li><li class=\"ds-marquee__name\" aria-hidden=\"true\">Fieldnote Books</li><li class=\"ds-marquee__name\" aria-hidden=\"true\">Marrow Market</li><li class=\"ds-marquee__name\" aria-hidden=\"true\">Lindqvist Studio</li><li class=\"ds-marquee__name\" aria-hidden=\"true\">Orchard Pharmacy</li>\n    </ul>\n  </div>\n\n  <div class=\"ds-section\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head ds-section__head--left ds-reveal\">\n        <p class=\"ds-section__kicker\">Made for your trade</p>\n        <h2 class=\"ds-section__title\">One platform, six ways to sell.</h2>\n      </div>\n      <div class=\"ds-grid\" data-component=\"grid\">\n        <a class=\"ds-grid__cell ds-reveal\" href=\"#guides\">\n          <span class=\"ds-grid__icon\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M3 8h14l-1 9H4z M7 8a3 3 0 0 1 6 0\"/></svg></span>\n          <h3 class=\"ds-grid__title\">Retail</h3>\n          <p class=\"ds-grid__text\">Tills, readers and the web shop on one balance.</p>\n          <span class=\"ds-grid__more\">Learn more</span>\n        </a>\n        <a class=\"ds-grid__cell ds-reveal ds-reveal--2\" href=\"#guides\">\n          <span class=\"ds-grid__icon\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M4 4h12v13H4z M7 8h6 M7 12h4\"/></svg></span>\n          <h3 class=\"ds-grid__title\">Subscriptions</h3>\n          <p class=\"ds-grid__text\">Bill monthly, yearly or by use, and retry failed cards.</p>\n          <span class=\"ds-grid__more\">Learn more</span>\n        </a>\n        <a class=\"ds-grid__cell ds-reveal ds-reveal--3\" href=\"#guides\">\n          <span class=\"ds-grid__icon\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M3 10h14 M10 3v14 M5 5l10 10\"/></svg></span>\n          <h3 class=\"ds-grid__title\">Marketplaces</h3>\n          <p class=\"ds-grid__text\">Split a payment between sellers and pay each out.</p>\n          <span class=\"ds-grid__more\">Learn more</span>\n        </a>\n        <a class=\"ds-grid__cell ds-reveal\" href=\"#guides\">\n          <span class=\"ds-grid__icon\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M4 16V8l6-4 6 4v8z M8 16v-4h4v4\"/></svg></span>\n          <h3 class=\"ds-grid__title\">Hospitality</h3>\n          <p class=\"ds-grid__text\">Pay at the table, tips included, tabs kept open.</p>\n          <span class=\"ds-grid__more\">Learn more</span>\n        </a>\n        <a class=\"ds-grid__cell ds-reveal ds-reveal--2\" href=\"#guides\">\n          <span class=\"ds-grid__icon\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M3 14l4-5 3 3 6-8\"/></svg></span>\n          <h3 class=\"ds-grid__title\">Software platforms</h3>\n          <p class=\"ds-grid__text\">Add payments to your product with one integration.</p>\n          <span class=\"ds-grid__more\">Learn more</span>\n        </a>\n        <a class=\"ds-grid__cell ds-reveal ds-reveal--3\" href=\"#guides\">\n          <span class=\"ds-grid__icon\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M10 3l6 3v4c0 4-3 6-6 7-3-1-6-3-6-7V6z\"/></svg></span>\n          <h3 class=\"ds-grid__title\">Charities</h3>\n          <p class=\"ds-grid__text\">Take one-off and regular gifts at a lower rate.</p>\n          <span class=\"ds-grid__more\">Learn more</span>\n        </a>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-tone--inverse\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head ds-section__head--left ds-reveal\">\n        <p class=\"ds-section__kicker\">How it works</p>\n        <h2 class=\"ds-section__title\">From first sale to your bank in three steps.</h2>\n      </div>\n      <div class=\"ds-steps\">\n        <div class=\"ds-steps__art ds-reveal ds-reveal--zoom\" aria-hidden=\"true\">\n          <div class=\"ds-mock\">\n            <div class=\"ds-mock__head\"><span>Next payout</span><span>Tomorrow</span></div>\n            <p class=\"ds-mock__figure\">3,912.40</p>\n            <div class=\"ds-mock__row\"><span>Web shop</span><span>2,204.10</span></div>\n            <div class=\"ds-mock__row\"><span>Counter reader</span><span>1,488.30</span></div>\n            <div class=\"ds-mock__row\"><span>Invoices</span><span>290.00</span></div>\n            <div class=\"ds-mock__row\"><span>Fees</span><span>-70.00</span></div>\n            <div class=\"ds-mock__pay ds-mock__pay--quiet\">See all payouts</div>\n          </div>\n        </div>\n        <div class=\"ds-steps__list\">\n          <div class=\"ds-steps__item ds-reveal\">\n            <p class=\"ds-steps__num\">1</p>\n            <h3 class=\"ds-steps__title\">Add the checkout</h3>\n            <p class=\"ds-steps__text\">Paste one snippet into your site, or order a reader for the counter. Both are live the same day.</p>\n          </div>\n          <div class=\"ds-steps__item ds-reveal\">\n            <p class=\"ds-steps__num\">2</p>\n            <h3 class=\"ds-steps__title\">Take the payment</h3>\n            <p class=\"ds-steps__text\">Cards, wallets and bank transfers in 135 currencies, checked for fraud before they reach you.</p>\n          </div>\n          <div class=\"ds-steps__item ds-reveal\">\n            <p class=\"ds-steps__num\">3</p>\n            <h3 class=\"ds-steps__title\">See it in your bank</h3>\n            <p class=\"ds-steps__text\">Every sale lands in one balance and is paid out on the next working day, with a line for each fee.</p>\n            <div class=\"ds-buttonrow\">\n              <a class=\"ds-button ds-button--inverse\" href=\"#guides\">Read the guide</a>\n              <a class=\"ds-button ds-button--ghost\" href=\"#pricing\">What it costs</a>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section\">\n    <div class=\"ds-wrap\">\n      <div class=\"ds-section__head ds-section__head--left ds-reveal\">\n        <p class=\"ds-section__kicker\">In numbers</p>\n        <h2 class=\"ds-section__title\">Built to stay up.</h2>\n      </div>\n      <div class=\"ds-stat\" data-component=\"stats\">\n        <div class=\"ds-stat__item ds-reveal\"><p class=\"ds-stat__figure\">99.99%</p><p class=\"ds-stat__label\">of the time the checkout has answered since 2021</p></div>\n        <div class=\"ds-stat__item ds-reveal ds-reveal--2\"><p class=\"ds-stat__figure\">135</p><p class=\"ds-stat__label\">currencies your customers can pay in</p></div>\n        <div class=\"ds-stat__item ds-reveal ds-reveal--3\"><p class=\"ds-stat__figure\">1 day</p><p class=\"ds-stat__label\">from a sale to the money in your bank</p></div>\n      </div>\n<div class=\"ds-carousel ds-carousel--peek\" data-component=\"carousel\">\n<ul class=\"ds-carousel__track\">\n<li class=\"ds-carousel__slide\"><figure class=\"ds-voice\"><blockquote class=\"ds-voice__text\">We moved nine shops in a weekend and closed the books a day earlier.</blockquote><figcaption><div class=\"ds-person\"><span class=\"ds-avatar\" data-component=\"avatar\">IV</span><span><span class=\"ds-person__name\">Ines Varga</span><span class=\"ds-person__meta\">Head of finance, coffee roaster</span></span></div></figcaption></figure></li>\n<li class=\"ds-carousel__slide\"><figure class=\"ds-voice\"><blockquote class=\"ds-voice__text\">The reader arrived on Tuesday and took its first card before lunch.</blockquote><figcaption><div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--2\" data-component=\"avatar\">TB</span><span><span class=\"ds-person__name\">Tomas Brandt</span><span class=\"ds-person__meta\">Owner, cycle shop</span></span></div></figcaption></figure></li>\n<li class=\"ds-carousel__slide\"><figure class=\"ds-voice\"><blockquote class=\"ds-voice__text\">Regular gifts now retry themselves. We stopped writing reminder letters.</blockquote><figcaption><div class=\"ds-person\"><span class=\"ds-avatar ds-avatar--3\" data-component=\"avatar\">RW</span><span><span class=\"ds-person__name\">Rin Watanabe</span><span class=\"ds-person__meta\">Treasurer, a charity</span></span></div></figcaption></figure></li>\n</ul>\n<div class=\"ds-carousel__bar\">\n<div class=\"ds-carousel__dots\" aria-hidden=\"true\"><span class=\"ds-carousel__dot is-current\"></span><span class=\"ds-carousel__dot\"></span><span class=\"ds-carousel__dot\"></span></div>\n<p class=\"ds-carousel__hint\">Swipe for more</p>\n</div>\n</div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--tight ds-tone--accent\">\n    <div class=\"ds-wrap ds-cta ds-reveal\">\n      <h2 class=\"ds-section__title\">Ready when your first customer is.</h2>\n      <div class=\"ds-buttonrow\">\n        <a class=\"ds-button ds-button--onaccent\" href=\"#contact\">Start now</a>\n        <a class=\"ds-button ds-button--ghost\" href=\"#contact\">Talk to sales</a>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"pricing\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-page-header\" data-component=\"page-header\">\n      <div class=\"ds-page-header__main\">\n        <ol class=\"ds-breadcrumb\" data-component=\"breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">chronoskin</a></li>\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">Payments</a></li>\n          <li class=\"ds-breadcrumb__current\">Pricing</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Pay only when you are paid.</h1>\n        <p class=\"ds-page-header__text\">One rate per payment. Nothing to set up, nothing each month.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button\" href=\"#contact\">Start now</a>\n      </div>\n    </div>\n\n    <div class=\"ds-tabsrow\">\n      <ul class=\"ds-tabs\" data-component=\"tabs\">\n        <li><a class=\"ds-tabs__tab is-current\" href=\"#pricing\">Online</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#pricing\">In person</a></li>\n        <li><a class=\"ds-tabs__tab\" href=\"#pricing\">Platforms</a></li>\n      </ul>\n      <label class=\"ds-toggle\"><input class=\"ds-switch\" type=\"checkbox\" data-component=\"switch\"> Show fees with tax</label>\n      <a class=\"ds-link ds-link--more\" href=\"#guides\">How fees are worked out</a>\n    </div>\n\n    <div class=\"ds-rates\">\n      <div class=\"ds-panel ds-rate\" data-component=\"panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Standard</h2><span class=\"ds-badge\">No contract</span></div>\n        <div class=\"ds-panel__body\">\n          <p class=\"ds-rate__figure\">1.4% <span class=\"ds-rate__per\">+ 0.25 a payment</span></p>\n          <p class=\"ds-rate__text\">For cards issued in your own country.</p>\n          <ul class=\"ds-points\">\n            <li class=\"ds-points__item\">Checkout, links and invoices</li>\n            <li class=\"ds-points__item\">Payout on the next working day</li>\n            <li class=\"ds-points__item\">Fraud checks included</li>\n          </ul>\n          <a class=\"ds-button ds-button--wide\" href=\"#contact\">Start now</a>\n        </div>\n      </div>\n      <div class=\"ds-panel ds-rate\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Custom</h2><span class=\"ds-badge ds-badge--alt\">From 80,000 a month</span></div>\n        <div class=\"ds-panel__body\">\n          <p class=\"ds-rate__figure\">Ask us</p>\n          <p class=\"ds-rate__text\">A rate built on what you sell and where.</p>\n          <ul class=\"ds-points\">\n            <li class=\"ds-points__item\">Volume discounts</li>\n            <li class=\"ds-points__item\">Rates by country and card</li>\n            <li class=\"ds-points__item\">A named account manager</li>\n          </ul>\n          <a class=\"ds-button ds-button--secondary ds-button--wide\" href=\"#contact\">Contact sales</a>\n        </div>\n      </div>\n      <div class=\"ds-calc\">\n        <p class=\"ds-calc__label\"><span>Sales a month</span><span>25,000</span></p>\n        <div class=\"ds-range\"><span class=\"ds-range__fill\"></span></div>\n        <p class=\"ds-calc__label\"><span>Average payment</span><span>40.00</span></p>\n        <div class=\"ds-range\"><span class=\"ds-range__fill ds-range__fill--low\"></span></div>\n        <p class=\"ds-calc__label\"><span>Cards from</span></p>\n        <ul class=\"ds-chips\">\n          <li><a class=\"ds-chip is-current\" href=\"#pricing\">Home</a></li>\n          <li><a class=\"ds-chip\" href=\"#pricing\">Europe</a></li>\n          <li><a class=\"ds-chip\" href=\"#pricing\">Worldwide</a></li>\n        </ul>\n        <div class=\"ds-calc__out\">\n          <p class=\"ds-calc__note\">You keep, each month</p>\n          <p class=\"ds-calc__sum\">24,493.75</p>\n          <p class=\"ds-calc__note\">after 506.25 in fees on 625 payments</p>\n        </div>\n      </div>\n    </div>\n  </div>\n\n  <div class=\"ds-section ds-section--tight\">\n    <div class=\"ds-wrap ds-cols\">\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Every fee, on one page</h2></div>\n          <div class=\"ds-panel__body\">\n            <div class=\"ds-table__wrap\">\n              <table class=\"ds-table\" data-component=\"table\">\n                <thead>\n                  <tr><th>Payment</th><th class=\"ds-table__num\">Rate</th><th class=\"ds-table__num\">Fixed</th><th>Payout</th></tr>\n                </thead>\n                <tbody>\n                  <tr><td>Home cards</td><td class=\"ds-table__num\">1.4%</td><td class=\"ds-table__num\">0.25</td><td><span class=\"ds-badge ds-badge--success\">Next day</span></td></tr>\n                  <tr><td>European cards</td><td class=\"ds-table__num\">1.9%</td><td class=\"ds-table__num\">0.25</td><td><span class=\"ds-badge ds-badge--success\">Next day</span></td></tr>\n                  <tr><td>Other cards</td><td class=\"ds-table__num\">2.9%</td><td class=\"ds-table__num\">0.25</td><td><span class=\"ds-badge ds-badge--warning\">3 days</span></td></tr>\n                  <tr><td>Bank transfer</td><td class=\"ds-table__num\">0.8%</td><td class=\"ds-table__num\">0.00</td><td><span class=\"ds-badge ds-badge--warning\">3 days</span></td></tr>\n                  <tr><td>Disputed payment</td><td class=\"ds-table__num\">0%</td><td class=\"ds-table__num\">15.00</td><td><span class=\"ds-badge ds-badge--danger\">Held</span></td></tr>\n                </tbody>\n              </table>\n            </div>\n          </div>\n        </div>\n        <p class=\"ds-notice\">Rates exclude tax. The dispute fee is returned when the dispute is decided for you.</p>\n        <div class=\"ds-badgerow\" data-component=\"badge\">\n          <span class=\"ds-badge\">No contract</span>\n          <span class=\"ds-badge ds-badge--alt\">From 80,000 a month</span>\n          <span class=\"ds-badge ds-badge--quiet\">Per payment</span>\n          <span class=\"ds-badge ds-badge--success\">Next day</span>\n          <span class=\"ds-badge ds-badge--warning\">3 days</span>\n          <span class=\"ds-badge ds-badge--danger\">Held</span>\n        </div>\n      </div>\n      <div class=\"ds-panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Asked before signing up</h2></div>\n        <div class=\"ds-panel__body\">\n          <div class=\"ds-accordion\" data-component=\"accordion\">\n<details class=\"ds-accordion__item\" open>\n<summary class=\"ds-accordion__head\">Is there a minimum?</summary>\n<div class=\"ds-accordion__body\"><p>No. One payment a year costs one fee.</p></div>\n</details>\n<details class=\"ds-accordion__item\">\n<summary class=\"ds-accordion__head\">What does a refund cost?</summary>\n<div class=\"ds-accordion__body\"><p>Nothing. The rate is returned, the <span class=\"ds-tooltip\" tabindex=\"0\" data-component=\"tooltip\">fixed part<span class=\"ds-tooltip__tip\" role=\"tooltip\">The 0.25 charged on each payment, whatever its size.</span></span> is not.</p></div>\n</details>\n<details class=\"ds-accordion__item\">\n<summary class=\"ds-accordion__head\">How much is a reader?</summary>\n<div class=\"ds-accordion__body\"><p>49 once, or free on the custom plan.</p></div>\n</details>\n</div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"guides\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">chronoskin</a></li>\n          <li><a class=\"ds-breadcrumb__item\" href=\"#guides\">Guides</a></li>\n          <li class=\"ds-breadcrumb__current\">Online payments</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Take your first payment.</h1>\n        <p class=\"ds-page-header__text\">Short guides for the person who sets things up. Most take ten minutes.</p>\n      </div>\n      <div class=\"ds-page-header__actions\">\n        <a class=\"ds-button ds-button--secondary\" href=\"#contact\">Ask an engineer</a>\n      </div>\n    </div>\n    <div class=\"ds-cols ds-cols--side\">\n      <div class=\"ds-stack\">\n        <nav class=\"ds-sidebar\" data-component=\"sidebar\">\n          <h2 class=\"ds-sidebar__title\">Guides</h2>\n          <ul class=\"ds-sidebar__list\">\n            <li><a class=\"ds-sidebar__item\" href=\"#guides\">Getting started <span class=\"ds-sidebar__count\">6</span></a></li>\n            <li><a class=\"ds-sidebar__item is-current\" href=\"#guides\">Online payments <span class=\"ds-sidebar__count\">14</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#guides\">Readers <span class=\"ds-sidebar__count\">9</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#guides\">Invoices <span class=\"ds-sidebar__count\">5</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#guides\">Payouts <span class=\"ds-sidebar__count\">8</span></a></li>\n            <li><a class=\"ds-sidebar__item\" href=\"#guides\">Disputes <span class=\"ds-sidebar__count\">4</span></a></li>\n          </ul>\n        </nav>\n        <div class=\"ds-empty\" data-component=\"empty\">\n          <span class=\"ds-empty__icon\"><svg viewBox=\"0 0 20 20\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" aria-hidden=\"true\"><path d=\"M7 10a3 3 0 1 1 3 3v0h7 M14 13v3\"/></svg></span>\n          <h2 class=\"ds-empty__title\">No test keys yet</h2>\n          <p class=\"ds-empty__text\">Keys you create for trying things out appear here.</p>\n          <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#contact\">Create a test key</a>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__body\">\n            <p class=\"ds-progress__label\"><strong>Guide 3 of 14</strong><span>About 4 minutes left</span></p>\n<span class=\"ds-progress ds-progress--gap\" data-component=\"progress\"><span class=\"ds-progress__bar ds-progress__bar--20\"></span></span>\n            <article class=\"ds-prose\" data-component=\"typography\">\n              <h1>Add the checkout to your site</h1>\n              <p class=\"ds-prose__lead\">The checkout is a page we host. You send the customer there with an amount, and we send them back when they have paid.</p>\n              <h2>Create a payment</h2>\n              <p>Call <code>POST /payments</code> with the <strong>amount</strong>, the currency and the address to return to. The answer holds a <code>checkout_url</code>.</p>\n              <h3>Before you go live</h3>\n              <ul>\n                <li>Swap the test key for the live key; they differ only in their first letters.</li>\n                <li>Pay once with a real card and refund it from the dashboard.</li>\n                <li>Tell us where to send the payout, or it waits in your balance.</li>\n              </ul>\n              <p>A payment that is not finished within an hour expires, and the customer can simply start again.</p>\n            </article>\n          </div>\n          <div class=\"ds-table__foot\">\n            <span>Guide 3 of 14 in Online payments</span>\n            <ul class=\"ds-pagination\" data-component=\"pagination\">\n              <li><a class=\"ds-pagination__link\" href=\"#guides\">Previous</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#guides\">2</a></li>\n              <li><a class=\"ds-pagination__link is-current\" href=\"#guides\">3</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#guides\">4</a></li>\n              <li><a class=\"ds-pagination__link\" href=\"#guides\">Next</a></li>\n            </ul>\n          </div>\n        </div>\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">Read next</h2></div>\n          <div class=\"ds-panel__body\">\n            <ul class=\"ds-linkrow\" data-component=\"links\">\n              <li><a class=\"ds-link\" href=\"#guides\">Send a payment link</a></li>\n              <li><a class=\"ds-link is-visited\" href=\"#guides\">Test cards</a></li>\n              <li><a class=\"ds-link is-hover\" href=\"#guides\">Refund a payment</a></li>\n              <li><a class=\"ds-link is-active\" href=\"#pricing\">What each payment costs</a></li>\n            </ul>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</section>\n\n<section class=\"ds-view\" id=\"contact\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-page-header\">\n      <div class=\"ds-page-header__main\">\n        <ol class=\"ds-breadcrumb\">\n          <li><a class=\"ds-breadcrumb__item\" href=\"#home\">chronoskin</a></li>\n          <li class=\"ds-breadcrumb__current\">Contact sales</li>\n        </ol>\n        <h1 class=\"ds-page-header__title\">Tell us what you sell.</h1>\n        <p class=\"ds-page-header__text\">A person who knows your trade answers within one working day.</p>\n      </div>\n    </div>\n    <div class=\"ds-cols\">\n      <div class=\"ds-panel\">\n        <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">About your business</h2></div>\n        <div class=\"ds-panel__body\">\n          <form class=\"ds-form\" data-component=\"form\" action=\"#contact\">\n            <div class=\"ds-noticerow\" data-component=\"notice\">\n              <p class=\"ds-notice\"><span class=\"ds-notice__title\">Selling under 80,000 a month?</span> You can start on the standard rate today without talking to us.</p>\n              <p class=\"ds-notice ds-notice--error\"><span class=\"ds-notice__title\">Not sent.</span> Check the work email address.</p>\n            </div>\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"c-name\">Your name</label>\n                <input class=\"ds-form__input\" id=\"c-name\" type=\"text\" value=\"Mara Okafor\">\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"c-mail\">Work email</label>\n                <input class=\"ds-form__input is-error\" id=\"c-mail\" type=\"email\" value=\"mara@harbour\">\n                <span class=\"ds-form__error\">This address is missing its ending.</span>\n              </div>\n            </div>\n            <div class=\"ds-form__row\">\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"c-co\">Business</label>\n                <input class=\"ds-form__input\" id=\"c-co\" type=\"text\" value=\"Harbour Coffee\">\n              </div>\n              <div class=\"ds-form__field\">\n                <label class=\"ds-form__label\" for=\"c-vol\">Sales a month</label>\n                <select class=\"ds-form__select\" id=\"c-vol\"><option>80,000 to 250,000</option><option>250,000 to 1 million</option><option>More than 1 million</option></select>\n              </div>\n            </div>\n            <div class=\"ds-form__field\">\n              <label class=\"ds-form__label\" for=\"c-text\">What would you like to do?</label>\n              <textarea class=\"ds-form__textarea\" id=\"c-text\" placeholder=\"For example: move twelve shops and the web shop to one account\"></textarea>\n              <span class=\"ds-form__hint\">Do not include card numbers or passwords.</span>\n            </div>\n            <label class=\"ds-form__check\"><input class=\"ds-form__checkbox\" type=\"checkbox\" checked> We already take card payments</label>\n            <div class=\"ds-form__actions\" data-component=\"buttons\">\n              <button class=\"ds-button\" type=\"submit\">Send to sales</button>\n              <a class=\"ds-button ds-button--secondary\" href=\"#pricing\">See pricing first</a>\n              <button class=\"ds-button ds-button--danger\" type=\"reset\">Clear the form</button>\n              <button class=\"ds-button is-disabled\" type=\"button\" disabled>Attach a file</button>\n            </div>\n          </form>\n        </div>\n      </div>\n      <div class=\"ds-stack\">\n        <div class=\"ds-panel\">\n          <div class=\"ds-panel__head\"><h2 class=\"ds-panel__title\">What happens next</h2><span class=\"ds-badge ds-badge--success\">One working day</span></div>\n          <div class=\"ds-panel__body\">\n            <ol class=\"ds-list ds-list--steps\" data-component=\"list\">\n              <li class=\"ds-list__item\">\n                <span class=\"ds-list__title\">We read what you wrote</span>\n                <p class=\"ds-list__meta\">And pass it to someone who knows your trade</p>\n              </li>\n              <li class=\"ds-list__item\">\n                <span class=\"ds-list__title\">A short call</span>\n                <p class=\"ds-list__meta\">Thirty minutes, with your numbers on the table</p>\n              </li>\n              <li class=\"ds-list__item\">\n                <span class=\"ds-list__title\">A rate in writing</span>\n                <p class=\"ds-list__meta\">Valid for 30 days, with nothing to sign until you are ready</p>\n              </li>\n            </ol>\n          </div>\n        </div>\n        <div class=\"ds-dialog\" data-component=\"dialog\">\n          <div class=\"ds-dialog__box\" role=\"dialog\" aria-labelledby=\"c-dialog\">\n            <div class=\"ds-dialog__head\"><h2 class=\"ds-dialog__title\" id=\"c-dialog\">Clear the form?</h2><a class=\"ds-dialog__close\" href=\"#contact\" aria-label=\"Close\">&times;</a></div>\n            <div class=\"ds-dialog__body\"><p>Everything you have typed will be removed. Nothing has been sent yet.</p></div>\n            <div class=\"ds-dialog__actions\">\n              <a class=\"ds-button ds-button--danger ds-button--small\" href=\"#contact\">Clear it</a>\n              <a class=\"ds-button ds-button--secondary ds-button--small\" href=\"#contact\">Keep writing</a>\n            </div>\n          </div>\n        </div>\n        <blockquote class=\"ds-quote\">We moved nine shops in a weekend and closed the books a day earlier.<span class=\"ds-quote__by\">Head of finance, a coffee roaster with nine shops</span></blockquote>\n      </div>\n    </div>\n  </div>\n</section>\n\n<footer class=\"ds-footer\" data-component=\"footer\">\n  <div class=\"ds-wrap\">\n    <div class=\"ds-footer__cols\">\n      <div>\n        <a class=\"ds-brand\" href=\"#home\">\n          <span class=\"ds-brand__mark\"><svg viewBox=\"0 0 24 24\" fill=\"currentColor\" aria-hidden=\"true\"><path d=\"M3 12a9 9 0 0 1 9-9h9v9a9 9 0 0 1-18 0z\"/></svg></span>\n          <span class=\"ds-brand__name\">chronoskin</span>\n        </a>\n        <p class=\"ds-footer__about\">Payments for businesses that sell online, in person or both.</p>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Payments</h2>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#home\">Checkout</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Readers</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Invoices</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#pricing\">Pricing</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">For</h2>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#home\">Retail</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Subscriptions</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Marketplaces</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Platforms</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Build</h2>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#guides\">Guides</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#guides\">Test cards</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#guides\">Service status</a></li>\n        </ul>\n      </div>\n      <div>\n        <h2 class=\"ds-footer__title\">Company</h2>\n        <ul class=\"ds-footer__list\">\n          <li><a class=\"ds-footer__link\" href=\"#home\">About</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#home\">Careers</a></li>\n          <li><a class=\"ds-footer__link\" href=\"#contact\">Contact sales</a></li>\n        </ul>\n      </div>\n    </div>\n    <p class=\"ds-footer__legal\"><span>chronoskin, 2025. Payment services are provided under licence.</span><span>Privacy &middot; Terms &middot; Cookies</span></p>\n  </div>\n</footer>\n\n</body>\n</html>\n",
    "style.json": "{\n  \"id\": \"v1.modern-product.landing.s04.p03.t03.u05.dc\",\n  \"library\": \"2026.10.09-1346\",\n  \"era\": {\n    \"slug\": \"modern-product\",\n    \"years\": [\n      2020,\n      2026\n    ]\n  },\n  \"archetype\": \"landing\",\n  \"mode\": \"mix\",\n  \"markup\": \"modern\",\n  \"viewport\": {\n    \"width\": 1440,\n    \"fluid\": true,\n    \"responsive\": true\n  },\n  \"source\": \"https://chrono.skin/s/v1-mp-4335-dc\",\n  \"short\": \"v1-mp-4335-dc\",\n  \"density\": \"compact\"\n}\n",
    "tokens.css": "/* @part palette */\n:root {\n  --color-page: #f4f1ea;\n  --color-canvas: #f4f1ea;\n  --color-surface: #ffffff;\n  --color-surface-alt: #ece7dd;\n  --color-surface-strong: #e1dacd;\n  --color-bar: #f4f1ea;\n  --color-bar-text: #260a2f;\n  --color-bar-alt: #260a2f;\n  --color-bar-alt-text: #d3c7d8;\n  --color-inverse: #260a2f;\n  --color-inverse-text: #f4f1ea;\n  --color-text: #3b2f40;\n  --color-text-muted: #76697a;\n  --color-heading: #260a2f;\n  --color-heading-alt: #5b3df5;\n  --color-link: #5b3df5;\n  --color-link-quiet: #5a4a60;\n  --color-link-visited: #7d4fb3;\n  --color-link-hover: #3f25c9;\n  --color-link-active: #2e1a99;\n  --color-border: #ddd5c8;\n  --color-border-strong: #a89d8e;\n  --color-border-muted: #ebe5da;\n  --color-accent: #5b3df5;\n  --color-accent-text: #ffffff;\n  --color-accent-alt: #ff6b4a;\n  --color-fill-1: #e4dcff;\n  --color-fill-2: #ffe2d4;\n  --color-fill-3: #d6efe6;\n  --color-fill-4: #f7e9b8;\n  --color-button: #5b3df5;\n  --color-button-text: #ffffff;\n  --color-button-hover-text: #ffffff;\n  --color-button-secondary: #ffffff;\n  --color-button-secondary-text: #260a2f;\n  --color-input: #ffffff;\n  --color-input-text: #260a2f;\n  --color-input-border: #cfc6b8;\n  --color-disabled: #e6dfd3;\n  --color-disabled-text: #a3988a;\n  --color-danger: #c8322b;\n  --color-danger-surface: #fdeae6;\n  --color-success: #1f7a5a;\n  --color-warning: #b7791f;\n  --color-notice: #e4dcff;\n  --color-notice-text: #2e1a99;\n  --color-focus: #5b3df5;\n  --color-shadow: rgb(38 10 47 / 0.12);\n  --color-overlay: rgb(38 10 47 / 0.5);\n}\n\n/* @part type */\n:root {\n  --font-body: Nunito, \"Varela Round\", ui-rounded, \"SF Pro Rounded\", \"Arial Rounded MT Bold\", \"Helvetica Neue\", sans-serif;\n  --font-heading: Nunito, \"Varela Round\", ui-rounded, \"SF Pro Rounded\", \"Arial Rounded MT Bold\", \"Helvetica Neue\", sans-serif;\n  --font-ui: Nunito, \"Varela Round\", ui-rounded, \"SF Pro Rounded\", \"Arial Rounded MT Bold\", \"Helvetica Neue\", sans-serif;\n  --font-mono: \"JetBrains Mono\", \"SF Mono\", Menlo, Consolas, monospace;\n  --text-base: 18px;\n  --text-small: 14px;\n  --text-ui: 16px;\n  --text-large: 22px;\n  --text-display: 84px;\n  --text-h1: 54px;\n  --text-h2: 34px;\n  --text-h3: 21px;\n  --line-body: 1.6;\n  --line-heading: 1.3;\n  --line-display: 1.05;\n  --weight-body: 400;\n  --weight-bold: 700;\n  --weight-heading: 600;\n  --weight-display: 700;\n  --weight-ui: 700;\n  --heading-transform: none;\n  --heading-tracking: -0.3px;\n  --display-tracking: -2px;\n  --figure-shift: 0em;\n  --ui-transform: none;\n  --link-decoration: none;\n  --link-decoration-hover: none;\n  --link-decoration-quiet: none;\n}\n\n/* @part surface */\n:root {\n  --border-width: 1px;\n  --border-width-strong: 1px;\n  --border-style: solid;\n  --radius-control: 10px;\n  --radius-panel: 18px;\n  --radius-pill: 999px;\n  --radius-page: 24px;\n  --shadow-panel: 2px 4px 12px var(--color-shadow);\n  --shadow-control: none;\n  --shadow-control-hover: 0 4px 16px var(--color-shadow);\n  --shadow-control-pressed: inset 0 1px 3px var(--color-shadow);\n  --shadow-dialog: 0 0 0 1px var(--color-border-muted), 0 12px 48px var(--color-shadow);\n  --shadow-text: none;\n  --fill-page: var(--color-page);\n  --fill-bar: color-mix(in srgb, var(--color-bar) 80%, transparent);\n  --fill-bar-alt: var(--color-bar-alt);\n  --fill-inverse: var(--color-inverse);\n  --fill-accent: var(--color-accent);\n  --fill-panel: var(--color-surface);\n  --fill-button: var(--color-button);\n  --fill-button-hover: color-mix(in srgb, var(--color-button) 90%, white);\n  --fill-button-secondary: var(--color-button-secondary);\n  --fill-input: var(--color-input);\n  --focus-ring: 4px solid color-mix(in srgb, var(--color-focus) 30%, transparent);\n  --transition: color 0.18s ease-in-out, background-color 0.18s ease-in-out, border-color 0.18s ease-in-out, box-shadow 0.18s ease-in-out, opacity 0.18s ease-in-out, transform 0.18s ease-in-out, visibility 0.18s ease-in-out;\n  --backdrop-blur: 24px;\n}\n"
  }
}