{ "id": "v1-sg-1233", "long_id": "v1.saas-gradient.landing.s01.p02.t03.u03", "name": "SaaS gradient landing page", "era": { "slug": "saas-gradient", "code": "sg", "name": "SaaS gradient", "years": [ 2016, 2021 ], "description": "The start-up product page of 2016 to 2021: slanted or curved bands of purple-to-blue gradient, white rounded cards with soft wide shadows, friendly geometric sans, pill buttons and flat illustration blocks." }, "archetype": "landing", "mode": "mix", "viewport": { "width": 1440, "fluid": false, "responsive": true }, "summary": "This is the start-up product page of 2016 to 2021: a wide band of two-colour gradient with a slanted lower edge carries the navigation, the claim and a product screen drawn as white cards, and everything below it is white rounded cards with soft, wide, tinted shadows on a very pale page. Type is one friendly geometric sans at a generous size, buttons are pills, links are never underlined, and small flat illustrations are built from tinted blocks, circles and card shapes. It was the common look of payment, analytics and messaging products around 2018.", "url": "https://chrono.skin/s/v1-sg-1233", "preview_url": "https://chrono.skin/s/v1-sg-1233/specimen.html", "files": { "STYLE.md": "# SaaS gradient landing page\n\n## Summary\n\nThis is the start-up product page of 2016 to 2021: a wide band of two-colour gradient with a slanted lower edge carries the navigation, the claim and a product screen drawn as white cards, and everything below it is white rounded cards with soft, wide, tinted shadows on a very pale page. Type is one friendly geometric sans at a generous size, buttons are pills, links are never underlined, and small flat illustrations are built from tinted blocks, circles and card shapes. It was the common look of payment, analytics and messaging products around 2018.\n\n## Layout\n\n- The page is designed for a 1440px viewport and is not fluid: content sits in `.ds-wrap`, centred, at most `--size-page` (1100px) wide with `--space-5` side padding. Bands (the hero, `.ds-section--alt`, the footer) run the full width of the window.\n- Navigation is one transparent row, `--size-nav` (76px) tall, lying on the gradient: the `.ds-brand`, three links, then \"Sign in\" and one small white button at the right. The hero or the page header is pulled up under it by a negative margin of the same height, so the gradient starts at the top of the window.\n- The home view stacks: `.ds-hero` (copy at the left, the drawn product screen at the right, lower edge slanted by 8vw with `clip-path`); `.ds-stat`, one white card of four figures that overlaps the slant; the logo row as text; a white band with two `.ds-feature` rows whose sides alternate; a `.ds-grid` of four cards; a white band of three `.ds-quote` cards; and `.ds-cta`, a gradient card. Sections are `--space-8` (96px) apart, tight ones `--space-7`.\n- Inner pages have no hero. They open with `.ds-page-header`: the same gradient band with a 4vw slant, holding the breadcrumb, the page title, one line of text and at most one white button at the right. `--deep` makes the band taller so that the first cards (`.ds-section--lift`) climb onto it. Below, content is either full width (the three plans) or `.ds-cols` (7 to 5), or `.ds-cols--side` (1 to 3) with a `.ds-sidebar` at the left. Tabs are a centred pill switch above the cards they change.\n- Views. The specimen is the site of an invoicing product. `home` is the landing page. `pricing` has the switch between monthly and yearly, three plan cards, the comparison table with a notice under it, and the common questions as a list. `guide` is one page of the getting-started guide: its contents and related links at the left, the text, the label key, an empty questions box and the pagination. `signup` is the trial form with its notices and buttons beside what happens next and the open leave dialog.\n- Below 960px the columns, feature rows, plans and quotes stack and cards stand two across; below 900px `.ds-nav__links` is not shown and the menu `.ds-nav__menu` takes its place at the end of the bar, after the brand, \"Sign in\" and the one `.ds-button--inverse`; the menu lists every view and marks the one showing. Below 640px `.ds-nav__signin` is hidden too, grids go to one column and a wide table scrolls inside `.ds-table__wrap`. The page never scrolls sideways.\n- Spacing scale: `--space-1` 4px (label to field, pagination gaps), `--space-2` 8px (icon to text, between badges), `--space-3` 12px (button and cell vertical padding, between buttons), `--space-4` 16px (between form rows, list row padding, card head), `--space-5` 24px (card padding, grid gap, page gutter), `--space-6` 32px (column gap, hero actions), `--space-7` 56px (tight sections, hero top), `--space-8` 96px (between sections, between feature rows).\n- Other sizes: `--size-mark` 32px, `--size-icon` 44px (icon tiles), `--size-control` 36px (pagination), `--size-avatar` 40px, `--size-art` 300px (least height of an illustration block), `--size-dialog` 440px.\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\nThe conventions are the era's, as its first layout sets them out.\n\n- The gradient is `--fill-inverse` (from `--color-fill-1` to `--color-fill-2`); text on it is `--color-inverse-text`. It fills the band and the `.ds-cta` card. Only `.ds-button--inverse` and `.ds-button--ghost` stand directly on it. The search field is a card on the band (`--fill-input`), so its button is the primary one.\n- `--color-fill-1` to `--color-fill-4` are the round icon tiles of the collections and the empty state's icon. A fill carries an icon in `--color-inverse-text`, never running text.\n- `--color-page` is the warm pale page, `--color-surface` (through `--fill-panel`) the cards, `--color-surface-alt` the dialog foot and the empty state, `--color-surface-strong` the strip of figures, the current sidebar row, the quiet badge and inline code.\n- `--fill-bar` with `--color-bar-text` is the table head. `--fill-bar-alt` with `--color-bar-alt-text` is the footer.\n- Text is `--color-text` (`#46585c`), meta `--color-text-muted`, headings and figures `--color-heading` (`#17262b`); sidebar titles and h3 in prose are `--color-heading-alt`.\n- `--color-button` (violet `#5b4bd6`, white text) is the action colour on cards, the current page number and the edge under the current tab. Links are `--color-link`, bold, not underlined; only the often-asked links on the band are underlined, because colour cannot mark them there.\n- Badges, notices and the destructive button follow the era's rules: `--fill-accent` for the default badge, tints mixed into `--color-surface` for `--alt` and the status variants, `--color-notice` with `--color-notice-text`, `--color-danger` with `--color-button-text`.\n- Two families: `--font-heading` is a geometric display sans (Poppins, Montserrat, Futura) for titles and figures, `--font-body` and `--font-ui` a humanist sans (Lato, Lucida Grande); `--font-mono` for code. `--text-base` 15px at `--line-body` 1.55; `--text-ui` 13px (controls, card text, navigation); `--text-small` 12px (meta, badges, labels); `--text-large` 18px (leads); `--text-display` 42px (the hero question); `--text-h1` 32px (page titles, figures, article title); `--text-h2` 23px; `--text-h3` 16px (card and list titles).\n- The hero and page titles are bold (`--weight-display` 700); other headings are medium (`--weight-heading` 500). Buttons, tabs and navigation links are uppercase and bold (`--ui-transform`, `--weight-ui` 700); nothing else is uppercase.\n- Surface: tight corners (`--radius-control` and `--radius-panel` 5px, `--radius-pill` 3px for badges, `--radius-page` 8px for collection cards, the strip and the call to action). `--shadow-panel` is a close 3px shadow under a wide 28px one; `--shadow-dialog` is deeper and also lifts the search field and a hovered collection card. The primary button has a faint top-to-bottom gradient of its own colour (`--fill-button`).\n- One-off values made with `calc()` and `color-mix()`: the curve (`ellipse(90% 100% at 50% 0%)`), the hairline before the navigation tag (`--color-inverse-text` at 40%), the ghost button border (55%), tinted badges, the error notice's edge (`--color-danger` at 35%). Opacity 0.75 to 0.9 dims secondary text on the gradient and in the footer.\n\n## Components\n\n- `.ds-page`: on ``. Sets font, text colour and `--fill-page`.\n- `.ds-wrap`: the centred content column inside a band.\n- `.ds-brand`: the site's mark and name, first in the navigation and again in the footer. `.ds-brand__mark` is a 32px 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 in bold. Name and mark are placeholders for the installing project's own name and logo.\n- `.ds-nav`: the transparent row on the gradient. `.ds-nav__inner` centres it; `.ds-nav__links` holds `.ds-nav__link`, the current one on a translucent pill (`is-current`); `.ds-nav__actions` holds the sign-in link (`.ds-nav__signin`) and one `.ds-button--inverse 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-hero`: the slanted gradient band of the home view. `.ds-hero__inner` is two columns: `.ds-hero__copy` with an optional `.ds-hero__kicker`, the `.ds-hero__title`, `.ds-hero__lead`, `.ds-hero__actions` (one `--inverse`, one `--ghost` button) and `.ds-hero__note`; and `.ds-hero__art` with a `.ds-shot`. One per site.\n- `.ds-shot`: a product screen drawn as a card: `.ds-shot__bar` (three `.ds-shot__dot` and a `.ds-shot__name`), `.ds-shot__row` lines of a `.ds-tile`, `.ds-shot__who`, `.ds-shot__sum` and a badge; `.ds-shot__float` is a small card laid over its corner with `.ds-shot__label`, `.ds-shot__figure` and a `.ds-spark`.\n- `.ds-spark`: a sparkline, an inline SVG path stroked with `currentColor`; `--2`, `--3`, `--4` take the other fills.\n- `.ds-tile`: an icon tile on `--color-fill-1` (`--2`, `--3`, `--4`; `--round` for a circle).\n- `.ds-page-header`: head of an inner page, used instead of `.ds-hero`: the gradient band with a shallower slant. `.ds-page-header__inner` holds the breadcrumb, `.ds-page-header__title`, `.ds-page-header__text` and `.ds-page-header__actions`. `--deep` when the first cards overlap it.\n- `.ds-section`: a full-width block of the page; `--alt` white, `--tight` with less padding, `--lift` pulled up onto a deep page header. `.ds-section__head` centres a `.ds-section__kicker`, `.ds-section__title` and `.ds-section__lead`.\n- `.ds-cols`: main and side column, 7 to 5; `--side` 1 to 3. `.ds-stack` stacks cards 24px apart.\n- `.ds-stat`: the row of figures, one card of four `.ds-stat__item`, each a `.ds-stat__figure` over a `.ds-stat__label`. On the home view it overlaps the slant.\n- `.ds-logos`: customer names set as text, `.ds-logos__name`, under a `.ds-logos__lead` line.\n- `.ds-feature`: a feature row, `.ds-feature__copy` beside a `.ds-art`; `--flip` puts the copy at the right. Copy is a kicker, `.ds-feature__title`, `.ds-feature__text`, `.ds-feature__points` of ticked `.ds-feature__point` and a `.ds-link--more`.\n- `.ds-art`: a flat illustration block, a tinted fill (`--2`, `--3`) with a `.ds-art__blob` circle and two or three `.ds-art__card` (`--in`, `--out` to stagger them) holding a tile, a `.ds-art__grow` label with `.ds-art__line` bars, and a badge or figure.\n- `.ds-grid`: four cards across. Each `.ds-grid__cell` is a `.ds-tile`, `.ds-grid__title`, `.ds-grid__text` and a link.\n- `.ds-quotes`: three `.ds-quote` cards: `.ds-quote__text` and `.ds-quote__by` with a `.ds-quote__avatar` (`--4`, `--plain`) and `.ds-quote__name`. `--lead` puts one card on the gradient.\n- `.ds-cta`: the closing call to action, a gradient card with `.ds-cta__title`, `.ds-cta__text` and the two gradient buttons.\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 an arrow. `.ds-linkrow` lays links in a row.\n- `.ds-button`: pill button, 15px semibold. Variants: `--secondary`, `--danger` (destructive actions only), `--inverse` and `--ghost` (on the gradient only), `--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 inside a card: a small bold head on `--fill-bar`, 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`; `.ds-table__foot` is a last row for pagination and a count.\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 at the right), an optional `.ds-list__text` and `.ds-list__meta`.\n- `.ds-panel`: the white card with the soft wide shadow. `.ds-panel__head` holds the `.ds-panel__title` and an optional badge or link above a hairline; `.ds-panel__body` is padded; `.ds-panel__text` is a small paragraph.\n- `.ds-plans`: three `.ds-panel.ds-plan` cards of equal height: `.ds-plan__price` with `.ds-plan__per`, `.ds-plan__text`, feature points and a `--wide` button. `.ds-plan--best` takes a top edge in `--color-button` and the primary button.\n- `.ds-tabs`: here a pill switch inside `.ds-tabsrow`: `.ds-tabs__tab` pills on a white capsule, the current one (`is-current`) filled with `--fill-button`.\n- `.ds-badge`: pill tag, 13px semibold, 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 a grey pill.\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 slashes; the last is `.ds-breadcrumb__current`. It takes the colour of what it stands on and sits above the page title.\n- `.ds-dialog`: a dimmed block (`--color-overlay`) centring `.ds-dialog__box`, a card in `--shadow-dialog`: `.ds-dialog__head` (`.ds-dialog__title`, `.ds-dialog__close`), `.ds-dialog__body`, and `.ds-dialog__actions` right-aligned on `--color-surface-alt`.\n- `.ds-empty`: a centred message on `--color-surface-alt`: `.ds-empty__icon` (a circle of `--color-fill-3`), `.ds-empty__title`, `.ds-empty__text` and one small secondary button.\n- `.ds-footer`: the closing band on `--fill-bar-alt`: `.ds-footer__cols` with the brand and a `.ds-footer__about` line, then three columns of `.ds-footer__title` and `.ds-footer__list` of `.ds-footer__link`; `.ds-footer__legal` under a rule.\n- `.ds-menu`: a drop-down, a `
` whose `.ds-menu__button` is the summary and whose `.ds-menu__list` of `.ds-menu__link` opens as a small card under it. Use it for a group of links under one bar item and for the account.\n- `.ds-nav__menu`: the `.ds-menu` that replaces the bar's links on a phone. It lists every view, marks the one showing, and sits last in the bar after the brand and the one action that stays.\n- `.ds-switch`: an on or off setting drawn over a checkbox (`.ds-switch__input`, `.ds-switch__track`, then the label). Use it for a setting that takes effect at once, not for a choice sent with a form's other fields.\n- `.ds-tooltip`: a short hint on hover or focus; `.ds-tooltip--mark` is the small round question mark beside a label, `.ds-tooltip__text` the hint, `.ds-tooltip--start` opens it from the left edge. One sentence at most.\n- `.ds-accordion`: questions that open one by one, each a `
` with `.ds-accordion__title` and `.ds-accordion__body`. Use it for common questions inside a panel.\n- `.ds-progress`: a thin pill bar with `.ds-progress__bar` (`--20` to `--100` set the width). `.ds-meter` puts a name and a figure above it. Use it for steps done and for usage against a limit.\n- `.ds-avatar`: a person as initials on a round fill (`--1`, `--2`, `--4` change the fill); `.ds-who` sets it beside a name. Use it wherever a named person appears.\n\n## Never\n\n- `font-weight <= 700`: titles are bold, never black.\n- `font-size >= 12px`: meta, badges and labels are the smallest text.\n- `font-size <= 42px`: the hero question is the largest text.\n- `font-families <= 3`: a display face, a body sans and monospace for code.\n- `line-height <= 1.55`: body text is set at 1.55.\n- `uppercase-text <= 10%`: only buttons, tabs and navigation links are uppercase.\n- `underlined-links <= 10%`: only the often-asked links on the band are underlined.\n- `text-shadow = none`: text is flat, also on the gradient.\n- `animation = none`: nothing moves by itself; only hover states ease.\n- `border-width <= 2px`: borders are hairlines; 2px marks the current tab and navigation link.\n- `border-radius <= 8px`: controls and cards are 5px and the largest blocks 8px; only circles are rounder.\n- `box-shadow-blur <= 64px`: shadows are soft and wide but end at 64px.\n\n## Extending\n\nDerive a new component from the nearest one in the specimen and use tokens only. A new block of the landing page is a `.ds-section` with a `.ds-section__head`; a new feature is another `.ds-feature` row with its side flipped and an illustration built from `.ds-art` pieces; anything that holds data is a `.ds-panel`. Text goes on cards, on the page and, in `--color-inverse-text`, on the gradient; the four fills take an icon or initials only. Put only the `--inverse` and `--ghost` buttons on the gradient, and at most one primary button in a card. Keep corners, shadows and borders on their tokens, spacing on the `--space-*` scale, and note any one-off `color-mix()` shade next to its rule.\n", "components.css": ":root {\n --size-menu: 190px;\n --size-tip: 220px;\n --size-page: 1100px;\n --size-nav: 76px;\n --size-nav-tall: 116px;\n --size-mark: 32px;\n --size-icon: 44px;\n --size-control: 36px;\n --size-dialog: 440px;\n --size-art: 300px;\n --size-avatar: 40px;\n --space-1: 4px;\n --space-2: 8px;\n --space-3: 12px;\n --space-4: 16px;\n --space-5: 24px;\n --space-6: 32px;\n --space-7: 56px;\n --space-8: 96px;\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}\n.ds-page *,\n.ds-page *::before,\n.ds-page *::after {\n box-sizing: border-box;\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-bold);\n letter-spacing: var(--heading-tracking);\n text-decoration: none;\n white-space: nowrap;\n}\n.ds-brand__mark {\n display: inline-flex;\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) color-mix(in srgb, var(--color-button-text) 35%, 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 color: var(--color-text);\n max-width: 68ch;\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-h1);\n}\n.ds-prose h2 {\n margin-top: var(--space-6);\n font-size: var(--text-h2);\n}\n.ds-prose h3 {\n margin-top: var(--space-5);\n color: var(--color-heading-alt);\n font-size: var(--text-h3);\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-text);\n font-size: var(--text-large);\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: \" \\2192\";\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}\n\n/* buttons */\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 transform: translateY(calc(var(--space-1) * -0.25));\n}\n.ds-button:active,\n.ds-button.is-active {\n box-shadow: var(--shadow-control-pressed);\n transform: none;\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-border);\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--ghost,\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n border-color: color-mix(in srgb, var(--color-inverse-text) 55%, transparent);\n background: transparent;\n color: var(--color-inverse-text);\n box-shadow: none;\n}\n.ds-button--ghost:hover,\n.ds-button--ghost.is-hover {\n background: color-mix(in srgb, var(--color-inverse-text) 14%, transparent);\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-1);\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-bold);\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-ui);\n font-size: var(--text-ui);\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: calc(var(--space-8) + var(--space-6));\n border-radius: var(--radius-panel);\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-ui);\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-ui);\n}\n.ds-form__checkbox {\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 */\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-ui);\n}\n.ds-table th {\n padding: var(--space-3) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n background: var(--fill-bar);\n color: var(--color-bar-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n text-align: left;\n white-space: nowrap;\n}\n.ds-table td {\n padding: var(--space-3) var(--space-5);\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-3) 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: baseline;\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-h3);\n font-weight: var(--weight-bold);\n line-height: var(--line-heading);\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 font-size: var(--text-ui);\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 white card with the soft wide shadow */\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 box-shadow: var(--shadow-panel);\n}\n.ds-panel__head {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-4) var(--space-5);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\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 font-size: var(--text-ui);\n}\n\n/* badge */\n.ds-badge {\n display: inline-block;\n padding: 0 var(--space-2);\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-bold);\n line-height: 1.7;\n white-space: nowrap;\n vertical-align: middle;\n}\n.ds-badge--alt {\n background: color-mix(in srgb, var(--color-accent-alt) 18%, var(--color-surface));\n color: color-mix(in srgb, var(--color-accent-alt) 60%, 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-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\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-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 text-decoration: var(--link-decoration-quiet);\n transition: var(--transition);\n}\n.ds-sidebar__item:hover,\n.ds-sidebar__item.is-hover {\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-3) var(--space-5);\n border: var(--border-width) var(--border-style) transparent;\n border-radius: var(--radius-panel);\n background: var(--color-notice);\n color: var(--color-notice-text);\n font-size: var(--text-ui);\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-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 box-shadow: var(--shadow-control);\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}\n.ds-breadcrumb__item {\n color: inherit;\n opacity: 0.8;\n text-decoration: var(--link-decoration-quiet);\n}\n.ds-breadcrumb__item::after {\n content: \"/\";\n margin-left: var(--space-2);\n opacity: 0.6;\n}\n.ds-breadcrumb__current {\n font-weight: var(--weight-bold);\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-page);\n background: var(--color-overlay);\n}\n.ds-dialog__box {\n width: 100%;\n max-width: var(--size-dialog);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-dialog);\n}\n.ds-dialog__head {\n display: flex;\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-dialog__title {\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-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 position: relative;\n display: inline-block;\n flex: none;\n width: calc(var(--text-large) * 0.8);\n height: calc(var(--text-large) * 0.8);\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-dialog__close::before, .ds-dialog__close::after {\n content: \"\";\n position: absolute;\n inset: 0;\n margin: auto;\n width: 100%;\n height: max(var(--border-width), calc(var(--text-large) * 0.12));\n background: currentColor;\n transform: rotate(45deg);\n}\n.ds-dialog__close::after {\n transform: rotate(-45deg);\n}\n.ds-dialog__body {\n padding: var(--space-3) var(--space-5) var(--space-5);\n font-size: var(--text-ui);\n}\n.ds-dialog__body p {\n margin: 0;\n}\n.ds-dialog__actions {\n display: flex;\n flex-wrap: wrap;\n justify-content: flex-end;\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 border-radius: 0 0 var(--radius-panel) var(--radius-panel);\n background: var(--color-surface-alt);\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-6) var(--space-5);\n border: var(--border-width) var(--border-style) var(--color-border);\n border-radius: var(--radius-panel);\n background: var(--color-surface-alt);\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-3);\n color: var(--color-inverse-text);\n}\n.ds-empty__icon svg {\n width: 50%;\n height: 50%;\n}\n.ds-empty__title {\n margin: var(--space-1) 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}\n.ds-empty__text {\n max-width: 44ch;\n margin: 0 0 var(--space-2);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* tabs */\n.ds-tabs {\n display: flex;\n flex-wrap: wrap;\n gap: var(--space-1) var(--space-5);\n margin: 0;\n padding: 0;\n border-bottom: var(--border-width) var(--border-style) var(--color-border);\n list-style: none;\n}\n.ds-tabs__tab {\n display: inline-block;\n padding: var(--space-3) 0;\n border-bottom: var(--border-width-strong) var(--border-style) transparent;\n margin-bottom: calc(var(--border-width) * -1);\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-tabs__tab:hover,\n.ds-tabs__tab.is-hover {\n color: var(--color-link-hover);\n}\n.ds-tabs__tab.is-current {\n border-bottom-color: var(--color-button);\n color: var(--color-heading);\n}\n\n/* shared small pieces: an icon tile on one of the four fills, a sparkline */\n.ds-tile {\n display: inline-flex;\n flex: none;\n align-items: center;\n justify-content: center;\n width: var(--size-icon);\n height: var(--size-icon);\n border-radius: var(--radius-panel);\n background: var(--color-fill-1);\n color: var(--color-inverse-text);\n}\n.ds-tile svg {\n width: 55%;\n height: 55%;\n}\n.ds-tile--2 { background: var(--color-fill-2); }\n.ds-tile--3 { background: var(--color-fill-3); }\n.ds-tile--4 { background: var(--color-fill-4); }\n.ds-tile--round { border-radius: 50%; }\n\n@media (max-width: 640px) {\n .ds-table th,\n .ds-table td {\n padding: var(--space-2) var(--space-3);\n }\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-dialog {\n padding: var(--space-5) var(--space-3);\n }\n}\n\n/* ---- layout: product landing page ---- */\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/* nav: a faint scrim of the inverse colour, lying on the gradient band of the hero or the page header */\n.ds-nav {\n position: relative;\n z-index: 2;\n height: var(--size-nav);\n color: var(--color-inverse-text);\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__inner {\n display: flex;\n align-items: center;\n gap: var(--space-6);\n height: 100%;\n max-width: var(--size-page);\n margin: 0 auto;\n padding: 0 var(--space-5);\n}\n.ds-nav__links {\n display: flex;\n flex: 1;\n gap: var(--space-2);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-nav__link {\n display: block;\n padding: var(--space-1) var(--space-3);\n border-radius: var(--radius-control);\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.85;\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__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__link[href=\"#home\"],\n.ds-page:has(#pricing:target) .ds-nav__link[href=\"#pricing\"],\n.ds-page:has(#guide:target) .ds-nav__link[href=\"#guide\"],\n.ds-page:has(#signup:target) .ds-nav__link[href=\"#signup\"] {\n background: color-mix(in srgb, var(--color-inverse-text) 18%, transparent);\n opacity: 1;\n}\n.ds-nav__actions {\n display: flex;\n align-items: center;\n gap: var(--space-4);\n}\n\n/* hero: the gradient band with a slanted lower edge, pulled up under the nav */\n.ds-hero {\n margin-top: calc(var(--size-nav) * -1);\n padding: calc(var(--size-nav) + var(--space-7)) 0 calc(var(--space-8) + 8vw);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8vw), 0 100%);\n}\n.ds-hero__inner {\n display: grid;\n grid-template-columns: minmax(0, 11fr) minmax(0, 12fr);\n align-items: center;\n gap: var(--space-7);\n}\n.ds-hero__copy {\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-4);\n padding: var(--space-1) var(--space-3) var(--space-1) var(--space-1);\n border-radius: var(--radius-pill);\n background: color-mix(in srgb, var(--color-inverse-text) 16%, transparent);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n}\n.ds-hero__title {\n margin: 0;\n font-family: var(--font-heading);\n font-size: 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}\n.ds-hero__lead {\n max-width: 46ch;\n margin: var(--space-4) 0 0;\n font-size: var(--text-large);\n opacity: 0.9;\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-4) 0 0;\n font-size: var(--text-small);\n opacity: 0.75;\n}\n.ds-hero__art {\n position: relative;\n padding: 0 0 var(--space-6) var(--space-6);\n}\n\n/* shot: a product screen drawn as cards */\n.ds-shot {\n border-radius: var(--radius-page);\n background: var(--fill-panel);\n color: var(--color-text);\n box-shadow: var(--shadow-dialog);\n overflow: hidden;\n}\n.ds-shot__bar {\n display: flex;\n align-items: center;\n gap: var(--space-2);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n background: var(--color-surface-alt);\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-shot__dot {\n width: var(--space-2);\n height: var(--space-2);\n border-radius: 50%;\n background: var(--color-border-strong);\n}\n.ds-shot__name {\n margin-left: var(--space-2);\n font-weight: var(--weight-bold);\n}\n.ds-shot__row {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n font-size: var(--text-small);\n}\n.ds-shot__row:last-child {\n border-bottom: 0;\n}\n.ds-shot__who {\n flex: 1;\n min-width: 0;\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n.ds-shot__sum {\n font-variant-numeric: tabular-nums;\n}\n.ds-shot__float {\n position: absolute;\n left: 0;\n bottom: 0;\n width: 52%;\n padding: var(--space-4);\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-shot__label {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-small);\n}\n.ds-shot__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-heading);\n line-height: var(--line-heading);\n}\n.ds-spark {\n display: block;\n width: 100%;\n height: var(--space-6);\n margin-top: var(--space-2);\n color: var(--color-fill-1);\n}\n\n/* page header: the same band, shorter, on inner pages */\n.ds-page-header {\n margin-top: calc(var(--size-nav) * -1);\n padding: calc(var(--size-nav) + var(--space-6)) 0 calc(var(--space-6) + 4vw);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n clip-path: polygon(0 0, 100% 0, 100% calc(100% - 4vw), 0 100%);\n}\n.ds-page-header--deep {\n padding-bottom: calc(var(--space-8) + var(--space-6) + 4vw);\n}\n.ds-page-header__inner {\n display: flex;\n align-items: flex-end;\n justify-content: space-between;\n gap: var(--space-5);\n}\n.ds-page-header__title {\n margin: var(--space-3) 0 0;\n font-family: var(--font-heading);\n font-size: var(--text-h1);\n font-weight: var(--weight-display);\n line-height: var(--line-heading);\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-2) 0 0;\n font-size: var(--text-large);\n opacity: 0.9;\n}\n.ds-page-header__actions {\n display: flex;\n flex: none;\n gap: var(--space-3);\n}\n\n/* sections of the page */\n.ds-section {\n padding: var(--space-8) 0;\n}\n.ds-section--alt {\n background: var(--color-surface);\n}\n.ds-section--tight {\n padding: var(--space-7) 0;\n}\n.ds-section--lift {\n position: relative;\n z-index: 1;\n margin-top: calc((var(--space-8) + var(--space-5) + 2vw) * -1);\n padding-top: 0;\n padding-bottom: var(--space-5);\n}\n.ds-section__head {\n max-width: 60ch;\n margin: 0 auto var(--space-7);\n text-align: center;\n}\n.ds-section__kicker {\n margin: 0 0 var(--space-2);\n color: var(--color-heading-alt);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n}\n.ds-section__title {\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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-section__lead {\n margin: var(--space-3) 0 0;\n font-size: var(--text-large);\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-6);\n}\n.ds-cols--side {\n grid-template-columns: minmax(0, 1fr) minmax(0, 3fr);\n}\n\n/* stats: one white card of figures that overlaps the slanted edge */\n.ds-stat {\n position: relative;\n z-index: 1;\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n margin-top: calc((var(--space-7) + 5vw) * -1);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-stat__item {\n padding: var(--space-5);\n border-left: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-stat__item:first-child {\n border-left: 0;\n}\n.ds-stat__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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n}\n.ds-stat__label {\n margin: 0;\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n}\n\n/* logo row, set as text */\n.ds-logos {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-4) var(--space-6);\n margin: 0;\n padding: 0;\n list-style: none;\n}\n.ds-logos__lead {\n margin: 0 0 var(--space-5);\n color: var(--color-text-muted);\n font-size: var(--text-ui);\n text-align: center;\n}\n.ds-logos__name {\n color: var(--color-text-muted);\n font-family: var(--font-heading);\n font-size: var(--text-large);\n font-weight: var(--weight-bold);\n letter-spacing: var(--heading-tracking);\n opacity: 0.8;\n}\n\n/* feature rows: copy beside a flat illustration block, sides alternating */\n.ds-feature {\n display: grid;\n grid-template-columns: repeat(2, minmax(0, 1fr));\n align-items: center;\n gap: var(--space-8);\n}\n.ds-feature + .ds-feature {\n margin-top: var(--space-8);\n}\n.ds-feature--flip .ds-feature__copy {\n order: 2;\n}\n.ds-feature__title {\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-heading);\n line-height: var(--line-heading);\n letter-spacing: var(--heading-tracking);\n text-transform: var(--heading-transform);\n}\n.ds-feature__text {\n margin: var(--space-3) 0 var(--space-4);\n}\n.ds-feature__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 font-size: var(--text-ui);\n}\n.ds-feature__point {\n display: flex;\n align-items: baseline;\n gap: var(--space-2);\n}\n.ds-feature__point::before {\n content: \"\\2713\";\n color: var(--color-success);\n font-weight: var(--weight-bold);\n}\n\n/* art: a tinted block holding white cards and plain shapes */\n.ds-art {\n position: relative;\n display: flex;\n flex-direction: column;\n justify-content: center;\n gap: var(--space-3);\n min-height: var(--size-art);\n padding: var(--space-6) var(--space-7);\n border-radius: var(--radius-page);\n background: color-mix(in srgb, var(--color-fill-3) 20%, var(--color-surface));\n overflow: hidden;\n}\n.ds-art--2 { background: color-mix(in srgb, var(--color-fill-4) 20%, var(--color-surface)); }\n.ds-art__blob {\n position: absolute;\n top: -20%;\n right: -10%;\n width: 46%;\n aspect-ratio: 1;\n border-radius: 50%;\n background: var(--color-fill-3);\n opacity: 0.55;\n}\n.ds-art--2 .ds-art__blob { background: var(--color-fill-4); top: auto; right: auto; bottom: -22%; left: -8%; }\n.ds-art__card {\n position: relative;\n display: flex;\n align-items: center;\n gap: var(--space-3);\n padding: var(--space-3) var(--space-4);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n color: var(--color-heading);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n box-shadow: var(--shadow-panel);\n}\n.ds-art__card--in { margin-left: var(--space-6); }\n.ds-art__card--out { margin-right: var(--space-6); }\n.ds-art__grow {\n flex: 1;\n min-width: 0;\n}\n.ds-art__line {\n display: block;\n width: 70%;\n height: var(--space-2);\n margin-top: var(--space-1);\n border-radius: var(--radius-pill);\n background: var(--color-surface-strong);\n}\n.ds-art__line--short { width: 40%; }\n\n/* grid: four cards, each led by an icon tile on one of the fills */\n.ds-grid {\n display: grid;\n grid-template-columns: repeat(4, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-grid__cell {\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 box-shadow: var(--shadow-panel);\n}\n.ds-grid__title {\n margin: var(--space-4) 0 var(--space-1);\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}\n.ds-grid__text {\n margin: 0 0 var(--space-3);\n font-size: var(--text-ui);\n}\n\n/* testimonials */\n.ds-quotes {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n gap: var(--space-5);\n}\n.ds-quote {\n display: flex;\n flex-direction: column;\n gap: var(--space-4);\n margin: 0;\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 box-shadow: var(--shadow-panel);\n}\n.ds-quote--lead {\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n}\n.ds-quote__text {\n flex: 1;\n margin: 0;\n font-size: var(--text-base);\n}\n.ds-quote__by {\n display: flex;\n align-items: center;\n gap: var(--space-3);\n font-size: var(--text-small);\n}\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-inverse-text);\n font-weight: var(--weight-bold);\n}\n.ds-avatar--4 { background: var(--color-fill-4); }\n.ds-avatar--plain {\n background: color-mix(in srgb, var(--color-inverse-text) 22%, transparent);\n}\n.ds-quote__name {\n display: block;\n font-weight: var(--weight-bold);\n}\n\n/* call to action: a gradient card */\n.ds-cta {\n display: flex;\n flex-wrap: wrap;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-5);\n padding: var(--space-7);\n border-radius: var(--radius-page);\n background: var(--fill-inverse);\n color: var(--color-inverse-text);\n box-shadow: var(--shadow-panel);\n}\n.ds-cta__title {\n margin: 0;\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}\n.ds-cta__text {\n margin: var(--space-1) 0 0;\n opacity: 0.9;\n}\n\n/* pricing: the tabs become a pill switch, the plans stand three across */\n.ds-tabs {\n display: inline-flex;\n gap: var(--space-1);\n padding: var(--space-1);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-control);\n background: var(--fill-panel);\n box-shadow: var(--shadow-panel);\n}\n.ds-tabs__tab {\n margin: 0;\n padding: var(--space-2) var(--space-5);\n border: 0;\n border-radius: var(--radius-control);\n}\n.ds-tabs__tab.is-current {\n background: var(--fill-button);\n color: var(--color-button-text);\n}\n.ds-tabsrow {\n display: flex;\n justify-content: center;\n margin-bottom: var(--space-5);\n}\n.ds-plans {\n display: grid;\n grid-template-columns: repeat(3, minmax(0, 1fr));\n align-items: stretch;\n gap: var(--space-5);\n}\n.ds-plan {\n display: flex;\n flex-direction: column;\n}\n.ds-plan .ds-panel__body {\n display: flex;\n flex: 1;\n flex-direction: column;\n}\n.ds-plan--best {\n border-top: var(--border-width-strong) var(--border-style) var(--color-button);\n}\n.ds-plan__price {\n margin: 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-display);\n font-weight: var(--weight-heading);\n line-height: var(--line-display);\n letter-spacing: var(--display-tracking);\n}\n.ds-plan__per {\n color: var(--color-text-muted);\n font-family: var(--font-body);\n font-size: var(--text-ui);\n font-weight: var(--weight-body);\n letter-spacing: 0;\n}\n.ds-plan__text {\n margin: var(--space-2) 0 var(--space-4);\n font-size: var(--text-ui);\n}\n.ds-plan .ds-feature__points {\n flex: 1;\n}\n\n/* footer */\n.ds-footer {\n padding: var(--space-7) 0 var(--space-5);\n background: var(--fill-bar-alt);\n color: var(--color-bar-alt-text);\n font-size: var(--text-ui);\n}\n.ds-footer__cols {\n display: grid;\n grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr));\n gap: var(--space-6);\n}\n.ds-footer__about {\n max-width: 34ch;\n margin: var(--space-3) 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-bold);\n opacity: 0.7;\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}\n.ds-footer__link:hover,\n.ds-footer__link.is-hover {\n text-decoration: var(--link-decoration-hover);\n opacity: 0.8;\n}\n.ds-footer__legal {\n margin: var(--space-6) 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) 22%, transparent);\n font-size: var(--text-small);\n opacity: 0.8;\n}\n\n@media (max-width: 960px) {\n .ds-hero__inner,\n .ds-feature,\n .ds-cols,\n .ds-cols--side {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-feature {\n gap: var(--space-5);\n }\n .ds-feature--flip .ds-feature__copy {\n order: 0;\n }\n .ds-grid,\n .ds-stat {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n .ds-stat__item:nth-child(3) {\n border-left: 0;\n }\n .ds-stat__item:nth-child(n + 3) {\n border-top: var(--border-width) var(--border-style) var(--color-border-muted);\n }\n .ds-quotes,\n .ds-plans {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-footer__cols {\n grid-template-columns: repeat(2, minmax(0, 1fr));\n }\n}\n@media (max-width: 640px) {\n .ds-wrap {\n padding: 0 var(--space-4);\n }\n .ds-nav__inner {\n justify-content: space-between;\n gap: var(--space-2);\n padding: 0 var(--space-4);\n }\n .ds-nav__signin {\n display: none;\n }\n .ds-hero {\n margin-top: calc(var(--size-nav-tall) * -1);\n padding-top: calc(var(--size-nav-tall) + var(--space-5));\n padding-bottom: calc(var(--space-8) + 12vw);\n }\n .ds-page-header {\n margin-top: calc(var(--size-nav-tall) * -1);\n padding-top: calc(var(--size-nav-tall) + var(--space-4));\n }\n .ds-page-header__inner {\n flex-direction: column;\n align-items: flex-start;\n }\n .ds-hero__title {\n font-size: var(--text-h1);\n }\n .ds-hero__art {\n padding-left: var(--space-4);\n }\n .ds-section {\n padding: var(--space-7) 0;\n }\n .ds-section--lift {\n padding-top: 0;\n padding-bottom: var(--space-4);\n }\n .ds-section__head {\n margin-bottom: var(--space-6);\n }\n .ds-feature + .ds-feature {\n margin-top: var(--space-7);\n }\n .ds-art {\n padding: var(--space-5);\n }\n .ds-grid,\n .ds-form__row {\n grid-template-columns: minmax(0, 1fr);\n }\n .ds-cta {\n padding: var(--space-5);\n }\n .ds-tabs {\n border-radius: var(--radius-panel);\n }\n .ds-tabs__tab {\n padding: var(--space-2) var(--space-3);\n }\n .ds-stat__item {\n padding: var(--space-4);\n }\n .ds-stat__figure {\n font-size: var(--text-h2);\n }\n}\n\n/* components shared across the era: menu, switch, tooltip, accordion, progress, avatar */\n.ds-menu {\n position: relative;\n}\n.ds-menu__button {\n display: inline-flex;\n align-items: center;\n gap: var(--space-1);\n padding: var(--space-1) var(--space-3);\n border-radius: var(--radius-control);\n color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n list-style: none;\n cursor: pointer;\n transition: var(--transition);\n}\n.ds-menu__button::-webkit-details-marker {\n display: none;\n}\n.ds-menu__button::after {\n content: \"\";\n display: inline-block;\n flex: none;\n width: 0;\n height: 0;\n border: calc(var(--text-small) * 0.3) solid transparent;\n border-top: calc(var(--text-small) * 0.36) solid currentColor;\n border-bottom-width: 0;\n font-size: var(--text-small);\n vertical-align: calc(var(--text-small) * 0.14);\n}\n.ds-menu__button:focus-visible,\n.ds-menu__button.is-focus {\n outline: var(--focus-ring);\n}\n.ds-menu__list {\n position: absolute;\n top: 100%;\n right: 0;\n z-index: 5;\n min-width: var(--size-menu);\n margin: var(--space-2) 0 0;\n padding: var(--space-2);\n border: var(--border-width) var(--border-style) var(--color-border-muted);\n border-radius: var(--radius-panel);\n background: var(--fill-panel);\n box-shadow: var(--shadow-dialog);\n list-style: none;\n}\n.ds-menu__link {\n display: block;\n padding: var(--space-2) 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-decoration: none;\n white-space: nowrap;\n transition: var(--transition);\n}\n.ds-menu__link:hover,\n.ds-menu__link.is-hover {\n background: var(--color-surface-alt);\n color: var(--color-heading);\n}\n.ds-switch {\n position: relative;\n display: inline-flex;\n align-items: center;\n gap: var(--space-2);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-ui);\n cursor: pointer;\n}\n.ds-switch__input {\n position: absolute;\n opacity: 0;\n pointer-events: none;\n}\n.ds-switch__track {\n position: relative;\n flex: none;\n width: calc(var(--space-5) * 1.75);\n height: var(--space-5);\n border-radius: var(--radius-pill);\n background: var(--color-border-strong);\n transition: var(--transition);\n}\n.ds-switch__track::after {\n content: \"\";\n position: absolute;\n top: calc(var(--space-1) / 2);\n left: calc(var(--space-1) / 2);\n width: calc(var(--space-5) - var(--space-1));\n height: calc(var(--space-5) - var(--space-1));\n border-radius: var(--radius-pill);\n background: var(--color-button-text);\n transition: var(--transition);\n}\n.ds-switch__input:checked + .ds-switch__track,\n.ds-switch.is-on .ds-switch__track {\n background: var(--fill-button);\n}\n.ds-switch__input:checked + .ds-switch__track::after,\n.ds-switch.is-on .ds-switch__track::after {\n left: calc(var(--space-5) * 0.75 + var(--space-1) / 2);\n}\n.ds-switch__input:focus-visible + .ds-switch__track,\n.ds-switch.is-focus .ds-switch__track {\n outline: var(--focus-ring);\n outline-offset: calc(var(--space-1) / 2);\n}\n.ds-tooltip {\n position: relative;\n display: inline-flex;\n align-items: center;\n justify-content: center;\n cursor: help;\n}\n.ds-tooltip--mark {\n width: calc(var(--space-4) + var(--space-1));\n height: calc(var(--space-4) + var(--space-1));\n border-radius: 50%;\n background: var(--color-surface-strong);\n color: var(--color-text);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-bold);\n line-height: 1;\n}\n.ds-tooltip:focus-visible,\n.ds-tooltip.is-focus {\n outline: var(--focus-ring);\n}\n.ds-tooltip__text {\n position: absolute;\n bottom: calc(100% + var(--space-2));\n left: 50%;\n z-index: 6;\n display: none;\n width: max-content;\n max-width: var(--size-tip);\n padding: var(--space-2) var(--space-3);\n border-radius: var(--radius-panel);\n background: var(--color-heading);\n color: var(--color-surface);\n font-family: var(--font-ui);\n font-size: var(--text-small);\n font-weight: var(--weight-body);\n line-height: var(--line-heading);\n text-align: left;\n white-space: normal;\n box-shadow: var(--shadow-control);\n transform: translateX(-50%);\n}\n.ds-tooltip:hover .ds-tooltip__text,\n.ds-tooltip:focus .ds-tooltip__text,\n.ds-tooltip.is-open .ds-tooltip__text {\n display: block;\n}\n.ds-accordion {\n min-width: 0;\n}\n.ds-accordion__item {\n border-bottom: var(--border-width) var(--border-style) var(--color-border-muted);\n}\n.ds-accordion__item:first-child > .ds-accordion__title {\n padding-top: 0;\n}\n.ds-accordion__item:last-child {\n border-bottom: 0;\n}\n.ds-accordion__item:last-child:not([open]) > .ds-accordion__title {\n padding-bottom: 0;\n}\n.ds-accordion__title {\n display: flex;\n align-items: center;\n justify-content: space-between;\n gap: var(--space-3);\n padding: var(--space-3) 0;\n color: var(--color-heading);\n font-family: var(--font-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n list-style: none;\n cursor: pointer;\n}\n.ds-accordion__title::-webkit-details-marker {\n display: none;\n}\n.ds-accordion__title::after {\n content: \"\";\n flex: none;\n width: calc(var(--text-large) * 0.7);\n height: calc(var(--text-large) * 0.7);\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-large) * 0.12)) no-repeat, linear-gradient(currentColor, currentColor) center / max(var(--border-width), calc(var(--text-large) * 0.12)) 100% no-repeat;\n color: var(--color-text-muted);\n font-size: var(--text-large);\n}\n.ds-accordion__item[open] > .ds-accordion__title::after {\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-large) * 0.12)) no-repeat;\n}\n.ds-accordion__title:hover,\n.ds-accordion__title.is-hover {\n color: var(--color-link);\n}\n.ds-accordion__title:focus-visible,\n.ds-accordion__title.is-focus {\n outline: var(--focus-ring);\n}\n.ds-accordion__body {\n padding: 0 0 var(--space-4);\n color: var(--color-text);\n font-size: var(--text-ui);\n}\n.ds-accordion__body p {\n margin: 0;\n}\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-inverse);\n}\n.ds-progress__bar--33 { width: 33%; }\n.ds-meter {\n display: flex;\n flex-direction: column;\n gap: var(--space-1);\n font-size: var(--text-small);\n}\n.ds-meter + .ds-meter {\n margin-top: var(--space-4);\n}\n.ds-meter__row {\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-meter__name {\n color: var(--color-heading);\n font-size: var(--text-ui);\n font-weight: var(--weight-bold);\n}\n.ds-progress__bar--33 { width: 33%; }\n.ds-meter--gap {\n margin-bottom: var(--space-4);\n}\n.ds-tooltip--mark {\n margin-left: var(--space-1);\n vertical-align: middle;\n}\n.ds-tooltip--start .ds-tooltip__text {\n left: 0;\n transform: none;\n}\n.ds-form__check > .ds-switch {\n flex: 1;\n min-width: 0;\n}\n.ds-nav__links .ds-menu__button {\n display: block;\n padding: var(--space-1) var(--space-3);\n border-radius: var(--radius-control);\n color: inherit;\n font-weight: var(--weight-ui);\n text-transform: var(--ui-transform);\n white-space: nowrap;\n opacity: 0.85;\n transition: var(--transition);\n}\n.ds-nav__links .ds-menu__button::after {\n margin-left: var(--space-1);\n}\n.ds-nav__links .ds-menu__list {\n right: auto;\n left: 0;\n}\n\n/* phone: the links fold into a menu behind a button; the brand and one action stay in the bar */\n.ds-nav__menu {\n display: none;\n}\n.ds-nav__menu > .ds-menu__button {\n gap: var(--space-2);\n padding: var(--space-1) var(--space-2);\n color: inherit;\n font-family: var(--font-ui);\n font-size: var(--text-ui);\n}\n.ds-nav__menu > .ds-menu__button::before {\n content: \"\";\n box-sizing: border-box;\n flex: none;\n width: var(--text-ui);\n height: calc(var(--text-ui) * 0.75);\n border-top: max(var(--border-width), calc(var(--text-ui) * 0.12)) solid currentColor;\n border-bottom: max(var(--border-width), calc(var(--text-ui) * 0.12)) solid currentColor;\n background: linear-gradient(currentColor, currentColor) center / 100% max(var(--border-width), calc(var(--text-ui) * 0.12)) no-repeat;\n}\n.ds-nav__menu > .ds-menu__button::after {\n content: none;\n}\n.ds-nav__menu .ds-menu__link {\n border-left: var(--border-width-strong) var(--border-style) transparent;\n}\n.ds-page:not(:has(.ds-view:target)) .ds-nav__menu .ds-menu__link[href=\"#home\"],\n.ds-page:has(#home:target) .ds-nav__menu .ds-menu__link[href=\"#home\"],\n.ds-page:has(#pricing:target) .ds-nav__menu .ds-menu__link[href=\"#pricing\"],\n.ds-page:has(#guide:target) .ds-nav__menu .ds-menu__link[href=\"#guide\"],\n.ds-page:has(#signup:target) .ds-nav__menu .ds-menu__link[href=\"#signup\"] {\n border-left-color: var(--color-accent);\n background: var(--color-surface-alt);\n color: var(--color-heading);\n font-weight: var(--weight-bold);\n}\n/* the full row needs about 820px with the widest type set, so it folds before that */\n@media (max-width: 900px) {\n .ds-nav__menu {\n display: block;\n flex: none;\n }\n .ds-nav > .ds-nav__links,\n .ds-nav__inner > .ds-nav__links {\n display: none;\n }\n .ds-nav__inner {\n justify-content: space-between;\n gap: var(--space-4);\n }\n}\n@media (min-width: 641px) and (max-width: 900px) {\n .ds-nav__actions {\n margin-left: auto;\n }\n}\n@media (max-width: 640px) {\n .ds-nav__inner {\n gap: var(--space-2);\n }\n}\n.ds-nav__links li:has(> .ds-menu) {\n align-items: center;\n}\n", "specimen.html": "\n\n\n\n\nchronoskin: SaaS gradient landing page specimen\n\n\n\n\n\n
\n
\n \n \n chronoskin\n \n \n
\n Sign in\n Start free\n
\n
\n Menu\n \n
\n
\n
\n\n
\n
\n
\n
\n

New Reminders that send themselves

\n

Invoices that get paid while you do the work

\n

chronoskin writes the invoice, sends it, follows up politely and tells you the day the money lands.

\n
\n Start a free trial\n See how it works\n
\n

14 days free. No card needed.

\n
\n
\n
\n
Invoices, March
\n
Harbour Bakery1,240.00Paid
\n
Lindqvist Studio860.00Sent
\n
Okafor and Reyes2,415.50Due Friday
\n
Tern Cycles390.009 days late
\n
Marrow Press3,100.00Paid
\n
\n
\n

Paid this month

\n

18,420

\n \n
\n
\n
\n
\n\n
\n
\n

11 days

sooner, on average, than a hand-sent invoice

\n

94%

of invoices paid without a second reminder

\n

38,000

studios and freelancers sending every month

\n

4 min

from signing up to the first invoice sent

\n
\n
\n\n
\n
\n

Trusted by small teams that would rather not chase money

\n
    \n
  • Harbour Bakery
    • \n
  • lindqvist
    • \n
  • TERN
    • \n
  • Marrow Press
    • \n
  • okafor+reyes
    • \n
  • Fieldnote
    • \n
\n
\n
\n\n
\n
\n
\n

How it works

\n

From finished job to money in the bank

\n

Three steps, and chronoskin does two of them.

\n
\n
\n
\n

Write

\n

An invoice in the time it takes to name the client

\n

Pick a client and the lines fill in from your last job: rates, tax and payment terms included.

\n
    \n
  • Your logo, your numbering, your wording
    • \n
  • Hours pulled in from a timesheet
    • \n
  • Tax worked out for 40 countries
    • \n
\n Read the guide to writing invoices\n
\n
\n \n
Invoice 00421,240.00
\n
Harbour BakeryDraft
\n
Design, 16 hours960.00
\n
\n
\n
\n
\n

Follow up

\n

Reminders with better manners than yours at 11pm

\n

Choose a tone and a rhythm once. chronoskin nudges before the due date, on it, and after, and stops the moment the payment arrives.

\n
    \n
  • Three tones, from gentle to firm
    • \n
  • Pay by card or transfer from the reminder itself
    • \n
\n Reminders are in every plan\n
\n
\n \n
A friendly nudge3 days before
\n
Due todayOn the day
\n
Thank you, receivedPaid
\n
\n
\n
\n
\n\n
\n
\n
\n

Everything around the invoice, too

\n

The small jobs that eat a Friday afternoon.

\n
\n
\n
\n \n

Time tracking

\n

Start a timer on a job and bill the hours with one click.

\n Timers\n
\n
\n \n

Reports

\n

Income by client, by month and by what is still owed.

\n Reports\n
\n
\n \n

Card payments

\n

A pay button on every invoice, settled in two working days.

\n Fees\n
\n
\n \n

Quotes

\n

Send a quote first; it turns into the invoice when accepted.

\n Quotes\n
\n
\n
\n
\n\n
\n
\n
\n

Said by people who used to dread month end

\n
\n
\n
\n

I sent four invoices from a train platform and three were paid before I got home. I have stopped keeping a spreadsheet of who owes what.

\n
ILIngrid LindqvistIllustrator, Gothenburg
\n
\n
\n

The reminders are kinder than I would be and they work better. Late payers went from one in three to one in twenty.

\n
TOTomas OkaforPartner, Okafor and Reyes
\n
\n
\n

Our bookkeeper asked what we had changed. The answer was nothing, except the tool that sends the invoices.

\n
MPMaya PrenticeOwner, Marrow Press
\n
\n
\n
\n
\n\n
\n
\n
\n
\n

Send your first invoice today

\n

Free for 14 days, then from 9 a month.

\n
\n
\n Start a free trial\n Compare plans\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Product
    3. \n
  3. Pricing
    4. \n
\n

One price for the whole team

\n

Every plan sends unlimited reminders. Change or cancel in two clicks.

\n
\n
\n Start a free trial\n
\n
\n
\n\n
\n
\n
\n \n
\n
\n
\n

Solo

1 person
\n
\n

9 a month

\n

For one person sending a handful of invoices.

\n
    \n
  • 20 invoices a month
    • \n
  • Automatic reminders
    • \n
  • Card payments
    • \n
\n Choose Solo\n
\n
\n
\n

Studio

Most chosen
\n
\n

29 a month

\n

For a small team with regular clients.

\n
    \n
  • 200 invoices a month
    • \n
  • Five people, shared clients
    • \n
  • Time tracking and quotes
    • \n
  • Reports by client
    • \n
\n Choose Studio\n
\n
\n
\n

Agency

New
\n
\n

79 a month

\n

For agencies billing many clients in several currencies.

\n
    \n
  • 2,000 invoices a month
    • \n
  • 25 people and approval steps
    • \n
  • Export to your accounts package
    • \n
\n Choose Agency\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n

What each plan includes

\n
\n \n \n \n \n \n \n \n \n \n \n \n
IncludedSoloStudioAgency
Invoices a month202002,000
People1525
Clients151501,500
Currencies1340
Card fee per payment ?Charged by the card company, passed on at cost.2.4%1.9%1.4%
\n
\n
\n

Prices are per team, not per person, and exclude tax. A yearly plan is billed once.

\n
\n
\n

Common questions

\n
\n
\n
\n What happens after the trial?\n

You pick a plan or the account pauses. Nothing is deleted for 90 days.

\n
\n
\n Can I change plan mid-month?\n

Yes. You pay the difference for the days that are left.

\n
\n
\n Do my clients need an account?\n

No. They open a link, see the invoice and pay.

\n
\n
\n
\n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Guide
    3. \n
  3. Your first invoice
    4. \n
\n

The guide

\n

Five short pages, from an empty account to a paid invoice.

\n
\n
\n Try it yourself\n
\n
\n
\n\n
\n
\n
\n \n \n
\n
\n
\n
\n
\n

Your first invoice

\n

An invoice needs four things: who it is for, what was done, what it costs and when it is due. chronoskin remembers the first and the last.

\n

Add the client

\n

Type a name. If you have billed them before, their address, currency and usual terms appear; if not, fill in the address and choose terms of 14 or 30 days.

\n

Add the lines

\n

Each line is a description, a quantity and a rate. Hours from a running timer can be dropped in as a line.

\n

Numbering

\n

Invoices are numbered in order, starting from INV-0001. To carry on from an older system, set the next number in Settings before you send anything.

\n

Before you send

\n
    \n
  • Check the due date: it is counted from today, not from the job.
    • \n
  • Choose a reminder tone, or switch reminders off for this client.
    • \n
  • Preview the invoice as your client will see it.
    • \n
\n
\n
\n
\n
\n

What the labels mean

\n
\n

Every invoice carries one of these from the moment it is saved.

\n
\n Draft\n Sent\n Viewed\n Paid\n Due soon\n Late\n
\n
\n
\n
\n \n

No questions on this page yet

\n

If a step is unclear, ask. The answer is added to the guide for the next reader.

\n Ask the first question\n
\n \n
\n
\n
\n
\n\n
\n
\n
\n
\n
    \n
  1. chronoskin
    2. \n
  2. Pricing
    3. \n
  3. Free trial
    4. \n
\n

Start your free trial

\n

Fourteen days of the Studio plan. You choose a plan at the end, or walk away.

\n
\n
\n
\n\n
\n
\n
\n

Your account

I already have one
\n
\n
\n
\n

No card needed. We ask for one only when you pick a plan.

\n

Not sent yet. One field below needs another look.

\n
\n
\n
\n \n \n
\n
\n \n \n
\n
\n
\n \n \n This address is missing its ending, such as .com or .se.\n
\n
\n
\n \n \n Sets your currency and tax rules.\n
\n
\n \n \n
\n
\n
\n \n \n
\n
\n
\n \n Back to plans\n \n \n
\n
\n
\n
\n
\n
\n

What happens next

\n
\n
Setting up1 of 3 steps
\n
    \n
  • \n
    Confirm your addressNow
    \n

    A six-figure code, valid for an hour

    \n
    • \n
  • \n
    Add a logo and a client2 min
    \n

    Or skip both and use the sample client

    \n
    • \n
  • \n
    Send an invoice2 min
    \n

    To a client, or to yourself as a test

    \n
    • \n
\n
\n
\n
\n
\n

Leave without an account?

\n

What you have typed is not saved. You can come back and start again at any time.

\n
\n Keep going\n Leave\n
\n
\n
\n
\n
\n
\n
\n\n\n\n\n\n", "style.json": "{\n \"id\": \"v1.saas-gradient.landing.s01.p02.t03.u03\",\n \"library\": \"2026.10.09-1036\",\n \"era\": {\n \"slug\": \"saas-gradient\",\n \"years\": [\n 2016,\n 2021\n ]\n },\n \"archetype\": \"landing\",\n \"mode\": \"mix\",\n \"markup\": \"modern\",\n \"viewport\": {\n \"width\": 1440,\n \"fluid\": false,\n \"responsive\": true\n },\n \"source\": \"https://chrono.skin/s/v1-sg-1233\",\n \"short\": \"v1-sg-1233\"\n}\n", "tokens.css": "/* @part palette */\n:root {\n --color-page: #f7f9fb;\n --color-canvas: #f7f9fb;\n --color-surface: #ffffff;\n --color-surface-alt: #f0f5f9;\n --color-surface-strong: #e1eaf1;\n --color-bar: #f0f5f9;\n --color-bar-text: #0e304b;\n --color-bar-alt: #033156;\n --color-bar-alt-text: #c3d4e3;\n --color-inverse: #2f93d6;\n --color-inverse-text: #ffffff;\n --color-text: #576f7f;\n --color-text-muted: #8ba7bd;\n --color-heading: #0e304b;\n --color-heading-alt: #1f8fa3;\n --color-link: #3276e8;\n --color-link-quiet: #56708a;\n --color-link-visited: #5a6fc4;\n --color-link-hover: #1f8fa3;\n --color-link-active: #033156;\n --color-border: #dbe5ee;\n --color-border-strong: #b9c8d8;\n --color-border-muted: #e9f0f5;\n --color-accent: #25a2b6;\n --color-accent-text: #ffffff;\n --color-accent-alt: #f2994a;\n --color-fill-1: #22a3b7;\n --color-fill-2: #4284fb;\n --color-fill-3: #f5a742;\n --color-fill-4: #7a68ee;\n --color-button: #033156;\n --color-button-text: #ffffff;\n --color-button-hover-text: #ffffff;\n --color-button-secondary: #ffffff;\n --color-button-secondary-text: #033156;\n --color-input: #ffffff;\n --color-input-text: #0e304b;\n --color-input-border: #b9c8d8;\n --color-disabled: #dfeaf1;\n --color-disabled-text: #9eacbf;\n --color-danger: #e04f5f;\n --color-danger-surface: #fdf1f2;\n --color-success: #49b882;\n --color-warning: #f2a93b;\n --color-notice: #e3f4f6;\n --color-notice-text: #12707f;\n --color-focus: #4284fb;\n --color-shadow: rgb(3 49 86 / 0.1);\n --color-overlay: rgb(3 49 86 / 0.55);\n}\n\n/* @part type */\n:root {\n --font-body: Lato, \"Lucida Grande\", \"Segoe UI\", sans-serif;\n --font-heading: Poppins, Montserrat, Futura, \"Century Gothic\", sans-serif;\n --font-ui: Lato, \"Lucida Grande\", \"Segoe UI\", sans-serif;\n --font-mono: \"Fira Mono\", \"Courier New\", monospace;\n --text-base: 15px;\n --text-small: 12px;\n --text-ui: 13px;\n --text-large: 18px;\n --text-display: 42px;\n --text-h1: 32px;\n --text-h2: 23px;\n --text-h3: 16px;\n --line-body: 1.55;\n --line-heading: 1.2;\n --line-display: 1.1;\n --weight-body: 400;\n --weight-bold: 700;\n --weight-heading: 500;\n --weight-display: 700;\n --weight-ui: 700;\n --heading-transform: none;\n --heading-tracking: -0.2px;\n --display-tracking: -1px;\n --figure-shift: 0em;\n --ui-transform: uppercase;\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: 2px;\n --border-style: solid;\n --radius-control: 5px;\n --radius-panel: 5px;\n --radius-pill: 3px;\n --radius-page: 8px;\n --shadow-panel: 0 1px 3px var(--color-shadow), 0 10px 28px var(--color-shadow);\n --shadow-control: 0 1px 2px var(--color-shadow), 0 3px 8px var(--color-shadow);\n --shadow-control-hover: 0 2px 4px var(--color-shadow), 0 8px 18px var(--color-shadow);\n --shadow-control-pressed: inset 0 1px 3px var(--color-shadow);\n --shadow-dialog: 0 4px 10px var(--color-shadow), 0 24px 64px var(--color-shadow);\n --shadow-text: none;\n --fill-page: var(--color-page);\n --fill-bar: var(--color-bar);\n --fill-bar-alt: var(--color-bar-alt);\n --fill-inverse: linear-gradient(200deg, var(--color-fill-2), var(--color-fill-1) 85%);\n --fill-accent: var(--color-accent);\n --fill-panel: var(--color-surface);\n --fill-button: linear-gradient(to bottom, color-mix(in srgb, var(--color-button) 88%, white), var(--color-button));\n --fill-button-hover: linear-gradient(var(--color-button), var(--color-button));\n --fill-button-secondary: var(--color-button-secondary);\n --fill-input: var(--color-input);\n --focus-ring: 2px solid var(--color-focus);\n --transition: box-shadow 0.12s ease-out, background-color 0.12s ease-out;\n --backdrop-blur: 0px;\n}\n" } }